HTML jest bez wątpienia głównym językiem internetu,pochodzi od niego. Tak czy inaczej, jest zaangażowany w tworzenie i obsługę każdej strony internetowej w sieci WWW. Bez zrozumienia, czym jest HTML i jak działa, niemożliwe jest przekształcenie ciągłego strumienia tekstu, który pierwotnie jest jakimkolwiek dokumentem, w uporządkowaną, piękną i przyjazną dla użytkownika witrynę.
HTML i sieć WWW
Skrót pochodzi z języka angielskiegoFrazy w języku HyperText Markup Language. Tłumaczenie w pełni wyjaśnia, czym jest HTML - jest to język znaczników hipertekstowych. Pojawił się u zarania rozwoju Internetu i był przeznaczony do projektowania stron internetowych zawierających dokumentację naukowo-techniczną, która wymaga przede wszystkim odpowiedniego sformatowania.
Zaproponował to Tim Berners-Lee, twórca językaz jego pomocą możliwe będzie łatwe tworzenie prostych, ale zrozumiałych dokumentów do wymiany między naukowcami z różnych miast i krajów. Opracował zestaw deskryptorów - elementów formatujących tekst. Teraz znamy je jako „tagi”.
Aby tekst HTML był wyświetlany poprawnie, potrzebujeszprzetwarzanie go. Robią to specjalne programy - przeglądarki. Otrzymują stronę ze znacznikami, interpretują deskryptory znaczników i wyświetlają tekst tak, jak powinien go widzieć użytkownik.
Bardzo ważna część języka, która jest zrozumiała nawet zjego nazwa to obsługa hipertekstu. Oznacza to, że niektóre strony HTML mogą zawierać łącza do innych. System odsyłaczy miał szczególne znaczenie dla artykułów naukowych, pozwalając nie zagłębiać się w wyjaśnienie złożonego terminu, ale po prostu odesłać czytelnika do odpowiedniego rozdziału, jeśli to konieczne.
Rozwój języka
Z biegiem czasu prosty zestaw tagów był HTMLna początku swojego istnienia urósł i umocnił się. Teraz możliwe jest osadzanie treści multimedialnych na stronie, tworzenie tabel i sterowanie układem obrazów.
Spontaniczna ekspansja języka musiała zostać zahamowana i opanowana, potrzebne były pewne standardy.
1995 - czas przyjęcia trzeciej wersjispecyfikacje i punkt zwrotny w losach projektantów layoutu. Współczesne przeglądarki w tamtym czasie nie mogły już zapewnić implementacji przyjętych standardów, rozpoczęła się improwizacja i warstwowanie. Każda przeglądarka internetowa miała własne zdanie na temat tego, czym jest HTML i jak należy interpretować konkretne deskryptory.
Na szczęście główne konflikty między przeglądarkami zostały teraz wygładzone, oszczędzając programistom frontendu dużo energii i nerwów.
HTML5
Piąty standard dotyczy 2018 rHTML, którego szkic pojawił się pod koniec 2007 roku. Wprowadził wiele nowych elementów i atrybutów, ze szczególnym uwzględnieniem semantyki stron internetowych i ich dostępności dla użytkowników z niepełnosprawnościami.
Język nadal aktywnie się rozwija i doskonali.
Podstawy HTML
Główne struktury HTML to deskryptory lub znaczniki i jednostki. Zwykły tekst przetworzony z ich pomocą zamienia się w dokument internetowy.
Jednostki znaczników hipertekstowych to kody mnemoniczne dla specjalnych znaków Unicode, które nie są dostępne na konwencjonalnych klawiaturach.
Przykłady podmiotów:
| < | otwarty nawias kątowy |
| > | kątownik zamykający |
| & larr; | cienka strzałka skierowana w lewo |
| uarr; | cienka strzałka skierowana w górę |
Elementy HTML zaczynają się od ampersandu,kończy się średnikiem i zawiera łatwy do zapamiętania kod znaku. Są ważne, ponieważ pozwalają wyświetlać znaki, których nie można bezpośrednio zapisać w kodzie HTML.
Znaki te obejmują na przykład nawiasy ostre. W hipertekstowym języku znaczników służą one jako identyfikatory znaczników, otaczając nazwę deskryptora po obu stronach.
Tagi HTML
Tagi to główne elementy strukturalne dokumentu internetowego. Są to pojemniki z częściami otwierającymi i zamykającymi oraz zawartością pomiędzy nimi.
Przykładowy tag:
<i> tekst wewnątrz tagu </i>To jest deskryptor HTML jaktóry definiuje kursywę. Litera i jest pierwszą literą słowa kursywą. On ma:
- część otwierająca
<i>; - część okładki
</i>charakteryzuje się obecnością ukośnika; - zawartość, która zostanie wyświetlona kursywą po przeanalizowaniu przez przeglądarkę.
Większość deskryptorów ma taką samą strukturę, jednak istnieje niewielka grupa pustych tagów.
Długi tekst, który powinien zostać podzielony na kilka wierszy <br> aby poprawić czytelność.
Etykietka <br> po przeanalizowaniu zostanie zastąpiony podziałem wiersza. Nie zawiera treści, więc nie jest wymagana żadna część zakrywająca.
Następujące tagi są również puste:
<hr>oznaczające cienką szarą linię oddzielającą bloki tekstu od siebie;<input>reprezentujące całą rodzinę interaktywnych elementów formularza;<img>podłączenie pliku obrazu;- liczba tagów serwisowych -
<meta>,<link>.
Deskryptory mogą być zagnieżdżane w sobie na dowolnej liczbie poziomów. Jedynymi wyjątkami są puste tagi, które nie mogą zawierać treści.
Atrybuty tagów
Duże znaczenie podczas tworzenia dokumentów internetowych mają atrybuty, które są umieszczane w otwierającym elemencie znacznika. Deskryptor może mieć jedną lub więcej właściwości lub nie mieć ich wcale.
W większości przypadków przy użyciu atrybutówniektóre aspekty zachowania elementu są wyjaśnione, a czasami mogą radykalnie zmienić prezentację wizualną. Szereg właściwości jest używanych do celów usługowych, umożliwiając manipulowanie tagami HTML z CSS lub JavaScript.
Ustawienie atrybutu:
Wybierz kolor: <input type = "checkbox" name = "red"> Czerwony <input type = "checkbox" name = "yellow" zaznaczone> Żółty <input type = "checkbox" name = "green"> ZielonyOto grupa trzech interaktywnych elementów <input>. Atrybut rodzaj definiuje ich wyświetlanie jako checkboxy, Nazwa zawiera nazwę określonego pola i właściwość sprawdzone, nieważne, ustawia drugie wejście jako domyślne.
Istnieją atrybuty ogólne, które można zdefiniować dla dowolnego deskryptora, oraz określone atrybuty, które są specyficzne dla określonych znaczników.
Właściwości uniwersalne to: id, klasa, tytuł.
Specyficzny - wyżej wymieniony typ, sprawdzony, a także src, href i szereg innych.
Funkcje składni
Po otrzymaniu strony HTML przeglądarka analizuje ją i odrzuca wszystkie niepotrzebne elementy. Dlatego w większości przypadków wielokrotne spacje i podziały wierszy zostaną zignorowane.
Poniższe dwa fragmenty kodu są całkowicie identyczne dla przeglądarki, chociaż jeden z nich zawiera wiele następujących po sobie spacji i jest podzielony na linie, a drugi nie.
<!- pierwszy fragment -> <p> Lorem ipsum <i> dolor sit </i> amet. </p> <p> <b> doloribus sunt </b> ad Proventent. </p> <! - drugi fragment -> <p> Lorem ipsum <i> dolor sit </i> amet. </p> <p> <b> doloribus sunt, </b> ad provent. </p>
Można używać myślników i tabulatorówwizualna struktura kodu, ale nie mają one znaczenia dla przeglądarki W niektórych przypadkach, gdy konieczne jest zachowanie oryginalnego formatu tekstu wraz ze spacjami i wcięciami, istnieją tagi, które wyświetlają swoją zawartość bez wstępnego przetwarzania przez przeglądarkę, na przykład <pre>.
HTML nie rozróżnia wielkości liter.Oznacza to, że tagi, nazwy i wartości atrybutów mogą być pisane małymi lub dużymi literami, a obie opcje będą równie poprawnie przetwarzane przez przeglądarkę. W razie potrzeby możesz nawet użyć kombinacji dużych i małych liter, ale zakłóca to normalne postrzeganie kodu.
Po zapoznaniu się ze znacznikami, ich właściwościami i składnią możesz przejść od podstaw języka HTML do struktury dokumentu HTML jako całości.
Tworzenie dokumentu HTML
Każda strona internetowa musi mieć jakiś szkielet, aby przeglądarka wyświetlała się poprawnie.
Wymagana struktura dokumentu HTML obejmuje:
- deklaracja doctype w celu zapewnienia prawidłowego renderowania przeglądarki;
- opakowanie html dla całej strony;
- dedykowana część serwisowa
głowa.
<! DOCTYPE html> <html> <head> <! - informacje serwisowe dotyczące przeglądarki i robotów wyszukiwania -> </head> <body> </body> </html>HTML5 nie wymaga tagu ciało w dokumencie zaleca się jednak, aby nadal używać go do oznaczania obszaru zawartości.
Ważne, ale opcjonalne deskryptory usług to:
- tytuł zawierający tytuł strony;
- metatagi definiujące kodowanie, informacje SEO, nagłówki http i inne ważne ustawienia.
<head> <title> Tytuł strony </title> <meta charset = "utf-8"> <meta name = "description" content = "Opis strony dla robotów wyszukiwania"> </head>W przeciwnym razie struktura strony HTML może być dowolna. Jego cechy zależą od konkretnego projektu.
Główna zasada, której należy przestrzegać wkażdy dokument sieciowy to prawidłowe zagnieżdżenie tagów. Najpierw zamykany jest deskryptor znajdujący się na najgłębszym poziomie zagnieżdżenia, a następnie kolejno wszystkie zewnętrzne.
<body> <main> <article> <p> Tekst akapitu </p> <! - akapit jest zamykany jako pierwszy -> </article> <! - potem artykuł -> </main> <! - następnie główny tag -> </body> <! - i na końcu treść dokumentu ->Struktura semantyczna
Jako specyfikacja ipojawienie się nowych deskryptorów zmieniło technologię tworzenia dokumentów internetowych. Początkowo teksty szły ciągłym strumieniem, dzieląc się jedynie na akapity. Potem przyszła era układu tabel, który umożliwił umieszczanie bloków na stronie w dowolnej konfiguracji, na przykład w kolumnach.
Wraz z rozwojem CSS stopniowo rezygnowano z używania tabel, ponieważ style umożliwiały projektowanie dokumentu zgodnie z oczekiwaniami.
Nowy standard HTML z zadowoleniem przyjmuje semantykę w strukturze dokumentu HTML. Osiąga się to za pomocą znaczników semantycznych, takich jak nagłówek, stopka, Główny, artykuł, nav, Sekcja i inni.
Główny język internetu jest bardzo prosty. Każdy może dowiedzieć się, czym jest HTML i skutecznie zastosować tę wiedzę, tworząc własne strony internetowe.
