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...

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).

Zobacz więcej...

Facebook