Podstawy HTML
Wstęp
W tej lekcji zajmiemy się najważniejszymi podstawami HTML. Na początek omówimy strukturę kodu, następnie zajmiemy się paragrafami oraz wyświetlaniem w nich kilku linii. Na koniec będziesz miał okazję dowiedzieć się, czym są tak zwane komentarze.
Struktura kodu HTML
Na początek tej lekcji przyjrzyjmy się jeszcze raz plikowi HTML, który miałeś okazję zobaczyć poprzednim razem.
| 1 2 3 4 5 6 7 8 91011 | <!DOCTYPE html><html><head><metacharset="UTF-8"><title>Tytuł strony</title></head><body><h1>Mój pierwszy nagłówek</h1><p>Mój pierwszy paragraf.</p></body></html> |
|---|---|
Na samym początku znajduje się instrukcja<!DOCTYPE html>jest to informacja dla przeglądarki o tym, z jaką wersją HTML ma do czynienia. Taka instrukcja powinna znaleźć się w pierwszej linii każdego pliku.html.
Musisz wiedzieć, że od czasu pojawienia się pierwszej strony internetowej powstało kilka wersji HTML. Aktualna wersja to HTML5 i została ona oficjalnie upubliczniona w roku 2014. Instrukcja którą widzisz w pierwszej linii określa właśnie, że nasz kod jest napisany zgodnie ze standardem HTML5. Zwróć uwagę na prostotę tej instrukcji, warto wiedzieć, że nie zawsze tak było. Na przykład poniżej znajduje się określenie wersji XHTML 1.0, przyznasz, że jest ono znacznie bardziej skomplikowane, niż to z czego korzystamy obecnie.
| 12 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
|---|---|
W kolejnej linii znajduje się element<html>, który jest głównym elementem pliku HTML. Zwróć uwagę na to, iż teksthtmlznajduje się w nawiasach ostrych<>. Zauważ również, że na samym końcu znajduje się</html>. Tego typu elementy nazywamy tagami html, a ich ogólna struktura prezentuje się następująco:
| 1 | <nazwa-tagu>zawartość</nazwa-tagu> |
|---|---|
Jak widzisz na początku umieszczamy nazwę tagu w nawiasach<>następnie znajduje się jego zawartość, a na koniec tag zamykający, który od otwierającego różni się tym, że przed nazwą tagu występuje znak/. Pamiętaj, aby zawsze zamykać tagi, co prawda są od tej reguły pewne wyjątki, które poznasz w dalszej części tego kursu, jednak najczęściej brak tagu zamykającego powoduje błędne wyświetlanie strony internetowej.
W naszym przykładzie zawartością elementu HTML, są pozostałe elementy określające zawartość strony oraz informacje na jej temat. Na początku znajduje się elementhead, który zawiera właśnie informacje na temat strony. Tym tagiem oraz jego zawartością zajmiemy się szczegółowo w jednej z kolejnych lekcji.
Po zakończeniuhead, czyli po</head>znajduje się tag<body>wraz z jego zawartością, która określa to co faktycznie znajduje się na stronie. Słowobody_to tłumacząc na język polski_ciało, można więc powiedzieć, że tag ten określa ciało strony.
Warto dodać, że zawartość taguhead, jest też czasami nazywana sekcją head, a zawartośćbody, to sekcja body.
Pewnie już zauważyłeś, że w sekcji body znajdują się dwa kolejne elementy,h1to nagłówek, czyli większy tekst, natomiastpto paragraf lub mówiąc inaczej akapit tekstu. Nagłówkami zajmiemy się bardziej szczegółowo w następnej lekcji, natomiast elementowippoświęcimy kolejną część tej lekcji.
Zwróć jeszcze uwagę na wcięcia znajdujące się w kodzie. Każdy element będący zawartością innego, jest względem niego przesunięty o pewną odległość w prawo. W naszym przypadku są to 2 spacje, ale często można się również spotkać z 4 spacjami lub tabulatorem. Takie działanie nie ma wpływu na wyświetlanie strony w przeglądarce, jednak znacznie poprawia czytelność samego kodu HTML.
Poniżej znajduje się wizualizacja struktury strony HTML. Zwróć uwagę na to, że tylko w białej części znajdują się elementy bezpośrednio wyświetlane na stronie.
Od tego momentu, w przykładach w widoku lekcji będzie wyświetlany tylko omawiany fragment kodu HTML, najczęściej będzie to zawartość sekcji body. Kompletny kod HTML jest widoczny w edytorze w widoku przykładu, uruchamianym po naciśnięciu przyciskuUruchom przykład.
Paragrafy
Powyżej wspominaliśmy już o tym, że do tworzenia paragrafów, lub inaczej mówiąc akapitów, służy elementp. Poniżej znajdują się dwa przykładowe paragrafy.
| 12345 | <p> Właśnie w taki sposób definiujemy paragraf. Jest to pierwszy paragraf na stronie.</p><p>A to jest drugi akapit wyświetlany poniżej.</p> |
|---|---|
Zwróć uwagę na fakt, że tag otwierający, zawartość oraz tag zamykający możemy zapisać zarówno w jednej linii, jak i w kilku osobnych. Jest tak dlatego, że przeglądarka w większości przypadków po prostu nie zwraca uwagi na nowe linie w kodzie HTML, oznacza to, że oba paragrafy w pliku możemy równie dobrze zapisać w jednej linii, a efekt na stronie nie zmieni się.
| 1 | <p>Właśnie w taki sposób definiujemy paragraf. Jest to pierwszy paragraf na stronie.</p><p>A to jest drugi akapit wyświetlany poniżej.</p> |
|---|---|
Zgodzisz się na pewno z tym, że powyższy kod jest bardzo nieczytelny, z tego powodu, warto zapisywać kolejne elementypw nowych liniach.
Jeśli jako zawartość elementupwstawisz bardzo długi tekst, to zostanie on w przeglądarce wyświetlony w kilku liniach. Nie nastąpi niepożądane rozciągnięcie ekranu.
| 123 | <p> Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych, jak Aldus PageMaker.</p> |
|---|---|
Jeśli zastanawiasz się, jak dodać nową linię do akapitu to już spieszymy z odpowiedzią. Na początek możesz uruchomić poniższy przykład i przekonać się, czy podział zawartości elementupw kodzie HTML, przyniesie pożądany efekt.
| 12345 | <p> Linia 1 Linia 2 Linia 3</p> |
|---|---|
Jeśli uruchomiłeś powyższy kod, to wiesz, że tekst i tak został wyświetlony w jednej linii. Jest tak dlatego, ponieważ tak jak już wspominaliśmy, w większości przypadków nowe linie w kodzie HTML nie są brane pod uwagę.
Najbardziej oczywistym sposobem aby podzielić tekst na kilka linii staje się więc użycie kilku tagówpi umieszczenie w każdym z nich pojedynczej linii.
| 123456789 | <p> Linia 1</p><p> Linia 2</p><p> Linia 3</p> |
|---|---|
Kolejny sposób polega na użyciu elementu<br>, który jest skrótem odbreak line, co oznaczaprzerwanie linii.
| 1234567 | <p> Linia 1<br> Linia 2<br> Linia 3</p> |
|---|---|
Zwróć uwagę na fakt, że tagu<br>nie trzeba zamykać. Jest to jeden z niewielu takich elementów. Taka forma zapisu została spowodowana tym, że tagbrnigdy nie posiada zawartości. Projektanci standardu HTML doszli więc do wniosku, że zamiast pisać<br></br>wygodniej będzie po prostu użyć<br>.
Zadanie 1
Utwórz paragraf z dowolną treścią. Powinien on zawierać co najmniej 10 znaków.
Zadanie 2
Utwórz paragraf z dowolną treścią składający się z co najmniej 4 krótkich linii. Do podziału tekstu na linie użyj poznanego w tej lekcji tagu.
Komentarze
Komentarze są zagadnieniem powszechnie znanym nie tylko w obrębie tworzenia stron w HTML, ale również w całym, szeroko pojętym programowaniu. Komentarz jest fragmentem kodu źródłowego, czyli w naszym przypadku kodu HTML, którego jedynym celem istnienia jest informowanie o czymś osoby czytającej kod. Komentarze nie są wyświetlane w przeglądarce i nie mają wypływu na wyświetlane w niej elementy.
Komentarze w kodzie HTML umieszczamy pomiędzy<!--a-->. Poniżej znajduje się przykład.
| 1234 | <!-- To jest komentarz niewidoczny podczas wyświetlania strony w przeglądarce --><p> Wyświetlany akapit.</p> |
|---|---|
W programowaniu komentarze są najczęściej używane, aby wyjaśnić pewien fragment kodu. Musisz mieć jednak świadomość, iż należy ich unikać. Obecność komentarzy zawsze sygnalizuje nieporadność programisty. Kod powinien być napisany tak, aby nie wymagał komentarzy, chociaż są również małe wyjątki od tej reguły.
Podobnie sprawa wygląda w przypadku pisania kodu HTML, jednak tym razem komentarze są jeszcze rzadziej potrzebne. Jednym z przypadków, kiedy warto ich użyć, to tymczasowe zakomentowanie pewnego fragmentu kodu, aby sprawdzić jak strona wygląda bez niego.
| 123456 | <!-- <p> Tymczasowo niewidoczny akapit.</p> --><p> Wyświetlany akapit.</p> |
|---|---|
Zadanie 3
Odkomentuj zakomentowany fragment kodu, tak aby zostały wyświetlone dwa akapity.
Podsumowanie
W tej lekcji miałeś okazję poznać najważniejsze podstawy HTML. Na początku przyjrzeliśmy się strukturze plików HTML, jednak nie omówiliśmy wszystkich szczegółów z nią związanych, zajmiemy się tym tematem dokładniej już niebawem. W kolejnej części tej lekcji zajęliśmy się elementemp, dzięki któremu możemy tworzyć akapity. Miałeś również okazję dowiedzieć się jak dzięki tagowibrdodać nową linię do paragrafu. Na koniec zajęliśmy się komentarzami oraz tym, kiedy je stosować.