Wprowadzenie do HTML - Jakub Szpil

#Co to jest HTML?

HTML (HyperText Markup Language) to podstawowy język wykorzystywany do tworzenia i strukturyzowania stron internetowych. HTML używa elementów, które definiują różne części dokumentu, takie jak nagłówki, akapity, linki, obrazy, i wiele innych.

#Podstawowa struktura dokumentu HTML

Każdy dokument HTML ma określoną strukturę, która składa się z kilku kluczowych elementów:

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tytuł strony</title>
  </head>
  <body>
    <h1>Witaj, świecie!</h1>
    <p>To jest przykładowa strona HTML.</p>
  </body>
</html>

#Wyjaśnienie struktury

<!DOCTYPE html>: Deklaracja typu dokumentu określająca, że dokument jest w HTML5.
<html>: Korzeń dokumentu HTML.
<head>: Zawiera meta informacje o dokumencie, takie jak kodowanie znaków i tytuł strony.
<meta charset="UTF-8">: Określa kodowanie znaków dokumentu.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Zapewnia poprawne wyświetlanie na urządzeniach mobilnych.
<title>: Tytuł strony wyświetlany na karcie przeglądarki.
<body>: Zawiera treść strony, która jest widoczna dla użytkownika.

#Podstawowe elementy HTML

#Nagłówki

HTML posiada sześć poziomów nagłówków, od <h1> do <h6>, gdzie <h1> jest najważniejszym nagłówkiem, a <h6> najmniej ważnym.

<h1>Najważniejszy nagłówek</h1>
<h2>Drugi poziom nagłówka</h2>
<h3>Trzeci poziom nagłówka</h3>

#Akapity

Akapity są tworzone za pomocą elementu <p>.

<p>To jest akapit tekstu.</p>

#Linki

Linki są tworzone za pomocą elementu <a>, który zawiera atrybut href określający adres URL.

<a href="https://www.example.com">Kliknij tutaj, aby przejść do Example</a>

#Obrazy

Obrazy są dodawane za pomocą elementu <img>, który zawiera atrybut src wskazujący na źródło obrazu oraz alt opisujący obraz.

<img src="obrazek.jpg" alt="Opis obrazka" />

#Listy

Listy nieuporządkowane (<ul>) i uporządkowane (<ol>) zawierają elementy listy (<li>).

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

<ol>
  <li>Element listy 1</li>
  <li>Element listy 2</li>
  <li>Element listy 3</li>
</ol>

#Formularze

Formularze są tworzone za pomocą elementu <form>, który zawiera różne elementy wejściowe, takie jak pola tekstowe (<input>), pola wyboru (<input type="checkbox">), przyciski radio (<input type="radio">), i przyciski (<button>).

<form action="/submit-form" method="post">
  <label for="name">Nazwa:</label>
  <input type="text" id="name" name="name" />
  <input type="submit" value="Wyślij" />
</form>

#Zadania do wykonania

#Zadanie 1

Utwórz stronę HTML, która zawiera:

Nagłówek <h1> z tytułem "Moja pierwsza strona".
Akapit z krótkim opisem.
Link do dowolnej strony internetowej.

Pokaż rozwiązanie

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Moja pierwsza strona</title>
  </head>
  <body>
    <h1>Moja pierwsza strona</h1>
    <p>To jest krótki opis mojej pierwszej strony internetowej.</p>
    <a href="https://www.example.com">Kliknij tutaj, aby przejść do Example</a>
  </body>
</html>

#Zadanie 2

Utwórz stronę HTML, która zawiera:

Obrazek z atrybutem src wskazującym na dowolny obrazek z internetu.
Alternatywny tekst opisujący obrazek.

Pokaż rozwiązanie

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Strona z obrazkiem</title>
  </head>
  <body>
    <img src="https://via.placeholder.com/150" alt="Przykładowy obrazek" />
  </body>
</html>

#Zadanie 3

Utwórz stronę HTML, która zawiera:

Listę nieuporządkowaną z trzema ulubionymi potrawami.
Listę uporządkowaną z trzema krokami do ugotowania jednego z tych potraw.

Pokaż rozwiązanie

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lista potraw</title>
  </head>
  <body>
    <h1>Moje ulubione potrawy</h1>
    <ul>
      <li>Pizza</li>
      <li>Sushi</li>
      <li>Spaghetti</li>
    </ul>
    <h2>Jak ugotować spaghetti</h2>
    <ol>
      <li>Ugotuj makaron.</li>
      <li>Przygotuj sos pomidorowy.</li>
      <li>Wymieszaj makaron z sosem.</li>
    </ol>
  </body>
</html>

#Zadanie 4

Utwórz formularz HTML, który zawiera:

Pole tekstowe do wprowadzenia imienia.
Pole typu radio do wyboru płci.
Pole typu checkbox do zaznaczenia zgody na przetwarzanie danych.
Przycisk do wysłania formularza.

Pokaż rozwiązanie

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Formularz</title>
  </head>
  <body>
    <form action="/submit-form" method="post">
      <label for="name">Imię:</label>
      <input type="text" id="name" name="name" /><br /><br />

      <label>Płeć:</label>
      <input type="radio" id="male" name="gender" value="male" />
      <label for="male">Mężczyzna</label>
      <input type="radio" id="female" name="gender" value="female" />
      <label for="female">Kobieta</label><br /><br />

      <input type="checkbox" id="consent" name="consent" />
      <label for="consent">Zgadzam się na przetwarzanie danych osobowych</label
      ><br /><br />

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

To tyle na temat podstaw HTML! Zachęcam do dalszego eksperymentowania i zgłębiania tego tematu, aby tworzyć bardziej złożone i interaktywne strony internetowe.