Znaczniki HTML5 - opis

Edycja Tekstu

<p>Tekst</p> - akapit
<span>Tekst</span> - tekst, który zajmuje co najwyżej jedną linijkę
<strong>Tekst</strong> - pogrubienie tekstu
<em></em> - pochylenie tekstu

Nagłówki

<h1>Tekst</h1> - nagłówek poziomu 1
<h6>Tekst</h6> - nagłówek poziomu 6

Mamy 6 poziomów nagłówków czyli występują <h1></h1><h2></h2>...<h6></h6>

Obrazki

<img src="ścieżka do obrazka" /> - umieszczenie obrazka na stronie
- dodatkowe atrybuty:
  - width="szerokość" - szerokość obrazka w pikselach
  - height="wysokość" - wysokość obrazka
  - alt="opis" - opis obrazka, gdy ten nie załaduje się poprawnie bądź jeżeli z naszej strony korzysta osoba niewidoma

Odnośniki

<a href="adres">nazwa linka</a> - odnośnik do danego adresu strony
<a href="mailto:adres mailowy">nazwa linka</a> - odnośnik do przekierowania bezpośrednio do napisania wiadomości mailowej do wskazanego adresu

Listy

Lista uporządkowana

<ul>
    <li>Pierwszy element listy</li>
    <li>Drugi element listy</li>
</ul>

Lista nieuporządkowana

<ol>
    <li>Pierwszy element listy</li>
    <li>Drugi element listy</li>
</ol>

Oddzielanie fragmentów lub sekcji strony

<div>Treść strony</div>
<header>Treść nagłówka</header> - sekcja nagłówka strony
<main>Treść strony</main> - sekcja główna strony
<footer>Treść stopki</footer> - sekcja stopki strony
<article>Treść artykułu</article> - sekcja "artykułu"
<nav>Treść nawigacji</nav> - sekcja nawigacji strony
<aside>Treść poboczna</aside> - sekcja poboczna strony

Tabele

<table>
    <tr>
        <th>Nagłówek</th>
        <td>Kolumna 1</td>
        <td>Kolumna 2</td>
    </tr>
</table>

table - ogólna tabela
tr - wiersz w tabeli
th - nagłówek kolumny
td - kolumna w tabeli

Łączenie kolumn i wierszy w tabeli

Mamy możliwość łączenia kolumn i wierszy dzięki atrybutowi colspan oraz rowspan

<table>
    <tr>
        <th>Nagłówek<th>
        <td>Coś</td>
        <td>Coś</td>
    </tr>
    <tr>
        <th>Nagłówek 2</th>
        <td colspan="2">Coś 2</td>
    </tr>
</table>

<table>
    <tr>
        <th>Nagłówek<th>
        <td>Coś</td>
        <td rowspan="3">Coś całość</td>
    </tr>
    <tr>
        <th>Nagłówek 2</th>
        <td>Coś</td>
    </tr>
    <tr>
        <th>Nagłówek 3</th>
        <td>Coś</td>
    </tr>
</table>

Sekcje w tabelach

Posiadamy 3 sekcje w tabelach:

Sekcja <thead></thead> - wyznacza nam nagłówek tabeli
Sekcja <tbody></tbody> - wyznacza nam ciało naszej tabeli
Sekcja <tfoot></tfoot> - wyznacza nam stopkę/zakończenie tabeli

Formularz

<form method="post" action="#">
    <input type="text" name="imie" />
    <textarea name="wiadomosc"></textarea>
    <input type="submit" name="wyslij" />
</form>

form - calosc formularza

input - rodzaj pola do wypełnienia/zaznaczenia

typ (checkbox) - pole do zaznaczenia lub odznaczenia
typ (radiobutton) - lista opcji, z której możemy wybrać tylko 1 odpowiedź

textarea - jest to pole na dłuższą wiadomość

atrybut (method) - metoda dzięki, której wysyłamy nasz formularz występuje ona w 2 postaciach
- GET - metoda jawna (widzimy co jest wysyłane w pasku adresu)
- POST - metoda nie jawna (wszystko jest wysyłane w tle)
action - element docelowy, do którego zostanie wysłany formularz (#) oznacza wywołanie w tym samym dokumencie

Select

<select>
    <option>Opcja 1</option>
    <option>Opcja 2</option>
</select>

Jest to lista rozwijana z poszczególnymi zadeklarowanymi opcjami.

Komentarze

<!-- Treść komentarza -->

Komentarze wykorzystujemy do komentowania fragmentu kodu lub opisu/podpowiedzi/rozjaśnienia danego fragmentu kodu

np:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Formularz</title>
    </head>
    <body>
    <!-- Formularz wysyłania wiadomości -->
        <form method="POST" action="#">
        <!-- Sekcja wypełniania formularza -->
            <div>
                <span>Imię: </span><input type="text" name="imie" />
            </div>
            <div>
                <span>Nazwisko: </span><input type="text" name="nazwisko" />
            </div>
            <div>
                <span>Wiadomość: </span><textarea name="wiadomocs"></textarea>
            </div>
        <!-- Sekcja przycisków obsługi formularza -->
            <div>
                <input type="submit" name="wyslij" value="Wyślij" />
                <input type="reset" value="Wyczyść formularz" />
            </div>
        </form>
    </body>
</html>

Znaczniki HTML5