Язык разметки текста HTML

advertisement
Язык разметки
текста HTML
HTML-страница
HTML-страница представляет собой
простой текстовый файл, в котором
наряду с текстом присутствуют
специальные управляющие команды
 Эти команды называются «тегами» и
заключаются в скобки из символов < и >
 Например, <body>

HTML-файл
Текст HTML-страницы располагается в
файле с расширением .html
 Например, index.html
 Имя файла должно быть написано
строчными (маленькими) латинскими
символами без пробелов и может
содержать цифры и символ «_»
 Например, ivan_ivanov_7.html

Структура HTML-страницы
<html>
<head>
</head>
<body>
</body>
</html>
Пример HTML-страницы
<html>
<head>
</head>
<body>
Этот текст отображается браузером
</body>
</html>
Свойства текста

Для управления внешним видом
символов текста используются теги:
<b>полужирный</b>
<i>курсив</i>
<u>подчеркнутый</u>
Свойства текста
Для управления размером и цветом
шрифта служит тег:
<font>Текст</font>
В открывающем теге <font>
указываются значения свойств
«размер» и «цвет»:
<font size=‘7’ color=‘blue’>Текст</font>
Свойства текста
Размер текста может меняться от 1 до 7
 Цвет текста может быть задан либо
зарезервированным словом, например,
‘blue’ – синий, ‘red’ – красный,
‘lightyellow’ – светло-желтый и т.п., либо
числом в шестнадцатеричном формате,
например, ‘#a7c3e9’

Свойства текста
Первые два символа задают яркость
красного цвета, вторые два символа –
зеленого, а третьи два символа – синего.
 Каждый символ может быть либо
цифрой, либо одним из шести символов:

a, b, c, d, e, f
Шестнадцатеричный формат чисел
В этом формате каждый символ соответствует
числу в диапазоне от 0 до 15:









0 – это «0» в десятичной системе счисления
1 – это «1»
..............
9 – это «9»
a – это «10»
b – это «11»
..............
e – это «14»
f – это «15»
Шестнадцатеричный формат чисел
С помощью двух символов можно представить число в
диапазоне от 0 до 255:
00 – «0»
01 – «1»
.............
0f – «15»
10 – «16»
11 – «17»
12 – «18»
..............
fe – «254»
ff – «255»
Цвет текста
Например,
<font size=‘7’ color=‘#e3f7ee’>Текст</font>
Блок текста
<div align=‘left’>
Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст.
Текст. Текст. Текст. Текст. Текст. Текст.
</div>
Свойство align задает тип выравниваения текста.
Возможны четыре значения:
left
по левому краю
right
по правому краю
center
по центру
justify
по ширине
Абзац текста

При большом количестве текста его можно разбить на
несколько частей – абзацев тегом <p></p>
<div align=‘left’>
<p>
Текст первого абзаца. Текст первого абзаца. Текст первого абзаца.
Текст первого абзаца. Текст первого абзаца. Текст первого
абзаца.
</p>
<p>
Текст второго абзаца. Текст второго абзаца. Текст второго абзаца.
Текст второго абзаца. Текст второго абзаца.
</p>
</div>
Изображение

Для добавления на страницу изображения
служит тег <img>
Например, тег
<img src=‘tux.jpg’>
Показывает изображение, находящееся в
файле “tux.jpg” в том же каталоге, что и файл
HTML-страницы
Размер изображения
Для задания размеров изображения
служат свойства ‘width’ – ширина и
‘height’ – высота
Например,

<img src=‘tux.jpg’ width=‘100’ height=‘100’>
Значения указаны в пикселях.
Гиперссылки
Для ссылки на другую HTML-страницу
служит тег <a></a>
Например,

<a href=‘http://www.chukin.ru’>Это гиперссылка</a>
Свойство href указывает URL ресурса, на
который будет осуществлен переход, при
нажатии на гиперссылку
Download