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

Anonim

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

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

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

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

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

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

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

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

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

Структурата на html-документа - основните етикети:

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

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

    Глава

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

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

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

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

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

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

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

    Файлът е свързан както следва.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    свободен край

    уговорена среща

    ...

    препратки

    изображение

    ...

    параграф

    Прехвърляне на текст в нов ред

    ...

    Удебелен текст

    ...

    курсивен

    ...

    Пресечен текст

    ...

    Подчертан текст

    ,

    списъци

    маси

    Как може всичко това да бъде представено в главата?

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

    Това е мястото:

    И това:

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

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

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

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

    Резултатът ще бъде червен надпис.

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

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

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