podstrony - Kurs HTML i CSS
AutoIFRAME / Automatyczne dopasowanie wysokości ramki HTML...pionowy do przewijania całej strony głównej. Niestety takie rozwiązanie nie zawsze jest możliwe, bo na początku nie wiemy jak długie będą nasze podstrony. Poza tym jeśli ustalimy zbyt dużą wysokość, cała strona główna bardzo się rozciągnie, a po wczytaniu do ramki lokalnej krótkiej treści, na jej końcu pozostanie bardzo dużo wolnego miejsca, co będzie wyglądało dosyć dziwnie i na pewno nie będzie wygodne dla użytkownika. Czy można sobie zatem jakoś poradzić? Oczywiście! Skrypt...
- AutoIFRAME / Dlaczego to nie działa?
...autoiframe.js? Czy odwołanie aby nie zostało wstawione w miejscu innym niż nagłówek dokumentu (<head>...</head>)? Czy w tym samym katalogu co podstrony znajduje się plik autoiframe.js z zawartością skryptu? Czy plik nie został nazwany przypadkiem Autoiframe.JS (wielkość liter ma znaczenie!) itp.? Czy zawartość wszystkich skryptów została skopiowana w trybie prostym? Niektóre edytory razem z kopiowanym kodem wklejają formatowanie tekstu. Aby temu zapobiec, wklej najpierw kod do programu...
HTML dla zielonych / Wstawienie obrazka HTML <img src alt>...wielu działów w serwisie oraz dużej ilości plików. Wtedy w katalogu głównym znajduje się zazwyczaj jedynie strona główna index.html, a wszystkie podstrony oraz pliki są umieszczone w katalogach podrzędnych. Poprawnie: ../../katalog2/katalog2a/plik.gif Niepoprawnie: C:\www\katalog2\katalog2a\plik.gif, katalog2/katalog2a/plik.gif, ../katalog2/katalog2a/plik.gif Ten przykład jest już dość zaawansowany. Jeśli go zrozumiesz, możesz powiedzieć, że ścieżki dostępu "masz w małym palcu" 🙂...
- HTML dla zielonych / Odsyłacz do adresu internetowego HTML <a "http, https">
...jest następująca: <a href="adres internetowy">opis odsyłacza</a> Zasady wpisywania "opisu odsyłacza" są takie same jak w przypadku odsyłacza do podstrony. Natomiast jako: "adres internetowy" należy wpisać adres miejsca w Internecie, gdzie chcemy się przenieść (np.: http://www.onet.pl). Adres strony internetowej zawsze musi rozpoczynać się od http:// lub https:// Odsyłacz taki jest przydatny, jeśli chcemy umieścić w swoim serwisie tzw. linki do dowolnych stron w obrębie całego Internetu...
- Odsyłacze HTML / Odsyłacz obrazkowy <a href, img, map, area>
...dostępu" należy podać lokalizację na dysku, gdzie znajduje się żądany obrazek. Zasady wpisywania adresu są analogiczne jak w przypadku odsyłaczy do: podstrony, etykiety, adresu internetowego, poczty e-mail czy dowolnych innych odsyłaczy (w zależności od wybranego typu odsyłacza). Odsyłacz ten zostanie uruchomiony, gdy klikniemy myszką obrazek, do którego podajemy ścieżkę dostępu. Dzięki niemu możemy stworzyć np. efektowne przyciski odsyłaczowe w menu strony. Obrazki przycisków najlepiej...
- Nagłówek i treść HTML / Autor strony <meta "author", link "author">
...<head> <link rel="author" href="lokalizacja"> </head> gdzie jako lokalizacja należy podać jedną z następujących wartości: ścieżka dostępu do podstrony w obrębie tego samego serwisu adres zewnętrznej strony (rozpoczynający się od http:// lub https://) w innym serwisie - np. jeśli autor publikuje tutaj gościnnie, ale prowadzi również własny serwis adres e-mail (rozpoczynający się od mailto:), którym posługuje się autor strony W odróżnieniu od znacznika <meta author> element ten...
Szablon strony na DIV-ach / Responsywny szablon...sposób tworzenia serwisów przeznaczonych dla urządzeń mobilnych. Koncepcja pozornie jest bardzo prosta: przygotowujemy drugą wersję każdej podstrony w naszym serwisie, która będzie lepiej przystosowana do urządzeń mobilnych. Do najczęstszych tego typu zabiegów można zaliczyć: Usunięcie elementów strony, które mogą być mało przydatne użytkownikom mobilnym Przesunięcie kolumny menu na początek lub koniec treści bądź umieszczenie jej w otwieranym menu Dopasowanie rozmiaru czcionki...
- Aktualizacja / System newsów
...w tym samym skrypcie): Data, tytuł, treść: news(dzień,miesiąc,rok, 'Tytuł','Treść newsa...'); Data, tytuł, treść, adres "Więcej..." (lokalizacja podstrony albo adres internetowy): news(dzień,miesiąc,rok, 'Tytuł','Treść newsa...', 'adres'); Data, tytuł, treść, adres "Więcej...", nazwa ramki (lub '_blank' jeśli chcemy wczytać stronę w nowym oknie): news(dzień,miesiąc,rok, 'Tytuł','Treść newsa...', 'adres','ramka'); Data, tytuł, treść, adres "Więcej...", nazwa ramki, autor...
- Przeglądarka zdjęć
...zdjęć Inicjalizacja Wymagana wiedza Konstruowanie ścieżek dostępu do obrazków Podstawy stylów CSS (m.in. arkusze stylów) Odsyłacze do podstrony Przykład przeglądarki zdjęć /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl} * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!) */ function PrzegladarkaZdjec(id, zdjecia) { this.czas = 5; // czas przejścia w trybie pokazu slajdów [sek] this.id = id; this.zdjecia = zdjecia...
- Indeks, wyszukiwarka / Skrypt indeksu, wyszukiwarki
Spis treści Wymagana wiedza Skrypt indeksu, wyszukiwarki Wieloznacznik (wildcard) Wymagana wiedza Odsyłacze do podstrony Wczytywanie stron do ramki lokalnej Podstawy stylów CSS (m.in. arkusze stylów) Skrypt indeksu, wyszukiwarki Aby wstawić na swoją stronę indeks z dodatkową funkcją wyszukiwarki, postępują według poniższych instrukcji: Utwórz w swoim edytorze HTML nowy dokument. Wklej do niego poniższy kod i zapisz w pliku indeks.js (koniecznie użyj kodowania utf-8)...