Znasz już strukturę, którą musisz plikowi index.html. Teraz poznasz podstawowe znaczniki, ich przeznaczenie i gdzie powinno się je umieszczać. 

Tekst

Zaczniemy od znaczników dotyczących tekstu jako takiego. Rozróżniamy dwa ich typy: strukturalne oraz semantyczne. Te pierwszy to między innymi nagłówki czy akapity. A semantyczne to te, które zapewniają jakieś wyróżnienie tekstu np. pogrubienie lub zaznaczenie cytatu. Poniżej zamieszczam najważniejsze znaczniki:

• nagłówki tj. od h1 do h6, gdzie h6 jest najniższego rzędu, 

<h6>nagłówek szóstego poziomu</h6>

• akapit, czyli <p>

<p> to jest akapit. 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.</p>

<p> 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>

• <b> pogrubienie </b>  oraz  <i> kursywa </i> 
• ^{to indeksy górne}, a _{to indeks dolny}
• <br /> podział wiersza
• <hr /> to pozioma linia
• <strong> to wzmocnienie </strong>
• <em> daje dodatkowy nacisk, a wyświetli się kursywą </em> 
• <blockquote> „To jest cytat” </blockquote>
• <q> to cytat, ale krótszy </q>
• <abbr> akronim lub skrót z atrybutem title </abbr>
• <cite> podaje źródło prezentowanych danych </cite>
• <dfn> Oznacza definicję jakiegoś pojęcia naukowego lub potocznego </dfn>
• <address> informacje adresowe dotyczące autora strony </address>
• <ins> treści, jakie zostały dodane </ins> oraz <del> treści, które zostały usunięte </del>
• <s> informacje nieaktualne lub niedokładne </s>

Listy

Listy możemy podzielić na trzy rodzaje. Wiesz, że menu strony to też jest lista?

Listy numerowane

Listy numerowane to inaczej listy uporządkowane. Mogą mieć nadane liczby arabskie lub rzymskie (w pliku css).

Aby utworzyć taką listę, musisz zastosować znacznik <ol>. Elementy takiej listy zaznaczamy znacznikiem <li>.

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

Listy wypunktowane

Wypunktowanie to utworzenie listy nieuporządkowanej. Możemy znaczki zaczynające każdy element zmieniać tj. gwiazdką, kwadratem lub punktem (w pliku css).

Aby stworzyć listę uporządkowaną, użyjemy znacznika <ul> oraz <li> dla poszczególnych elementów tej listy.

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

Listy definicji

Tu mamy z kolei zbiór definicji, czyli wyrażenia lub terminu oraz odpowiadający mi opisy, wyjaśnienia.

Tu mamy znacznik <dl>, a w nim pary znaczników <dt> oraz <dd>.
<dt> to termin, jaki chcemy opisać, a <dd> to już wyjaśnienie.

<dl>
   <dt>lista definicji</dt>
   <dd>to zbiór definicji składającej się z terminu oraz jego wyjaśnienia</dd>
</dl>

Zagnieżdżone listy

W listach fajne jest to, że możemy je tworzyć jedną w drugiej, a jeszcze do tego określać czy mają być uporządkowane, czy nie. Jedynie trzeba pamiętać, aby właściwie je zamykać.

<ul> 
   <li>Listy uporządkowane</li>
   <li>Listy
       <ol>
          <li>definicji</li>
          <li>nieuporządkowane</li>
       </ol>
    </li>
</ul>

Łącza

Jak przenosić się między stronami? Albo przeskakiwać do właściwych zakładek? Możemy też przenosić się do konkretnego momentu na stronie? A jak zrobić, aby strona otwarła się w nowym oknie przeglądarki?

Tworzenie łączy

Aby stworzyć łącze, potrzebujemy znacznika <a></a> (to tak zwany archon – element zakotwiczenia, kotwica) wraz z atrybutem „href” (czyli odwołanie do hiperłącza). Łączymy do innych stron www, do zakładek oraz miejsc na tej samej stronie. Między znacznikami otwierającym i zamykającym zamieszczamy tekst linka np. „czytaj więcej”.

Aby strona, na którą chcemy przejść, otwarła się w nowym oknie przeglądarki, dodajemy atrybut „target„. Umieszczamy do w elemencie otwierającym archon (kotwica) zaraz za atrybutem „href”. Jego wartość musi być ustawiona na: „_blank„. 

Linkowanie do innych stron

Tu istotny jest adres URL (ang.uniform resource locator- ujednolicony lokalizator zasobów), czyli wartość atrybutu „href”. Musi być to tzw. bezwzględny adres strony. Co to oznacza? To oznacza, że wpisujemy PEŁNY adres np.  https://pl.wikipedia.org/wiki/HTML5 (ten adres przeniesie Cię do strony Wikipedii i  do hasła „html5”).

<a href="https://pl.wikipedia.org/wiki/HTML5">Wikipedia.HTML5</a>

Linkowanie do stron tej samej witryny

Zasada podobna jak wyżej. Z tym że możemy zastosować adres nazywany względnym.  To takie skrócone adresy, czyli wystarczy, że w wartości atrybutu „href” wpiszemy nazwę pliku (pomijamy nazwę domeny, jeśli wszystkie pliki naszej strony są umieszczone w jednym folderze). Poniżej przykład adresu do podstrony „O mnie”.

<a href="o-mnie.html">O mnie</a>

Skakanie po stronie

Możemy również skonstruować łącza dotyczące różnych miejsc na  tej samej stronie. Jak to zrobić? Dosyć łatwo. Na początek trzeba wskazać docelowe miejsce na stronie. Robimy to poprzez nadanie temu miejscu identyfikator, czyli atrybut Id. Id możemy nadać każdemu znacznikowi np. nagłówkowi o poziomie h3 o id poziom_trzeci. Id w nazwie nie może mieć przerw (białych znaków np. spacji) ani cyfr czy innych znaków. Dopuszczalne jest podkreślenie.  Nie powinno być identycznych identyfikatorów na jednej stronie (to chyba oczywiste, prawda?).

<h3 id="poziom_trzeci">Nagłówek poziom 3</h3>

Jak tworzymy łącze do np. nagłówka poziomu 3? W URL wstawiamy odwołanie do ID używając znaczka „#„.

<a href="#poziom_trzeci"Nagłówek poziom 3</a>

Inne miejsca na obcych stronach

Podobnie jak wyżej, możemy za pomocą id odsyłać do konkretnych miejsc innych (zewnętrznych) stron. Zasada jest niemalże ta sama, z tym że wstawiamy adres bezwzględny (gdy strona nie należy do naszej witryny) lub względny (gdy strona to część naszej witryny) oraz znak „#” i id danego miejsca. Przykład poniżej obrazuje łącze do wyszukiwania na stronie Wikipedii.

<a href="https://pl.wikipedia.org/wiki/HTML5#p-search"> Szukaj w Wiki</a>

Odsyłam do poczty

Możemy również utworzyć łącze, które będzie automatycznie otwierało okno naszej poczty e-mail i już wstawionym adresem naszego odbiorcy. Aby to zrobić atrybut „href” musi mieć wartość „mailto:(adres odbiorcy)”.

<a href="mailto:kasia@strona.internetowa.pl"> Wyślij maila do mnie</a> 

Obrazy

Na stronie www, za pomocą html-u możemy umieszczać obrazy, loga, fotografie, wykresy czy też diagramy. Wszystkie te elementy potrafią czasem powiedzieć nam dużo lepiej, o czym jest tekst zamieszczony na stronie. Obraz na stronie www jest całkowicie pełnoprawnym elementem, bez którego obecnie nikt sobie nie wyobraża wpisu blogowego czy żadnego artykułu na portalu informacyjnego.

Wybieramy obraz

Nie będę ponownie podawać skąd brać zdjęcia do strony, gdyż cały spis proponowanych składów znajdziecie w tym wpisie. Pamiętaj, że każde zdjęcie objęte jest prawami autorskimi. Tu zajmiemy się kilkoma rzeczami, o których trzeba pamiętać, wybierając obrazy do swoich stron.

• Obrazy powinny mieć znaczenie. Coś sobą reprezentować. Abstrakcje są całkiem w porządku, ale jako tło.
• Obraz powinien informować. Zapytasz: „A o czym informuje ilustracja zamieszczona powyżej?” Widzimy dziewczynę z plecakiem w plenerze. Szuka czegoś. I to jest ta informacja – poszukiwania odpowiednich obrazów…
• Obraz powinien tworzyć odpowiedni klimat. Obrazy w tym poście mają klimat nostalgiczny, traktujący o zastanawianiu się nad otaczającym nas światem.
• Obraz powinien się wyróżniać na pierwszy rzut oka.
• Obraz powinien pasować do palety barw na stronie, powinny wszystkie współgrać.

Jak zamieszczamy obraz.

Do tego zadania używamy znacznika <img>. W odróżnieniu od większości znaczników ten nie posiada znacznika zamykającego (czyli </img> – nie istnieje). W wyżej przytoczonym znaczniku umieszczamy trzy atrybuty:

• src – czyli źródło obrazu. To nic innego jak adres, skąd ma być on pobrany. Jeśli mamy osobny folder ze zdjęciami w swoim projekcie to używamy adresu względny. Jeśli obraz ma być pobrany ze składu zdjęć np. www.pixabay.com/pl/, kopiujemy adres bezwzględny. 

<img src="images/jesien-liscie.jpg">

<img src="https://pixabay.com/pl/jesieni%C4%85-spadek-li%C5%9Bci-li%C5%9Bcie-3763897/">

• alt – to alternatywny opis obrazu. Zawiera opis zawartości obrazu. Dlaczego jest on tak istotny? Między innymi dla osób niewidzących to ułatwienie. Kiedy strony są czytane przez czytniki ekranowe opis jest też czytany – taka osoba dowie się, że na obrazie powyżej są np. spadające jesienne liście. 
• title – to tzw.tytuł obrazu. Wyświetla się, gdy najedziemy na obraz kursorem myszy.

Właściwości obrazu.

Generalnie wszelkie stylowanie powinno się ustawiać w plikach CSS, ale jest kilka właściwości, które można przemycić w html-u.

• width – czyli szerokość obrazu.Wyrażana jest w pikselach (px);
• height – wysokość obrazu. Podobnie jak szerokość podana jest w pikselach.

<img src="images/jesien-liscie.jpg" alt="spadające liście jesienne" title="Jesienne liście" width="287" height="191">

Nowe elementy.

W HTML5 (czyli najnowszej wersji tego języka znaczników) pojawiły się dwa nowe elementy dedykowane obrazom.

<figure> i <figcaption>

Jest to bardzo praktyczny element. Za jego pomocą nie tylko umieszczamy obraz na stronie, ale też umieszczamy pod nim podpis.
W ten sposób mamy pełen zestaw.

<figure>
   <img src="images/jesien-liscie.jpg" alt="spadające liście jesienne">
   <br />
   <figcaption>Jesienne liście mienią się szeroką paletą ciepłych słonecznych barw. Porywane przez wiatr niby drobinki złota." 
   </figcaption>
</figure> 

I na koniec.

Fotografie najlepiej zapisywać w rozszerzeniu jpeg (pamiętaj o właściwym rozmiarze, czyli takim, jaki ma mieć wyświetlony na stronie).
Inne ilustracje bądź loga mające jednolite barwy, najlepiej zapisywać w formacie GIF, SVG lub png.

To nie wszystkie kluczowe elementy HTML.  Powstanie część druga, a może też trzecia. Wszystko będzie zależało, jak wiele zbierze mi się tych elementów, które na początek wydają mi się dosyć istotne.

Po więcej po raz kolejny odsyłam Cię do fajnie napisanego podręcznika Jona Duckett „HTML i CSS. Zaprojektuj i zbuduj witrynę www.” lu do dostępnego online podręcznika od The Awwwesomes.

Artykuł Elementy składowe pochodzi z serwisu To co najważniejsze.