Podstawy HTML
W tym artykule wyjaśniamy podstawy HTML.
To wyjaśnia główne znaczniki, takie jak deklaracja DOCTYPE, znaczniki <html>, <head> i <body>. Opisuje również znaczniki, atrybuty i znaki specjalne.
YouTube Video
Podstawy HTML
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>HTML is the language used to create the basic structure of web pages.</p>
15 </main>
16 </body>
17</html>-
<!DOCTYPE html>Na początku pliku deklarujemy, że jest to dokument HTML5, co oznacza, że przestrzega zasad HTML5.
-
<html>Tag
<html>jest najbardziej zewnętrznym elementem w dokumencie HTML, który otacza całą zawartość. Każdy plik HTML zawiera tylko jeden tag<html>, a wszystkie inne tagi są zagnieżdżone w jego wnętrzu. Częśćlang="en"wewnątrz otwierającego tagu<html>nazywana jest atrybutem i informuje przeglądarkę, że dokument jest napisany po angielsku. To pomaga informować czytniki ekranu i wyszukiwarki o języku dokumentu. -
<head>Tag
<head>definiuje metadane (informacje) dla strony. Zawiera to tytuł strony, kodowanie znaków i ustawienia responsywnego projektu. Projektowanie responsywne odnosi się do metody zaprojektowanej w celu dostosowania się i dobrego wyświetlania na różnych urządzeniach i rozmiarach ekranów. Umożliwia to użytkownikom komfortowe przeglądanie treści na różnych urządzeniach, takich jak smartfony, tablety i komputery stacjonarne.<meta charset="UTF-8">ustawia kodowanie znaków dokumentu na UTF-8.<meta name="viewport" content="width=device-width, initial-scale=1.0">to ustawienie, które optymalizuje wyświetlanie na urządzeniach mobilnych. Strona dostosowuje się do szerokości ekranu urządzenia.<title>reprezentuje tytuł strony wyświetlany na karcie przeglądarki. W tym przykładzie ustawiono tytuł 'Podstawy HTML'. -
<body>Tag
<body>zawiera część, która wyświetla treść użytkownikom. W tym tagu zapisuje się tekst, obrazy, linki itd. -
<main>Tag
<main>reprezentuje główną treść strony. To obejmuje nagłówki i akapity. -
<h1>Tag
<h1>reprezentuje najważniejszy nagłówek na stronie. Zazwyczaj tag<main>i<h1>są używane tylko raz w dokumencie. -
<p>Tag
<p>reprezentuje akapit. -
<!-- Comment -->Możesz pisać komentarze w HTML w tym formacie. Ponieważ HTML po stronie klienta może być przeglądany przez każdego, nie umieszczaj w komentarzach poufnych informacji, takich jak hasła lub klucze API.
HTML ma wiele tagów, ale zwróć uwagę na następujące punkty. Plik HTML składa się z deklaracji DOCTYPE i jednego tagu <html>. Tag <html> zawiera jeden tag <head> i jeden <body>. W HTML wszystkie tagi są zawarte w tagu <html>, wyrażając strukturę tekstu poprzez relacje rodzic-dziecko i rodzeństwo, podobnie jak struktura drzewa. Pisząc HTML, zwracaj uwagę także na strukturę dokumentu.
Tagi i atrybuty
Następnie przyjrzyjmy się tagom i atrybutom HTML.
1<!-- Opening tag and closing tag -->
2<div>Content</div>
3
4<!-- Self-closing tag -->
5<br>
6
7<!-- Nested tag -->
8<div>
9 <div>Nested Content</div>
10</div>
11
12<!-- Attribute -->
13<div id="main">
14 <div>Nested Content</div>
15</div>
16
17<!-- Tag : <div> -->
18<!-- Element : <div>Content</div> -->Tagi są zamknięte w nawiasach ostrych (<, >) i zazwyczaj składają się z pary tagów otwierających i zamykających. Jednak istnieją również tagi pojedyncze, takie jak tag <meta> i <img>, które nie zawierają treści. Tagi pojedyncze nie wymagają tagu zamykającego.
Tagi mogą mieć atrybuty, które dostarczają dodatkowych informacji dla tagu. Atrybuty są zapisane wewnątrz tagu otwierającego w formacie atrybutNazwa="wartość".
Tutaj, <div> jest określany jako znacznik, a <div>Content</div> jako element.
1<div id="header">
2 <ul class="menu">
3 <li>Home</li>
4 <li style="display: hidden;">Unvisible Menu Item</li>
5 </ul>
6</div>Powszechne atrybuty w HTML to id, class i style. Atrybut id jest używany do przypisania elementu unikalnego identyfikatora, i może być tylko jeden element z tym samym id na stronie. Jest to przydatne podczas manipulacji konkretnymi elementami za pomocą JavaScript lub CSS. Atrybut class pozwala grupować wiele elementów za pomocą CSS lub JavaScript poprzez przypisanie nazwy klasy. Możesz przypisać tę samą klasę do wielu elementów, co pozwala na wspólne korzystanie ze stylów. Atrybut style określa style CSS bezpośrednio dla elementu. Zwykle style są definiowane w zewnętrznym arkuszu stylów lub w obrębie tagu <style>, ale ten atrybut jest używany, gdy chcesz bezpośrednio określić style dla poszczególnych elementów.
Znaki specjalne w HTML
Następnie zgłębmy znaki specjalne w HTML.
W HTML istnieją znaki specjalne używane do wyświetlania określonych symboli i znaków. Te znaki specjalne nazywane są encjami. Znaki specjalne zaczynają się od & (ampersand), następuje nazwa lub liczba, i kończą się ; (średnik).
Reprezentatywne znaki specjalne w HTML
Oto kilka powszechnie używanych znaków specjalnych.
| Display | Entity Name | Entity Number | Description |
|---|---|---|---|
& |
& |
& |
Ampersand (&) |
< |
< |
< |
Less-than sign (<) |
> |
> |
> |
Greater-than sign (>) |
" |
" |
" |
Double quotation mark (") |
' |
' |
' |
Apostrophe (') |
| © | © |
© |
Copyright symbol (©) |
| € | € |
€ |
Euro symbol (€) |
| ¥ | ¥ |
¥ |
Japanese Yen symbol (¥) |
| ¢ | ¢ |
¢ |
Cent symbol (¢) |
| £ | £ |
£ |
Pound symbol (£) |
|
|
  |
Non-breaking space (space) |
Przykłady użycia znaków specjalnych w HTML
Szczególnie nawiasy ostre (<, >) oraz podwójne cudzysłowy muszą być poprawnie używane w HTML.
Nawiasy ostre (<, >) i podwójne cudzysłowy powinny być w HTML oznaczane jako znaki specjalne, jak pokazano poniżej.
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>
15 HTML is the language used to create the basic structure of web pages.<br>
16 It defines the content and layout of a webpage using various elements such as headings, paragraphs, and lists.
17 </p>
18 <hr>
19 <h2>Basic Elements of HTML</h2>
20 <div>
21 HTML elements are used to organize and display content on a web page.
22 They include tags for text, images, links, and more.
23 </div>
24 <hr>
25 <ul>
26 <li>Headings (e.g., <h1>, <h2>)</li>
27 <li>Paragraphs (<p>)</li>
28 <li>Links (<a>)</li>
29 <li>Lists (<ul>, <ol>)</li>
30 <li>Images (<img>)</li>
31 </ul>
32 <hr>
33- <h3>About '<h1>' tag and '<h2>' tag</h3>
34+ <h3>About '<h1>' tag and '<h2>' tag</h3>
35 <img src="image.png"
36- alt="This is an example of "image"">
37+ alt="This is an example of "image"">
38 </main>
39 </body>
40</html>
Wersje HTML
Przyjrzyjmy się tutaj wersjom HTML.
Wersje HTML ewoluowały, aby definiować strukturę i funkcjonalność stron internetowych. Oto główne wersje:.
-
HTML 1.0 (1993)
Pierwsza wersja HTML miała jedynie bardzo podstawowe funkcje znacznikowania. Definiowała elementy takie jak linki, nagłówki, akapity i listy.
-
HTML 2.0 (1995)
Pierwsza znormalizowana wersja, z dodanymi elementami, w tym obsługą formularzy i tabel.
-
HTML 3.2 (1997)
Dodano więcej funkcji układów, pozwalając na osadzanie elementów stylu i skryptów. Dodatkowo, układ za pomocą elementu
<table>stał się powszechny. -
HTML 4.01 (1999)
Zaawansowano separację struktury od prezentacji i wprowadzono CSS. Zalecano tworzenie stron zgodnych ze standardami. Ponadto, poprawiono internacjonalizację i dostępność dokumentów.
-
HTML5 (2014)
Najnowsza główna wersja, wprowadzająca obsługę wideo i audio, płótna, pamięci lokalnej, geolokalizacji i innych nowych API. Jest przyjazna dla urządzeń mobilnych, umożliwiając rozwój bardziej interaktywnych aplikacji internetowych.
HTML5.2 to wersja HTML zalecana w 2017 roku i jest ulepszoną wersją HTML5. Od wersji HTML5.2 jest on ciągle aktualizowany jako HTML Living Standard, zamiast mieć statyczny numer wersji.
HTML ewoluował przez te wersje, rozwijając się w bardziej elastyczną i potężną technologię internetową.
Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.