Тема 1 - Язык HTML (Начало)

Тема 1.
Язык HTML
Язык HTML - это язык разметки документа.

Уровни html
В 1994 году HTML разбит на уровни. Было выделено 4 уровня:
Уровень 0: включает в себя заголовки, ссылки, списки.
Уровень 1: добавляются рисунки и элементы выделения текста.
Уровень 2: добавляются формы, позволяющие пользователю вводить информацию.
Уровень 3: добавляются таблицы.
Уровень 4: появление Dynamic HTML, позволяющего динамическое изменение и
позиционирование.
Обзор html 5
1. HTML 5 – это, скорее, новая платформа для создания веб–приложений, нежели стандарт,
продолжающий традиции предшественников.
2. HTML 5 регламентирует взаимодействие с JavaScript посредством объектной модели
документа.
3. HTML 5 поддерживает все элементы HTML 4.
Документ HTML состоит из указаний - тегов, которые могут образовывать контейнеры,

каждый из которых начинается и заканчивается тегом.
Тег – это инструкция браузеру, указывающая способ отображения текста. НТМL-тег состоит
из заключенного в угловые скобки (< и >) имени, за которым может следовать необязательный
список атрибутов тега, например <head>. Атрибут – необязательный набор параметров,
содержащий дополнительную информацию для браузера. Он состоит из имени атрибута, знака
равенства и значения атрибута. Атрибуты отделяются друг от друга одним или несколькими
знаками табуляции, пробелами или символами возврата к началу строки. Порядок записи
атрибутов в теге значения не имеет. Если значение атрибута - одно слово или число, то его
можно просто указать после знака равенства. Все остальные значения необходимо заключать в
одинарные или двойные кавычки, особенно если они содержат несколько разделенных
пробелами слов.
Чаще всего НТМL-теги состоят из начального и конечного компонентов (парные теги),
между которыми размещаются текст и другие элементы документа. Имя конечного тега
идентично имени начального, но перед ним ставится косая черта (/) (например, <i> ···
</i>). Непарные теги не имеют конечного компонента.
В некоторых случаях конечные теги в документе можно опускать. Большинство браузеров
реализованы так, что при обработке текста документа начальный тег воспринимается как
конечный тег предыдущего. Самый распространенный тег такого типа - тег абзаца <p>.
Поскольку он используется в документе очень часто, то его обычно ставят только в начале
каждого абзаца. Когда один абзац заканчивается, следующий тег <p> сигнализирует браузеру о
том, что нужно завершить данный абзац и начать следующий.
Теги вида  не интерпретируются и не выполняются, а трактуются как
комментарии. Язык к регистру не чувствителен.
Элемент НТМL - часть документа, окруженная тегами.
HTML-документ обрамляется парными тегами <html> … </html>. Кроме того, для
обеспечения корректного отображения документа современный стандарт требует
использования одиночного тега <!DOCTYPE>, имеющего следующую структуру:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Этот элемент необходим для того, чтобы браузер понимал, какую версию HTML следует
использовать для анализа и отображения документа. Указанная выше инструкция
предназначена для версии HTML 4.01. Для HTML 5 эта инструкция выглядит следующим
образом:
<!DOCTYPE html>
1 Ст. преп. Косырева Л. А., 2020

Структура HTML-документа позволяет использовать вложенные друг в друга контейнеры.
Контейнер HTML, или гипертекстовый документ, состоит из двух других вложенных
контейнеров: заголовка документа HEAD и тела документа BODY.
Пример 1.
<!DOCTYPE HTML>
<html>
<head>
<title>Пример 1</title>
</head>
<body>
<H1>Привет!</H1>
<P>Это простейший пример HTML-документа.</P>
</body>
</html>
Здесь:
<html> – тег начала документа (парный тег);
<head> – тег начала заголовка документа;
<title> – тег, содержащий наименование документа. Используется как заголовок окна, в
котором отображается документ.
<body> – тег начала собственно выводимого на экран документа.
Этот документ можно набрать в Блокноте и сохранить с расширением .html.
Отображение текста в документе

Тег начала нового абзаца
<p align=left|center|right>
Атрибут ALIGN определяет выравнивание текста по левой границе, по центру и по правой
границе соответственно. Подчеркнутый атрибут означает по умолчанию.
Оформление текста в стиле заголовка:
<Hn align=left|center|right>
n – определяет размер символов параграфа (1 – 6), максимальный размер символов
соответствует 1.
Изменим содержимое предыдущего примера:
<h1 align=center>Привет!</h1>
<h2>Это чуть более сложный пример HTML-документа</h2>
<p>Абзац можно выравнивать не только по левому краю, </p>
<p align=center>но и по центру</p>
<p align=right >или по правому краю.</p>

Отступ, выравнивание текста, перевод строки
Создание отступа текста от границы окна:

<blockquote> - тег смещает левую и правую границу текста. При этом происходит
уменьшение ширины строки. Парный тег. Используется в основном для выделения цитат.
Тег <center> центрирует содержимое всех вложенных тегов, независимо от того, текст это
или рисунок (парный тег).
Управлять положением текста на экране можно с помощью параметра align тегов <Р> и
<H>.
Принудительный перевод текста на следующую строку:
<br
clear= left | right |all>
Атрибут CLEAR указывает, где расположить текст после перевода строки в случае, если
используется «плавающий рисунок»: если ALL, или LEFT и рисунок выровнен по левому краю,
или RIGHT и рисунок выровнен по правому краю - под рисунком; при отсутствии параметра –
текст выводится по вертикальной границе рисунка (обтекает рисунок).
С помощью следующего тега описывается горизонтальная линия:
<hr
align = left | center | right (выравнивание линии)
color = цвет
noshade - отображать линию без 3-хмерных эффектов, т.е. не отбрасывать тень;
size = n (высота линии в пикселях)
width = n> (ширина линии в пикселях)
Использование шрифтов
Задание текущего шрифта (используется для изменения вида текущего шрифта):
<font
size = n
face = имя
color = цвет>
Атрибуты: size устанавливает размер шрифта (n=1–7);
face = имя [,имя][,имя] определяет имя (гарнитуру) используемого шрифта
– если недоступен первый шрифт, будет использоваться второй и т.д.;
color определяет цвет шрифта.
<basefont> - задает параметры шрифта по умолчанию. Атрибуты те же.
Стили шрифтов:
<i> или <em> - курсив
<b> или <strong> - жирный текст
<u> - подчеркивание
<s> - перечеркнутый текст
<mark> - помечает текст как выделенный. В браузере Chrome и Firefox фоновый цвет
текста выделяется желтым цветом.
<sup> - верхний индекс
<sub> - нижний индекс
<small> - уменьшает размер шрифта на 1
<big> - увеличивает размер шрифта на 1
Стиль оформления документа

Начало и конец отображаемой части документа определяет тег <BODY>. Он служит в
качестве контейнера, в котором располагается тело HTML-документа. Позволяет описать фон,
цвет гипертекстовых ссылок, границы документа. Основные атрибуты тега:

атрибут значение
адрес рисунка в формате URL, который будет использоваться в качестве
background
фона. Например: background=“bg.gif”
устанавливает цвет фона документа, используя значение цвета в
bgcolor
виде RRGGBB. Например: text=”FFFFFF” – белый цвет.
устанавливает цвет текста документа, используя значение цвета в
text
виде RRGGBB. Например: text=”FF0000” - красный цвет.
устанавливает цвет активной гиперссылки (переход к которой
alink
выполняется в данный момент времени, т.е. при нажатии)
link устанавливает цвет гиперссылки, которую еще не посетили
vlink устанавливает цвет гиперссылки, которую посетили
может принимать единственное значение FIXED, указывая тем самым,
bgproperties что фоновый рисунок без скроллинга (фон остается неподвижным при
просмотре текста документа)
TOPMARGIN устанавливает величину верхнего поля документа
определяет величину левого поля документа в пикселях;
leftmargin
например: leftmargin=”10”
Пример 2.
<body bgcolor=FDD0D1>
<p><font color=red> <b>Дама</b> сдавала в багаж</font>
<br><font color=maroon> <u>Диван, чемодан, саквояж,</u></font>
<br><font color=green> <u>Картину, корзину, картонку</u></font>
<br><font color=blue> <i>И маленькую собачонку.</i></font>
</body>
Escape-последовательности
В случае, если кодировка или конфигурация оборудования и программного обеспечения не
позволяет вводить определенные символы, например, ©, ®, ₤ или §, можно использовать
ссылки на символы, называемые Escape-последовательностями. Escape-последовательности -
это независимый от кодировки механизм ввода любых символов.
Escape-последовательности в HTML могут принимать две формы:
- Числовые ссылки на символы, например, © (символ авторского права ©).
- Буквенные обозначения символов, например, © (символ авторского права ©).
Код Символ Код Символ
< < " "
> > & &
« « © ©
» » Неразрывный пробел
§ §
Списки
Создание ненумерованного списка с точкой у каждого элемента списка (парный тег):
<ul
type =стиль списка>

Стили нумерации в списке: DISC – сплошная точка, CIRCLE – полая окружность,
SQUARE – квадратная точка.
Создание нумерованных списков:

<ol
start=n
Атрибуты: START – номер первого элемента списка;
TYPE – стиль нумерации в списке (1 – использовать числа; А – исп. большие символы; а – исп.
маленькие символы; R – использовать пропорциональный шрифт с большими символами; r –
аналогично с маленькими символами).
Задание элементов списка:

<li
start =n
Атрибуты те же, что и в <UL> и <OL>.
Список определений:
<dl> - несколько отличается от других видов списков. Вместо меток <li> в списках
определений используются метки <dt> (definition term — определяемый термин) и <dd> (
definition definition — определение определения).
Пример 3.
Нумерованный список: Пример вложенных списков:
<ol> <ul>
<li>Иван; <li> Зимние месяцы
<li>Данила; <ol>
<li>белая кобыла <li>декабрь;
</ol> <li>январь;
<li>февраль
</ol>
<li> Летние месяцы
<ol>
<li>июнь;
<li>июль;
<li>август
</ol>
</ul>
Графические элементы
В HTML-документ встраиваются изображение в формате GIF (с расширением *.gif), JPEG
(*.jpg или *.jpeg) или PNG. Размещение графического элемента в HTML документе
осуществляется при помощи тега <img>. Его атрибуты:
src URL-адрес рисунка
align определяет положение рисунка на странице относительно окружающего
текста. Значения = left |right|top| middle |bottom
top – окружающий текст выровнен по верхнему краю компонента;
middle – по середине компонента; bottom – по его нижнему краю;
left – компонент прижат к левому краю страницы и текст его обтекает;
right – аналогично, к правому краю страницы.
height задает вертикальный размер изображения в пикселях или процентах

width горизонтальный размер отображения
border ширина рамки вокруг элемента
hspace горизонтальный размер неотображаемой границы изображения
vspace вертикальный размер неотображаемой границы компонента
Задает альтернативный текст, выводимый вместо графического объекта,
alt
если тот не может быть отображен
ismap показывает, что изображение является картой образа, реагирующей на
нажатие клавиши мыши
usemap Задает расположение и имя карты изображений на клиентской части
Пример 4.
<img src="Yucca.jpg" width = 110 height = 168 align = left>
Этот текст расположен около рисунка и обтекает его.
<br clear=left>А теперь обтекание отключено.
</P>
ТАБЛИЦЫ
Для создания таблицы используется парный тег <table>. Его атрибуты:
align LEFT|CENTER|RIGHT (выравнивание таблицы)
background адрес рисунка-фона таблицы
bgcolor цвет фона таблицы
устанавливает толщину внешней рамки таблицы и ячеек в
border пикселях. Если атрибут не установлен или равен 0, таблица
показывается без рамки.
bordercolor цвет границы
bordercolordark цвет темных участков 3-мерного границы
bordercolorlight цвет светлых участков 3-мерного границы
задает в пикселях ширину промежутков между содержимым
cellpadding
ячейки и ее границами, то есть задает поля внутри ячейки
cellspacing задает в пикселях ширину промежутков между ячейками
cols количество столбцов таблицы
тип обрамления (границы). Определяет, какие части
наружного бордюра будут отображаться. Может принимать
значения: VOID – не отрисовывать границы; ABOVE – только
frame верхняя граница; BELOW – только нижняя граница; HSIDES –
только верхняя и нижняя границы; LHS – только левая
граница; RHS – только правая граница; VSIDES – только
вертикальные границы; BOX, BORDER – все границы.
тип разделителей. Определяет, какие части внутреннего
бордюра будут отражаться. Значения: NONE – не
отображается; GROUPS – отображается разделительная линия
rules между группами, группы могут задаваться с помощью тегов
<THEAD>, >TBODY>, <TFOOT>, <COLGROUP>; ROWS –
только горизонтальные линии между элементами; COLS –
только вертикальные линии между элементами; ALL – все.
width ширина таблицы в пикселях, процентах или частях
Для создания пояснительной надписи к таблице можно воспользоваться тегом:

<caption
align=top|bottom|left |right>

Параметр align служит для того, чтобы задать положение пояснительной надписи к
таблице или рисунку, и принимает значения: top – в центре над таблицей; bottom – в центре
под таблицей; left – слева над таблицей; right – справа над таблицей.
Для объявления заголовка таблицы служит тег <thead> (без атрибутов).
Тело таблицы объявляет тег <tbody>.
Итоговую часть таблицы объявляет тег <tfoot>.
Для группировки колонок таблицы в группы используется тег:
<colgroup
align = left |center| right (выравнивание содержимого группы)
span=n
>
Атрибуты: span– число колонок, к которым следует применить операцию выравнивания. В
случае отсутствия применяется ко всей группе.
Для описания выравнивания содержимого колонки таблицы применяют тег:
<col
align = left | center | right
span =n>
Элементы таблицы задают следующие два тега.
Строку в таблице создает тег <tr>. Его атрибуты:
align left | center | right
background адрес рисунка-фона

bgcolor цвет фона
выравнивание содержимого строки по вертикали.
Значения: top – выравнивание по верхней границе
valign каждого элемента; middle – по середине каждого
элемента; bottom – по нижней границе каждого элемента;
baseline – по общей линии соседних элементов.
Для задания одного элемента строки (ячейки) используется тег <td>.

Его атрибуты:
align left | center | right
background адрес рисунка-фона
bgcolor цвет фона
colspan число колонок, которые занимает данная ячейка
rowspan число строк, которые занимает данная ячейка
nowrap = nowrap (не сворачивать текст, а записывать так, как он
записан в HTML документе)
valign тип выравнивания
Если то же самое нужно записать более жирным шрифтом, используется тег <th> с теми
же атрибутами.
Пример 5.
<html>

<body>
<table BORDER=1>
<caption align=top>Заголовок над таблицей</caption>
<caption align=bottom >Заголовок под таблицей</caption>
<tr>
<td> Первая строка, первая колонка </TD>
<td> Первая строка, вторая колонка </TD>
</tr>
<tr>
<td> Вторая строка, первая колонка </TD>
<td> Вторая строка, вторая колонка </TD>
</tr>
</table>
</body>
</html>
Пример 6.
<html>
<body>
<table border=11 valign=middle width=300 height=200>
<tr>
<td ROWSPAN=2>в центре</TD>
<td COLSPAN=2 align=right>справа</Td>
</tr>
<tr>
<td align =left>cлева</td>
</tr>
</table>
</body>
</html>
Создание гиперссылок и использование адресации в HTML

В отличие от обыкновенного текста, который можно читать только от начала к концу,
гипертекст позволяет осуществлять мгновенный переход от одного фрагмента текста к
другому. Для создания ссылки на документ, находящийся на другом сервере, используется
Universal Resourse Identifier (URL), который определяет способ кодирования адресов ресурсов
Сети при обращении к ним из WWW.
Схема HTTP: Основной способ адресации в WWW. Указывается способ адресации(http),
путь, состоящий из доменного адреса машины, полного адреса HTML документа в дереве
сервера HTTP и, возможно, метки в теле документа. Например: http://dx.mpo_evs/alex/main.htm
Схема FILE: применяется при использовании технологии WWW в локальной сети или на
отдельном компьютере. Например: file://d:\frontPage\mebs\home.htm
Схема MAILTO: применяется для отправки электронной почты. Часто его помещают на
одной из страниц разработчики узлов WWW. Например,
mailto:Alex@raty.od.ua

Для создания гиперссылок на другие документы или создания меток в теле самого
документа используется тег <A>. Его атрибуты:
адрес документа в формате URL, к которому следует перейти при активации
href ссылки. В случае отсутствия полного адреса поиск происходит в том же
месте, где находится текущий документ;
имя тега. Может быть использовано для перехода к данному фрагменту
name документа путем указания его в поле HREF другого тега <A>. При
обращении оно должно предваряться символом "#";
идентификатор фрейма или окна, где должен отображаться документ, на
который указывает ссылка.
target="_blank" означает, что документ откроется в новом окне;
target="_self" - загружает страницу в текущее окно (по умолчанию);
target
target="_parent" - загружает страницу во фрейм-родитель, если
фреймов нет, то это значение работает как _self;
target="_top" - отменяет все фреймы и загружает страницу в полном
окне браузера, если фреймов нет, то это значение работает как _self.
Например,
<a href="index.htm#town" target="_blank">Это ссылка на файл index.htm
к метке с именем town.</a>
При использовании неполной формы представления адреса URL используется метод
адресации с использованием базового адреса, т.е. к неполной форме добавляется адрес,
заданный с помощью тега:
<base
href = адрес
target =окно
>
Использование атрибута href:
а) ссылка на HTML-документ, находящийся на другом сервере, использует способ
адресации http:
<a href="http://www.intuit.ru/courses.html"> Список курсов интернет-
университета информационных технологий </A>
б) ссылка на документ, находящийся в локальной сети или на отдельном компьютере:
<A HREF="ftp://server/directory/file.exе">Загрузить файл</A>
Такая ссылка запустит протокол передачи файлов и начнет загрузку файла file.exе.
в) для отправки электронной почты используется ссылка:
<A HREF="mailto:user@mail.box">Послать письмо</A>
Если пользователь совершит переход по такой ссылке, у него на экране откроется окно
ввода исходящего сообщения его почтовой программы. В строке To: ("Куда") окна почтовой
программы будет указано user@mail.box.
г) Переход на другую страницу: <A HREF="news.html">Новости</A>
д) При необходимости можно задать переход не просто к некоторому документу, но и к
определенному месту внутри этого документа. Для этого необходимо создать в документе, к
которому будет задан переход, некоторую метку (или анкер).
Предположим, что хотим сделать ссылку в документе news.html на раздел «Анонс
выпуска», расположенный ниже. Для этого необходимо:
1. Отметить место в документе, на которое будет вести ссылка, следующим образом:
<a name = "point1">Анонс выпуска</a>

2. Создать ссылку на помеченную область:
<a href = "#point1">Просмотреть анонс</A>
Здесь point1 – имя помеченной области, которое задается разработчиком.
Создание ссылки внутрь другого документа выполняется аналогично, за исключением
того, что в ссылке помимо имени помеченной области указывается имя другого документа.
Например:
<a href="anonce.html#point1">Просмотреть анонс</A>
По умолчанию загружаемый по ссылке документ отображается в том же окне, что и
предыдущий. Для того, чтобы новых документ загружался в новом окне, используется атрибут
target="blank". Например:
<a href="anonce.html#point1" target="blank">Просмотреть анонс</A>
Фреймы
Вводя тег <frame>, дизайнер НТМL-страницы разделяет экран браузера на части.
Браузер, распознающий фреймы, загружает разные страницы в разные секции, или фреймы,
экрана. Расположение фреймов на экране задается почти так же, как ячеек в таблице: теги и
атрибуты работают так же, как их табличные родственники. Однако есть и отличия:
содержимое фрейма - это отдельная HTML-страница, которая может находиться где угодно - в
другом каталоге, на локальном сервере или на удаленном узле где-то в сети.
Для того, чтобы страница могла содержать фреймы, тег <BODY> заменяется на тег
<frameset>. Его атрибуты:
cols разбивает окна на вертикальные колонки, ширина задается в
пикселях, % или как остаток от размера окна «*»
rows разбивает окно на горизонтальные полосы, высота каждой задается
аналогично COLS.
frameborder 1|0 - отображать или нет 3-мерный бордюр между фреймами
framespacing дополнительное расстояний между фреймами
После задания структуры фреймов, каждый фрейм описывается при помощи тега
<frame>. Его атрибуты:
align LEFT|CENTER|RIGHT|TOP| BOTTOM
name имя фрейма (может быть использовано в других тегах для указания
места, где будет отображаться документ)
src адрес отображаемого документа
scrolling yes|no (выводить или нет полосу скроллера)
marginheight высота поля вокруг фрейма
marginwidth ширина поля вокруг фрейма
frameborder 1|0
Пример 7.
<html>
<frameset rows="50%,50%">
<frame src="page1.htm" name="frame1">
<frame scrolling=no src="page2.htm" name="main">
</frameset>
</html>
Можно встраивать и плавающие фреймы. Они располагаются в HTML документе также,
как и графические элементы, создаваемые тегом <img>, и в этом случае возможно располагать

на Web странице и фрейм, и текст. Для этого служит тег: <iframe>. Атрибуты те же, что и у
тегов <img> и <frame>.
Основы работы с видео и звуком

В спецификации HTML5 предусмотрено два тега для работы с аудио и видео
соответственно: <audio> и <video>.
Данные теги являются компонентами собственной среды браузера. Это означает, что не
используется никаких сторонних средств для воспроизведения мультимедиа-информации, что,
во-первых, повышает безопасность, во-вторых, за счет более тесной интеграции, позволяет
обходиться меньшим количеством аппаратных ресурсов для воспроизведения мультимедиа, и,
в-третьих, позволяет избежать ряда проблем отображения информации
(визуальное пересечение с остальным контентом).
Существуют и недостатки указанных тегов: спецификация HTML5 поддерживает далеко не
все кодеки. Частичным решением проблемы кодеков может служить использование
элемента <source>, позволяющий объявить несколько источников мультимедиа, из которых
браузер выберет наиболее подходящий.
Например:
<audio>
<source src="sound1.ogg">
<source src="sound1.mp3">
</audio>
Атрибуты тега <audio>:
src задает путь к файлу для воспроизведения
при его добавлении, воспроизведение файла начинается сразу же после
autoplay
загрузки страницы
controls добавляет панель управления к аудио
loop воспроизведение аудио после его завершения повторяется сначала
используется для загрузки файла вместе с загрузкой самой страницы,
preload
игнорируется, если использован autoplay;
Например:
<audio autoplay controls> src="Штраус - вальс.mp3"> </audio>
Видео добавляется аналогичным образом:
<video src="video1.avi"> </video>
Помимо атрибутов, совпадающих с тегом <audio>, у тега <video> имеются и такие
атрибуты:
height задает высоту области для воспроизведения видео
width задает ширину области для воспроизведения видео
указывает путь к изображению, пока видео не воспроизводится или
poster
недоступно

Тема 1 - Язык HTML (Начало)

Загружено:

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

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

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

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

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

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

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

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

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

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

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

Тема 1 - Язык HTML (Начало)

Загружено:

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

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

Тема 1.

Язык HTML - это язык разметки документа.

Документ HTML состоит из указаний - тегов, которые могут образовывать контейнеры,

1 Ст. преп. Косырева Л. А., 2020

Отображение текста в документе

2 Ст. преп. Косырева Л. А., 2020

Создание отступа текста от границы окна:

Стиль оформления документа

3 Ст. преп. Косырева Л. А., 2020

4 Ст. преп. Косырева Л. А., 2020

Создание нумерованных списков:

Задание элементов списка:

5 Ст. преп. Косырева Л. А., 2020

Для создания пояснительной надписи к таблице можно воспользоваться тегом:

6 Ст. преп. Косырева Л. А., 2020

background адрес рисунка-фона

Для задания одного элемента строки (ячейки) используется тег <td>.

7 Ст. преп. Косырева Л. А., 2020

Создание гиперссылок и использование адресации в HTML

8 Ст. преп. Косырева Л. А., 2020

9 Ст. преп. Косырева Л. А., 2020

10 Ст. преп. Косырева Л. А., 2020

Основы работы с видео и звуком

11 Ст. преп. Косырева Л. А., 2020

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