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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Структурата на html документа е такава, че заглавието

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

маси

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

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

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

И това:

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

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

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

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

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

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

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

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