Введение в язык HTML И. В. Брезгунова Кафедра технологий образования РИВШ БГУ
Общие сведения HTML (Hyper. Text Markup Language) – язык гипертекстовой разметки HTML-документ: n Текстовое содержимое страницы n Структура и формат страницы n Мультимедийные объекты n Гиперссылки
Синтаксис языка HTML Объекты языка HTML: n Текст n Теги (управляющие конструкции) <имя_тега>
Синтаксис языка HTML n Парный тег Открывающий тег <Teг> фрагмент текста </Тег> n Непарный тег <Teг> Закрывающий тег
Синтаксис языка HTML <B> - тег физического форматирования текста, обозначает полужирное начертание Код HTML Этот текст набран <B>полужирным</B> шрифтом Отображение Этот текст набран полужирным шрифтом
Синтаксис языка HTML n Вложение тегов Код HTML Этот текст набран <B><I> полужирным курсивом </I></B> Отображение Этот текст набран полужирным курсивом
Синтаксис языка HTML Атрибуты (параметры) уточняют действие тегов n. Каждый тег имеет свой набор допустимых атрибутов n. Для парных тегов атрибуты указывают в открывающем теге n. Атрибуту присваивается заданное или произвольное значение n. Можно использовать несколько атрибутов, разделенных пробелами n
Синтаксис языка HTML Регистр имен тегов и атрибутов не имеет значения n <IMG> = <Img> = <IMg> = <img> Наличие и количество пробелов между тегом и текстом или тегом не имеет значения n <B><I>полужирный курсив</I></B> <B><I> полужирный курсив </I></B> <I> полужирный курсив </I> </B>
Синтаксис языка HTML n Необходимо соблюдать порядок вложенности тегов <B><I>полужирный курсив</I></B> <B><I>полужирный курсив</B></I> § В большинстве случаев атрибуты необязательны § Значения атрибутов необязательно заключать в кавычки, если они содержат только буквы, цифры, точки и дефисы
Синтаксис языка HTML ! Интерпретирует код HTML программа-браузер Браузеры не проверяют правильность написания кода HTML Неправильно записанный код браузером игнорируется
Структура документа HTML <HTML> <HEAD> </HEAD> <BODY> </HTML> Служебная часть Содержательная часть
Служебная часть документа HTML n n - Тег <TITLE> определяет текст заголовка Web-страницы В отсутствие этого тега в строке заголовка выводится (в зависимости от браузера): No title Адрес загруженной страницы Ничего <HEAD><TITLE>Республиканский институт высшей школы БГУ</TITLE></HEAD>
Атрибуты тега <BODY> n n n BGCOLOR – цвет фона документа BACKGROUND – фоновое изображение TEXT – цвет текста LINK – цвет непросмотренной ссылки VLINK – цвет просмотренной ссылки ALINK – цвет просматриваемой ссылки
Цвет в HTML Способы указания цвета: n Название цвета n Схема RGB
Названия цветов HTML
Схема RGB - Red-Green-Blue, Красный-Зеленый-Синий Интенсивность компоненты записывается двузначным шестнадцатеричным числом 0 1 2 3 4 5 6 7 8 9 A(10) B(11) C(12) D(13) E(14) F(15) A 26720
Атрибуты тега <BODY> <BODY BGCOLOR=MAROON TEXT=“#256 AC 1”>
Элементы форматирования на уровне блоков n Разрыв строки – тег <BR> Код HTML <BODY> Текст <BR> можно разбить на <BR> cтроки произвольно </BODY> Отображение Текст можно разбить на cтроки произвольно
Элементы форматирования на уровне блоков Новый абзац – тег <P> Атрибут – ALIGN (выравнивание) ={LEFT, RIGHT, CENTER, JUSTIFY} n Код HTML <BODY> <P> Первый абзац <P ALIGN=CENTER> Второй абзац </BODY> Отображение
Элементы форматирования на уровне блоков Заголовки – теги <H 1>…</H 1>, <H 2>…</H 2>, …, <H 6>…</H 6> Атрибут – ALIGN (выравнивание) ={LEFT, RIGHT, CENTER, JUSTIFY} n Код HTML <H 2 ALIGN=RIGHT> Заголовок важного раздела</H 2> Текст важного раздела Отображение
Элементы форматирования на уровне блоков Горизонтальные линии – тег <HR> Атрибуты: -ALIGN (выравнивание)={LEFT, RIGHT, CENTER} -WIDTH (ширина) -SIZE (толщина) -COLOR (цвет) n Код HTML Часть1 <HR COLOR=RED SIZE=4> Часть2 Отображение
Элементы форматирования на уровне блоков Предварительно отформатированный текст – тег <PRE>…</PRE> n Код HTML <PRE> Текст разбит на </PRE> строки Отображение Текст разбит на строки
Физическое форматирование текста Теги физического форматирования: формат отображения шрифта в графических браузерах Полужирный - <B>…</B> n. Курсив - <I>…</I> n. Подчеркнутый - <U>…</U> n. Зачеркнутый - <S>…<S> или <STRIKE>…</STRIKE> n. Телетайпный - <TT>…</TT> n. Нижний индекс - <SUB>…</SUB> n. Верхний индекс - <SUP>…</SUP> n. Мерцание - <BLINK>…</BLINK> Не отображается в MS Internet Explorer n
Физическое форматирование текста n n - Определение параметров фрагмента текста – тег <FONT>…</FONT> Атрибуты: COLOR - цвет текста FACE гарнитура шрифта SIZE размер шрифта
Физическое форматирование текста n Атрибут SIZE тега <FONT> SIZE = {1, 2, 3, 4, 5, 6, 7} По умолчанию SIZE=3 Для MS Internet Explorer единицы пункты 1 8 2 10 3 12 4 14 5 18 6 24 7 36
Физическое форматирование текста Код HTML По умолчанию размер шрифта 3. <BR> <FONT SIZE=+3> Размер увеличен на 3 ед. </FONT><BR> <FONT SIZE=2> Размер - 2 единицы. </FONT><BR> Отображение
Физическое форматирование текста n Атрибут FACE тега <FONT> <FONT FACE=”VERDANA”, “ARIAL”, “HELVETICA”> Код HTML Это - шрифт Symbol: <FONT FACE="symbol"> abcd </FONT> Отображение
Физическое форматирование текста Определение параметров шрифта по умолчанию для всего документа: тег <BASEFONT> (непарный) n. Атрибуты: -COLOR - цвет текста -FACE гарнитура шрифта -SIZE размер шрифта Netscape Communicator не интерпретирует атрибут FACE n
Каскадные таблицы стилей (CSS) Таблица стилей управляет форматированием тегов в документе n Правило состоит из: - селектора (тега) - определения – свойства и значения H 2 {color: green; font-size: 20 pt} n
Каскадные таблицы стилей. Связывание с документом Связывание – таблица стилей хранится в отдельном файле (. css) Присоединятся к документу с помощью тега LINK в служебной части документа n. Внедрение – таблица стилей задается в самом документе n
Каскадные таблицы стилей (CSS) <HEAD> <STYLE> H 2 {color: green; font-size: 20 pt} </STYLE> </HEAD>
Каскадные таблицы стилей (CSS) n Класс <HEAD> <STYLE>. special {color: blue; font-size: 14 pt; text-align: center; background-color: red} </STYLE> </HEAD>
Каскадные таблицы стилей (CSS) Код HTML <HEAD> <STYLE>. special {color: blue; font-size: 14 pt; textalign: center; background-color: red}</STYLE></HEAD> <BODY> Первый абзац <P class="special"> Второй абзац </BODY> Отображение
Каскадные таблицы стилей (CSS) Преимущества использования каскадных таблиц стилей: n. В основной части документа отсутствуют теги физического форматирования текста, т. е. представлена лишь логическая структура документа n. Сокращается объем HTML-документа n. Упрощается процедура правки документа
Графика в HTML n n Вставка графического изображения: тег <IMG> (непарный) Обязательный атрибут SRC указывает адрес графического файла <IMG SRC=“. . /image/ris. gif”>
Графика n - - - Атрибуты тега <IMG> ALIGN - выравнивание текста относительно изображения WIDTH и HEIGHT – ширина и высота в пикселях или процентах от размеров экрана BORDER – толщина рамки вокруг изображения в пикселях HSPACE и VSPACE – пустые поля вокруг изображения в пикселях ALT – альтернативный текст
Графика Альтернативный текст <IMG SRC=“. . /image/ris. gif” ALT=“По-моему, это лайка”> n MSIE отображает графику MSIE не отображает графику
Гиперссылки n n Указатель ссылки – тег <A>…</A> Адресная часть ссылки – атрибут HREF тега <A> Хотите ознакомиться с моей <A HREF=“biography. html”>биографией</A>? Зайдите на сайт <A HREF=“http: //www. nihe. niks. by”>РИВШ БГУ</A> <A HREF=“mailto: me@nihe. niks. by”>Пишите мне!</A>
Гиперссылки n Указатель ссылки - изображение <A HREF=“index. html”> <IMG SRC=“. . /image/ris. gif”> </A>
Таблицы <TABLE> <TR> <TH>заголовок столбца 1</TH> <TH>заголовок столбца 2</TH> </TR> <TD>содержимое ячейки 1</TD> <TD>содержимое ячейки 2</TD> </TR> </TABLE>
Таблицы <TABLE BORDER> <TH>заголовок столбца 1</TH> <TH>заголовок столбца 2</TH> </TR> <TD>содержимое ячейки 1</TD> <TD>содержимое ячейки 2</TD> </TR> </TABLE>
Таблицы Заголовок таблицы - тег <CAPTION> (после тега <TABLE>) n Расположение заголовка – атрибут ALIGN = {TOP, BOTTOM}
Таблицы Атрибуты тега <TABLE> n BORDER – наличие и ширина рамки в пикселях n BORDERCOLOR – цвет рамки n CELLSPASING – расстояние между рамками ячеек в пикселях n CELLPADDING – расстояние между рамкой ячейки и данными в ячейке n WIDTH и HEIGHT – ширина и высота в пикселях или процентах от ширины экрана
Фреймы Общий вид установочного файла фреймов: <HTML> <HEAD> Деление окна на фреймы </HEAD> <FRAMESET ROWS=“ 300, *”> Адреса <FRAME SRC=“адрес документа 1”> документов <FRAME SRC=“адрес документа 2”> в фреймах </FRAMESET> <NOFRAMES> Информация, отображаемая </NOFRAMES> неграфическими браузерами </HTML> n
Фреймы <FRAMESET ROWS=“ 300, *”> <FRAME SRC=“адрес документа в верхнем фрейме”> <FRAMESET COLS=“ 20%, *”> <FRAME SRC=“адрес документа в левом нижнем фрейме”> <FRAME SRC=“адрес документа в правом нижнем фрейме”> </FRAMESET>
Фреймы Атрибуты тега <FRAME>: n SCROLLING = {YES, NO, AUTO} – определяет наличие или отсутствие полосы прокрутки у фрейма n NORESIZE – наличие этого атрибута запрещает изменение размера фрейма в браузере с помощью мыши n BORDERCOLOR – цвет границы между фреймами n NAME – имя фрейма n Атрибут тега <FRAMESET> FRAMEBORDER задает толщину границы между соответствующими фреймами в пикселях
Фреймы ссылка 1 ссылка 2 1. Используя атрибут NAME, дать фрейму, в котором должны загружаться ссылки, некое имя, например, RIGHT 2. Открыть документ, содержащий ссылки, ввести в каждый тег <A> атрибут TARGET и присвоить ему значение RIGHT
Средства создания HTMLдокументов n n Простейшие текстовые редакторы – Блокнот, Far Editor, Norton Editor Специализированные HTMLредакторы – Homesite, Hotdog Professional, Coffee. Cup HTML Editor ++
Служебная часть документа HTML n n Теги <META> описывают свойства страницы Каждый тег <META> имеет два атрибута: - NAME или HTTP-EQUIV + - CONTENT
Служебная часть документа HTML n n n Значения атрибута CONTENT зависят от значений атрибутов NAME и HTTPEQUIV Теги <META> с атрибутом NAME в основном содержат информацию для поисковых машин Теги <META> с атрибутом HTTPEQUIV в основном содержат информацию для браузера
Служебная часть документа HTML n - Значения атрибута NAME тега <META>: DESCRIPTION Атрибут CONTENT содержит краткое описание сайта <META NAME=”DESCRIPTION” CONTENT=”Сайт, предназначенный для любителей тенниса”>
Служебная часть документа HTML n - Значения атрибута NAME тега <META>: KEYWORDS Атрибут CONTENT содержит ключевые слова (через запятую) <META NAME=”KEYWORDS” CONTENT=”спорт, теннис, sport, tennis”>
Служебная часть документа HTML n - Значения атрибута NAME тега <META>: SITE-CREATED Атрибут CONTENT указывает дату создания ресурса в формате МЕСЯЦ-ДЕНЬ-ГОД <META NAME=”SITE-CREATED” CONTENT=” 11 -04 -2001”>
Служебная часть документа HTML n - Значения атрибута NAME тега <META>: EXPIRES Атрибут CONTENT указывает предполагаемую дату закрытия ресурса <META NAME=”EXPIRES” CONTENT=” 01 -01 -2003”>
Служебная часть документа HTML n - Значения атрибута NAME тега <META>: REVISIT Атрибут CONTENT указывает количество дней (от 1 до 30), по прошествии которых необходимо переиндексировать ресурс <META NAME=”REVISIT” CONTENT=” 7 days”>
Служебная часть документа HTML n - Значения атрибута NAME тега <META>: CONTENT-LANGUAGE Атрибут CONTENT указывает язык ресурса (на английском языке) <META NAME=”CONTENT-LANGUAGE” CONTENT=”russian”>
Служебная часть документа HTML n - Значения атрибута NAME тега <META>: AUTHOR Атрибут CONTENT содержит имя автора ресурса <META NAME=”AUTHOR” CONTENT=”John Smith”>
Служебная часть документа HTML n - Значения атрибута NAME тега <META>: OWNER Атрибут CONTENT содержит имя человека (название организации), являющегося владельцем ресурса <META NAME=”OWNER” CONTENT=”РИВШ БГУ”>
Служебная часть документа HTML n - Значения атрибута NAME тега <META>: GENERATOR Атрибут CONTENT содержит название программного продукта, средствами которого был создан данный ресурс <META NAME=”GENERATOR” CONTENT=”Microsoft Front. Page 4. 0”>
Служебная часть документа HTML n - Значения атрибута HTTP-EQUIV тега <META>: REFRESH Атрибут CONTENT задает количество секунд, через которые необходимо перезагружать страницу или количество секунд, через которое необходимо перейти по указанному адресу <META HTTP-EQUIV =”REFRESH” CONTENT=” 60”> <META HTTP-EQUIV =”REFRESH” CONTENT=” 20” URL=”http: //www. new. by”>
Служебная часть документа HTML n - Значения атрибута HTTP-EQUIV тега <META>: CONTENT-TYPE Атрибут CONTENT указывает кодировку ресурса <META HTTP-EQUIV =”CONTENT-TYPE” CONTENT=”text/html; charset=Windows-1251”>
