Wprowadzenie do HTML

Witaj! Poniżej znajdziesz podstawowe informacje na temat struktury dokumentów HTML oraz CSS, wraz z przykładami kodu, które pomogą Ci lepiej zrozumieć, jak budować strony internetowe.

1. Struktura dokumentu HTML

Każdy dokument HTML zaczyna się od deklaracji typu oraz zawiera sekcje head i body.

Przykład:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Moja Strona</title>
</head>
<body>
    <h1>Witaj!</h1>
    <p>To jest przykładowy tekst.</p>
</body>
</html>

2. Kodowanie polskich znaków

Aby polskie znaki wyświetlały się poprawnie, użyj:

<meta charset="UTF-8">

3. Podstawowe znaczniki HTML

<h1> – nagłówek 1. poziomu
<p> – paragraf
<a> – link
<img> – obrazek

4. Formatowanie tekstu

<b> – pogrubienie
<i> – kursywa
<u> – podkreślenie

<p><b>Pogrubiony</b> i <i>kursywa</i></p>

5. Listy HTML

Nieuporządkowana lista:

<ul>
  <li>Element 1</li>
  <li>Element 2</li>
</ul>

Uporządkowana lista:

<ol>
  <li>Element A</li>
  <li>Element B</li>
</ol>

6. Tabele

HTML umożliwia tworzenie tabel przy użyciu znaczników takich jak <table>, <tr>, <th> i <td>.

<table border="1">
  <tr>
    <th>Kolumna 1</th>
    <th>Kolumna 2</th>
  </tr>
  <tr>
    <td>Dane 1</td>
    <td>Dane 2</td>
  </tr>
</table>

7. Formularze

Formularze służą do wprowadzania danych przez użytkownika:

<form action="/submit" method="post">
  <label for="name">Imię:</label>
  <input type="text" id="name" name="name" required>
  <br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <br>
  <input type="submit" value="Wyślij">
</form>

8. CSS – Kaskadowe arkusze stylów

Styl CSS można dołączać na trzy sposoby:

W sekcji <style> w <head>
Zewnętrzny plik przez <link>
Bezpośrednio w tagu HTML (atrybut style)

<style>
  body {
    background-color: #121212;
    color: #e0e0e0;
  }
</style>

9. Składnia CSS

CSS składa się z selektora, właściwości i wartości:

selector {
  property: value;
}

10. Selektory i właściwości

Selektory wskazują, do jakich elementów mają być zastosowane style:

p – wszystkie paragrafy
#id – element o określonym ID
.klasa – wszystkie elementy z daną klasą

.my-class {
  color: red;
  background-color: black;
}