Podstawy HTML

HTML (ang. HyperText Markup Language, hipertekstowy język znaczników) to podstawowy język projektowania stron internetowych. Nie jest to język programowania. Obowiązującym obecnie standardem HTML jest HTML5.

Znacznik (tag) jest to specjalny tekst umieszczony w nawiasach ostrych - np.: <b>. Jest on częścią składni języka HTML i pozwala sterować wyglądem strony. Dzięki niemu możesz np. ustalić kolor tła, rodzaj formatowania tekstu, wstawić obrazek czy tabelę itd. Znacznik nie jest widoczny na ekranie. Widoczne są tylko efekty jego działania (np. wstawienie obrazka).

Poniższe znaczniki są podstawowe dla dokumentów HTML i powinny występować na każdej poprawnej, zgodnej z HTML5 stronie internetowej.

Szkielet (osnowa) dokumentu HTML
<html> <head> </head> <body> </body> </html>

 

Wyjaśnienie znaczenia powyższych znaczników:

  • <html></html> ten znacznik określa ramy dokumentu HTML, a więc jego początek i koniec;
  • sekcja <head></head> tworzy tak zwany nagłówek dokumentu. W tym przykładzie jest on pusty ale powinien obowiązkowo zawierać kilka informacji. W wersji minimum są to: strona kodowa, tytuł, oraz słowa kluczowe i opis strony;
  • sekcja <body></body> to tak zwane ciało dokumentu, tutaj umieszczamy treść. O ile sekcja head pełni rolę czysto informacyjną i jej zwartość (poza tytułem, który przeglądarka wyświetla na pasku tytułu) można obejrzeć tylko w źródle strony, o tyle zawartość body jest w całości wyświetlane w oknie przeglądarki.

Przedstawione niżej znaczniki HTML występują na wielu stronach internetowych ale nie wszystkie są zalecane przez najnowszą specyfikację HTML5. Warto je jednak poznać.

<title> </title> Ten znacznik wykorzystuje się do wpisania tytułu strony wyświetlanej na pasku tytułowym przeglądarki

<br> - zejście do nowej linii
<b> </b> - pogrubienie
<i> </i> - pochylenie, kursywa, italik
<u> </u> - podkreślenie
<hr> - linia pozioma
<img src="/nazwapliku.jpg"> - UWAGA! przed nazwą pliku nie ma tego ukośnika, wstawianie obrazka, którego plik źródłowy znajduje się w tym samym folderze (katalogu) co plik html strony, zwróć uwagę na wielkość liter w nazwie, brak polskich znaków, spacji, a szczególnie na rozszerzenie nazwy pliku graficznego (najczęściej jpg lub png lub gif)
<a href="https://www.wp.pl">WP</a> - wstawienie linku do strony wp.pl znajdującej się w internecie, zwróć uwagę na literki https (nie wszystkie strony mają protokół https, mogą mieć http); link do strony lokalnej nie musi mieć "https://www" wystarczy sama nazwa pliku i jego rozszerzenie, najczęściej html

<body bgcolor="green"> - ustalenie koloru tła strony na zielony

<font size="7">napis</font> ustalenie wielkości fontów na maksymalną 

<font color="red"> - ustalenie koloru czcionki na czerwony
<font face="arial"> - ustalenie kroju czcionki na Arial

<img src="/nazwapliku.jpg" width="300"> - ustalenie wielkości obrazka na 300 pikseli

UWAGA! przed nazwą pliku nie ma tego ukośnika

<p> </p> - paragraf, akapit

<p align="center">treść akapitu</p> - wyśrodkowanie akapitu

<p align="right">treść akapitu</p> - akapit do prawej

<p align="left">treść akapitu</p> - akapit do lewej

<p align="justify">treść akapitu</p> - akapit wyjustowany

Pierwsza strona serwisu www zawsze musi nazywać się index.html bo inaczej przeglądarka nie znajdzie strony, mimo poprawnego adresu.

lista uporządkowana

<ol> </ol> - znacznik otwierający i zamykający listy uporządkowanej, domyślna lista jest numerowana cyframi arabskimi

<li></li> - każda kolejna pozycja listy zaczyna się i kończy takim znacznikiem

<ol type="a"> - taki znacznik otwierający dla listy uporządkowanej uruchamia numerowanie małymi literami alfabetu łacińskiego

<ol type="A"> - j.w. ale wielkie litery

<ol type="I"> - j.w. ale cyfry rzymskie

lista nieuporządkowana

<ul> </ul> - znacznik otwierający i zamykający listy nieuporządkowanej, domyślna lista posiada punktor - czarna kropka

<li></li> - każda kolejna pozycja listy zaczyna się i kończy takim znacznikiem

<ul type="circle"> - taki znacznik otwierający listy nieuporządkowanej spowoduje wyświetlenie punktora - biała kropka

<ul type="square"> - taki znacznik otwierający listy nieuporządkowanej spowoduje wyświetlenie punktora - czarny kwadrat

<ul type="disc"> - taki znacznik otwierający listy nieuporządkowanej spowoduje wyświetlenie punktora - czarna kropka (domyślny)

ideone

repl

jsfiddle

cpp

html how 2

HTML

 

w3s

colorpicker

Walidator HTML oraz CSS

DMC Firewall is developed by Dean Marshall Consultancy Ltd