Общая структура HTML страницы 3
Элементы форматирования текста 3
Отображение служебных символов в HTML 5
Вставка рисунков элемент img 6
Адресация 6
Стили 7
I гр – стили шрифтов 8
II гр – стили текста 9
III гр – стили фона 10
Ссылки (Links) 10
Ссылки на закладки 11
Для нескольких документов: 11
Карта ссылок 12
Списки (List) (блочный) 13
Нумерованный (ordered list) 13
Маркиров анный (unordered list) 13
Список определений (definition list) 14
Вложенные списки 14
Стили списков 15
5-я группа стилей 16
Отступы 16
Поля 16
Границы 17
Толщина 17
Цвет 17
Стили границ 17
Значения стилей 18
Дополнительные стили рамок 18
Meta-данные 19
CSS – каскадные таблицы стилей 21
Синтаксис CSS 22
Использование классов в селекторах 24
Использование идентификаторов в селекторе 24
Таблицы – блочный элемент 25
Атрибуты элемента <table> 25
Объединение ячеек по горизонтали 26
Объединение ячеек по вертикали 26
Использование вложенных таблиц 27
Дополнительные элементы таблиц. 27
Стиль таблицы 30
Фреймы (Frams) 31
Вложенные фреймовые структуры - 32
Атрибуты элемента <frame> 32
Использование ссылок в фреймах 33
Встроенные фреймы. 34
Стили позиционирования элементов. 35
<img src="./red_b.gif" style="position:absolute; top:175; left:100; z-index:40"/> 35
Стили, управляющие отображением элементов. 36
Стили курсора. 37
Псевдоклассы ссылок (стандартные) 38
Стили полос прокрутки. 39
Общая структура html страницы
<html>
<head>
<title> Заголовок</title>
</head>
<body>
Содержание документа
</body>
</html>
HTML игнорирует последовательности пробелов, переходы на новую строку и символы табуляции
Элементы форматирования текста
Линейные
Занимают столько места, сколько нужно для их содержимого
Никогда не делают перехода на новую строку
Не могут содержать блочных
Нельзя применять выравнивание
Блочные
Занимают всю доступную ширину экранной области
Перед собой и после себя делает переход на новую строку
Можно применять выравнивание
Линейные элементы форматирования текста.
<b> - старый полужирный
<i> - старый наклонный
<strong> - новый полужирный
<em> - новый курсив
<s> - перечеркивание
<u> - подчеркивание
<sub> - нижний индекс
<sup> - верхний индекс
Пример: <b><i>HTML</i></b>
<b>H<sub>2</sub>O</b> результат:H2O
<font> шрифт, размер, цвет текста
size Атрибуты <font> - размер текста
face шрифт
color цвет
Пример: <font size=”4” face=”Arial” color=”#00FF00”>
Блочные элементы форматирования.
<p> абзац
Техт
</p>
! Абзацы нельзя вкладывать друг в друга
<p align=”left” выравнивание: по левому краю
“center” по центру
“right” по правому краю
“justify”> по ширине
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> Заголовки 1-6 уровней
! Внутрь заголовков абзацы вставлять нельзя.
<pre> сохраняет пробелы, переходы на новую строку и символы табуляции
<
br
/> переход на новую строку
<nobr> запрещает переносить отдельные слова этого тега </nobr>
<hr> переход на новую строку и создает горизонтальную разделительную линию
Атрибуты <hr>:
size толщина
width длина
color цвет
noshadel линия без объема
Пример: <hr size=”3” width=”500”>
Отображение служебных символов в html
< <
> >
& &
“ "
‘ '
Вставка рисунков элемент img
<img src="URL" //обязательный
alt="альтернативный текст" //обязательный
width="ширина"
height= "высота"
border="толщина" /0/
align= "left"
right
top
middle
bottom
vspase="отступ"
hspase="отступ"
/>
Элемент линейный
Если не требуется решать задачу изменения размеров изображения, настоятельно рекомендуется указывать их реальные размеры в пикселах с помощью параметров WIDTH и HEIGHT.
Адресация
Пример абсолютной адресации:
http://yandex.ru/files/ducky.gif
Правила относительной
1) ./файл.gif // в одной папке
2) ../файл.gif // файл в родительской папке
3) ./папка/файл.gif // файл вовложенной папке
4) /файл.gif // файл в корневой папке текущего диска (с:,d:)
Стили
Стили выполняют те же функции, что и атрибуты, но у них больше возможностей, любой стиль можно применить к любому элементу.
Синтаксис применения стилей к элементу:
<
p h strong . .
стиль:значение;” > текст
</тег>
п ример:
<p style=”text-align:center; color:red”> текст
</p>
<span> - дефис, линейный элемент, который не выполняет ни какого действия, используется если к небольшому участку текста, внутри другого текста надо что-то изменить
пример: текст1 –красный, текст2(внутри текста1)-черный
<p style=”text-align:center; color:red”> текст1…<span style=”color:black”> текст2</span> …текст1
</p>
Группы стилей
I гр – стили шрифтов
II гр – стили текста
III гр – стили фона
I гр – стили шрифтов