Справочный материал к лабораторной работе №1
Теги HTML не чувствительны к регистру. Различные версии HTML поддерживают устаревшие (deprecated) теги только для обратной совместимости. Значения атрибутов крайне рекомендуется закрывать в одинарные или двойные кавычки. Список основных тегов HTML
| Тег | Атрибуты | Описание | |||
| <html> | Контейнер HTML-документа. Закрывающий тег обязателен </html> | ||||
| <head> | Начальный и конечный теги заголовка документа. Закрывающий тег обязателен </head> | ||||
| <title> | Тег названия HTML-документа. Закрывающий тег обязателен </title> | ||||
| <meta> | Предоставляет дополнительную информацию о документе. | ||||
| <body> | link = цвет не посещенных ссылок | Начальный и конечный тег тела документа. Закрывающий тег обязателен </body> | |||
|
| alink = цвет активных ссылок | ||||
|
| vlink = цвет посещенных ссылок | ||||
|
| тext = цвета обычного текста | ||||
|
| bgcolor = цвет фона документа | ||||
|
| backgroud = url фонового изображения | ||||
|
| bgproperties = запрещает прокрутку фонового изображения | ||||
|
| leftmargin = устанавливает размер левого поля документа | ||||
|
| topmargin = устанавливает размер верхнего поля документа | ||||
| <p> | align = left - по левому краю | Параграф, основной текстовый контейнер, закрывающий тег обязателен </p>. После закрывающего тега </p> автоматически происходит перенос строки. | |||
| align = center - по центру | |||||
| align = right - по правому краю
| |||||
| align = justify - по обоим краям | |||||
| <div> | align = left - по левому краю | Контейнер, основное предназначение - размещение элементов на странице, закрывающий тег обязателен </div>. | |||
| align = center - по центру | |||||
| align = right - по правому краю | |||||
| align = justify - по обоим краям | |||||
| <br> | Принудительный перенос строки, закрывающий тег не требуется | ||||
| <pre> |
| Заключенный в теги <pre></pre> текст будет отображаться так, как он был отформатирован предварительно, без обработки, с точным соблюдением переносов строк и интервалов. | |||
| <ul> | <litype=disk> - диск | Неупорядоченный список, элементы списка выводятся тегом <li> | |||
| <li type=circle> - окружность | |||||
| <li type=square> - квадрат </ul> | |||||
| <ol> | 1.<li type=disk> - арабские цифры | Упорядоченный список, элементы списка выводятся тегом <li> | |||
| b.<li type=circle> - буквы нижнего регистра | |||||
| В.<li type=square> - буквы верхнего регистра | |||||
| iv.<li type=square> - римские цифры в нижнем регистре | |||||
| V <li type=square> - римские цифры в верхнем регистре </ol>. | |||||
| <a> | href = url | Создает в документе гиперссылку, обязательный атрибут href, закрывающий тег обязателен </a> | |||
| target =_blank - открывает ссылку в новом окне
| |||||
| title = подсказка к текстовой ссылке | |||||
| <i> |
| Заключенный в теги <i></i> текст будет отображаться в курсивном начертании, закрывающий тег обязателен. | |||
| <b> |
| Заключенный в теги <b><b> текст будет отображаться жирным шрифтом, закрывающий тег обязателен. | |||
| <tt> |
| Заключенный в теги <tt></tt> текст будет отображатьсямоно ширинный шрифтом, закрывающий тег обязателен | |||
| <h> |
| Заключенный в теги <h3></h3> текст представляет собой заголовок. Возможные значения - от 1 до 6, закрывающий тег обязателен. | |||
| <sub> |
| Заключенный в теги <sub></sub> текст будет смещен вниз (нижний индекс), закрывающий тег обязателен | |||
| <sup> |
| Заключенный в теги <sup></sup>текст будет смещен вверх (верхний индекс), закрывающий тег обязателен | |||
| <big> |
| Заключенный в теги <big></big> текст будет отображаться шрифтом большего размера, закрывающий тег обязателен | |||
| <small> |
| Заключенный в теги <small></small> текст будет отображаться шрифтом меньшего размера, закрывающий тег обязателен | |||
| <img> | src=URI - адрес изображения
| В текущий документ вставляет изображение, закрывающий не требуется, обязательный атрибут src = url | |||
| alt = подсказка к изображению | |||||
| border = устанавливает толщину рамки вокруг изображения | |||||
| height = задает высоту изображения в пикселях | |||||
| width = задает ширину изображения в пикселях | |||||
| hspace = за дает свободную область слева и справа от изображения | |||||
| Vspace = задает свободную область над и под изображением | |||||
| <table> | align = left - выравнивание таблицы по левому краю | начальный <table></table> и конечный теги таблицы, обязательные вложенные теги <tr> и <td> | |||
| align = right - выравнивание таблицы по правому краю | |||||
| align = center - выравнивание таблицы по центру | |||||
| Backgroud = url указывается фоновое изображение для таблицы | |||||
| Bgcolor = задается цвет фона всей таблицы | |||||
| Border = создает рамку таблицы | |||||
| Bordercolor = задает цвет рамки таблицы | |||||
| Cellpadding = задает область свободного пространства внутри ячейки | |||||
| Cellspacing = задается интервал между смежными ячейками таблицы | |||||
| Hspace = задает областей свободного пространства слева и справа от таблицы
| |||||
| Vspace = задает областей свободного пространства над и под таблицей | |||||
| Width= установка ширины таблицы в пикселях или процентах от ширины окна | |||||
| <tbody> Начальный тег для строк таблицы, образующих основное тело таблицы. | |||||
| <tr> | align = left - по левому краю | Обязательный вложенный тег для тегов <table></table> создает строки ячеек в текущей таблице, закрывающий тег обязателен<tr></tr> | |||
| align = center - по центру | |||||
| align = right - по правому краю | |||||
| Background = указывает url фонового изображения для строки | |||||
| Bgcolor = задает цвет фона данной строки | |||||
| Bordercolor = задает цвет обрамления строки | |||||
| Атрибут Valign задается размещение содержимого ячейки или ячеек в данной строке по вертикали Valign = top - сверху Valign = center - по центру Valign = bottom - внизу | |||||
| <td> | При помощи атрибута align задается способ выравнивания содержимого для данной ячейки: align = left - по левому краю align = center - по центру align = right - по правому краю | Обязательный вложенный тег для тегов <table></table> создает ячейку в текущей строке <tr></tr>, пример написания: <table><tr><td>...</td></tr></table> закрывающий тег обязателен | |||
| Background = указывает url фонового изображения для данной ячейки | |||||
| Bgcolor = задает цвет фона данной ячейки | |||||
| Bordercolor = задает цвет обрамления ячейки | |||||
| Атрибут Valign задается размещение содержимого ячейки Valign = top - сверху Valign = center - по центру Valign = bottom - внизу | |||||
| <th> | При помощи атрибута align задается способ выравнивания содержимого для данной ячейки: align = left - по левому краю align = center - по центру align = right - по правому краю | Обязательный вложенный тег для тегов <table></table> создает ячейку в текущей строке <tr></tr>, по своим параметрам схож с тегом <td>, но текст который будет помещен внутрь такой ячейки будет отображаться полужирным начертанием | |||
| Background = указывает url фонового изображения для данной ячейки | |||||
| Bgcolor = задает цвет фона данной ячейки | |||||
| Bordercolor = задает цвет обрамления ячейки Атрибут Valign задается размещение содержимого ячейки Valign = top - сверху Valign = center - по центру Valign = bottom – внизу | |||||
Тег META. Мета-информация о веб-странице
Основное предназначение мета-тегов, это включение информации о документе, которая может содержать сведения об авторе, дате создания документа или авторских правах. Вся информация находящаяся в МЕТА теге, полезна для серверов, браузеров и поисковых роботов. Для посетителя веб-страницы информация, которую несут в себе МЕТА теги будет не видна, следовательно МЕТА теги нужно помещать внутри тега <head> документа. В документе может находится любое количество тегов <META> Рассмотрим некоторые, часто используемые мета-теги:
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Windows-1251"> Используется для того, чтобы браузер мог правильно отобразить содержимое страницы и для определения поисковой машиной языка, на котором написана страница.
<META HTTP-EQUIV="Refresh" CONTENT="n; URL=http://newadres.ru/"> Автоматическое перенаправление (через n секунд) на указанный адрес (редирект).
<META content="Имя автора страницы" name="author"> Используется для указания имени автора. Поисковые системы могут найти нужный сайт по имени автора.
<META content="список, ключевых, слов" name="keywords"> Список ключевых слов, вписываются слова или выражения через запятую с учетом регистра, так как ряд поисковых систем не распознают регистр при индексации. Данный МЕТА тег является одним из главных МЕТА тегов при индексировании вашего сайта поисковой машиной. Длина содержимого тега МЕТА "keywords" не должна превышать 1000 символов.
<META content="Сюда вписывается краткое описание страницы" name="description"> Этот тег задает фразу, по которой пользователь определяет суть вашей страницы и решает, посещать ли ее. Вписанные выражения в данный МЕТА тег играют важную роль в рейтинге страницы. Ключевые выражения должны совпадать с основным текстом страницы, это тоже играет большую роль при индексации страницы поисковой машиной. Длина содержимого тегов МЕТА "description" не должна превышать 200 символов.
<META content="index,all" name="robots"> Управление поисковым роботом, указание того, что страницу нужно индексировать (или нет, если указано "noindex"). Cпециальные символы
В таблице приведены некоторые специальные символы HTML, которые имеют особое назначение и собственный способ представления в виде мнемонического или числового кода.
Символ Мнемокод Числовой код Описание
| |   | неразрывный пробел | |
| ¢ | ¢ | ¢ | цент |
| £ | £ | £ | фунт стерлингов |
| ¥ | ¥ | ¥ | иена или юань |
| § | § | § | параграф |
| © | © | © | знак copyright |
| « | « | « | левая двойная угловая скобка |
| ­ | ­ | место возможного переноса | |
| ® | ® | ® | знак зарегистрированной торговой марки |
| ° | ° | ° | градус |
| ² | ² | ² | верхний индекс два квадрат |
| ³ | ³ | ³ | верхний индекс три куб |
| · | · | · | точка по середине |
| » | » | » | правая двойная угловая скобка |
| ½ | ½ | ½ | дробь – одна вторая |
| × | × | × | знак умножения |
| ÷ | ÷ | ÷ | знак деления |
| σ | Σ | Σ | греческая заглавная буква сигма |
| λ | λ | λ | греческая строчная буква лямбда |
| μ | μ | μ | греческая строчная буква мю |
| • | • | • | bullet - диск |
| … | … | … | многоточие ... |
| € | € | € | валюта евро |
Примеры
Листинг 1. Простой пример.
Возможности HTML и CSS позволяют создавать гипертекстовые страницы как с линейной, так и с нелинейной структурой. Линейные структуры (где текст представлен последовательно) приведен в Листинге 1.
Рассмотрим основные способы организации нелинейной структуры:
1.С использованием фреймов.
2.С использованием табличной верстки.
3.С использованием блочных элементов.
Пусть требуется создать документ, логически разделенный на три блока (рис. 1): «head» — верхний блок, «menu» — левый блок, «content» — правый блок. Примеры, иллюстрирующие как это можно сделать перечисленными способами, приведены в листингах 2, 3 и 4.
Рисунок 1 Веб-страница с тремя блоками
Листинг 2. Фреймовая структура
<!--
Содержимое блоков хранится в файлах top.html, left.html, content.html Сборка выполнена в файле index.html, имеющем следующий вид:
-->
<html>
<head>
<title>Фреймы</title>
</head>
<frameset rows="10%,*">
<frame name="top" src="top.html">
<frameset cols="10%,*">
<frame name="left" src="left.html">
<frame name="cont" src="content.html">
</frameset>
<noframes>Это для браузеров, не поддерживающих фреймы.</noframes>
</frameset>
</html>
Листинг 3. Табличная структура
<html>
<head>
<title>Таблицы</title>
</head>
<body><table style="width: 100%; height: 100%; border: solid 1px black;">
<tr>
<td colspan=2 height="10%">HEAD</td></tr>
<tr>
<td
</tr>
</table>
<body>
</html>
Листинг 4. Блочнаяструктура
<html>
<head>
<title>Блоки (div)</title>
<style>
body {margin: 10px;}
div {border: solid 1px black;}
.top {position: relative; height: 100px; width: 100%;}
.left {position: absolute; top: 114px; left: 10px; width: 200px; }
.main {position: absolute; top: 114px; left: 214px; margin-right:8px;}
</style>
</head>
<body>
<div class="top">TOP</div>
<div class="left">LEFT</div>
<div class="main">CONTENT</div>
</body>
</html>
Контрольные вопросы
1.Что такое HTML? Что такое гипертекстовый документ?
2.Что такое тег? Структура тега HTML. Формат записи тега HTML.
3.Привести структуру HTML документа. Описать назначение тегов <HTML>, <HEAD>, <META>, <BODY>.
4.Что такое атрибут тега? Формат записи атрибутов тега HTML.
5.Перечислить теги для представления текстовой информации и дать их описание.
6.Как представляются гиперссылки в HTML документе? Дать пример внутренних и внешних ссылок.
7.Перечислить виды списков, существующих в HTML. Привести теги, представляющие списки в HTML.
8.Что такое вложенные списки в HTML? Привести пример вложенного списка HTML.
9.Как включаются графические объекты в HTML документы?
10.Куда будет указывать ссылка, если атрибут href оставить пустым (<a href="">какой-то адрес</a>)?
11.Как будет отображаться страница, если мета-тег charset не будет соответствовать фактической кодировке текста? Что произойдет, если в странице использовать следующий код:
<metahttp-equiv="refresh" content="0;">
Дата добавления: 2018-04-04; просмотров: 481; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!