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

Spis treści

1. Twoja pierwsza strona internetowa

2. Pierwsza strona www

3. Formatowanie tekstu

4. Atrybuty znaczników listy

5. Czcionka

6. Odnośniki

7. Grafika na stronie

8. Tabele

9. Formularz

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.