head - Kurs HTML i CSS
Nagłówek i treść HTML / Ikona strony <link "shortcut icon">(interpretuje: Internet Explorer, Firefox, Opera 7, Chrome) <head> <link rel="shortcut icon" href="ścieżka dostępu"> </head> gdzie jako "ścieżka dostępu" należy podać lokalizację, w której znajduje się plik ikony - np.: favicon.ico Polecenie to pozwala dodać ikonkę (favicon.ico), która będzie widoczna w przeglądarce przy adresie naszej strony. Typowy rozmiar ikony to 16x16 pikseli. W systemie Windows jest dodatkowa możliwość umieszczenia skrótu na pulpicie - wtedy przydatna może być ikona o...
- Nagłówek i treść HTML / Tytuł strony <title>
<head> <title>Tytuł strony</title> </head> Każdy dokument HTML (podstrona serwisu) posiada własny tytuł. Może on zawierać dowolny tekst, zaleca się jednak, aby nie był zbyt długi (najwyżej kilka wyrazów). Powinien on również odnosić się do treści zawartych na danej stronie. Tytuł pojawia się na belce tytułowej przeglądarki internetowej (na samej górze okna programu, na karcie ze stroną), a także w wyszukiwarkach sieciowych, po odnalezieniu Twojej strony - dlatego właśnie nie może on być zbyt...
- Nagłówek i treść HTML / Strona kanoniczna <link "canonical">
...każdej wersji takiej strony, która różni się adresem URL od wersji podstawowej, należy podać bezpośredni adres prowadzący do wersji kanonicznej: <head> <link rel="canonical" href="adres strony podstawowej"> </head> gdzie jako "adres strony podstawowej" należy podać bezwzględny adres strony (rozpoczynający się od http:// lub https://), która ma być prezentowana w wynikach wyszukiwania. W tym przypadku nie powinno się używać względnej ścieżki dostępu, ponieważ taki zapis może nie być...
- Nagłówek i treść HTML / Kanały informacyjne <link "rss, atom">
Kanał w formacie RSS <head> <link rel="alternate" title="Tytuł kanału" href="adres kanału" type="application/rss+xml"> </head> Kanał w formacie Atom <head> <link rel="alternate" title="Tytuł kanału" href="adres kanału" type="application/atom+xml"> </head> Tytuł kanału Nazwa kanału, która może pojawić się w przeglądarce przy jego subskrybowaniu adres kanału Ścieżka dostępu lub lokalizacja pliku z kanałem informacyjnym Kanał informacyjny to specjalny plik tekstowy w formacie XML...
- HTML5 / Składnia (X)HTML5
Spis treści Przykładowy dokument HTML5 Przykładowy dokument XHTML5 MathML i SVG Przykładowy dokument HTML5 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>...</title> </head> <body> ... </body> </html> W pierwszej linijce widzimy skróconą deklarację typu dokumentu (co ważne, nie przełącza ona przeglądarki w tryb Quirks). Powiedzmy sobie szczerze - raczej nikt nie był w stanie zapamiętać rozwlekłej formy DTD dla języka HTML 4 ani XHTML 1. Przeglądarki...
Drukowanie CSS / Wydruk @media print...się ogólne deklaracje) */ /* (...) */ @media print { /* Arkusz dla wydruku */ } Dołączenie specjalnie dla wydruku zewnętrznego arkusza: <head> <link rel="stylesheet" href="domyslny.css"> <link rel="stylesheet" href="wydruk.css" media="print"> </head> Dołączenie specjalnie dla wydruku wewnętrznego arkusza: <head> <style media="print"> /* Arkusz dla wydruku */ </style> </head> [zobacz także rozdział pt.: Media]. UWAGA! Kolejność wpisywania poleceń ma znaczenie, tzn...
- Media CSS / Wybór medium @media
...wewnątrz języka dokumentu (atrybut "media" elementu LINK precyzujący włączenie zewnętrznego arkusza stylów): <!doctype html> <html lang="pl"> <head> <title>Odnośnik do medium docelowego</title> <link rel="stylesheet" media="print, handheld" href="arkusz.css"> </head> <body> <p>Ciało dokumentu...</p> </body> </html> Podanie medium docelowego wewnątrz języka dokumentu (atrybut "media" elementu STYLE precyzujący włączenie wewnętrznego arkusza stylów): <!doctype html>...
Ochrona strony...najmniej 200 pikseli), co umożliwiało m.in. wydruk lub zapisanie grafiki na dysku. Dla wszystkich zdjęć na stronie (wstaw w nagłówku dokumentu - <head>...</head> - poniższy kod): <meta http-equiv="Imagetoolbar" content="no"> Tylko dla wybranych zdjęć: <img src="zdjecie.jpg" alt="Tekst alternatywny" galleryimg="no"> Blokada klawisza Print Screen Klawisza Print Screen umożliwia wykonanie prostego zrzutu ekranu i późniejszego wklejenia do programu graficznego. Należy wstawić do dokumentu...
- HTML5 / Wstępne ładowanie <link "preload" as>
...atrybutami rel="preload" i as="...". Przykład <link "preload" as> Ten obrazek zostanie załadowany z wyprzedzeniem, zanim będzie już potrzebny: <head> <link rel="preload" as="image" type="image/jpeg" href="obrazek.jpg"> </head> Pytania i odpowiedzi <link "preload" as> Do czego służy wstępne ładowanie? Wstępne ładowanie służy do przygotowania zasobów przed ich rzeczywistym użyciem, co pozwala na płynniejsze działanie aplikacji. Działa to poprzez wczytywanie zasobów, takich jak...
- Nagłówek i treść HTML / Edytor <meta "generator">
<head> <meta name="generator" content="nazwa edytora"> </head> gdzie jako "nazwa edytora" można wpisać nazwę programu, przy użyciu którego została stworzona strona. Pozwala określić nazwę edytora HTML, który został wykorzystany do utworzenia dokumentu. Przykład <meta "generator"> <meta name="generator" content="MetBod (https://www.kurshtml.edu.pl/generatory/metbod.html)">