Agencja interaktywna | Strony WWW | Pozycjonowanie | Social Media

Projektujemy i budujemy strony internetowe, pozyskujemy klientów, zwiększamy sprzedaż i promujemy Twoją markę w sieci Internet.

2.1. Tworzenie podstawowej struktury dokumentu HTML

W ramach tego punktu nauczysz się tworzyć podstawową strukturę dokumentu HTML, która jest niezbędna do budowy każdej strony internetowej. Poniżej znajdują się szczegółowe informacje na temat poszczególnych elementów tej struktury:

Znacznik <html> jako podstawa dokumentu

Element <html> jest fundamentalnym elementem każdego dokumentu HTML. To od niego rozpoczyna się struktura strony internetowej. Znacznik ten otacza całą zawartość strony i informuje przeglądarkę, że dokument jest napisany w języku HTML. Wygląda to mniej więcej tak:

<!DOCTYPE html>
<html>
  <!-- Tutaj umieszczasz zawartość strony -->
</html>

Dodawanie znaczników <head> i <body>

Element <head> zawiera metadane dokumentu, takie jak tytuł strony, podłączone arkusze stylów (CSS), skrypty JavaScript oraz inne informacje, które nie są widoczne dla użytkownika. Element <body>, z kolei, zawiera główną zawartość strony, którą użytkownicy zobaczą i z której skorzystają.

<!DOCTYPE html>
<html>
<head>
  <!-- Tutaj umieszczasz metadane i linki do zewnętrznych plików -->
</head>
<body>
  <!-- Tutaj umieszczasz widoczną zawartość strony -->
</body>
</html>

Znaczenie znacznika <title> dla Tytułu Strony

Znacznik <title> umieszczony w sekcji <head> określa tytuł strony, który jest wyświetlany na karcie przeglądarki oraz w wynikach wyszukiwania. To ważny element SEO i pomaga użytkownikom zrozumieć treść strony. Poniższy przykład ilustruje to wyraźnie:

<!DOCTYPE html>
<html>
<head>
  <title>Tytuł Mojej Strony</title>
</head>
<body>
  <!-- Tutaj dodajesz zawartość strony -->
</body>
</html>

To tylko początek! Tworzenie podstawowej struktury dokumentu HTML jest kluczowym krokiem w tworzeniu stron internetowych. Dzięki temu umieszczasz metadane, treści i stylizację, co pozwoli Ci na dalsze rozwijanie skomplikowanych stron internetowych.

Dlaczego na początku dokumentu znajduje się <!DOCTYPE> ?

Umieszczanie atrybutu <!DOCTYPE> w dokumencie HTML jest ważnym krokiem, ponieważ informuje przeglądarkę internetową o tym, w jakiej wersji języka HTML została napisana strona oraz jakie reguły powinny być stosowane podczas jej renderowania. Atrybut ten jest rodzajem deklaracji wstępu i ma kilka kluczowych funkcji:

  1. Określenie wersji HTML: Atrybut <!DOCTYPE> informuje przeglądarkę o wersji HTML, którą powinna używać do interpretacji dokumentu. To jest istotne, ponieważ różne wersje HTML mogą mieć różne znaczniki i zasady składni, więc przeglądarka potrzebuje tej informacji, aby poprawnie interpretować stronę.
  2. Tryb renderingu: Dostarczenie atrybutu <!DOCTYPE> pomaga przeglądarce ustawić odpowiedni tryb renderowania, co wpływa na to, jak strona jest wyświetlana i zachowuje się w przeglądarce. Odpowiedni tryb renderingu jest kluczowy dla zachowania spójności i poprawności wyglądu strony.
  3. Zgodność ze standardami: Atrybut <!DOCTYPE> pomaga w utrzymaniu zgodności strony z aktualnymi standardami języka HTML. Dzięki temu można uniknąć błędów i nieoczekiwanych efektów w renderowaniu strony.

Atrybut lang – Właściwe oznaczanie języka strony

Ogólnie rzecz biorąc, umieszczanie atrybutu <!DOCTYPE> jest dobrym nawykiem, który pomaga zapewnić, że strona będzie poprawnie interpretowana przez przeglądarki internetowe, co z kolei wpływa na jej wygląd i zachowanie dla użytkowników.

Wprowadzenie do atrybutu lang w znaczniku <html>: Atrybut lang jest używany w znaczniku <html> do określenia języka, w jakim napisana jest zawartość strony. Jest to ważne narzędzie dla dostępności, ponieważ umożliwia użytkownikom z różnymi umiejętnościami językowymi korzystanie z treści strony w odpowiednim języku.

Dlaczego poprawne oznaczanie języka jest ważne dla dostępności i wyszukiwarek: Poprawne oznaczenie języka za pomocą atrybutu lang ma kluczowe znaczenie dla osób korzystających z czytników ekranowych i innych technologii wspomagających, które dostarczają treść strony w sposób zrozumiały. Dodatkowo, wyszukiwarki wykorzystują informację z atrybutu lang do lepszego indeksowania i wyświetlania wyników w odpowiednim języku.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Przykład użycia atrybutu lang</title>
</head>
<body>
    <h1>Witaj świecie!</h1>
    <p>To jest przykład użycia atrybutu lang w dokumencie HTML.</p>
</body>
</html>

W tym przykładzie użyto atrybutu lang w znaczniku <html>, aby wskazać, że językiem używanym na stronie jest polski. Ten atrybut informuje przeglądarkę i wyszukiwarki o języku używanym na stronie, co ma znaczenie dla dostępności i interpretacji treści przez użytkowników oraz wyszukiwarki.

Atrybut charset

Atrybut charset odnosi się do kodowania znaków używanego w dokumencie HTML. W dzisiejszym globalnym środowisku internetowym, w którym strony są dostępne dla różnych języków i zestawów znaków, użycie właściwego kodowania jest niezwykle istotne.

Wszechstronne kodowanie UTF-8: Współczesne standardy rekomendują użycie kodowania UTF-8 (Unicode Transformation Format – 8-bit) ze względu na jego wszechstronność i zdolność do obsługi różnorodnych znaków z wielu języków. UTF-8 pozwala na zakodowanie znaków zarówno z alfabetów łacińskiego, jak i niełacińskiego, w tym znaków specjalnych i diakrytycznych, które są powszechne w wielu językach.

Dzięki użyciu właściwego kodowania znaków, strona jest w stanie wyświetlać poprawnie teksty w różnych językach oraz zachować integralność znaków specjalnych czy znaków niełacińskich. To kluczowe dla zrozumienia i wyświetlania treści dla użytkowników z całego świata.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Przykład użycia atrybutu charset</title>
</head>
<body>
    <h1>Witaj świecie!</h1>
    <p>To jest przykład użycia atrybutu charset w dokumencie HTML.</p>
</body>
</html>

W przykładzie użyto atrybutu charset w znaczniku <meta> w sekcji <head>, aby określić, że dokument używa kodowania znaków UTF-8. To pozwala na poprawne wyświetlanie znaków specjalnych i diakrytycznych w treści strony.

Zadzwoń