Pierwsza strona internetowa w HTML brzmi przerażająco? Uwierz nam – nie ma się czego bać. Jest to prostsze niż myślisz. W poniższym poradniku postaramy się pokazać, jak krok po kroku możesz samodzielnie stworzyć stronę HTML. Do dzieła!
Czym jest HTML?
Na początku musimy obalić podstawowy mit – HTML nie jest językiem programowania. Sam skrót HTML to akronim od Hypertekst Markup Language, czyli hipertekstowego języka znaczników. Jak więc sama nazwa wskazuje, HTML to język znaczników. Pomaga on w tworzeniu struktury stron internetowych. Z wykorzystaniem znaczników HTML możesz nadać odpowiednie znaczenie poszczególnym elementom, np. oznaczyć je jako paragraf, link czy tabelę.
Edytory kodu HTML
Aby rozpocząć pracę z HTML, przede wszystkim potrzebny jest edytor kodu. Dlaczego? Ponieważ strona internetowa to tak naprawdę dokument tekstowy, który możesz edytować np. za pomocą powszechnie znanego Notatnika. Jednakże na rynku istnieje wiele narzędzi, które znacznie ułatwiają prace na kodzie HTML np. poprzez kolorowanie kodu. Strona HTML w Notatniku nie jest aż tak czytelna jak z wykorzystaniem bardziej zaawansowanych, a do tego darmowych narzędzi. Oto klika z nich:
- Notepad++ – jest szczególnie polecany dla osób, które pracują na systemie operacyjnym Windows. Strona HTML w Notepad++ jest prosta w edycji m.in. dzięki wyróżnianiu poszczególnych elementów kodu czy rozbudowanym możliwością wyszukiwania oraz zastępowania tekstu.
- Brackets – edytor kodu przeznaczony zarówno dla użytkowników Windowsa, Linuxa, jak i OSX. Posiada wszystkie niezbędne funkcje do skutecznej edycji kodu HTML. Działa na licencji Open Source.
- Visual Studio Code – edytor kodu firmy Microsoft. Wyróżnia się dużą liczbą dostępnych rozszerzeń, dzięki czemu można dostosowywać funkcjonalności narzędzia do swoich potrzeb.
Jak stworzyć plik HTML?
Czas na pierwsze zadania. Aby rozpocząć prace z kodem, najpierw musisz stworzyć plik HTML na swoim komputerze. W dowolnym miejscu np. na Pulpicie kliknij prawy przycisk myszy. Wybierz Nowy > Dokument tekstowy. Zapisz dokument jako „index.html”. Upewnij się, że nazwa pliku nie kończy się na .txt.
Gotowe! Właśnie utworzyłeś swój pierwszy plik HTML. Teraz możesz go otworzyć w przeglądarce, klikając prawy przycisk myszy > Otwórz za pomocą i wybierając przeglądarkę. Nie przestrasz się, że po otwarciu strona jest pusta – w końcu jeszcze nie zamieściłeś żadnego kodu w pliku.
Element HTML
Przed objaśnieniem struktury dokumentu HTML warto wiedzieć, jak zbudowany jest element HTML. Składa się on z trzech podstawowych części:
- tagu otwierającego (opening tag) – przedstawia nazwę danego znacznika. Mieści się pomiędzy dwoma ostrymi nawiasami np. <p>.
- zawartości (content) – jest to treść elementu, np. tekst (Przykładowy tekst).
- tagu zamykającego (closing tag) – oznacza zamknięcie danego elementu. W porównaniu do tagu otwierającego zawiera „/” np. </p>. Tag zamykający zamieszcza się na końcu elementu.
Przykład elementu HTML: <p>Przykładowy tekst</p>
Jeżeli chcesz dowiedzieć się więcej o budowie elementu HTML, przeczytaj nasz tekst dotyczący kodu HTML strony internetowej.
Struktura dokumentu HTML
Zanim zaczniesz tworzenie stron internetowych w HTML, przybliżymy Ci strukturę dokumentu HTML na poniższym przykładzie.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>Pierwszym elementem dokumentu jest tzw. deklaracja standardu. Zamieszcza się ją w pierwszej linijce kodu, aby ułatwić przeglądarkom rozpoznanie rodzaju pliku. W przypadku dokumentu HTML jest to <!DOCTYPE html>.
Tuż po deklaracji standardu widoczny jest znacznik <html> a na samym końcu dokumentu </html>. Jest to tzw. deklaracja języka. Oznacza to, że pomiędzy <html> a </html> wykorzystywany jest język HTML.
Sam szkielet strony HTML składa się z dwóch, kluczowych części – są to head i body.
<head> to inaczej nagłówek strony zawierający się pomiędzy znacznikami <head> i </head>. Występuje po deklaracji języka. Umieszczane są w nim kluczowe dane dotyczące ustawień strony m.in. kodowania czy wytycznych dla wyszukiwarek internetowych. Sekcja <head> nie jest widoczna dla użytkowników strony.
Sekcja <body> występuje zawsze po sekcji <head>. Zawiera się ona między znacznikami <body> i </body>. To właśnie w <body> zamieszczana jest cała treść strony, którą widzą użytkownicy.
Podstawowe tagi w sekcji Head
Przyjrzyjmy się bliżej temu, jakie elementy powinieneś obowiązkowo zamieścić w sekcji <head> podczas tworzenia strony HTML.
Meta Tagi
Pierwszym elementem, który musi znaleźć się w sekcji <head> jest deklaracja zestawu znaków. Umieszczenie meta tagu charset umożliwi obsługę wszystkich znaków uwzględnionych w danym języku. W przypadku polskiego są to np. ą, ę, ś, ć, ż. Podczas pisania strony HTML, będziesz korzystał z najpopularniejszego systemu kodowania UTF-8 i to właśnie jego należy umieścić w meta tagu charset. Wygląda to następująco:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>Kolejnym tagiem w sekcji <head>, o którym nie możesz zapomnieć, jest viewport. Umieszczenie tagu viewport ma bardzo duży wpływ na responsywność Twojej strony. Ustawienie wartości device-width dla dyrektywy width oznacza, że szerokość wyświetlanego obszaru ma być równa szerokości urządzenia, na którym strona jest wyświetlana. Dzięki temu strona HTML będzie poprawnie wyświetlać się zarówno użytkownikom na urządzeniach desktopowych, jak i mobilnych. W znaczniku viewport określa się również skalowanie strony (możliwość jej przybliżenia i oddalenia). W tagu viewport zamieszcza się wartość initial-scale=1, co oznacza, że domyślnie strona będzie wyświetlana bez skalowania.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
</body>
</html>Title Tag
Nawet prosta strona internetowa musi mieć określony tag tytułowy. Jak sama nazwa wskazuje, informuje on o tematyce danej strony. Jeżeli Twoja podstawowa strona HTML będzie mieć więcej niż jedną podstronę, każda z nich powinna posiadać unikalny tag tytułowy. W kodzie HTML zamieszczenie znacznika <title> wygląda następująco:
<title>Tytuł mojej pierwszej strony internetowej</title>Tak właśnie powinna wyglądać sekcja <head> Twojej prostej strony internetowej w HTML na samym początku.
Podstawowe tagi w sekcji Body
Wiesz już, jakie elementy musisz obowiązkowo zawrzeć w sekcji <head>. Czas więc przejść do sekcji <body>. Jak już wspomnieliśmy, to w niej umieszczana jest cała zawartość strony wyświetlana użytkownikom. Dzięki odpowiednim znacznikom możesz określać, w jaki sposób dana treść będzie prezentowana userom. Warto tu nadmienić, że nie wszystkie pokazane niżej znaczniki są powszechnie używane, ponieważ często można je zastąpić kodem CSS. Jednakże w tym artykule chcemy Ci pokazać, jak możesz nadać odpowiedni wygląd treści wyłącznie przy użyciu HTML.
Nagłówki
Każda, nawet bardzo prosta strona internetowa w HTML, powinna mieć jasno określoną strukturę treści. Możesz to osiągnąć poprzez zastosowanie nagłówków HTML hx. Działanie i hierarchię nagłówków najłatwiej wyjaśnić, porównując zawartość strony do artykułu. Każdy artykuł powinien posiadać tytuł oraz nagłówki, a pod nimi powinny znajdować się akapity tekstu.
Nie inaczej jest w przypadku strony internetowej. Nagłówki określa się, stosując elementy od <h1> do <h6>, gdzie <h1> oznacza nagłówek najwyższego stopnia, a <h6> najniższego. Litera „h” oznacza „heading”, czyli po angielsku nagłówek, a liczba od 1-6 – priorytet nagłówka.
Elementem <h1> określisz główny tytuł podstrony. Pamiętaj, że stosuje się go tylko raz na każdej podstronie. Podtytuły oznacz nagłówkami od <h2> do <h6> zgodnie z hierarchią. W praktyce najczęściej stosuje się nagłówki od <h1> do <h3>, nagłówki niższego rzędu wykorzystuje się jedynie przy bardzo rozbudowanych stronach internetowych. Dlatego na naszym przykładzie zastosujemy tylko nagłówki od <h1> do <h3>.
<h1>Moja pierwsza strona internetowa</h1>
<h2>Nagłówek 2</h2>
<h3>Nagłówek 3</h3>Tak po wprowadzeniu nagłówków wygląda przykładowa strona HTML:
Paragrafy
Poza nagłówkami, strona internetowa HTML zawiera również akapity oznaczone elementem <p>. „P” oznacza paragraph, czyli paragraf/akapit. Jego działanie można porównać do akapitów stosowanych w edytorach tekstowych jak Word czy LibreOffice Writer. Pozwalają one dzielić tekst w mniejsze bloki. Oto przykład zastosowania paragrafu. Umieść go po nagłówku <h2>.
<h1>Moja pierwsza strona internetowa</h1>
<h2>Nagłówek 2</h2>
<h3>Nagłówek 3</h3>
<h2>Przykładowy nagłówek</h2>
<p>Przykładowy tekst, który zamieszczamy w akapicie.</p>Po otwarciu pliku w przeglądarce strona wygląda następująco:
Line Break
Jeżeli chcesz przenieść tekst do nowej linii, użycie „enter” nie wystarczy. Dzieje się tak, gdyż przeglądarki pomijają w interpretacji białe znaki (tj. spację, enter, tabulator itd.). Jak więc zacząć pisanie kodu HTML od nowej linii? Użyj elementu <br>. Pamiętaj, że <br> jest znacznikiem samozamykającym, czyli nie wymaga umieszczenia tagu zamykającego </br>. Mówiąc prościej – stosujesz sam znacznik <br>.
<h2>Line Break</h2>
Przykładowy tekst przed zastosowaniem nowej linii HTML.<br>
Nowa linia tekstu po zastsowaniu znacznika line break.Formatowanie tekstu
Tworzenie stron internetowych obejmuje również stylowanie elementów. Jest ono istotne m.in., gdy chcesz wyróżnić dany tekst np. poprzez podkreślenie, pogrubienie czy podświetlenie. Poniżej zamieszczamy listę najczęściej stosowanych elementów HTML do stylowania:
- <b> i <strong> – służą do pogrubiania tekstu. Zalecamy stosowanie znacznika <strong> (ang. strong – mocny), gdyż nadaje on szczególne znaczenie treści, która została nim oznaczona w porównaniu do innych treści zamieszczonych na stronie. Znacznik <b> (ang. bold – pogrubienie) nie powoduje nadania specjalnego znaczenia pogrubionej treści.
- <i> i <em> – elementy przeznaczone do pochylania tekstu. Obowiązuje tu ta sama zasada, co w przypadku elementów pogrubiających. Stosuj <em> (ang. emphasize – podkreślenie), aby nadać specjalne znaczenie treści zawartej w tym elemencie.
- <s> i <del> – powodują przekreślenie tekstu. Elementu <s> (ang. strikethrough – linia przez) używaj, gdy coś przestało być aktualne, ale nie powinno być usunięte ze strony. Natomiast element <del> (ang. delete – usunąć) stosuj, gdy chcesz zakomunikować, że coś zostało usunięte ze strony.
- <ins> – informuje o dodaniu tekstu na stronę (ang. insert – wstawić).
- <mark> – wstawienie <mark> (ang. mark – oznaczenie) powoduje podświetlenie danego elementu poprzez dodanie tła.
- <small> – element służący do pomniejszania treści.
- <sup> i <sub> – stosuje się w celu oznaczenia indeksu górnego <sup> (ang. superscript – indeks górny) oraz dolnego <sub> (ang. subscript – indeks dolny).
Gotowy kod HTML po zastosowaniu powyższych elementów wygląda następująco:
<h2>Style Tags</h2>
<strong>Pogrubienie tekstu</strong><br>
<em>Pochylenie tekstu</em><br>
<s>Przekreślenie nieaktualnego tekstu</s><br>
<del>Przekreślenie usuniętego tekstu</del><br>
<ins>Wstawienie tekstu</ins><br>
<mark>Podświetlenie tekstu</mark><br>
<small>Pomniejszenie tekstu</small><br>
<sup>Indeks górny</sup><br>
<sub>Indeks dolny</sub>Zobacz, jak wygląda strona po zastosowaniu elementów formatowania kodu HTML:
Anchor Link
Anchor link umożliwia wstawianie linków do strony napisanej w HTML. Służy do tego element <a> (ang. anchor – kotwica). Link składa się z kilku części:
- atrybutu – atrybut, czyli dodatkowa informacja dla przeglądarek o danym elemencie, umieszczany jest w tagu otwierającym. W przypadku linków jest to „href” (ang. hypertext reference – odniesienie w hipertekście). Dzięki niemu przeglądarki dostają informację o stronie, na którą przekierowuje link.
- adresu URL – czyli adresu, na który chcesz przenieść użytkownika po kliknięciu linku.
- tekstu linka – tekstu, który zostanie wyświetlony użytkownikowi. Po jego kliknięciu zostanie on przeniesiony pod dany adres URL.
<h2>Anchor link</h2>
<a href="https://responsywnie.pl/">Strona główna responsywnie.pl</a>Images
Aby dodać obraz na stronę internetową w HTML, powinieneś skorzystać z elementu <img>. Podobnie jak <br> jest to znacznik samozamykający. Samo zastosowanie znacznika nie jest wystarczające do umieszczenia obrazu na stronie. Musisz dodać jeszcze atrybut „src” (ang. source – źródło), który wskaże źródło grafiki.
Dla przykładu, dodaj teraz flagę Polski na stworzoną stronę. Pobierz grafikę i zapisz ją w tym samym folderze, co plik ze stroną. My nazwaliśmy nasz plik „flaga-polski.png”. Następnie do kodu strony dodaj element <img> a do atrybutu src dodaj nazwę pliku wraz z rozszerzeniem. Wygląda to następująco:
<h2>Images</h2>
<img src="flaga-polski.png">Gdy otworzysz stronę w przeglądarce, wyświetli Ci się dodany plik graficzny:
Listy
Z pomocą HTML możesz również tworzyć listy. Wyróżniamy ich trzy podstawowe rodzaje: uporządkowane, nieuporządkowane i definicyjne.
Listy uporządkowane – posiadają numerację, przez co nazywane są też listami numerycznymi. Umieszcza się je za pomocą znacznika <ol> (ang. ordered list). Natomiast każdy element listy należy umieścić w znacznikach <li> (ang. list item – element listy).
<h2>Lista uporządkowana</h2>
<ol>
<li>Pierwszy element listy</li>
<li>Drugi element listy</li>
<li>Trzeci element listy</li>
</ol>Listy nieuporządkowane – nie maja numeracji, poszczególne elementy listy zaczynają się np. od myślników lub kropek. Stąd też nazwa znacznika (ang. unordered list). Podobnie jak w przypadku list uporządkowanych, wszystkie elementy listy należy oznaczyć za pomocą <li>.
<h2>Lista nieuporządkowana</h2>
<ul>
<li>Pierwszy element listy</li>
<li>Drugi element listy</li>
<li>Trzeci element listy</li>
</ul>Lista definicyjna – oznaczona <dl> (ang. definition list). Składa się z pojęcia/terminu i definicji. Za odpowiednie przypisanie terminu i definicji odpowiadają znaczniki <dt> (ang. definition term) i <dd> (ang. definition description). W każdej liście definicyjnej najpierw występuje termin, a następnie jego definicja.
<h2>Lista definicyjna</h2>
<dl>
<dt>Termin nr 1</dt>
<dd>Defnicja terminu</dd>
<dt>Termin nr 2 </dt>
<dd>Definicja terminu</dd>
</dl>Tak wyglądają listy na stworzonej stronie:
Tabele
Używając HTML, możesz również tworzyć tabele na swojej stronie internetowej. Aby ją zbudować, musisz wykorzystać element <table>. Poszczególne wiersze tabeli dodaje się poprzez użycie znacznika <tr> (ang. table row). Następnie w wierszach konieczne jest utworzenie komórek. W tym celu skorzystaj ze znacznika <td> (ang. table data/ table cell). Poprzez dodawanie kolejnych komórek w danym wierszu, automatycznie tworzysz kolumny. Na przykład, gdy w wierszu nr 1 dodasz 2 komórki, oznacza to utworzenie dwóch kolumn.
W tabelach możesz stosować również nagłówki. Służy do tego znacznik <th> (ang. table heading). Nagłówki traktowane są tak jak komórki tabeli, stąd możesz je dodawać zarówno w komórkach, jak i w wierszach.
<h2>Tabela nr 1</h2>
<table>
<tr>
<th>Nagłówek 1</th>
<th>Nagłówek 2</th>
<th>Nagłówek 3</th>
<th>Nagłówek 4</th>
<th>Nagłówek 5</th>
<th>Nagłówek 6</th>
</tr>
<tr>
<td>Dane 1</td>
<td>Dane 2</td>
<td>Dane 3</td>
<td>Dane 4</td>
<td>Dane 5</td>
<td>Dane 6</td>
</tr>
</table>Po zapisaniu zmian na stronie tabela wygląda następująco:
Przy tworzeniu tabel w HTML bardzo ważne jest też określenie zakresu danych. W tym celu stosuje się atrybut scope. Dla kolumn atrybut scope ma wartość col, natomiast dla wierszy – row. Dzięki ich zastosowaniu możesz z łatwością oznaczyć kolumny i wiersze, przez co tabela stanie się bardziej czytelna.
Przy tworzeniu rozbudowanych tabel przydatny może okazać się również podział tabeli na trzy sekcje:
- sekcja nagłówka <thead> – z jej pomocą możesz oznaczyć np. nazwy kolumn z wykorzystaniem elementu <th>.
- sekcja główna <tbody> – korzystając z tego elementu, oznacz główną zawartość tabeli.
- sekcja podsumowująca / stopka <tfoot> – służy do oznaczania danych podsumowujących w tabeli.
Oto przykład tak skonstruowanej tabeli:
<h2>Tabela nr 2</h2>
<table>
<thead>
<tr>
<th scope="col">Rok</th>
<th scope="col">Sprzedaż</th>
<th scope="col">Zysk</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">2020</th>
<td>100000</td>
<td>20000</td>
</tr>
<tr>
<th scope="row">2021</th>
<td>150000</td>
<td>40000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Suma</th>
<td>250000</td>
<td>60000</td>
</tr>
</tfoot>
</table>Po zapisaniu zmian tabela wygląda w ten sposób:
Aby nadać tabeli bardziej przyjazne formatowanie, konieczne jest wykorzystanie CSS.
Strona w HTML krok po kroku – podsumowanie
Mamy nadzieję, że dzięki temu poradnikowi będziesz w stanie samodzielnie napisać stronę internetową w HTML, która będzie zawierała wszystkie najistotniejsze elementy. Pamiętaj, że HTML to dopiero początek przygody z profesjonalnym tworzeniem stron internetowych, jednakże bez tej wiedzy trudno będzie Ci pójść dalej w świat programowania. Życzymy powodzenia przy tworzeniu pierwszej strony www!
