W poprzedniej części kursu HTML opowiedziałem czym jest język HTML i jak się go nauczyć. Wspomniałem też o jego zastosowaniu i narzędziach, które musisz posiadać, by przejść dalej – edytor kodu i przeglądarka.

W tej części kursu dowiesz się jak zrobić stronę, poznasz znaczniki HTML które się na nią składają oraz dowiesz się jak i gdzie je wykorzystywać.

Przeczytaj też: nowe znaczniki w HTML5

 

Jak zrobić stronę w HTML?

W pierwszej części tego kursu wspomniałem już, że tworzenie strony HTML polega na umieszczaniu odpowiednich znaczników w odpowiednich miejscach.

Kiedy już to zrobisz, praca w HTML dobiega końca i pozostaje tylko wykorzystać style CSS do nadania odpowiedniego wyglądu dla strony. Ale teraz przejdźmy do przykładu.

Załóżmy, że chcesz mieć na stronie nagłówek, trochę treści oraz odnośnik do innej strony. W języku HTML wyglądałoby to następująco:

Chcesz ​nauczyć ​się ​czegoś ​nowego?​

Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron www - kursy dla początkujących i zaawansowanych

Znaczniki HTML – kilka rodzajów

W HTML istnieją 2 rodzaje tagów (elementów) – takie, które musimy otworzyć i zamknąć oraz znaczniki, które tylko otwieramy (nie mają zamknięcia).

Elementy, które otwieramy i zamykamy

Mają one znacznik początkowy i końcowy. W taki sposób zbudowana jest zdecydowana większość znaczników HTML.

Elementy bez zamknięcia

Bez zamknięcia, to znaczy bez znacznika, który miałby je zamykać, tak jak widziałeś w przykładzie powyżej. W tego rodzaju znacznikach dodajemy ukośnik przed końcem, tak jak widać poniżej:

 

Znaczniki HTML w sekcji HEAD

Head, czyli nagłówek dokumentu HTML. Umieszczamy w nim podstawowe informacje o naszej stronie, takie jak tytuł, opis, doctype czy odnośniki do stylów CSS, skryptów JavaScript.

Doctype

Linijka, która określa z jakim typem dokumentu mamy do czynienia. W najnowszym HTML5 doctype jest bardzo krótki i wygląda następująco:

Title

Tytuł strony, który jest wyświetlany jako największy, niebieski napis w wynikach wyszukiwania Google.

Treść title ma też duże znaczenie w SEO naszej strony – warto dopilnować, by zawierał najważniejsze słowa kluczowe danej strony, ale nie warto też przesadzać.

Meta

Znacznik meta pozwala nam umieścić dodatkowe informacje o stronie HTML, takie jak:

  • Charset, czyli zestaw znaków który wykorzystuje nasza strona. Obecnie najpopularniejszy jest UTF-8.
  • Description, czyli opis strony, który był wykorzystywany przez wyszukiwarki takie, jak Google. Dzisiaj jest już znacznie rzadziej wykorzystywany i używają go tylko niektóre wyszukiwarki.
  • Keywords, czyli słowa kluczowe strony. Google nie bierze już tego meta tagu pod uwagę przy ustalaniu pozycji strony.
  • Author, czyli imię i nazwisko autora strony.

W sekcji HEAD znaczniki te wyglądają następująco:

 

Znaczniki HTML w sekcji BODY

Body, czyli ciało dokumentu HTML. Wpisujemy tutaj główną treść strony, która jest widoczna dla użytkownika z poziomu przeglądarki.

Elementy blokowe i liniowe

Mało który kurs HTML porusza to zagadnienie, choć jest ono dosyć ważne.

Elementy liniowe to takie, które zajmują tyle miejsca ile im potrzeba i nic więcej.

Przykładem może być znacznik <span>, w którym umieszczamy krótki tekst, mający zmieścić się w 1 linijce, czy też tag <img> umieszczający obrazek, który dopasowuje się do tekstu i układa się obok niego, ale nie zajmuje całej dostępnej powierzchni.

Element blokowy zajmuje całą dostępną szerokość strony.

Znaczy to, że gdy do elementu naszej strony, który ma szerokość 600 px wstawimy element blokowy, to zajmie on 100% szerokości, czyli właśnie 600 pikseli, nawet wtedy, kiedy bez problemu zmieściłby się w 100 pikselach.

Przykładem jest akapit (<p>), blok (<div> – bardzo często wykorzystywany do budowania szkieletu strony) czy nagłówek (od <h1> do <h6>).

Innym znacznikiem jest <span>. Wykorzystuje się go do zamieszczenia tekstu, który w domyśle ma zajmować mało miejsca, np. kilka wyrazów czy 1 linijka tekstu.

 

Tekst

Tekst stanowi w HTML znaczną większość kodu, często jest to nawet 95% całej strony. Zazwyczaj umieszczamy go w znaczniku <p>, czyli jako akapit.

Nieco rzadziej korzysta się ze <span>, który jest elementem liniowym. Zazwyczaj obejmuje się nim kawałek tekstu, któremu potem nadaje się wygląd w stylach CSS.

Tekst może być pogrubiony wykorzystując znacznik strong

albo pochylony przez znacznik em

 

Nagłówki

Nazywane też tytułami. Istnieje 6 rodzajów nagłówków. Najwyższym nagłówkiem jest h1 i, jeszcze w czwartej wersji HTMLa, mógł wystąpić na stronie tylko jeden raz.

Kolejno mamy h2, h3, h4, h5 i h6. Im wyższy nagłówek, tym pisany jest większą czcionką. Warto zwracać uwagę, by nagłówki na stronie ułożone były w odpowiedniej kolejności, tzn. po h2 może wystąpić h3, ale h5 już nie bardzo.

 

Obrazki

Obrazki na swoją stronę możesz wstawić w następujący sposób:

Co oznaczają poszczególne atrybuty?

  • src – źródło obrazka, czyli adres strony z której obrazek ma być pobrany i wyświetlony
  • width – szerokość obrazka
  • height – wysokość obrazka
  • alt – tekst, który pojawi się na stronie w miejscu obrazka wtedy, gdy obrazek nie zostanie załadowany

 

Odnośniki

Odnośnik to po prostu element, który przenosi nas w inne miejsce strony lub na całkowicie inną stronę.

Najczęściej wykorzystuje się go do stworzenia menu lub by stworzyć odsyłacz do innej strony, która nam się spodobała albo którą chcemy polecić dla czytelnika.

Odnośnik może być tekstowy (klikamy w tekst), obrazkowy (klikamy w obrazek) lub nawet może prowadzić do adresu e-mail.

Odnośnik zwykły, tekstowy:

Odnośnik obrazkowy:

Odnośnik do e-maila:

 

Listy

Listę często wykorzystuje się do stworzenia menu na stronie lub po prostu do wypisania elementów w czytelny sposób.

Istnieją 2 typy listy: uporządkowana (numeracja przed każdym elementem) i nieuporządkowana (domyślnie kółeczka przed każdym z elementów).

Lista nieuporządkowana, czyli <ul> (z angielskiego: unordered list)

Lista uporządkowana, <ol> (z angielskiego: ordered list)

Chcesz ​nauczyć ​się ​czegoś ​nowego?​

Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron www - kursy dla początkujących i zaawansowanych

Tabele

Kod, który stworzy prostą tabelę z 2 wierszami i 2 kolumnami.

Poszczególne elementy oznaczają:

  • table – początek tabeli
  • tr – table row, czyli wiersz w tabeli
  • td – kolumna w tabeli

 

Div

Element, który służy do oddzielenia jakiegoś fragmentu strony. Dzięki niemu możemy podzielić stronę na takie części, jak menu, treść, sidebar oraz stopka, a następnie, za pomocą stylów CSS nadać temu wszystkiemu ładny wygląd.

Znacznik div może zawierać w sobie inne elementy, dzięki czemu często wykorzystuje się go do tworzenia szkieletu strony.

 

Formularze

Służą najczęściej do kontaktowania się z autorem strony. Prosty formularz z polem „imię” i przyciskiem „wyślij” wygląda tak:

method – sposób wysłania formularza, może przyjąć 2 wartości: get lub post.

W skrócie: get wysyła wszystkie dane, które wprowadziłeś poprzez pasek adresu w przeglądarce.
Oznacza to, że po wysłaniu zobaczysz wszystkie wprowadzone dane w pasku adresu.

Post natomiast wysyła te dane w ukryciu, czyli użytkownik ich nie widzi.
Do tego tematu na pewno wrócisz, gdy zainteresuje Cię język PHP i wysyłanie formularzy

action – adres, na który zostanie przesłany formularz

 

Rodzaje pól formularza

Select – lista rozwijalna

Checkbox – pole w kształcie kwadracika, który możemy zaznaczyć i odznaczyć

Radio – pole z kółkiem, które możemy zaznaczać

Textarea – pole na wiadomość lub dłuższy tekst. Za pomocą atrybutów ustalamy jego wielkość: rows – wiersze (czyli wysokość), cols – kolumny (czyli szerokość)

Przykład formularza z dwoma polami: „imię” oraz „email”, miejscem do wpisania wiadomości oraz przyciskiem wyślij:

 

Komentarze

Komentarze w HTML są niewidoczne dla przeglądarki, tzn. widoczne są tylko z poziomu kodu i nie zobaczy ich osoba, która przegląda stronę.

Wykorzystuje się je często do skomentowania (opisania) jakiejś części strony w kodzie, by w późniejszym czasie łatwiej było ją modyfikować.

Wtedy nie musisz przeglądać i analizować całego kodu strony – komentarze opisują wszystko czarno na białym.

Komentarz tworzymy następująco:

Lub tak:

Komentarzy można też użyć, by szybko wyrzucić ze strony jakieś elementy czy pojedyncze znaczniki HTML. Wystarczy po prostu je zakomentować i nie będą widoczne z poziomu przeglądarki – nie musisz ich usuwać

 

Walidacja strony HTML

Jeżeli nie jesteś pewien czy kod, który napisałeś jest poprawny mimo tego, że dobrze wyświetla się w przeglądarce, wejdź na stronę http://validator.w3.org/. Dzięki niej sprawdzisz czy Twoja strona nie zawiera jakichś błędów.

 

To już koniec tej części kursu HTML dla zielonych. Mam nadzieję, że uruchomisz teraz edytor i będziesz na bieżąco sprawdzał jak działają znaczniki HTML, które przed chwilą poznałeś.

Jako uzupełnienie, przeczytaj też: nowe znaczniki w HTML5

Chcesz ​nauczyć ​się ​czegoś ​nowego?​

Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron www - kursy dla początkujących i zaawansowanych

Jakub Jurkian

Pracuję jako Front End Developer w Londynie. Od ponad 11 lat jestem programistą-pasjonatem, a strony (i wszystko co z nimi związane) tworzę od 6 lat. Jestem też autorem kursów wideo - od 2013 roku prowadzę kanał na YouTube i tego bloga. Zaczynałem od pisania artykułów dla jednego z czołowych polskich portali IT - benchmark.pl. Prywatnie od 10 lat jestem związany z kulturą hip-hop (głównie taniec breakdance).

  • >