- •Учебный Курс по html Содержание
- •Введение
- •Понимание html
- •Предназначение и цели современного html
- •Древообразная структура html
- •Понятие dtd
- •Объектная модель документа
- •Содержание и отображение
- •Пример современного html
- •Пример html старого типа
- •Используемые средства и программы Редактор для html – текстовый редактор
- •Редактор для css
- •Настройка рабочего места в Photoshop
- •Слои (Layers)
- •Принятие решения: текст – картинка
- •Формат изображений (gif, jpeg, png)
- •Вспомогательные средства.
- •Полезные plug-in’ы.
- •Оформление документов – корпоративный стиль Правила именования папок и файлов
- •Правила для html-кода
- •Отступы
- •Элементы и атрибуты
- •Переносы
- •Перенос элемента
- •Перенос внутри элемента
- •Вставка специальных символов
- •Комментарии
- •Правила для css-кода
- •Основные правила для кода JavaScript
- •Основные элементы html
- •Немного о стандартах
- •Селекторы
- •Псевдоклассы и псевдоэлементы
- •Единицы измерения
- •Основные css-свойства
- •Свойства шрифта
- •Свойства эффектов текста
- •Свойства выравнивания
- •Свойства переноса
- •Свойства фона
- •Свойства цвета текста
- •Свойства границ элемента
- •Свойства обтекания
- •Свойства внешнего отступа
- •Свойства внутреннего отступа
- •Свойства таблицы
- •Свойства отображения
- •Свойства размера
- •Свойства позиции
- •Свойства переполнения
- •Порядок применения стилей и приоритеты
- •Основные способы персонализации стилей для браузеров
- •Ie 6 и ниже
- •Ie 7 и все современные браузеры
- •Практическая верстка с чего начинается документ
- •Модели отображения блочных элементов
- •Заголовок документа
- •Xml заголовок в xhtml документе
- •Проверка документов на соответствие спецификациям
- •Тело документа
- •Основные виды веб-страниц
- •Страница с фиксированной шириной
- •Страница с плавающей шириной
- •Основные элементы страницы
- •Логотип
- •Способы использования png
- •Способы и особенности создания страниц с изменяемым размером шрифта
- •Создание страниц с использованием em для указания размеров элементов страницы
- •Особенности табличной верстки
- •Создание email-шаблонов
- •Особенности создания принт-версии страницы
- •Особенности создания страниц с использованием правостороннего ввода текста (арабский, иврит и т.П.)
- •Оптимизация кода для поисковых систем и стандарты доступности
- •Заключение
- •Приложение
Основные элементы html
В таблице 5-1 приведен список часто используемых элементов HTML. Любые элементы не входящие в этот список нужно использовать с осторожностью. Каждый раз, при использовании того или иного HTML-элемента, необходимо задавать себе вопрос – «Подходит ли данный элемент для этого фрагмента страницы? Отражает ли он семантическую сущность объекта? Добавляет ли результирующий код ясности в документ, либо наоборот вносит неразбериху?». Обратите также внимание на атрибуты, которые используются в примерах. Как правило, эти атрибуты являются обязательными для элементов.
Таблица 5‑1 – Список основных элементов HTML
|
Элемент |
Пример |
Описание |
|
html |
<html>…</html> |
Обозначает начало и конец HTML-документа |
|
head |
<head>…</head> |
Обозначает начало и конец заголовка HTML-документа |
|
title |
<title>…</title> |
Заголовок страницы, показываемый в заголовке окна |
|
meta |
<meta name="…" content="…"> |
META-данные |
|
style |
<style type="text/css">…</style> |
Cтилевая разметка, внутренний CSS |
|
link |
<link type="text/css" rel="stylesheet" href="#"/> |
Подключение внешнего CSS |
|
script |
<script type="text/javascript"> …</script> |
JavaScript внутри HTML |
|
script |
<script src="js/script.js" type="text/javascript"></script> |
Подключение внешнего JavaScript |
|
body |
<body>…</body> |
Обозначает начало и конец тела HTML-документа |
|
div |
<div>…</div> |
Представляет собой блочный (по-умолчанию) элемент, который используется, чтобы отделить один фрагмент кода от другого. С его помощью позиционируют различные элементы страницы. Кроме разделения кода, никакого смысла этот элемент не несет. Его значение определяют стили CSS. Таким образом, этот элемент чаще всего выступает в роли контейнера для других элементов, с помощью которого веб-разработчик определяет их вид и позицию при отображении. |
|
h1, h2, h3, h4, h5, h6 |
<h1>…</h1> <h2>…</h2> <h3>…</h3> <h4>…</h4> <h5>…</h5> <h6>…</h6> |
Заголовки первого-шестого уровня. Элементы блочного типа. |
|
p |
<p>…</p> |
Абзац текста (параграф). Элемент блочного типа, содержащий элементы строкового типа. |
|
a |
<a href="#">…</a> |
Ссылка. Строковый элемент. |
|
strong |
<strong>…</strong> |
Полужирное выделение части текста. По-умолчанию элемент строкового типа. Аналог <b>. |
|
em |
<em>…</em> |
Наклонный (italic). По-умолчанию элемент строкового типа. Аналог <i> |
|
sub |
<sub>…</sub> |
Нижний индекс. Строковый. |
|
sup |
<sup>…</sup> |
Верхний индекс. Строковый. |
|
cite |
<cite>…</cite> |
Цитата. Строковый. |
|
blockquote |
<blockquote cite="#">…</blockquote> |
Блок цитаты. Параметр cite – ссылка на источник цитаты, необязательный. Блочный. |
|
abbr |
<abbr title="…">…</abbr> |
Аббревиатура. В поле title промещается расшифровка. Строковый. |
|
acronym |
<acronym title="…">…</acronym> |
Акроним. В поле title промещается расшифровка. Строковый. |
|
span |
<span>…</span> |
Текстовый (по-умолчанию) блок. Так же, как и div не несет смысловой нагрузки и оформляется только через CSS. Является текстовым контейнером. Строковый. |
|
br |
<br/> |
Принудительный перенос строки. |
|
object |
<object>…</object> |
Вставка объекта, как правило работающего через plugin. Блочный. |
|
embed |
<embed>…</embed> |
То же самое, что и object, но для некторых браузеров. Используется исключительно внутри object. Не валиден, но приходится использовать. Блочный. |
|
img |
<img alt="" src="#"/> |
Изображение. По-умолчанию элемент строкового типа. |
|
ul |
<ul> …</ul> |
Обозначает начало и конец ненумерованного списка. Блочный. |
|
ol |
<ol> …</ol> |
Обозначает начало и конец нумерованного списка. Блочный. |
|
li |
<li>…</li> |
Элемент списка. Блочный. |
|
dl |
<dl>…</dl> |
Обозначает начало и конец списка определений. Блочный. |
|
dt |
<dt>…</dt> |
Определение. Элемент списка определений. Блочный |
|
dd |
<dd>…</dd> |
Содержание. Элемент списка определений. Блочный |
|
table |
<table>…</table> |
Обозначает начало и конец таблицы. Блочный. |
|
tr |
<tr>…</tr> |
Обозначает начало и конец строки таблицы. Не имеет типа. |
|
td |
<td>…</td> |
Ячейка таблицы. Табличный. |
|
th |
<th>…</th> |
Ячейка заголовка таблицы. Используется при отсутствии thead. Табличный. |
|
thead |
<thead>…</thead> |
Обозначает начало и конец заголвка таблицы. Невалиден без использования tbody. Обязан содержать tr. Не имеет типа блока. |
|
tfoot |
<tfoot>…</tfoot> |
Обозначает начало и конец футера таблицы. Невалиден без использования tbody. Обязан содержать tr. Не имеет типа блока. |
|
tbody |
<tbody>…</tbody> |
Обозначает начало и конец тела таблицы. При отсутствии thead и/или tfoot может быть не указан. Обязан содержать tr. Не имеет типа блока. |
|
|
|
При использовании thead и/или tfoot порядок записи кода должен быть таким: <thead>…</thead> <tbody>…</tbody> или <tfoot>…</tfoot> <tbody>…</tbody> или <thead>…</thead> <tfoot>…</tfoot> <tbody>…</tbody> |
|
form |
<form action="">…</form> |
Обозначает начало и конец формы. На него лучше не назначать CSS (см. ). Блочный. |
|
fieldset |
<fieldset>…</fieldset> |
Обозначает начало и конец блока полей ввода. Блочный. |
|
legend |
<legend>…</legend> |
Заголовок блока полей ввода. Блочный. |
|
label |
<label for="…">…</label> |
Ярлык поля ввода. Указывает назначение поля ввода. При указании значения for определяет отношение к полю ввода с соответсвующим id. |
|
input |
<input type="…" value="…"/> |
Поле ввода. Type опеределяет тип поля ввода: text – текстовое, password – текстовый пароль (введенный текст скрывается значками “*"), radio – переключатель, checkbox – флажок (галка), file – выбор файлов, hidden – скрытый элемент, image – изображение, reset – сброс всех полей в состояние по-умолчению, submit – кнопка передачи данных. Параметр value назначает предустановленный текст поля ввод. Строковый. |
|
… |
<input type="text" value="…"/> |
Текстовое поле ввода. |
|
… |
<input type="password" value="…"/> |
Текстовый пароль (введенный текст скрывается значками “*") |
|
… |
<input type="radio" checked="checked"/> |
Переключатель. Параметр checked указывает на отмеченный элемент. |
|
… |
<input type="checkbox" checked="checked"/> |
Флажок (галка). Параметр checked указывает на отмеченный элемент. |
|
… |
<input type="file"/> |
Выбор файлов. |
|
… |
<input type="hidden" value="…"/> |
Скрытый элемент. |
|
… |
<input type="image" src="#"/> |
Изображение (кнопка). |
|
… |
<input type="reset" value="…"/> |
Кнопка сброса всех полей в состояние по-умолчанию. |
|
… |
<input type="submit" value="…"/> |
Кнопка передачи данных. Строковый. |
|
textarea |
<textarea cols="" rows="">…</textarea> |
Многострочное поле ввода (подробнее в ). Строковый. |
|
select |
<select multiple="multiple">…</select> |
Обозначает начало и конец поля ввода типа "выпадающий список". Параметр multiple преобразует в невыпадающий список. Строковый. |
|
option |
<option selected="selected">…</option> |
Элемент выпадающего списка. Параметр selected указывавет предварительно выбранный элемент. Не имеет типа. |
Cascading Style Sheet
Данная глава описывает основные темы Cascading Style Sheet (CSS), на которые следует обратить внимание, и о которых должен знать каждый HTML-разработчик. Описанные здесь сведения о CSS не претендуют на полноту изложения всех его возможностей и перечня всех существующих свойств. Напротив, здесь изложены обобщенные сведения, логически сгруппированные.