Przykładowy kod HTML: podstawy rozwoju aplikacji internetowych

HTML jest bez przesady głównym językiem Internetu, z którym się narodził. Jego obowiązki obejmują podstawowe projektowanie stron internetowych, ich logiczną strukturę i formatowanie. Nie trzeba daleko szukać przykładów HTML, wystarczy otworzyć przeglądarkę. Każda wyświetlana strona to szukany kod HTML. Aby go bliżej poznać, spójrz na konsolę programisty.

Za kulisami Internetu

Otwórz swoją ulubioną stronę w przeglądarce Google Chrome. Ta przeglądarka ma najbardziej wygodny panel programistyczny, więc jest idealny do nauki.

Aby szybko dostać się do panelu, naciśnij klawisz skrótu F12 na klawiaturze. Jeśli z jakiegoś powodu to nie zadziałało, znajdź potrzebny element w menu przeglądarki i wybierz go, klikając "Dodatkowe narzędzia"> "Narzędzia programistyczne".

Otworzy się nowy panel z kilkoma zakładkami, z których potrzebujemy pierwszego - Elementy. Tutaj opisany jest cały kod HTML bieżącej strony.

Struktura dokumentu HTML

Za pomocą panelu można dowiedzieć się na żywo, jak strona jest zorganizowana, aby zobaczyć jej części składowe. Ważne jest, aby zrozumieć, że ostateczny wygląd jest dostarczany nie tylko przez znaczniki HTML, ale także przez style opisane za pomocą CSS. Na karcie Elementy widoczna jest tylko podstawowa struktura.

Wszystkie elementy strony są uporządkowane hierarchicznie. Możesz oglądać zagnieżdżone elementy za pomocą strzałek.

Na przykład cała strona HTML jest zawijana w blok o nazwie HTML, wewnątrz której znajdują się kontenery głowy i ciała. Jeśli je rozszerzysz, w środku znajdziesz kilka poziomów elementów o różnych nazwach.

Wszystko w sekcji head nie jest renderowane przez przeglądarkę. Jedynym wyjątkiem jest blok tytułowy, który jest wyświetlany w zakładce. W "nagłówku" strony znajdują się informacje o usługach niezbędne do prawidłowego działania przeglądarki internetowej.

Natomiast zawartość sekcji ciała jest widoczna dla użytkownika. Konsola programisty pozwala nawet zobaczyć, gdzie dokładnie znajduje się każdy blok na stronie. Aby to zrobić, po prostu najedź na niego kursorem.

Zrzut ekranu pokazuje, jak wyróżnia się pasek nawigacyjny:

Na górze znajduje się również element DOCTYPE. Odnosi się również do danych usługi.

Tagi i ich atrybuty

Skrót HTML oznacza dosłownie "Hypertext Markup Language". Oznacza to, że każda strona internetowa jest po prostu tekstem zaznaczonym w określony sposób. Do jego formatowania używane są specjalne elementy - znaczniki (deskryptory).

Aby odróżnić tag od samego tekstu, jest on zamknięty w nawiasach ostrych. Na przykładzie kodu HTML można zobaczyć wiele tagów: html, head, body, header, div. Są one dwojakiego rodzaju:

• Zamykanie tagów z treścią składa się z dwóch części i tekstu. Na przykład deskryptor nagłówka można zamknąć. Druga część różni się od pierwszej obecnością ukośnika przed nazwą znacznika.
• Niezamknące tagi bez treści składają się z tylko jednej części. Przykładem jest metatag.

Pamiętaj, że deskryptory HTML mogą się wzajemnie osadzać. Wyjątkiem są niezamknięte znaczniki, które nie mają treści, dlatego nie można do nich wstawić żadnych elementów.

Ważne jest, aby postępować zgodnie z poleceniem zamknięcia. W konsoli widać, jak dokładnie są umieszczone zagnieżdżone uchwyty. Element zewnętrzny nie może zamknąć się przed elementem wewnętrznym.

Każdy znacznik może mieć wiele parametrów (atrybutów), które definiują jego właściwości. W HTML, przykład jest deskryptorem hiperłącza a i jego atrybutu href, który zawiera adres strony, do której link zostanie utworzony po kliknięciu łącza.

Visual Learning HTML

Dla początkujących projektantów stron internetowych, twórców stron internetowych i osób zainteresowanych podstawami technologii internetowej nauka języka HTML to pierwszy krok w długą, interesującą podróż. Istnieją setki kursów i podręczników prezentujących informacje na wiele różnych sposobów. Wybierz spośród nich odpowiedni nie jest trudne.

Ale niezależnie od tego, jak dobry jest podręcznik, potrzebne są dwa dodatkowe elementy:

• niezależne doświadczenie składu;
• studiowanie przykładów HTML innych ludzi.

Konsola programisty w popularnych przeglądarkach (poza Google Chrome, dobre panele można znaleźć w Mozilla Firefox i Internet Explorer) to najlepszy sposób na poznanie stron internetowych. Pozwala opanować podstawowe wzorce układu, nauczyć się finalnej prezentacji kodu, a nawet dynamicznie wprowadzać w nim zmiany.