Структурата на 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 документ ...

      Нека да разгледаме какво е включено в тази структура по ред:

      1. Първото нещо, което влиза в HTML документ, е индикацията за версия (първи ред). За правилна работа този ред трябва да бъде посочен при оформлението на уеб страницата.

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

      4. Мета таг “description” - резюме на страницата, предназначено за търсачките. Този етикет е важен за оптимизирането на търсачките и трябва да бъде попълнен.

      5. Мета таг “keywords” – ключови думи, които могат да се появят на страницата. Този етикет е предназначен и за търсачки. Този етикет рядко се използва в наши дни.

      6. Тялото на страницата се отваря с таг и съответно се затваря с етикета

      . Тялото на уеб страницата обикновено съдържа основното съдържание – текст, видео, аудио и друга информация.

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

      Днес ще говорим за семантиката в HTML5. Вече написах кратка рецензия за. Препоръчвам ви да се запознаете с него, преди да прочетете тази статия. Сега ще разгледаме този въпрос по-подробно, за това как правилно и компетентно да съставим семантичната структура на HTML5 документ.

      В тази статия постепенно ще създадем HTML страница и ще я украсим със семантични HTML5 тагове.

      Фигура - Семантична структура за HTML5 страница.

      DOCTYPE и мета тагове в заглавието на страницата

      Нека започнем със стандартен шаблон на HTML5 документ и добавим мета тагове към главата:

      Заглавие на страница

      Добавих етикет който отговаря за ключовите думи. И етикет който отговаря за описанието на страницата. За SEO оптимизация тези тагове са задължителни. Също така е необходимо да попълните етикета правилно . Заглавието на страницата трябва да е уникално за целия сайт и да съдържа в заглавието цялата същност на страницата, за която е посочена.</p><p>Да отидем по-нататък. HTML5 въвежда нови тагове, които се използват за създаване на семантично маркиране в документ. Това са тагове header, nav, main, article, aside, footer и др. По отношение на дисплея работят по същия начин като обикновените. <div>тагове, тоест това са блокови елементи. Но ако <div>няма семантичен товар, тогава заглавието, навигацията, главният и други трябва да се използват само по смисъл.</p><h3>Заглавие на страница</h3><p>Заглавката на страницата е форматирана в тага за заглавка. Моля, обърнете внимание, че заглавието на страницата е написано с помощта на тага h1.</p><p> <!-- Header страницы --> <header> <h1>Заглавие на сайта</h1> </header> </p><p>Ако имаме и слоган до заглавието, тогава го поставяме в p, div или span.</p><p> <!-- Header страницы --> <header> <h1>Заглавие на сайта</h1> <p>слоган на сайта</p> </header> </p><p><b>Бележка за етикета H1</b></p><p>Трябва да се отбележи, че в HTML5 тагът H1 се използва за указване на заглавието на контейнера, в който се намира (това може да бъде заглавка, раздел, статия и т.н.)</p><p>Преди появата на HTML5 таговете семантиката беше малко по-различна и различна. Така че в HTML4 може да има само едно H1 заглавие на страница! По правило това беше заглавието на статията или заглавието на страницата (например, ако е страница с категория, на която се показват няколко статии.) H2 се използваше за подзаглавия или за раздели на основната статия. H3 за подсекции и т.н.</p><h3>Навигация в страницата</h3><p>Дизайнът на основната навигация на сайта трябва да се съдържа в nav тага. Трябва също така да запомните, че се счита за добра практика да проектирате навигация с елементи от списък.</p><p> <!-- Главная Навигация по сайту --> <nav> <ul> <li>У дома</li> <li>Портфолио</li> <li>Галерия</li> <li>Контакти</li> </ul> </nav> </p><h3>Съдържание на страницата</h3><p>Основното съдържание на страницата е форматирано в главния таг. Това може да бъде една статия или няколко прегледа на статии, ако говорим за страница в блог с няколко записа. Не можете да поставите странична лента, горен колонтитул, долен колонтитул или основна навигация в главния етикет!</p><p> <!-- Основное содержимое страниц --> <main>...съдържание на основната страница...</main> </p><h3>Дизайн на артикул</h3><p>Тагът article се използва за обвиване на статии. Като цяло този етикет съдържа блок от съдържание, който може да бъде изваден от контекста на страницата и използван отделно другаде. Това може да бъде статия (пълният текст на статията или визуализация), публикация във форума и др.</p><p>В примера по-долу показах дизайна на статията в контекст, вътре в главния таг. Статията има заглавен блок със заглавието на статията. Датата на публикуване на статията е посочена чрез специален таг за време, който се показва като обикновен вграден елемент. Етикетът за време има специален атрибут, в който времето за публикуване трябва да бъде указано в машинен формат. Това може да бъде само datetime="2015-09-30" или с часове минути и секунди datetime="2015-09-30T15:25:55" . Параметърът pubdate показва, че статията е публикувана по същото време, когато е написана. Ако това е новина, тогава може да се окаже, че времето за новини е едно, а времето за публикуване е различно, за това трябва да посочите маркера за време два пъти и да поставите pubdate само в етикета, където е посочено времето за публикуване.</p><p> <main> ... <!-- Статья --> <article> <!-- Шапка статьи если в шапке у нас больше чем заголовок --> <header> <!-- Заголовок статьи --> <h1>Заглавие на статията</h1> <!-- Дата публикации статьи --> <time datetime="2015-09-30T15:25:55" pubdate>30 септември</time> </header> <!-- Подзаголовок страницы --> <h2>Подзаглавие на статията</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde?</p><p>От примера по-горе можете да видите, че етикетите за заглавие и долен колонтитул са използвани вътре в статията, за да подчертаят заглавието и долния колонтитул на статията.</p><h3>Странична лента или колона с джаджи</h3><p>За всеки отделен елемент от страничната лента използваме страничен блок. Вътре в него заглавието е форматирано с тага h1. Така че колоната на страничната лента може да изглежда така:</p><p> <!-- Сайдбар --> <div class="sidebar"> <!-- Виджет в сайдбаре --> <aside> <h1>Заглавие на джаджа</h1> ... </aside> <!-- Виджет в сайдбаре --> <aside> <h1>Последните бележки</h1> ... </aside> <!-- Виджет в сайдбаре --> <aside> <h1>Популярни коментари</h1> ... </aside> </div> </p><h3>Етикет за раздел</h3><p>Тагът section се използва за представяне на група или раздел от тематично свързано съдържание. Използването му е подобно на article с основната разлика, че съдържанието в елемента е разрешено да няма значение <section>извън контекста на самата страница. Препоръчително е да използвате етикети ( <h1> – <h6>), за да посочите темата на раздела.</p><p>За да дадете пример за статията, която четете сега, можете да обвиете всеки параграф в таг <section>. Например маркерът за раздел може да се използва за подчертаване на блокове от съдържание на целева страница. Това звучи подобно на дефиницията на елемент div, който често се използва като контейнер за съдържание. Разликата е, че div няма семантично значение и не казва нищо за съдържанието вътре в него. Тагът за раздел, напротив, се използва, за да покаже ясно, че съдържанието в него е свързано по смисъл. Можете да замените някои от вашите тагове div с тагове за секции, но винаги си задавайте въпроса: „Това съдържание свързано ли е или не?“</p><p>Пример за използване на маркера за раздел в списък с градове:</p><p> <h1>Отделно събитие</h1> <section> <header> <h2>градове</h2> </header> <p>Присъединете се към нас в тези градове през 2010 г.</p> <section> <header> <h3>Сиатъл</h3> </header> <p>Следвайте пътя с жълти тухли.</p> <section> <header> <h3>Бостън</h3> </header> <p>Това е Beantown за неговите приятели.</p> <section> <header> <h3>Минеаполис</h3> </header> <p>Толкова е <em>хубаво</em>.</p> <small>Не е осигурено настаняване.</small> </p><h3>Долен колонтитул на сайта - Footer</h3><p>Долният колонтитул на сайта е проектиран с етикета <footer></p><p> <!-- Подвал сайта --> <footer> <p class="copyright">© 2015 сайт Авторски права</p> </footer> </p><h3>Заключение</h3><p>Можете да използвате инструмента за очертаване на HTML5, за да проверите структурата на страницата. Показва структурата на страницата по блокове и заглавия.</p><p>Семантиката в HTML5 не се ограничава до таговете, дадени по-горе в статията. Но като използвате примерите по-горе, можете да опресните маркирането си и да направите сайта си по-удобен за търсачките, което ще доведе до по-високо класиране на вашия сайт в резултатите от търсенето.</p><p>За да продължите тази тема, можете да разгледате други нови HTML5 тагове. Както и микроформати за проектиране и структуриране на данни, като schema.org</p><p><b>Важна забележка относно използването на HTML5 тагове.</b>Спецификацията не определя строги правила за използването на семантични етикети, а само дава препоръки за тяхното използване. Ако не разбирате или не знаете къде и кой HTML5 таг да използвате, по-добре е да използвате div, за да не навредите или нарушите структурата на документа.</p><p><b>Статии и материали</b></p> <ul><li>1. HTML документите са структурни документи.</li> <li>2. Имената на елементите могат да се изписват във всеки случай.</li> <li>3. Имената на атрибутите могат да се изписват във всеки случай.</li> <li>4. Стойностите на атрибутите зависят от регистъра, особено адресите (характеристика на операционните системи Unix е различната интерпретация на знаци в различни регистри, така че файловете</li> </ul><p>picture .gif и picture.GIF са различни!).</p> <ul><li>5. Имената на елементите не могат да съдържат интервали.</li> <li>6. Ако стойностите на атрибута съдържат интервали, те трябва да са в кавички.</li> <li>7. Допълнителните интервали, табулатори и връщане на каретка се игнорират и компресират в един интервал.</li> <li>8. Елементите могат да бъдат вложени един в друг. В този случай трябва да се спазва правилото за гнездене. Вътре във вложения елемент освен отварящия таг трябва да има и затварящ таг. Пресечните точки са неправилни:</li> </ul><h1>Структура на HTML документ</h1> <p>9. Непознатите елементи и атрибути се игнорират от браузърите („толерантност към грешки“).</p> <p>Повечето документи имат стандартни елементи като заглавие, параграфи или списъци. С помощта на HTML тагове можете да етикетирате тези елементи, като предоставяте на уеб браузърите минималната информация за показване на тези елементи, като същевременно като цяло поддържате цялостната структура и информационната пълнота на документите. Всичко, което е необходимо за четене на HTML документ, е уеб браузър, който интерпретира HTML таговете и показва документа, както е предвидено от автора.</p> <p>Когато уеб браузърът получи документ, той определя как трябва да се интерпретира документът. Първият етикет, който се появява в документа, трябва да бъде етикетът <HTML>. Този таг казва на уеб браузъра, че документът е написан с помощта на HTML.</p> <p><b>Коментари в HTML.</b>Както всеки език, HTML ви позволява да вмъквате коментари в тялото на документ, които се запазват, когато документът се прехвърля по мрежата, но не се показват от браузъра. Често определени тагове или цели синтактични структури са „скрити“ в коментари от по-стари версии на браузъри, които не могат да ги обработват. Коментарите могат да се появяват навсякъде в документа и в произволно количество. Трябва да се помни, че коментарите увеличават размера на документа и следователно времето за зареждане.</p> <p><b>Общата заглавна част на документа.</b>Етикетът за главата на документа трябва да се използва непосредствено след тага <HTML>и никъде другаде в основната част на документа. Този етикет представлява общо описание на документа. Начален етикет <HEAD>поставен непосредствено преди етикета <TITLE>и други тагове, които описват документа, и крайния таг</head>поставя се непосредствено след края на описанието на документа.</p> <p><b>Заглавие на документ.</b>Повечето уеб браузъри показват съдържанието на етикета <TITLE>в заглавието на прозореца, съдържащ документа, и във файла с отметки, ако се поддържа от уеб браузъра. Заглавието е ограничено от тагове <TITLE>И, поставени вътре в етикети . Заглавието на документа не се появява, когато самият документ се показва в прозореца.

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

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

      Нива на заглавия<Нх>. Първото ниво на заглавията (най-голямото) е обозначено с числото 1, следващото с 2 и така нататък до числото 6. Повечето браузъри поддържат интерпретацията на шест нива на заглавията, като всяко от тях определя собствен стил. В повечето случаи текстът на такова заглавие ще стане удебелен и ще има празен ред след текста. Важно е тези тагове да определят логическата структура на документа и да участват в индексирането от интернет търсачките. Заглавките над ниво шест не са стандартни и може да не се поддържат от браузъра.

      Таг за абзац<Р>. INЗа разлика от повечето текстообработващи програми, връщането на каретка се игнорира в HTML документ. Браузърът разделя абзаците само ако има таг<Р>. Ако не разделяте абзаците с таг<Р>, тогава документът ще изглежда като един голям параграф.

      Предварително форматиран текстов етикет

      .
      Етикет 
      Позволява текстът да бъде представен със специфично форматиране на екрана.  Предварително форматираният текст завършва с краен таг
      . В рамките на предварително форматиран текст можете да използвате: извеждане на ред, знаци за табулация (изместване с осем знака надясно), непропорционален шрифт Courier, инсталиран от браузъра.

      Списък с етикети.Има три основни типа списъци в HTML документ: номериран, с водещи символи и списък с описание.

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

      Номерирани списъци. INВ номериран списък браузърът автоматично вмъква номерата на елементите по ред. Това означава, че ако изтриете един или повече елементи от номериран списък, останалите числа ще бъдат автоматично преизчислени.

        и завършва с етикета
    • .

      Списъци с водещи символи. ЗаЗа списъци с водещи символи браузърът обикновено използва водещи символи за елемента от списъка. Типът маркер обикновено се конфигурира от потребителя на браузъра.

      Номерираният списък започва с начален етикет

        и завършва с етикета
      . Всеки елемент от списъка започва с таг<ы>.

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

      Графика в HTML документ.Една от най-привлекателните функции на WEB е възможността за включване на графични и други видове данни в HTML документ.

      Има два начина за използване на графики в HTML документи. Първият е вграждането на графични изображения в документ, което позволява на потребителя да вижда изображения директно в контекста на други елементи на документа. Това става с помощта на етикета . Този таг е пунктиран, т.е. не се затваря. Синтаксис на маркера:

      Задължителният параметър има същия синтаксис като стандартния URL адрес. Този URL адрес казва на браузъра къде

      рисунка. Чертежът трябва да се съхранява в графичен формат, поддържан от браузъра. Днес това са GIF, JPG, PNG формати. Те се поддържат от повечето браузъри.

      ALT="текст"

      Този незадължителен елемент указва текст, който ще се показва в браузър, който не поддържа графики или с деактивирана графична графика. Обикновено това е кратко описание на изображението, което потребителят може или ще може да види на екрана. Ако този параметър липсва, тогава повечето браузъри показват празна рамка на мястото на картината. Етикет препоръчва се, ако потребителите използват неграфичен браузър, като например Lynx, и за индексиране на търсачката. Текстът също се вижда, когато задържите курсора на мишката за известно време, без да се движите върху изображението като системна подсказка под курсора.

      Повечето браузъри ви позволяват да включите фоново изображение във вашия документ, което ще се дублира като плочки за баня и ще се появи като фон на целия документ. Това е вторият начин. Някои потребители харесват фонова графика, други не. Ненатрапчив полупрозрачен модел (тапет) обикновено изглежда добре като фон за повечето документи.

      Хипертекстовите връзки са ключов компонент, който прави WEB привлекателен за потребителите. Добавяйки хипертекстови връзки (наричани по-долу връзки), потребителят прави набора от документи свързан и структуриран, което му позволява да получи необходимата информация възможно най-бързо и удобно.

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

      Структура на връзката в HTML документ.За да може браузърът да показва връзка към URL, трябва да поставите текст или изображение в тага за хипервръзка. HTML синтаксисът е както следва:

      <А HREF="URL">текст-или-изображение-което-ще-бъде-маркирано-като-връзка

      Етикет<А HREF="URL">отваря описанието на връзката и етикета– затваря го. Всеки текст, разположен между тези два тага, се маркира по специален начин от уеб браузъра. Обикновено този текст изглежда подчертан и подчертан. Изображението е рамкирано с правоъгълна рамка. Текстът, който представлява URL адреса, не се показва от браузъра, а се използва само за извършване на предвидените действия, когато връзката е активирана (обикновено чрез щракване върху маркиран или подчертан текст).

      Връзки към тагове в документа.Можете да се свържете с различни области или раздели на един и същ документ, като използвате специални скрити етикети за тези раздели. Това ви позволява бързо да се придвижвате от секция на секция в рамките на документ, без да превъртате екрана. Веднага след като потребителят щракне върху връзката, браузърът ще го премести в посочения раздел на документа, а редът, съдържащ етикета за този раздел, ще бъде поставен на първия ред на прозореца на браузъра (ако „дължината“ на документът в прозореца на браузъра е достатъчен).

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

      Освен това HTML документът трябва да съдържа елементите HEAD (информация за документа) и BODY (тяло на документа).

      Секция за документиГЛАВА

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

      Заглавният раздел започва с етикета < ГЛАВА> и веднага следва етикета . Между отварящия и затварящия тагове на елемента HEAD има други заглавни елементи.

      Заглавие на документа

      За да даде име на HTML документ, етикетът е < ЗАГЛАВИЕ> . Това име ще се показва в заглавието на прозореца на браузъра. Заглавието е изписано между таговете Ии е ред от текст. Дължината на този ред може да бъде произволна, но се препоръчва да не надвишава 60 знака. Елементът TITLE трябва да се показва само в секцията HEAD.

      Секция за документиТЯЛО

      Този раздел от документа съдържа информацията, която се показва в прозореца на браузъра. Секцията BODY трябва да започва с етикета < ТЯЛО> и завършва с етикета ТЯЛО> , между които са разположени HTML елементите, изграждащи съдържанието на документа.

      Спецификация на артикулаТЯЛО

      Етикет има редица атрибути, които определят външния вид на документа. По-долу е спецификацията на етикета .

      TEXT="цвят на текста"

      BGCOLOR="цвят на фона"

      BACKGROUND="адрес на фоново изображение"

      Атрибутът TEXT определя цвета на шрифта за целия документ в RGB или символна нотация. По подразбиране (ако този атрибут не е зададен) се използват настройките на браузъра.

      Атрибутът BGCOLOR указва цвета на фона на прозореца на браузъра на документа в RGB или символна нотация. Настройките на браузъра се използват по подразбиране.

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

      Атрибутите LINK, VLINK и ALINK определят цветовете на хипервръзките в RGB или символна нотация. Настройките на браузъра се използват по подразбиране. Непосетена хипервръзка е хипервръзка, която все още не е била използвана за навигация до друг документ. Посетената хипервръзка е хипервръзка, която вече е била използвана за навигация до друг документ. Активна хипервръзка – хипервръзка към документа, към който се навигира в момента.

      Съвети за използване на атрибути на етикет BODY

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

       Изберете цвета на текста така, че да „работи“ с цвета на фона или основните цветове на изображението. Например червено върху зелено може да причини сериозни проблеми на значителен брой хора.

       Както BGCOLOR, така и BACKGROUND могат да бъдат посочени в елемента BODY. В този случай браузърът дава предпочитание на BACKGROUND, но ако фоновото изображение не може да се зареди, ще се използва BGCOLOR. Затова се опитайте да зададете цвета на фона да бъде подобен на цвета на фоновото изображение, за да не нарушите цветовия баланс на документа.



       

      Може да е полезно да прочетете: