HTML z definicji nie może być językiem programowania, jak błędnie sądzi wielu niedoświadczonych ludzi. Język HTML jest w zasadzie z natury niepoprawnym sformułowaniem. Musisz go nazwać Hypertext Markup Language, ponieważ HTML oznacza - hipertekstowy język znaczników. Mówiąc banalnie, HTML to seria tagów. Z kolei tag jest słowem kontrolnym, głównym. Tagi zapewniają możliwość nadania tekstom o standardowym wyglądzie sformatowanego wyglądu, czyli kursywy, pogrubione, podkreśl lub wykonaj inną czynność. Jednak możesz wykonywać różne działania na tekstach tylko w specjalistycznych programy przeglądarkowe dzięki którym faktycznie podróżujesz sieć globalna na calym swiecie Sieć. Programy te pokazują jeden, już zmieniony tekst, oraz Tagi HTML używane do modyfikacji, ukrywają się. Aby lepiej sobie z tym wszystkim poradzić i szybko zrozumieć, o co toczy się gra, na tej stronie kliknij prawym przyciskiem myszy tę stronę i wybierz punkt „ Źródło' lub coś podobnego w znaczeniu. Ta sama strona pojawi się przed Tobą w swojej prawdziwej formie.

Do tworzenia kodu HTML możesz użyć standardowych edytorów tekstu, a także edytorów wizualnych, często nazywanych wizualnymi. Główną różnicą między tymi typami edytorów jest to, że wizualne są specjalnie zaprojektowane do pisania HTML - kod, kody JavaScript, css I PHP, a także kilka innych, a mianowicie do programowania stron internetowych. Ponadto takie edytory dają możliwość natychmiastowego zobaczenia, co zrobiłeś w programie i zidentyfikowania (pokazania) popełnionych kleksów w wydrukowanym kodzie. Radzimy wpisać kod bezpośrednio własnymi rękami, a edytory wizualne ułatwią pracę. Możesz użyć przeglądarki Macromedia Dreamweaver 8. Chociaż ten program nie jest najnowszy, jego funkcjonalność będzie dla Ciebie wystarczająca, a nawet z nadwyżką. Najlepszym sposobem na to jest wpisanie kodu do programu tkacz snów, następnie zapisz i kliknij przycisk „Wyświetl w przeglądarce”, w którym możesz samodzielnie zmienić zestaw przeglądarek. Następnie wróć do programu Dreamweaver i wznów proces edycji. W tym miejscu zobaczysz crack do Macromedia Dreamweaver 8. Opowiedzieliśmy Ci więc o narzędziach. Przejdźmy do tagów HTML.

Na początek zapoznajmy się ze strukturą strony w kodzie HTML, a raczej z tymi elementami, które zawsze muszą być w niej ściśle obecne.

Niezmienne tagi strony w kodzie HTML:

, , , , ,

Należy pamiętać, że wiele osób, aby program wyświetlał kod HTML w formie tekstowej, umieszcza po nawiasie otwierającym lukę, czyli spację. Nie powinieneś tego robić podczas wpisywania kodu!

Na pewno od razu zauważyłeś, że wszystkie tagi są sparowane względem siebie. Jeden tag otwiera, a drugi zamyka. W kodzie HTML prawie wszystkie tagi są sparowane. Różnica między nimi polega na tym, że tag zamykający jest poprzedzony ukośnikiem /. Tagi te są również nazywane tagami kontenera, ponieważ możliwe jest ustawienie innych tagów między danymi, tak jakbyś definiował je w kontenerze. Możesz już sam zobaczyć, jak wśród tagów I inne są zlokalizowane. Dozwolone jest drukowanie nazw znaczników zarówno wielkimi jak i wielkie litery, nie będzie różnicy. Nagrania takie jak I dla programu nie będą miały żadnej różnicy i są przez niego interpretowane identycznie.

Czym więc są tagi niezmienne dla strony w kodzie HTML? Rozważmy to pytanie bardziej szczegółowo.

Otwierający tag i zamykam to przesyłać informacje do programów przeznaczonych do renderowania stron hipertekstowych i innych przeglądarek, które pracują z materiałami hipertekstowymi. Każdy dokument w kodzie html zawsze zaczyna się od i kończy. Oznacza to, że pomiędzy tymi dwoma tagami znajduje się cały kod HTML.

tagi I kończy tytuł materiału hipertekstowego. Zawiera informacje o stronie w kodzie html. Zasadniczo te tagi nie są wymagane, nawet jeśli nie są, przeglądarki doskonale interpretują Twój materiał html. Jednak decydując się nie pisać tytułu w dokumencie, nadal wpisuj . Takie posunięcie jest konieczne dla kompatybilności w różnych odmianach przeglądarek. Absolutnie każdy znak znajdujący się w tych znacznikach nie jest w żaden sposób odszyfrowywany przez przeglądarkę. Nie obejmuje to tylko informacji w tagach , zawierający samą nazwę materiału html (nazwa znajduje się w górnej części panelu przeglądarki). Może to jednak wpłynąć na ogólny wygląd dokumentu html, na to, jak będzie on istnieć w sieci i będzie klasyfikowany według hierarchii w wyszukiwarkach. Więcej szczegółów na temat tagów umieszczonych w tytule materiału hipertekstowego omówimy później.

Cała istota materiału w Kod HTML umieszczone w tagach I . To miejsce to absolutnie wszystko, z czego składa się nasz dokument html i co rozważamy podczas jego wdrażania (obrazy graficzne, dane tekstowe, przyciski i inne elementy). To jest główna „treść” strony lub bazy.

Inne tagi używane w procesie generowania materiału html znajdują się wewnątrz wszystkich obowiązkowych tagów. Prawie wszystkie tagi html zawierają różnorodne parametry i atrybuty, za pomocą których będziesz w stanie odtworzyć informacje dokładnie w takiej formie, w jakiej zostały przedstawione i opracowane. Na przykład wpiszesz:

gdzie - sam tag, bgkolor- atrybut tagu, „#FF0000”- znaczenie tego atrybutu. Tag ma wiele atrybutów.

W ten sposób ton całej strony stanie się czerwony.

Zwróć tutaj uwagę na to, że atrybuty tagu (każdy z nich) i ich znaczenie są umieszczane w tagu otwierającym (bez ukośnika), a nigdy w tagu zamykającym.

W ten sposób dowiedziałeś się o niezmiennych tagach strony html. Ale zanim przejdziemy do studiowania innych, zrobimy małą dygresję.

Wykorzystując zdobyty bagaż wiedzy, odejmowanej od wszelkiego rodzaju podręczników dotyczących podstaw języka HTML dla początkujących, w praktycznych działaniach zidentyfikowaliśmy główną i bardzo poważną plamę, jaką poczyniło wielu autorów tej literatury. Zaprojektowany wyłącznie dla początkujących, wszystkie te przewodniki po studiach i podręczniki uczą podstaw HTML sekwencyjnie, zaczynając od tagów tytułowych materiału hipertekstowego ( ) i dalsze zapoznawanie się z tagami bazy dokumentu ( ). W gruncie rzeczy wszystko to jest oczywiście bardzo poprawne. Jednak, jak pokazuje nasze praktyczne doświadczenie, dla początkujących ten sposób nauki podstaw HTML jest nieodpowiedni. Odkrywając niezliczone tagi tytułowe, które są dla niego zupełnie niejasne, początkujący nie będzie mógł zobaczyć owoców swojego szkolenia, ponieważ przeglądarka nie interpretuje tych tagów i nie będzie w stanie zastosować wielu z nich w pracy nad swoim dziełem w jakikolwiek sposób (na pewno na samym początku treningu). Więc każdy początkujący będzie tylko marnował swój czas i energię, a co najważniejsze chęć zrobienia czegoś w przyszłości i czy w ogóle uczyć się HTML. Ponadto pomysł, że praca nad opracowaniem zasobu może być wykonana tylko przez doświadczonych webmasterów za duże pieniądze, będzie mocno zakorzeniony w niedoświadczonych głowach początkujących. Dlatego radzimy zostawić na chwilę wszystko niezrozumiałe i przejść dalej. Następnie, po załatwieniu wszystkiego jasnego, możesz nauczyć się reszty.

Podstawy HTML zawierają podstawowe zasady języka HTML, opis struktury strony HTML, relacje w strukturze dokumentu HTML między elementami HTML.

Dokument HTML jest normalny Dokument tekstowy, można utworzyć jak zwykle Edytor tekstu (Zeszyt), a w specjalistycznym z podświetlaniem kodu (Notepad++, kod programu Visual Studio itp.). Dokument HTML ma rozszerzenie .html.

Dokument HTML składa się z drzewa elementów HTML i tekstu. Każdy element jest identyfikowany w dokumencie źródłowym za pomocą znacznika początkowego (otwierającego) i końcowego (zamykającego) (z rzadkimi wyjątkami).

Początek tagu pokazuje, gdzie zaczyna się element, koniec - gdzie się kończy. Zamykający tag utworzone przez dodanie ukośnika / przed nazwą tagu:<имя тега> … . Pomiędzy znacznikiem początkowym i końcowym znajduje się treść znacznika - treść.

Pojedyncze tagi nie mogą bezpośrednio przechowywać treści, jest to zapisywane jako wartość atrybutu, na przykład tag utworzy przycisk z tekstem Przycisk w środku.

Tagi mogą być zagnieżdżone w sobie, na przykład

Tekst

Tekst

Elementy HTML mogą mieć atrybuty (globalne, zastosowane do wszystkich elementów HTML i własne). Atrybuty są zapisywane w tagu otwierającym elementu i zawierają nazwę oraz wartość określoną w formacie atrybut name="value" . Atrybuty umożliwiają zmianę właściwości i zachowania elementu, dla którego są ustawione.

Każdy element może mieć wiele wartości klas i tylko jedną wartość id. Wiele wartości klas jest zapisanych ze spacją,

. Wartości class i id muszą zawierać tylko litery, cyfry, łączniki i podkreślenia i muszą zaczynać się tylko od liter lub cyfr.

Przeglądarka przegląda (interpretuje) dokument HTML, budując jego strukturę (DOM) i wyświetlając go zgodnie z instrukcjami zawartymi w tym pliku (arkusze stylów, skrypty). Jeśli znacznik jest poprawny, w oknie przeglądarki zostanie wyświetlona strona HTML zawierająca elementy HTML - nagłówki, tabele, obrazy i tak dalej.

Proces interpretacji (rozbiór gramatyczny zdania) rozpoczyna się przed pełnym załadowaniem strony internetowej w przeglądarce. Przeglądarki przetwarzają dokumenty HTML sekwencyjnie od samego początku, jednocześnie przetwarzając CSS i powiązując arkusze stylów z elementami strony.

Dokument HTML składa się z dwóch sekcji – nagłówka – pomiędzy tagami … i treści - między tagami … .

Struktura strony internetowej

1. Struktura dokumentu HTML

Język HTML przestrzega reguł zawartych w pliku deklaracji typu dokumentu. (Definicja typu dokumentu lub DTD). DTD to dokument XML, który definiuje, które tagi, atrybuty i ich wartości są ważne dla określonego typu HTML. Każda wersja HTML ma swoje własne DTD.

DOCTYP odpowiedzialny za poprawne wyświetlanie strony internetowej przez przeglądarkę. DOCTYPE definiuje nie tylko wersję HTML (np. html), ale także odpowiedni plik DTD w sieci.

Elementy w tagu , tworzą drzewo dokumentów, tzw model obiektowy dokument, DOM (model obiektowy dokumentu). Jednocześnie żywioł jest elementem głównym.

Ryż. 1. Najprostsza struktura strony internetowej

Aby zrozumieć interakcję elementów strony internetowej, należy wziąć pod uwagę tzw "relacje rodzinne" między elementami. Relacje między wieloma zagnieżdżonymi elementami są podzielone na relacje nadrzędne, podrzędne i rodzeństwo.

Przodek Element zawierający inne elementy. Na rysunku 1 przodkiem wszystkich elementów jest . Jednocześnie żywioł jest przodkiem wszystkich zawartych w nim tagów:

,

, ,