Добавлен: 01.04.2023
Просмотров: 109
Скачиваний: 1
СОДЕРЖАНИЕ
1. Язык разметки гипертекста. Основные принципы построения HTML-документов
1.1 История развития и стандарты
1.3.2 Объявление HTML-документа. Заголовок
1.4 Форматирование текста средствами HTML
1.4.1 Стили форматирования текста
1.4.2 Установка атрибутов шрифта
1.4.4 Работа со списками средствами языка HTML
1.4.5 Работа со ссылками средствами языка HTML
1.4.6 Работа с графическими изображениями средствами HTML
1.4.7 Работа с таблицами средствами HTML
2. Реализация сайта на языке HTML
<li>…</li> второй элемент списка
<li>…</li> n-ый элемент списка
</ul> конец маркированного списка
По умолчанию маркирование производится маркером •, для изменения стиля оформления списка можно использовать атрибут type=”…” тега <ul>. Допускается использовать следующие значения этого атрибута:
type=”disk” устанавливает маркер вида •
type=”circle” устанавливает маркер вида ◦
type=”square” устанавливает маркер вида ▪
Список определений позволяет перечислить не только пункты списка, но также и их описания. Структура списка определений следующая:
<dl> начало списка определений;
<dt>…</dt> первый пункт списка;
<dd>…</dd> описание первого пункта списка;
<dt>…</dt> последний пункт списка;
<dd>…</dd> описание последнего пункта списка;
</dl> конец списка определений.
Для создания списка директорий также применялся тег <DIR>…</DIR>, но его использование считается устаревшим.
Для создания многоуровневых списков позволяется использование тегов создания маркированных, нумерованных списков и списков определений, в этом случае вложенный список рассматривается как элемент списка.
1.4.5 Работа со ссылками средствами языка HTML
Очень важным понятием в HTML является гиперссылка, которая позволяет связать текст или какой-либо объект с другими гипертекстовыми документами. Текст, который является гиперссылкой, как правило, выделяется цветом и подчеркивается. Для определения ссылки используется тег <a>, структура которого следующая:
<a href=”filename”> текст ссылки </a>
Здесь filename – имя файла или адрес Internet, на который необходимо сослаться, а текст ссылки – текст гипертекстовой ссылки, который будет непосредственно показан в документе. Если документ, на который указывает ссылка, находится в том же каталоге, то подобная ссылка называется относительной. Если есть необходимость сослаться на ресурс Internet, расположенный на удаленном сервере, или указать в ссылке полное имя файла и путь к файлу, то используют абсолютные ссылки. Структура такого тега аналогична, однако она формируется на основе полного пути к ресурсу.
Очень удобно при создании больших страниц в начало документа вставить оглавление, а его заголовки оформить в виде гиперссылок на соответствующий раздел текста. Для этого необходимо присвоить заголовку раздела уникальный идентификатор, т.е. имя. Это можно сделать, используя тег <a> и атрибут name=”…”. Пункт оглавления необходимо оформить в виде ссылки на соответствующий раздел (такое оформление носит название закладки или якоря) при помощи следующей конструкции:
<a href=”#Раздел1”> Раздел 1. </a>
<a name=”Раздел1”> Раздел 1. </a>
В результате выполнения приведенного выше кода в окне браузера отобразиться страница, на которой отображается пункт содержания Раздел 1. , который является гиперссылкой на соответствующую часть документа. Такая организация страницы является очень удобной, поскольку позволяет пользователю перейти непосредственно к интересующему материалу, а не искать его по всему документу.
Кроме ссылок на текст, возможна также реализация ссылок на изображения и другие элементы документа. Кроме того, использование атрибута TITLE позволит добавить всплывающую подсказку к тексту ссылки.
В стандарте HTML5 введен контейнер <NAV>…</NAV>, внутри которого задаются ссылки, что позволяет задать навигацию по сайту, причем допустимо использовать несколько таких контейнеров в документе.
1.4.6 Работа с графическими изображениями средствами HTML
В документах HTML кроме текста могут присутствовать графические изображения, для вставки которых используется тег <img>. Допускается использование файлов в формате GIF или JPG/JPEG/PNG, поскольку большинство браузеров имеют встроенные модули декодирования для воспроизведения данных форматов, а для систем, работающих под управлением операционных систем семейства Windows, допускается также использование файлов формата BMP. Следующий пример демонстрирует вставку в документ JPG файла:
<img src=”pic.jpg” width=600 height=300 alt=”Рисунок”>
Здесь атрибут scr=”…” определяет адрес графического файла. В приведенном примере файл будет размещен в области шириной 600 и высотой 300 пикселей соответственно. Если размеры, указанные атрибутами height=”…” (высота) и width=”…” (ширина), не совпадают с размерами графического файла, то последний масштабируется. Масштабирование может привести к резкому ухудшению качества графического файла, поэтому рекомендуется задавать размеры, соответствующие размерам графического файла, или не указывать их вообще. Если размеры не заданы, то, встретив рисунок, браузер прекращает вывод текста и ждет загрузки всего рисунка для того, чтобы определить его размеры, а это задерживает загрузку страницы.
Атрибут alt=”…” указывает браузеру на то, какой именно текст следует подставить на место рисунка, если пользователь отключил загрузку графических файлов или вследствие медленной скорости соединения файл не был получен.
При вставке рисунка в документ, браузер размещает следующий за ним текст внизу. Используя атрибут align=”…”, можно разместить последующий текст вверху (top), внизу (bottom) или по центру (middle) относительно картинки.
Картинка может быть средством задания и управления выбором гиперссылок в документе, для чего на тег <img> должна указывать гиперссылка, определяемая командой <a>. Например:
<a href=”index.html”><img border=”0” src=”mailmov.gif” width=”43” height=”35”></a>
По умолчанию браузер рисует рамку вокруг рисунка, которая отмечена как гиперссылка. Для того, чтобы убрать прорисовку рамки, используют атрибут border=”…” в теге <img> с нулевым значением. Помимо этого имеется возможность создания активного рисунка с гиперссылками, в которой разные части картинки имеют разные ссылки – такое средство принято называть активными картами. Это можно сделать путем включения информации об изображении в документ.
Для задания информации о гиперссылках в рисунке, которая включается в документ, используется атрибут usemap=”…” в теге <img>. Сама информация о гиперссылках определяется тегами <map> и <area>, как показано ниже:
<map name=”map1”>
<area shape=”rect” coords=”0,0,20,20” href=”h1.htm”>
<area shape=default href=”other.htm”>
</map>
<img border=0 src=”map1.gif” usemap=”#map1”>
В данном примере на рисунке map1.gif был выделен прямоугольник, при этом одна область не используется, а выделенная является гиперссылкой к документу h1.htm. Тег <area> позволяет также помечать области кругами, если используется параметр shape=”…” со значением circle, или ломанными – тогда применяют параметр poly. Каждый из этих параметров имеет дополнительный параметр coords=”…”, который указывает координаты ключевых точек и для каждой из фигур имеет следующий формат:
shape=”rect” coords=”x1,y1,x2,y2”
shape=”circle” coords=”x,y,R”
shape=”poly” coords=”x1,y1,x2,y2,…,xn,yn”
Следует иметь ввиду, что если две или более областей пересекаются, то браузер выбирает первую из тех, что описаны в теге <map>, а неотмеченные области никак не отвечают на действия пользователя.
1.4.7 Работа с таблицами средствами HTML
В web-дизайне таблицы часто используются для позиционирования графических и текстовых объектов на страницах. Для создаания таблиц используются следующие теги:
<TABLE>...</TABLE> создание таблицы;
<CAPTION>…</CAPTION> создание заголовка таблицы;
<TR> … </TR> формирование строки;
<TH>…</TH> формирование ячейки с заголовком строки или столбца;
<TD>…</TD> формирование содержимого ячейки;
<COL>…</COL> задается ширина и другие характеристики столбцов;
<COLGROUP>…</COLGROUP> задается ширина и стиль столбцов;
<TBODY>…</TBODY> структурный блок для хранения нескольких строк;
<TFOOT>…</TFOOT> структурный блок для хранения нескольких нижних строк;
<THEAD>…</THEAD> структурный блок для хранения нескольких нижних строк.
Атрибуты тега <TABLE>:
ALIGN=”…” определяет выравнивание таблицы;
BACKGROUND=”…” задает фоновый рисунок в таблице;
BGCOLOR=”…” задает цвет фона в таблице;
BORDER=”…” толщина рамки в пикселях;
BORDERCOLOR=”…” задает цвет рамки;
CELLPADDING=”…” отступ от рамки до содержимого ячейки;
COLS=”…” число колонок в таблице;
FRAME=”…” сообщает браузеру, как отображать границы вокруг рамки;
HEIGHT=”…” высота таблицы;
RULES=”…” сообщает браузеру, как отображать границы между ячейками;
SUMMARY=”…” краткое описание таблицы;
WIDTH=”…” ширина таблицы.
Для объединения в строке нескольких последовательных ячеек, например двух в одну, в соответствующем первом теге <TH> или <TD> записывается параметр ROWSPAN=2. А для объединения в столбце двух ячеек в одну используется параметр COLSPAN=2.
1.4.8 Блоки и фреймы
Элемент <div>…</div> является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как и при использовании других блочных элементов, содержимое тега <div> всегда начинается с новой строки. После него также добавляется перенос строки.
Фреймы позволяют разделить страницу на несколько кадров, каждый из которых по факту является также страницей (каждому из них соответствует свой HTML-файл, основной файл содержит описание размещения фреймов в окне браузера, остальные файлы содержат описание содержимого фреймов). При создании фреймов используют теги <frameset>...</frameset> используется для определения разделения окна на фреймы с параметрами COLS (вертикальные области) и ROWS (горизонтальные области), SRC адресом стартового html-файла, NAME – именем фрейма и др. Согласно стандарту HTML5 использование фреймов считается устаревшим.
Контейнер <ASIDE>…</ASIDE>, введенный в стандарте HTML5, позволяет выделить блок сбоку от контента для размещения рубрикатора, ссылок или меток (по принципу боковой панели).
Контейнер <CANVAS>…</CANVAS>, введенный в стандарте HTML5, позволяет создать область, в которой можно создавать и трансформировать рисунки, анимацию, игры и т.п.
Контейнер <SECTION>…</SECTION>, введенный в стандарте HTML5, позволяет задать раздел страницы и может применяться для создания новостных блоков, контактных данных, разделов текста и пр.
1.4.9 Формы
Формы предназначены для обмена данными между пользователями и сервером в Интернет. Область применения форм не ограничена отправкой данных на сервер, с помощью клиентских скриптов можно получить доступ к любому элементу формы, изменять его и применять по своему усмотрению. При этом документ может содержать любое количество форм, но одновременно на сервер может быть отправлена только одна форма. Формы создаются с применением тега <FORM ACTION=”URL”>…</FORM>, где его атрибут ACTION указывает программу, которой передается управление при отправке формы на сервер. Внутрь контейнера <FORM> можно помещать другие теги, при этом сама форма никак не отображается на web-странице, видны только ее элементы.
Используемые теги:
<BUTTON>…</BUTTON> создание кнопки;
<textarea>…</textarea> создание области ввода текста;
<SELECT>…</SELECT> позволяет создать элемент интерфейса в виде выпадающего списка, элементы которого определяются тегом <OPTION>…</OPTION>;
<PARAM>…</PARAM> передача значения параметров другим объектам страницы (например, апплетам);
<OBJECT>…</OBJECT> определяет принципы загрузки и отображения объектов страницы;
<INPUT>…</INPUT> создание различных элементов интерфейса формы и обеспечение их взаимодействия с пользователем;
<FIELDSET>…</FIELDSET> группировка элементов формы;
<LEGEND>…</LEGEND> создание заголовка группы элементов формы;
<LABEL>…</LABEL> создание метки и связывание ее с элементом формы;
<MENU>…</MENU> создает команду в виде переключателя, флажка или обычной кнопки (введен в стандарте HTML5);
<DATALIST>…</DATALIST> создает список вариантов, которые можно выбирать при наборе в текстовом поле, его элементы определяются тегом <OPTION>…</OPTION> (введен в стандарте HTML5);
<AUDIO>…</AUDIO> добавляет, воспроизводит и управляет настройками аудиозаписи на странице либо форме (введен в стандарте HTML5);
<VIDEO>…</VIDEO> добавляет, воспроизводит и управляет настройками видеоролика на странице либо форме (введен в стандарте HTML5);
<SOURCE>…</SOURCE> вставляет звуковой или видеофайл для тегов <AUDIO> и <VIDEO> (введен в стандарте HTML5);