Dokumenty HTML zawierają deklarację typu dokumentu i element główny <html>root
element. W elemencie <html> znajdują się nagłówek i treść dokumentu.
Nagłówek dokumentu nie jest widoczny poza kodem, ale jest niezbędny do działania witryny. Zawiera wszystkie metadane, w tym informacje dla wyszukiwarek i wyników w mediach społecznościowych, ikony karty przeglądarki i skrótu na ekranie głównym urządzenia mobilnego oraz informacje o zachowaniu i prezentacji treści. W tej sekcji poznasz komponenty, które są obecne na prawie każdej stronie internetowej, ale nie są widoczne.
Aby utworzyć witrynę MachineLearningWorkshop.com (MLW), zacznij od dodania komponentów, które powinny być uważane za niezbędne na każdej stronie internetowej: typu dokumentu, języka treści, zestawu znaków oraz oczywiście tytułu lub nazwy witryny bądź aplikacji.
Dodawanie do każdego dokumentu HTML
Istnieje kilka elementów, które są niezbędne na każdej stronie internetowej. Przeglądarki renderują treść, nawet jeśli tych elementów brakuje, ale warto je dodać.
<!DOCTYPE html>
Pierwszą rzeczą w każdym dokumencie HTML jest preambuła. W przypadku HTML wystarczy
<!DOCTYPE html>. Wygląda to jak element HTML, ale w rzeczywistości jest to specjalny węzeł nazywany doctype. Doctype informuje przeglądarkę, aby używała trybu standardowego.
Jeśli go pominiesz, przeglądarki użyją innego trybu renderowania, zwanego
trybem osobliwości.
Dodanie doctype pomaga zapobiegać trybowi osobliwości.
<html>
Element <html> jest elementem głównym dokumentu HTML. Jest elementem nadrzędnym
elementów <head> i <body> i zawiera wszystko w dokumencie HTML oprócz
doctype. Jeśli go pominiesz, język zostanie domyślnie określony, ale warto go dodać, aby zadeklarować język dokumentu.
Język treści
Atrybut lang
w tagu <html> określa główny
język dokumentu. Wartość to kod języka ISO, po którym może występować opcjonalny region.
Na przykład francuski w Kanadzie to fr-CA, a w Burkina Faso – fr-BF. Ta deklaracja pomaga czytnikom ekranu, wyszukiwarkom i usługom tłumaczeniowym określić język dokumentu.
Możesz użyć atrybutu lang w innych tagach, aby określić wyjątki od głównego języka dokumentu. Podobnie jak w przypadku użycia w nagłówku, atrybut lang w treści nie ma efektu wizualnego. Dodaje semantykę, dzięki czemu technologie wspomagające i usługi automatyczne mogą określić język konkretnej treści.
Oprócz ustawienia języka dokumentu i wyjątków od tego języka podstawowego atrybut ten może być używany w selektorach CSS.
<span lang="fr-fr">Ceci n'est pas une pipe.</span> można kierować za pomocą
atrybutu i selektorów języka
[lang|="fr"]
oraz :lang(fr).
<head>
Między tagami otwierającym i zamykającym <html> znajdują się 2 elementy podrzędne:
<head> i <body>:
<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body>
</body>
</html>
Element <head> zawiera metadane witryny lub aplikacji, a element <body>
zawiera widoczną treść. W pozostałej części tej sekcji skupimy się na komponentach
zagnieżdżonych w elemencie <head>.
Wymagane komponenty w elemencie <head>
Metadane dokumentu, w tym tytuł dokumentu, zestaw znaków, ustawienia widocznego obszaru
, opis, podstawowy adres URL, linki do arkuszy stylów i ikony, znajdują się w elemencie
<head>. Chociaż nie wszystkie te funkcje mogą być potrzebne, zawsze dodawaj zestaw znaków, tytuł i ustawienia widocznego obszaru.
Kodowanie znaków
Pierwszym elementem w elemencie <head> powinna być deklaracja kodowania znaków charset character
encoding. Powinna ona znajdować się przed tytułem, aby przeglądarka mogła renderować znaki w tym tytule i wszystkie znaki w pozostałej części dokumentu.
Domyślne kodowanie w większości przeglądarek to windows-1252, w zależności od ustawień regionalnych. Warto jednak używać
UTF-8, które umożliwia
kodowanie wszystkich znaków za pomocą od 1 do 4 bajtów.
Aby ustawić kodowanie znaków na UTF-8, dodaj:
<meta charset="utf-8" />
Deklarując UTF-8 (bez rozróżniania wielkości liter), możesz nawet dodać emotikony w tytule.
Kodowanie znaków jest dziedziczone we wszystkich elementach dokumentu, nawet w elementach
<style> i <script>. Ta mała deklaracja oznacza, że możesz dodawać emotikony w nazwach klas i w selectorAPI. Jeśli używasz emotikonów, pamiętaj, aby używać ich w sposób, który zwiększa użyteczność bez pogarszania dostępności.
Tytuł dokumentu
Każda strona, strona główna i wszystkie dodatkowe strony, powinna mieć unikalny tytuł.
Treść tytułu dokumentu, czyli tekst między tagami otwierającym i zamykającym
<title> jest wyświetlana na karcie przeglądarki, na liście otwartych okien, w
historii, w wynikach wyszukiwania oraz, o ile nie zostanie ponownie zdefiniowana za pomocą
<meta> tagów, na kartach mediów społecznościowych.
<title>Machine Learning Workshop</title>
Metadane widocznego obszaru
Metatag widocznego obszaru jest niezbędny do zapewnienia responsywności witryny, dzięki czemu treść jest dobrze renderowana niezależnie od szerokości widocznego obszaru. Chociaż metatag viewport istnieje od 2007 roku, dopiero niedawno został udokumentowany w specyfikacji. Kontroluje rozmiar i skalę widocznego obszaru, zapobiegając zmniejszaniu się treści, aby dopasować się do mniejszych ekranów.
<meta name="viewport" content="width=device-width" />
Powyższy kod oznacza „spraw, aby witryna była responsywna, zaczynając od ustawienia szerokości treści na szerokość ekranu”. Oprócz width możesz ustawić powiększenie i skalowalność, ale oba te ustawienia domyślnie mają wartości dostępne. Jeśli chcesz być bardziej precyzyjny, dodaj:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />
Widoczny obszar jest częścią audytu dostępności Lighthouse. Twoja witryna przejdzie audyt, jeśli będzie skalowalna i nie będzie miała ustawionego maksymalnego rozmiaru.
Do tej pory zarys naszego pliku HTML wygląda tak:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
</head>
<body>
</body>
</html>
Inna <head> treść
Element <head> zawiera znacznie więcej informacji. Wszystkie metadane.
Większość elementów, które znajdziesz w elemice <head>, jest omówiona w tym
module, ale więcej informacji znajdziesz w module Metadane.
Znasz już metadane zestawu znaków i tytuł dokumentu, ale poza tagami <meta> jest jeszcze wiele
innych metadanych, które warto dodać.
CSS
W elemencie <head> dodajesz style do kodu HTML. Jeśli chcesz dowiedzieć się więcej o stylach, skorzystaj ze ścieżki szkoleniowej poświęconej CSS, ale musisz wiedzieć, jak dodawać style do dokumentów HTML.
Style CSS można dodawać na 3 sposoby: za pomocą elementów <link> i <style> oraz atrybutu style.
Główne 2 sposoby dodawania stylów do pliku HTML to dodanie zasobu zewnętrznego za pomocą elementu <link> z atrybutem rel ustawionym na
stylesheet lub dodanie kodu CSS bezpośrednio w nagłówku dokumentu między tagami otwierającym i zamykającym <style>.
Tag <link> jest preferowaną metodą dodawania arkuszy stylów. Połączenie z jednym lub kilkoma zewnętrznymi arkuszami stylów jest korzystne zarówno dla deweloperów, jak i dla wydajności witryny: możesz utrzymywać CSS w jednym miejscu, zamiast rozpraszać go po całej witrynie, a przeglądarki mogą buforować plik zewnętrzny, co oznacza, że nie trzeba go ponownie pobierać przy każdej nawigacji po stronie.
Składnia to <link rel="stylesheet" href="styles.css">, gdzie styles.css to nazwa pliku i względna lokalizacja arkusza stylów. Możesz zobaczyć atrybut
type="text/css", ale nie jest on wymagany. Atrybut rel określa relację, która w tym przypadku jest stylesheet. Jeśli pominiesz atrybut rel, kod CSS nie zostanie połączony.
Za chwilę poznasz kilka innych wartości atrybutu rel, ale najpierw dowiesz się, jak dodawać CSS na inne sposoby.
Jeśli chcesz, aby style z zewnętrznego arkusza stylów znajdowały się w warstwie kaskadowej, ale
nie masz dostępu do edycji pliku CSS, dodaj CSS za pomocą
@import w elemencie
<style>:
<style>
@import "styles.css" layer(firstLayer);
</style>
Gdy używasz @import do importowania arkuszy stylów do dokumentu, opcjonalnie do
warstw kaskadowych, instrukcje @import muszą być pierwszymi instrukcjami w elemencie
<style> lub połączonym arkuszu stylów, poza deklaracją zestawu znaków.
Chociaż warstwy kaskadowe są stosunkowo nowe i możesz nie zauważyć
@import w nagłówku <style>, często zobaczysz właściwości niestandardowe zadeklarowane w
bloku stylów nagłówka:
<style>
:root {
--theme-color: #226DAA;
}
</style>
Style dodane za pomocą elementów <link> lub <style> albo obu tych elementów powinny znajdować się w nagłówku. Chociaż działają one, gdy są dodawane w treści dokumentu, ze względu na wydajność warto dodawać style w nagłówku. Może się to wydawać sprzeczne z intuicją, ponieważ możesz chcieć, aby treść wczytywała się jako pierwsza. Lepiej jednak, aby przeglądarka wiedziała, jak renderować treść, gdy zostanie ona wczytana. Dodanie stylów jako pierwszych zapobiega niepotrzebnemu ponownemu rysowaniu, które występuje, gdy element jest stylizowany po pierwszym renderowaniu.
Istnieje 1 sposób dodawania stylów, którego nigdy nie użyjesz w elemencie <head> dokumentu: style wbudowane. Prawdopodobnie nigdy nie użyjesz stylów wbudowanych w nagłówku, ponieważ arkusze stylów agentów użytkownika domyślnie ukrywają nagłówek. Jeśli jednak chcesz utworzyć edytor CSS bez JavaScriptu, np. aby przetestować elementy niestandardowe strony, możesz sprawić, że nagłówek będzie widoczny za pomocą display: block, a następnie ukryć wszystko w nagłówku, a potem za pomocą wbudowanego atrybutu style sprawić, że widoczny będzie blok stylów z możliwością edycji treści.
<style contenteditable style="display: block; font-family: monospace; white-space: pre;">
head { display: block; }
head * { display: none; }
:root {
--theme-color: #226DAA;
}
</style>
Style wbudowane możesz dodawać do elementu <style>.
Inne zastosowania elementu <link>
Element link służy do tworzenia relacji między dokumentem HTML a zasobami zewnętrznymi. Niektóre z tych zasobów można pobrać, a inne mają charakter informacyjny. Typ relacji jest określany przez wartość atrybutu rel. Dostępnych jest 25 wartości atrybutu rel
których można używać z elementami <link>, <a>, <area> lub <form>, a kilka z nich
można używać ze wszystkimi tymi elementami. Warto umieścić w nagłówku te, które są związane z metadanymi
, a w elemencie te, które są związane z wydajnością w <body>.
Teraz dodasz w nagłówku 3 inne typy: icon, alternate i canonical. W następnym module dodasz czwarty typ,
rel="manifest".
Favikona
Użyj tagu <link> z rel="icon", aby określić favikonę dla swojego
dokumentu. Favikona to mała ikona, która pojawia się na karcie przeglądarki, zwykle po lewej stronie tytułu dokumentu. Gdy karty się zmniejszają, tytuł może zniknąć, ale ikona pozostaje widoczna. Większość favikon to logo firmy lub aplikacji.
Jeśli nie zadeklarujesz favikony, przeglądarka będzie szukać pliku o nazwie favicon.ico w katalogu najwyższego poziomu (folderze głównym witryny). Za pomocą elementu
<link> możesz użyć innej nazwy pliku i lokalizacji:
<link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/images/mlwicon.png" />
Powyższy kod oznacza „użyj pliku mlwicon.png jako ikony w sytuacjach, w których sensowne jest użycie ikony o rozmiarze 16, 32 lub 48 pikseli”. Atrybut sizes akceptuje wartość any
w przypadku ikon skalowalnych lub rozdzieloną spacjami listę kwadratowych widthXheight wartości;
gdzie wartości szerokości i wysokości to 16, 32, 48 lub większe w tej sekwencji geometrycznej,
jednostka pikseli jest pomijana, a X nie rozróżnia wielkości liter.
<link rel="apple-touch-icon" sizes="180x180" href="/images/mlwicon.png" />
<link rel="mask-icon" href="/images/mlwicon.svg" color="#226DAA" />
Istnieją 2 specjalne, niestandardowe rodzaje ikon dla przeglądarki Safari: apple-touch-icon dla urządzeń z iOS i mask-icon dla przypiętych kart w systemie macOS.
apple-touch-icon jest stosowana tylko wtedy, gdy użytkownik doda witrynę do ekranu głównego:
możesz określić wiele ikon o różnych sizes dla różnych urządzeń.
mask-icon będzie używana tylko wtedy, gdy użytkownik przypnie kartę w Safari na komputerze: sama ikona powinna być monochromatycznym plikiem SVG, a atrybut color wypełnia ikonę wymaganym kolorem.
Chociaż możesz użyć elementu <link>, aby zdefiniować zupełnie inny obraz na każdej stronie
lub nawet przy każdym wczytaniu strony, nie rób tego. Aby zapewnić spójność i wygodę użytkowników, używaj jednego obrazu. Google używa różnych favikon dla każdej ze swoich aplikacji: np. ikony poczty i kalendarza. Wszystkie ikony Google używają jednak tego samego schematu kolorów. Dzięki ikonie dokładnie wiesz, jaka jest zawartość otwartej karty.
Alternatywne wersje witryny
Użyj wartości alternate atrybutu rel, aby określić tłumaczenia lub alternatywne reprezentacje witryny.
Załóżmy, że mamy wersje witryny przetłumaczone na francuski i portugalski (brazylijski):
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
Gdy używasz wartości alternate w przypadku tłumaczenia, musisz ustawić atrybut hreflang.
Wartość alternate służy nie tylko do tłumaczeń. Na przykład atrybut type może określać alternatywny URI dla kanału RSS, gdy atrybut type jest ustawiony na application/rss+xml lub application/atom+xml.
Link do fikcyjnej wersji witryny w formacie PDF:
<link rel="alternate" type="application/x-pdf" href="https://machinelearningworkshop.com/mlw.pdf" />
Jeśli wartość atrybutu rel to alternate stylesheet, określa ona
alternatywny arkusz stylów
a atrybut title musi być ustawiony tak, aby nadać temu alternatywnemu stylowi nazwę.
Wersja kanoniczna
Jeśli utworzysz kilka tłumaczeń lub wersji warsztatów Machine Learning Workshop, wyszukiwarki mogą nie rozpoznać wiarygodnego źródła. Użyj rel="canonical"
, aby określić preferowany adres URL witryny lub aplikacji.
Dodaj kanoniczny URL na wszystkich przetłumaczonych stronach i na stronie głównej, wskazując preferowany adres URL:
<link rel="canonical" href="https://www.machinelearning.com" />
Link kanoniczny rel="canonical" jest najczęściej używany do publikowania krzyżowego w
publikacjach i na platformach blogowych, aby przypisać autorstwo oryginalnemu źródłu. Gdy witryna rozpowszechnia treści, powinna zawierać link kanoniczny do oryginalnego źródła.
Skrypty
Tag <script> zawiera skrypty. Domyślny typ to JavaScript. Jeśli użyjesz innego języka skryptowego, dodaj atrybut type z typem MIME
lub type="module" w przypadku modułu JavaScript.
Parsowane i wykonywane są tylko moduły JavaScript i JavaScript.
Tagi <script> mogą służyć do hermetyzacji kodu lub do pobierania zewnętrznego pliku. W MLW nie ma zewnętrznego pliku skryptu, ponieważ wbrew powszechnemu przekonaniu do działania witryny nie jest potrzebny JavaScript. To jest ścieżka szkoleniowa
HTML, a nie JavaScript.
Później dodasz niewielką ilość kodu JavaScript, aby utworzyć ukryty element:
<script>
document.getElementById('switch').addEventListener('click', function() {
document.body.classList.toggle('black');
});
</script>
Ten fragment kodu tworzy moduł obsługi zdarzeń dla elementu o identyfikatorze switch.
W przypadku JavaScriptu należy unikać odwoływania się do elementu, zanim on nie będzie istniał. Ponieważ element switch jeszcze nie istnieje, nie dodamy jeszcze modułu obsługi zdarzeń.
Gdy dodamy element włącznika światła, dodamy element <script> na końcu
elementu <body>, a nie w elemencie <head>. Dlaczego? Z 2 powodów. Chcemy mieć pewność, że
elementy istnieją, zanim napotkamy skrypt, który się do nich odwołuje, ponieważ nie
opieramy tego skryptu na zdarzeniu DOMContentLoaded.
JavaScript nie tylko
blokuje renderowanie,
ale też przeglądarka przestaje pobierać wszystkie zasoby, gdy pobierane są skrypty, i
nie wznawia pobierania innych zasobów, dopóki JavaScript nie zostanie
wykonany. Z tego powodu żądania JavaScriptu często znajdują się na końcu dokumentu, a nie w nagłówku.
Istnieją 2 atrybuty, które mogą zmniejszyć blokujący charakter pobierania i wykonywania JavaScriptu: defer i async. W przypadku atrybutu defer renderowanie HTML nie jest blokowane podczas pobierania, a JavaScript jest wykonywany dopiero po zakończeniu renderowania dokumentu. W przypadku atrybutu async renderowanie również nie jest blokowane podczas pobierania, ale po zakończeniu pobierania skryptu renderowanie jest wstrzymywane, a JavaScript jest wykonywany.
Aby dodać JavaScript MLW w pliku zewnętrznym, możesz napisać:
<script src="js/switch.js" defer></script>
Dodanie atrybutu defer
opóźnia wykonanie skryptu do momentu wyrenderowania wszystkiego,
co zapobiega pogorszeniu wydajności przez skrypt. Atrybuty async i defer są prawidłowe tylko w przypadku skryptów zewnętrznych.
Podstawa
Istnieje jeszcze jeden element, który znajduje się tylko w elemencie <head>. Rzadko
używany <base> umożliwia ustawienie domyślnego adresu URL linku i miejsca docelowego. Atrybut href określa podstawowy adres URL dla wszystkich linków względnych.
Atrybut target, który jest prawidłowy w przypadku elementów <base>, linków i formularzy, określa
gdzie mają się otwierać te linki. Domyślna wartość _self otwiera połączone pliki w tym samym kontekście co bieżący dokument. Inne opcje to _blank, która otwiera każdy link w nowym oknie, _parent bieżącej treści, która może być taka sama jak self, jeśli otwierający nie jest elementem iframe, lub _top, która znajduje się na tej samej karcie przeglądarki, ale jest wyskakująca z dowolnego kontekstu, aby zajmować całą kartę.
Większość deweloperów dodaje atrybut target do kilku linków (jeśli w ogóle), które mają się otwierać w nowym oknie, w samych linkach lub formularzach, zamiast używać elementu <base>.
<base target="_top" href="https://machinelearningworkshop.com" />
Jeśli nasza witryna znajdzie się w elemencie iframe w witrynie takiej jak Yummly,
dodanie elementu <base> spowoduje, że gdy użytkownik kliknie dowolny link w
naszym dokumencie, link zostanie wczytany poza elementem iframe, zajmując całe
okno przeglądarki.
Jedną z wad tego elementu jest to, że linki kotwicowe są rozwiązywane za pomocą elementu
<base>. Element <base> skutecznie przekształca link <a href="#ref"> w
<a target="_top" href="https://machinelearningworkshop.com#ref">, co powoduje
wysłanie żądania HTTP do podstawowego adresu URL z dołączonym fragmentem.
Kilka dodatkowych informacji o elemencie <base>:
- W dokumencie może znajdować się tylko 1 element
<base> - Powinien on znajdować się przed użyciem jakichkolwiek względnych adresów URL, w tym możliwych odwołań do skryptów lub arkuszy stylów.
Teraz kod wygląda tak:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="css/styles.css" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
<link rel="canonical" href="https://www.machinelearning.com" />
</head>
<body>
<!-- <script defer src="scripts/lightswitch.js"></script>-->
</body>
</html>
Komentarze HTML
Skrypt jest otoczony nawiasami ostrymi, myślnikami i wykrzyknikiem, co oznacza, że jest to komentarz HTML. Wszystko między <!-- a --> jest niewidoczne i nie jest
parsowane. Komentarze HTML możesz umieszczać w dowolnym miejscu na stronie, z wyjątkiem skryptów i bloków stylów, w których należy używać komentarzy JavaScript i CSS.
Znasz już podstawy tego, co znajduje się w elemencie <head>, ale chcesz dowiedzieć się
więcej. W następnych sekcjach dowiesz się więcej o metatagach i o tym, jak kontrolować, co jest wyświetlane, gdy Twoja witryna jest połączona w mediach społecznościowych.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę na temat struktury dokumentu.
Jak określić język dokumentu?
language do tagu HTML.lang do tagu HTML.Add the <lang> do elementu <head>.Wybierz elementy, które można umieścić w elemencie <head>.
<p><title><meta>