Курсы ДКШ «Интернет-школа»

HTML (Hypertext Markup Language)

это язык разметки, используемый для включения текстовых документов

Роль HTML

Говорят, что размеченный HTML-документ образует структурный уровень Web-страницы.
Это основа,

Язык SGML (Standard Generalized Markup Language),

представляет собой сложный язык для описания

W3C

Видя необходимость упорядочить разработку HTML, Бернерс-Ли в 1994 году основал

HTML 4.01 и XHTML 1.0

Обе рекомендации, HTML 4.01 и

Элементарная структура документа

Создавая XHTML-документы (и связанные с ними таблицы стилей), убедитесь, что все

Перечислим атрибуты, которые являлись сокращенными в HTML, но для которых в

Пустые элементы

---

/>

Заголовок документа

Каждый элемент head должен включать в себя элемент title, который

Указание типа информации и кодировки символов

Рекомендуется (хотя и не является обязательным),

content-language
Это значение может использоваться для указания языка, на котором написан документ.

Имена в элементе meta для поисковых систем

Тело документа

...
Атрибуты
Базовые атрибуты: id, class, style, title
Внутренние события: onload, onunload, onclick,

Текстовые элементы делятся на две главные категории: внутристрочные (inline) и блочные.

Блоковые элементы

h1-h6 Заголовок
p Абзац
pre Предварительно форматированный текст
address Контактная информация
blockquote Длинная

Внутристрочные элементы

em – обозначает выделенный текст. Элементы em почти всегда отображаются

Внутристрочные элементы

code – обозначает фрагмент программного кода. По умолчанию код отображается

br Перенос строки
Обозначение редактирования
ins Вставленный текст
del Удаленный текст
Общие элементы
Общие

Стилевые элементы
b Полужирный
big Текст большого размера
i Курсив
s Зачеркнутый
strike Зачеркнутый
tt

Списки

Несортированная информация (маркированный).
Сортированная информация (нумерованный).
Термины и определения

Несортированные списки
В (X)HTML неупорядоченные списки обозначаются элементом ul. Содержимое элемента ul

Пример

• Unordered information


• Ordered information


• Terms and definitions

Атрибуты
Базовые

Сортированные списки

Сортированные списки обозначаются элементом ol, и они должны включать в

Списки определений

Используйте список определений для тех списков, которые состоят из

.

em

обозначает выделенный текст. Элементы em почти всегда отображаются курсивом.

strong

обозначает

СТИЛИ CSS

Стиль – всё то, что определяет внешний вид Web-документа при

Преимущества CSS

Больший контроль над шрифтовым оформлением и раскладкой страницы
Потенциальное уменьшение размера

История CSS и разработка стандартов
Никогда не предполагалось, что HTML будет языком

Первой официальной рекомендацией CSS стала Рекомендация CSS Level 1, выпущенная в

В разработке находятся еще две рекомендации. CSS Level 2, Revision 1,

задание правила состоит из 2-х частей: селектора и определения.
Селектор – имя

Способы добавления таблиц стилей на Web-страницы

Встраивание стилей (внутрь тега)

Связывание

Таблицу стилей создают в виде отдельного текстового файла с расширением .css.

Импортирование

позволяет встраивать в документ таблицу стилей, расположенную на сервере.
Для этого

Единицы измерения, используемые в каскадных таблицах стилей

in – дюйм = 2,

Свойства CSS для управления цветом

Цвет можно задать:
названием; (red, blue, ...)
кодом:

Конфликтующие правила стилей: каскад

Типичной является ситуация, когда элементы документа получают инструкции

Правый внутренний край
Правый интервал
Правая сторона рамки
Правое поле
Правый наружный край

Верхний наружный край

Основные свойства блока, предназначенные для указания размера, добавления полей, границ и

Свободное размещение и позиционирование

Спецификации CSS не сводятся лишь к «украшательству» элементов, образующих документ. Их

Нормальный поток

В модели «нормальный поток» (normal flow) текстовые элементы страницы располагаются

Свободное размещение

В CSS можно свободно расположить любой мыслимый элемент (абзац, список,

Пропуск размещаемых элементов

Бывает, что область сбоку от свободно размещенного элемента хочется

Аналогично работает и значение right, предотвращающее появление элемента рядом с размещенными

Позиционирование: основы

Существует четыре типа позиционирования, каждый из которых задается свойством position

static Обычная схема позиционирования, в которой прямоугольники элементов отображаются на экран

Методики CSS
Центрирование страницы
1 способ
#page { width:500px;
margin-left:auto;
margin-right:auto;
}
2 способ
body {text-align:center;}
body * {text-align:left}
#page { width:500px;
margin:0

Раскладка в 2 столбца

Раскладка в 2 столбца

Использование плавающих элементов

Шапка и осн Заголовок

Основная

Таблица стилей
.masthead {background:#ccc;
padding:15px;
}
.main {float:left;
width:70%;
margin-right:3%;
margin-left:3%;
}
.footer {clear:left;
padding:15px;
background:#777;
}