Лекция 3: Структура HTML-документа. Ввод и Оформление текста. 1.1 Тег
advertisement
Лекция 3: Структура HTML-документа. Ввод и Оформление текста. 1. Условные обозначения. 1.1 Тег 1.2 Атрибут тега 2. Структура HTML-документа: 2.1 <!DOCTYPE> 2.2 <HTML> 2.3 <HEAD> 2.4 <TITLE> 2.5 <META> 2.6 <STYLE> 2.7 <LINK> 2.8 <SCRIPT> 2.9 <BASE> 2.10 <BODY> 3. Оформление текста. 3.1 <H1,2,3,…> 3.2 <P> 3.3 <BR> 3.4 СПИСКИ: маркированный <UL>, Нумерованный <OL>, список определений <DL>, вложенные списки. 3.5 ССЫЛКИ Условные обозначения: Тег – это элемент языка HTML, который несет в себе определенную информацию, может писывать документ в общем или способ форматирования текста. Т. помещается в угловые скобки. Контейнер – информация, заключенная между открывающимся и закрывающимся тегом. Открывающий Т. включает форматирование, закрывающий – выключает его. T. нужен для того, чтобы сообщить браузеру, какой элемент должен быть на месте тега или какого типа информация заключена внутри Т. Кроме того, теги показывают, как следует отображать эту информацию. Атрибут – элемент тега, который сообщает браузеру, каким образом должен отображаться тот или иной элемент страницы. А. позволяют сделать более разнообразным внешний вид информации. В некоторых случаях использование тега без атрибутов не дает результатов. Пример. В одном абзаце нужно выровнять текст по левому краю, а в другом – по правому. Чтобы задать выравнивание абзаца, используют А. ALIGN тега <P>. <P align=”left”>Выравнивание по левому краю</P> <P align=”right”>выравнивание по правому краю</P> Значение А. задается после знака = в “”. Значения А. как правило, различаются в зависимости от тега. Структура HTML документа <!DOCTYPE> тег записывается в начале HTML-файла. Он описывает документ и предоставляет основную информацию для браузера. ЛИСТИНГ 1.1 <!DOCTYPE html PUBLIC “-//w3c//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd”> html-показывает, что для создания документа используется язык HTML public-указывает на то, что при создании документа использовалась общепринятая версия HTML. “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd” – адрес URL-документа, в котором описываются элементы и атрибуты, используемые в соответствии с версией языка. В этом теге содержится общая служенная информация о странице. <HTML> - главный структурный т. страницы. Все содержимое страницы записывается внутри его контейнера <HTML> СОДЕРЖИМОЕ САЙТА </HTML>. xmlns – задает пространство имен для xml-документа, поскольку наш документ является разновидностью xml-документа. Lang – задает язык документа. Xml:lang – тоже задает язык документа. Title – задает всплывающую подсказку для страницы. ЛИСТИНГ 1.2. <!DOCTYPE html PUBLIC “-//w3c//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” title=”Моя страничка” lang=”ru” xml:lang=”ru”> <!-- Содержимое документа --> </html> <HEAD> используется для служебных целей, введенная в нем информация не отображается в окне браузера, однако он содержит множество данных, которые указывают браузеру, как следует обрабатывать страницы. Теги, находящиеся внутри контейнера <head>, помогают браузеру в обработке страницы, а поисковым системам – в индексации документа. Т. не имеет атрибутов, т.к. он только лишь выполняет структурирующие функции. ТЕГИ внутри <HEAD> <title> - задает заголовок окна <meta> - задает служебную информацию <script> - позволяет добавлять сценарии <link> - задает ссылку на таблицы стилей <style> - позволяет добавить стили для страницы <base> - задает базовый адрес документа <basefont> - задает для страницы шрифт по умолчанию <bgsound> - фоновый звук на странице <TITLE> - задает название страницы, которое будет отображаться в строке с названием приложения окна браузера. Этот тег требует закрывающий тег </TITLE>. При сохранении страницы в разделе «Избранное» в качестве называния ссылки будет использоваться текст, записанный в теге <TITLE>. Некоторые поисковые системы используют текст, содержащийся в этом теге, для поиска и выводят его в качестве заголовка результата поиска. ЛИСТИНГ 1.3 <!DOCTYPE html PUBLIC “-//w3c//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd”> <html> <title>Пример создания заголовка страницы</title> </head> <!—Содержимое документа--> </html> <META> используется для хранения дополнительной информации о страницею Эту информацию используют браузеры для обработки страницы, а поисковые системы – для ее индексации. Их может быть несколько в блоке <HEAD>, т.к. они могут нести разную информацию. АТРИБУТЫ <META>: 1) CONTENT – используется вместе с А. HTTP-EQUIV и NAME. Задает значение свойства, которое указывается с их помощью. 2) HTTP-EQUIV – устанавливает служебные св-ва документа, например его кодировку, дает браузеру информацию о том, как нужно обрабатывать документ. К его значениям относятся: Content-Type- определяет тип содержимого документа. Желательно указывать всегда; Expires – задает время действия документа. После даты, указанной для этого св-ва, документ считается устаревшим; Pragma – определяет тип кэширования вашего документа, т.е. можно запретить браузеру сохранять страницу в кэш. Refresh – позволяет задать параметры автоматической загрузки документа в то же окно браузера, что и текущий документ; ContentLanguage – задает язык содержимого, является аналогом атрибута lang тега html; Content-Script-Type Типы сценариев, используемых на сайте; Content-Style-Type задает типы таблиц стилей. 3) NAME – содержит служебную информацию о документе, хранит данные об авторе и содержимом документа. Эти данные не влияют на обработку документа браузером, однако предоставляют информацию для поисковых систем. . К его значениям относятся: Keyword – задает ключевые слова, используемые на страницу. По этим словам осуществляют поиск поисковые системы; Description – описание содержимого документа; Author – задает автора документа; DocumentState – задает необходимость переиндексации страницы; Resource-Type – задает тип ресурса [Возможные типы рассмотрим ниже, однако надо учитывать, что если тип документа отличается от «Document», то поисковые системы не будут его индексировать]; Revisit – период переиндексации документа (в днях); Robots – указания для роботов и поисковых машин; Subject – задает тематику документа для поисковых машин. 4) ROBOTS – дает команды поисковым машинам: Index – эта страница должна индексироваться; Noindex – эта страница не должна индексироваться; Follow – индексировать страницы по ссылкам с этой страницы; Nofollow – не индексировать страницы по ссылкам с этой страницы; All – эта страница должна индексироваться, индексировать страницы по ссылкам с этой страницы; None – эта страница не должна индексироваться, не индексировать страницы по ссылкам с этой страницы. Встретив строку URL, робот прекратит индексацию текущей страницы и перейдет на страницу с адресом www.test.ru ЛИСТИНГ 1.4 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” title=” English Learning Website ” lang=”en” xml:lang=”en”> <head> <title>English Learning Website</title> <meta http-equiv=”Content-Type” content=”text/html; charset=windows-1251”/> < meta http-equiv=”refresh” content=”10; URL=http://www.test.ru” /> <meta http-equiv=”pragma” content=”no-cache” /> <meta http-equiv=”expires” content=”Sun, Oct 2010 10:09:00 GMT+3 /> <meta name=”author” content=”Автор сайта – Mihailov Alexandr” /> <meta name=”description” content=”Использование тега <meta> для индексации сайта в поисковых системах” /> <meta name=”document-state” content=”Dynamic” /> <meta name=”keywords” content=”английский, обучение, писать, аудирование, чтение, курсовые” lang=”ru” /> <meta name=”keywords” content=”English, studying, writing, listening, practice, reading” lang=”en” /> <meta name=”Resource-Type” content=”Document” /> <meta name=”Revisit” content=”2” /> <meta name=”Robots” content=”all” /> </head> <!—Содержимое документа--> </html> <BODY> внутри этого т. располагается документ. Текст, находящийся внутри, будет отображаться в браузере. Атрибуты <BODY> применяются для того, чтобы установить общие для всего документа свойства, и в этом отношении возможности данного тега достаточно велики: можно задать цвет ссылок, параметры фона и т.д. Атрибуты <BODY>: 1) alink – задает цвет активной ссылки 2) vlink – задает цвет посещенной ссылки 3) link – задает цвет непосещенной ссылки 4) bgcolor – задает цвет фона. 5) Bgproperties – определяет, будет ли фон прокручиваться вместе с текстом или нет: может принимать только одно значение FIXED. 6) Bottommargin – расстояние от нижнего края окна браузера до содержимого страницы 7) Leftmargin – расстояние от левого края окна браузера до содержимого страницы 8) Topmargin – расстояние от верхнего края окна браузера до содержимого страницы. Расстояние для все таких А. устанавливается в пикселах. Цвета ссылок можно задать в hex-формате или с помощью ключевых слов. ЛИСТИНГ 1.5 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” title=” English Learning Website ” lang=”en” xml:lang=”en”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=windows-1251”/> <title>Использование тега BODY</title> </head> <body alink=”#00FF00” vlink=”red” link=”#330000” </body> </html> <H> - заголовок: h1 – самый значимый, крупный размер шрифта; h6 – самый мелкий по умолчанию. Атрибуты <H>: 1) Align – выравнивание заголовка: left – по левому краю; right – по правому краю; center – по центру; justify – по ширине (для заголовков длиннее строки). 2) Title – «текст всплывающей подсказки». <P> вводит на страницу абзац. Атрибуты <P>: 1) Align - left – по левому краю; right – по правому краю; center – по центру; justify – по ширине (для заголовков длиннее строки). 2) Title – «текст всплывающей подсказки». ЛИСТИНГ 1.6 <html> <head> <title> Абзацы</title> </head> <body> <p align=”center” title=”Абзац, выровненный по центру”>Это абзац по центру</p> </body> </html> <BR> - служит для переноса текста на новую строку. ЛИСТИНГ 1.9 <html> <head> <title> Обрывки строк</title> </head> <body> Я памятник себе воздвиг нерукотворный, <br /> К нему не зарастет народная тропа, <br /> Вознесся выше он главою непокорной <br /> Александрийского столпа. <br /> </body> </html> Списки <UL> - для создания маркированных списков. Элементы списка находятся внутри блоков <UL>. Каждый элемент списка начинается с тега <LI> Атрибут <UL>: 1) TYPE: circle – создает маркер в виде круга, белого внутри; square – маркер в виде квадрата; disc – маркер в виде закрашенного черным круга. ЛИСТИНГ 1.7 <html> <head> <title> Списки</title> </head> <body> <ul> <li type=”circle”>Земля</li> <li type=”square”>Марс</li> <li type=”disc”>Луна</li> </ul> </body> </html> Чтобы вставить вместо маркера собственную картинку применяем тег <img src=”marker.jpg”/> Венера<br/> <img src=”marker.jpg”/>Земля<br/> НУМЕРОВАННЫЙ <OL> создает нумерованные списки. Атрибут <OL>: 1) Type- А – пункты нумеруются заглавными буквами латинского алфавита; а – строчными; I – заглавными римскими цифрами; i – строчными римскими цифрами; 1 – арабскими цифрами. 2) Start – указывает, с какого числа начинать нумерацию. ЛИСТИНГ 1.11 <html> <head> <title>Списки</title> <body> <ol type=”1” start=”6”> <li>Достать ключ</li> <li>Вставить ключ в замочную скважину</li> <li>Повернуть ключ по часовой стрелке на два оборота</li> <li>Достать ключ из замка</li> <li>Открыть дверь</li> </ol> </body> </html> Списки определений: <DL> - т.-контейнер, внутри которого находятся определение и описание термина. Чтобы задать внутри него определение используем <DT>. А толкование определение осуществляем через <DD>. ЛИСТИНГ 1.8 <html> <head> <title>Списки</title> </head> <body> <dl> <dt>Земля</dt> <dd>Третья планета Солнечной системы</dd> <dt>Марс</dt> <dd>Четвертая планета Солнечной системы</dd> </dl> </body> </html> <A> этот т. применяется для создания ссылок. Атрибутом <A> является <href>. Ссылки бывают внешними – те, которые ведут на другой сайт, страничку; внутренние – организуют переходы внутри одного HTML-документа. Атрибут NAME – обозначает место, куда приводит пользователя ссылка. В качестве значения NAME – можно брать любое имя. Желательно, чтобы оно характеризовало текущее место – так будет проще пользоваться метками. Затем создаем ссылку на эту метку. Надо лишь ввести адрес метки в таком формате: #met1, где met1 – имя метки. При щелчке мыши на ссылке браузер автоматически перейдет к месту, указанному меткой. ЛИСТИНГ 1.9. <html> <head> <title> ССЫЛКИ</title> </head> <body> <a name=”met2”>Это метка для перехода 2</a><br /> <a href=”#met1”>Кликните для перехода к метке 1</a><br /> <a href=”#met2”>Кликните для перехода к метке 2</a><br /> <a name=”met1”>Это метка для перехода 1</a> </body> </html>
