Лекции по языку HTML
Содержание
Лекция 1.
Основы языка HTML, структурные теги.
Лекция 2.
Параметры структурного тега <BODY>. Теги форматирования заголовков,
параметры этих тегов.
Лекция 3.
Тег формирования абзацев <P> </P> и тег форматирования шрифта <FONT> </FONT>. Непарный тег <HR>, обеспечивающий изображение горизонтальной линии и его параметры.
Лекция 4.
Размещение графических объектов на HTML-страницах.
Лекция 5.
Размещение на HTML-странице текста в виде списка.
Лекция 6.
Создание гиперссылок.
Лекция 7.
Таблицы.
Лекция 8.
Фреймы.
Лекция 1.
Тема. Основы языка HTML, структурные теги.
-
Повторение.
При просмотре в Интернете Wed-страниц пользователь имеет дело с гипертекстом.
Гипертекст – документ, содержащий ссылки на другие документы.
Wed-страницы просматривает специальная браузер-программа (в нашем случае это Internet Explorer). Именно браузер «видит» гипертекст. Следовательно, чтобы создать Wed-страницу нужно написать ее в форме гипертекста. Делается это с помощью наиболее популярного HyperText Makup Language – языка разметки гипертекста (сокращенно HTML). Неслучайно Wed-страницы иногда называют HTML-страничками.
-
Новый материал.
Как написать HTML-страницу? С помощью языка HTML создается текстовой файл, имеющий расширение .html или .htm, который еще называют HTML-файл. Этот файл отображается в среде Internet Explorer как Wed-страница.
С точки зрения языка HTML гипертекст – это текст, содержащий специальные разметочные указатели, которые еще называют флагами разметки или тегами (от англ. tag – флаг). Иногда можно встреть название – дескриптор.
Теги – инструкции браузеру, указывающие способ отображения текста в окне программы.
Тег всегда начинается со знака «меньше» (<) и заканчивается знаком «больше» (>). Заглавные и строчные буквы при написании самих тегов браузером не различаются.
Существует два типа тегов – парные и непарные.
Парный тег – это тег, у которого есть открывающий флаг (<...>) и закрывающий: тот же самый флаг, но начинающийся с символа слеш «/» (</...>).
Непарный тег – это тег, у которого нет закрывающего флага.
Теги по выполняемым ими функциям делятся на следующие категории:
-
структурные;
-
теги форматирования символов;
-
теги, определяющие параметры абзацев и заголовков;
-
теги, обеспечивающие включение в текст разрыва строк;
-
теги, отвечающие за вставку графических объектов и т. д.
Рассмотрим структурные теги. Структурные, т. е. отвечающие за структуру (другими словами за составляющие) страницы.
(Примечание: удобно записывать теги и их функции в форме таблицы.)
Таблица 1.
|
СТРУКТУРНЫЕ ТЕГИ |
|
|
<HTML> </HTML> |
Тег, указывающий браузеру, что далее следует HTML-страница. Весь текст (HTML-код) должен находится между этими тегами. Открывающий тег <HTML> помещается в самом начале страницы, а закрывающий </HTML> - в самом конце. |
|
<HEAD> </HEAD> |
Тег заголовка HTML-страницы. Помещается в самом начале, после тега <HTML>. Между тегами заголовка ставится тег названия страницы <TITLE> </TITLE>. |
|
<TITLE> </TITLE> |
Между этими тегами помещается текст, являющийся названием страницы. Название HTML-страницы высвечивается в заголовке окна программы-браузера. |
|
<BODY> </BODY> |
Внутри этого тега пишется то, что будет доступно в области просмотра браузера (другими словами – тело страницы). Этот тег имеет несколько параметров. |
Таким образом, структура любой HTML-страницы выглядит следующим образом:
<HTML>
<HEAD><TITLE>Название страницы</TITLE>
</HEAD>
<BODY>Содержание (HTML-код)</BODY>
</HTML>
Создать HTML-страницу можно двумя способами: «вручную» и с помощью программных продуктов. Мы будем делать нашу страницу первым способом. Но прежде чем приступить к созданию, нужно решить, что мы хотим поместить на нашу страницу.
Лекция 2.
Тема. Параметры структурного тега <BODY>. Теги форматирования заголовков, параметры этих тегов.
Новый материал.
Во время путешествий по Интернету, вам встречались Web-страницы всех цветов и оттенков, а иногда на фоне рисунков или фотографий. Как «раскрасить» HTML-страницу или «наклеить обои»?
Обои «наклеивает» параметр тега <BODY> - background. В качестве фоновой картинки могут использоваться любые графические файлы. Обои можно сделать самому в любом графическом редакторе.
За цвет фона HTML-странички отвечает параметр структурного тега <BODY> - bgcolor. Параметры background и bgcolor чаще всего являются взаимоисключающими.
Можно задать цвет текста с помощью параметра text этого же тега, а также цвет гиперссылок.
Параметры bgcolor, text, link, alink и vlink могут принимать текстовое значение: английское название цвета, и числовое – шестнадцатеричный код цвета, перед которым ставится значок «#» (см. Таблицу 2).
Как расшифровать шестнадцатеричный код цвета? В ПК цвет, указанный шестнадцатеричным числом, имеет структуру: красный (red) – зеленый (green) – синий (blue) или RGB. Таким образом, две первых цифры отвечают за присутствие красной составляющей в конечном цвете, следующие две – за зеленую составляющую, последние две – за синюю. Следовательно, код красного - #ff0000 (максимальное число красного, а остальные два цвета отсутствуют), код зеленого - #00ff00, код синего - #0000ff.
Таблица 2.
|
Цвет |
Английское название цвета |
Шестнадцатеричный код цвета |
|
Красный |
Red |
#ff0000 |
|
Зеленый |
Green |
#00ff00 |
|
Синий |
Blue |
#0000ff |
|
Желтый |
Yellow |
|
|
Коричневый |
Brown |
|
|
Розовый |
Pink |
|
|
Фиолетовый |
Magenta |
|
|
Голубой |
Gyan |
|
|
Малиновый |
Purple |
|
|
Оранжевый |
Orange |
|
|
Серый |
Grey |
|
|
Черный |
Black |
#000000 |
|
Белый |
White |
#ffffff |
Таблица 1.
|
<BODY background=”URL” bgcolor=цвет фона text=цвет текста link=цвет гиперссылки alink=цвет активной гиперссылки vlink=цвет просмотренной гиперссылки> </BODY> |
Параметр background отвечает за обои HTML-странички. URL – путь к файлу, который вы выбрали в качестве обоев. Если этот файл поместить в ту же папку, что и HTML-страничку, то достаточно указать только имя файла. Вместо слов «цвет фона» пишется текстовое или числовое значение цвета фона страницы, вместо «цвет текста» - текстовое или числовое значение цвета символов в тексте. Параметры link, alink и vlink отвечают за цвет гиперссылок. Если они не указаны, тогда link и alink автоматически принимают значение «синий», а vlink – «лиловый». |
Тег, формирующий заголовки, можно представить в общем виде следующим образом: <Hn> </Hn>, где n принимает значения от 1 до 5. Чем меньше цифра, тем крупнее заголовок. Вернемся к Таблице 1. и допишем следующее.
|
Теги, управляющие внешним видом HTML-страницы |
|
|
<Hn> </Hn> |
Тег, определяющий размер и формат заголовков в тексте, n принимает значения от 1 до 5. Тест заголовка находится между открывающим и закрывающим тегами. |
Вы помните, что любой заголовок в электронном документе можно расположить следующим образом: выровнять по левомуправому краю или по центру. В языке HTML эти функции выполняет параметр align, который принимает значения centerleftright. Продолжим Таблицу 1.
|
<Hn align=centerleftright> </Hn> |
Выравнивание заголовка по центрупо левому краю страницыпо правому краю страницы. Если этот параметр не указан, то выравнивание автоматически производится по левому краю. |
Лекция 3.
Тема. Тег формирования абзацев <P> </P> и тег форматирования шрифта <FONT> </FONT>. Непарный тег <HR>, обеспечивающий изображение горизонтальной линии и его параметры.
Новый материал.
Для оформления текста на Web-странице в HTML существует целая группа тегов. Из всей группы мы рассмотрим следующие: теги, формирующие абзацы и шрифт, и тег горизонтальной линии.
Для выделения абзаца в тексте HTML-странички используется парный тег <P> </P>. Текст абзаца находится между открывающим тегом <P> и закрывающим - </P>. Данный тег может использоваться и как непарный. В этом случае открывающий тег <P> ставится в начале каждого абзаца. В соответствии с мировым стандартом абзацы разделяются пустыми строками и не начинаются с красной строки.
Текст абзаца, как и заголовки, можно выровнять по центру по левому краю по правому краю, с помощью значений параметра align. Вернемся к Таблице 1.
|
<P> (</P>) |
Тег «параграф», отделяет абзацы друг от друга. Тест абзаца заключается между соответствующими тегами. |
|
<P align=centerleftright > (</P>) |
Выравнивание абзацев по центрупо левому краю страницыпо правому краю страницы. Если этот параметр не указан, то выравнивание автоматически производится по левому краю. |
Для выделения определенных фрагментов текста иногда используется курсивное или полужирное начертание символов. Кроме того, может возникнуть необходимость включения подстрочных и надстрочных индексов (например, в математических формулах). Вернемся к Таблице 1.
|
<B> </B> |
Полужирное начертание символов, заключенных между открывающим и закрывающим тегами. |
|
<I> </I> |
Курсивное начертание символов. |
|
<U> </U> |
Подчеркивание символов. |
|
<SUB> </SUB> |
Подстрочный индекс. |
|
<SUP> </SUP> |
Надстрочный индекс. |
Например, следующая формула
F(x) = x2 - 5x + 8
будет записываться так:
<P><B>F</B><I>(x)</I> = <I>x</I><SUP>2</SUP> 5<I>x</I> + 8.
Существует также тег, определяющий дополнительные параметры шрифта, - <FONT> </FONT>.
|
<FONT size=n color=цвет символов fase=название шрифта> </FONT> |
Параметр size определяет размер шрифта в условных единицах от 1 (самый маленький) до 7 (самый большой). Параметр color позволяет указать цвет шрифта. Параметр fase определяет внешний вид шрифта в браузере (например, шрифт Arial или Times New Roman). |
|
<BASEFONT> </BASEFONT> |
Этот тег задает параметры шрифта для всей страницы. Изменить какой-то параметр можно только через тег <FONT> </FONT> |
Иногда, для того чтобы отделить один текст от другого или чтобы выделить какую-то часть текста (или по каким-то другим причинам), используется горизонтальная линия. За изображение такой линии отвечает непарный тег <HR>. Линия может быть толщиной в одну или несколько точек. Это определяется параметром size (англ. размер). Длина линии задается параметром width (англ. длина, ширина), значение этого параметра может быть в точках, а может быть в процентах. Линию, также как абзацы и заголовки, можно выровнять по центрупо левому краю страницыпо правому краю страницы, с помощью параметра align. Параметром color задается цвет линии. Его значение задается также как значение параметра bgcolor. Запишем эту информацию в Таблицу1.
|
<HR> |
Этот тег указывает на то, что браузер должен отобразить горизонтальную линию, идущую через весь экран. |
|
<HR size=n width=m> |
Параметром size определяется толщина линии в точках, n принимает значение от 2 до 7. Параметром widht задается длина линии, m принимает значение либо в точках, либо в процентах. |
|
<HR color=цвет линии> |
Вместо слов «цвет линии» пишется текстовое или числовое значение желаемого цвета. |
|
<HR align=centerleftright > |
Выравнивание горизонтальной линии по центрупо левому краю страницыпо правому краю страницы. Если этот параметр не указан, то выравнивание автоматически производится по левому краю. |
Например, <HR align=center size=4 width=75% color=#00ff00> данным тегом задается горизонтальная линия зеленого цвета, толщиной в 4 точки, выровненная по центру, длина этой линии занимает 75% экрана.
Лекция 4.
Тема. Размещение графических объектов на HTML-страницах.
Новый материал.
В языке HTML за вставку графический объектов (рисунков и фотографий) отвечает непарный тег <IMG src=“...”>. Значение параметра src зависит от того, где находится графический файл, который будет размещен на странице:
-
если этот файл находится в той же папке, что и HTML файл вашей страницы, то достаточно просто указать имя файла;
-
если такой файл расположен в другой папке, на другом компьютере или на какой-то Web-страницы в Интернете, тогда нужно указать полный путь к файлу.
Например, пусть мы вставляем файл «фото_Кошачий.jpg», находящийся в то же папке, что и HTML-страница. Тег вставки будет следующим:
<IMG src= “ фото_Кошачий.jpg”>.
Допустим, что этот файл находится не на вашем ПК (№2), а на другом компьютере (№4) в папке «Материалы для создания Web-страницы» из папки «Мои документы». Тогда тег будет выглядеть таким образом:
<IMG src= “\\4\Мои документы\Материалы для создания Web-страницы\ фото_Кошачий.jpg”>.
Графический объект можно выровнять по центру, для этого тег <IMG src=“...”> заключается между открывающим тегом <CENTER> и закрывающим тегом </CENTER>, а по левому краю страницыпо правому краю страницы с помощью параметра align.
Иногда вставляемая картинка слишком маленькая или чересчур большая. Для того чтобы размеры графического объекта были оптимальными, задаются такие параметры тега <IMG src=“...”>, как widht (длина или ширина) и height (высота). Значения этих параметров могут исчисляться либо в точках, либо в процентах (процентное соотношение от первоначальных размеров).
Вернемся к Таблице 1.
|
Теги, отвечающие за размещение графических объектов |
|
|
<IMG src= “Путь/Имя файла”> |
Этот тег указывает на то, что браузер должен отобразить графический объект, имя которого указано в параметре src. |
|
<IMG align=leftright src= “Путь/Имя файла”> |
Выравнивание графического объекта по левому краю страницыпо правому краю страницы. Если этот параметр не указан, то выравнивание автоматически производится по левому краю. |
|
<IMG width=m height=h border=k src= “Путь/Имя файла”> |
Параметр width задает ширину (длину) графического объекта, параметр height определяет высоту. Значения m и h могут задаваться в точках или процентах. Если эти параметры не указаны, то размеры графического объекта будут исходными. Параметр border заключает картинку в рамку, k – толщина рамки в точках. |
Например, тег <IMG align=right width=300 height=270 src=“фото_Кошачий.jpg”> размещает на странице графический объект «фото_Кошачий.jpg», выравнивая его по правому краю, ширина картинки будет 300 точек, высота – 270 (300х270).
Лекция 5.
Тема. Размещение на HTML-странице текста в виде списка.
Новый материал.
При работе с текстовым редактором вы нередко размещали текст в виде списка (нумерованного или маркированного). С помощью списков обеспечивается ясная и четкая подача материала.
В HTML предусмотрены теги, отвечающие за создание различных типов списков.
Типы списков:
-
упорядоченный (нумерованный);
-
неупорядоченный (маркированный);
-
список определений.