Структурата на html документ е основните тагове. Правилна структура на HTML документ и код на страницата
Добър ден, читатели и гости на блога. Отново съм с вас, вашият скромен помощник в изучаването на основите на хипертекстовия език за маркиране html. В тази статия искам да засегна темата за структуриране на уеб страници и да ви запозная по-отблизо с основните тагове на езика.
Темата за структурата на уебсайта html е една от най-важните и е в основата на изграждането на уебсайт, след усвояването на който можете лесно да създадете индивидуален дизайн за вашите страници и уебсайтове. За подробно проучване на темата статията предоставя не само теоретичен материал, но и конкретен пример за създаване на блог. Сега е време да започнете да учите!
Изглежда страшно, лесен за програмиране
За тези, които са особено неспокойни, ще започна въведението с пример. По-долу е прост програмен код, който написах специално за тази статия. не се притеснявай На всяка стъпка ще бъде дадено подробно обяснение.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
член 1Ето текста на първата статия. член 2Ето текста на втората статия. |
Създаване на структура на сайта чрез html
- Етикети на основния език за маркиране на хипертекст
- Нови тагове, дошли с html 5
- Пример за структуриране на страница
член 1
Ето текста на първата статия.
член 2
Ето текста на втората статия.
Този код създава блог страница, която от своя страна е разделена на заглавка, меню, основен панел (layout), който съдържа панел със съдържание (content) и странична лента (sidebar), както и „долен колонтитул“ (footer ).
Нека започнем разбора от първия ред.
е езиков елемент, чиято основна задача е да посочи вида на уеб документа. По този начин браузърът определя по какъв стандарт да се показва страницата, тъй като днес има няколко версии на html.
Струва си обаче да се обърне внимание на нова езикова единица, наречена стил. Както може би се досещате от името, този таг задава стила и настройва подредбата на обектите на страницата.
Логично мога да предположа, че в главата ви веднага възникна въпросът: „Какъв вид неразбираем код се намира в тази част на програмата? Изобщо не прилича на html!“ И отговорът е следният: не html е написан в тага style, а css кода. Както споменахме по-рано, това е инструмент за форматиране на външния вид на уебсайтове.
дивсе отнася до тагове за блокиране на език за маркиране. Използва се за изолиране на определени фрагменти с цел по-нататъшното им модифициране.
Блоковете се управляват с помощта на каскадни стилови листове, т.е. css език Примерната уеб страница има три блока, които са стилизирани с помощта на атрибути на клас.
По този начин кодът съдържа:
- оформление - блок, отговорен за основната част на страницата,
- странична лента – странична лента (обикновено създадена за навигация),
- съдържание – блокът, в който се намират публикациите в блога.
В елемента с дефиницията на класа на страничната лента дефинирам неподреден списък, използвайки елементите
- И
- . В блок със стил клас съдържание – заглавни тагове
и параграф
Сега нека разгледаме по-отблизо блока
.HTML или все пак HTML 5? Как да разпознаем?
В div с класа стил на оформление, в допълнение към други блокове, има тагове като заглавка, меню и долен колонтитул. За разлика от другите елементи в примера, те са специфични за платформата HTML 5.
По този начин заглавката е елемент от езика за маркиране на хипертекст, обикновено създаващ заглавката на страниците или разделите на сайта, в които се вмъква заглавието. Заслужава да се отбележи, че браузърът Internet Explorer не поддържа заглавка до версия 8, но показва съдържанието му.
Основната цел на тага на менюто е да показва елементи от менюто. Подобно на елементите за създаване на номерирани и неномерирани списъци, вътре в контейнера на менюто всеки елемент от съдържанието е включен в сдвоен таг
- .
И накрая, единицата за език на долния колонтитул. На жаргона на уеб разработчиците това понякога се нарича „долен колонтитул“ на страница. Този етикет се намира в долната част на страницата или секциите. Долният колонтитул обикновено съдържа информация за авторството на конкретен ресурс, датата на създаване на документа, основна информация или други материали, които не изискват специално внимание от страна на читателите на уеб ресурса.
Инструменти за създаване на уеб ресурси
Създадени са много софтуерни продукти за разработване на интернет страници. Условно те могат да бъдат разделени на прости програми за редактиране и професионално ориентирани софтуерни продукти.
Когато създавате уеб сайт, първото нещо, което трябва да си представите е как се оформя уеб страницата. Това е един вид "основа" в изграждането на уебсайт. Ето защо, преди да се задълбочите в по-сложните технологии за създаване на уебсайтове, е препоръчително да имате поне основни познания по HTML. В този урок ще се запознаем с HTML, нека го оправим Структура на HTML документи използвайте практически примери, за да консолидирате получените знания.
Какво е HTML?
HTMLозначава HyperText Markup Language. Този език отговаря за това как точно ще се показва хипертекстът на страниците на сайта. Сега нека да разберем какво е хипертекст? Не е тайна, че една уеб страница може да съдържа много различни видове информация, било то текст, някои таблици, графики, видео, аудио и т.н. И така, цялата тази информация може да се нарече с една дума - хипертекст.
Имайте предвид, че HTML е език за маркиране, а не език за програмиране. Този език няма никакви логически функции и е невъзможно да се извършват математически изчисления в него. HTML страниците имат разширение .htmlили .htmи се обработват от браузъри - IE, Mozilla Firefox, Google Chrome, Yandex Chrome, Opera и др.
Сега нека да разберем как браузърът разбира какво и как да покаже на уеб страница? Много е просто. Езикът за маркиране на хипертекст HTML има вградени команди, наречени тагове. По тях се ориентира браузъра.
Структура на HTML документ
Всеки HTML документ (уеб страница) трябва да има определена структура. Това ще избегне възможни проблеми при отваряне на страници в браузъри. Като пример, нека разгледаме страница, която съдържа следния HTML код:
Структура на HTML документ ...
- .