Создание статического содержания. HTML
2.1.3.2.4. Script
Строка 14 содержит тег <SCRIPT>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
Тег <SCRIPT> предназначен для описания скриптов, может содержать ссылку на программу или ее текст на определенном языке [15]. Скрипты могут располагаться во внешнем файле и связываться с любым HTML -документом. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах.
<SCRIPT> может располагаться в заголовке или теле HTML -документа в неограниченном количестве. В большинстве случаев местоположение скрипта никак не сказывается на работу программы. Однако скрипты, которые должны выполняться в первую очередь, обычно помещают в заголовок документа.
- defer – откладывает выполнение скрипта до тех пор, пока вся страница не будет загружена полностью. Этот параметр работает только в браузере Internet Explorer, а в остальных браузерах будет проигнорирован.
-
language – устанавливает язык программирования, на котором написан скрипт.
Параметр language не чувствителен к регистру и может принимать одно из четырех значений:
- JavaScript (значение по умолчанию) – язык программирования JavaScript. К этому параметру часто еще присоединяют номер версии, например – JavaScript1.3.
- JScript – разновидность языка JavaScript разработанная компанией Microsoft. Смена названия продиктована тем, что имя JavaScript уже было зарегистрировано, при этом различия между языками состоят не только в названии, но и в подходах.
- VBS, VBScript - язык программирования VBScript основанный на Visual Basic. Является продуктом Microsoft и поддерживается преимущественно браузером Internet Explorer.
-
src – адрес скрипта из внешнего файла для импорта в текущий документ. Как только внешние инструкции полностью загружаются, браузер обрабатывает их, словно они были внедрены в текущий документ.
Преимуществ использования внешних файлов несколько. Внешний файл после первого обращения сохраняется в кэше браузера и при последующих вызовах загружается быстрее. Кроме того, вызываемые функции удобно править в одном месте и код проще контролировать. Это особенно актуально, когда множество веб-страниц используют одни и те же скрипты.
В качестве значения аргумента принимается полный или относительный путь к файлу.
-
type – указывает тип MIME для определенного языка. Поскольку некоторые старые браузеры не понимают параметр type, можно задавать два атрибута одновременно – language и type. Если браузер распознает значение параметра type, то значение language отменяется. Параметр type не чувствителен к регистру и принимает следующие значения:
- text/javascript (значение по умолчанию) – для языка программирования JavaScript.
- text/vbscript – для языка VBScript.
В нашем примере строка
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
указывает на использование Javascript-скрипта из внешнего файла.
2.1.3.3. Тело документа
Тело документа <BODY> предназначено для отображения данных на веб-странице, в частности, в теле размещается текст, изображения, ссылки, таблицы, списки и т.д.
В примере тело документа открывается на строке 16 и закрывается на строке 72.
2.1.3.3.1. DIV
На строке 17 (и еще в нескольких местах) находится тег <DIV>.
Элемент <DIV> является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого [16]. Как правило, вид блока управляется с помощью стилей CSS.
Cодержимое тега <DIV> всегда начинается с новой строки. После него также добавляется перенос строки.
-
align –задает выравнивание содержимого тега <DIV>. Аргументы:
- center – выравнивание текста по центру;
- left (значение по умолчанию) – выравнивание текста по левому краю;
- right – выравнивание текста по правому краю;
- justify – выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю.
- title – добавляет поясняющий текст к контейнеру <DIV> в виде всплывающей подсказки, которая отображается, когда курсор мыши задерживается на содержимом. В качестве аргумента принимает любую текстовую строку. Строка должна заключаться в двойные или одинарные кавычки.
2.1.3.3.2. Таблица
На строке 21 находится тег <TABLE>.
Для добавления таблицы на веб-страницу используется тег -контейнер <TABLE> [17]. Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. C помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений.
Для добавления строк используется тег <TR>. Чтобы разделить строки на колонки применяются теги <TD> и <TH>. Разница между этими тегами следующая. Тег <TH> предназначен для создания заголовков, содержимое такой ячейки обозначается жирным начертанием и выравнивается по центру. В остальном, действуют эти теги одинаково.
У каждого параметра таблицы есть свое значение, установленное по умолчанию. Это означает, что если какой-то атрибут пропущен, то неявно он все равно присутствует, причем с некоторым значением. Из-за чего вид таблицы может оказаться совсем другим, нежели предполагал разработчик.
Чтобы понимать, что можно ожидать от таблиц, следует знать их явные и неявные особенности, которые перечислены далее:
- одну таблицу допускается помещать внутрь ячейки другой таблицы;
- размеры таблицы изначально не установлены и вычисляются на основе содержимого ячеек;
- если для таблицы задана ее ширина в процентах или пикселах, то содержимое таблицы подстраивается под указанные размеры;
- если ширину содержимого ячейки невозможно изменить, то ширина таблицы увеличивается, несмотря на указанные размеры;
- пока таблица не загрузится полностью, ее содержимое не начнет отображаться;
- таблица, если не указано особо, всегда выравнивается по левому краю;
- по умолчанию таблица выводится без рамки;
Для изменения вида и свойств таблицы используется множество параметров, которые добавляются в теге <TABLE>. Описание параметров таблицы и их значений приведено в табл. 2.2.
| Свойство | Значение | Описание |
|---|---|---|
| align | left right center | Выравнивание таблицы. |
| background | Гиперссылка | Определяет изображение, которое будет использоваться в качестве фонового рисунка таблицы. |
| bgcolor | Код или название цвета | Цвет фона таблицы. |
| border | Число | Толщина рамки в пикселах. |
| cellpadding | Число | Расстояние между ячейкой и ее содержимым. |
| cellspacing | Число | Дистанция между ячейками. |
| cols | Число | Задает количество столбцов в таблице, помогая браузеру в подготовке к ее отображению. |
| nowrap | Запрещает переносы строк в тексте. | |
| frame | void above below lhs rhs hsides vsides box | Задание типа рамки таблицы |
| rules | all groups cols none rows | Определяет, где рисовать границы между ячейками. |
| width | Число или проценты | Минимальная ширина таблицы, можно задавать в пикселах или процентах. |
2.1.3.3.3. Заголовки
На строке 24 (а также 57) находится тег заголовка <H1> ( <H2> ).
Заголовки выполняют важную функцию на веб-странице [18]:
- они показывают важность раздела, к которому относятся, т.е. чем больше заголовок, тем более он значимый;
- с помощью различных заголовков легко регулировать размер текста, т.е. чем выше уровень заголовка, тем больше размер шрифта (самым верхним уровнем является уровень 1 ( <H1> ), а самым нижним – уровень 6 ( <H6> ));
- поисковики добавляют рейтинг тексту, если он находится внутри тега заголовка.
Синтаксис создания заголовков следующий.
<h1>Заголовок первого уровня</h1> <h2>Заголовок второго уровня</h2> <h3>Заголовок третьего уровня</h3> <h4>Заголовок четвертого уровня</h4> <h5>Заголовок пятого уровня</h5> <h6>Заголовок шестого уровня</h6>
Как правило, на веб-странице применяют заголовки с первого по третий уровень, их вполне достаточно. Редко когда приходится использовать заголовки более низкого уровня.
2.1.3.3.4. Ссылки
На строке 25 (а также в других местах) находится тег ссылки <A>.
Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку [19]. Оба действия выполняются с помощью тега <A>, который имеет единственный обязательный параметр href. В качестве значения используется адрес документа (URL).
Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Начинаются они с указания протокола передачи данных. Так, для веб-страниц это обычно HTTP, соответственно, абсолютные ссылки начинаются с ключевого слова http://.
Относительные ссылки, как следует из их названия, построены относительно текущего документа или адреса. Примерами относительных ссылок могут служить:
/ /demo/ /images/pic.gif ../help/index.html manual/info.html
Иногда можно встретить в адресе ссылки путь в виде ./file/doc.html. Точка со слешем означает, что отсчет ведется от текущей папки. Подобная запись избыточна и ее можно сократить до file/doc.html.
2.1.3.3.5. Списки
На строке 47 начинается маркированный список.
<ul>
<li>
<span>Общее описание</span>
</li>
<li>
<a href="advantages.html" title="Преимущества">Преимущества</a>
</li>
</ul>Маркированные списки позволяют разбить большой текст на отдельные блоки [20]. Тем самым привлекается внимание читателя к тексту и повышается его читабельность. С учетом того, что восприятие текста с экрана монитора хуже, чем с его печатного варианта, это является весьма полезным приемом.
Для установки маркированного списка используются теги <UL> и <LI>.
Для выбора типа маркера используется параметр type="..." тега <UL>. Маркеры могут принимать один из трех видов:
- круг (по умолчанию) – <ul type="disc"> ;
- окружность – <ul type="circle"> ;
- квадрат – <ul type="square">.
Нумерованные списки представляют собой набор элементов с их порядковыми номерами. Вид и тип нумерации зависит от параметров тега <OL>, который и используется для создания списка. В качестве маркеров могут быть следующие значения:
- арабские цифры;
- заглавные латинские буквы;
- строчные латинские буквы;
- заглавные римские цифры;
- строчные римские цифры.
2.1.3.3.6. Абзацы
На строках 58-60 отображены абзацы.
Как правило, блоки текста разделяют между собой абзацами ( параграфами ) [18]. По умолчанию между параграфами существует небольшой вертикальный отступ, называемый отбивкой. Каждый абзац начинается с тега <p> и должен иметь необязательный закрывающий тег </p>.
2.1.3.3.7. Изображения
На строке 60 имеется тег <IMG>.
<p><img src="images/ex.jpg" alt="Картинка" /></p>
Для встраивания изображения в документ используется тег <IMG>, имеющий обязательный параметр src, который определяет адрес файла с картинкой [21].
Закрывающий тег для <IMG> не требуется. scr представляет собой путь к графическому файлу. Для его указания можно использовать как абсолютный, так и относительный адрес (также как и у тега <A> ).
Как правило, в качестве формата графического файла выступает GIF и JPEG. Есть еще формат PNG, который также поддерживается браузерами при добавлении изображений и существует в двух ипостасях – PNG-8 и PNG-24.
Для изменения размеров изображения средствами HTML предусмотрены параметры width и height тега <IMG>.
Для создания альтернативного текста используется параметр alt тега <IMG>. Альтернативный текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением.
2.1.3.3.8. Другие элементы
Кроме элементов, в HTML -документах есть и сущности ( entities) – "специальные символы" [22]. Сущности начинаются с символа амперсанда и имеют вид &имя; или &#NNNN;, где NNNN – код символа в Юникоде в десятеричной системе счисления. Например, © – знак авторского права ( 
) (строка 66).
Тег <NOINDEX> (строка 18 и другие) — имя не входящего в официальную спецификацию тега языка гипертекстовой разметки веб-страниц HTML, предназначенного для включения в него частей веб-страниц, находящуюся между <noindex> и </noindex>, не предлагаемых к индексации поисковыми системами. Тег предложен российской компанией "Яндекс" в качестве альтернативы атрибуту nofollow (значение предназначено для поисковых систем: он указывает им на то, что гиперссылку, задаваемую тегом <A>, не следует никаким образом учитывать при индексировании данной страницы) и в настоящее время распознается российскими поисковыми системами Яндекс и Рамблер.
Тег <SPAN> (строка 49) предназначен для определения встроенных элементов документа. В отличие от блочных элементов, таких как <TABLE>, <P> или <DIV>, с помощью тега <SPAN> можно выделить часть информации внутри других тегов и установить для нее свой стиль.