Dokumenty HTML zawierają deklarację typu dokumentu i element główny <html>. W elemencie <html> umieszczone są nagłówek i treść dokumentu. Chociaż nagłówek dokumentu nie jest widoczny dla osoby, która widzi nagłówek, bardzo ważne jest, aby witryna działała. Zawiera wszystkie metadane, w tym informacje o wyszukiwarkach i wynikach z mediów społecznościowych, ikony karty przeglądarki i skrótu na ekranie głównym urządzenia mobilnego, a także sposób działania i prezentacji treści. W tej sekcji poznasz komponenty, które, choć nie są widoczne, znajdują się na prawie każdej stronie internetowej.
Tworząc witrynę MachineLearningWorkshop.com (MLW), zacznij od dodania komponentów, które powinny być uważane za niezbędne dla każdej strony internetowej: typu dokumentu, ludzkiego języka treści, zestawu znaków oraz oczywiście tytułu lub nazwy witryny bądź aplikacji.
Dodaj do każdego dokumentu HTML
Istnieje kilka funkcji, które należy uznać za niezbędne dla każdej strony internetowej. Jeśli tych elementów nie ma, przeglądarki nadal renderują treść, ale ją uwzględnią. Zawsze.
<!DOCTYPE html>
Pierwszą rzeczą w dokumencie HTML jest wprowadzenie. W przypadku HTML potrzebujesz jedynie <!DOCTYPE html>. Może wyglądać jak element HTML, ale nim nie jest. Jest to specjalny rodzaj węzła o nazwie „doctype”. Typ doctype informuje przeglądarkę, że ma użyć trybu standardowego. Jeśli go pominiesz, przeglądarki będą używać innego trybu renderowania zwanego trybem osobliwości. Dodanie doctype pomaga zapobiegać trybowi osobliwości.
<html>
Elementem <html> jest element główny dokumentu HTML. Jest to element nadrzędny elementów <head> i <body>. Zawiera on wszystko, co znajduje się w dokumencie HTML poza formatem doctype. Jeśli zostanie pominięty, będzie on domniemany, ale warto go uwzględnić, ponieważ jest to element, w którym zadeklarowano język treści dokumentu.
Język treści
Atrybut języka lang dodany do tagu <html> określa główny język dokumentu. Wartość atrybutu lang to 2- lub 3-literowy kod języka w standardzie ISO, po którym następuje oznaczenie regionu. Wybór regionu jest opcjonalny, ale zalecany, ponieważ język może się znacznie różnić w zależności od regionu. Na przykład francuski bardzo różni się w Kanadzie (fr-CA) od języka Burkina Faso (fr-BF). Deklaracja języka umożliwia czytnikom ekranu, wyszukiwarkom i usługom tłumaczeniowym język dokumentu.
Atrybut lang nie jest ograniczony do tagu <html>. Jeśli na stronie znajduje się tekst w języku innym niż główny język dokumentu, użyj atrybutu lang, aby wskazać wyjątki od głównego języka w dokumencie. Podobnie jak w przypadku nagłówka, atrybut lang w treści nie ma efektu wizualnego. Dodaje jedynie semantykę, umożliwiając technologie wspomagające i zautomatyzowane usługi poznawanie języka treści, których dotyczy problem.
Oprócz ustawienia języka dokumentu i wyjątków w tym języku podstawowym atrybut może być używany w selektorach arkusza CSS. Na kryterium <span lang="fr-fr">Ceci n'est pas une pipe.</span> można kierować za pomocą selektorów atrybutu i języka [lang|="fr"] i :lang(fr).
<head>
Wśród otwierających i zamykających tagów <html> znajdują się 2 elementy podrzędne: <head> i <body>:
<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body>
</body>
</html>
<head>, czyli nagłówek metadanych dokumentu, zawiera wszystkie metadane witryny lub aplikacji. Treść zawiera widoczną treść. Pozostała część tej sekcji dotyczy komponentów zagnieżdżonych w otwierającym i zamykającym <head></head>
Wymagane komponenty w elemencie <head>
Metadane dokumentu, w tym tytuł dokumentu, zestaw znaków, ustawienia widocznego obszaru, opis, podstawowy adres URL, linki do arkusza stylów oraz ikony, znajdują się w elemencie <head>. Nawet jeśli nie wszystkie te funkcje są potrzebne, zawsze podawaj zestaw znaków, tytuł i ustawienia widocznego obszaru.
Kodowanie znaków
Pierwszym elementem <head> powinna być deklaracja kodowania znaków charset. Znajduje się on przed tytułem, aby umożliwić przeglądarce wyrenderowanie znaków z tego tytułu i wszystkich pozostałych znaków w dokumencie.
W większości przeglądarek domyślne kodowanie to windows-1252, w zależności od języka. Używaj jednak UTF-8, ponieważ umożliwia ono kodowanie od 1 do 4 bajtów wszystkich znaków, nawet tych, których istnienie nawet nie wiesz. Jest to też typ kodowania wymagany przez HTML5.
Aby ustawić kodowanie znaków na UTF-8, dołącz:
<meta charset="utf-8" />
Jeśli deklarujesz, UTF-8 (wielkość liter nie ma znaczenia), możesz nawet uwzględniać emotikony w tytule (ale tego nie robisz).
Kodowanie znaków jest dziedziczone do wszystkich elementów dokumentu, nawet <style> i <script>. Ta krótka deklaracja oznacza, że emotikony mogą się znajdować w nazwach klas i interfejsie API selektora (ponownie nie należy tego robić). Jeśli używasz emotikonów, upewnij się, że są one łatwiejsze w obsłudze, ale nie naruszają ułatwień dostępu.
Tytuł dokumentu
Każda strona główna i wszystkie dodatkowe strony powinny mieć niepowtarzalny tytuł. Zawartość tytułu dokumentu, czyli tekst między otwierającym i zamykającym tagiem <title>, jest wyświetlana na karcie przeglądarki, na liście otwartych okien, historii, wynikach wyszukiwania i, chyba że zostanie inaczej zdefiniowany za pomocą tagów <meta>, na kartach mediów społecznościowych.
<title>Machine Learning Workshop</title>
Metadane widocznego obszaru
Kolejnym metatagiem, który należy uznać za istotny, jest metatag viewport, który ułatwia responsywność witryny i domyślnie umożliwia prawidłowe renderowanie treści niezależnie od szerokości widocznego obszaru. Metatag widocznego obszaru jest stosowany od czerwca 2007 r., ale dopiero od czasu premiery pierwszego iPhone'a został on udokumentowany w specyfikacji. Zdecydowanie zalecamy korzystanie z tej funkcji, ponieważ umożliwia ona kontrolowanie rozmiaru i skalowalności widocznego obszaru oraz zapobiega pomniejszaniu zawartości witryny, tak aby zmieściła się na ekranie o szerokości 960 pikseli.
<meta name="viewport" content="width=device-width" />
Poprzedni kod oznacza, że witryna powinna być elastyczna, zaczynając od szerokości ekranu. Oprócz ustawienia width możesz też skonfigurować powiększenie i skalowalność, ale obie opcje będą domyślnie ustawione na dostępne wartości. Jeśli chcesz podać informacje dla pełnoletnich, podaj te informacje:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />
Widoczny obszar jest częścią kontroli ułatwień dostępu Lighthouse. Twoja witryna zostanie zaliczona, jeśli jest skalowalna i nie ma ustawionego maksymalnego rozmiaru.
Procedura dla pliku HTML na razie 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>
Inne treści: <head>
<head> zawiera dużo więcej. Wszystkie metadane. Większość elementów, które znajdziesz w <head>, jest omówiona tutaj, a mnóstwo opcji <meta> można zapisać na potrzeby następnego rozdziału.
Poznasz zestaw meta znaków i tytuł dokumentu, ale poza tagami <meta> jest znacznie więcej metadanych, które należy uwzględnić.
CSS
Pole <head> służy do dodawania stylów kodu HTML. Jeśli chcesz poznać style, ale musisz wiedzieć, jak uwzględnić je w dokumentach HTML, dostępna jest ścieżka szkoleniowa poświęcona stylom CSS.
Kod CSS można dodawać na 3 sposoby: <link>, <style> i atrybut style.
Dwa główne sposoby umieszczania stylów w pliku HTML to użycie zasobu zewnętrznego za pomocą elementu <link> z atrybutem rel ustawionym na stylesheet lub użycie arkusza CSS bezpośrednio w nagłówku dokumentu w ramach otwierających i zamykających tagów <style>.
Preferowaną metodą dodawania arkuszy stylów jest tag <link>. Powiązanie jednego lub kilku zewnętrznych arkuszy stylów jest korzystne zarówno dla programistów, jak i dla wydajności witryny: kod CSS jest przechowywany w jednym miejscu zamiast rozmieszczany w każdym miejscu, a przeglądarki mogą zapisywać zewnętrzny plik w pamięci podręcznej, co oznacza, że nie trzeba go ponownie pobierać przy każdej nawigacji na stronie.
Składnia to <link rel="stylesheet" href="styles.css">, gdzie style.css to adres URL arkusza stylów. Często zobaczysz type="text/css". Niewymagane Jeśli dodajesz style napisane w jakimś kodzie innym niż CSS, potrzebujesz atrybutu type. Nie ma on jednak innego typu, więc ten atrybut jest zbędny. Atrybut rel określa relację: w tym przypadku stylesheet. Jeśli pominiesz tę informację, Twoja usługa porównywania cen nie zostanie połączona.
Wkrótce poznasz inne wartości rel, ale najpierw omówimy inne sposoby stosowania kodu CSS.
Jeśli chcesz, aby zewnętrzne style arkusza stylów znajdowały się w warstwie kaskadowej, ale nie masz uprawnień do edytowania pliku CSS w celu umieszczenia w nim informacji o warstwie, musisz wstawić kod CSS z wartością @import wewnątrz elementu <style>:
<style>
@import "styles.css" layer(firstLayer);
</style>
Jeśli używasz metody @import do importowania arkuszy stylów do dokumentu (opcjonalnie do warstw kaskadowych), instrukcje @import muszą być pierwszymi instrukcjami w <style> lub połączonym arkuszu stylów, poza deklaracją zestawu znaków.
Warstwy kaskadowe są wciąż całkiem nowe i możesz nie zauważyć elementu @import w nagłówku <style>, ale często możesz zauważyć właściwości niestandardowe zadeklarowane w bloku stylów nagłówka:
<style>
:root {
--theme-color: #226DAA;
}
</style>
Style (za pomocą <link> lub <style> lub oba) powinny znaleźć się w nagłówku. Będą działać, jeśli znajdują się w treści dokumentu, ale ze względu na wydajność chcesz, aby style były widoczne w nagłówku. Może się to wydawać sprzeczne z intuicją, ponieważ może się wydawać, że treść ma się wczytywać jako pierwsza, ale w rzeczywistości chcemy, by przeglądarka wiedziała, jak renderować ją po wczytaniu. Dodanie stylów zapobiega najpierw niepotrzebnemu ponownemu malowaniu elementu, który ma miejsce po pierwszym wyrenderowaniu.
Jest też jeden ze sposobów uwzględniania stylów, których nigdy nie będziesz używać w polu <head> dokumentu: style wbudowane. Style w nagłówku nie są prawdopodobnie nigdy używane, ponieważ arkusze stylów klientów użytkownika domyślnie zasłaniają nagłówek. Jeśli jednak chcesz np. utworzyć edytor CSS bez JavaScriptu, aby przetestować niestandardowe elementy strony, możesz ustawić głowę jako widoczną display: block, a następnie ukryć wszystko w nagłówku, a następnie za pomocą wbudowanego atrybutu style ustawić blok stylu z możliwością edytowania treści.
<style contenteditable style="display: block; font-family: monospace; white-space: pre;">
head { display: block; }
head * { display: none; }
:root {
--theme-color: #226DAA;
}
</style>
Możesz dodawać style wbudowane w elemencie <style>, ale stylizowanie elementu <style> w style jest dużo fajniejsze. Naprawdę.
Inne zastosowania elementu <link>
Element link służy do tworzenia relacji między dokumentem HTML a zasobami zewnętrznymi. Niektóre z tych materiałów można pobrać, inne mają charakter informacyjny. Typ relacji jest określany przez wartość atrybutu rel. Obecnie 25 dostępnych wartości atrybutu rel można używać z <link>, <a> i <area> i <form>. Niektóre z tych wartości mogą być używane ze wszystkimi. Najlepiej dodawać informacje związane z metainformacjami w nagłówku oraz te związane ze skutecznością w tabeli <body>.
W nagłówku zostaną teraz umieszczone 3 inne typy: icon, alternate i canonical. (czwarty typ, rel="manifest", omówimy w następnym module).
Favikona
Użyj tagu <link> z parą atrybut/wartość rel="icon", aby wskazać favikonę, która ma zostać użyta w dokumencie. Favikona to bardzo mała ikona wyświetlana na karcie przeglądarki, zazwyczaj na lewo od tytułu dokumentu. Gdy masz otwartych za dużo kart, karty się zmniejszą, a tytuł może całkowicie zniknąć, ale ikona zawsze pozostanie widoczna. Większość favikonów 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 (czyli w folderze głównym witryny). W usłudze <link> możesz użyć innej nazwy pliku i innej lokalizacji:
<link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/images/mlwicon.png" />
Poprzedni kod: „Użyj mlwicon.png jako ikony w sytuacjach, w których odpowiedni mają 16, 32 lub 48 pikseli”. Atrybut rozmiarów przyjmuje wartość any w przypadku skalowalnych ikon lub rozdzielanej spacjami listy kwadratowych wartości widthXheight. Gdy wartości szerokości i wysokości wynoszą w tej kolejności geometrycznej wartości 16, 32, 48 lub większe, jednostka pikseli jest pomijana, a wielkość liter nie jest rozróżniana na X.
<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 w przeglądarce Safari: apple-touch-icon na urządzenia z iOS i mask-icon do przypiętych kart w macOS. Ustawienie apple-touch-icon jest stosowane tylko wtedy, gdy użytkownik doda witrynę do ekranu głównego: możesz określić wiele ikon z różnymi ustawieniami sizes dla różnych urządzeń. Plik mask-icon będzie używany tylko wtedy, gdy użytkownik przypnie kartę w Safari na komputerze: ikona powinna być monochromatycznym plikiem SVG, a atrybut color wypełnia ją wymaganym kolorem.
Za pomocą <link> możesz definiować zupełnie inny obraz na każdej stronie lub nawet na każdym wczytaniu strony, ale nie musisz tego robić. Aby zachować spójność i dobre wrażenia użytkowników, użyj pojedynczego obrazu. Twitter używa niebieskiego ptaka: gdy na karcie przeglądarki jest widoczny niebieski ptak, wiadomo, że karta jest otwarta na stronie Twittera bez jej klikania. Google używa różnych favikonów w poszczególnych aplikacjach – są to np. ikona e-maila czy kalendarza. Jednak wszystkie ikony Google mają ten sam schemat kolorów. Jak już wspomniano, zawartość otwartej karty znasz dokładnie dzięki samej ikonie.
Alternatywne wersje witryny
Używamy wartości alternate atrybutu rel do identyfikowania tłumaczeń witryny (innych jej reprezentacji).
Załóżmy, że mamy wersje witryny przetłumaczone na francuski i brazylijski portugalski:
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
Jeśli używasz alternate do tłumaczenia, atrybut hreflang musi być ustawiony.
Wartość alternatywna dotyczy nie tylko tłumaczeń. Na przykład atrybut type może określać alternatywny identyfikator URI kanału RSS, gdy atrybut type ma wartość application/rss+xml lub application/atom+xml. Dodajmy link do strony w wersji PDF.
<link rel="alternate" type="application/x-pdf" href="https://machinelearningworkshop.com/mlw.pdf" />
Jeśli wartością rel jest alternate stylesheet, określa ona alternatywny arkusz stylów i należy ustawić atrybut title, który nadaje mu nazwę.
Wersja kanoniczna
Jeśli utworzysz kilka tłumaczeń lub wersji warsztatów Machine Learning Workshop, wyszukiwarki mogą mieć wątpliwości co do tego, która wersja jest wiarygodnym źródłem. W tym celu użyj parametru 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 zamieszczania postów w publikacjach i na platformach blogowych, aby podać informacje o oryginalnym źródle. Gdy witryna dystrybuuje treści, powinien zawierać link kanoniczny do oryginalnego źródła.
Skrypty
Tag <script> służy do umieszczania skryptów. Domyślnym typem jest JavaScript. Jeśli używasz innego języka skryptów, umieść atrybut type z typem MIME lub type="module", jeśli to moduł JavaScript. Tylko moduły JavaScript i JavaScript są analizowane i wykonywane.
Tagów <script> można użyć do herbaty kodu lub pobrania zewnętrznego pliku. W MLW nie ma zewnętrznego pliku skryptu, ponieważ wbrew powszechnemu przekonaniu nie potrzeba JavaScriptu do działającej witryny. Jest to ścieżka szkoleniowa języka HTML, a nie JavaScript.
Aby utworzyć ukrytą jajko, musisz później dołączyć fragment kodu JavaScript:
<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 nie można odwoływać się do elementu, który istnieje. Jeszcze nie istnieje, więc nie będziemy go uwzględniać. Gdy dodamy przełącznik światła, dodamy <script> na dole interfejsu <body>, a nie <head>. Dlaczego? Z 2 powodów. Chcemy mieć pewność, że elementy istnieją, zanim pojawi się skrypt, który je odwołuje, ponieważ nie opiera się on na zdarzeniu DOMContentLoaded. Co więcej, JavaScript nie tylko blokuje renderowanie, ale też przeglądarka przestaje pobierać wszystkie zasoby po pobraniu skryptów i nie wznawia pobierania innych zasobów do momentu zakończenia wykonywania JavaScriptu. Z tego powodu żądania JavaScript znajdują się często na końcu dokumentu, a nie w nagłówku.
Istnieją 2 atrybuty, które mogą ograniczyć blokowanie możliwości pobierania i wykonywania JavaScriptu: defer i async. W przypadku defer renderowanie HTML nie jest blokowane podczas pobierania, a JavaScript jest uruchamiany dopiero po zakończeniu renderowania dokumentu. W przypadku async renderowanie również nie jest blokowane podczas pobierania, ale po zakończeniu pobierania skryptu renderowanie jest wstrzymywane na czas wykonywania JavaScriptu.
Aby umieścić kod 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 całej zawartości, co zapobiega pogorszeniu wydajności skryptu. Atrybuty async i defer są prawidłowe tylko w przypadku skryptów zewnętrznych.
Podstawowa
Element <head>. (niezbyt często używany) zawiera też inny element, który można znaleźć tylko w elemencie <base>. Umożliwia on ustawienie domyślnego adresu URL linku i celu. Atrybut href określa podstawowy adres URL dla wszystkich linków względnych.
Atrybut target, ważny w domenie <base> oraz w przypadku linków i formularzy, określa miejsce otwierania tych linków. Ustawienie domyślne _self otwiera połączone pliki w tym samym kontekście co bieżący dokument. Inne opcje to: _blank, który otwiera każdy link w nowym oknie, _parent bieżącej zawartości, która może być taka sama jak ona, jeśli otwieracz nie jest elementem iframe, oraz _top, który znajduje się w tej samej karcie przeglądarki, ale jest poza kontekstem i zajmuje całą kartę.
Większość programistów dodaje atrybut target do kilku linków lub linków, które chcą otwierać w nowym oknie na linkach lub formularzach, a nie do <base>.
<base target="_top" href="https://machinelearningworkshop.com" />
Gdyby witryna została zagnieżdżona w elemencie iframe w witrynie takiej jak Yummly, dodanie elementu <base> oznaczałoby, że gdy użytkownik kliknie dowolny link w dokumencie, link zostanie wczytany poza elementem iframe i zajmie całe okno przeglądarki.
Jedną z wad tego elementu jest to, że linki zakotwiczone są rozpoznawane za pomocą atrybutu <base>. <base> skutecznie konwertuje link <a href="#ref"> na link <a target="_top" href="https://machinelearningworkshop.com#ref">, aktywując żądanie HTTP na podstawowy adres URL z dołączonym fragmentem.
Kilka innych informacji o <base>: dokument może zawierać tylko 1 element <base>, więc powinien on występować przed wszelkimi względnymi adresami URL łącznie z możliwymi odwołaniami do skryptów lub arkuszy stylów.
Kod wygląda teraz 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" src="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
Zwróć uwagę, że skrypt jest umieszczony między nawiasami kątowymi, myślnikami i bum. W ten sposób możesz skomentować kod HTML. Pozostawienie skryptu w komentarzu pozostanie bez zmian, dopóki na stronie nie pojawi się odpowiednia treść. Dane z zakresu od <!-- do --> nie będą widoczne ani przeanalizowane. Komentarze HTML można umieszczać w dowolnym miejscu na stronie, w tym w nagłówku lub treści, z wyjątkiem skryptów i bloków stylów, w których należy użyć odpowiednio komentarzy JavaScript i CSS.
Znasz już podstawowe informacje zawarte w temacie <head>, ale chcesz dowiedzieć się więcej. W kolejnych sekcjach dowiemy się więcej o metatagach i sposobach kontrolowania treści wyświetlanych w mediach społecznościowych, do których prowadzą linki z Twojej witryny.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę na temat struktury dokumentu.
Jak rozpoznasz język dokumentu?
language do tagu HTML.lang do tagu HTML.Add the <lang> na <head>.Wybierz elementy, które można uwzględnić w elemencie <head>.
<p><title><meta>