Sekcja head
Wstęp
Jakiś czas temu zajmowaliśmy się strukturą plików HTML, był to sam początek kursu, więc stwierdziliśmy, że nie ma sensu informować Cię o wszystkich szczegółach. Wtedy nie omawialiśmy dokładnie zawartości elementuhead, teraz nadszedł czas, aby to zrobić.
Jak już wiesz elementy znajdujące się w sekcji head nie są bezpośrednio wyświetlane na stronie, jednak nie można powiedzieć, że nie są one ważne. W tej lekcji przekonasz się co nam one oferują.
Warto jeszcze dodać, iż część elementów omawianych w tej lekcji może Ci się wydawać mało interesujących na początku przygody z HTML. Jeśli tak będzie, to możesz śmiało pominąć niektóre tematy i wrócić do nich na koniec tego kursu.
Tytuł
Aby nadać naszej stronie tytuł, należy użyć tagutitle, umieścić go w sekcjihead, a pomiędzy tagiem otwierającym, a zamykającym umieścić tekst będący tytułem strony.
Co prawda tytuł nie jest widoczny w treści strony, jednak jest on wyświetlany jako nazwa karty przeglądarki oraz najczęściej również jako nazwa okna, gdy dana karta jest otwarta. Dla systemu Ubuntu i przeglądarki Chrome wygląda to następująco:
Tytuł strony jest również ważny ze względu na tak zwaneSEO(ang.Search Engine Optimization), czyli optymalizację strony dla wyszukiwarek internetowych takich jak Google. Tytuł strony powinien w jak największym stopniu określać to co znajduje się na stronie. Google wyświetla go jako niebieski powiększony tekst w wynikach wyszukiwania. Np. dla strony codequack.com wygląda to następująco:
Zadanie 1
Ustaw tytuł strony na “Tropikalne zwierzęta”.
Kodowanie znaków
Oprócz tagutitlew sekcjiheadnaszej strony znajduje się również tagmeta.
| 1 | <metacharset="UTF-8"> |
|---|---|
Zawiera on tak zwane metadane, czyli informacje o danych. Mówiąc prościej, jest on używany po prostu do opisu zawartości strony internetowej. Tagmetamoże być używany z wieloma różnymi atrybutami, dzięki którym przekazujemy informacje na temat naszej strony.
Nazwa atrybutucharsetjest skrótem odCharacter Sets, co możemy tłumaczyć na język polski jakozestaw znaków. Atrybut ten służy do ustawienia kodowania znaków na stronie, czyli tego w jaki sposób mają być interpretowane przez przeglądarkę dane o znakach znajdujących się na stronie.UTF-8, to zestaw znaków zawierający prawie wszystkie powszechnie używane symbole, są wśród nich również polskie znaki, z których korzystamy na naszych stronach.
Nie będziemy niepotrzebnie zagłębiać się w ten temat, wystarczy Ci zapamiętanie informacji, że aby używać na stronie polskich znaków, należy ustawić kodowanie naUTF-8, w taki sposób jak pokazano powyżej.
Jeśli chcesz zobaczyć jak wygląda strona bez ustawionego kodowania, uruchom na swoim komputerze, poprzez stworzenie pliku.html, poniższy przykład. Najprawdopodobniej zobaczysz tekst w stylu:MĂłj pierwszy nagĹ‚Ăłwek, chociaż niektóre przeglądarki domyślnie korzystają zUTF-8i w takim przypadku wyświetlany tekst będzie poprawny. Jeśli uruchomisz kod na naszej stronie, to zostanie on wyświetlony poprawnie z uwagi na to, iż strona CodeQuack posiada poprawnie ustawione kodowanie.
| 1 2 3 4 5 6 7 8 910 | <!DOCTYPE html><html><head><title>Moja fajna strona</title></head><body><h1>Mój pierwszy nagłówek</h1><p>Mój pierwszy paragraf.</p></body></html> |
|---|---|
Dołączanie plików CSS i JavaScript
Nie przejmuj się jeśli jeszcze nie miałeś styczności z kodem CSS i JavaScript.CSSto tak zwane kaskadowe arkusze stylów, dzięki nim możemy określić formę prezentacji (wyświetlania) stron internetowych, zagadnieniem tym zajmiemy się krótko pod koniec tego kursu.JavaScriptto skryptowy język programowania pozwalający na wprowadzenie bardziej zaawansowanych interakcji strony internetowej z użytkownikiem. Temu tematowi jest poświęconych kilka naszych oddzielnych kursów. Warto się nimi zainteresować po ukończeniu kursu HTML.
Zarówno kod CSS jak i JavaScript można umieszczać bezpośrednio w plikach HTML, ale lepszym rozwiązaniem jest umieszczenie ich w oddzielnych plikach, a następnie dołączenie ich zawartości do strony. Pokażemy Ci teraz jak to zrobić.
Aby do strony dołączyć kod CSS, w sekcjiheadnależy umieścić poniższą linię.
| 1 | <linkrel="stylesheet"href="styles.css"> |
|---|---|
Oczywiście zamiaststyles.csspowinieneś podać link do Twojego pliku z kodem CSS. Atrybuthrefokreśla adres, może to być adres bezwzględny lub względny. Sytuacja wygląda praktycznie tak samo jak w przypadku atrybutuhrefelementua. Fragmentrel="stylesheet"określa to, że dodajemy kod css. W starszych wersjach HTML należało jeszcze użyć atrybututype="text/css"jednak aktualnie korzystamy z HTML5 i ten atrybut nie jest już wymagany.
Do dołączenia kodu JavaScript służy tagscript. Można pisać kod bezpośrednio pomiędzy tagiem otwierającym, a zamykającym lub użyć atrybutusrc, który działa praktycznie tak samo jakhrefdla tagulink.src_to skrót od_source, czyliźródło.
| 1 | <scriptsrc="script.js"></script> |
|---|---|
Określenie języka
Kolejną informacją, którą możemy przekazać na temat naszej strony jest używany język. Jest to zagadnienie dość często pomijane, jednak okaże się bardzo przydatne w sytuacji, gdy na Twojej stronie będzie znajdował się materiał w kilku językach. Można powiedzieć że ustawienie języka wiele nie kosztuje, a w przyszłości może przynieść korzyści.
W odróżnieniu od pozostałych elementów omawianych w tej lekcji, języka nie ustawiamy w sekcjihead. Robimy to poprzez przypisanie atrybutulang, najczęściej do elementuhtml.
| 1 2 3 4 5 6 7 8 910 | <!DOCTYPE html><htmllang="pl"><head><title>Moja fajna strona</title></head><body><h1>Mój pierwszy nagłówek</h1><p>Mój pierwszy paragraf.</p></body></html> |
|---|---|
Wartośćplokreśla język polski. Jeśli na Twojej stronie będzie się znajdować fragment w innym języku, możesz również przypisać atrybutlangelementowi, który zawiera tą treść.
| 1 2 3 4 5 6 7 8 910 | <!DOCTYPE html><htmllang="pl"><head><title>Moja fajna strona</title></head><body><h1>Treść w języku angielskim:</h1><plang="en">This text is written in English.</p></body></html> |
|---|---|
Zadanie 2
Oznacz w odpowiedni sposób, przy pomocy atrybutulang, akapit zawierający treść w języku angielskim.
Kolejne atrybuty tagu meta
Tagu meta używaliśmy już do określenia kodowania znaków naszej strony, ma on jednak znacznie większe możliwości. Możemy dzięki niemu na przykład określić opis strony. Co prawda nie będzie on widoczny na stronie, jednak jest to kolejny ważny element podczas wyszukiwania strony w wyszukiwarkach. Na przykład Google wyświetla opis strony jako czarny tekst pod jej tytułem i adresem.
Aby dodać opis strony, w sekcjiheadumieść poniższą zawartość.
| 1 | <metaname="description"content="Moja pierwsza strona tworzona podczas nauki HTML"> |
|---|---|
Za pomocą tagumetamożna również określić autora strony, datę jej powstania, czy chociażby słowa kluczowe. Tag ten jest również bardzo ważny podczas udostępniania strony w serwisach społecznościowych, takich jak chociażby facebook. Dzięki niemu możesz ustawić tytuł, opis, ilustrację, czy nawet film wideo widoczne po udostępnieniu linku do twojej strony na facebooku. Jeśli chcesz się dowiedzieć jak to zrobić, to odsyłamy Cię dodokumentacjifacebooka.
Zadanie 3
Dodaj opis strony. Powinien opisywać to co będzie znajdować się na stronie.
Pamiętaj, że dobry opis powinien mieć ok 140 - 160 znaków.
Podsumowanie
W tej lekcji dokładnie omówiliśmy elementy, których możemy używać w sekcjihead. Rozpoczęliśmy od tytułu strony, dowiedziałeś się, gdzie jest on widoczny i jak go ustawić. Następnie zajęliśmy się tematem kodowania znaków, ważnym ze względu na poprawne wyświetlanie strony, a następnie przyjrzeliśmy się temu w jaki sposób możemy dołączyć pliki css i js do naszej strony. Na koniec dowiedziałeś się jak można określić język strony oraz miałeś okazję poznać kolejne przypadki użycia tagumeta.