- •Мировые информационные ресурсы Лабораторный практикум
- •Содержание
- •Лабораторная работа №1
- •Заголовок html–документа
- •Параметры:
- •Параметры:
- •Тело html-документа body
- •Параметры:
- •Примечание:
- •H1,h2,...H6
- •Blockquote
- •Элементы форматирования текста:
- •Basefont
- •Параметры:
- •Параметры:
- •Примечание: Будьте внимательны. Многие элементы форматирования текста pre, code, kbd,samp...), расположенные внутри элемента font, работают некорректно.
- •Задание:
- •Контрольные вопросы:
- •Noembed
- •Параметры:
- •Примечание: Для передачи Java–программе каких–либо параметров используется элемент param.
- •Атрибут nowrap
- •Атрибут соlspan
- •Атрибут rowspan
- •Атрибут widтн
- •Атрибут сеllраdding
- •Атрибуты аlign и valign
- •Атрибут border
- •Атрибут bgcolor
- •Атрибут background
- •Атрибут border
- •Задание:
- •Контрольные вопросы:
- •Textarea
- •Параметры:
- •Параметры:
- •Параметры:
- •Параметры:
- •Задание:
- •Параметры:
- •Noframes
- •Задание:
- •Контрольные вопросы:
- •Учебно-практическое издание Мировые информационные ресурсы
Элементы форматирования текста:
|
BASEFONT |
Определяет основной шрифт, которым должен отображаться текст документа |
|
FONT |
Позволяет изменять цвет, размер и тип шрифта текста |
|
I |
Выделяет текст курсивом |
|
EM |
Используется для смыслового выделения текста (курсивом) |
|
B |
Выделяет текст жирным шрифтом |
|
STRONG |
Усиленное выделение текста (жирным) |
|
U |
Выделяет текст подчеркнутым |
|
S, STRIKE |
Выделяет текст перечеркнутым |
|
BIG |
Отображает текст увеличенным шрифтом (относительно текущего) |
|
SMALL |
Отображает текст уменьшенным шрифтом (относительно текущего) |
|
SUP |
Отображает текст со сдвигом вверх (верхний индекс) |
|
SUB |
Отображает текст со сдвигом вниз (нижний индекс) |
|
CODE, SAMP |
Оформляют текст как формулу или программный код |
|
TT |
Отображает текст моноширинным шрифтом |
|
KBD |
Выделяет текст, который предлагается набрать на клавиатуре |
|
VAR |
Используется для обозначения в тексте переменных |
|
CITE |
Оформляет текст как цитату или ссылку на источник |
Basefont
(HTML 4.0) – Base Font
Не имеет конечного тэга. Определяет основной шрифт, которым должен отображаться текст документа.
Впоследствии вы можете легко изменить шрифт в любой части документа, используя элемент FONT. Действие элемента BASEFONT не распространяется на текст, заключенный в ячейки таблиц.
Параметры:
SIZE – обязательный параметр. Определяет базовый размер шрифта. Возможные значения : целые числа от 1 до 7 включительно.
FACE – определяет используемый шрифт (гарнитуру).
<BODY>
<BASEFONT SIZE = “3”>
…
Текст документа шрифтом 3 размера
…
<FONT SIZE =”+1”>
Слегка увеличиваем шрифт
</FONT>
…
Продолжаем шрифтом 3 размера
…
</BODY>
FONT
(HTML 3.2) – Font
Позволяет изменять цвет, размер и тип шрифта текста, находящегося между начальным и конечным тэгами. Вне тэгов <FONT> и </FONT> используется шрифт, указанный в элементе BASEFONT.
Параметры:
SIZE – определяет размер шрифта. Возможные значения:
– целое число от 1 до 7;
– относительный размер с указанием знака, вычисляется путем сложения с базовым размером, определенным с помощью параметра SIZE элемента BASEFONT.
COLOR – определяет цвет текста. Задается либо RGB–значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.
FACE – определяет используемый шрифт.
<FONT SIZE =”+2”> COLOR = “#AA0000”> Увеличенный красный шрифт </FONT>
<FONT SIZE =”3” FACE = “Courier” COLOR = “Magenta”> Моноширинный фиолетовый текст 3 размера </FONT>
Примечание: Будьте внимательны. Многие элементы форматирования текста pre, code, kbd,samp...), расположенные внутри элемента font, работают некорректно.
Параметр FACE старайтесь никогда не использовать. Если на компьютере пользователя не окажется указанного шрифта некорректная работа неизбежна.
I
(HTML 2.0) – Italic
Текст, заключенный между начальным и конечным тэгами, будет выделен курсивом.
Текст с <│> курсивом </│>
EM
(HTML 2.0) – Emphasis
Логическое ударение. Используется для смыслового выделения текста, стоящего между начальным и конечным тэгами. Результат обычно отображается курсивом. То есть элемент EM практически аналогичен по действию элементу I.
Порой в России встречаются <EM> действительно талантливые <EM> веб – мастера. Но только не друг с другом.
B
(HTML 3.2) – Bold
Текст, заключенный между начальным и конечным тэгами, будет выделен жирным шрифтом.
Текст с <B> выделенным </B> словом
STRONG
(HTML 2.0) – Strong
Усиленное выделение. Текст, заключенный между начальным и конечным тэгами, будет выделен жирным шрифтом. То есть элемент STRONG практически аналогичен по действию элементу В.
Я <STRONG> сильный </STRONG>, но далёкий.
U
(HTML 2.0) – Underline
Данный элемент отображает помещенный между начальным и конечным тэгами текст как подчеркнутый.
<U> Подчёркнутый текст </U>
S, STRIKE
(HTML 2.0) – Strike
Элемент STRIKE отображает помещенный между начальным и конечным тэгами текст как перечеркнутый. В HTML 3.2 вместо STRIKE был предложен более краткий тэг S.
Лена + <STRIKE> Вася </STRIKE> Коля = Love
BIG
(HTML 3.2) – Big
Текст, заключенный между начальным и конечным тэгами, отображается увеличенным шрифтом (относительно текущего).
Текст с <BIG> увеличенным </BIG> словом
SMALL
(HTML 3.2) – Small
Текст, заключенный между начальным и конечным тэгами, отображается уменьшенным шрифтом (относительно текущего).
Небоскрёбы, небоскрёбы, а я <SMALL>маленький </SMALL> такой.
Примечание: В настоящее время элемент SMALL поддерживают только браузеры Internet Explorer и Netscape. Если вы хотите обеспечить совместимость с другими средствами просмотра, используйте тэг <FONT SIZE="–1"> (см. элемент FONT).
SUP
(HTML 2.0) – Superscript
Отображает текст со сдвигом вверх (верхний индекс) и уменьшением размера текущего шрифта на единицу.
Microsoft <SUP> TM </SUP>
SUB
(HTML 2.0) – Subscript
Отображает текст со сдвигом вниз (нижний индекс) и уменьшением размера текущего шрифта на единицу.
X < SUB> i</SUB> = B<SUB>+C< SUB >i</SUB>
CODE, SAMP
(HTML 2.0) – Code, Sample
Данные элементы оформляют текст, находящийся между начальным и конечным тэгами, как формулу или программный код. Текст при этом, как правило, отображается моноширинным шрифтом.
Формула :<CODE>n=((x*15–z/1.25)/4)^5< /CODE >
TT
(HTML 2.0) – Tele Type
Данный элемент отображает помещенный между начальным и конечным тэгами текст моноширинным шрифтом.
<TT> СЕНЯ ЗПТ ТЧК ПОДРОБНОСТИ В ПИСЬМЕ ТЧК </TT>
KBD
(HTML 2.0) – Keyboard
Предназначен для отображения текста, который пользователь должен набрать на клавиатуре (например, при заполнении формы, введении пароля и т.п.). Как правило текст, заключенный между начальным и конечным тэгами, выделяется жирным моноширинным шрифтом.
Чтобы войти в систему наберите <KBD> “GUEST”</KBD> заглавными буквами.
VAR
(HTML 2.0) – Variable
Элемент VAR предназначен для обозначения в тексте переменных. Как правило, отображается курсивом.
Переменная <VAR> IndexZ </VAR> равен 5.
CITE
(HTML 2.0) – Citation
Оформляет находящийся между начальным и конечным тэгами текст как цитату или ссылку на источник. Обычно используется для коротких цитат (в отличие от элемента BLOCKQUOTE). Цитируемый текст отображается курсивом.
Как сказал классик :<BR>
<CITE>”Грамотное написание HTML способствует пищеварению”</CITE>
Задание:
Создать свою папку на диске и поместить в нее два документа: "aboutme.htm" и "rezume.htm". В файле "rezume.htm" указать краткую информацию о себе: ФИО, год рождения, семейное положение, адрес, телефон, e-mail, образование и указать есть ли опыт работы. В файле "aboutme.htm" кратко рассказать о себе, своей семье, о своих друзьях и о свих увлечениях. Необходимо использовать большинство тэгов, описанных в этой лабораторной работе.
Контрольные вопросы:
Опишите элементы, разбивающие текст документа на блоки.
Перечислите параметры горизонтальной разделительной линии, вставляемой в текст.
Опишите элементы форматирования текста.
Элементы BASEFONT и FONT их параметры.
Какие элементы выделяют текст курсивом?
Лабораторная работа №3
Тема: Работа со списками. Гипертекстовые ссылки
Цель: Научиться создавать списки и гипертекстовые ссылки в HTML-документе.
Списки
Списки в HTML бывают двух видов: упорядоченные (пронумерованные) и неупорядоченные (непронумерованные). Отличаются они лишь способом оформления. Перед пунктами неупорядоченных списков обычно ставятся символы–буллеты (bullets), например, точки, ромбики и т.п., в то время как пунктам упорядоченных списков предшествуют их номера.
Элементы создания списков:
|
UL |
Создает неупорядоченный список |
|
OL |
Создает упорядоченный список |
|
LI |
Создает пункт меню внутри элементов OL или UL |
|
MENU, DIR |
Создает неупорядоченный список, подобный UL |
|
DL |
Открывает и закрывает список определений |
|
DT |
Создает термин в списке определений внутри элемента DL |
|
DD |
Cоздает определение термина внутри элемента DL |
UL
(HTML 2.0) – Unsorted List
Создает неупорядоченный список. Между начальным и конечным тэгами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка.
<UL>
<LI> Первый пункт списка
<LI> Второй пункт списка
<LI> Третий пункт списка
</UL>
OL
(HTML 2.0) – Ordered List
Создает упорядоченный список. Между начальным и конечным тэгами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка.
Параметры:
START – определяет первое число, с которого начинается нумерация пунктов. (только целые числа)
TYPE – определяет стиль нумерации пунктов. Может иметь значения:
"A" – заглавные буквы A, B, C ... "a" – строчные буквы a, b, c ... "I" – большие римские числа I, II, III ... "i" – маленькие римские числа i, ii, iii ... "1" – арабские числа 1, 2, 3 ...
По умолчанию используется TYPE="1".
<OL TYPE = “I” START = “2”>
<LI> Пункт два
<LI> Пункт три
<LI> Пункт четыре
</OL>
LI
(HTML 2.0) – List Item
Создает пункт в списке. Располагается внутри элементов OLили UL.
Параметры:
VALUE – изменяет порядок нумерации элементов списка. Используется только, если элемент LI находится внутри элемента OL. В качестве значения указывается порядковый номер элемента.
<OL TYPE = “A” START = “2”>
<LI> Пункт, озаглавленный буквой В.
<LI VALUE = “6”>Пункт, озаглавленный буквой F.
<LI> Пункт, озаглавленный буквой G.
</OL>
MENU, DIR
(HTML 2.0) – Menu, Directory List
Данные тэги предназначены для создания неупорядоченных списков, подобных UL. Эти элементы не вошли в спецификацию HTML 4.0, однако браузеры могут распознавать их в целях обратной совместимости. Авторам же рекомендуется использовать вместо MENU и DIR элемент UL.
DL
(HTML 2.0) – Definition List
Открывает и закрывает список определений (терминов и их описаний). Определения задаются с помощью тэгов <DT> и <DD>.
Параметры:
COMPACT – включает режим "компактного" отображения списка. Удобно использовать, если список определений очень велик. Данный параметр является флагом и не требует присвоения значения.
<OL COMPACT>
<DT> Жапура <DD> Река в Колумбии и Бразилии
<DT> Зайцы <DD> Семейство млекопитающих отряда зайцеобразных
…
</DL>
DT
(HTML 2.0) – Definition Term
Создает термин в списке определений внутри элемента DL.
DD
(HTML 2.0) – Definition Description
Cоздает определение термина внутри элемента DL.
Гипертекстовые ссылки
Гипертекстовые ссылки являются ключевым компонентом, делающим WEB привлекательным для пользователей. Добавляя гипертекстовые ссылки (далее – ссылки), создается набор связанных и структурированных документов, что позволяет пользователю получать необходимую ему информацию максимально быстро и удобно. Ссылки имеют стандартный формат, что позволяет браузеру интерпретировать их и выполнять необходимые функции (вызывать методы) в зависимости от типа ссылки.
Ссылки могут указывать на другой документ, специальное место данного документа или выполнять другие функции, например запрашивать файл по FTP–протоколу для отображения его браузером.
URL может указывать на специальное место по абсолютному пути доступа, или указывать на документ в текущем пути доступа, что часто используется при организации больших структурированных WEB–сайтов.
Ссылки на другие документы в HTML создаются с помощью элемента A.
A
(HTML 1.0) – Anchor
Данный элемент используется для создания и использования гипертекстовых ссылок.
Параметры:
HREF – определяет находящийся между начальным и конечным тэгами текст или изображение как гипертекстовую ссылку (URL, или линк) на документ (и/или область документа), указанный в значении данного параметра. Возможные значения:
http://... – создает ссылку на www-документ;
ftp://... – создает ссылку на ftp-сайт или расположенный на нем файл;
mailto:... – запускает почтовую программу-клиент с заполненным полем имени получателя. Если после адреса поставить знак вопроса, то можно указать дополнительные атрибуты, разделенные знаком "&";
news:.. – создает ссылку на конференцию сервера новостей;
telnet://... – создает ссылку на telnet-сессию с удаленной машиной;
wais://... – создает ссылку на WAIS - сервер;
gopher://... – создает ссылку на Gopher - сервер;
Если тип соединения и адрес машины не указаны, в качестве отправной точки используется адрес текущего документа. Это позволяет использовать относительные ссылки. Например, линк <A HREF="docs/title.html"> Документация </A> будет ссылаться на файл title.html в подкаталоге docs (относительно текущего).
NAME – помечает находящуюся между начальным и конечным тэгами область документа как возможный объект для ссылки. В качестве значения нужно латиницей написать любое слово-указатель, уникальное для данного документа. Например: <A NAME="part">Раздел1</A>. Теперь вы можете ссылаться на помеченную область простым указанием ее имени после имени документа. Например, линк <A HREF="document.html#part">Раздел1</A> отправит вас в раздел "part" файла document.html, а линк <A HREF="#bottom">В конец документа</A> – в раздел "bottom" текущего документа.
<!-- Использование параметра NAME: --> <A NAME="history">История бодибилдинга</A> ... <A NAME="now">Спорт глазами современника</A> ... Вернуться к разделу<A HREF="#history">истории</A>
TARGET – определяет окно (фрейм), на которое указывает гипертекстовая ссылка. Этот параметр используется только совместно с параметром HREF. В качестве значения необходимо задать либо имя одного из существующих фреймов, либо одно из следующих зарезервированных имен:
_self – указывает, что определенный в параметре HREF документ должен отображаться в текущем фрейме;
_parent – указывает, что документ должен отображаться во фрейме-родителе текущего фрейма. Иначе говоря, _parent ссылается на окно, содержащее FRAMESET, включающий текущий фрейм;
_top – указывает, что документ должен отображаться в окне-родителе всей текущей фэймовой структуры;
_blank – указывает, что документ должен отображаться в новом окне.
<!-- Использование параметра HREF: --> <A HREF="ftp://ftp.cdrom.com" TARGET="_blank">FTP-site</A> <A HREF="http://opengl.rdc.ru">Русский проект по OpenGL</A> ...