Lekcja 47 - Tworzenie stron WWW - HTML, struktura, standardy

📚

Teoria

▼

Czym jest HTML?

HTML (HyperText Markup Language) to jezyk znacznikow sluzacy do tworzenia stron internetowych. Nie jest jezykiem programowania - jest jezykiem opisu struktury dokumentu. Kazda strona internetowa, ktora widzisz w przegladarce, jest zbudowana z kodu HTML.

                    HTML5 to najnowsza wersja standardu HTML, opracowana przez organizacje W3C (World Wide Web Consortium). Wprowadzila wiele nowych elementow semantycznych i mozliwosci multimedialnych.
                

Podstawowa struktura dokumentu HTML

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tytul strony</title>
</head>
<body>
    <h1>Naglowek strony</h1>
    <p>Akapit tekstu.</p>
</body>
</html>

Elementy struktury

<!DOCTYPE html> - deklaracja typu dokumentu (HTML5)
<html> - element glowny dokumentu
<head> - naglowek z metadanymi (niewidoczny na stronie)
<meta charset="UTF-8"> - kodowanie znakow (polskie litery!)
<title> - tytul strony (zakladka przegladarki)
<body> - widoczna tresc strony

Podstawowe znaczniki HTML

<h1> - <h6> - naglowki (od najwazniejszego do najmniej waznego)
<p> - akapit tekstu
<br> - podzial wiersza (znacznik pusty)
<hr> - linia pozioma (separator)
<strong> - tekst pogrubiony (wazny semantycznie)
<em> - tekst pochylony (wyroznienie)
<a href="url"> - hiperłacze (link)
<img src="plik.jpg" alt="opis"> - obraz

Znaczniki semantyczne HTML5

<header> - naglowek strony/sekcji
<nav> - nawigacja
<main> - glowna tresc strony
<article> - niezalezna tresc (artykul)
<section> - sekcja tematyczna
<footer> - stopka strony
<aside> - tresc poboczna (sidebar)

Narzedzia do tworzenia stron

Edytory kodu: Visual Studio Code, Sublime Text, Notepad++
Przegladarka: Chrome, Firefox z narzedziami deweloperskimi (F12)
Walidator W3C: sprawdzanie poprawnosci kodu HTML

✏️

Zadania

▼

Latwe

Zadanie 1: Moja pierwsza strona

Stworz plik index.html z poprawna struktura HTML5. Strona powinna zawierac: tytul w zakladce "Moja strona", naglowek <h1> z Twoim imieniem, akapit z krotkim opisem siebie oraz linie pozioma <hr> oddzielajaca sekcje. Otworz plik w przegladarce.

Pokaz przykladowe rozwiazanie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Moja strona</title>
</head>
<body>
    <h1>Jan Kowalski</h1>
    <p>Czesc! Jestem uczniem technikum
    i ucze sie tworzenia stron WWW.</p>
    <hr>
    <p>To moja pierwsza strona HTML!</p>
</body>
</html>

Latwe

Zadanie 2: Naglowki i akapity

Stworz strone z hierarchia naglowkow od <h1> do <h6>. Pod kazdym naglowkiem dodaj akapit wyjasniajacy, do czego sluzy dany poziom naglowka. Uzyj znacznikow <strong> i <em> do wyroznienia waznych slow.

Srednie

Zadanie 3: Strona z linkami i obrazami

Stworz strone "Moje ulubione strony internetowe". Dodaj: a) naglowek strony, b) co najmniej 5 linkow do ulubionych stron (znacznik <a> z atrybutem target="_blank"), c) 2 obrazy (uzyj darmowych zdjec z serwisu Unsplash lub Pixabay), d) opisy pod kazdym elementem.

Trudne

Zadanie 4: Strona semantyczna

Stworz strone-blog z wykorzystaniem znacznikow semantycznych HTML5. Strona musi zawierac: <header> z tytlem i nawigacja <nav>, <main> z dwoma <article> (wpisy blogowe), <aside> z informacjami o autorze, <footer> ze stopka. Zwaliduj strone na validator.w3.org.

🎥

Materialy wideo

▼

Rozpoczynamy pracę z kodem! Technik informatyk. Egzamin EE.09 / E.14

Pasja informatyki

Podstawy HTML w 20 minut 🌐 | Pełny kurs HTML i CSS #1 [2024]

CodeBucket

🎧

Podcasty

▼

✔️

Quiz - sprawdz sie!

▼

Lekcja 47: Tworzenie stron WWW - HTML, struktura, standardy