Notatka: Definicja i podstawy HTML

HTML (HyperText Markup Language) – to język znaczników służący do tworzenia i strukturyzowania stron internetowych.
Dzięki niemu można określić, które elementy strony są tytułem, akapitem, listą, linkiem, obrazem itp.
HTML nie jest językiem programowania, lecz językiem opisu zawartości strony.

Podstawowa struktura dokumentu HTML:

Wprowadzenie do HTML

HTML to język służący do tworzenia stron internetowych.
Pozwala na formatowanie tekstu, tworzenie nagłówków i dodawanie linków.

Przykłady formatowania

Pogrubienie, kursywa, przekreślenie
Czerwony tekst,
niebieski,
pomarańczowy,
turkusowy.

Elementy HTML

• Nagłówki H1–H6
• Listy punktowane
• Linki i kotwice

Przykład kotwicy

Wróć na początek strony

1. Wprowadzenie

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.

1.1 Tło projektu

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

1.2 Cel pracy

Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.

2. Cele projektu

2.1 Główne cele

• Lorem ipsum dolor sit amet, consectetur adipiscing elit.
• Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
• Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

2.2 Cele szczegółowe

• Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
• Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

3. Metodologia

3.1 Przygotowanie

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

3.2 Zbieranie danych

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

3.3 Wdrożenie

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

4. Wyniki i omówienie

4.1 Wyniki

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

4.2 Omówienie

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

5. Wnioski

5.1 Podsumowanie

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

5.2 Rekomendacje

• Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
• Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
• Excepteur sint occaecat cupidatat non proident.

Najważniejsze elementy HTML, które poznałem:

• Nagłówki (H1–H6) – określają tytuły i podtytuły na stronie.

• Linki (<a href="">) – prowadzą do innych stron lub sekcji tej samej strony (tzw. kotwice).

• Formatowanie tekstu:

  • <b> – pogrubienie,

  • <i> – kursywa,

  • <s> – przekreślenie.

• Kolory czcionki – można ustawiać w atrybucie style="color:#HEX", np. #FF0000 to czerwony.

• Listy punktowane (<ul><li>) – porządkują treść w punktach.

• Linki wewnętrzne (kotwice) – umożliwiają przenoszenie się w obrębie jednej strony, np. z dołu na górę.

Dziś tworzyłem prosty dokument w języku HTML, w którym wykorzystałem różne znaczniki i style.
Przygotowałem przykładową stronę zawierającą:

• nagłówki od H1 do H4,

• tekst sformatowany za pomocą pogrubienia, kursywy i przekreślenia,

• listę punktowaną z najważniejszymi elementami,

• link zewnętrzny oraz link wewnętrzny (kotwicę),

• tekst w czterech różnych kolorach przy użyciu kodów HEX,

• opis wstępujący w strukturę HTML (sekcje <head> i <body>).

Dzięki temu ćwiczeniu utrwaliłem podstawy HTML i nauczyłem się praktycznie stosować poznane znaczniki.