Структура HTML-документа

Пример HTML-документа выглядит следующим образом:

"http://www.w3.org/TR/html4/strict.dtd">

<ТІТЕЕ>Пример простого НТМЕ-документа

<Р>Это самый простой НТМЕ-документ.

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

( Пример простого HTML-документа - Windows Internet Explorer

IjS , D:HTML&C55пример ж| ? X |t> Live s'

Пример простого HTML-документа

Это самый простой HTML-документ.

Рис. 2.11. Так выглядит в браузере простой HTML-документ

Каждый документ рекомендуется начинать с элемента декларации типа документа, или DOCTYPE, который описывает используемый тип и версию HTML. Данная информация предназначена прежде всего для браузеров и программ-валидаторов разметки. DOCTYPE указывает браузеру основные синтаксические элементы для каждой версии HTML, а также режим воспроизведения. Валидаторы разметки просматривают DOCTYPE, чтобы определить, согласно каким правилам они должны проверять данный документ (более подробно DOCTYPE рассматривается в [23]).

За декларацией типа документа следует элемент ..., который указывает, что последующий документ является HTML-документом и включает в себя все остальное содержимое документа. Данный элемент называется корневым элементом документа. Он может содержать только элементы HEAD и BODY, причем каждый из этих элементов может встречаться внутри элемента HTML не более одного раза. Данный элемент имеет два необязательных атрибута: lang и dir.

Внутри элемента HTML располагается заголовок. Заголовок документа, создаваемый элементом ..., содержит информацию об общих свойствах документа. Данный элемент в обязательном порядке должен содержать элемент TITLE и может содержать необязательные элементы BASE, SCRIPT, STYLE, МЕТА, LINK и OBJECT. Элемент HEAD имеет три необязательных атрибута: lang, dir и profile ; последний указывает местонахождение словаря метаданных. Предполагается, что такой словарь должен содержать имена метапеременных, значения которых определяются элементами МЕТА и LINK в заголовке документа.

После элемента HEAD следует элемент ..., который является оболочкой, содержащей реальный контент веб-страницы. Элемент BODY обязательно должен содержать хотя бы один блочный элемент', в данном случае это элемент Р, создающий параграф, который содержит текст «Это самый простой HTML-документ». Элемент BODY имеет довольно много атрибутов, однако рекомендуемыми к применению являются только id, class, style, title, lang и dir.

Редакторы для верстки веб-страниц

Редактор для верстки веб-страниц или HTML-редактор - это компьютерная программа, позволяющая составлять и изменять документы в формате HTML. Сегодня на запрос в сети Интернет по ключевому словосочетанию "HTML-редактор" можно получить перечень из сотни разнообразных программ. Однако все редакторы делятся на два класса: визуальные и текстовые.

Визуальные редакторы не требуют от разработчика знаний HTML, CSS и других технологий разметки документов. Пользователь просто располагает различные элементы будущей страницы в окне редактирования, а редактор сам генерирует соответствующий код. Именно поэтому визуальные редакторы еще называют WYSIWYG-редакторами, что означает What You See Is What You Get — что видишь, то и получаешь.

Визуальные редакторы обычно располагают массой функций, призванных облегчить работу разработчику. Так, хороший редактор должен обладать подсветкой синтаксиса, возможностью предварительного просмотра созданного документа, менеджером проектов, библиотеками различных элементов и др.

•f Kompozer Ему web MJthorint [file:/...Andex .trtml) KompoZer

File y«w [nsert Fermat Tafck locfc Hdp

ОМ» S«v. PU*>h Bio»» Undo Rodo Arxhoi Іж* bog. ТаЫо Fom HTML CSS

P««9«h И|~

voMbeWdh 3 ?- ? Д’ А* в / U E 1 3

> $йеМалдо

* DOM Explorer

Eiementt

I - hird л J

head

S body

dvBhe.xfcf

  • - dvCteatiredwiacc*4
  • - drvtte^vied в dr* ciast»’*

h2

P P pdrns drvchs»-”

Ecmpozer • Ему web л/hotng

KompoZer

Easy Web Authoring!

HOME FEATURES SCREENSHOTS OOWNLOA

Easy Web Authoring!

.KompoZer is a complete web authoring system that combines web file management

Пример свободно распространяемого визуального редактора для верстки сайтов

Рис. 2.12. Пример свободно распространяемого визуального редактора для верстки сайтов

К популярным визуальным редакторам относятся продукты компании Adobe — GoLive и Dreamweaver, а также Microsoft SharePoint Designer и Microsoft ExpressionWeb. Данные редакторы являются проприетарными, хотя производители предлагают всем желающим ознакомительные версии данных программ. Так, ознакомительную версию Microsoft Expression Web4 можно получить бесплатно [31].

Среди свободно распространяемых редакторов стоит выделить редактор Nvu, который хоть и уступает в функциональности упомянутым выше редакторам, однако бесплатное распространение делает его привлекательным для многих разработчиков [32].

Однако ни один визуальный редактор не совершенен, и все они так или иначе ограничены в своих возможностях. Поэтому профессиональные разработчики часто пользуются небольшими текстовыми редакторами. Текстовые редакторы, как правило, содержат набор функций, облегчающих разработчику написание кода. К наиболее распространенным функциям относятся подсветка кода, различные горячие клавиши и т.д. К наиболее популярным текстовым редакторам относятся Macromedia HomeSite и HTML Pad. Однако лидером среди текстовых редакторов является Notepad (он же Блокнот). В этой программе нет никаких специальных функций, но зато она есть у каждого пользователя Windows, т.к. входит в число стандартных. С нее можно начать свои первые шаги в написании кода, а затем уже сменить па более понравившийся редактор.

Вопросы по теме

  • 2
  • 1. Какая цветовая схема создается при выборе одного цвета и добавлении к нему двух других цветов, расположенных на одинаковых расстояниях друг от друга на цветовом круге?
  • 2. Какие цвета считаются основными в системе RGB?
  • 3. Что понимается под юзабилити сайта?
  • 4. Приведите примеры строковых элементов.
  • 5. Приведите вариант синтаксически корректной записи элемента Р.
  • 6. К каким элементам недопустимо применять атрибуты id, class и style?
  • 7. На какую страницу попадает пользователь без указания имени файла?
  • 8. Приведите корректные фрагменты HTML-кода.
  • 9. Какая цветовая схема создается при использовании одного базового цвета и всех его оттенков?
  • 10. Приведите фрагмент кода, реализующего правильную вложенность элементов:
  • 11. Какой атрибут позволяет задать принадлежность элемента определенному классу?
  • 12. Какие атрибуты могут быть у конечных тегов?
  • 13. Приведите элементы, присутствие которых в элементе HEAD обязательно.
  • 14. Какие цвета считаются дополнительными в системе RGB?
  • 15. Как может быть решена проблема отсутствия нужного для страницы шрифта у пользователя?
  • 16. Приведите примеры правильного использования атрибутов элементов HTML:
  • 17. Отметьте верные утверждения.
  • 19. При каких условиях в текстовых блоках может применяться кодировка UTF-8?
  • 20. Приведите пример правильного синтаксиса текста комментария.
  • 21. Приведите правильные утверждения, которые определяют действия строковых элементов HTML кода страницы.
  • 22. HTML-документ представляет собой набор элементов, укажите эти свойства.
  • 23. Для чего должен использоваться язык разметки гипертекста HTML?
  • 24. Какие основные преимущества дает пользователям спецификация HTML5?
  • 25. Когда и какой браузер первым смог отображать графические элементы?
 
Посмотреть оригинал
< Пред   СОДЕРЖАНИЕ   ОРИГИНАЛ   След >