Przejdź do treści

#1 HTML dla zielonych

Napisz własną stronę WWW nawet w 1 dzień! Opanuj podstawy tworzenia stron internetowych (znaczniki, akapity, linki, edytory np. Brackets). Zacznij tworzyć za darmo.

Zobacz więcej...

Wszystkie odcinki podcastu HTML:

Podstawy języka HTML

HTML to skrót od Hypertext Markup Language, czyli Hipertekstowy Język Oznaczania. Jest to język komputerowy służący do tworzenia stron internetowych. Dokument HTML jest po prostu plikiem tekstowym, w którym umieszczamy polecenia dotyczące formatowania i wstawiania grafiki.

Struktura dokumentu HTML

Dokument HTML składa się z sekcji nagłówkowej <head>...</head> oraz właściwego ciała dokumentu <body>...</body>. W nagłówku umieszczamy m.in. tytuł strony (<title>) i jej opis. Dla poprawnego wyświetlania polskich znaków diakrytycznych konieczne jest wstawienie deklaracji strony kodowej w sekcji nagłówkowej: <meta charset="utf-8">.

Do edycji stron w języku HTML zaleca się użycie specjalnego edytora (np. Brackets, Pajączek, Bluefish), a nie zwykłego edytora tekstu, ponieważ edytory HTML ułatwiają pracę i chronią przed błędami składniowymi dzięki funkcji kolorowania składni i automatycznemu zamykaniu znaczników.

Znaczniki i akapity

Zwykły tekst wpisuje się bezpośrednio w ciele dokumentu (wewnątrz <body>...</body>). Aby przenieść tekst do nowej linijki, należy użyć znacznika końca linii <br>, ponieważ klawisz Enter jest ignorowany przez przeglądarkę.

Akapit (paragraf) jest tworzony za pomocą znacznika <p>...</p>. Akapity są rozdzielone linijką przerwy i służą do estetycznego i logicznego podziału treści.

Wyrównanie tekstu (atrybuty)

Wyrównanie tekstu w akapicie można kontrolować za pomocą atrybutu style="text-align:...":

  • Wyśrodkowanie: <p style="text-align: center">Treść akapitu</p>
  • Justowanie (wyrównanie do obu marginesów): <p style="text-align: justify">Treść akapitu</p>
  • Wyrównanie do prawej: <p style="text-align: right">Treść akapitu</p>

Podstawowe formatowanie tekstu

Znaczniki pozwalają na zmianę wyglądu tekstu. Najczęściej używane znaczniki to:

Zmiana stylu czcionki (znacznik <span>)

Do zmiany stylu (rozmiar, kolor, rodzaj) fragmentu tekstu używa się znacznika <span> z atrybutem style. Wartości atrybutów dla tego samego znacznika można łączyć, rozdzielając je średnikami.

Przykład łączenia formatowania (pogrubienie, kursywa, podkreślenie, rozmiar i kolor):

<p style="text-align: center"><span style="font-size: large; color: red"><b><i><u> To jest jakiś tekst </u></i></b></span></p>

Pamiętaj, że znaczniki zamykamy zawsze w kolejności odwrotnej niż były otwierane.

Kolor tła i pozioma linia

Aby zmienić domyślny kolor tła i tekstu na całej stronie, należy zmodyfikować znacznik <body>, dodając atrybut style. Kolor tła i tekstu zawsze powinno się ustawiać jednocześnie, dbając o kontrast.

<body style="background-color: black; color: white"> Tu jest właściwa treść strony </body>

Poziomą linię, która może rozdzielać sekcje tematyczne, wstawia się za pomocą znacznika <hr>. Znacznik <hr>, podobnie jak <br> i <img>, nie posiada znacznika zamykającego.

Wstawienie obrazka

Aby wstawić obrazek, używa się znacznika <img>, który wymaga podania względnej ścieżki dostępu do pliku graficznego (atrybut src) oraz tekstu alternatywnego (atrybut alt). Należy zawsze używać względnych ścieżek, a nie bezwzględnych (np. nie "C:\www\..."), a w nazwach plików unikać wielkich liter i polskich znaków.

<img src="obrazek.jpg" alt="Tu wpisz krótki opis obrazka">

Aby ustawić obrazek na środku ekranu (wycentrować), należy umieścić go wewnątrz znacznika <div> z odpowiednim atrybutem:

<div style="text-align: center"><img src="obrazek.jpg" alt="Tu wpisz krótki opis obrazka"></div>

Tworzenie odsyłaczy (linków)

Odsyłacz (hiperłącze, link) jest tworzony za pomocą znacznika <a>.

Dobre praktyki

Aby stworzyć dobry serwis, należy dbać o poprawność ortograficzną stylistyczną, unikać jaskrawych kolorów tła, oraz ograniczać ilość grafiki, ponieważ wpływa ona na szybkość ładowania strony. Należy również pamiętać o zasadach poprawnego wpisywania znaków interpunkcyjnych (np. brak spacji przed kropką, przecinkiem, wykrzyknikiem lub pytajnikiem, ale spacja po nich).

Facebook