Lekcje
Rozpocznij
Rozpocznij naukę
CodeGym /Kursy /Python SELF PL /Wprowadzenie do HTML

Wprowadzenie do HTML

Python SELF PL
Poziom 29 , Lekcja 0
Dostępny

1. Tag w HTML

Co to jest HTML?

HTML (HyperText Markup Language) — to język opisu, który jest używany do tworzenia i strukturyzacji stron internetowych. Dzięki HTML możemy organizować zawartość strony, używając różnych tagów i atrybutów, aby przeglądarka wiedziała, jak wyświetlać informacje. Na tym wykładzie omówimy podstawowe pojęcia HTML, takie jak tagi, drzewo tagów, atrybuty, pojedyncze tagi oraz strukturę dokumentu HTML.

W HTML tagi — to kluczowe elementy, które pozwalają oznaczyć zawartość. Otaczają tekst i inne elementy, pomagając przeglądarce zrozumieć, jak dokładnie je wyświetlać. Na przykład, tagi <h1> i <p> wskazują przeglądarce, że tekst wewnątrz nich jest nagłówkiem lub akapitem.

Tagi zapisuje się w nawiasach kątowych <>. Większość tagów otwiera się i zamyka, czyli składa się z tagu początkowego i końcowego. Na przykład:

HTML 
                      
                        <h1>To jest nagłówek</h1>
                        <p>To akapit tekstu.</p>
Java university

Tutaj <h1> — to tag początkowy, a </h1> — tag końcowy.

Drzewo tagów

Dokument HTML ma hierarchiczną strukturę, w której tagi są zagnieżdżane, tworząc strukturę drzewiastą. To „drzewo tagów” określa, jak elementy na stronie są połączone ze sobą i w jakiej kolejności mają być wyświetlane.

Oto przykład prostego drzewa tagów:

Python 

<html>
<head>
  <title>Przykład strony</title>
</head>
<body>
  <h1>Nagłówek strony</h1>
  <p>Tutaj jest tekst akapitu.</p>
</body>
</html>

W tym przykładzie tag <html> jest korzeniem, wewnątrz którego znajdują się <head> i <body>. Wewnątrz <body> znajdują się tagi <h1> i <p>. Taka struktura pozwala logicznie uporządkować zawartość strony.

Atrybuty

Atrybuty w HTML są używane do dodawania dodatkowych informacji do tagów. Znajdują się w tagu początkowym i składają się z nazwy i wartości. Na przykład:

HTML 

<a href="https://example.com">Link do strony</a>
<img src="image.jpg" alt="Opis obrazu">
  • href wskazuje adres linku.
  • src — ścieżkę do obrazu.
  • alt — alternatywny tekst, który będzie wyświetlany, jeśli obraz się nie załaduje.

Atrybuty pozwalają dodać elementom dodatkowe właściwości, takie jak identyfikator (id), klasy (class), style (style) i wiele innych.

Pojedyncze tagi

Niektóre tagi HTML nie zawierają wewnętrznej zawartości i nie wymagają tagu końcowego. Takie tagi nazywa się pojedynczymi. Na przykład tag <img> jest używany do wstawiania obrazu, a jego struktura wygląda tak:

CSS 
  
    <img data-max-width="800" data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e"
src="https://cdn.javarush.com/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg" alt="Opis obrazu">
HTML 
  
    <img src="image.jpg" alt="Opis obrazu">

Inne przykłady pojedynczych tagów:

  • <br> — do przełamania linii.
  • <hr> — do dodawania poziomej linii.

2. Wprowadzenie do dokumentu HTML

Dokument HTML zaczyna się od deklaracji <!DOCTYPE html>, która wskazuje przeglądarce, że dokument jest w HTML5. Następnie jest tag korzenia <html>, który zawiera tagi <head> i <body>. W <head> znajdują się metadane dokumentu (tytuł, style, skrypty), a w <body> — główna zawartość strony.

Przykład dokumentu HTML

Python 
      
        <!DOCTYPE html>
        <html lang="pl">
        <head>
          <meta charset="UTF-8">
          <title>Moja pierwsza strona</title>
        </head>
        <body>
          <h1>Witaj!</h1>
          <p>To przykład dokumentu HTML.</p>
          <a href="https://example.com">Odwiedź naszą stronę</a>
        </body>
        </html>
  • <!DOCTYPE html> informuje przeglądarkę, że dokument jest napisany w HTML5.
  • <html lang="pl"> wskazuje język dokumentu.
  • <meta charset="UTF-8"> definiuje kodowanie, co pomaga poprawnie wyświetlać znaki.
  • <title> ustawiania tytuł strony, widoczny w nagłówku okna przeglądarki.

Dodatkowe tagi w <head>

Tag <head> zawiera informacje, które nie są bezpośrednio wyświetlane na stronie, ale są ważne dla funkcjonowania witryny. Wewnątrz <head> można dodać następujące tagi:

  • <meta name="description" content="Opis strony"> — krótki opis strony dla wyszukiwarek.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> — umożliwia dostosowanie witryny do urządzeń mobilnych.
  • <link rel="stylesheet" href="styles.css"> — podłączenie pliku CSS ze stylami.
  • <script src="script.js"></script> — podłączenie zewnętrznego pliku JavaScript.

Te tagi pomagają ulepszyć interakcję z użytkownikiem, zoptymalizować stronę dla wyszukiwarek i podłączyć potrzebne zasoby.

Komentarze
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION