Podstawowe znaczniki HTML – kurs HTML dla zielonych

Podstawowe znaczniki HTML - tworzenie strony www

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:

<h1>Strona o samochodach osobowych</h1>

<p>W tym miejscu znajduje się artykuł.</p>

<p>Chcesz przeczytać więcej? <a href="http://adres.strony.pl">przejdź na stronę</a></p>

 

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.

<p>Treść akapitu</p>

<span>Tekst jednolinijkowy</span>

<div id="content">Zawartość strony</div>

<strong>pogrubiony tekst</strong>

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:

<img src="obrazek.jpg" width="120" height="60" />

<br />

 

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:

<!doctype html>

Title

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

<title>Tytuł strony</title>

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:

<head>
   <meta charset="UTF-8" />
   <meta name="description" content="Opis strony" />
   <meta name="keywords" content="Słowa kluczowe" />
   <meta name="author" content="Jan Kowalski" />
</head>

 

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>).

<p>Tekst na stronie</p>

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.

<p>Tekst na stronie</p>

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.

<p>Pewien tekst <span>na stronie</span></p>

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

<strong>Tekst pogrubiony</strong>

albo pochylony przez znacznik em

<em>Tekst na stronie</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.

<h1>Nagłówek najwyższy</h1>
<h2>Nagłówek h2</h2>
<h3>Nagłówek h3</h3>
<h4>Nagłówek h4</h4>
<h5>Nagłówek h5</h5>
<h6>Nagłówek h6</h6>

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:

<img src="http://strona.pl/obrazek.jpg" width="300" height="250" alt="Tekst alternatywny" />

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:

<a href="http://adres.strony.pl">wejdź na moją stronę</a>

Odnośnik obrazkowy:

<a href="http://adres.strony.pl"><img src="obrazek.jpg" /></a>

Odnośnik do e-maila:

<a href="mailto:[email protected]">napisz do mnie</a>

 

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)

<ul>
   <li>Element pierwszy</li>
   <li>Element drugi</li>
   <li>Element trzeci</li>
</ul>

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

<ol>
   <li>Element pierwszy</li>
   <li>Element drugi</li>
   <li>Element trzeci</li>
</ol>

 

Tabele

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

<table>
   <tr>
      <td>...</td>
      <td>...</td>
   </tr>
   <tr>
      <td>...</td>
      <td>...</td>
   </tr>
</table>

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.

<div id="strona">
   <div id="menu">menu...</div>

   <div id="tresc">tresc...</div>

   <div id="sidebar">sidebar...</div>

   <div id="stopka">stopka...</div>
</div>

 

Formularze

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

<form method="post" action="index.html">
   <input type="text" value="Twoje imię" name="twoje-imie" />
   <input type="submit" value="Wyślij" />
</form>

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

<select name="nazwa">
   <option>1 wybór</option>
   <option>2 wybór</option>
   <option>3 wybór</option>
</select>

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

<input type="checkbox" name="nazwa" value="wartość" />Pole typu checkbox

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

<input type="radio" name="nazwa" value="wartość" />Pole typu radio

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

<textarea rows="7" cols="40" name="twoja-wiadomosc"></textarea>

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

<form method="post" action="index.html">
   <input type="text" value="Twoje imię" name="twoje-imie" />
   <input type="email" value="Twój email" name="twoj-email" />

   <textarea rows="7" cols="40" name="twoja-wiadomosc"></textarea>

   <input type="submit" value="Wyślij" />
</form>

 

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:

<!-- Treść komentarza -->

Lub tak:

<!-- Tutaj zaczyna się środkowa część strony -->

<div id="srodek"></div>
...

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ć

<!-- <p>Akapit, który ma być niewidoczny</p>
<img src="obrazek.jpg" alt="obrazek, który ma być niewidoczny" /> -->

 

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

1 myśl na “Podstawowe znaczniki HTML – kurs HTML dla zielonych”

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *