Способы создания Web-документов С помощью специального языка гипертекстовой разметки ( HTML – Hyper Text Markup Language) Использование специальных визуальных средств разработки, автоматизирующих процесс создания Web-документов. Разработка Web-документов средствами MS Word.

Cоздание с помошью HTML и его расширений (ХHTML, XML) Браузеры интерпретируют документы с этого языка и отображают на экране компьютера. Кроме содержательной части документы HTML включают специальные управляющие конструкции – теги. В окне браузера теги не отображаются . Они служат для разметки документа ( описания его логической структуры управления формированием документа, размещением в нем гиперсылок, графических изображений и других объектов).

При создании Web-документов с помощью языка HTML пользователю приходится вводить вручную не только содержательную часть документа, но и сами теги. Для этого ему нужно знать основные конструкции и синтаксис языка HTML или его расширений. Второй способ создания Web-документов предусматривает ввод не только содержательной части документа. Все управляющие конструкции генерируются в документе автоматически. Основное преимущество первого способа заключается в потенциальном многообразии конструкций языка HTML, которым может воспользоваться пользователь. Этот способ не накладывает никаких ограничений на создаваемый код и позволяет создавать достаточно компактные, универсальные и качественные Web-документы. Преимуществами второго способа являются наглядность и удобство создания Web-документов. Этот способ проще осваивать, так как он не требует знания языка HTML. Начинающим Web- разработчикам рекомендуется использовать именно этот подход.

Визуальные средства Отображают создаваемые Web-документы в том виде, в котором они представляются в браузере, позволяя разработчику видеть все элементы создаваемого документа включая форматирование текста, графические документы и т.д. Недостатками таких средств являются ограниченность рамками поддерживаемых конкретной программой средств, отсутствие оригинальности, а также значительный объем получаемого HTML – кода, что отрицательно сказывается на скорости загрузки Web-страниц.

Помимо обычных текстовых редакторов ASCII (например, Блокнота, встроенного в Windows) существуют коммерческие кодовые редакторы с мощными дополнительными инструментами и специальными функциями (например, мастером добавления изображений). К ним относятся Homesite – мощный HTML- редактор на основе Windows. В группе пакетов визуального редактирования выделим MS FrontPage2003 широко используется, но для профессиональных Web-дизайнеров он не пригоден. Среди профессиональных дизайнеров популярен Macromedia Dreamweaver MX2004- многофункциональный редактор для Macintosh и Windows. Он обладает отличной поддержкой стандартов и хорошо объединяется с серверными технологиями (PHP, ASP, ColdFusion и т.д.)

Основы языка HTML HTML – не является языком программирования, по сути это система тегов, которые интерпретируются браузером. Как и у любого языка, у HTML есть грамматика и существуют правили синтаксиса и семантики. Все теги заключаются в угловые скобки, например:
. Кроме отдельных тегов существуют теговые сеты (tagsets), содержащие теги открытия и теги закрытия. Тег закрытия отличается от тега открытия присутствием символа /, который добавляется перед именем тега. Например

-тег открытия первого абзаца,

Элементы с текстовым содержимым (заголовки, абзацы, элементы списков) называются контейнерами. Элементы, в которым нет содержимого, являются пустыми ( разрывы строки, горизонтальный разделитель, графические изображения). Теги могут содержать дополнительные параметры атрибуты, которые имеют название и значение, например: href=“hello.html”. Значение атрибута указывается после символа = и заключается в двойные (“) или одинарные (‘) кавычки

Строение элемента HTML Теговый сет Тег открытия Тег закрытия

Текст данного абзаца

Ряд тегов HTML составляет базовую структуру любого Web-документа Весь код HTML-документа заключается между парой тегов …- в самом конце. Открывающий тег помещается в самом начале документа, а закрывающий - в самом конце Элемент html – это «корень» документа. Внутри него размещаются два основных раздела HTML –документа: заголовок и тело документа.

Заголовок (head-голова) документа содержит общую информацию о текущем документе и заключается между тегом открытия и тегом закрытия . «Голова документа» может содержать название документа (title), метаданные (metadata), скрипты (scripts), Css (CSS -англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Преимущественно используется как средство описания, оформления внешнего вида веб-ДОКУМЕНТА .

элемент title с открывающим тегом обязателен всегда. Он используется для указания названия документа. При просмотре HTML -документа название документа отображается в строке заголовка окна браузера

Тело (body) документа содержит основной текст ( содержание) документа и заключается между тегом открытия и тегом закрытия . Таким образом, любой HTML-документ имеет следующий каркас: Содержание документа

Создание абзацев для создания абзацев используется элемент

. Атрибут align этого тега определяет режим выравнивания текста абзаца: значение center- выравнивание по центру, left – по левому краю, right- по правому краю, justify-по ширине страницы. Если атрибут align опущен, текст абзаца выравнивается по левому краю. Для создания абзацного отступа «красной строки» в языке HTML не содержится средств. Абзацы документа разделяются пустой строкой при отображении на экране компьютера.

Пример создания абзацев:

Первый абзац текста

Второй абзац текста

Третий абзац текста

Для создания заголовков отдельных частей документа используются специальные элементы , где n-число от 1 до 6, соответствующее уровню заголовку. Атрибут align этих тегов используется для указания режима выравнивания заголовков ( аналогично соответствующему атрибуту тега

. При отображении документа на экране компьютера заголовки разного уровня показывают при помощи шрифтов разного размера.

Примеры заголовков 1 и 2 уровней: Пример заголовка первого уровня:

Студент РГАУ-МСХА им. К. А. Тимирязева

экономического факультета

Теги, определяющие параметры шрифта или - полужирный щрифт или - курсив - моноширинный шрифт - крупный кегль - мелкий кегль ^{- верхний индекс _{- нижний индекс}}