Лабораторная работа
Создание Web-страниц с использованием HTML
HTML — язык разметки Web-страниц, который сообщает клиенту в основных чертах, каким образом должна быть представлена информация.
Специальные программы просмотра HTML-документов, которые часто называют браузерами, служат для интерпретации файлов, размеченных по правилам языка HTML, форматирования их в виде Web-страниц и отображении их содержимого на экране компьютера пользователя.
1. Правила построения HTML-документов
Язык HTML состоит из тэгов (от английского слова tag — ярлык, признак) — это такие символы, которые управляют отображением текста и при этом сами не отображаются на экране.
Все тэги языка HTML выделяются символами-ограничителями (< и >), между которыми записывается идентификатор (имя) тэга и, возможно, его параметры. Названия тэгов, а также их параметров можно записывать на любом регистре.
Большинство тэгов HTML используется попарно, то есть для определенного тэга (открывающего) в документе имеется соответствующий закрывающий тэг. По правилам HTML закрывающий тэг записывается так же, как и открывающий, но с символом / (прямой слэш) перед именем тэга. Единственным принципиальным различием парных тэгов является то, что закрывающие тэги не используют параметры.
Тэги, которые нуждаются в соответствующих завершающих тэгах, называются тэгами-контейнерами. Все, что записано между соответствующим открывающим и закрывающим тэгом, называются содержимым тэга-контейнера.
Есть ряд тэгов, для которых завершающие тэги опускаются большинством авторов документов. Примером может служить тэг элемента списка <LI> или тэг абзаца <P>.
Ряд тэгов в принципе не нуждается в закрывающих тэгах. Примерами могут служить тэг вставки изображений <IMG>, принудительного перевода строки <BR>, указания базового шрифта <BASEFONT> и др.
Существует общие правила интерпретации тэгов браузерами.. Неверно записанный тэг или его параметр должен просто игнорироваться браузером
Тэги могут записываться с параметрами или атрибутами (от англ. attribute). Наборы допустимых параметров индивидуальны для каждого тэга. Общие правила записи параметров заключаются в следующем.
После имени тэга могут следовать параметры, которые отделяются друг от друга пробелами. Порядок следования параметров тэга произволен. Многие параметры требуют указания их значений, однако некоторые параметры не имеют значений или могут записываться без них, принимая значения по умолчанию. Если параметр требует значения, то оно указывается после названия параметра через знак равенства. Значение параметра может записываться в кавычках, так и без них. Единственным случаем, в котором без кавычек не обойтись, является случай, когда в значении параметра имеются пробелы. В значениях параметров (в отличие от названий тэгов и самих параметров) иногда важен регистр записи. Приведем пример записи тэга с параметрами:
<TABLE BORDER ALIGN= “left”>
Здесь для тэга <TABLE> задано два параметра. Первый параметр BORDER указан без значения. Второй параметр ALIGN имеет значение left.
Простейшие HTML-документы представляют собой обычные текстовые файлы, для просмотра и редактирования которых можно воспользоваться любым текстовым редактором. Эти файлы обычно имеют расширение HTM или HTML.
Тэги языка HTML
Обязательные тэги
<HTML> </HTML> — тэги, которые говорят о том, что текст будет в формате HTML. Эти тэги являются обязательными. При этом они открывающий тэг является самым первым тэгом документа, а закрывающий — самым последним. Также обязательными элементами HTML-документа являются следующие тэги:
<HEAD> </HEAD> — тэг заголовка документа
<TITLE> </TITLE> — то, что находится между этими двумя тэгами, будет отображаться в заголовке страницы (окна).
<BODY> </BODY> — все, что находится между этими двумя тэгами, будет отображаться на самой странице.
2.2.1. Заголовки и абзацы
<H1> </H1> — команда, устанавливающая заголовок. Можно изменять размер шрифта заголовка (от 1 до 6): <H1> </H1> — самый большой заголовок; <H6> </H6> — самый маленький.
<P> </P> — это тэги открытия и закрытия абзаца.
Тэги заголовков (<H1>) и тэг абзаца (<P>) могут содержать дополнительный атрибут ALIGN (содержать атрибуты могут только открывающие тэги). Например, тэг <H1 ALIGN=center> является командой для вывода заголовка по центру; а тэг <P ALIGN=center> — командой для выравнивания абзаца (выводимой информации) по центру. Параметры RIGHT и LEFT атрибута ALIGN являются соответственно командами выравнивания информации по левому или правому краю. По умолчанию броузер выравнивает текст по левому краю.
2.2.2. Непарные тэги, &-последовательности и команды-комментарии
Мы отмечали выше, что не все тэги языка HTML являются парными. Есть тэги, которые подчиняются особым правилам: это непарные тэги и &-последовательности.
Непарные тэги:
1) <BR> — используется для перевода строки. От абзаца он отличается тем, что он переводит текст на одну строку вниз, а абзац — это переход сразу на две строки.
2) <HR> — описывает горизонтальную полосу. Этот тэг имеет два атрибута:
SIZE — определяет толщину линии по ширине экрана
WIDTH — определяет размер линии по ширине экрана
Оба этих параметра могут указываться как в точках, так и в процентах от ширины экрана. Однако общепринято толщину (SIZE) указывать в точках, а размер (WIDTH) — в процентах.
&-последовательности:
Символы < и > используются как служебные. Если нам нужно напечатать их на странице, то мы должны вставить специальную последовательность символов, которая всегда начинается & и заканчивается ;.
< - “<” (less then=меньше чем)
> - “>” (greater then=больше чем)
Если нам нужно вывести на экран сам амперсант, то мы должны ввести такую последовательность: &.
Для выведения на экран двойных кавычек используется последовательность ".
При помощи &-последовательности определяются все буквы русского алфавита. Есть &-последовательности и для других языков. Такие последовательности используются в том случае, если сервер, на котором расположена страничка, не поддерживает символы с кодом более 127.
команды-комментарии:
<!—
это комментарий
-->
Подобные команды используются для вставки в документ всевозможных скриптов.
2.2.3. Форматирование текста
Принято два подхода к выделению фрагмента текста:
а) физический стиль;
б) логический стиль.
а) в этом случае используются тэги, однозначно определяющие определенное начертание шрифта:
<B> </B> — выделение жирным шрифтом;
<I> </I> — выделение наклонным шрифтом;
<TT> </TT> — выделение шрифтом, имитирующим печатную машинку.
б) используется в том случае, когда автор странички не может заранее сказать, каким образом будет отображаться информация, выделенная этими стилями (это остается на рассмотрение броузера). Разные броузеры один и тот же стиль отображают по-разному. Выделенный разными стилями текст будет на экране отображаться по-разному:
<EM> </EM> — акцент
<STRONG> </STRONG> — сильный акцент
<CODE> </CODE> — используется для форматирования исходного текста программы
<SAMP> </SAMP> — “образец”, используется для отображения образцов, выводимых на экране программы
<KBD> </KBD> — стиль клавиатуры, используется, когда необходимо указать, что эти данные должны вводиться с клавиатуры
<VAR> </VAR> — “переменная”, используется для написания имен переменных.
Мы рассмотрели основные тэги форматирования шрифтов. Для форматирования текста применяются также следующие тэги.
<PRE> — задает преформатированный текст. Для данного элемента необходимо указывать начальный и конечный тэги. Внутри такого элемента текст печатается шрифтом фиксированной ширины и при этом сохраняется разметка оригинала (пробелы и символы конца строк).
<DIV> — определяет деление документа на отдельные блоки. Для данного элемента необходимо указывать как начальный, так и конечный тэги. Элемент DIV обычно используется с атрибутом ALIGN, указывающим способ выравнивания текста внутри тех блочных элементов, которые его содержат. Элемент ALIGN может иметь одно из следующих значений: LEFT, CENTER или RIGHT.
<CENTER> — определяет выравнивание текста. Для этого элемента необходимо указывать начальный и конечный тэги. Используется для центрирования стоящего между ними текста.
<BLOCKQUOTE> — используется для разметки цитат. Необходимо указывать как начальный, так и конечный тэги. Данный элемент используется при разметке протяженных цитат, текст которых при этом обычно печатается со сдвинутыми краями.
Кроме того, для форматирования шрифтов используются также следующие элементы. Тэг <BASEFONT> определяет вывод определенного шрифта по умолчанию. Он имеет такие атрибуты как SIZE (определяет размер шрифта; задается в пикселах), FACE(определяет тип шрифта) и COLOR (определяет цвет шрифта). Так, команда <BASEFONT SIZE= “5” FACE= “Arial” COLOR= “GREEN”> задает вывод по умолчанию увеличенным шрифтом типа Arial зеленого цвета. Для форматирования шрифта отдельного фрагмента текста используется тэг <FONT>. Он имеет атрибуты такие же атрибуты, как и <BASEFONT>: SIZE, FACE, и COLOR
2.2.3. Создание списков в HTML
а) нумерованные списки задаются тэгами <OL> и </OL>. Элементы списка задаются тэгом <Li>. Можно определить также стиль нумерации (арабский или латинский). Для этого в тэг <OL> необходимо поместить атрибут TYPE, например, команда TYPE=I будет задавать римскую нумерацию списка. Арабская нумерация задается браузером по умолчанию.
б) маркированные списки задаются тэгами <UL> и </UL>. Как и в случае с нумерованными списками, элементы списка задаются тэгом <Li>. Мы так же можем задать определенный маркер подобно тому, как мы определяли стиль нумерации в нумерованных списках: вставим в тэг <UL> атрибут TYPE, например, команда TYPE=square будет определять маркеры в виде квадратов. По умолчанию браузер определяет маркеры в виде точек.
в) списки определений задаются при помощи тэгов <DL> и </DL>. Однако, в отличие от рассмотренных нами выше нумерованных и маркированных списков элементы списка определяются здесь тэгами <DT> и <DD>. Эти тэги являются непарными и задают сдвиг текста в определенном направлении: <DT> — сдвиг влево, <DD> — сдвиг вправо.
Списки могут быть вложенными друг в друга, то есть элемент любого списка может содержать в себе другой список. Число уровней вложенности не ограничено стандартом. Вложенные списки удобно использовать для создания различных планов и оглавлений.
2.2.4. За пределами HTML-документа
Основное свойство HTML-файлов — это возможность их связывания между собой. При этом образуются гиперссылки, которые могут связать одну часть текста с другой независимо от ее положения. Гиперссылка имеет следующий общий вид:
<A HREF= “[адрес перехода]”> выделенный текст </A>
В качестве перехода может быть использовано несколько типов аргумента. Самым простым является другая HTML-страничка:
<A HREF= “index.html”> начало </A>
Обычно index.html — это главная страничка любого сайта. Иногда в качестве стартовой страницы используются default.htm, index.titul, index.htm. Возможен также и такой вид перехода:
<A HREF= http://www.oryol.ru/index.html> сайт ОГТРК </A>
Часто бывает потребность перейти внутри одного документа. В таком случае ссылка будет состоять из двух частей:
а) <A NAME= “AAA”> переход закончен </A> — для обозначения метки в файле, куда будет осуществлен переход;
б) <A HREF=2.htm#AAA> переход </A> — для осуществления самого перехода.
Кроме того, можно осуществлять переходы на конкретные файлы, расположенные в Интернете:
<A HREF= “ftp//server/directory/file.exe”> загрузить файл </A>
Аналогичным образом можно задать ссылку:
<A HREF= “mailto:user@mail.box”> отправить письмо </A>
2.2.5. Вставка изображения
Есть возможность вставить в нашу страничку изображение. Оно должно быть определенного формата, который поддерживается браузером. Наиболее часто используются форматы: GIF, JPEG (JPG), BMP. Отличие этих форматов:
BMP — изображение точно такое же, как на картинке; это самый большой по объему формат и самый точный.
GIF — сжимает информацию без потери качества.
JPEG — формат сжатия информации с потерей качества.
Команда <IMG SRC= “picture.gif”> позволяет вставить изображение в HTML-документ.
Тэг <IMG> может иметь атрибут ALT. Этот атрибут определяет комментарий к данному изображению.
Помимо рисунков в HTML-документ можно вставлять бегущую строку. Это осуществляется при помощи тэгов <marquee> </marquee>. Этот тэг может иметь дополнительные атрибуты. Так, например, атрибут behavior определяет поведение строки. Если он имеет параметр scroll, бегущая строка будет прокручиваться как бы вокруг странички. Если же он имеет параметр alternate, то бегущая строка будет двигаться по принципу челнока: от края к краю. Параметр slide определяет прокрутку строки с остановкой. Атрибут bgcolor определяет цвет фона бегущей строки. Он может задаваться двумя способами: последовательностью из трех пар символов или обозначением цвета на английском языке. Атрибут WIDTH задает ширину бегущей строки в процентах от ширины экрана. Атрибут HEIGTH определяет высоту бегущей строки в пикселах. Атрибут DIRECTION задает направление прокрутки. Он может иметь параметры: LEFT — определяет движение справа налево, RIGHT —слева направо, UP —снизу вверх, DOWN — сверху вниз.
2.2.5. Организация таблиц в среде HTML
Таблица является наиболее простым способом размещения информации. Таблицы могут быть вложенными. Таблица определяется с помощью следующих тэгов:
<TABLE> </TABLE> — задает таблицу;
<CAPTION> </CAPTION> — определяет заголовок таблицы;
<TR> </TR> — команда строки;
<TH> — определяет заглавные ячейки;
<TD> — команда колонки.
Тэг <TABLE> может иметь следующие атрибуты:
align — данный атрибут принимает одно из следующих значений: LEFT, CENTER или RIGHT (используемый при этом регистр значения не имеет). Указывает для текущей таблицы, каким образом при разметке осуществляется ее горизонтальное выравнивание. По умолчанию выполняется выравнивание таблицы по левой границе листа.
width — определяет ширину таблицы. В отсутствии данного атрибута ширина таблицы определяется автоматически в соответствии с объемом содержащегося в ней материала. Однако посредством атрибута WIDTH можно самим задать ширину таблицы либо в пикселах (например WIDTH=212), либо как процент от расстояния между левой и правой границами экрана (например WIDTH="80%").
border —позволяет задавать для таблицы ширину внешней рамки - в пикселах (например, BORDER=4). Данному атрибуту может быть также присвоено значение нуль, чтобы полностью отказаться от внешней рамки. Рамка таблицы не рисуется также, если атрибут border вообще отсутствует в разметке. Некоторые браузеры способны воспринимать также конструкцию <TABLE BORDER>, считая ее семантически эквивалентной атрибуту BORDER=1.
Элемент <CAPTION> может иметь только один атрибут - ALIGN, который может принимать два значения: ALIGN=TOP или ALIGN=BOTTOM. Посредством этого атрибута можно выбирать, помещать ли заголовок над таблицей или, соответственно, под ней. Большинство браузеров по умолчанию ставит заголовок над таблицей. Для элемента <CAPTION> необходимо всегда указывать начальный и конечный тэги.
Для <TR> - элемента, начинающего новый ряд таблицы - необходимо указывать начальный тэг, однако всегда можно опустить конечный тэг. Элемент <TR> выступает в роли контейнера для ячеек таблицы и может иметь два атрибута:
Для разметки таблицы на уровне ячеек предусмотрено уже два элемента: элемент <TH> используется для разметки заголовков, а <TD> - для ячеек с данными. Такое разграничение позволяет программам пользователей оформлять заголовок таблицы и данные разными шрифтами, а, кроме того, улучшает работу браузеров, использующих речевой интерфейс. Для элементов <TH> и <TD> всегда необходимо указывать начальные тэги, конечные же всегда могут быть опущены. При разметке ячеек таблицы могут использоваться следующие атрибуты:
nowrap — с помощью этого атрибута блокируется автоматический перенос слов в пределах текущей ячейки (например в случае <TD NOWRAP>). Действие этого атрибута эквивалентно использованию в ячейке объектов , создающих неотменяемые пробелы.
rowspan — данный атрибут имеет значением положительное целое число, определяющее количество рядов, на которые простирается данная ячейка. Этому атрибуту по умолчанию присваивается значение 1.
colspan — данный атрибут имеет значением положительное целое число, определяющее количество колонок, на которые простирается данная ячейка. По умолчанию атрибуту присваивается значение 1.
align — определяет выполняемое по умолчанию правило горизонтального выравнивания для содержимого текущей ячейки, тем самым отменяя действие атрибута ALIGN, задаваемого при общей разметке текущего ряда ячеек. При этом используются все те же самые значения: LEFT, CENTER и RIGHT. Если атрибут ALIGN для данной ячейки не был указан, то по умолчанию для элементов <td> выполняется выравнивание по левому краю, а для элементов <th> - центрирование. Напомним, что вы можете отменить это правило, задав требуемый атрибут ALIGN в элементе <TR>.
valign — определяет способ вертикального выравнивания для содержимого текущей ячейки, отменяя тем самым действие атрибута VALIGN, заданного при общей разметке данного ряда таблицы. Использует при этом те же самые значения: TOP, MIDDLE и BOTTOM. Если для данной ячейки атрибуту VALIGN не присвоено какого-либо значения, то по умолчанию для нее осуществляется выравнивание по центру. Те не менее можно изменить такое правило, задав нужный атрибут VALIGN в элементе <TR>.
width — задает ширину площадки, отводимой под содержимое данной ячейки, в пикселах и без учета ширины границ. Как правило, при разметке будет использоваться предложенное здесь значение за исключением тех случаев, когда оно начинает вступать в противоречие с минимальной шириной остальных ячеек в той же самой колонке.
height — задает высоту площадки, отводимой под содержимое данной ячейки, в пикселах и без учета ширины границ. Как правило, при разметке будет использоваться предложенное здесь значение за исключением тех случаев, когда оно начинает вступать в противоречие с минимальной высотой других ячеек в той же самой колонке.
2.2.6. Цветовая гамма в документе
Цветовая гамма документа определяется с помощью следующих атрибутов, расположенных внутри метки <BODY>:
BGCOLOR — определяет цвет фона для тела документа.
TEXT — определяет цвет, используемый при выводе на экран текста из данного документа. Обычно используется, когда меняется фоновый цвет с помощью атрибутов BGCOLOR или BACKGROUND.
LINK — определяет цвет, который будет использоваться при выводе на экран текста из еще не выбранных гипертекстовых связей.
VLINK — определяет цвет, который будет использоваться при выводе на экран текста из уже проверенных гипертекстовых связей.
ALINK — задает цвет, которым будут выделяться в тексте гипертекстовые связки в тот момент, когда пользователь щелкает по ним клавишей мыши.
BACKGROUND — определяет адрес URL, откуда будет браться изображение для подготовки фона к текущему документу.
В языке HTML цвета задаются либо последовательностью из трех пар символов, каждая из которых представляет собой насыщенность одного из цветов: красного, синего и зеленого, либо одним из 16 общепринятых названий для цвета.
Названия цветов и соответствующие значения RGB
| черный | Black = "#000000" | зеленый | Green = "#008000" |
| серебряный | Silver = "#C0C0C0" | салатовый | Lime = "#00FF00" |
| серый | Grey = "#808080" | оливковый | Olive = "#808000" |
| белый | White = "#FFFFFF" | желтый | Yellow = "#FFFF00" |
| темно-красный | Maroon = "#800000" | темно-синий | Navy = "#000080" |
| красный | Red = "#FF0000" | синий | Blue = "#0000FF" |
| сиреневый | Purple = "#800080" | бирюзовый | Teal = "#008080" |
| Светло-сиреневый | Fuchsia = "#FF00FF" | голубой | Aqua = "#00FFFF" |
Можно изменять также цвет отдельного фрагмента текста (мы описывали это выше), таблицы, строки или ячейки в таблице и т.д. Для этого в соответствующий тэг необходимо вставить атрибут BGCOLOR.
III.9. Создание фреймов
Фреймы представляют собой такой вид HTML-документа, когда страница разбивается на несколько “окон”, каждое из которых отображает какую-либо страницу.
Фреймы в языке HTML задаются следующими тэгами:
<FRAMESET ROWS> — задает окна фрейма, расположенные в виде строки; задается в процентах от высоты экрана. Например, команда <FRAMESET ROWS= “60%,*”> определяет, что верхнее окно фрейма будет занимать 60% от высоты экрана.
<FRAMESET COLS> — задает те окна фрейма, которые будут расположены в виде столбцов (колонок), задается в процентах от ширины экрана. Например, команда <FRAMESET COLS=35%,65%> будет определять разбиение страницы на две колонки (два столбца), одна из которых будет занимать 35% от ширины экрана, а вторая — 65%.
<FRAME SRC> — задает адрес той страницы, которая будет расположена в определенном окне фрейма. Например, команды <FRAMESET ROWS= “60%,*”>
<FRAME SRC= “list.html”>
определяют, что в окне, расположенном в виде строки (во всю ширину экрана), будет отображаться страница list.html.
