name - Kurs HTML i CSS
Podcast HTML / #2 Nagłówek i treść HTML...zawsze należy stosować <meta charset="utf-8">, zwłaszcza pisząc po polsku, aby uniknąć błędnego wyświetlania polskich liter. Opis zawartości: <meta name="description"> zachęca internautów do odwiedzenia strony, wyświetlając opis w wyszukiwarkach (np. Google). Język strony: atrybut lang w znaczniku <html> (np. lang="pl" dla języka polskiego) jest nieobowiązkowy, ale ułatwia pracę automatycznym tłumaczom. Roboty: znacznik <meta name="robots"> steruje zachowaniem robotów-indekserów...
Selektory pseudoklas CSS / Zaznaczenie :checked...input:checked, option:checked { margin-left: 30px } a w dowolnym miejscu strony: <form action="?"> <fieldset> <input type="radio" checked name="pole_opcji"> <input type="radio" name="pole_opcji"> </fieldset> <fieldset> <input type="checkbox" checked> <input type="checkbox"> </fieldset> <select size="3"> <option selected>Opcja 1</option> <option>Opcja 2</option> <option>Opcja 3</option> </select> </form> otrzymamy formularz, w którym zaznaczone pola mają...
- Selektory pseudoklas CSS / Domyślne :default
...option:default, button:default { margin-left: 30px } a w dowolnym miejscu strony: <form action="?"> <fieldset> <input type="radio" checked name="pole_opcji" class="przyklad_domyslne"> <input type="radio" name="pole_opcji" class="przyklad_domyslne"> </fieldset> <select size="3"> <option selected class="przyklad_domyslne">Opcja 1</option> <option class="przyklad_domyslne">Opcja 2</option> <option class="przyklad_domyslne">Opcja 3</option> </select> <div> <button...
AutoIFRAME / Kilka ramek AutoIFRAME...takiej ramki należy ustawić odrębny identyfikator id="...". Na przykład tak mógłby wyglądać fragment strony głównej serwisu: <iframe src="..." name="..." id="autoiframe" width="100%" height="560">...</iframe> <iframe src="..." name="..." id="autoiframe2" width="100%" height="560">...</iframe> Nic nie stoi na przeszkodzie, aby wstawić więcej niż dwie ramki <iframe>...</iframe> - każda kolejna z innym identyfikatorem id="...". Następnie na końcu wszystkich podstron wczytywanych do ramki...
- Komendy CSS3 / Mowa CSS
...Inicjalizacja auto Zastosowanie wszystkie elementy Dziedziczenie nie Procenty nie Media speech voice-family Rodzina głosów Wartość [[<name> | <generic-voice>],]* [<name> | <generic-voice>] | preserve Inicjalizacja zależy od przeglądarki Zastosowanie wszystkie elementy Dziedziczenie tak Procenty nie Media speech voice-pitch Wysokość głosu Wartość <frequency> && absolute | [[x-low | low | medium | high | x-high] || [<frequency> | <semitones> | <percentage>]]...
- HTML dla zielonych / Ramy dokumentu HTML <!doctype, html, head, meta charset "description", title, body>
...ramy każdego dokumentu w formacie HTML (istnieją również inne podobne szablony): <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="description" content="Tu wpisz opis zawartości strony"> <title>Tu wpisz tytuł strony</title> </head> <body> Tu wpisuje się treść strony </body> </html> UWAGA! Powyższy szablon dotyczy tzw. kodu źródłowego, dlatego jeżeli używasz edytora graficznego (np.: FrontPage), koniecznie musisz się przełączyć w tryb bezpośredniej edycji kodu...
- Nagłówek i treść HTML / Strona mobilna <link media>
...dostosować stronę do urządzeń mobilnych HTML? Aby dostosować stronę do urządzeń mobilnych w HTML, można użyć meta tagu viewport. Przykład: <meta name="viewport" content="width=device-width, initial-scale=1.0">. Ten tag umożliwia przeglądarce odpowiednie skalowanie i dostosowanie widoku do szerokości ekranu urządzenia. Jak zrobić stronę mobilną? Aby zrobić stronę mobilną, można użyć znacznika <link> z atrybutem media="..." do wskazania adresu strony dedykowanej urządzeniom mobilnym...
- Nagłówek i treść HTML / Plik robots.txt
Spis treści robots.txt User-Agent Disallow Allow Wzorce dopasowania robots.txt Znacznik <meta name="robots"> jest przydatny w celu określania dostępu przez roboty do pojedynczych dokumentów HTML. Okazuje się jednak mało praktyczny, jeśli chcielibyśmy zablokować dostęp robotom-indekserom np. do wszystkich dokumentów z określonego katalogu serwisu albo wręcz hurtowo do wszystkich plików witryny, tak aby nie pojawiały się w wynikach wyszukiwania np. Google. Znacznik ten okazuje się wręcz...
- Odsyłacze HTML / Blokada indeksowania odsyłaczy <a "nofollow, ugc, sponsored">
...czyli specjalnych programów zbierających informacje o stronach w Internecie, wykorzystywane później przez wyszukiwarki. Element <meta name="robots" content="nofollow"> powoduje, że roboty sieciowe nie będą podążać za żadnymi linkami umieszczonymi w dokumencie. Czasami jednak chcielibyśmy zablokować uwzględnianie tylko wybranych odsyłaczy. Taka sytuacja najczęściej ma miejsce, kiedy wstawiamy na swojej stronie system komentarzy. Spammerzy lub spamboty (automaty spamujące) często...
- Szablon strony na DIV-ach / Responsywny szablon
...najpierw musimy wstawić w nagłówku dokumentu, tzn. w dowolnym miejscu pomiędzy znacznikami <head> i </head>, następuje polecenie: <meta name="viewport" content="width=device-width, initial-scale=1"> Oznacza ono, że przeglądarka mobilna nie musi pomniejszać strony, ponieważ to my zadbamy o to, aby strona była wygodna w odbiorze na urządzeniach przenośnych [zobacz: Skalowanie]. Responsywne obrazki Następnie powinniśmy zadbać, aby w miarę możliwości wszystkie ilustracje na stronie...