Лекция 4 (9) - Описание элементов HTML

Кафедра ИППО
Разработка клиент-серверных приложений

Лекция 4
Для курса 3 групп потока ИКБО-16
По направлению подготовки 09.03.04

Программная инженерия
Москва, 2018
Кафедра ИППО
Содержание:
1 Описание элементов HTML-документа и атрибутов…….…….3

1.1 Глобальные (универсальные) атрибуты………………………4
1.2 Элементы стиля и форматирования текста………………….13
1.3 Списки………………………………………………................14
1.4 Таблицы…………………………………..................................15
1.5 Ссылки…………………………………………………………16
1.6 Вставка рисунка……………………………………………….19
1.7 Фреймы………………………………………………………...21
Лекция 4. Описание элементов HTML-документа и атрибутов
1 Описание элементов HTML-документа и атрибутов

Элемент <html>
Является корневым элементом документа. Все остальные элементы
содержатся внутри тегов <html>…</html>. Все, что находится за пределами
тегов, не воспринимается браузером как код HTML и никак им не
обрабатывается. Для элемента доступны атрибуты:
title - добавляет всплывающую подсказку на веб-страницу;
manifest - указывает файл манифеста, необходимый для создания
оффлайнового приложения;
xmlns - указывает пространство имен для XHTML-документов;
а также глобальные (универсальные) атрибуты.
3
1.1 Глобальные (универсальные) атрибуты

Глобальные атрибуты применяются практически ко всем тегам,
поэтому выделены в отдельную группу, чтобы не повторять их для всех тегов.
Наименование Значение
Позволяет получить доступ к элементу с помощью заданного сочетания
accesskey
клавиш
Определяет имя класса, которое позволяет связать тег со стилевым
class
оформлением
contenteditable Сообщает, что элемент доступен для редактирования пользователем
contextmenu Устанавливает контекстное меню для элемента
Задает направление и отображение текста — слева направо или справа
dir
налево
hidden Скрывает содержимое элемента от просмотра
id Указывает имя стилевого идентификатора
Браузер использует значение параметра для правильного отображения
lang
некоторых национальных символов
4
spellcheck Указывает браузеру проверять или нет правописание и грамматику в тексте
style Применяется для определения стиля элемента с помощью правил CSS
Устанавливает порядок получения фокуса при переходе между элементами с
tabindex
помощью клавиши Tab
title Описывает содержимое элемента в виде всплывающей подсказки
Этот атрибут по своему действию похож на lang, но применяется только в
xml:lang
XHTML-документах и указывает язык всего текста или его фрагмента
Id Указывает имя стилевого идентификатора
translate Разрешает или запрещает перевод текста внутри элемента
lang Определяет код языка содержимого (контента) в элементе
draggable Определяет, может ли пользователь перетащить элемент
Определяет область для приема перемещаемых элементов, сообщая браузеру
dropzone
пользователя, какие действия совершить при перемещении
5
Элемент <head>
Раздел <head>…</head> содержит техническую информацию о
странице: заголовок, описание, ключевые слова для поисковых машин,
кодировку и т.д. Введенная в нем информация не отображается в окне
браузера, однако содержит данные, которые указывают браузеру, как следует
обрабатывать страницу.
Обязательным тегом раздела <head> является тег <title>. Текст,
размещенный внутри этого тега, отображается в строке заголовка веб-
браузера. Длина заголовка должна быть не более 60 символов, чтобы
полностью поместиться в заголовке. Текст заголовка должен содержать
максимально полное описание содержимого веб-страницы.
Для элементов доступны глобальные атрибуты.
6
Тег <meta> элемента <head>

Необязательным тегом раздела <head> является одинарный
тег <meta>. С его помощью можно задать описание содержимого страницы
и ключевые слова для поисковых машин, автора HTML-документа и прочие
свойства метаданных.
Элемент <head> может содержать несколько тегов <meta>, потому что
в зависимости от используемых атрибутов они несут различную
информацию.
Для тега <meta> доступны атрибуты charset, content, http-
equiv, name, а также глобальные атрибуты.
Подробнее об атрибутах тега <meta> можно посмотреть здесь:

https://html5book.ru/osnovy-html/#part1
7
Тег <style> элемента <head>

Внутри этого тега задаются стили, которые используются на странице.
Для задания стилей в HTML-документе используется язык CSS. Таких
элементов на странице может быть несколько.
Для тега доступны атрибуты media, scoped, type, а
также глобальные атрибуты.
Внутрь этого тега можно записывать код форматирования как самих
элементов веб-страницы, так и веб-страницы целиком.
Подробнее об атрибутах тега <style> можно посмотреть здесь:
8
Тег <link> элемента <head>

Задать стили для документа можно также при помощи другого способа
- записать их в отдельный файл с расширением .css, например, style.css.
Элемент не требует закрывающего тега. Данный элемент определяет
отношение между текущей страницей и другими документами. Таких
элементов на странице может быть несколько.
Для элемента доступны атрибуты href, hreflang, media, rel,
type, а также глобальные атрибуты.
Подробнее об атрибутах элемента <link> можно посмотреть здесь:

9
Тег <script> элемента <head>

Тег <script> позволяет присоединять к документу различные
сценарии. Закрывающий тег обязателен, при этом текст сценария может
располагаться либо внутри этого элемента, либо во внешнем файле. Если
текст сценария расположен во внешнем файле, то он подключается с
помощью атрибутов элемента.
Для элемента доступны атрибуты async, charset, defer, src,
type, а также глобальные атрибуты.
Подробнее об атрибутах элемента <script> можно посмотреть здесь:

10
Элемент <body>
В этом разделе располагается все содержимое документа. Элемент
<body> заключает в себя гипертекст, который и определяет Web-страницу.
Эта та часть документа, которую разрабатывает автор страницы и которую

отображается браузером.
Внутри стартового тега элемента <body> располагаются атрибуты,
обеспечивающие установки для всей страницы целиком.
Для элемента доступны глобальные атрибуты и события.
Подробнее о событиях для элемента <body> можно посмотреть здесь:
11
Атрибуты элемента <body>

alink Устанавливает цвет активной ссылки
background Задает фоновый рисунок на веб-странице
bgcolor Цвет фона веб-страницы
bgproperties Определяет, прокручивать фон совместно с текстом или нет
bottommargin Отступ от нижнего края окна браузера до контента
leftmargin Отступ по горизонтали от левого края окна браузера до контента
link Цвет ссылок на веб-странице
rightmargin Отступ от правого края окна браузера до контента
scroll Устанавливает, отображать полосы прокрутки или нет
text Цвет текста в документе
topmargin Отступ от верхнего края окна браузера до контента
vlink Цвет посещенных ссылок
Подробнее тут: http://htmlbook.ru/html/body
12
1.2 Элементы стиля и форматирования текста

Элемент (тэг) Значение Комментарий
<I>...</I> Курсив Italic
<B>...</B> Усиление (полужирный) BOLD
<U>...</U> Подчеркивание
<S>...</S> Перечеркнутый текст
<Hn>...</Hn> Заголовки, n = 1,2, …,6, размеры По мере увеличения важность заголовка
и шрифт отличаются от обычного снижается, позволяет делать ссылки на
текста фрагменты документа
<P>...</P> Абзац Закрывающий тэг необязателен
<BR>...</BR> Принудительный перенос на
Закрывающий тэг необязателен
следующую строку
<FONT>... Определение основного текста Параметры:
</FONT> документа SIZE = “n”
FACE = “Имя_шрифта”
COLOR = "#$$$$$$" (Порядок: кк/зз/сс)
ALIGN = “LEFT|CENTER|RIGHT” –
выравнивание текста
13
1.3 Списки
Элемент Значение Комментарий
<UL>...</UL> Ненумерованный Дополнительные тэги:
список <LH>…</LH> - заголовок списка
<LI>…</LI> - элемент списка
TYPE=DISC|CIRCLE|SQUARE – тип метки у списка
<OL>...</OL> Нумерованный Дополнительные тэги:
список <HL>…</HL> - заголовок списка
<LI>…</LI> - элемент списка
TYPE=A|a|I|i|1 – тип нумерации
OL START=? – с какого значения начать
<DL>...</DL> Список определений Дополнительные тэги:
<DT>…</DT> - Понятие, аббревиатура
<DD>…</DD> - расшифровка понятия, аббревиатуры
<MENU>... Список типа Меню <LI>…</LI> - элемент меню
</MENU>
14
1.4 Таблицы
Элемент Значение Комментарий
<TABLE>... Определение Дополнительные параметры:
</TABLE> таблицы Окантовка таблицы BORDER=n (n=0,1,2)
Расстояние между ячейками CELLSPACING=n (n=0,1,2)
Дополнение ячеек CELLPADDING=n (n=0,1,2)
Желаемая ширина WIDTH=n (в точках)
Ширина в процентах WIDTH="%" (проценты от ширины
страницы)
Выравнивание всей таблицы относительно страницы
ALIGN = LEFT|RIGHT| CENTER|MIDDLE|BOTTOM
<TR>... Определение
</TR> строки таблицы
<TD>... Определение Ширина ячейки. Определения ячеек должно быть внутри
</TD> ячейки строки определения строки. Количество ячеек определяется заранее.
WIDTH="%" (проценты от ширины строки)
Сумма ширины всех ячеек должна равняться 100%.
Выравнивание внутри ячейки ALIGN=LEFT|RIGHT| CENTER|
MIDDLE|BOTTOM
Текст в ячейке без перевода строки NOWRAP
Растягивание по колонке COLSPAN=n
Растягивание по строке ROWSPAN=n
15
1.5 Ссылки. Тег <a>

Тег <a> является одним из важных элементов HTML и предназначен
для создания ссылок. В зависимости от присутствия атрибутов name или href
тег <a> устанавливает ссылку или якорь.
Якорем называется закладка внутри страницы, которую можно
указать в качестве цели ссылки. При использовании ссылки, которая
указывает на якорь, происходит переход к закладке внутри веб-страницы.
Для создания ссылки необходимо сообщить браузеру, что является
ссылкой, а также указать адрес документа, на который следует сделать
ссылку.
16
Гиперссылка (англ. hyperlink) – часть гипертекстового документа,

ссылающаяся на другой элемент (текст, заголовок, изображение и т.п.) в
самом документе, на другой объект (файл, каталог, приложение),
расположенный на локальном диске или в компьютерной сети, либо на
элементы этого объекта.
<a href="URL">Гиперссылка</a>
аnchor
hyperreference
17
В качестве значения атрибута href используется адрес документа

(URL, Universal Resource Locator, универсальный указатель ресурсов), на
который происходит переход.
Адрес ссылки может быть абсолютным и относительным.
Абсолютные адреса работают везде и всюду независимо от имени
сайта или веб-страницы, где прописана ссылка.
Пример: <a href="http://mirea.ru">МИРЭА</a>
Относительные ссылки, как следует из их названия, построены
относительно текущего документа или корня сайта.
Пример: <a href="chapter1.html">Глава 1</a>
Подробнее тут: http://htmlbook.ru/html/a, https://html5book.ru/hyperlinks-in-html/
18
1.6 Вставка рисунка. Тег <img>

Тег <img> предназначен для отображения на веб-странице
изображений в графическом формате GIF, JPEG или PNG.
Адрес файла с картинкой задаётся через атрибут src.
Если необходимо, то рисунок можно сделать ссылкой на другой файл,
поместив тег <img> в контейнер <a>. При этом вокруг изображения
отображается рамка, которую можно убрать, добавив атрибут border="0" в
тег <img>.
19
Рисунки также могут применяться в качестве карт-изображений, когда

картинка содержит активные области, выступающие в качестве ссылок. Такая
карта по внешнему виду ничем не отличается от обычного изображения, но
при этом оно может быть разбито на невидимые зоны разной формы, где
каждая из областей служит ссылкой.
Синтаксис:
<img src="URL" alt="альтернативный текст">
Подробнее тут: http://htmlbook.ru/html/img
Более полная информация по всем тегам здесь:

https://html5book.ru/html-tags/, http://htmlbook.ru/html
20
1.7 Фреймы. Тег <frame>

Тег <frame> определяет свойства отдельного фрейма, на которые
делится окно браузера. Этот элемент должен располагаться в контейнере
<frameset>, который к тому же задает способ разметки страницы на
отдельные области. В каждую из таких областей загружается самостоятельная

веб-страница определяемая с помощью атрибута src. Хотя обязательных
атрибутов у тега <frame> и нет, рекомендуется задавать каждому фрейму его
имя через атрибут name. Это особенно важно, если требуется по ссылке из
одного фрейма загружать документ в другой.
Синтаксис:
<frameset> <frame> </frameset>
21
Атрибуты тега <frame>

bordercolor Цвет линии границы
frameborder Отображать рамку вокруг фрейма или нет
name Задает уникальное имя фрейма
noresize Определяет, можно изменять размер фрейма пользователю или нет
scrolling Способ отображения полосы прокрутки во фрейме
src Путь к файлу, предназначенному для загрузки во фрейме
Описание атрибутов тега <frame> см. здесь:

http://htmlbook.ru/html/frame
22
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег FRAME</title>
</head>
<frameset rows="80,*" cols="*">
<frame src="top.html" name="topFrame" scrolling="no" noresize>
<frameset cols="80,*">
<frame src="left.html" name="leftFrame" scrolling="no" noresize>
<frame src="main.html" name="mainFrame"> </frameset> </frameset>
</html>
23
Тег <frameset>
Определяет структуру фреймов на веб-странице. Фреймы разделяют
окно браузера на отдельные области, расположенные вплотную друг к другу.
В каждую из таких областей загружается самостоятельная веб-страница
определяемая с помощью тега <frame>. С помощью фреймов веб-страница
делится на два или более документа, которые обычно содержат навигацию по
сайту и его контент. Механизм фреймов позволяет открывать документ в
одном фрейме, по ссылке, нажатой в совершенно другом фрейме. Тег
<frameset> заменяет собой элемент <body> на веб-странице.
Допустимо использовать вложенную структуру элементов, это

позволяет разбить один фрейм на две и более области.
24
Атрибуты тега <frameset>

border Толщина границы между фреймами
bordercolor Цвет линии границы
cols Устанавливает ширину или пропорции фреймов в виде колонок
frameborder Определяет, отображать рамку вокруг фрейма или нет
framespacing Аналог атрибута border, задает ширину границы
rows Задает размер или пропорции фреймов в виде строк
25
Плавающие фреймы
Разговор о фреймах будет неполным без упоминания плавающих
фреймов. Так называется фрейм, который можно добавлять в любое место
веб-страницы.
Еще одно его название — встроенный фрейм, он называется так из-за
своей особенности встраиваться прямо в тело веб-страницы.
Рисунок 3 – Пример плавающего фрейма
26
Во фрейм можно загружать HTML-документ и прокручивать его

содержимое независимо от остального материала на веб-странице. Размеры
фрейма устанавливаются самостоятельно согласно дизайну сайта или
собственных предпочтений.
Создание плавающего фрейма происходит с помощью тега <iframe>,
он имеет обязательный атрибут src, указывающий на загружаемый во фрейм
документ.
27
Тег <iframe>
Тег <iframe> является контейнером, содержание которого
игнорируется браузерами, не поддерживающими данный тег. Для таких
браузеров можно указать альтернативный текст, который увидят
пользователи. Он должен располагаться между
элементами <iframe> и </iframe>.
Наименование
Атрибуты тега <iframe> Значение
align Определяет как фрейм будет выравниваться по краю, а также способ
обтекания его текстом.
allowtransparency Устанавливает прозрачный фон фрейма, через который виден фон
страницы.
frameborder Устанавливает, отображать границу вокруг фрейма или нет.
height Высота фрейма
hspace Горизонтальный отступ от фрейма до окружающего контента
28
marginheight Отступ сверху и снизу от содержания до границы фрейма
marginwidth Отступ слева и справа от содержания до границы фрейма
name Имя фрейма
sandbox Позволяет задать ряд ограничений на контент загружаемый во фрейме.
scrolling Способ отображения полосы прокрутки во фрейме
Определяет, что содержимое фрейма должно отображаться так, словно
seamless
оно является частью документа
src Путь к файлу, содержимое которого будет загружаться во фрейм
srcdoc Хранит содержимое фрейма непосредственно в атрибуте
vspace Вертикальный отступ от фрейма до окружающего контента
width Ширина фрейма
Описание атрибутов тега <iframe> можно посмотреть здесь:

http://htmlbook.ru/html/iframe
29
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Плавающий фрейм</title>
</head>
<body>
<p><iframe src="hsb.html" width="300" height="120"></iframe></p>
</body>
</html>
30

Лекция 4 (9) - Описание элементов HTML

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Лекция 4 (9) - Описание элементов HTML

Загружено:

Авторское право:

Доступные форматы

Кафедра ИППО

Разработка клиент-серверных приложений

Для курса 3 групп потока ИКБО-16

По направлению подготовки 09.03.04

1 Описание элементов HTML-документа и атрибутов…….…….3

1 Описание элементов HTML-документа и атрибутов

1.1 Глобальные (универсальные) атрибуты

Тег <meta> элемента <head>

Подробнее об атрибутах тега <meta> можно посмотреть здесь:

Тег <style> элемента <head>

Тег <link> элемента <head>

Подробнее об атрибутах элемента <link> можно посмотреть здесь:

Тег <script> элемента <head>

Подробнее об атрибутах элемента <script> можно посмотреть здесь:

Эта та часть документа, которую разрабатывает автор страницы и которую

Атрибуты элемента <body>

1.2 Элементы стиля и форматирования текста

1.5 Ссылки. Тег <a>

Гиперссылка (англ. hyperlink) – часть гипертекстового документа,

В качестве значения атрибута href используется адрес документа

1.6 Вставка рисунка. Тег <img>

Рисунки также могут применяться в качестве карт-изображений, когда

Более полная информация по всем тегам здесь:

1.7 Фреймы. Тег <frame>

отдельные области. В каждую из таких областей загружается самостоятельная

Атрибуты тега <frame>

Описание атрибутов тега <frame> см. здесь:

Допустимо использовать вложенную структуру элементов, это

Атрибуты тега <frameset>

Рисунок 3 – Пример плавающего фрейма

Во фрейм можно загружать HTML-документ и прокручивать его

Описание атрибутов тега <iframe> можно посмотреть здесь:

Вам также может понравиться