Введение в язык HTML И.В.Брезгунова Кафедра технологий образования РИВШ БГУ

Общие сведения HTML (HyperText Markup Language) – язык гипертекстовой разметки HTML-документ: Текстовое содержимое страницы Структура и формат страницы Мультимедийные объекты Гиперссылки

Синтаксис языка HTML Объекты языка HTML: Текст Теги (управляющие конструкции)

Синтаксис языка HTML Парный тег фрагмент текста Непарный тег Открывающий тег Закрывающий тег

Синтаксис языка HTML - тег физического форматирования текста, обозначает полужирное начертание Этот текст набран полужирным шрифтом Код HTML Этот текст набран полужирным шрифтом Отображение

Синтаксис языка HTML Вложение тегов Этот текст набран полужирным курсивом Код HTML Этот текст набран полужирным курсивом Отображение

Синтаксис языка HTML Атрибуты (параметры) уточняют действие тегов Каждый тег имеет свой набор допустимых атрибутов Для парных тегов атрибуты указывают в открывающем теге Атрибуту присваивается заданное или произвольное значение Можно использовать несколько атрибутов, разделенных пробелами

Синтаксис языка HTML Регистр имен тегов и атрибутов не имеет значения = = = Наличие и количество пробелов между тегом и текстом или тегом и тегом не имеет значения полужирный курсив

Синтаксис языка HTML Необходимо соблюдать порядок вложенности тегов полужирный курсив В большинстве случаев атрибуты необязательны Значения атрибутов необязательно заключать в кавычки, если они содержат только буквы, цифры, точки и дефисы

Синтаксис языка HTML ! Интерпретирует код HTML программа-браузер Браузеры не проверяют правильность написания кода HTML Неправильно записанный код браузером игнорируется

Структура документа HTML Служебная часть Содержательная часть

Служебная часть документа HTML Тег определяет текст заголовка Web-страницы В отсутствие этого тега в строке заголовка выводится (в зависимости от браузера): - No title - Адрес загруженной страницы - Ничего Республиканский институт высшей школы БГУ

Атрибуты тега BGCOLOR – цвет фона документа BACKGROUND – фоновое изображение TEXT – цвет текста LINK – цвет непросмотренной ссылки VLINK – цвет просмотренной ссылки ALINK – цвет просматриваемой ссылки

Цвет в HTML Способы указания цвета: Название цвета Схема RGB

Названия цветов HTML

Схема RGB RGB - Red-Green-Blue, Красный-Зеленый-Синий Интенсивность компоненты записывается двузначным шестнадцатеричным числом A(10) B(11) C(12) D(13) E(14) F(15) A26720

Атрибуты тега

Элементы форматирования на уровне блоков Разрыв строки – тег Текст можно разбить на строки произвольно Текст можно разбить на строки произвольно Код HTMLОтображение

Элементы форматирования на уровне блоков Новый абзац – тег Атрибут – ALIGN (выравнивание) ={LEFT, RIGHT, CENTER, JUSTIFY} Первый абзац Второй абзац Код HTML Отображение

Элементы форматирования на уровне блоков Заголовки – теги …, …, …, … Атрибут – ALIGN (выравнивание) ={LEFT, RIGHT, CENTER, JUSTIFY} Заголовок важного раздела Текст важного раздела Код HTML Отображение

Элементы форматирования на уровне блоков Горизонтальные линии – тег Атрибуты: - ALIGN (выравнивание)={LEFT, RIGHT, CENTER} - WIDTH (ширина) - SIZE (толщина) - COLOR (цвет) Часть 1 Часть 2 Код HTMLОтображение

Элементы форматирования на уровне блоков Предварительно отформатированный текст – тег … Текст разбит на строки Код HTMLОтображение Текст разбит на строки

Физическое форматирование текста Теги физического форматирования: формат отображения шрифта в графических браузерах Полужирный - … Курсив - … Подчеркнутый - … Зачеркнутый - … или … Телетайпный - … Нижний индекс - … Верхний индекс - … Мерцание - … Не отображается в MS Internet Explorer

Физическое форматирование текста Определение параметров фрагмента текста – тег … Атрибуты: - COLOR - цвет текста - FACE гарнитура шрифта - SIZE размер шрифта

Физическое форматирование текста Атрибут SIZE тега SIZE = {1,2,3,4,5,6,7} По умолчанию SIZE=3 Для MS Internet Explorer единицы пункты

Физическое форматирование текста По умолчанию размер шрифта 3. Размер увеличен на 3 ед. Размер - 2 единицы. Код HTML Отображение

Физическое форматирование текста Атрибут FACE тега Это - шрифт Symbol: abcd Код HTML Отображение

Физическое форматирование текста Определение параметров шрифта по умолчанию для всего документа: тег (непарный) Атрибуты: - COLOR - цвет текста - FACE гарнитура шрифта - SIZE размер шрифта Netscape Communicator не интерпретирует атрибут FACE

Каскадные таблицы стилей (CSS) Таблица стилей управляет форматированием тегов в документе Правило состоит из: - селектора (тега) - определения – свойства и значения H2 {color: green; font-size: 20 pt}

Каскадные таблицы стилей. Связывание с документом Связывание – таблица стилей хранится в отдельном файле (.css) Присоединятся к документу с помощью тега LINK в служебной части документа Внедрение – таблица стилей задается в самом документе

Каскадные таблицы стилей (CSS) H2 {color: green; font-size: 20 pt}

Каскадные таблицы стилей (CSS) Класс.special {color: blue; font-size: 14 pt; text-align: center; background-color: red}

Каскадные таблицы стилей (CSS) Код HTMLОтображение.special {color: blue; font-size: 14 pt; text- align: center; background-color: red} Первый абзац Второй абзац

Каскадные таблицы стилей (CSS) Преимущества использования каскадных таблиц стилей: В основной части документа отсутствуют теги физического форматирования текста, т.е. представлена лишь логическая структура документа Сокращается объем HTML-документа Упрощается процедура правки документа

Логическое форматирование текста Теги логического форматирования обозначают структурные типы своих текстовых фрагментов - Цитата (отметка цитат, названий источников) - … Обычно выводится курсивом - Удаленный текст - … Обычно отображается перечеркнутым текстом

Логическое форматирование текста - Определение - … Обычно отображается курсивом - Выделение важных фрагментов текста - … Обычно отображается курсивом - Выделение очень важных фрагментов текста - … Обычно отображается полужирным шрифтом

Логическое форматирование текста - Аббревиатура - … Код HTMLОтображение в MSIE РИВШ

Графика в HTML Вставка графического изображения: тег (непарный) Обязательный атрибут SRC указывает адрес графического файла

Графика Атрибуты тега - ALIGN - выравнивание текста относительно изображения - WIDTH и HEIGHT – ширина и высота в пикселях или процентах от размеров экрана - BORDER – толщина рамки вокруг изображения в пикселях - HSPACE и VSPACE – пустые поля вокруг изображения в пикселях - ALT – альтернативный текст

Графика Альтернативный текст <IMG SRC=../../image/ris.gif ALT=По-моему, это лайка> MSIE отображает графику MSIE не отображает графику

Гиперссылки Указатель ссылки – тег … Адресная часть ссылки – атрибут HREF тега Хотите ознакомиться с моей биографией ? Зайдите на сайт РИВШ БГУ Пишите мне!

Гиперссылки Указатель ссылки - изображение

Таблицы заголовок столбца 1 заголовок столбца 2 содержимое ячейки 1 содержимое ячейки 2

Таблицы заголовок столбца 1 заголовок столбца 2 содержимое ячейки 1 содержимое ячейки 2

Таблицы Заголовок таблицы - тег (после тега ) Расположение заголовка – атрибут ALIGN = {TOP,BOTTOM}

Таблицы Атрибуты тега BORDER – наличие и ширина рамки в пикселях BORDERCOLOR – цвет рамки CELLSPASING – расстояние между рамками ячеек в пикселях CELLPADDING – расстояние между рамкой ячейки и данными в ячейке WIDTH и HEIGHT – ширина и высота в пикселях или процентах от ширины экрана

Фреймы Общий вид установочного файла фреймов: Деление окна на фреймы Адреса документов в фреймах Информация, отображаемая неграфическими браузерами

Фреймы

Фреймы Атрибуты тега : SCROLLING = {YES, NO, AUTO} – определяет наличие или отсутствие полосы прокрутки у фрейма NORESIZE – наличие этого атрибута запрещает изменение размера фрейма в браузере с помощью мыши BORDERCOLOR – цвет границы между фреймами NAME – имя фрейма Атрибут тега FRAMEBORDER задает толщину границы между соответствующими фреймами в пикселях

Фреймы ссылка 1 ссылка 2 1. Используя атрибут NAME, дать фрейму, в котором должны загружаться ссылки, некое имя, например, RIGHT 2. Открыть документ, содержащий ссылки, ввести в каждый тег атрибут TARGET и присвоить ему значение RIGHT

Средства создания HTML- документов Простейшие текстовые редакторы – Блокнот, Far Editor, Norton Editor Специализированные HTML- редакторы – Homesite, Hotdog Professional, CoffeeCup HTML Editor ++

Служебная часть документа HTML Теги описывают свойства страницы Каждый тег имеет два атрибута: - NAME или HTTP-EQUIV + - CONTENT

Служебная часть документа HTML Значения атрибута CONTENT зависят от значений атрибутов NAME и HTTP- EQUIV Теги с атрибутом NAME в основном содержат информацию для поисковых машин Теги с атрибутом HTTP- EQUIV в основном содержат информацию для браузера

Служебная часть документа HTML Значения атрибута NAME тега : - DESCRIPTION - Атрибут CONTENT содержит краткое описание сайта

Служебная часть документа HTML Значения атрибута NAME тега : - KEYWORDS - Атрибут CONTENT содержит ключевые слова (через запятую)

Служебная часть документа HTML Значения атрибута NAME тега : - SITE-CREATED - Атрибут CONTENT указывает дату создания ресурса в формате МЕСЯЦ-ДЕНЬ-ГОД <META NAME=SITE-CREATED CONTENT= >

Служебная часть документа HTML Значения атрибута NAME тега : - EXPIRES - Атрибут CONTENT указывает предполагаемую дату закрытия ресурса <META NAME=EXPIRES CONTENT= >

Служебная часть документа HTML Значения атрибута NAME тега : - REVISIT - Атрибут CONTENT указывает количество дней (от 1 до 30), по прошествии которых необходимо переиндексировать ресурс

Служебная часть документа HTML Значения атрибута NAME тега : - CONTENT-LANGUAGE - Атрибут CONTENT указывает язык ресурса (на английском языке) <META NAME=CONTENT-LANGUAGE CONTENT=russian>

Служебная часть документа HTML Значения атрибута NAME тега : - AUTHOR - Атрибут CONTENT содержит имя автора ресурса

Служебная часть документа HTML Значения атрибута NAME тега : - OWNER - Атрибут CONTENT содержит имя человека (название организации), являющегося владельцем ресурса

Служебная часть документа HTML Значения атрибута NAME тега : - GENERATOR - Атрибут CONTENT содержит название программного продукта, средствами которого был создан данный ресурс <META NAME=GENERATOR CONTENT=Microsoft FrontPage 4.0>

Служебная часть документа HTML Значения атрибута HTTP-EQUIV тега : - REFRESH - Атрибут CONTENT задает количество секунд, через которые необходимо перезагружать страницу или количество секунд, через которое необходимо перейти по указанному адресу

Служебная часть документа HTML Значения атрибута HTTP-EQUIV тега : - CONTENT-TYPE - Атрибут CONTENT указывает кодировку ресурса <META HTTP-EQUIV =CONTENT-TYPE CONTENT=text/html; charset=Windows-1251>