Саратовский государственный университет им. Н.Г. Чернышевского
Опубликован: 17.06.2010 | Доступ: свободный | Студентов: 4093 / 912 | Оценка: 4.52 / 4.19 | Длительность: 11:02:00
Лекция 4:

Введение в HTML

< Лекция 3 || Лекция 4: 12 || Лекция 5 >

Атрибуты

Элементы могут также иметь атрибуты, которые определяют дополнительную информацию о них. Многие атрибуты в HTML являются общими для всех элементов, однако большинство из них являются специфическими для данного элемента или группы элементов.

Атрибуты размещаются в начальном теге после имени элемента и отделяются друг от друга одним или несколькими пробелами, причем порядок следования атрибутов в теге значения не имеет. Значение атрибута (если таковое имеется) следует за знаком равенства, стоящим после имени атрибута. Значение должно быть помещено в одиночные или двойные кавычки. Несмотря на то, что в некоторых ситуациях кавычки можно опустить, Спецификация HTML рекомендует всегда заключать значения атрибутов в кавычки. Имена атрибутов могут быть набраны в любом регистре, однако их значения могут зависеть от регистра.

Все атрибуты и их возможные значения определяются в основном Спецификациями HTML (http://www.w3.org/TR/html401/index/attributes.html). Пользователь не может создавать свои собственные атрибуты или использовать значения, не определенные Спецификацией, так как это может вызывать проблемы правильной интерпретации веб-страницы.

Как было отмечено, ряд атрибутов применим практически ко всем элементам HTML. Наиболее часто используемыми атрибутами являются базовые атрибуты ( class, id, style и title ), определяющие общие свойства элементов, и локализующие атрибуты ( dir и lang ), которые указывают на свойства языка написания содержимого элемента. Кратко рассмотрим эти атрибуты.

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

<P id="footer">Знание – сила! </P>

Атрибут class задает принадлежность элемента определенному классу. В отличие от атрибута id, к одному классу может относиться любое количество элементов. Кроме того, элемент может принадлежать к нескольким классам: в этом случае значением атрибута является список имен классов, разделенных пробелами. Однако большинство браузеров не поддерживают списки классов. Атрибут class в основном используется в качестве селектора стилей. В следующем примере созданный параграф включается в класс элементов с именем header:

<P class="header">Заглавный текст</P>

Атрибут style позволяет задать стиль элемента. Однако для использования этого атрибута в заголовок документа должен быть включен метаописатель. Следующий пример демонстрирует способ изменения цвета шрифта для заданного параграфа:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<META http-equiv="Content-Style-Type" content="text/css">
...
</HEAD>
<BODY>
...
<P style="color: red">Мир, труд, май! </P>
...
</BODY>
</HTML>

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

Все три описанных выше атрибута можно применить ко всем элементам, кроме элементов BASE, HEAD, HTML, META, SCRIPT, STYLE и TITLE.

Атрибут title определяет заголовок элемента и часто используется обозревателями в качестве подсказки, которая выводится на экран, когда курсор помещается на данный элемент. Приведенный ниже пример демонстрирует использование атрибута title совместно с элементом A, создающим ссылку на веб-страницу:

<A href="http://www.microsoft.com"
title="Официальный сайт Microsoft">Microsoft</A>

Атрибут lang определяет язык, на котором написаны значения остальных атрибутов данного элемента и его содержимое, а также всех вложенных элементов, не имеющих аналогичного атрибута. Использование атрибута позволяет авторам менять стиль текста в зависимости от языка. Например, текст двуязычного документа может быть оформлен следующим образом:

...
<P lang="en">This paragraph is in English. </P>
<P lang="ru">Этот абзац на русском языке. </P>
...

Атрибут dir определяет направление вывода текста: слева направо ( dir="ltr", по умолчанию) или справа налево ( dir="rtl" ). Для всех символов в кодировке Unicode в целях правильного отображения текста определено направление. Так, латинские и русские буквы выводятся слева направо, а еврейские и арабские – справа налево.

Стандарт Unicode определяет двунаправленный алгоритм, который должен применяться всякий раз, когда документ содержит символы, выводимые справа налево. Хотя обычно этот алгоритм дает правильное изображение текста, существуют ситуации, когда направление вывода текста приходится задавать явно с помощью атрибута dir.

Специальные символы и ссылки-мнемоники

В документ HTML также могут быть включены ссылки-мнемоники (или символьные ссылки). Данные ссылки предназначены для ввода в документ нестандартных и специальных символов. К нестандартным относятся символы, которые трудно или невозможно ввести с помощью клавиатуры или в кодировке конкретного документа. К специальным символам относятся символы, которые начинают и заканчивают части документа HTML, а не представляют соответствующие символы (<, >, & и ").

Ссылки-мнемоники начинаются знаком & и заканчиваются точкой с запятой (;). Однако многие браузеры могут быть достаточно лояльны к ошибкам HTML, таким как отсутствие точки с запятой.

Ссылки могут быть либо числами (числовые ссылки), либо сокращенными словами (объектные ссылки). Например, амперсанд может быть введен в документ как &amp;, что является объектной ссылкой символа, или как &#38;, что является числовой ссылкой. Полную таблицу символьных ссылок можно найти на сайте evolt.org (http://www.evolt.org/article/A_Simple_Character_Entity_Chart/17/21234).

Комментарии в HTML

HTML-документы могут содержать комментарии, которые являются удобным средством для описания кода, поиска разделов документа или объяснения мотивов, которыми руководствовался разработчик кода. Комментарии не влияют на отображение документа, а только поясняют его содержимое при просмотре HTML-кода. Текст комментариев располагается между двумя группами символов: открывающим ограничителем ( <!-- ) и закрывающим ограничителем ( --> ). В тексте комментариев запрещается использовать два или более подряд идущих дефиса.

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

<!-- это комментарий -->
<!-- это комментарий,
     занимающий две строки -->

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
    <TITLE>Пример простого HTML-документа</TITLE>
</HEAD>
<BODY>
    <P>Это самый простой HTML-документ.</P>
</BODY>
</HTML>

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

Вид в браузере простого HTML-документа

Рис. 4.1. Вид в браузере простого HTML-документа

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

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

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

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

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

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

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

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

К популярным визуальным редакторам относятся продукты компании Adobe - GoLive и Dreamweaver, а также Microsoft FrontPage и Microsoft Expression Web. Данные редакторы являются проприетарными, хотя производители предлагают всем желающим ознакомительные версии данных программ. Так, ознакомительную версию Microsoft Expression Web можно получить, перейдя по ссылке http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=0a73a3a7-3e06-4125-b3c6-f9c10387e9cc. Среди свободно распространяемых редакторов стоит выделить редактор Nvu, который хоть и уступает в функциональности упомянутым выше редакторам, однако бесплатное распространение делает его привлекательным для многих разработчиков.

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

< Лекция 3 || Лекция 4: 12 || Лекция 5 >
Галина Башкирова
Галина Башкирова

Здравствуйте, недавно закончила курс по проф веб программиованию, мне прислали методические указания с примерами тем, однако темы там для специальности 

Системный администратор информационно-коммуникационных» систем.
Мне нужно самой найти тему? или делать по высланным темам

 

Константин Моренко
Константин Моренко