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 <br>. Element ten nie posiada znacznika zamykającego.
Element <br> nie powinien być używany do zaznaczania odstępów pomiędzy akapitami.
Akapity tworzymy posługując się znacznikiem <p>.
<!DOCTYPE html>
<html>
<head>
<meta charset=„UTF-8”>
<title> Pierwsza strona WWW </title>
</head>
<body>
To jest pierwsza <br> strona internetowa
<p> To jest pierwszy akapit </p>
<p> A to jest drugi akapit </p>
Kup książkę, aby przeczytać do końca.