wstaw - Kurs HTML i CSS
HTML dla zielonych / Ćwiczenia...głównej (czyli w pliku index.html). O tym co to są i jak się tworzy podstrony przeczytasz w podrozdziale: Ramy dokumentu. Na podstronie linki.html wstaw odsyłacze do ciekawych stron w internecie, na których czytelnik będzie mógł znaleźć więcej informacji na opisywany przez Ciebie temat. Jeżeli tworzysz stronę o sobie, możesz tutaj umieścić odnośniki do Twojego profilu w serwisach społecznościowych: Facebook, Twitter, YouTube, LinkedIn itp. Stwórz podstronę o nazwie kontakt.html (nowy plik...
Indeks, wyszukiwarka / Skrypt indeksu, wyszukiwarki...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): /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl} * @copyright NIE usuwaj tego...
- Menu rozwijane, otwierane, wysuwane / Skrypt menu rozwijanego, otwieranego, wysuwanego
...Podstawy stylów CSS (m.in. arkusze stylów, klasy selektorów i pozycjonowanie absolutne) Skrypt menu rozwijanego, otwieranego, wysuwanego Aby wstawić na swoją stronę menu rozwijane, 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 menu.js: /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl} * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!) */ function Menu(id...
- Indeks, wyszukiwarka / Automatyczne sortowanie
...Można ustawić specjalną opcję, tak aby sortowanie alfabetyczne odbywało się automatycznie: var indeks = new Indeks('indeks'); indeks.wstaw(new Array( ['Hasło 1','adres1'], ['Hasło 2','adres2'], ['Hasło 3','adres3'] ), null, null, true); Ustawienie tej opcji może znacznie wydłużyć generowanie indeksu! Aby wyeliminować tę niedogodność, a jednocześnie nie musieć przy każdym dodawaniu haseł do indeksu żmudnie układać je według alfabetu, można testowo użyć takiego kodu: var...
HTML dla zielonych / Koniec linii HTML <br>...w miejscu, gdzie chcesz zakończyć linię tekstu. Jak przenieść tekst na dół HTML? Aby w języku HTML przenieść tekst o jedną linijkę na dół, wstaw przed nim znacznik <br>. Jak zrobić tekst pod tekstem w HTML? Aby ustawić dwie linijki tekstu jedna pod drugą, umieść pomiędzy nimi znacznik <br>.
- Widżety HTML / Ćwiczenia
Otwórz w edytorze HTML stronę (plik index.html) stworzoną w ramach ćwiczeń z poprzedniego rozdziału. Znajdź w serwisie YouTube przynajmniej jeden ciekawy film powiązany tematycznie z Twoją stroną. Użyj funkcji "Udostępnij / Umieść", aby skopiować kod HTML widżetu z wybranym filmem. Wstaw film bezpośrednio w treści swojej strony. Otwórz Twoją stronę w przeglądarce i sprawdź, czy można uruchomić odtwarzanie filmu.
Szablon strony na DIV-ach / Semantyczny szablon strony...Rezultat bez stylizacji: Nagłówek szablonu Menu nawigacyjne Dodatkowe informacje Treść strony Stopka serwisu W wyróżnionych fragmentach wstawimy nieistotną tutaj zawartość w celu wypełniania szablonu przykładową treścią. Przygotowując własny szablon, wstaw tam odpowiednio: Nagłówek szablonu Można tutaj umieścić logo witryny. W nagłówku często wstawia się dodatkowo powtórzone poziome menu, zawierające najważniejsze i najczęściej używane odnośniki serwisu. Alternatywnie takie menu...
- Dobre praktyki / Przykazania webmastera
...budowania układu strony Nawigacja musi być intuicyjna i wygodna Unikaj używania atrybutu target="..." dla odsyłaczy Nie używaj znaczników img do wstawiania grafiki tworzącej oprawę graficzną strony Zawsze wypełniaj atrybut alt="..." dla ilustracji Zapisuj ilustracje we właściwych formatach graficznych Stosuj fizycznie pomniejszone miniatury zdjęć Strona powinna być czytelna bez grafiki Stosuj inny tytuł na każdej podstronie Używaj tytułów nagłówkowych Dla każdego widocznego pola...
- Aktualizacja / Data aktualizacji strony
...mówiąc już o tym, że jest to bardzo uciążliwe - szczególnie w przypadku większej ilości stron. Aby pozbyć się wszystkich tych problemów, wystarczy wstawić na każdą ze stron prościutki "skrypcik" (programik), który automatycznie wypisze datę ostatniej modyfikacji strony. UWAGA! Skrypt tego typu nie zawsze działa! Informacja o dacie modyfikacji dokumentu pochodzi z nagłówka HTTP wysyłanego przez serwer WWW, na którym znajduje się strona. Ponieważ wysyłanie tych nagłówków nie jest obowiązkowe...
- Formularze HTML / Alternatywny sposób wysłania formularza
...nie potrzebne są żadne dodatkowe funkcje na serwerze WWW. Dzięki niemu możemy próbować ominąć opisany błąd systemowy. Aby zastosować taki skrypt, wstaw przed formularzem (najlepiej w treści nagłówkowej dokumentu) następujący kod: <script> // www.kurshtml.edu.pl function mail_form(f) { function url_encode(text) { return text.replace(/%/g, '%25').replace(/\?/g, '%3F').replace(/=/g, '%3D').replace(/&/g, '%26').replace(/#/g, '%23').replace(/\r/g, '%0D').replace(/\n/g, '%0A'); } for...