Добавлен: 01.04.2023
Просмотров: 300
Скачиваний: 1
Далее определим кодировку символов документа. Если этого не сделать, появляется неясная, но реальная угроза безопасности. Кодировка должна быть указана в первых 512 байтах документа; лучше всего использовать UTF-8 (если нет серьезных оснований для выбора другой кодировки).
<!DOCTYPE html>
<meta charset=utf-8>
Посмотрите внимательно на тег <meta>. Если вы привыкли к XHTML, то заметите три странности. Во-первых, этот тег гораздо короче (раньше он бы выглядел так: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">). Старый вариант остается допустимым, однако новый использовать все же предпочтительнее, поскольку он везде работает и его проще напечатать.
Вы также заметите, что я не использовал кавычки для атрибута charset="utf-8". Кроме того, я не закрыл тег <meta charset=utf-8 />. [4, c. 24]
<HEAD></HEAD>
Итак, как мы уже говорили, у страницы есть «голова». Так же, как и у человека, от названия которой и произошло название тега <HEAD>, она расположена над «телом». И также существует она в единственном экземпляре. Все, что здесь размещено, на странице мы практически не увидим, но, тем не менее, эта информация очень важна. Именно здесь определяется и имя страницы, и на каком языке она будет «разговаривать», да и вообще вся система управления, подобно нервной системе, также находится «в голове». Иногда этот тег называет также заголовков страницы. [1, c. 25] Головная часть документа является служебной. Она обычно включает в себя название документа <title>. Кроме того, в нее часто помещается <МЕТА>-информация - ключевые слова и описание документа, которые читаются некоторыми программами-роботами. [2, c. 8] Содержимое элемента HEAD не отображается напрямую на веб-странице, за исключением элемента TITLE, устанавливающего заголовок веб-страницы. Раздел HEAD может содержать в себе следующие элементы: TITLE, МЕТА, BASE, LINK, STYLE, SCRIPT и OBJECT. В лекции мы дадим лишь основные подходы к работе с перечисленными элементами. Более подробно ознакомиться с ними можно в Спецификации HTML. [5, c. 45]
Подробнее о тегах заголовка <HEAD>
<TITLE></TITLE> - тег предназначен для указания имени созданному электронному документу. Следует помнить, что под именем документа в данном случае имеется в виду не файловое наименование, а название, отображаемое в заголовке окна браузера.
Название может иметь неограниченную длину и содержать любые символы, кроме некоторых зарезервированных (желательно не более 60 символов). [1, c. 26]
По умолчанию этот текст используется при создании закладки (bookmark) для документа. Избегайте безликих названий (Home Page, Index и т. д.).
<BASE> - тег предназначен для документов, в которых используется относительный адрес и эти документы могут переноситься в другую папку или даже на другой компьютер без потери связи. Браузер ищет тег <base>, определяет полный адрес документа и корректно загружает его.
Например, если адрес документа указан как <base href="http://www. narfu.ru/dirl">, то при добавлении рисунков достаточно использовать относительный адрес <img src="images/lada.gif">.
При этом полный путь к изображению будет http://www.narfu.ru/dirl/images/lada.gif, что позволяет браузеру всегда находить графический файл, независимо от того, где находится текущая web-страница.
Также можно применять и иерархическую систему пути с двумя точками. Так, если изображение добавляется как <img src="../images/lada.gif">, то полный путь к файлу будет http://www. narfu.ru/images/lada.gif.
Тег имеет один обязательный параметр HREF, после которого указывается полный URL-адрес документа.
<BASE HREF="http://ww.narfu.ru/’’> [1, c. 27]
Тег BASE используется для явного задания полного URL-адреса документа. Это бывает полезно ввиду того, что общепринятым стилем задания гипертекстовых ссылок является их относительная адресация. То есть при задании ссылки на документ указывается не полный его URL-адрес, а его месторасположение относительно текущего адреса. Элемент BASE как раз и Использование элемента BASE позволяет поддерживать относительные ссылки в том случае, когда HTML-документ перемещен, а все остальные документы, на которые он ссылается, остались на прежнем месте. Адрес документа поменялся, однако при активизации относительной ссылки, она будет взята браузером относительно исходного адреса, прописанного в элементе BAS
Тег BASE можно использовать и в заголовке, и в теле документа, причем несколько раз. Область действия элемента определяется от места его задания и до конца документа или до следующего объявления элемента BASE, если таковой имеется. [5, c. 49]
<LINK> - устанавливает связь с внешним документом вроде файла со стилями или со шрифтами. Он состоит из URL-адреса и параметров, конкретизирующих отношения документов. Заголовок документа может содержать любое количество тэгов <LINK>.
<LINK HREF="styles/main.css" TYPE="text/css" REL="stylesheet">
Возможные параметры тега <LINK>:
HREF-путь к связываемому файлу.
MEDIA-определяет устройство, для которого следует применять стилевое оформление.
REL-определяет отношения между текущим документом и файлом, на который делается ссылка.
TYPE MIME-тип данных подключаемого файла.
<МЕТА>, так называемые Мета - определения. Они предназначены для описания внутренних свойств HTML-файла, не отражающихся при просмотре Web-страницы, но использующихся для хранения информации, предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Один из немногих тегов, не являющихся парным.
Каждый элемент МЕТА содержит два основных параметра, первый из которых определяет тип данных (NAME, HTTP-EQUIV), а второй — содержание (CONTENT). Также иногда используется и дополнительный параметр URL. Заголовок документа может содержать любое количество тэгов МЕТА. [1, c. 28]
Метатеги предназначены для помещения в код веб-страницы информации о ней самой. Эта информация используется поисковыми системами Интернета, браузерами и редакторами веб-страниц Она никак не отображается в окне веб-обозревателя. [3, с 60]
<STYLE></STYLE>, необязательный тег. Тег <style> применяется для определения стилей элементов web-страницы. Тег <style> необходимо также использовать внутри контейнера <head>. Можно задавать более чем один тег <style>, но желательно переносить описания в отдельные файлы *.css «таблицы описания стилей».
<SCRIPT></SCRIPT> - содержит код исполняемых сценариев (скриптов). [1, с. 32] Тег SCRIPT предназначен для добавления так называемых клиентских сценариев - сценариев, которые выполняются браузером и написаны на языке JavaScript. JavaScript добавляет динамическое поведение в статические документы HTML, например, эффекты анимации, или проверку данных формы, или другие функции, которые запускаются, когда пользователь выполняет определенные действия.
Тег SCRIPT может располагаться в заголовке или теле HTML-документа в неограниченном количестве. Когда браузер встречает такой сценарий, он прекращает разбор оставшегося документа, пока не выполнит код сценария. Поэтому, чтобы гарантировать, что код JavaScript будет доступен до загрузки основного документа, его необходимо поместить в раздел HEAD. [6, c. 53]
<BODY></BODY>
Один из самых важных компонентов любого HTML-документа, в нем располагается содержательная часть, которая выводится браузером на экран монитора пользователя. Внутри элемента BODY можно использовать все элементы, предназначенные для дизайна Web-страницы. [1, с. 32] Определяет "видимую" часть HTML-документа. В документе должно быть только одно тело. [2, c. 9]
Тег имеет ряд параметров, которые условно можно разделить на четыре основные группы (параметры фона, границ документа, текста и гиперссылок). Если эти параметры не указывать, то соответствующие свойства страницы — отступы, цвета и др. — будут такими, какие заданы по умолчанию в браузере.
Все параметры, которые задаются с помощью тега <BODY> можно разделить на четыре группы:
- параметры фона,
- параметры текста,
- параметры гиперссылок,
- параметры границ документа.
Параметры фона
К параметрам, отвечающим за оформление фона страницы, относят следующие: цвет фона, фоновое изображение и его прокрутка. За это отвечают следующие параметры:
BGCOLOR - определение цвета фона
BACKGROUND - указание полного пути нахождения фонового рисунка
BGPROPERTIES - изменение свойств фона (например, фиксирование фонового рисунка) не поддерживается Firefox
Параметры текста
Из параметров текста документа в большей степени применяется только один — TEXT. Он задает цвет основного текста на странице (значение параметра может быть введено аналогично цвету фона документа как с помощью словесного задания цвета, так и в шестнадцатеричном представлении или раскладке цветов rgb):
<BODY TEXT="black"> [1, c. 34]
Параметры гиперссылок
С помощью тега <BODY> возможно также задать, как будут выглядеть гиперссылки на странице. За это отвечают следующие параметры:
ALINK - устанавливает цвет активной ссылки. (Ссылка становится активной, когда на нее нажимают курсором мыши или выделяют с помощью клавиатуры).
LINK - определяет цвет не посещённых ссылок
VLINK - определяет цвет посещенных ссылок, т.е., таких ссылок, на которые пользователь уже «нажимал».
Параметры границ документа
Эти параметры определяют отступы от края документа до содержимой страницы. Значения задаются в пикселях, значение по умолчанию 10 пикселей. Синтаксис употребления параметров:
TOPMARGIN от верхнего края
BOTTOMMARGIN от нижнего края
LEFTMARGIN от левого края
RIGHTMARGIN от правого края от правого края [1, c. 35]
Каждая веб-страница начинается с тега <html> и заканчивается им же </html>. Каждый html-документ состоит из двух частей: head и body. В этой главе мы рассмотрели структуру html страницы и основные теги для ее формирования.
3. Форматирование текста, документа
Теперь, когда мы разобрали разметку для основных частей страницы с помощью тегов и увидели, как создается структура документа, пришло время заглянуть глубже и познакомиться с различными способами форматирования текста (документа).
При верстке веб-страницы текст размечают тегами. Теги добавляют тексту дополнительное значение и позволяют браузерам правильно отображать структуру страницы. [6, с. 44]
В этой главе мы заострим внимание на том, как добавить разметку к тексту, выводимому на страницы. Разметку можно разделить на:
• структурную разметку — элементы, которые вы можете использовать для описания и заголовков и абзацев;
• семантическую разметку, предоставляющую дополнительную информацию, например, на какое слово или словосочетание в предложении делается логическое ударение, является ли какой-то написанный текст цитатой, какова расшифровка акронима и т.д. [6, с. 44]
Текст — единственный объект Web-страницы, который не требует специального определения. Иными словами, произвольные символы интерпретируются по умолчанию как текстовые данные.
Но, тем не менее, работая с текстом, на веб-странице стоит помнить ряд правил:
1. О расстановке пробелов и переносе строк.
- Сколько бы ни стояло пробелов между словами при написании кода страницы, это никак не повлияет на конечный вид текста. На странице в браузере будет отображен лишь один.
Это же правило относится к символам табуляции и переносу текста - в браузере они не видны. Поэтому не ставьте лишних пробелов, поскольку это лишь увеличит общий объем файла, но никак не изменит вид документа в браузере.
Исключением из этого правила является тег <рге>, внутри которого любое число пробелов отображается именно так, как оно указано в коде.
2. О переносах в тексте.
- HTML не поддерживает расстановку переносов в словах, иначе говоря, все слова пишутся целиком без их разбиения. Это неудобство наиболее явно проявляется при выравнивании текста по ширине.
3. Текст размещается по всей ширине окна браузера.
- Если в тексте есть пробелы или дефисы, браузер автоматически разобьет его на строчки так, чтобы текст уместился в окне.
- Если же в тексте нет знаков пробела или дефиса, браузер отобразит ее в одну строку, добавив горизонтальную полосу прокрутки, если она шире окна браузера. [1, c. 38]
Для форматирования текста существует большое количество всевозможных тегов, составляющих две основные группы — теги логического форматирования и теги физического форматирования.
Теги физического форматирования позволяют разработчику HTML-документа визуально изменять вид текста, варьируя его параметры и значения. Они предназначены для выделения отдельных текстовых фрагментов различными способами, установленными автором документа.
В группу тегов логического форматирования входят теги, отображающие на экране монитора элементы документа, таким образом, как установлено по умолчанию в спецификации языка разметки HTML. Переопределить их параметры или свойства нельзя, за исключением ситуаций использования стилевых шаблонов CSS и обособления тегами физического форматирования. Основное предназначение этих тегов — логическое выделение отдельных элементов HTML. [1, c. 39]