2 - Основы HTML

Основы HTML
к.т.н. доцент каф. ВТ

Медведев М.С.
Основы языка HTML
Идея решения проблемы обмена документами между различными

компьютерами и приложениями через Internet основана на языке разметки
гипертекста HTML (HyperText Markup Language).
Разметка документа - это описание различных фрагментов документа и их

взаимного расположения.
Выполняется разметка с помощью символов ASCІІ.

Из этих символов набираются команды языка HTML - теги или дескрипторы.
Термин "гипертекст" впервые был введен Тедом Нельсоном в 60-х годах, то

есть задолго до появления Internet.
Понятие "гипертекст" обозначает электронный документ, который
содержит в себе ссылки на другие документы.
2
Разработкой спецификаций языка HTML и утверждением их в

качестве официальных стандартов занимается Консорциум
всемирной паутины (W3C).
Официальной спецификации HTML 1.0 не существует. До 1995 года

существовало множество неофициальных спецификаций HTML.

RFC 1866 — HTML 2.0, одобренный как официальный стандарт 22
сентября 1995 года;

HTML 3 (март 1996) - не нашла поддержки у разработчиков

HTML 3.2 — 14 января 1997 года;

HTML 4.0 — 18 декабря 1997 года (многие унаследованные элементы были
отмечены как устаревшие;

HTML 4.01 — 24 декабря 1999 года (версия включала малозаметные, но
существенные изменения по сравнению с предыдущей);

ISO/IEC 15445:2000 (ISO HTML, основан на HTML 4.01 Strict) — 15 мая 2000
года.

HTML 5 — разработан и принят W3C совместно с сообществом WHATWG.
3
HTML не является языком программирования, но веб-страницы могут

содержать встроенные или загружаемые программы на скриптовых
языках (в первую очередь Javascript) и программы-апплеты на языке
Java.
Любой HTML документ состоит из обычного текста и

разметочных тэгов.
• Текст как и в любых других файлах используется для
передачи информации, а разметочные тэги используются для ее
группировки и оформления.
• Разметочные тэги HTML представляют собой специальные слова,
которые окружены с обеих сторон угловыми скобками,
например: <html>.
• HTML тэги обычно используются в паре, например: <b></b>.
Первый тэг называется начальным тэгом, а второй конечным 4
тэгом.
Описание документа начинается с указания его типа

(секция DOCTYPE).
Текст документа заключается в тег <html>. Текст
документа состоит из заголовка и тела, которые
выделяются соответственно тегами <head> и <body>.
В заголовке <head> указывают название HTML-
документа и другие параметры, которые браузер
будет использовать при отображении документа.
Тело документа <body> — это та часть, в которую
помещается собственно содержимое HTML-
документа.
Тело включает предназначенный для отображения
текст и управляющую разметку документа (теги),
которые используются браузером.
5
Секция DOCTYPE позволяет указать браузеру, какой тип документа ему

предстоит разбирать, т.е, какие требования нужно выполнять при обработке
гипертекста.
HTML 4.01
Строгий синтаксис HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"www.w3.org/TR/html4/strict.dtd">
Переходный синтаксис HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"www.w3.org/TR/html4/loose.dtd">
В HTML-документе применяются фреймы.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "
www.w3.org/TR/html4/frameset.dtd">
HTML 5 <!DOCTYPE html> - Для всех документов.
6
Основные элементы языка – команды (ТЭГИ)

Тэги:
<имя> … </имя>
Параметры тэгов – указываются внутри тэга,
разделяются пробелами:
Имя_параметра = “Значение_параметра”
Общая структура документа HTML

<HTML>
<HEAD>
Содержание заголовка
</HEAD>
<BODY>
Содержание тела документа
</BODY>
</HTML>
7
Атрибуты — это пары вида «свойство = значение», уточняющие

представление соответствующего тега:
<тег атрибут="значение">...</тег>
Атрибуты указывают в начальном теге, несколько атрибутов разделяют одним
или несколькими пробелами, табуляцией или символами конца строки.
Значение атрибута следует за знаком равенства, стоящим после имени
атрибута.
Порядок записи атрибутов в теге не важен. Если значение атрибута — одно
слово или число, то его можно просто указать после знака равенства, не
выделяя дополнительно. Все остальные значения необходимо заключать в
кавычки, особенно если они содержат несколько разделенных пробелами
слов.
8
Краткий список некоторых часто используемых атрибутов и их возможных

значений:
style="описание_стилей" — локальные стили
src="адрес" — адрес (URI) источника данных (например картинки или скрипта)
align="left|center|right|justify" — выравнивание, по умолчанию left (по левому краю)
width="число" — ширина элемента (в пикселях, пиках, поинтах и др.)
height="число" — высота элемента (в пикселях, пиках, поинтах и др.)
href="адрес" — гиперссылка, адрес (URI) на который будет выполнен переход
name="имя" — имя элемента
id="идентификатор" — уникальный (в пределах веб-страницы) идентификатор элемента
size="число" — размер элемента
class="имя_класса" — имя класса во встроенной или связанной таблице стилей
title="строка" — название элемента
alt="строка" — альтернативный текст 9

Элементы заголовка html-документа (тэг HEAD)
<TITLE> Название <TITLE> Название документа </TITLE>

документа
<BASE> Базовый адрес <BASE HREF="http://potor.baikal.ru/>
<ISINDEX> Поисковый <ISINDEX HREF="http://potor.baikal.ru/"
документ PROMPT="Enter Keywords:">
<LINK> Общая <LINK REL="Help"
гипертекстовая HREF="http://potor.baikal.ru/help.html">
ссылка
<META> Определение <META HTTP-EQUIV="Keywords"
основных способов CONTENT="java, class">
поиска и ключевых
слов в документе
для поисковых
роботов
10
Мета-теги
Мета-тег HTML — это элемент разметки html, описывающий свойства
документа (метаданные). Назначение мета-тега определяется набором его
атрибутов, которые задаются в теге <meta>.
Мета-теги размещают в блоке <head>...</head> веб-страницы. Они не
являются обязательными элементами, но могут быть весьма полезны.
<head>
<meta name="author" content="строка"> — автор веб-документа
<meta name="date" content="дата"> — дата последнего изменения веб-страницы
<meta name="copyright" content="строка"> — авторские права
<meta name="keywords" content="строка"> — список ключевых слов
<meta name="description" content="строка"> — краткое описание (реферат)
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW"> — запрет на индексирование
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> — тип и кодировка
<meta http-equiv="expires" content="число"> — управление кэшированием

11
</head>
Элементы стиля и форматирования текста.
Элемент (тэг) Значение Комментарий

<I>.....</I> Курсив (Italic)
<B>...</B> Усиление (полужирный) (BOLD)
<U>...</U> Подчеркивание
<S>...</S> Перечеркнутый текст
<Hn>…</Hn> Заголовки, n = 1,2, …,6, По мере увеличения важность заголовка снижается,

размеры и шрифт позволяет делать ссылки на фрагменты документа
отличаются от обычного
текста
<P>…</P> Абзац Закрывающий тэг необязателен
<BR>…</BR> Принудительный перенос Закрывающий тэг необязателен

на следующую строку
<FONT> Определение основного Параметры:
текста документа SIZE = “n”
…</FONT> FACE = “Имя_шрифта”
COLOR = ="#$$$$$$" (Шестнадцатеричное число.
Порядок: красный/зеленый/синий) 12
ALIGN = “LEFT|CENTER|RIGHT” – выравнивание текста
Списки
Элемент Значение Комментарий

<UL> Ненумерованн Дополнительные тэги:
..... ый список <LH>…</LH> - заголовок списка
</UL> <LI>…</LI> - элемент списка
TYPE=DISC|CIRCLE|SQUARE – тип метки у списка
<OL> Нумерованны Дополнительные тэги:
..... й список <HL>…</HL> - заголовок списка
</OL> <LI>…</LI> - элемент списка
TYPE=A|a|I|i|1 – тип нумерации
OL START=? – с какого значения начать
<DL> Список Дополнительные тэги:
… определений <DT>…</DT> - Понятие, аббревиатура
</DL> <DD>…</DD> - расшифровка понятия, аббревиатуры
<MENU> Список типа <LI>…</LI> - элемент меню

… Меню 13
</MENU>
Гиперссылки.
<A HREF=”Имя_URL”> Текст_гиперссылки </A>
“Имя _URL” – Полный адрес или относительный путь
Текст_гиперссылки – место в документе, которое будет гиперссылкой.
Можно определить гиперссылку на определенное место :

<A NAME = “Имя_для_ссылки”> текст </A>
“Имя_для_ссылки” – любое имя (идентификатор)
Текст – тот фрагмент текста, на который будет переводить гиперссылка.
<A HREF=”Имя_внешнего_файла#Имя_для_ссылки”>Текст гиперссылки </A>

- для ссылки на внешний файл.
<A HREF=”#Имя_для_ссылки”> Текст гиперссылки </A> - для ссылки на место
в текущем документе.
Вывести значение гиперссылки в другом окне:

<A HREF="URL" TARGET="***| _blank| _self| _parent| _top"> </A>
14
Гиперссылки.
Ссылки могут быть абсолютными и относительными.
Абсолютные ссылки указывают, как правило, на внешний ресурс. Для них

нужно указывать полный путь:
<a href="http://example.com/page.html">Абсолютная ссылка</a>
<a href="http://example.com/images/figure1.gif">Ссылка на страницу в каталоге</a>
Относительные ссылки используют для перехода на внутренние страницы

сайта относительно ссылающейся страницы:
<a href="/index.html">Ссылка на страницу в корневом каталоге</a>
<a href="page.html#seg1">Ссылка на фрагмент страницы в текущем каталоге</a>
<a href="images/figure1.gif">Ссылка на страницу в подкаталоге текущего каталога</a>
<a href="/docs/manual.html">Ссылка на страницу в подкаталоге корневого каталога</a>
<a href="../files/index.html">Ссылка на страницу в вышележащем каталоге </a>
15
Фон и цвета
Фоновая картинка: <BODY BACKGROUND="URL">
Цвет фона: <BODY BGCOLOR="#$$$$$$"> (порядок:красный/зеленый/синий)
Цвет текста: <BODY TEXT="#$$$$$$">
Цвет ссылки: <BODY LINK="#$$$$$$">
Пройденная ссылка: <BODY VLINK="#$$$$$$">
Активная ссылка: <BODY ALINK="#$$$$$$">
Вставка рисунков
<IMG SRC="Адрес_или_путь/Имя_файла" ALT="текст_альтернативный" >
Выравнивание картинки относительно страницы:

ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT
Выравнивание картинки относительно основного текста страницы:

ALIGN=TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM 16
Таблицы
Элемент Значение Комментарий

<TABLE> Определение Дополнительные параметры:
таблицы Окантовка таблицы BORDER=n (n=0,1,2)
..... Расстояние между ячейками CELLSPACING=n (n=0,1,2)
</TABLE> Дополнение ячеек CELLPADDING=n (n=0,1,2)
Желаемая ширина WIDTH=n (в точках)
Ширина в процентах
WIDTH="%" (проценты от ширины страницы)
Выравнивание всей таблицы относительно страницы
ALIGN = LEFT|RIGHT| CENTER|MIDDLE|BOTTOM
<TR> Определение
строки
…</TR> таблицы
<TD> Определение Ширина ячейки. Определения ячеек должно быть внутри определения строки.
ячейки строки Количество ячеек определяется заранее.
… WIDTH="%" (проценты от ширины строки)
</TD> Сумма ширины всех ячеек должна равняться 100%.
Выравнивание внутри ячейки ALIGN=LEFT|RIGHT| CENTER|MIDDLE|
BOTTOM
Текст в ячейке без перевода строки NOWRAP
Растягивание по колонке COLSPAN=n
Растягивание по строке ROWSPAN=n 17
Ввод интерактивных форм.

<FORM METHOD=POST|GET ACTION=”http://site.ru”>
Простое текстовое поле:

•<INPUT NAME="test1" VALUE="test1" TYPE="text"> test1
Поле checkbox:
•<INPUT NAME="test2" TYPE="checkbox" CHECKED>
Поле radiobutton:
•<INPUT NAME="test3" TYPE="radio">
Поле password:
•<INPUT NAME="test4" TYPE="password">
Поле hidden:
•<INPUT NAME="test5" TYPE="hidden" VALUE="kuku"> kuku
Кнопка Submit:
•<INPUT NAME="submit" VALUE="Submit" Submit
TYPE="submit">
Кнопка Reset:
•<INPUT NAME="reset" VALUE="Reset" TYPE="reset"> Reset
Графическая кнопка:
•<INPUT NAME="graph" VALUE="default" SRC="man1.gif"
TYPE="image">
</FORM> 18
HTML5 — это не продолжатель языка разметки гипертекста, а новая открытая

платформа, предназначенная для создания веб-приложений
использующих аудио, видео, графику, анимацию и многое другое
19
Основные функции
• Семантика: позволяет точнее описывать, что из себя представляет ваш

контент;
• Связь: новые способы общения с сервером;
• Оффлайн и Хранилище: методы, позволяющие сохранять информацию
локально на стороне клиента;
• Мультимедиа:создание и взаимодействие с видео и звуком;
• 2D/3D Графика и эффекты: способы значительно разнообразить
представление;
• Доступ к устройствам: использование разных устройств для ввода и вывода
информации;
• Стилизация: создание изощренных и совершенных тем.
20
Новые типы input в HTML5 формах
• input type=email определяет поле, которые должно содержать email адрес.
• input type=url определяет поле, которое должно содержать url адрес.
• input type=tel определяет поле для ввода телефонного номера. С помощью

атрибута pattern Вы может установить формат принимаемого телефонного номера.
Формат задается с помощью регулярных выражений.
• input type=number определяет поле, которое должно содержать числа. Вы

можете ограничивать диапазон принимаемых чисел с помощью атрибутов min
и max. С помощью атрибута step Вы можете задать шаг допустимых чисел (к
примеру если шаг равен 2, то в поле могут вводиться числа 0,2,4,6 и т.д.)
• input type=range определяет поле, которые может содержать значения в

определенном интервале. Отображается как ползунок, который можно
перетаскивать мышкой. input type=search определяет поле поиска (может 21
использоваться например для создания поиска по сайту).
Drag and Drop
• Технология drag and drop (иногда может упоминаться как drag'n'drop) позволяет
сделать элементы на Ваших веб-страницах
перетаскиваемыми (как окна с программами в операционной системе).
<img draggable='true'>
22
23

Websockets
• Геолокация С помощью HTML5 геолокации Вы можете определить
местоположение пользователя. Так как информация о местоположении может
нарушать конфиденциальность, прежде чем сервер сможет получить данную
информацию пользователь должен явным образом подтвердить, что не
имеет возражений на этот счет.
• Touch Events
• Canvas
• WebGL
• Web workers
Благодаря технологии web worker в HTML5 стало возможным создание скриптов,

которые будут выполняться в фоновом режиме и не будут влиять на скорость
загрузки основной страницы.
24
HTML5 Видео/Аудио
HTML5 вводит специальный тэг <video> позволяющий
встраивать в веб-страницы видео файлы.
<video width="300" height="200" controls="controls">

<source src="mountvideo.ogv" type="video/ogg" />
<source src="mountvideo.mp4" type="video/mp4" />
<source src="mountvideo.webm" type="video/webm" />
</video>
<audio controls="controls">
<source src="ghost_k-stop.ogv" type="audio/ogg" />
<source src="ghost_k-stop.mp3" type="audio/mpeg" />
Данный текст будет выведен если браузер пользователя не поддерживает элемент
audio.
</audio>
25

2 - Основы HTML

Загружено:

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

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

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

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

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

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

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

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

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

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

2 - Основы HTML

Загружено:

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

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

Основы HTML

к.т.н. доцент каф. ВТ

Идея решения проблемы обмена документами между различными

Разметка документа - это описание различных фрагментов документа и их

Выполняется разметка с помощью символов ASCІІ.

Термин "гипертекст" впервые был введен Тедом Нельсоном в 60-х годах, то

Разработкой спецификаций языка HTML и утверждением их в

Официальной спецификации HTML 1.0 не существует. До 1995 года

HTML не является языком программирования, но веб-страницы могут

Любой HTML документ состоит из обычного текста и

Описание документа начинается с указания его типа

Секция DOCTYPE позволяет указать браузеру, какой тип документа ему

Основные элементы языка – команды (ТЭГИ)

Общая структура документа HTML

Атрибуты — это пары вида «свойство = значение», уточняющие

Краткий список некоторых часто используемых атрибутов и их возможных

src="адрес" — адрес (URI) источника данных (например картинки или скрипта)

align="left|center|right|justify" — выравнивание, по умолчанию left (по левому краю)

width="число" — ширина элемента (в пикселях, пиках, поинтах и др.)

height="число" — высота элемента (в пикселях, пиках, поинтах и др.)

href="адрес" — гиперссылка, адрес (URI) на который будет выполнен переход

name="имя" — имя элемента

id="идентификатор" — уникальный (в пределах веб-страницы) идентификатор элемента

size="число" — размер элемента

class="имя_класса" — имя класса во встроенной или связанной таблице стилей

title="строка" — название элемента

alt="строка" — альтернативный текст 9

Элементы заголовка html-документа (тэг HEAD)

<TITLE> Название <TITLE> Название документа </TITLE>

<meta name="author" content="строка"> — автор веб-документа

<meta name="date" content="дата"> — дата последнего изменения веб-страницы

<meta name="copyright" content="строка"> — авторские права

<meta name="keywords" content="строка"> — список ключевых слов

<meta name="description" content="строка"> — краткое описание (реферат)

<meta name="ROBOTS" content="NOINDEX, NOFOLLOW"> — запрет на индексирование

<meta http-equiv="content-type" content="text/html; charset=UTF-8"> — тип и кодировка

<meta http-equiv="expires" content="число"> — управление кэшированием

Элемент (тэг) Значение Комментарий

<B>...</B> Усиление (полужирный) (BOLD)

<S>...</S> Перечеркнутый текст

<Hn>…</Hn> Заголовки, n = 1,2, …,6, По мере увеличения важность заголовка снижается,

<BR>…</BR> Принудительный перенос Закрывающий тэг необязателен

Элемент Значение Комментарий

<MENU> Список типа <LI>…</LI> - элемент меню

Можно определить гиперссылку на определенное место :

<A HREF=”Имя_внешнего_файла#Имя_для_ссылки”>Текст гиперссылки </A>

Вывести значение гиперссылки в другом окне:

Абсолютные ссылки указывают, как правило, на внешний ресурс. Для них

Относительные ссылки используют для перехода на внутренние страницы

<IMG SRC="Адрес_или_путь/Имя_файла" ALT="текст_альтернативный" >

Выравнивание картинки относительно страницы:

Выравнивание картинки относительно основного текста страницы:

Элемент Значение Комментарий

Ввод интерактивных форм.

Простое текстовое поле:

HTML5 — это не продолжатель языка разметки гипертекста, а новая открытая

• Семантика: позволяет точнее описывать, что из себя представляет ваш

Новые типы input в HTML5 формах

• input type=email определяет поле, которые должно содержать email адрес.

• input type=url определяет поле, которое должно содержать url адрес.

• input type=tel определяет поле для ввода телефонного номера. С помощью

• input type=number определяет поле, которое должно содержать числа. Вы

• input type=range определяет поле, которые может содержать значения в

Drag and Drop