Podstawy HTML – Tworzenie pierwszej strony internetowej

Wstęp

Tworzenie stron internetowych to niezwykle satysfakcjonujące i kreatywne zajęcie. HTML, czyli HyperText Markup Language, to podstawowy język służący do budowy stron www. W tym artykule przeprowadzimy Cię krok po kroku przez proces tworzenia prostej strony internetowej. Omówimy podstawowe elementy HTML, struktury dokumentu oraz podzielimy się praktycznymi wskazówkami. Bez względu na to, czy jesteś początkującym, czy masz już pewne doświadczenie, w tym przewodniku znajdziesz przydatne informacje.

Co to jest HTML?

HTML to język znaczników, który pozwala na formatowanie treści w Internecie. Dzięki HTML możemy tworzyć różne elementy, takie jak nagłówki, akapity, listy, linki oraz obrazy. Każdy element jest opakowany w odpowiednie znaczniki, które wskazują przeglądarkom, jak mają te elementy prezentować.

Kluczowe elementy HTML

1. Znaczniki– podstawowe bloki budujące HTML, takie jak,,.
2. Atrybuty– dodatkowe informacje o znacznikach, np.srcdla obrazów czyhrefdla linków.
3. Struktura dokumentu– właściwe umiejscowienie znaczników w kodzie.

Struktura dokumentu HTML

Każdy dokument HTML ma określoną strukturę, która jest niezbędna do prawidłowego wyświetlania strony. Struktura ta składa się z kilku podstawowych elementów. Poniżej przedstawiamy najważniejsze z nich.

Podstawowy szkielet dokumentu HTML

        
Witaj na mojej stronie!
 
To jest moja pierwsza strona internetowa zbudowana w HTML.
  

Wyjaśnienie poszczególnych elementów:

• – definiuje typ dokumentu i umożliwia przeglądarkom prawidłowe wyświetlenie strony.
• – otwiera dokument HTML, a atrybutlanginformuje o języku strony.
• – zawiera metadane, takie jak tytuł strony czy zestawienie znaków.
• – to główny obszar, w którym umieszczamy treść widoczną dla użytkownika.

Tworzenie elementów na stronie

Teraz, gdy mamy już podstawową strukturę, możemy zacząć dodawać różne elementy do naszej strony. Oto kilka z nich:

Nagłówki

Nagłówki w HTML są tworzone przy użyciu znaczników od

do

.

oznacza nagłówek najwyższego poziomu, a

nagłówek najniższego poziomu.

To jest nagłówek H1
 
To jest nagłówek H2

Akapity

Akapity definiujemy za pomocą znacznika

. Wszystko, co umieścimy wewnątrz tego znacznika, będzie traktowane jako tekst akapitu.

To jest pierwszy akapit na stronie.
 
To jest drugi akapit, który również znajduje się na stronie.

Listy

HTML oferuje możliwość tworzenia list uporządkowanych (numerowanych) oraz nieuporządkowanych (punktowanych).

Lista nieuporządkowana

 
Pierwszy element
 
Drugi element
 
Trzeci element
 

Lista uporządkowana

 
Pierwszy element
 
Drugi element
 
Trzeci element
 

Linki

Linki są niezwykle ważne w HTML, ponieważ pozwalają na nawigację pomiędzy stronami. Tworzymy je za pomocą znacznika.

Przejdź do Example.com

Obrazy

Aby dodać obraz do strony, używamy znacznika. Ważne jest, aby zawsze podawać atrybutalt, który opisuje obraz.

Przykład pełnej strony

Oto przykład pełnej, prostej strony HTML, która wykorzystuje wszystkie powyższe elementy:

        
Witaj na mojej stronie!
 
To jest moja pierwsza strona internetowa zbudowana w HTML. Poniżej znajdziesz kilka informacji:
 
Lista ulubionych filmów:
 
 
Film 1
 
Film 2
 
Film 3
 
 
Linki do stron:
 
Odwiedź moją ulubioną stronę: Example.com
 
Obrazek:
   

Testowanie i uruchamianie strony

Aby zobaczyć, jak działa nasza strona, musimy ją zapisać w pliku o rozszerzeniu.html. Na przykład, możemy nazwać nasz plikindex.html. Następnie otwieramy ten plik w przeglądarce internetowej. Wystarczy kliknąć prawym przyciskiem myszy na plik i wybrać opcję „Otwórz za pomocą” oraz wskazać przeglądarkę.

Podsumowanie elementów HTML

Element	Opis
	Oznacza początek dokumentu HTML
	Zawiera metadane (tytuł, zestawienie znaków)
	Główna treść strony
-	Nagłówki o różnych poziomach
	Definiuje akapit
	Tworzy link
	Dodaje obraz
	Tworzy listę nieuporządkowaną
	Tworzy listę uporządkowaną

Wnioski

Tworzenie stron internetowych w HTML jest fascynującym zajęciem, które otwiera przed nami wiele możliwości. Dzięki zrozumieniu podstawowych znaczników i ich zastosowania możemy budować własne strony i dzielić się nimi z innymi. Pamiętaj, że praktyka czyni mistrza – im więcej będziesz pracować z HTML, tym łatwiejsze stanie się dla Ciebie projektowanie stron internetowych. Zachęcamy do eksperymentowania z różnymi elementami oraz stylizacją, aby dostosować swoje projekty do własnych potrzeb.

Krzysztof Fronczak