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

#2 Nagłówek i treść HTML

Twórz profesjonalne strony WWW! Kompleksowy przewodnik po strukturze HTML, znaczeniu metatagów, SEO i RWD. Opanuj robots, canonical, viewport i obowiązkowe UTF-8, aby osiągnąć optymalne wyniki w Google.

Zobacz więcej...

Informacje nagłówkowe (metadane)

W kontekście tworzenia stron WWW, niezwykle istotne jest zrozumienie struktury dokumentu HTML, w tym różnicy między nagłówkiem (<head>) a ciałem (<body>). Nagłówek zawiera metainformacje, które nie wpływają bezpośrednio na wygląd dokumentu, ale są równie ważne.

Metainformacje i ich znaczenie

Metainformacje, definiowane za pomocą znacznika <meta>, pozwalają określić ogólne wiadomości dotyczące dokumentu, takie jak sposób kodowania znaków, opis zawartości czy język. Zastosowanie metainformacji może pomóc w odszukaniu strony przez wyszukiwarki sieciowe.

  • Deklaracja strony kodowej: zawsze należy stosować <meta charset="utf-8">, zwłaszcza pisząc po polsku, aby uniknąć błędnego wyświetlania polskich liter.
  • Opis zawartości: <meta name="description"> zachęca internautów do odwiedzenia strony, wyświetlając opis w wyszukiwarkach (np. Google).
  • Język strony: atrybut lang w znaczniku <html> (np. lang="pl" dla języka polskiego) jest nieobowiązkowy, ale ułatwia pracę automatycznym tłumaczom.
  • Roboty: znacznik <meta name="robots"> steruje zachowaniem robotów-indekserów, określając, czy strona ma być indeksowana ("index") czy nie ("noindex") oraz czy roboty mają podążać za odsyłaczami ("follow" lub "nofollow").

Dodatkowe funkcje i linki

W nagłówku dokumentu można także umieścić inne elementy <link> lub <meta>, które dodają specjalne funkcje lub wskazują na powiązane dokumenty.

  1. Strona Kanoniczna: w celu usunięcia zduplikowanych stron z wyników wyszukiwania (powielona treść pod różnymi URL), stosuje się znacznik <link rel="canonical">. Wyszukiwarka zazwyczaj wyświetli tylko wskazaną wersję kanoniczną.
  2. Wersje językowe: do wskazania alternatywnych wersji językowych używa się <link rel="alternate" hreflang>. Jest to wykorzystywane przez Google do dopasowania wersji strony do ustawień przeglądarki użytkownika.
  3. Automatyczne odświeżanie/przekierowanie: możliwe jest automatyczne odświeżanie strony co określony czas (np. 60 sekund) za pomocą <meta http-equiv="refresh"> lub przekierowanie użytkownika na inny adres, np. natychmiastowo, za pomocą content="0; url=...".

Pamiętajmy, że polecenie BODY powinno wchodzić w skład każdego dokumentu HTML i zawierać wszystkie widoczne elementy. Wszystkie znaczniki <meta> i <title> muszą znajdować się wewnątrz nagłówka strony (<head>...</head>).

Zobacz więcej...

#3 Tekst HTML

Wprowadzenie do tekstu HTML. Poznaj znaczniki blokowe (p, div, h1) i liniowe (b, i). Odkryj, dlaczego kod poprawny semantycznie (używający strong, em, abbr) jest niezbędny dla robotów wyszukiwarek, SEO i syntezatorów mowy.

Zobacz więcej...

Modele wyświetlania znaczników HTML

Język HTML przewiduje dwa podstawowe modele wyświetlania treści znaczników:

  • W bloku: Automatycznie dodawane są znaki końca linii przed i po elemencie. Elementy blokowe, takie jak nagłówki (od <h1> do <h6>) oraz akapity (<p>), służą do tworzenia obszerniejszych struktur. Pamiętajmy, że <p> jest elementem blokowym, który nie może zawierać innych bloków. Do grupowania elementów służy również blok <div>.
  • W linii: Elementy są wyświetlane normalnie, obok siebie, bez dodatkowych interlinii. Przykładem są: pogrubienie (<b>), kursywa (<i>) oraz podkreślenie (<u>).

Kluczowa rola semantyki

W HTML rozróżniamy znaczniki formatujące i znaczniki semantyczne. Znaczniki formatujące (np. <b>) mają za zadanie tylko i wyłącznie zmienić wygląd tekstu.

Znaczniki semantyczne, takie jak <strong> (wysoka ważność lub pilność) i <em> (emfaza, czyli szczególny nacisk), określają charakter (znaczenie) tekstu. To właśnie ta informacja, a nie sposób formatowania, jest najważniejsza.

Dlaczego kod musi być poprawny semantycznie?

Kod jest semantyczny, gdy używamy elementów, które nadają swojej zawartości określone znaczenie. Zrozumienie istoty poprawności semantycznej kodu HTML jest niezwykle ważne. Ma to niebagatelne znaczenie dla kluczowych aplikacji:

Roboty wyszukiwarek sieciowych (SEO)
Prawidłowe oznaczanie tekstu ma niebagatelne znaczenie dla robotów wyszukiwarek, które są "niewidome". Docenią one, jeśli użyjemy nagłówków <h1> do <h6> zgodnie z ich przeznaczeniem, a nie tylko dla zmiany rozmiaru czcionki.
Syntezatory mowy (dostępność)
Znaczniki semantyczne mają ogromne znaczenie dla syntezatorów mowy używanych przez osoby niewidome. Na przykład, kiedy syntezator natrafi na <strong>, może specjalnie podkreślić tonem głosu zawarty w nim tekst. Inne istotne znaczniki to <abbr> (skrót/akronim) i <var> (zmienna).

W przypadku dłuższych cytatów, które mają własne akapity, należy użyć bloku cytowanego <blockquote>. Krótkie cytaty wewnątrz akapitu oznaczamy za pomocą <q>.

Zobacz więcej...

#4 Odsyłacze HTML

Odsyłacze HTML (linki, hiperłącza): naucz się tworzyć przejścia do innych stron WWW, etykiety (kotwice), linki pocztowe (mailto), odsyłacze obrazkowe oraz mapy odsyłaczy. Kontroluj SEO, blokując indeksowanie za pomocą rel="nofollow", "ugc" i "sponsored".

Zobacz więcej...

Odsyłacze HTML (hiperłącza)

Odsyłacze (hiperłącza, odnośniki hipertekstowe, linki) stanowią istotę Internetu, powiązując dokumenty ze sobą. Są wykorzystywane głównie do tworzenia spisu treści w serwisie oraz do linkowania do innych ciekawych miejsc w Internecie. Linki te mogą prowadzić do stron w tym samym serwisie lub na drugim końcu świata.

Podstawowe odsyłacze nawigacyjne (wewnętrzne i zewnętrzne)

Obejmuje to linki w obrębie tego samego serwisu oraz standardowe odsyłacze do innych stron w Internecie. Odsyłacze do podstron są pomocne przy tworzeniu spisu treści serwisu.

  • Odsyłacz do podstrony: przenosi użytkownika do innej podstrony w ramach tego samego serwisu, gdzie każda podstrona jest osobnym plikiem HTML: <a href="...">.
  • Odsyłacz do adresu internetowego (WWW): wstawia linki do dowolnych stron w obrębie całego Internetu: <a href="https://...">.
  • Odsyłacz do etykiety (kotwice/zakładki): służy do tworzenia elektronicznej zakładki na stronie: <a href="#...">. Pozwala na bezpośrednie przeniesienie użytkownika do konkretnego, zaznaczonego miejsca w dokumencie, co ułatwia nawigację.

Odsyłacze funkcjonalne i protokolarne

Ta grupa obejmuje linki, które inicjują specyficzne działania klienta (np. wysyłanie poczty, połączenia, transfer plików) przy użyciu różnych protokołów.

  • Odsyłacz pocztowy (e-mail): umożliwia użytkownikom wysłanie listu poprzez otwarcie domyślnego programu pocztowego: <a "mailto:...">.
  • Odsyłacz FTP: pozwala na bezpośredni odsyłacz do pliku na serwerze FTP (ang, File Transfer Protocol): <a href="ftp://...">.
  • Inne protokoły: obejmujące usługi takie jak połączenia zdalne (ssh) czy skrypty (javascript).

Odsyłacze graficzne

Odsyłacze wykorzystujące obrazy jako elementy aktywne, w tym złożone struktury z wieloma klikalnymi obszarami.

  • Odsyłacz obrazkowy (graficzny przycisk): zamiast tekstu, wewnątrz znacznika odsyłacza (<a href>) umieszcza się znacznik obrazka (<a href="..."><img></a>).
  • Mapa odsyłaczy (image map): umożliwia dodanie kilku odnośników na jednym obrazku poprzez podział go na klikalne obszary: <map><area></map>.
  • Serwerowa mapa odsyłaczy: używana w przypadku bardzo skomplikowanych obszarów: <img ismap>.

Kontrola indeksowania (SEO)

Atrybuty używane w celu zablokowania lub sklasyfikowania wybranych odnośników przez wyszukiwarki sieciowe, takie jak Google.

  • Blokada indeksowania (rel="nofollow"): powoduje, że roboty wyszukiwarek nie podążają za tym linkiem, co jest często stosowane np. w systemach komentarzy, aby zniechęcić spamerów.
  • Treść tworzona przez użytkowników (rel="ugc"): wskazuje, że link został umieszczony przez użytkownika serwisu (ang. user generated content), co pomaga chronić reputację strony.
  • Linki sponsorowane (rel="sponsored"): konieczne do oznaczania płatnych linków reklamowych, zgodnie z wytycznymi Google, w celu uniknięcia kar.

Zobacz więcej...

Facebook