Podstawy HTML
Wprowadzenie do HTML to wstęp do stworzenia Twojej własnej strony www. Bez względu na to, czy chcesz założyć własnego bloga, uruchomić sklep internetowy, czy po prostu zrozumieć jak działają strony, które odwiedzasz codziennie, nauka HTML (HyperText Markup Language) jest pierwszym krokiem w kierunku zdobycia tej wiedzy. HTML to podstawowy język wykorzystywany do tworzenia i strukturyzowania treści na stronach internetowych. W tym artykule przybliżę podstawy HTML, abyście mogli zacząć swoją przygodę z tworzeniem stron internetowych.
HTML, czyli HyperText Markup Language, to język znaczników używany do tworzenia struktur dokumentów internetowych. W HTML używamy specjalnych znaczników, zwanych tagami, aby określić różne elementy strony internetowej, takie jak nagłówki, paragrafy, linki, obrazy i wiele innych. Natomiast HTML nie jest językiem programowania jak JavaScript czy Python. Jest to język znaczników, co oznacza, że jego głównym celem jest organizowanie i prezentowanie treści w sposób, który jest zrozumiały zarówno dla przeglądarek internetowych, jak i użytkowników.
W tym kursie poznasz podstawy i bardziej zaawansowane techniki tworzenia stron internetowych. Dzięki tej wiedzy będziesz mógł stworzyć własną stronę www nawet w ciągu jednego dnia. W kolejnych lekcjach znajdziesz obszerny opis znaczników wraz z przykładami ich zastosowań.
Co więcej, aby taki plik stworzyć nie potrzebujesz zaawansowanego oprogramowania. Wystarczy najprostszy edytor tekstowy np. Notatnik.
Programy do nauki HTML i CSS
- Edytor tekstu – popularne edytory to Visual Studio Code, Sublime Text, Atom, czy wspomniany Notatnik.
- Przeglądarka internetowa – możesz używać dowolnej przeglądarki, takiej jak Google Chrome, Mozilla Firefox, Safari itp.
Możliwości HTML
Przede wszystkim język HTML umożliwia prezentację kodu strony www w przeglądarce internetowej w sposób uporządkowany i czytelny dla użytkowników. Dlatego stosując takie elementy jak nagłówki, akapity, listy, odnośniki tworzymy hierarchię pliku HTML. Dodatkowo na stronie możemy umieścić obiekty, które wpłyną na jej atrakcyjność np. zdjęcia, multimedia, formularze.
Potencjał HTML5, czyli nowe możliwości w tworzeniu
Rozwijany przez lata język HTML4 doczekał się swojego najnowszego wcielenia HTML5. Wprowadzenie standardu HTML5 CSS3 to znak nowych czasów, potrzeb oraz wyzwań. Co więcej zmiana oczekiwań użytkowników w porównaniu do tego, co miało miejsce kilkanaście lat temu sprawiło, że zaistniała potrzeba ujednolicenia standardów oraz zwiększenia możliwości w tworzeniu stron www.
Wraz z nadejściem HTML5 i CSS3 otrzymaliśmy narzędzia do łatwej rozbudowy strony o elementy interaktywne oraz multimedialne. Dzięki nowym znacznikom oraz regułom możemy tworzyć ciekawe efekty, dodawać filmy, muzykę, animacje. Nowe znaczniki mają istotny wpływ na szybkość działania strony.
Warto wspomnieć, że HTML5 jest kompatybilny ze wcześniejszymi wersjami tak więc większość elementów, które były używane w HTML4 tutaj znajdzie swoje zastosowanie.
Struktura dokumentu HTML
Dokument HTML składa się z kilku podstawowych elementów, które są zorganizowane w odpowiedniej strukturze. Każdy dokument HTML zaczyna się od deklaracji typu dokumentu, a następnie zawiera elementy <html>, <head> i <body>. Oto podstawowy szablon dokumentu HTML:
<!DOCTYPE html>
<html>
<head>
<title>Moja Pierwsza Strona</title>
</head>
<body>
<h1>Witaj, Świecie!</h1>
<p>To jest mój pierwszy dokument HTML.</p>
</body>
</html>Objaśnienie elementów:
<!DOCTYPE html>– deklaracja typu dokumentu informuje przeglądarkę, że dokument jest w formacie HTML5<html>– element otaczający cały dokument HTML<head>– sekcja zawierająca metadane o dokumencie, takie jak tytuł strony, linki do arkuszy stylów CSS oraz skrypty JavaScript<title>– ustal tytuł strony, który pojawi się na karcie przeglądarki<body>– sekcja zawierająca właściwą treść strony internetowej, którą widzą użytkownicy
Podstawowe tagi HTML
Tagi HTML są kluczowym elementem każdego dokumentu HTML. Poniżej przedstawiamy kilka najczęściej używanych tagów:
Nagłówki: Tagi nagłówków (od <h1> do <h6>) służą do tworzenia nagłówków o różnej wielkości.
<h1>Największy Nagłówek</h1>
<h2>Drugi Największy Nagłówek</h2>
<h3>Średni Nagłówek</h3>
<h4>Mniejszy Nagłówek</h4>
<h5>Bardzo Mały Nagłówek</h5>
<h6>Najmniejszy Nagłówek</h6>Paragrafy: Tagi <p> są używane do definiowania paragrafów tekstu.
<p>To jest przykład paragrafu tekstu.</p>Linki: Tagi <a> służą do tworzenia hiperłączy. Atrybut href określa adres URL, do którego link prowadzi.
<a href="https://kurshtmlcss.pl">Odwiedź kurshtmlcss.pl</a>Obrazy: Tagi <img> służą do wstawiania obrazów. Atrybut src określa ścieżkę do pliku obrazu, a alt dostarcza tekst alternatywny.
<img src="obrazek.jpg" alt="Opis Obrazka">Listy: HTML umożliwia tworzenie list uporządkowanych (numerowanych) za pomocą tagów <ol> oraz nieuporządkowanych (punktowanych) za pomocą tagów <ul>.
<ul>
<li>Pierwszy element listy nieuporządkowanej</li>
<li>Drugi element listy nieuporządkowanej</li>
</ul>
<ol>
<li>Pierwszy element listy uporządkowanej</li>
<li>Drugi element listy uporządkowanej</li>
</ol>Formatowanie tekstu HTML
Pogrubienie tekstu:
<b>To jest pogrubiony tekst</b>Kursywa:
<i>To jest tekst w kursywie</i>Podkreślenie:
<u>To jest podkreślony tekst</u>Elementy liniowe (span): Umożliwiają formatowanie części tekstu wewnątrz paragrafu.
<p>To jest <span style="color: red;">czerwony tekst</span> wewnątrz paragrafu.</p>To jest czerwony tekst wewnątrz paragrafu.
Wprowadzenie do HTML – podsumowanie
Przede wszystkim HTML jest podstawowym językiem, który każdy przyszły twórca stron internetowych musi poznać. Rozumienie jego podstawowych elementów, takich jak struktura dokumentu, najczęściej używane tagi, atrybuty i formatowanie tekstu, jest kluczowe do rozpoczęcia przygody z web developmentem.
Co więcej w następnych lekcjach zajmiemy się bardziej zaawansowanymi aspektami HTML, w tym formularzami, tabelami oraz wprowadzeniem do stylizacji za pomocą CSS. Jeśli już znasz wprowadzenie do HTML, czas zacząć tworzyć swoje pierwsze strony internetowe! Pamiętaj, że najlepszym sposobem na naukę jest praktyka, więc nie bój się eksperymentować z kodem i tworzyć własne projekty.
W kolejnej lekcji przygotujemy i omówimy podstawowy szablon strony HTML.