Miłosz Czupryński

Twoja pierwsza strona internetowa

© Miłosz Czupryński, 2022

Poradnik zawierający podstawowe informacje o tworzeniu stron internetowych w html. Dzięki niemu nauczysz się tworzyć stronę od zera!

ISBN 978-83-8273-750-9

Książka powstała w inteligentnym systemie wydawniczym Ridero

Pierwsza strona www

HTMl

HTML (ang. HyperText Markup Language ): język znaczników hipertekstowych. Przy jego pomocy pisze się strony internetowe, czyli dokumenty, które następnie można przeglądać i czytać za pomocą przeglądarki internetowej.

Język HTML składa się ze znaczników (tagów). Każdy znacznik języka ma specyficzne i określone znaczenie. Przeglądarka internetowa po napotkaniu takiego obiektu odpowiednio go interpretuje.

Dzięki znacznikom można określać sposób wyświetlania obiektów na stronie.

Znaczniki

<html> — znacznik dokumentu HTML

<head> - znacznik nagłówka dokumentu

<body> - znacznik ciała dokumentu

<b> - znacznik pogrubienia tekstu

<p> - znacznik nowego akapitu

<a> - znacznik hiperłącza

<br> - znacznik przejścia do nowej linii

Znaczniki można podzielić na znaczniki otwarcia i zamknięcia. Pomiędzy znacznikami otwarcia oraz zamknięcia znajduje się formatowana zawartość. </html>, </head>, </body>, itp

Struktura dokumentu HTML

Każda strona napisana w języku HTML posiada pewien szablon. Jego najprostsza forma to:

<!DOCTYPE html>

<html>

<head>

<meta charset=„UTF-8”>

…nagłówek…

</head>

<body>

…ciało…

</body>

</html>

Deklaracja dokumentu <!DOCTYPE html>

Informuje przeglądarkę, że strona jest zapisana zgodnie ze standardem HTML. Jeśli pominiemy ten znacznik, niektóre przeglądarki mogą niepoprawnie wyświetlać stronę.

Deklaracji języka html jest pierwszą linijką kodu strony internetowej i umieszczamy ją przed sekcją <html>. Całość tekstu musi się znajdować pomiędzy znacznikami <html> i </html>.

Znacznik <head> opisuje ustawienia dokumentu html. W części nagłówkowej umieszcza się informacje, które nie są wyświetlane w treści strony. Znajdują się tam takie dane jak: tytuł witryny, autor, krótki opis wyświetlany przez wyszukiwarki, słowa kluczowe, itp.

Znacznik <meta> służy do tworzenia meta elementów. Są to dane informujące przeglądarkę o ustawieniach strony. W nagłówku umieszczono znacznik ustawiający stronę kodową strony na UTF-8, zapewnia to prawidłowe wyświetlanie polskich znaków. Zestaw znaków utf-8 jest obecnie najczęściej stosowanym standardem.

Deklarację języka stosowanego na stronie internetowej dokonujemy za pomocą atrybutu lang elementu <html>.

<html lang=„pl-PL”>

Element <title> jest to tytuł strony internetowej <title>…</title>. Nie jest on wyświetlany w treści strony, dlatego znajduje się w sekcji <head>.

Można go znaleźć w wynikach wyszukiwania oraz na nazwie karty w przeglądarce.

Kolejnym istotnym dla wyszukiwania naszej strony elementem meta jest description. Opis ma zachęcić do kliknięcia w link i odwiedzenia naszej strony. W celu dodania treści do elementu desription należy skorzystać z atrybutu content.

<meta name=„description” content=„…”>

W części głównej pomiędzy znacznikami <body> i </body> umieszcza się treść właściwą dokumentu, a więc tę która wyświetlana jest przez przeglądarkę.

Pierwsza strona WWW

<!DOCTYPE html>

<html>

<head>

<meta charset=„UTF-8”>

<title> Pierwsza strona WWW </title>

</head>

<body>

To jest pierwsza strona internetowa

</body>

</html>

Pliki ze stronami internetowymi zapisujemy z rozszerzeniem html. Plik główny nazywamy index.html.

Wszystkie strony jakie utworzymy zapisujemy na dysku, a później wysyłamy je na zdalny serwer.

Nagłówki HTML

Tworząc stronę internetową, dłuższy tekst zazwyczaj poprzedzamy ciekawym nagłówkiem, który przyciąga wzrok czytelnika.

Nagłówki tworzymy używając elementów od <h1> do <h6>. Litera h jest skrótem od ang. słowa heading. Cyfry od 1 do 6 oznaczają hierarchię nagłówków, zaczynając od 1 jako najważniejszego w hierarchii.

Artykuł zazwyczaj składa się z tytułu głównego i kilku podtytułów. Elementem <h1> opatrzymy główny tytuł, elementy <h2> podtytuły drugiego stopnia, a elementy <h3> jako tytuły trzeciego stopnia.

Domyślnie nasze nagłówki będą różniły się rozmiarem czcionki

<!DOCTYPE html>

<html>

<head>

<meta charset=„UTF-8”>

<title>Nagłówki</title>

</head>

<body>

<h1> Nagłówek stopnia 1</h1>

<h2> Nagłówek stopnia 2</h2>

<h3> Nagłówek stopnia 3</h3>

<h4> Nagłówek stopnia 4</h4>

<h5> Nagłówek stopnia 5</h5>

<h6> Nagłówek stopnia 6</h6>

</body>

</html>

Formatowanie tekstu

Nowa linia i Akapity

Przeglądarka interpretując kod html pomija znaki takie jak enter, tabulator i więcej niż jedną spację czyli tzw. białe znaki.

Aby przenieść tekst do nowej linii musimy użyć znacznika
. Element ten nie posiada znacznika zamykającego.

Element

Koniec darmowego fragmentu książki.

Zachęcamy do zakupu pełnej wersji.