Państwowy Uniwersytet Politechniczny w Petersburgu

Wydział Ekonomii i Zarządzania

Katedra: Ekonomia i zarządzanie w elektroenergetyce i zarządzaniu środowiskiem

Kurs pracy

Technologie informacyjne w energetyce

"Kreacja sieć -strony używające języka HTML ».

Kierownik: Wasiljewa Weronika Igorevna

Wypełnia uczennica grupy 2073/2: Maryina Victoria.

Sankt Petersburg

Wprowadzenie ………………………………………………………………………3

1. Podstawowe pojęcia języka HTML………………………………………………..4

1.1 Historia pojawienia się języka HTML……………………………………….4

1.2.Struktura pliku HTML…………………………………....6

1.3. Lista podstawowych znaczników HTML………………………………………..9

1.4. Tworzenie tabel w HTML………………………………………..10

1.5 Tworzenie linków hipertekstowych………………………………………..12

2. Opis powstania strony „Łucznictwo”…..……………………..14

Wniosek……………………………………………………………………….22

Referencje………………………………………………………....23

Wstęp.

Temat mojej pracy na kursie Tworzenie stron internetowych-strony używające języka HTML "jest bardzo aktualne w dzisiejszych czasach, ponieważ żyjemy w dobie technologii komputerowej, a Internet zajmuje ogromne miejsce w życiu ludzi pracujących i studiujących. Internet, który jest nie do pomyślenia bez języka HTML, za pomocą którego tworzone są strony internetowe, przenika do wszystkich najważniejszych części ludzkiego życia i jest nieograniczonym źródłem informacji.

Mój projekt kursu został opracowany na przykładzie stworzonej przeze mnie strony internetowej, która jest tematem pracy. Dlatego w przyszłości wszystkie użyte materiały zostaną z niego pobrane.

Celem mojej pracy było nauczenie się tworzenia strony internetowej i wykorzystania do tego niezbędnych algorytmów, które zostaną opisane w mojej pracy.

Aby napisać projekt kursu, wykorzystam wykłady, które szczegółowo i jasno przedstawiają podstawowe pojęcia, które będą potrzebne w dalszej nauce. Dodatkowo zamieszczę informacje zaczerpnięte z internetu.

1.1 Historia pojawienia się językaHTML.

język angielski Hyper Text Markup Language to standardowy język znaczników dla dokumentów w sieci WWW. Większość stron internetowych jest tworzona przy użyciu HTML (lub XHTML). Język HTML jest interpretowany przez przeglądarkę i wyświetlany jako dokument w formie czytelnej dla człowieka.

HTML jest aplikacją („przypadek szczególny”) SGML (Standard Generalized Markup Language) i jest zgodny z międzynarodowym standardem ISOXHTML, a jednocześnie jest aplikacją XML.

Brytyjczyk Tim Berners-Lee około 1991-1992 w Europejskiej Radzie Badań Jądrowych w Genewie, Szwajcaria). HTML został stworzony jako język wymiany dokumentacji naukowej i technicznej, nadający się do użytku przez osoby nie będące specjalistami w dziedzinie layoutu. HTML z powodzeniem poradził sobie ze złożonością SGML poprzez zdefiniowanie małego zestawu deskryptorów strukturalnych i semantycznych. Deskryptory są również często określane jako „znaczniki”. OD używając HTML możesz łatwo stworzyć stosunkowo prosty, ale pięknie zaprojektowany dokument. Oprócz uproszczenia struktury dokumentu, do HTML dodano obsługę hipertekstu, a później dodano funkcje multimedialne. Początkowo język HTML został pomyślany i stworzony jako środek strukturyzowania i formatowania dokumentów bez przywiązywania się do środków powielania (wyświetlania). W idealnym przypadku tekst ze znacznikami HTML powinien być odtwarzany bez zniekształceń stylistycznych i strukturalnych na sprzęcie o różnym wyposażeniu technicznym (kolorowy ekran współczesnego komputera, monochromatyczny ekran organizera, ograniczony ekran telefonu komórkowego lub urządzenia oraz programy do odtwarzania głosu teksty). ale nowoczesna aplikacja HTML jest bardzo daleki od swojego pierwotnego przeznaczenia.

Z czasem podstawowa idea niezależności platformy od języka HTML została poświęcona w swoistym poświęceniu na rzecz współczesnych potrzeb w zakresie projektowania multimedialnego i graficznego.

Dokumenty tekstowe zawierające kod HTML (takie dokumenty tradycyjnie mają rozbudowa.html lub .htm), są przetwarzane przez specjalne Aplikacje, które wyświetlają dokument w jego sformatowanej formie. Aplikacje te, zwane „przeglądarkami” lub „przeglądarkami internetowymi”, zazwyczaj zapewniają użytkownikowi wygodną berło na prośbę sieć-strony, ich przeglądanie (i wyprowadzanie na inne urządzenia zewnętrzne) oraz, w razie potrzeby, przesyłanie wprowadzonych przez użytkownika danych na serwer. Najpopularniejsze obecnie przeglądarki to Internet ExplorerMozilla FirefoxsafariGoogle ChromeOpera.

1.2 Struktura pliku HTML

Aby stworzyć stronę WWW, musimy przede wszystkim stworzyć plik z rozszerzeniem "htm" lub "html" i otworzyć go do edycji w edytorze tekstów (pracując w Windows można skorzystać ze standardowego programu Notatnik).

Tekst do dokumentu HTML wpisuje się w takiej formie, w jakiej przeglądarka powinna go wyświetlać, a przy zaznaczaniu fragmentów, które mają być przeznaczone do adiustacji dokumentu (tagi) stosuje się nawiasy kątowe (znaki „”).

Każdy dokument HTML zaczyna się znacznikiem otwierającym i kończy odpowiadającym mu znacznikiem zamykającym. Znacznik zamykający różni się od znacznika otwierającego obecnością ukośnika przed nazwą znacznika. W języku HTML nie ma rozróżnienia między wielkimi i małymi literami podczas pisania znaczników, jednak zwyczajowo zapisuje się znacznik otwierający wielkimi literami, a zamykający małymi literami. Część dokumentu, która znajduje się między znacznikiem otwierającym a odpowiadającym mu znacznikiem zamykającym, nazywana jest kontenerem (zawierać - zawierać coś). Znaczniki, które mają opcje zamykania i otwierania rekordów są nazywane sparowanymi, a te, które są używane tylko w jednej formie (na przykład znacznik

) są nazywane niesparowanymi. Cały plik strony internetowej jest zasadniczo jednym dużym kontenerem HTML.

Wewnątrz kontenera HTML zapisane są kolejno dwa kontenery:

1. Tytuł dokumentu (). Wewnątrz tego kontenera zapisywane są parametry, które są wspólne dla całej strony. Na przykład możesz umieścić tutaj kontener, który pozwala umieścić tekst do wyświetlenia na pasku tytułu okna przeglądarki.

2. Treść dokumentu (). Ten kontener zawiera wszystko, co przeglądarka powinna pokazać w swoim oknie po otwarciu dokumentu. Jeśli dokument zawiera tylko tekst, to ten tekst należy wpisać tutaj, jeśli są inne elementy (grafika, tabele, linki itp.). Element BODY musi pojawić się w dokumencie co najwyżej raz.

Jeśli porównasz teksty źródłowe różnych stron internetowych, łatwo zauważysz podobieństwo ich struktury. Dzieje się tak, ponieważ dokumenty tworzone są według określonych zasad. Składnia języka HTML jest oparta na normie ISO 8879:1986 „Przetwarzanie informacji. Systemy tekstowe i biurowe. Standardowy uogólniony język znaczników (SGML)”. To prawda, że ​​istnieje duża różnica między oficjalnym standardem a rzeczywistym standardem.

Poniżej znajduje się szablon typowego dokumentu internetowego. Na jego przykładzie rozważymy ogólne zasady budowania stron HTML.

Aby zrozumieć strukturę strony internetowej, musimy szczegółowo przeanalizować wszystkie elementy zawarte w poniższym przykładzie.

oryginalny

treść dokumentu

Jeśli powyższy przykład zostanie wyjaśniony schematycznie, będzie wyglądać tak:

Z diagramu widać, że dokument składa się z dwóch głównych bloków - „nagłówka” i „treści dokumentu”. Nagłówek jest definiowany elementem HEAD, a treść jest definiowana elementem BODY.

Tytuł zawiera „techniczne” informacje o dokumencie, choć najczęściej używa się go jedynie do wskazania jego tytułu (patrz element TITLE).

Najważniejszą częścią jest treść dokumentu. To w nim znajduje się wszystko, co jest wyświetlane na stronie: tekst, zdjęcia, tabele.

Nagłówek tworzony jest za pomocą elementu HEAD, pomiędzy znacznikami których umieszczone są elementy zawierające informacje techniczne o dokumencie. Nagłówek jest zwykle umieszczany przed treścią dokumentu.

Elementy związane z nagłówkiem dokumentu:

HEAD - określa początek i koniec nagłówka dokumentu. Jest to kontener na elementy zawierające informacje techniczne o dokumencie.

TYTUŁ - określa nazwę całego dokumentu, która jest wyświetlana w tytule okna przeglądarki. Nazwa jest zwykle wyświetlana na pasku tytułu okna przeglądarki. Ten element jest wymagany dla każdego dokumentu HTML i może być określony nie więcej niż raz.

PODSTAWA — określa adres bazowy bieżącego dokumentu (URL), który będzie punktem wyjścia do obliczania adresów względnych w dokumencie. Element nie posiada znacznika końcowego. Co najmniej jeden z atrybutów musi być obecny.

1.3. Listy podstawowych tagów HTML

Lista podstawowych znaczników HTML wymaganych do utworzenia tekstu strony internetowej.

Możesz także łączyć różne style, takie jak pogrubienie i kursywa.

Dodatkowe style:

1.4. Tworzenie tabel wHTML.

Tabele w HTML są zorganizowane jako zestaw kolumn i wierszy. Komórki tabeli mogą zawierać dowolne elementy HTML, takie jak nagłówki, listy, akapity, kształty, grafika i elementy formularzy.

Podstawowe tagi tabeli

To są główne tagi opisujące tabelę. Wszystkie elementy tabeli muszą znajdować się wewnątrz tych dwóch tagów. Domyślnie tabela nie ma obramowań ani separatorów. Dodawane jest obramowanie z atrybutem BORDER.

Wiersz tabeli:

Liczba wierszy tabeli jest określona przez liczbę par tagów, które występują.

Komórka tabeli:

Opisuje standardową komórkę tabeli. Komórkę tabeli można opisać tylko w wierszu tabeli. Każda komórka musi być ponumerowana numerem kolumny, dla której jest opisana. Jeśli w wierszu brakuje jednej lub więcej komórek dla niektórych kolumn, przeglądarka wyświetla pustą komórkę. Domyślna lokalizacja danych w komórce jest określona przez atrybuty ALIGN=left i VALIGN=middle. To położenie można poprawić zarówno na poziomie opisu wiersza, jak i na poziomie opisu komórki.

Nagłówek tabeli:

Komórka nagłówka tabeli to szerokość całej tabeli; tekst w tej komórce ma atrybut BOLD i ALIGN=center.

Podpis: ...

Ten tag opisuje nazwę tabeli. Tag musi być obecny w środku

Podstawowe atrybuty tabeli

BORDER — ten atrybut jest używany w tagu TABLE. Jeśli ten atrybut jest obecny, obramowanie tabeli jest rysowane dla wszystkich komórek i tabeli jako całości. BORDER może przyjąć wartość liczbową określającą szerokość obramowania, na przykład BORDER=3.

ALIGN - Jeżeli atrybut ALIGN występuje wewnątrz znaczników i , to określa pozycję podpisu tabeli (góra lub dół). Wartość domyślna to ALIGN=góra.
Jeśli atrybut ALIGN występuje w ciągu

VALIGN — ten atrybut występuje w tagach

NOWRAP — ten atrybut wskazuje, że dane w komórce nie mogą być logicznie podzielone na wiele wierszy i muszą być reprezentowane przez jeden wiersz.

COLSPAN — wskazuje, ile komórek zostanie scalonych w poziomie dla określonej komórki. Wartość domyślna to 1.

ROWSPAN — wskazuje, ile komórek zostanie scalonych w pionie dla określonej komórki. Wartość domyślna to 1.

COLSPEC — Ten parametr umożliwia ustawienie stałej szerokości kolumny w znakach lub w procentach, na przykład COLSPEC="20%".

1.5. Linki hipertekstowe.

Łącza hipertekstowe są kluczowym elementem, który sprawia, że ​​sieć jest atrakcyjna dla użytkowników. Dodając linki hipertekstowe można stworzyć zestaw powiązanych i ustrukturyzowanych dokumentów, co pozwala użytkownikowi na szybkie i wygodne dotarcie do potrzebnych mu informacji.

Możesz także używać łączy do poruszania się po dokumencie i przechodzenia z jednego dokumentu do drugiego. Jednak HTML nie obsługuje powrotu do poprzedniego łącza, jeśli przeniesienie nastąpiło w dokumencie. Jeśli użyjesz łączy w dokumencie, a następnie naciśniesz klawisz Wstecz, nie przejdziesz do poprzedniego łącza, ale powrócisz do części dokumentu, którą oglądałeś wcześniej.

Poniższe tagi służą do tworzenia hiperłączy

2. Opis powstania strony „Łucznictwo”

Rysunek 1 przedstawia zeszyt, w którym powstała moja witryna łucznicza, a mianowicie oryginalna strona lub strona główna witryny.

Ustawiono kolor tła (szary), kolor czcionki (czarny, czerwony itp.), ryc. jeden; wielkość czcionki, hiperłącza do innych stron wykonano również u góry w formie tabeli:

w osobistym i

klasyfikacje drużynowe, drużyna kobiet i mężczyzn, od 1972 roku....

(rys. 3)

Rys. 4 przedstawia zeszyt, w którym wykonano 2 strony, a mianowicie „Źródło pochodzenia”, ustawiono również kolor tła, kolor czcionki, rozmiar czcionki (rys. 4), wykonano niezmienione hiperłącza w formie tabeli do innych strony:

(rys. 5)

a także w niezbędnych częściach tekstu:

Zeszyt w którym powstały 3 strony, czyli „Największe konkursy”

Zastosowano te same ustawienia kolorów i rozmiarów czcionek, co na poprzednich stronach, górna tabela z hiperłączami do innych stron również pozostała niezmieniona.

Rysunek 7 przedstawia zeszyt, w którym wykonano 4 strony, a mianowicie „Inwentarz”

Wszystkie ustawienia pozostały takie same jak na poprzednich stronach, dodano hiperłącza z nazwami tematów akapitów, po kliknięciu przechodzi się bezpośrednio do żądanej sekcji strony (rys. 7)

Rysunek 8 przedstawia notatnik, w którym została wykonana strona 5, a mianowicie „Zasady”; ustawienia pozostają bez zmian, dodano hiperłącza tego samego typu co na poprzedniej stronie

dobrze

Rysunek 9 pokazuje notatnik, w którym powstała strona 6, a mianowicie „Zwycięzcy Igrzysk Olimpijskich”, w którym zachowano wszystkie poprzednie ustawienia, ale dodano tabele z danymi.

Wniosek.

W trakcie tej pracy nauczyłem się tworzyć stronę internetową w języku HTML i wykorzystałem do tego niezbędne algorytmy, które zostały opisane w mojej pracy.

Do napisania projektu kursu wykorzystałam materiały z internetu i wykładów, dzięki nim zadania, które postawiłem przed pisaniem pracy, zostały zrealizowane.

Bibliografia:

1.http://html.find-info.ru/html/

2.http://scriptic.narod.ru/html/

3. http://html.manual.ru/book/html/

Wysyłanie dobrej pracy do bazy wiedzy jest proste. Skorzystaj z poniższego formularza

Studenci, doktoranci, młodzi naukowcy, którzy wykorzystują bazę wiedzy w swoich studiach i pracy będą Ci bardzo wdzięczni.

• • Wstęp
  • 1. Podstawowe informacje
  • 1.1 O języku html
  • 1.2 Tworzenie stron internetowych
  • 1.3 Podstawy
  • 1.4 Struktura dokumentu
  • 1.5 Tagi treści dokumentu
  • 1.6 Lista podstawowych tagów html
  • 2. Dodatkowe informacje
  • 2.1 Lista tagów
  • 2.2 Linki hipertekstowe
  • 2.3 Grafika w dokumencie
  • 2.4 Dodawanie stylów do dokumentu
  • 2.5 Specjalne tagi html
  • 2.6 Formularze HTML
  • Ramki 2.7 Html
  • Tabele 2.8 HTML
  • 2.9 Optymalizacja grafiki w Internecie
  • 2.10 Podstawy CSS
  • 3. Opis powstania strony
  • 3.1 Przygotowanie
  • 3.2 Tworzenie strony głównej
  • 3.3 Tworzenie drugiej strony
  • 3.4 Tworzenie strony z opisem miasta
  • 3.5 Strona ze zdjęciem
  • 3.6 Strona programu
  • 3.7 Strona z podziękowaniami
  • Wniosek
  • Lista wykorzystanej literatury

Wstęp

Praca ta poświęcona jest językowi HTML. Ten język tworzy pliki *.htm i *.html, które są stronami sieci Web. Tworzą je strony internetowe.

Do pracy dyplomowej dołączona jest strona internetowa, jako przykład tego, co można stworzyć za pomocą języka HTML.

Cała praca podzielona jest na 3 sekcje. Pierwsza sekcja jest w całości poświęcona opisowi podstawowych znaczników HTML. Znajdziesz w nim wszystkie niezbędne informacje na temat tworzenia prostych stron internetowych. Druga sekcja zawiera informacje o tym, jak poprawić wygląd dokumentu i osadzić dodatkowe funkcje. A trzecia sekcja zawiera opis, w jaki sposób strona jest dołączona do tego Praca dyplomowa. Opisuje szczegółowo półtora miesiąca ciężkiej pracy nad stworzeniem strony, opowiada o różnych błędach w tworzeniu i ich poprawianiu, o powstałych trudnościach i metodach ich eliminacji.

Po przeczytaniu tej pracy każdy, nawet zupełnie nieobeznany z programowaniem, będzie mógł zrozumieć podstawy programowania w HTML. A ci, którzy wiedzą, być może znajdą dla siebie coś nowego.

1. Podstawowe informacje

1.1 OjęzykHTML

Hyper Text Markup Language (HTML) to standardowy język do tworzenia dokumentów hipertekstowych w środowisku WEB. Można przeglądać dokumenty HTML różne rodzaje przeglądarki internetowe. Kiedy dokument został utworzony za pomocą używając HTML, przeglądarka internetowa może interpretować HTML, aby wyodrębnić różne elementy dokumentu i najpierw je przetworzyć. Korzystanie z HTML umożliwia formatowanie dokumentów do prezentacji przy użyciu czcionek, linii i innych elementów graficznych w dowolnym systemie, który je wyświetla.

Większość dokumentów zawiera standardowe elementy, takie jak nagłówki, akapity lub listy. Używając znaczników HTML, możesz wyznaczyć te elementy, dostarczając przeglądarkom WWW minimum informacji do wyświetlenia tych elementów, zachowując ogólną ogólna struktura oraz kompletność informacyjna dokumentów. Do odczytania dokumentu HTML wystarczy przeglądarka internetowa, która interpretuje znaczniki HTML i wyświetla dokument na ekranie w formie, jaką nadał jej autor.

W większości przypadków autor dokumentu ściśle określa wygląd dokumentu. W przypadku HTML czytnik w oparciu o możliwości przeglądarki internetowej może w pewnym stopniu kontrolować wygląd dokumentu (ale nie jego zawartość). HTML pozwala zaznaczyć, gdzie w dokumencie powinien znajdować się nagłówek lub akapit za pomocą znacznika HTML, a następnie pozwolić przeglądarce internetowej zinterpretować te znaczniki. Na przykład jedna przeglądarka internetowa może rozpoznać znacznik początku akapitu i przedstawić dokument w pożądana forma, podczas gdy druga nie ma tej możliwości i przedstawia dokument w jednym wierszu. Użytkownicy niektórych przeglądarek internetowych mają również możliwość dostosowania rozmiaru i typu czcionki, koloru i innych parametrów, które mają wpływ na wyświetlanie dokumentu.

Tagi HTML można z grubsza podzielić na dwie kategorie:

1. Tagi określające sposób wyświetlania treści dokumentu jako całości przez przeglądarkę internetową.

2. Tagi opisujące ogólne właściwości dokumentu, takie jak tytuł lub autor dokumentu.

Pamiętaj, że główną zaletą HTML jest to, że Twój dokument może być przeglądany na wielu różnych typach przeglądarek i platform internetowych.

1.2 kreacjasiećteren

Dokumenty HTML można tworzyć za pomocą dowolnego edytora tekstu lub specjalistycznych edytorów i konwerterów HTML. Wybór edytora, który posłuży do tworzenia dokumentów HTML, zależy wyłącznie od koncepcji wygody i osobistych preferencji każdego autora.

Na przykład edytory HTML, takie jak Netscape Navigator Gold, umożliwiają graficzne tworzenie dokumentów przy użyciu technologii WYSIWYG (What You See Is What You Get). Z drugiej strony większość tradycyjnych narzędzi do tworzenia dokumentów ma konwertery, które umożliwiają konwersję dokumentów do formatu HTML.

1.3 Głównyzaprowiantowanie

Wszystkie tagi HTML zaczynają się od „<" (левой угловой скобки) и заканчиваются символом ">" (prawy nawias ostry). Zazwyczaj jest tag początkowy i tag końcowy. Na przykład oto tagi head, które definiują tekst wewnątrz tagu początkowego i końcowego oraz opisują tytuł dokumentu:

Znacznik końcowy wygląda tak samo jak znacznik początkowy i różni się od niego ukośnikiem poprzedzającym tekst w nawiasach ostrych. W tym przykładzie tag - o uzupełnieniu tekstu tytułowego.

Niektóre tagi, takie jak

(znacznik definiujący akapit) nie wymaga znacznika końcowego, ale jego użycie zapewnia tekstowi źródłowemu lepszą czytelność i strukturę.

W HTML nie jest rozróżniana wielkość liter w przypadku znaków opisujących tag, a powyższy przykład może wyglądać tak:

Uwaga! Dodatkowe spacje, tabulatory i znaki powrotu karetki dodane do tekstu źródłowego dokumentu HTML, aby uczynić go bardziej czytelnym, zostaną zignorowane przez przeglądarkę internetową podczas interpretacji dokumentu. Dokument HTML może zawierać powyższe elementy tylko wtedy, gdy są one umieszczone wewnątrz znaczników.

ORAZ

Zostanie napisane poniżej.

1.4
Strukturadokument
Kiedy przeglądarka internetowa otrzymuje dokument, określa, jak należy go interpretować.  Pierwszy tag występujący w dokumencie musi być tagiem .  Ten tag informuje przeglądarkę internetową, że dokument jest napisany w języku HTML.  Minimalny dokument HTML wyglądałby tak:
Treść dokumentu...
Nagłówek dokumentu .  Znacznik nagłówka dokumentu musi być użyty bezpośrednio po znaczniku i nigdzie indziej w treści dokumentu.  Ten tag to ogólny opis dokumentu.  Unikaj umieszczania tekstu wewnątrz tagu .  Początek tagu umieszczony bezpośrednio przed tagiem 
Uwaga!  Technicznie, tagi typu start i end , I są opcjonalne.  Jednak zdecydowanie zaleca się ich użycie, ponieważ użycie tych znaczników pozwala przeglądarce WWW pewnie oddzielić nagłówek dokumentu od samej części semantycznej.
Tytuł dokumentu , znajduje się w środku -tags, jak pokazano w powyższym przykładzie.  Tytuł dokumentu nie pojawia się, gdy sam dokument jest wyświetlany w oknie.
Uwagi.  Jak każdy język, HTML umożliwia wstawianie komentarzy do treści dokumentu, które są zachowywane, gdy dokument jest przesyłany przez sieć, ale nie są wyświetlane przez przeglądarkę.  Składnia komentarza:

Komentarze mogą pojawiać się w dowolnym miejscu dokumentu iw dowolnej liczbie.
1.5
Tagiciałodokument

Tagi treści dokumentu identyfikują składniki dokumentu HTML, które są wyświetlane w oknie.  Treść dokumentu może zawierać łącza do innych dokumentów, tekstu i innych sformatowanych informacji.
Treść dokumentu .  Treść dokumentu musi znajdować się między tagami I.  Jest to część dokumentu, która jest wyświetlana jako tekstowa i graficzna (semantyczna) informacja o dokumencie.
Poziomy nagłówków .  Podczas pisania dokumentu HTML tekst jest strukturalnie podzielony na zwykły tekst, nagłówki części tekstu, nagłówki wyższego poziomu i tak dalej.  Pierwszy poziom nagłówków (największy) jest oznaczony przez 1, następny przez 2 i tak dalej.  Większość przeglądarek obsługuje interpretację sześciu poziomów nagłówków, nadając każdemu nagłówkowi własny styl.  Nagłówki powyżej szóstego poziomu nie są standardowe i mogą nie być obsługiwane przez przeglądarkę.  Nagłówek najwyższego poziomu ma znak „1”.  Składnia nagłówka poziomu 1 jest następująca:
Nagłówek pierwszego poziomu
Nagłówki innego poziomu można w ogólnym przypadku przedstawić w następujący sposób:
Nagłówek x-ty poziom
gdzie x to liczba od 1 do 6, która określa poziom nagłówka.
tag akapitu 
w przeciwieństwie do większości edytory tekstu, znaki powrotu karetki są zwykle ignorowane w dokumencie HTML.  Fizyczny podział akapitu może znajdować się w dowolnym miejscu w tekście źródłowym dokumentu (dla większej czytelności).  Jednak przeglądarka dzieli akapity tylko wtedy, gdy istnieje tag 
Jeśli nie oddzielasz akapitów tagiem 
Twój dokument będzie wyglądał jak jeden duży akapit.
Dodatkowe parametry tagów 
Umożliwiają wyrównanie akapitu odpowiednio do lewej, do środka i do prawej.
Centrowanie elementów dokumentu.  Wszystkie elementy dokumentu można wyśrodkować w oknie przeglądarki.  Możesz do tego użyć tagu. 
.

Wszystkie elementy pomiędzy tagami 
I będzie na środku okna.

tag szablonu 
znacznik wzorca, 
Umożliwia prezentację tekstu z określonym formatowaniem na ekranie.  Wstępnie sformatowany tekst kończy się znacznikiem końcowym
.  Wewnątrz wstępnie sformatowanego tekstu możesz użyć:

a) wysuw linii
b) znaki tabulacji (przesuń 8 znaków w prawo)
c) nieproporcjonalna czcionka ustawiona przez przeglądarkę.
Korzystanie ze znaczników definiujących format akapitu, takich jak lub 
, zostanie zignorowana przez przeglądarkę po umieszczeniu między tagami 

  


Ta lista zawiera nazwiska, imiona i patronimiki.
wszystkich pracowników naszej firmy. 





Lista może być wykorzystywana wyłącznie do celów urzędowych.
Uwaga!  Nagłówek „Lista pracowników” nie jest wyświetlany przez przeglądarkę jako część dokumentu.  Pojawi się na pasku tytułu okna przeglądarki.
Przerwanie linii 
.  Etykietka 
powiadamia przeglądarkę o przerwaniu wiersza.  Najlepszym przykładem użycia tego tagu jest sformatowany adres lub inna sekwencja wierszy, w których przeglądarka musi wyświetlać je jeden pod drugim.  Na przykład:
Aleksiej Jarcew 
autostrada Dymitrowa, 
9B, biuro 326 

Dodatkowy parametr pozwala rozszerzyć możliwości tagu 
.


Ten parametr pozwala nie tylko na wykonanie wysuwu wiersza, ale także na umieszczenie następnego wiersza, zaczynając od czystej lewej (lewej), prawej (prawej) lub obu (wszystkich) krawędzi okna przeglądarki.  Na przykład, jeśli obok tekstu po lewej stronie znajduje się obrazek, możesz użyć tagu 
aby przesunąć tekst pod obrazem:
Jak widać, ten schemat pokazuje połączenie 
 Mistrz/Szczegóły
.

Linia niełamliwa .  Jeśli nie chcesz, aby przeglądarka automatycznie zawijała linię, możesz ją oznaczyć I.  W takim przypadku przeglądarka nie zawinie linii, nawet jeśli zniknie z ekranu;  zamiast tego przeglądarka pozwoli na przewijanie okna w poziomie.  Na przykład: co nie pozwala nigdzie się dzielić
Jeśli nadal chcesz, aby ta linia została podzielona na dwie, ale w ściśle zaplanowanym miejscu, wstaw tag do tego miejsca.  Na przykład: Ta linia jest najdłuższą linią w dokumencie. co nie pozwala nigdzie się dzielić
Ta linia jest najdłuższą linią w dokumencie.
który nie dopuszcza nigdzie żadnej partycji.
Cytat 
.  Ten znacznik ma na celu wskazanie w dokumencie cytatu z innego źródła.  Tekst oznaczony tagiem 
, wcięcie od lewej krawędzi dokumentu o 8 spacji.  Na przykład: Na otwarciu tej konferencji szef misji powiedział: 
 
Dzisiaj jest jeden z najwspanialszych dni dla naszej firmy. 
Odkryliśmy nową technologię, która umożliwia naszym klientom kilkukrotne zwiększenie wydajności ich systemów stacjonarnych.

Po wyświetleniu przez przeglądarkę ten tekst będzie wyglądał tak:
Na otwarciu tej konferencji szef misji powiedział:
Dzisiaj jest jeden z najwspanialszych dni dla naszej firmy.  Odkryliśmy nową technologię, która umożliwia naszym klientom kilkukrotne zwiększenie wydajności ich systemów stacjonarnych.

1.6
ListapodstawowytagiHTML

Tabela 1: Główne tagi

Startowy


finał


Opis








Oznaczenie dokumentu HTML








Nagłówek dokumentu








Tytuł dokumentu








Treść dokumentu








Nagłówek akapitu pierwszego poziomu








Nagłówek akapitu drugiego poziomu








Nagłówek akapitu trzeciego poziomu








Nagłówek akapitu czwartego poziomu








Nagłówek akapitu poziomu 5








Nagłówek akapitu poziomu 6
















Sformatowany tekst








Łamanie wiersza bez końca akapitu











Opisane wcześniej tagi to wszystko, czego potrzebujesz, aby zacząć korzystać z HTML.
Za pomocą opisanych tagów możesz stworzyć prosty dokument HTML.  Jednak kolejne sekcje pozwolą Ci znacznie poprawić wygląd Twoich dokumentów i opisać nowe funkcje HTML.
2. Dodatkowe informacje

2.1
Tagilisty


W dokumencie HTML istnieją trzy główne typy list:
a) ponumerowane
b) nienumerowane
c) spis opisów
Listy zagnieżdżone można tworzyć, używając różnych znaczników list lub powtarzając jeden w drugim.  Aby to zrobić, wystarczy umieścić jedną parę tagów (początek i koniec) w drugiej.  To, czy zagnieżdżone elementy listy będą miały te same punktory, które reprezentują element listy, zależy od przeglądarki.  Zobacz sekcję „Listy zagnieżdżone”, aby uzyskać więcej informacji.
Listy numerowane.  Na liście numerowanej przeglądarka automatycznie wstawia numery elementów w kolejności.  Oznacza to, że jeśli usuniesz jeden lub więcej elementów z listy numerowanej, pozostałe liczby zostaną automatycznie przeliczone.
 
i kończy się tagiem
 
.  Na przykład:

 
Programowanie 
Algorytmizacja 
Projekt

1. Programowanie
2. Algorytmizacja
3. Projekt
Etykietka 
może mieć opcje:


Typ licznika:
A - duże litery łacińskie (A,B,C...)
a - małe litery łacińskie (a,b,c...)
I - duże cyfry rzymskie (I,II,III...)
i - małe cyfry rzymskie (i,ii,iii...)
1 - cyfry regularne (1,2,3...)
Numer, od którego zaczyna się liczenie
Na przykład:
 
Programowanie 
Algorytmizacja 
Projekt

XV.  Programowanie
XVI.  Algorytmizacja
XVII.  Projekt.
Listy nienumerowane.  W przypadku list nieuporządkowanych przeglądarka zwykle używa znaczników do oznaczenia elementu listy.  Wygląd znacznika z reguły konfiguruje użytkownik przeglądarki.
Lista numerowana zaczyna się od znacznika początkowego 
i kończy się tagiem
.  Każdy element listy zaczyna się od tagu 
.  Na przykład:

 
Programowanie 
Algorytmizacja 
Projekt

· Programowanie
Algorytmizacja
· Projekt
Etykietka 
może mieć parametr:


Typ tagu 
definiuje wygląd znacznika jako domyślny (dysk), okrągły (koło) lub kwadratowy (kwadrat).  Na przykład:

 
Programowanie 
Algorytmizacja 
Projekt

§ Programowanie
§ Algorytmizacja
§ Projekt
listy zagnieżdżone.  Podajmy przykład list zagnieżdżonych:
     
Lista pracowników naszej firmy
 
Opracowano: 30 lipca 1996 r.
Lista ta zawiera nazwiska, imiona i patronimikę wszystkich pracowników naszej firmy. 
Lista może być wykorzystywana wyłącznie do celów urzędowych. 
 
 
Dyrektoriat 
 
Iwanow I.I. 
Pietrow K.W.
 
Dział marketingu 
 
Varshavskaya E.L. 
Samsonow D.M.
 
  

Oto, co zobaczysz na ekranie przeglądarki:
Lista pracowników naszej firmy

Lista ta zawiera nazwiska, imiona i patronimikę wszystkich pracowników naszej firmy.
Lista może być wykorzystywana wyłącznie do celów urzędowych.
1. Dyrekcja
o Iwanow I.I.
o Petrov K.V.
2. Dział marketingu
o Varshavskaya E.L.
o Samsonov D.M.
Element listy 
.

Etykietka 
może mieć opcje:

lub 

w zależności od rodzaju listy, na której znajduje się przedmiot.
Rodzaj znacznika (patrz 
) lub licznik (patrz OL)

Wartość dla numerowanego elementu listy (jego numer).  Wszystkie dalsze numery elementów listy będą liczone od tej liczby.
Na przykład:
 
Programowanie 
Algorytmizacja 
Projekt

XV.  Programowanie
XVI.  Algorytmizacja
XVII.  Projekt
Lista definicji.
Lista definicji zaczyna się od tagu 
i kończy się tagiem
.  Lista ta służy do tworzenia list typu „termin” - „opis”.  Każdy termin zaczyna się od tagu 
, a opis to tag 
.  Na przykład:

 
 Dział marketingu 
  
 Dział finansowy 
  
 Dział Personalny 
  

Wydziałmarketing
Dział ten zajmuje się promocją produktów i usług.
BudżetowyWydział
Ten dział obsługuje wszystkie transakcje finansowe.
Wydziałpersonel
Dział ten zajmuje się księgowością i rekrutacją nowych pracowników firmy, dystrybucją urlopów, śledzeniem zwolnień lekarskich itp.

Linki hipertekstowe są kluczowym elementem, który sprawia, że ​​sieć jest atrakcyjna dla użytkowników.  Dodając linki hipertekstowe (zwane dalej linkami) tworzysz zestaw powiązanych i ustrukturyzowanych dokumentów, które pozwalają użytkownikowi na jak najszybsze i najwygodniejsze otrzymywanie potrzebnych mu informacji.
Łącza mają standardowy format, co pozwala przeglądarce na ich interpretację i wykonanie niezbędnych funkcji (metod wywołania) w zależności od typu łącza.  Łącza mogą wskazywać na inny dokument, konkretną lokalizację w danym dokumencie lub wykonywać inne funkcje, takie jak żądanie pliku przez FTP w celu wyświetlenia przez przeglądarkę.  Adres URL może wskazywać określoną lokalizację w ścieżce bezwzględnej lub wskazywać dokument w bieżącej ścieżce, co jest często używane podczas organizowania dużych witryn sieci Web o określonej strukturze.
Uwaga!  Możesz używać łączy zarówno do poruszania się po dokumencie, jak i do przechodzenia z jednego dokumentu do drugiego.  Jednak HTML nie obsługuje powrotu do poprzedniego łącza, jeśli przeniesienie nastąpiło w dokumencie.  Jeśli użyjesz łączy w dokumencie, a następnie naciśniesz klawisz Wstecz, nie przejdziesz do poprzedniego łącza, ale powrócisz do części dokumentu, którą oglądałeś wcześniej.
URL.  HTML używa adresu URL (Uniform Resource Locator) do reprezentowania łączy hipertekstowych i łączy do usług internetowych w dokumencie HTML.  Pierwsza część adresu URL (przed dwukropkiem) opisuje metodę dostępu lub usługę sieciową.  Druga część adresu URL (po dwukropku) jest interpretowana w zależności od metody dostępu.  Zwykle dwa ukośniki po dwukropku wskazują nazwę maszyny:
metoda://nazwa-urządzenia/ścieżka/foo.html
Poniższy przykład to wywołanie dokumentu HTML index.html z serwera www.softexpress.com przy użyciu protokołu HTTP:
http://www.softexpress.com/index.html
Uniform Resource Locator ma następujący format:
metoda://nazwa_serwera:port/ścieżka#kotwica
Opiszmy każdy ze składników adresu URL:
METODA.  Nazwa operacji do wykonania podczas interpretacji podanego adresu URL.  Najczęściej stosowane metody to:
odczytywanie pliku z dysku lokalnego.  Nazwa pliku jest interpretowana dla lokalnego komputera użytkownika.  Ta metoda służy do wyświetlania dowolnego pliku znajdującego się na komputerze użytkownika.  Na przykład: file:/home/alex/index.html - wyświetla plik index.html z katalogu /home/alex na komputerze użytkownika
dostęp do strony WWW w sieci za pomocą protokołu HTTP.  (Jest to najczęściej używana metoda uzyskiwania dostępu do dowolnego dokumentu HTML w Internecie.)  Na przykład: http://www.softexpress.com/ - dostęp do strony głównej SoftExpress
żądanie pliku z anonimowego serwera FTP.  Na przykład: ftp://nazwahosta/katalog/nazwapliku
aktywuje sesję pocztową z określonym użytkownikiem i hostem.  Na przykład: mailto: [e-mail chroniony]- aktywuje sesję wysyłania wiadomości do użytkownika info na komputerze softexpress.com, jeśli przeglądarka obsługuje pocztę e-mail.  Zwróć uwagę, że metoda mailto: nie wymaga ukośników po dwukropku (z reguły adres e-mail subskrybenta następuje bezpośrednio po dwukropku)
zadzwoń do usługi telnet
wywołanie serwisu informacyjnego, jeśli przeglądarka go obsługuje.  Na przykład: news:relcom.www.support
NAZWA SERWERA.  Opcjonalny parametr opisujący w pełni kwalifikowaną nazwę sieciową urządzenia.  Na przykład: www.softexpress.com — pełna nazwa sieciowa serwera SoftService.
Jeśli nazwa serwera nie jest określona, ​​odsyłacz jest uważany za lokalny, a pełna ścieżka określona dalej w adresie URL jest obliczana na komputerze, z którego pobierany jest dokument HTML zawierający ten odsyłacz.  Zamiast symbolicznej nazwy maszyny można użyć adresu IP, ale nie jest to zalecane ze względu na możliwość nakładania się na stałe adresy lokalne w sieci wewnętrznej.
PORT.  Numer portu TCP, na którym działa serwer WEB.  Jeśli port nie jest określony, „domyślnym” portem jest 80. Ten parametr (port) nie jest używany w zdecydowanej większości adresów URL.
NAZWA ŚCIEŻKI.  Częściowa lub pełna ścieżka do dokumentu, który ma zostać wywołany w wyniku interpretacji adresu URL.  Różne serwery WEB są różnie konfigurowane w celu interpretacji ścieżki do dokumentu.  Na przykład podczas korzystania ze skryptów CGI (programów wykonywalnych) są one zwykle gromadzone w jednym lub kilku dedykowanych katalogach, do których ścieżka jest zapisana w specjalnych parametrach serwera WEB.  Dla tych katalogów serwer WEB przydziela specjalną ścieżkę logiczną, która jest używana w adresie URL.  Jeśli serwer WEB widzi tę ścieżkę, żądany plik jest interpretowany jako moduł wykonywalny.  W przeciwnym razie żądany plik jest interpretowany po prostu jako plik danych, nawet jeśli jest to plik wykonywalny.  Na przykład: http://www.softexpress.com/cgi-win/handle.exe
W tym przykładzie serwer HTTP powinien wywołać skrypt CGI o nazwie handle.exe, który znajduje się na komputerze o nazwie sieciowej www.softexpress.com.  Ścieżka do tego skryptu - /cgi-win/ - jest w rzeczywistości ścieżką wirtualną (przeznaczoną przez serwer dla modułów wykonywalnych).  Zauważ, że opis ścieżki używa składni podobnej do UNIX, w której, w przeciwieństwie do DOS i Windows, ukośniki są używane zamiast ukośników odwrotnych.  Jeżeli po nazwie sieciowej maszyny następuje natychmiast nazwa dokumentu, to musi on znajdować się w katalogu głównym na zdalnym komputerze lub (częściej) w katalogu przydzielonym przez serwer WEB jako katalog główny.  Jeżeli adres URL kończy się nazwą sieciową komputera, wówczas dokument jest pobierany z katalogu głównego zdalnego komputera o nazwie określonej w ustawieniach serwera WEB (z reguły jest to index.html).
#KOTWICA.  Ten element jest łączem do ciągu (punktu) w dokumencie HTML.  Większość przeglądarek, napotykając ten element po nazwie dokumentu, umieszcza dokument na ekranie w taki sposób, aby określona linia dokumentu znajdowała się w górnej linii okna roboczego przeglądarki.  Kotwice, do których odwołuje się #anchor, są określone w dokumencie przy użyciu tagu NAME, jak opisano poniżej.
Struktura linków w dokumencie HTML.  Do tej pory przyglądaliśmy się tylko wyglądowi adresu URL.  Aby przeglądarka wyświetlała link do adresu URL, konieczne jest oznaczenie adresu URL specjalnymi znacznikami w dokumencie HTML.  Składnia HTML do tego jest następująca:
tekst-do-podświetlenia-jako-link
Znacznik otwiera opis łącza, a znacznik zamyka go.  Każdy tekst pomiędzy tymi dwoma znacznikami jest podświetlany w specjalny sposób przez przeglądarkę internetową.  Zazwyczaj ten tekst jest podkreślony i wyróżniony na niebiesko (lub innym określonym przez użytkownika) kolorze.  Tekst oznaczający adres URL nie jest wyświetlany przez przeglądarkę, ale służy wyłącznie do wykonywania zamierzonych działań, gdy łącze jest aktywowane (zwykle gdy myszą kliknie podświetlony lub podkreślony tekst).  Oto przykład segmentu dokumentu HTML:
Na przykład zobacz Tekst-do-wyświetlenia-w-pierwszym-wierszu-przeglądarki

Tekst
Na przykład:
Lista sekcji
 
 
Sekcja 1
 
Sekcja 2
 
 
Sekcja 1
 
 
Tekst sekcji 1
 
 
Sekcja 2
 
 
Tekst sekcji 2 

Lista sekcji
o Sekcja 1
o Sekcja 2
Tekst sekcji 1
Tekst sekcji 2
Znaki „#ex1” informują przeglądarkę, aby szukała znacznika o nazwie „ex1” w danym dokumencie HTML.
Gdy użytkownik kliknie wiersz „Sekcja 1”, przeglądarka przejdzie bezpośrednio do sekcji 1.
Uwaga!  Jak wcześniej pokazano w składni adresu URL, znacznik sekcji można umieścić w tym samym dokumencie, który jest aktualnie przeglądany, lub w innym dokumencie.  W drugim przypadku przeglądarka załaduje kolejny dokument i przejdzie do określonej dla niego sekcji.
2.3
Grafikaw środkudokument
Jedną z najbardziej atrakcyjnych funkcji sieci Web jest możliwość umieszczania w dokumencie HTML łączy do grafiki i innych typów danych.  Odbywa się to za pomocą tagu .  Użycie tego tagu może znacząco poprawić wygląd i funkcjonalność dokumentów.
Istnieją dwa sposoby wykorzystania grafiki w dokumentach HTML.  Pierwszym z nich jest osadzenie grafiki w dokumencie, co pozwala użytkownikowi zobaczyć obrazy bezpośrednio w kontekście innych elementów dokumentu.  Jest to najczęściej używana technika w projektowaniu dokumentów, czasami określana jako „obraz w wierszu”.  Składnia tagu:

Opiszmy elementy składni tagów:
Wymagany parametr, który ma taką samą składnię jak standardowy adres URL.  Ten adres URL informuje przeglądarkę, gdzie znajduje się obraz.  Zdjęcie musi być zapisane w formacie graficznym obsługiwanym przez przeglądarkę.  Obecnie większość przeglądarek obsługuje formaty GIF i JPG.
Ten opcjonalny element określa tekst, który ma być wyświetlany przez przeglądarkę, która nie obsługuje grafiki lub ma wyłączone stronicowanie obrazów.  Zazwyczaj jest to krótki opis obrazu, który użytkownik widziałby lub mógłby zobaczyć na ekranie.  Jeśli nie ma tego parametru, to w miejscu obrazka większość przeglądarek wyświetla piktogram (ikonę), po aktywacji którego użytkownik może zobaczyć obraz.  Znacznik ALT jest zalecany, jeśli użytkownicy używają przeglądarki, która nie obsługuje trybu graficznego, takiej jak Lynx.
Ten opcjonalny parametr służy do określenia wysokości obrazu w pikselach.  Jeśli ten parametr nie jest określony, używana jest oryginalna wysokość obrazu.  Ta opcja pozwala zmniejszać lub rozciągać obrazy w pionie, co pozwala wyraźniej zdefiniować wygląd dokumentu.  Jednak niektóre przeglądarki nie obsługują tej opcji.  Z drugiej strony rozdzielczość ekranu twojego klienta może różnić się od twojej, więc zachowaj ostrożność przy ustawianiu bezwzględnej wartości grafiki.
Parametr jest również opcjonalny, podobnie jak poprzedni.  Umożliwia ustawienie bezwzględnej szerokości obrazu w pikselach.
Ten parametr służy do informowania przeglądarki, gdzie umieścić następny blok tekstu.  Pozwala to dokładniej określić położenie elementów na ekranie.  Jeśli ta opcja nie jest używana, większość przeglądarek umieszcza obraz po lewej stronie ekranu, a tekst po jego prawej stronie.
Ten parametr informuje przeglądarkę, że ten obraz umożliwia użytkownikowi wykonanie pewnych czynności poprzez kliknięcie określonej lokalizacji na obrazie.  Ta funkcja jest rozszerzeniem HTML i zostanie omówiona później.
Oto przykład użycia tego tagu:

Od wersji HTML 2.0 tag ma: dodano dodatkowe opcje:

Nowe opcje:

Umożliwia ustawienie rozmiaru w pikselach pustej przestrzeni nad i pod obrazem, tak aby tekst nie nachodził na obraz.  Jest to szczególnie ważne w przypadku obrazów generowanych dynamicznie, gdy niemożliwe jest wcześniejsze obejrzenie dokumentu.
To samo co VSPACE, ale tylko poziomo.
Zdjęcia w tle.  Większość przeglądarek umożliwia dołączenie obrazu tła do dokumentu, który będzie macierzowy i wyświetlany przed całym dokumentem.  Niektórzy użytkownicy lubią grafiki w tle, inni nie.  Nie rzucający się w oczy półprzezroczysty obraz (tapeta) zwykle dobrze wygląda jako tło dla większości dokumentów.
Opis obrazu tła jest zawarty w tagu BODY i wygląda tak:
.


gdzie każdy z parametrów określa kolor jednego lub drugiego elementu.  Opiszmy te parametry:
Kolor tła dokumentu
Kolor zwykłego tekstu dokumentu


Ta linia definiuje biały kolor tło dokumentu, czarny tekst i srebrne linki.
Linia pozioma.  Korzystanie z tagu 
, możesz oddzielić tekst poziomym paskiem.

Format tagu:
liczba|procent ALIGN=lewo|prawo|środek NOSHADE>

Opcje tagów:
Grubość linii w pikselach.
Szerokość linii w pikselach lub jako procent szerokości okna przeglądarki.
Lokalizacja ekranu (po lewej | pośrodku | po prawej).
Domyślnie linia jest renderowana w 3D z cieniem.  NOSHADE pozwala przedstawić linię jako zwykły ciemny pasek.
2.4
Uzupełnieniestylewdokument
HTML umożliwia używanie różnych stylów czcionek do wyróżniania informacji tekstowych w dokumentach.  Oto krótka lista stylów obsługiwanych przez większość przeglądarek:
pogrubiony (pogrubiony)
kursywa (ukośny)
z odstępami mono (wpisz - przy użyciu stałych czcionek)
Możesz łączyć różne style, takie jak pogrubienie i kursywa.
Tabela #2: Podstawowe style tekstu
Łączenie stylów umożliwia wyświetlanie wielu elementów w tym samym wierszu z różnymi stylami, na przykład:
Życie - ten piosenka!
Życie - ten
piosenka!

Uwaga: dodanie dużej ilości stylów i ich kombinacji utrudnia czytanie tekstu!
Dodatkowe style:
duży duży)
mały (mały)
dolny (indeks dolny)
sup (indeks górny)
Tabela #3: Dodatkowe style tekstu
Rozmiar czcionki .  Możesz zmienić rozmiar czcionki za pomocą tagu:


Rozmiar czcionki może wynosić od 1 do 7. Można bezpośrednio określić rozmiar czcionki jako liczbę lub określić przesunięcie od wartości bazowej (domyślnie 3) w kierunku dodatnim lub ujemnym.  Wartość bazową można zmienić za pomocą tagu:

Na przykład:
I hm min min I mi

reszta
Kolor czcionki .  Możesz zmienić kolor czcionki za pomocą tagu:

czerwony Zielony Niebieski
Czerwony Zielony Niebieski
2.5
SpecjalnytagiHTML

Poniższe tagi pozwolą Ci zwiększyć funkcjonalność dokumentu HTML.
Znacznik adresu 
.  Etykietka 
służy do wyróżnienia autora dokumentu i jego adresu (na przykład e-mail).  Składnia:


Sekwencje ewakuacyjne.  Niektóre znaki są znakami kontrolnymi w HTML i nie mogą być używane bezpośrednio w dokumencie:
1) lewy nawias kątowy "<"
2) wspornik kątowy ">"
3) ampersand „&”
4) podwójne cudzysłowy „””
Aby użyć tych znaków w dokumencie, musisz zastąpić je sekwencjami specjalnymi:
Tabela #4: Sekwencje ucieczki
Istnieje wiele sekwencji specjalnych dla znaków specjalnych, takich jak „ ” dla znaku © i ® dla ikony ®, wprowadzonych w HTML 2.0.  Jedną z cech jest zamiana znaków w drugiej części tabeli znaków (po 127. znaku) na sekwencje specjalne do przesyłania plików tekstowych z językami narodowymi kanałami 7-bitowymi.
Uwaga: w sekwencjach ucieczki rozróżniana jest wielkość liter: NIE MOŻNA używać zamiast<.
2.6
HTMLFormularze

Niektóre przeglądarki WWW pozwalają użytkownikowi wypełnić specjalny formularz, który zwraca wartość i wykonać jakąś akcję na serwerze WWW.  Gdy formularz jest interpretowany przez przeglądarkę internetową, tworzone są specjalne elementy ekranu GUI, takie jak pola wejściowe, pola wyboru, przyciski radiowe, menu rozwijane, listy przewijane, przyciski i tak dalej.  Po wypełnieniu formularza przez użytkownika i kliknięciu przycisku „Wyślij” (WYŚLIJ to specjalny rodzaj przycisku, który określany jest przy opisie dokumentu), informacje wprowadzone przez użytkownika w formularzu są przesyłane do serwera HTTP w celu przetworzenia i przesłania do innych programów działających w ramach serwera, zgodnie z interfejsem CGI (Common Gateway Interface).
Kiedy opisujesz formularz, każdy element wejściowy ma znacznik .  Gdy użytkownik umieszcza dane w elemencie formularza, informacje są umieszczane w sekcji WARTOŚĆ elementu.
Składnia.  Wszystkie formularze zaczynają się od tagu 
i zakończ z tagiem
.

Form_elements_and_other_HTML_elements.

METODA.  Sposób wysłania wiadomości z danymi z formularza.  W zależności od używanej metody możesz przesłać wyniki swoich danych do formularza na dwa sposoby:
POBIERZ: Informacje z formularza są dodawane na końcu adresu URL, który został określony w opisie nagłówka formularza.  Twój program CGI (skrypt CGI) otrzymuje dane z formularza jako parametr zmiennej środowiskowej QUERY_STRING.  Stosowanie metody GET nie jest zalecane.
POST: Ta metoda przesyła wszystkie informacje o formularzu natychmiast po uzyskaniu dostępu do określonego adresu URL.  Twój program CGI otrzymuje dane wejściowe z formularza na standardowe wejście.  Serwer nie wyśle ​​Ci wiadomości o zakończeniu przesyłania danych do standardowego strumienia wejściowego;  zamiast tego zmienna środowiskowa CONTENT_LENGTH służy do określania, ile danych chcesz odczytać ze standardowego wejścia.  Ta metoda jest zalecana do użycia.
ACTION: ACTION opisuje adres URL, który zostanie wywołany w celu przetworzenia formularza.  Ten adres URL prawie zawsze wskazuje na program CGI przetwarzający dany formularz.
Tagi formularzy:
Etykietka służy do umożliwienia użytkownikowi wprowadzenia więcej niż jednego wiersza informacji (dowolny tekst).  Oto przykład użycia tagu <TEXTAREA>:</p>
<p><TEXTAREA NAME="address" ROWS=10 COLS=50></p>
<p>Autostrada Dmitrowskoe,</p>
<p>9B, biuro 448</p>
<p>
Atrybuty użyte wewnątrz tagu opisz wygląd i nazwę wartości wejściowej.  Etykietka wymagane, nawet jeśli pole wejściowe jest początkowo puste.  Opis atrybutu:
NAME - nazwa pola wejściowego
ROWS - wysokość pola wejściowego w znakach
COLS - szerokość pola wejściowego w znakach
Jeśli chcesz, aby jakiś tekst był domyślnie wyświetlany w polu wprowadzania, musisz go wstawić wewnątrz tagów I.
Etykietka służy do wprowadzania jednej linii tekstu lub jednego słowa.  Atrybuty tagów:
SPRAWDZONE - oznacza, że ​​wybrane zostanie POLE KONTROLNE lub PRZYCISK RADIOWY.
MAXLENGTH - określa liczbę znaków, które użytkownicy mogą wprowadzić w polu wejściowym.  W przypadku przekroczenia dozwolonej liczby znaków przeglądarka reaguje na próbę wpisania nowego znaku sygnałem dźwiękowym i nie pozwala na jego wpisanie.  Nie mylić z atrybutem SIZE.  Jeżeli MAXLENGTH jest większe niż SIZE, to w polu wykonywane jest przewijanie.  Domyślna wartość MAXLENGTH to nieskończoność.
NAZWA - nazwa pola wejściowego.  Nazwa ta służy jako unikalny identyfikator pola, dzięki któremu później można uzyskać dane umieszczone przez użytkownika w tym polu.
ROZMIAR - określa wizualną wielkość pola wejściowego na ekranie w znakach.
SRC — adres URL.  wskazujący na obraz (używany w połączeniu z atrybutem IMAGE).
TYP — określa typ pola wejściowego.  Domyślnie jest to proste pole wejściowe dla jednego wiersza tekstu.  Inne typy muszą być wyraźnie określone:
POLE KONTROLNE: Używane dla prostych wartości logicznych (BOOLEAN).  Wartość powiązana z nazwą tego pola, która zostanie przekazana do wywoływanego programu CGI, może być ON lub OFF.
UKRYTE: Pola tego typu nie są wyświetlane przez przeglądarkę i uniemożliwiają użytkownikowi zmianę domyślnej wartości przypisanej do tego pola.  To pole służy do przekazywania statycznych informacji do programu CGI, takich jak identyfikator użytkownika, hasło lub inne informacje.
Ten typ pola wejściowego umożliwia powiązanie grafiki z nazwą pola.  Kliknięcie dowolnej części obrazu spowoduje natychmiastowe wywołanie programu CGI związanego z formularzem.  Wartości przypisane do zmiennej NAZWA będą wyglądać tak – tworzone są dwie nowe zmienne: pierwsza ma nazwę wskazaną w polu NAZWA z dołączoną na końcu nazwy .x.  Ta zmienna zostanie wypełniona współrzędną X punktu w pikselach (zakładając, że źródłem jest lewy górny róg obrazu), na który wskazywał kursor myszy w momencie kliknięcia, oraz zmienną o nazwie zawartej w NAME i dołączony do .y będzie zawierał współrzędną Y.  Wszystkie wartości atrybutu VALUE są ignorowane.  Opis samego obrazu odbywa się za pomocą atrybutu SRC, a składnia pasuje do tagu .
To samo co atrybut TEXT, ale wartość wprowadzona przez użytkownika nie jest wyświetlana przez przeglądarkę na ekranie.
Ten atrybut umożliwia wprowadzenie pojedynczej wartości z wielu alternatyw.  Aby utworzyć zestaw alternatyw, musisz utworzyć wiele pól wejściowych z atrybutem TYPE="RADIO", z różnymi wartościami atrybutu VALUE, ale tymi samymi wartościami atrybutu NAME.  Do programu CGI zostanie przekazana wartość typu NAZWA=WARTOŚĆ, a WARTOŚĆ przyjmie wartość atrybutu WARTOŚĆ aktualnie wybranego pola wejściowego (będzie aktywne).  Po wybraniu jednego z pól wejściowych typu RADIO, wszystkie inne pola tego typu o tej samej nazwie (atrybut NAME) zostaną automatycznie odznaczone na ekranie.
Ten typ oznacza przycisk, po naciśnięciu wszystkie pola formularza przyjmą domyślnie wartości dla nich opisane.
Ten typ oznacza przycisk, który po kliknięciu wywoła program CGI (lub adres URL) opisany w nagłówku formularza.  Atrybut VALUE może zawierać ciąg, który będzie wyświetlany na przycisku.
Ten typ pola wejściowego opisuje jednowierszowe pole wejściowe.  Użyj atrybutów MAXLENGTH i SIZE, aby określić maksymalną długość wartości wejściowej w znakach oraz rozmiar wyświetlanego pola wejściowego na ekranie (domyślnie 20 znaków).
WARTOŚĆ - przypisuje do pola wartość domyślną lub wartość, która zostanie wybrana podczas korzystania z typu RADIO (atrybut ten jest wymagany dla typu RADIO).
Menu wyboru w formularzach.  Menu wyboru w formularzach jest rozumiane jako taki element interfejsu jak LISTBOX.  Istnieją trzy typy znaczników menu Select dla formularzy:
Select - Użytkownik wybiera jedną wartość ze stałej listy wartości reprezentowanych przez tagi OPTION.  Ten widok jest reprezentowany jako lista rozwijana LISTBOX.
Wybierz pojedynczy — to samo, co Wybierz, ale użytkownik widzi na ekranie jednocześnie trzy wybrane elementy.  Jeśli jest ich więcej, zapewnione jest automatyczne przewijanie w pionie.
Wybierz wiele — pozwala wybrać wiele pozycji z LISTY.
SELECT: Znacznik SELECT pozwala użytkownikowi wybrać wartość ze stałej listy wartości.  Jest to zwykle reprezentowane przez rozwijane menu.
Znacznik SELECT ma jeden lub więcej parametrów między znacznikiem początkowym i ostateczna.  Domyślnie na pasku wyboru wyświetlany jest pierwszy element.  Oto przykładowy tag :


W 386
W 486
W 586
SELECT SINGLE: Znacznik SELECT SINGLE jest taki sam jak Select, ale użytkownik widzi na ekranie wiele elementów wyboru jednocześnie (domyślnie trzy).  Jeśli jest ich więcej, zapewnione jest automatyczne przewijanie w pionie.  O liczbie elementów wyświetlanych w tym samym czasie decyduje atrybut ROZMIAR.  Przykład:

W 386

W 486

W 586

Pentium PRO
SELECT MULTIPLE: Znacznik SELECT MULTIPLE jest podobny do znacznika SELECT SINGLE, ale użytkownik może jednocześnie wybrać więcej niż jeden element listy.  Atrybut SIZE określa liczbę elementów jednocześnie widocznych na ekranie, atrybut MULTIPLE - maksymalną liczbę jednocześnie wybranych elementów.  Przykład:

W 386
W 486
W 586
Pentium PRO
W przypadku wybrania kilku wartości w tym samym czasie do serwera przesyłana jest liczba parametrów NAZWA=WARTOŚĆ odpowiadająca wybranej liczbie parametrów o tych samych wartościach NAZWY, ale różnych wartościach WARTOŚĆ.
Wysyłanie plików za pomocą formularzy.  Formularze mogą służyć do przesyłania nie tylko niewielkich komunikatów informacyjnych w postaci parametrów, ale także do przesyłania plików.
Uwaga!  Ponieważ ta funkcja wymaga, aby serwer WWW obsługiwał odbieranie plików, konieczne jest, aby serwer obsługiwał odbieranie plików!
Na przykład:
Prześlij ten plik:  
  
.

2.7
HTMLRamki

Używając ramek, które umożliwiają dzielenie stron internetowych na wiele przewijalnych podokien, można znacznie poprawić wygląd i działanie systemów informatycznych i aplikacji internetowych.  Każde okno podrzędne lub rama może mieć następujące właściwości:
Każda ramka ma swój własny adres URL, co pozwala wczytać ją niezależnie od innych ramek
Każda ramka ma swoją własną nazwę (parametr NAZWA), co umożliwia nawigację do niej z innej ramki
Rozmiar ramki może być zmieniany przez użytkownika bezpośrednio na ekranie za pomocą myszy (jeśli nie jest to zabronione przez określenie specjalnego parametru)
Te właściwości ramki pozwalają na tworzenie zaawansowanych rozwiązań interfejsowych, takich jak:
· Umieszczenie w jednej statycznej ramce informacji statycznej, którą autor uważa za niezbędną do ciągłego pokazywania użytkownikowi.  Może to być graficzne logo firmy, prawa autorskie, zestaw przycisków sterujących
Umieszczenie w statycznej ramce spisu treści wszystkich lub części dokumentów WEB zawartych na serwerze WEB, co pozwala użytkownikowi szybko znaleźć interesujące go informacje
Twórz okna wyników zapytania, gdy samo zapytanie znajduje się w jednej ramce, a wyniki zapytania w drugiej
· Tworzenie formularzy „master-detail” dla aplikacji WWW obsługujących bazy danych.
składnia ramki.  Format dokumentu używającego ramek wygląda bardzo podobnie do formatu zwykłego dokumentu, ale zamiast znacznika BODY zastosowano kontener FRAMESET, zawierający opis wewnętrznych dokumentów HTML, zawierających rzeczywiste informacje umieszczone w ramkach.
 ... ... 
Jednak dokument ramowy jest specyficznym rodzajem dokumentu HTML, ponieważ nie zawiera odpowiednio elementu BODY i żadnych załadowanych informacji.  Opisuje tylko ramki, które będą zawierać informacje (z wyjątkiem podwójnego dokumentu, który omówimy później).
Wyobraźmy sobie ogólną składnię ramek:

  ...

Ogólny kontener FRAMESET opisuje wszystkie ramki, na które podzielony jest ekran.  Możesz podzielić ekran na wiele pionowych lub wiele poziomych ramek.  Znacznik FRAME opisuje każdą klatkę indywidualnie.  Przyjrzyjmy się bliżej każdemu komponentowi.

Tworzenie strony internetowej w chwili obecnej nie spowoduje żadnych szczególnych trudności, ponieważ w Internecie jest wystarczająco dużo portali, które oferują swoje usługi w zakresie tworzenia strony internetowej.  Ale strona stworzona dla takiej usługi nie jest własnym dziełem, ale podobieństwem do klona wyhodowanego w probówce.
Strona stworzona przez siebie - zawsze będzie ulubionym dzieckiem, cierpiącym przez radosne dreszcze kreatywności.  Stronę internetową możesz stworzyć za pomocą języka programowania HTML, tzw. strony statycznej.
Do stworzenia strony internetowej służy edytor HTML.  Aby samodzielnie stworzyć witrynę opartą na HTML, potrzebna jest znajomość języka programowania HTML, oddzielne koncepcje Photoshopa, trochę umiejętności pisania, trochę wyobraźni i sztuki projektowania.
Witryna utworzona przy użyciu języka programowania PHP jest witryną dynamiczną.  Większość istniejących witryn w Internecie jest oparta na PHP, na silnikach CMS (system zarządzania treścią).  Na tej stronie dowiesz się, jak stworzyć stronę internetową i uzyskasz wykwalifikowaną pomoc w tworzeniu własnej strony internetowej na silnikach CMS: 
- tworzenie strony na Joomla;
Rozpoczęcie czegoś jest zawsze trudne.  Najważniejsze jest tutaj wyznaczenie konkretnego celu.  Na początek wybierz motyw i przykładową stronę, którą chcesz wykonać, sporządź plan jej realizacji.  I kieruj się w stronę osiągnięcia głównego celu.
Zanim zaczniemy naszą podróż przez samouczki na temat tworzenia stron internetowych z HTML i CSS, ważne jest, aby zrozumieć różnice między tymi dwoma językami, składnię każdego języka i podstawową terminologię.
Co to jest HTML i CSS?
HTML (HyperText Markup Language) definiuje strukturę treści i jej znaczenie, definiując taką treść, jak na przykład nagłówki, akapity lub obrazy.  CSS (Cascading Style Sheets) lub Cascading Style Sheets to język prezentacji zaprojektowany do projektowania wyglądu treści przy użyciu na przykład czcionek lub kolorów.
Te dwa języki, HTML i CSS, są od siebie niezależne i tak powinny pozostać.  CSS nie powinien być pisany wewnątrz dokumentu HTML i na odwrót.  Z reguły HTML zawsze będzie reprezentował treść, a CSS zawsze będzie określał jej styl.
Mając takie zrozumienie różnicy między HTML i CSS, zagłębmy się bardziej szczegółowo w HTML.
Podstawowe terminy HTML
Zanim zaczniesz pracować z HTML, prawdopodobnie natkniesz się na nowe i często dziwne terminy.  Z czasem poznasz je wszystkie bardziej szczegółowo, ale na razie powinieneś zacząć od trzech podstawowych terminów HTML – elementów, tagów i atrybutów.
Elementy
Elementy określają sposób definiowania struktury i zawartości obiektów na stronie.  Niektóre z powszechnie używanych elementów zawierają wiele poziomów nagłówków (zdefiniowanych jako elementy z 
zanim 
) i akapity (zdefiniowane jako 
);  pozycje można dodać do listy 
, 

, , I i wiele innych.
Elementy identyfikowane są za pomocą nawiasów kątowych<>, otaczający nazwę elementu.  Czyli element będzie wyglądał tak:
tagi
Dodawanie nawiasów kątowych< и >tworzy tak zwany znacznik wokół elementu.  Tagi najczęściej występują w parach tagów otwierających i zamykających.
Znacznik początkowy oznacza początek elementu.  Składa się z symbolu<, затем идёт имя элемента и завершается символом >;  na przykład, 

.
Znacznik końcowy oznacza koniec elementu.  Składa się z symbolu< с последующей косой чертой и именем элемента и завершается символом >;  na przykład,
.
Zawartość pomiędzy znacznikami początkowym i końcowym jest zawartością tego elementu.  Na przykład link będzie miał otwierający tag i zamykający tag.  To, co znajduje się między tymi dwoma tagami, będzie zawartością linku.
Tak więc tagi linków wyglądałyby mniej więcej tak:
 ...
 
Atrybuty
Atrybuty to właściwości używane do dostarczania dodatkowych informacji o elemencie.  Najczęstsze atrybuty to atrybut id, który identyfikuje element;  atrybut class, który klasyfikuje element;  atrybut src, który określa źródło osadzonej treści;  oraz atrybut href, który określa łącze do powiązanego zasobu.
Atrybuty są zdefiniowane w znaczniku otwierającym po nazwie elementu.  Ogólnie rzecz biorąc, atrybuty zawierają nazwę i wartość.  Format tych atrybutów składa się z nazwy atrybutu, po której następuje znak równości, po której następuje wartość atrybutu w cudzysłowie.  Na przykład element z atrybutem href wyglądałoby to tak:
Shay Howe
Demonstracja podstawowych terminów HTML
Ten kod wyświetli tekst „Shay Howe” na stronie internetowej, a po kliknięciu tego tekstu przeniesie użytkownika do http://shayhowe.com.  Element linku jest zadeklarowany ze znacznikiem początkowym i zamykający tag zawierający tekst, a także atrybut i wartość adresu linku zadeklarowanego za pomocą href="http://shayhowe.com" w tagu otwierającym.
Ryż.  1.01.  Składnia schematu HTML obejmuje element, atrybut i znacznik
Teraz, gdy już wiesz, czym są elementy, tagi i atrybuty HTML, spójrzmy razem na naszą pierwszą stronę internetową.  Jeśli coś wygląda tutaj na nowe, nie martw się - odszyfrujemy to na bieżąco.
Dostosowywanie struktury dokumentu HTML
Dokumenty HTML są proste dokumenty tekstowe, zapisany z rozszerzeniem .html, a nie .txt.  Aby zacząć pisać HTML, najpierw potrzebujesz Edytor tekstu co jest wygodne w użyciu.  Niestety nie obejmuje to Microsoft Word ani Pages, ponieważ są to złożone edytory.  Dwa najpopularniejsze edytory tekstu do pisania HTML i CSS to Dreamweaver i Sublime Text.  Darmowe alternatywy to także Notepad ++ dla Windows i TextWrangler dla Mac.
Wszystkie dokumenty HTML zawierają obowiązkową strukturę, która zawiera następujące deklaracje oraz elementy:
, 
, I 
.
Ogłoszenie typ dokumentu lubznajduje się na samym początku dokumentu HTML i informuje przeglądarki, która wersja HTML jest używana.  Ponieważ będziemy używać Ostatnia wersja HTML, nasz typ dokumentu będzie po prostu.  Potem przychodzi żywioł oznaczający początek dokumentu.
W środku element definiuje Górna część dokument, w tym różne metadane (informacje towarzyszące o stronie).  Treść wewnątrz elementu nie pojawia się na samej stronie internetowej.  Zamiast tego może zawierać tytuł dokumentu (który pojawia się na pasku tytułu okna przeglądarki), łącza do dowolnych plików zewnętrznych lub inne przydatne metadane.
Cała widoczna zawartość strony internetowej będzie znajdować się w elemencie .  Struktura typowego dokumentu HTML wygląda tak:
 

 
 
 
 
 
 
Witaj świecie!
 
To jest strona internetowa.
 

 
Demonstracja struktury dokumentu HTML
Ten kod pokazuje dokument, zaczynając od deklaracji typu dokumentu,, po którym następuje natychmiast element .  W środku przejdź do elementów I .  Element zawiera kodowanie strony za pomocą tagu i tytuł dokumentu poprzez element 
 

Czas przetestować naszą pracę i zobaczyć, jak nasz HTML i CSS do siebie pasują.  Otwarcie pliku index.html (lub odświeżenie strony, jeśli jest już otwarta) w przeglądarce powinno pokazać nieco inny wynik niż poprzednio.
Ryż.  1.04.  Nasza strona internetowa konferencji Styles z resetowaniem CSS
Demo i kod źródłowy
Poniżej możesz wyświetlić witrynę konferencji Styles w jej obecnym stanie, a także pobrać aktualny kod źródłowy witryny.
Streszczenie
Więc wszystko jest w porządku!  W tym samouczku podjęliśmy kilka dużych kroków.
Pomyśl tylko, teraz wiesz Podstawy HTML i CSS.  W miarę jak będziesz kontynuować i będziesz spędzać więcej czasu na pisaniu HTML i CSS, praca z tymi dwoma językami stanie się znacznie wygodniejsza.
Przypomnijmy, że rozważyliśmy następujące kwestie:
Różnica między HTML a CSS.
Wprowadzenie do elementów, znaczników i atrybutów HTML.
Konfiguracja struktury Twojej pierwszej strony internetowej.
Znajomość Selektory CSS, właściwości i wartości.
Praca z selektorami CSS
Wskaźnik do CSS z HTML.
Znaczenie resetowania CSS.

Przyjrzyjmy się teraz bliżej HTML i poznajmy nieco semantykę.
Zasoby i linki
Popularne terminy HTML za pośrednictwem Scripting Master
Warunki i definicje CSS za pośrednictwem imponujących stron internetowych
Narzędzia CSS: zresetuj CSS za pomocą Erica Meyera

Hypertext Markup Language (HTML) to język zaprojektowany specjalnie do tworzenia dokumentów internetowych.  Definiuje składnię i rozmieszczenie specjalnych instrukcji (znaczników), które nie są wyświetlane na ekranie, ale informują przeglądarkę, jak wyświetlić zawartość dokumentu.  Służy również do tworzenia linków do innych dokumentów, lokalnych lub sieciowych, takich jak te znajdujące się w Internecie.
Standard HTML i inne standardy dla sieci zostały opracowane pod kierunkiem World Wide Web Consortium (W3C).  Standardy, specyfikacje i projekty nowych ofert można znaleźć na stronie http://www.3w.org/.  Obecnie obowiązuje specyfikacja HTML 4.0, a wsparcie dla niej stale rośnie wśród głównych przeglądarek.
W praktyce na standard HTML duży wpływ ma obecność znaczników oferowanych i obsługiwanych przez najbardziej znane przeglądarki, takie jak Microsoft Internet Explorer i Netscape Navigator.  Te tagi mogą, ale nie muszą być częścią aktualnej specyfikacji HTML w tej chwili.
Informacje o znacznikach Kompendium HTML (krótki przewodnik po HTML) autorstwa Rona Woodalla.  Kompendium zawiera listę tagów i ich atrybutów w porządku alfabetycznym, a także aktualizacje dotyczące obsługi każdego z nich.
Dokumenty HTML to zwykłe pliki tekstowe ASCII.  Oznacza to, że do ich tworzenia można użyć dowolnego edytora tekstu, nawet przy minimalnych możliwościach.  Istnieją narzędzia do edycji zaprojektowane specjalnie do pisania HTML.  Oszczędzają czas, udostępniając klawisze skrótów do wykonywania powtarzających się zadań, takich jak ustawianie początkowych ustawień dokumentów, tabel lub po prostu stosowanie stylów do tekstu.  Edytory HTML różnią się od zestawu narzędzi do tworzenia WYSIWYG (omówionego poniżej) tym, że wymagają znajomości zasad ręcznego kompilowania HTML, edytory tylko upraszczają i przyspieszają ten proces.
Użytkownicy systemu Windows powinni zdecydowanie sprawdzić HomeSite, mocny i niedrogi Edytor HTML Korporacja Allaire.  Obejmuje podświetlanie kolorami składni HTML, funkcji FTP, kontrolę składni i pisowni, wyszukiwanie i zamianę wielu plików.  Dodatkowo zawiera specjalne polecenia i szablony do tworzenia bardziej skomplikowanych elementów (ramki, Skrypty JavaScript i DHTML).
Podczas pracy na komputerach Macintosh zwróć uwagę na BBEdit, komercyjny edytor HTML firmy Bare Bones Software, Inc.  To naprawdę ma swoje miejsce wśród programistów Macintosh Web.  Zawiera wygodne i szybkie narzędzia HTML, wyszukiwanie i zamianę wielu plików, wbudowaną funkcję FTP, obsługę 13 języków programowania, konstruktor tabel, kontrolę składni HTML i wiele innych funkcji.
Ostatnie lata charakteryzowały się gwałtownym wzrostem rynku instrumentów autorskich.  WYSIWYG (What You See Is What You Get) mają edytory HTML interfejsy graficzne, które sprawiają, że pisanie HTML bardziej przypomina edytor tekstu lub program do oznaczania stron.  Pierwotnym celem tych programów było uwolnienie użytkowników od tagów HTML, podobnie jak programy do oznaczania stron chronią programistę przed zestawem poleceń języka PostScript.  Dziś zyskały na znaczeniu, ponieważ zwiększają wydajność i automatyzację produkcji dokumentów, zapewniając jednocześnie dostęp do kodu źródłowego HTML.
Obecnie najpopularniejsze edytory WYSIWYG to: Macromedia DreamWeaver, Golive CyberStudio (tylko Macintosh), Strona główna Microsoft, FileMaker Claris, Strona główna, Adobe PageMill.
Dokument HTML zawiera tekst (zawartość strony) oraz tagi inline - instrukcje dotyczące struktury, wygląd i treści.  Dokument HTML podzielony jest na dwie główne części: nagłówek - nagłówek i treść - ciało.  Tytuł zawiera informacje o dokumencie, takie jak jego tytuł i informacje metodologiczne opisujące treść.  Treść zawiera treść samego dokumentu (co jest wyświetlane w oknie przeglądarki).
 
Każdy tag składa się z nazwy, po której opcjonalnie następuje lista opcjonalnych atrybutów, wszystkie w nawiasach ostrych< >.  Zawartość nawiasów nigdy nie jest wyświetlana w oknie przeglądarki.  Nazwa tagu jest zwykle skrótem jego funkcji, dzięki czemu łatwiej ją zapamiętać.  Atrybuty to właściwości, które rozszerzają lub udoskonalają funkcję znacznika.  Z reguły w nazwie i atrybutach w tagu nie jest rozróżniana wielkość liter.  Etykietka będzie działać tak jak .  Jednak wartości niektórych atrybutów mogą być wrażliwe na wielkość liter.  Dotyczy to w szczególności nazw plików i adresów URL.
Większość tagów to pojemniki.  Oznacza to, że mają znacznik początkowy (otwierający lub początkowy) i końcowy (zamykający).  Tekst między tagami będzie zgodny z zawartymi w nich instrukcjami.
Znacznik końcowy ma taką samą nazwę jak znacznik początkowy, ale jest poprzedzony ukośnikiem (/).  Można go traktować jako znacznik „przełącznika”.  Znacznik końcowy nigdy nie zawiera atrybutów.
W niektórych przypadkach znacznik końcowy jest opcjonalny, a przeglądarka określa znacznik końcowy na podstawie kontekstu.  Najczęściej pomija się tag końcowy<р>(ustęp).  Przeglądarki obsługiwały ten tag bez odpowiedniego zakończenia, więc wielu autorów stron internetowych jest przyzwyczajonych do używania krótkiej formy.  Nie jest to dozwolone dla wszystkich tagów i nie wszystkie przeglądarki wybaczają ich brak.  Dlatego w razie wątpliwości umieść w tekście tag zamykający.  Jest to szczególnie ważne w przypadku używania w dokumencie kaskadowych arkuszy stylów.
Niektóre tagi nie mają tagów końcowych, ponieważ służą do umieszczania na stronie pojedynczych (samodzielnych) elementów.  Jednym z nich jest tag obrazu , po prostu umieszcza grafikę w przepływie strony.  Inne samodzielne znaczniki to podział wiersza ( 
), linia pozioma ( 
) oraz tagi, które zawierają informacje o dokumencie i nie wpływają na treść wyświetlaną na ekranie, np. I .

Atrybuty są dodawane do tagu, aby rozszerzyć lub zmodyfikować jego działania.  Do jednego tagu możesz dodać wiele atrybutów.  Jeśli atrybuty znacznika występują po nazwie znacznika, są one oddzielone jedną lub większą liczbą spacji.  Kolejność nie jest ważna.  Większość atrybutów ma wartości, które następują po znaku równości (=) po nazwie atrybutu.  Długość wartości jest ograniczona do 1024 znaków.  W wartościach może być rozróżniana wielkość liter.  Czasami wartości muszą być w cudzysłowie (podwójne lub pojedyncze).  Zasady pisania wartości są następujące:
- jeśli wartość jest pojedynczym słowem lub liczbą i składa się tylko z liter (a-z), cyfr (0-9) i znaków specjalnych (kropka<.>
- jeśli wartość zawiera wiele słów oddzielonych przecinkami lub spacjami lub zawiera znaki specjalne inne niż kropka lub myślnik, musi być ujęta w cudzysłów.  Na przykład adresy URL wymagają cudzysłowów, ponieważ zawierają znaki „://”.  Cytaty są również wymagane przy określaniu wartości kolorów w formacie „#rrggbb”.

Jeśli nie masz pewności, czy użyć cudzysłowów, zawsze używaj cudzysłowów dla wszystkich wartości.
Inne znaczniki HTML można umieścić w znacznikach HTML, aby zastosować wiele znaczników w jednym elemencie.  Nazywa się to zagnieżdżaniem i aby działało poprawnie, znaczniki początkowe i końcowe znacznika zagnieżdżonego muszą znajdować się między znacznikami początkowym i końcowym znacznika zewnętrznego.
Częstym błędem jest nakładanie się tagów.  Podczas gdy niektóre przeglądarki wyświetlają treści oznaczone w ten sposób, wiele z nich nie pozwoli na złamanie reguły, dlatego ważne jest, aby poprawnie umieścić tagi.  Poniższy przykład pokazuje nieprawidłowe zagnieżdżanie tagów (zauważ, że tag<В>zamyka przed zamknięciem ):

Pogoda jest przepiękny Dziś- ta informacja, ignorowane przez przeglądarki.
Informacje ignorowane przez przeglądarki.  Poniżej znajdują się informacje zawarte w Dokument HTML, w tym niektóre tagi, które będą ignorowane podczas przeglądania przez przeglądarki.  Składa się ona z:
- podziały wierszy.  Znaki końca wiersza w dokumencie HTML są ignorowane.  Tekst i elementy będą zawijane do momentu napotkania znacznika w przepływie tekstu w dokumencie.
- znaki tabulacji i wiele spacji.  Gdy przeglądarka napotka znak tabulacji i wiele kolejnych znaków spacji w dokumencie HTML, wyświetla tylko jeden znak spacji.  Tak więc, jeśli dokument zawiera: „daleko, daleko”, przeglądarka wyświetli „daleko, daleko”.  Dodatkowe spacje można dodać do strumienia tekstu za pomocą znaku spacji nierozdzielającej (Snbsp;).  Ponadto wszystkie spacje są wyświetlane, jeśli tekst jest sformatowany (znajduje się w tagach
- wiele
- nierozpoznane tagi.  Jeśli przeglądarka nie rozpoznaje tagu lub został on nieprawidłowo ustawiony, po prostu go ignoruje.  W zależności od tagu i przeglądarki może to prowadzić do różnych wyników.  Albo przeglądarka nic nie wyrenderuje, albo może wyświetlić zawartość znacznika jako zwykły tekst;
- tekst w komentarzach.  Przeglądarki nie wyświetlają tekstu między elementami specjalnymi