INF.03 HUB - HTML

Dokumentacja HTML pod egzamin INF.03. Każda sekcja zawiera opis, zastosowanie, przykłady i najczęstsze błędy.

Struktura strony HTML

Co robi?

Podstawowy szablon każdej strony.

<!DOCTYPE html>
<html lang="pl">

<head>
<meta charset="UTF-8">
<title>Strona</title>
</head>

<body>

</body>

</html>

Częstotliwość: ~100%

Nagłówki

Służą do tworzenia tytułów.

<h1>Tytuł główny</h1>

<h2>Podtytuł</h2>

<h3>Mniejszy nagłówek</h3>

Akapit

<p>
To jest akapit.
</p>

Link

<a href="https://google.pl">
Google
</a>

Obraz

<img src="zdjecie.jpg" alt="Opis">

Typowe polecenie CKE:

Wyświetl obraz o nazwie kot.jpg.

Lista nieuporządkowana (ul)

<ul>

    <li>Element 1</li>

    <li>Element 2</li>

</ul>

Lista uporządkowana (ol)

<ol>

    <li>Pierwszy</li>

    <li>Drugi</li>

</ol>

Tabela HTML

<table>

<tr>
    <th>ID</th>
    <th>Nazwa</th>
</tr>

<tr>
    <td>1</td>
    <td>Laptop</td>
</tr>

</table>

Częstotliwość: ~70%

Formularz

<form action="" method="post">

</form>

Częstotliwość: ~90%

Input text

<input type="text" name="imie">

Input number

<input type="number" name="wiek">

Input password

<input type="password" name="haslo">

Input date

<input type="date" name="data">

Input email

<input type="email" name="email">

Radio

<input type="radio" name="plec" value="K">

Kobieta

<input type="radio" name="plec" value="M">

Mężczyzna

Częstotliwość: ~40%

Checkbox

<input type="checkbox" name="zgoda">

Select

<select name="miasto">

<option>Poznań</option>

<option>Warszawa</option>

</select>

Częstotliwość: ~50%

Textarea

<textarea name="opis">
</textarea>

Button

<button>

    Wyślij

</button>

Div

<div>

    Treść

</div>

Częstotliwość: ~95%

Semantic Tags

<header></header>

<main></main>

<section></section>

<article></article>

<footer></footer>

Gotowiec egzaminacyjny #1

Przykładowe polecenie CKE:

Wykonaj formularz zawierający pole tekstowe oraz przycisk.

<form method="post">

<input type="text" name="imie">

<button>
    Wyślij
</button>

</form>

Gotowiec egzaminacyjny #2

Przykładowe polecenie CKE:

Wykonaj tabelę z nagłówkami.

<table>

<tr>
    <th>ID</th>
    <th>Nazwa</th>
</tr>

<tr>
    <td>1</td>
    <td>Laptop</td>
</tr>

</table>

Gotowiec egzaminacyjny #3

Przykładowe polecenie CKE:

Wyświetl zdjęcie i podpis pod nim.

<img src="obraz.jpg" alt="Zdjęcie">

<p>
Opis zdjęcia
</p>