Структура на HTML документа: основни етикети, пример

HTML е езикът на маркирането. Много хора го смятат за програмиране, но това не е така. В HTML няма променливи, изчисления, масиви или други елементи, присъстващи на който и да е програмен език.

Използвайки HTML, програмистът може да създава самовъншния вид на обекта. Важно е да разберете, че няма сайт без маркиране. HTML е основата за създаване на уеб страници. Останалата част от функционалните се добавя от различни програмни езици.

Създаване на HTML документ

Създайте проста уеб страница във всяка от тяхредактора. Дори "Notepad" ще направи. Препоръчва се разработчикът на начинаещи да използва други редактори, които имат функции за автоматично заместване и други подкана. Благодарение на това можете да създадете готови маси, връзки, изображения и други елементи. И в "Бележник" всяко писмо трябва да бъде написано ръчно.

По правило "Notepad" се използва само в тезислучаи, при които няма други инструменти. Първо, се създава текстов документ и след това се запазва в html формат. Всички страници на сайта трябва да имат html разширение.

Html езикът е йерархичен. Това означава, че има специална структура за документа html. Какво е това? Нека разгледаме по-долу за яснота.

Структура на html документа. пример

Структурата винаги е еднаква. Ако искате да промените нещо, браузърът няма да може да го обработи. В резултат на това няма да получите това, което сте възнамерявали.

Картината по-горе показва структурата на която и да еHTML-файл. Първият елемент показва типа на файла. Този маркер е посочен веднъж. Ако използвате специални редактори, цялата структура ще бъде създадена автоматично. Ще трябва да коригирате стойностите по подразбиране.

Структурата на HTML документа е главните тагове:

<Html>
<Главата>
<Тяло>

От тези три етикета е скелетът на целия сайт. Обърнете внимание на снимката. Всички тези маркери имат затварящ маркер с "/" знак. Ако пишете на ръка, свикнете с едновременно поставяне на двата етикета - отваряне и затваряне.

Бе казано по-горе, че страниците на уеб сайтоверазширение .html. Това означава, че ако създадете текстов документ, но в същото време напишете правилния код, браузърът ще ви покаже само текста. Няма да има преобразуване на код.

Главна секция

На фигурата под параграф 3 се посочва главата. Този раздел показва сервизната информация. Например, можете да зададете кодирането (елемент 4) и заглавието на страницата (стъпка 5).

Заглавието винаги трябва да е. Без него нито една търсачка не може да определи името на съдържанието (текста) на уеб страницата. И това е лошо за промоция на уебсайтове. Освен това, браузърът в горната част не посочва заглавието на страницата. Това е неудобство за потребителя.

Структурата на html документа е такава, че заглавието <title> е посочено само в главната секция. Ако маркерът <title> е зададен в секцията на тялото или след него, обслужващият не му обръща внимание.

Освен това главата се определяинформация за свързване на скриптове, стилови файлове, инструкции за търсачките или всякакви други данни, които потребителят не трябва да вижда, но те са важни за браузъра или програмистите.

Свързване на стиловете

Структурата на html документа ви позволява да се свържетестилове по различни начини. Освен това те могат да бъдат написани поотделно във всеки елемент. Но този метод не се препоръчва, защото кодът става твърде голям и неудобен.

Търсачките препоръчват всички стилове да се изобразяват в отделен файл, а елементите просто да използват различни класове.

Файлът е свързан по следния начин.

Атрибутът href определя пътя към файла. Ако има грешка в пътя, стиловете няма да се заредят. Също така, атрибутът тип е задължителен, което показва, че това е css файл.

Друга възможност е да дефинирате стилове директно в главата.

Но тази опция също не е много препоръчителна. Тези методи са много различни, тъй като css файлът може да бъде един за целия сайт и всички промени в него ще бъдат незабавно приложени към всички страници. И ако използвате метода, показан на фигурата по-горе, ще трябва да направите промени във всички съществуващи страници на сайта.

Ако класът, който създавате, ще се използва само на една страница, тогава тази опция е подходяща за вас.

Свързване на скриптове

Скриптовете са свързани както следва.

Тук са необходими два атрибута: тип и src. В първия, посочете, че това е Javascript файл, а вторият е мястото, където се намира файлът. Ако направите печатна грешка, нищо няма да работи.

Секция на тялото

Структурата на html документа е такава, че е необходимо да се постави съдържание, което ще бъде видимо за потребителя само в секцията на тялото. Името на маркера говори сам за себе си.

Това определя целия основен код на страницата, който може да включва неограничен брой елементи. Но колкото по-дълъг е кодът, толкова по-дълго ще бъде обработен.

Помислете за най-основните етикети, които можете да използвате в областта на тялото. Няма толкова много основни. Всичко останало ще разберете, докато вашите знания и практика растат.

Основни маркери

Структурата на html документа изисква задължителноред на писане елементи. Етикетите винаги трябва да бъдат заобиколени от скоби <>. Без това браузърът не разбира, че това е маркер. След отварящата скоба винаги следва името на елемента (маркер). Ако разрешите интервал между <и името, браузърът ще прецени това като текст.

Помислете за примера на маркер за изображение. Обърнете внимание, че този маркер не се затваря, за разлика от връзки, абзаци и много други.

Редът на атрибутите няма значение. Но тяхното писане е много важно. Винаги идва първо името на атрибута, а след това равен знак, тогава стойността на атрибута е записана в кавички. Стойността може да е различна - цифров или текст.

Атрибутът src във всички маркери показва пътя на файла,които трябва да заредите. Атрибутът Alt във всички елементи показва кратко описание. В този случай се зарежда картина на bird.jpg с описание на снимка на птица.

Освен това в маркера img можете да посочите размери, само ширина или височина, заглавие, подравняване, клас на стил или рамка.

Обмислете другите главни маркери, които са изброени в секцията за тялото.

свободен край	уговорена среща
<a> ... </a>	препратки
<Img>	изображение
<p> ... </ p>	параграф
The <br>	Прехвърляне на текст на нов ред
<strong> ... </ strong>	Удебелен текст
<i> ... </ i>	курсивен
<s> ... </ s>	Заличен текст
<u> ... </ u>	Подчертан текст
<ol> </ ol>, <ul> </ ul>	списъци
<table> </ table>	маси

Как мога да си представя всичко това в моята глава

Започващи разработчиците не винаги може веднага да си представим, че всичко това е спекулативно. Разгледайте няколко примера за структурата на уеб страниците и тогава ще станете ясни.

Има такава възможност:

структура на главните маркери на документ HTML

И това:

Използване на стилове

Както беше споменато в началото, можете да свържете стилове към файла и да посочите в главата. Във всеки случай описанието на класовете е съвсем същото.

Например можете да зададете стил за заглавката. След това трябва да напишете h1 (тъй като стила ще бъде за заглавието на второто ниво), отворете скобите и напишете какви свойства ще бъдат в този елемент. Ако знаете основните английски, тогава не би трябвало да има никакви проблеми. Всички имоти се наричат човешки език.

Ако искате да посочите този стил за няколко елемента наведнъж, след това ги запишете отделно със запетаи.

Резултатът е червен.

Горните методи са подходящи за проектиране на стандартни елементи. Но можете също да създадете свои собствени класове. Името им трябва да започва с точка, след което е написано произволно име.

Трябва да ги използвате по този начин.

Моля, обърнете внимание: Ако сте въвели настройките на стила за стандартен елемент, че не е необходимо в бъдеще да напишете дума клас. Стилът ще бъде приложен по подразбиране. Атрибутът клас, можете да посочите само тези стилове, които можете да започват с една точка.