Некоторые дополнительные метки расширения HTML.

- Размер рамки таблицы < TABLE BORDER =размер>

- Ширина таблицы < TABLE WIDTH = ширина>

- Ширина клетки таблицы < TD WIDTH = ширина>

- Интервал клетки таблицы < TABLE SPACING= интервал>

- Заполнение клетки таблицы < TABLE CELLPADDING =заполнение>

- Размер шрифта < FONT SIZE = размер> Текст< /FONT>

- Размер базового шрифта < BASEFONT SIZE = размер>

- Цвет текста < BODY TEXT=#nnnnnn>

- Цвет фона < BODY BGCOLOR=#nnnnnn>

- Центрирование абзацев < CENTER> Центрированный абзац< /CENTER>

Самостоятельно вставьте в файл указанные выше теги и просмотрите результат через браузер.

 

Метки изображений.

С помощью приведенных ниже таблиц 1 и 2 возможно делать гиперссылки на различные ресурсы.

Таблица 1.

Изображение	Формат метки изображения
Общий формат изображений Выравнивание по верху Выравнивание по середине Выравнивание по низу Задание альтернативного текста	< IMG SRC = имя файла> < IMG SRC = имя файла ALIGN=TOP> < IMG SRC = имя файла ALIGN=MIDDLE> < IMG SRC = имя файла ALIGN=BOTTOM> < IMG SRC = имя файла ALT=текст>

Самостоятельно вставьте в файл указанные выше теги и просмотрите результат через браузер. В качестве графического файла используйте файл, из коллекции картинок или заданный преподавателем (для упрощения написания гиперссылки графический файл лучше скопировать в папку с вашей Web-страницей). Выясните, в каких случаях на экране появляется альтернативный текст.

 

Метки гиперссылок.

Таблица 2.

Ресурс	Способ построения гиперссылки
Общий формат гиперссылки	< A HREF=" URL" > Текст гиперссылки< /A>
Закладка на данной HTML-странице	< A NAME=" Имя закладки на данной странице" > Текст закладки < /A>
Гиперссылка на закладку	< A HREF=" #Имя закладки" > Текст гиперссылки< /A>
Электронная почта	< A HREF=mailto: Адрес> Текст гиперссылки< /A>
Файл (или каталог)FTP	< A HREF=" ftp: //имя сервера /каталог/файл" > Текст гиперссылки< /A>
Файл Gopher	< A HREF=" Gopher: //имя сервера /каталог/файл" > Текст гиперссылки< /A>
Группа новостей Usenet гиперссылки< /A>	< A HREF=" news: имя группы новостей" > Текст
Telnet гиперссылки< /A>	< A HREF=" telnet: //имя компьютера" > Текст

 

Самостоятельно вставьте в файл гиперссылки на www.nstu.ru (это сайт НГТУ). Выполните закладку и ссылку на нее.

Просмотрите результат через браузер и покажите преподавателю.

Лабораторная работа №9

Создание собственной Web-страницы с помощью языка

Программирования HTML

 

Цель работы: получение более углублённых навыков создания Web-страниц.

Основные сведения.

Теги физического форматирования текста.

Кроме известных уже вам Тегов < B>, < I> и < U>, можно привести ещё несколько примеров:

Теги < STRIKE> и < S> отображают текст, перечёркнутый горизонтальной линии. Отменённый тег.

Пример < STRIKE> зачёркнутого< /STRIKE> текста.

Тег < SUB> сдвигает текст ниже уровня строки и выводит его (если возможно) шрифтом меньшего размера. Удобно использовать для математических индексов.

Пример шрифта для < SUB> нижнего< /SUB> индекса.

Тег < SUP> сдвигает текст выше уровня строки и выводит его (если возможно) шрифтом большего размера. Удобно использовать для задания степеней чисел в математике.

Пример шрифта для < SUP> верхнего< /SUP> индекса.

Тег < BLINK> отображает мигающий текст. Но опытные разработчики крайне редко прибегают к использованию этого тега, поскольку наличие на странице мигающих символов раздражает многих пользователей.

Пример < BLINK> мигающего< /BLINK> текста.

Тег < FONT> указывает параметры шрифта. Для тега могут задаваться следующие параметры: FACE, SIZE и COLOR.

Параметр FACE служит для указания типа шрифта, которым программа просмотра будет выводить текст. Можно задавать как один, так и несколько названий шрифтов, разделив их запятыми. Это весьма полезное свойство, так как если на компьютере пользователя нет шрифта, указанного в списке первым, то делается попытка найти следующий шрифт и т.д.

Пример:

Текст, записанный шрифтом по умолчанию.

< BR>

< FONT FACE=" Verdana", " Arial", " Helvetica" >

Пример задания названия шрифта.

< /FONT>

Параметр SIZE служит для указания размеров шрифта в условных единицах от 1 до 7.

Параметр COLOR у станавливает цвет шрифта, который может задаваться с помощью стандартных имён или в формате #RRGGBB.

Тег < BASEFONT > используется для указания размера, типа и цвета шрифта, используемого по умолчанию. Эти значения обязательны для всего документа, однако могут в нужных местах переопределяться с помощью тега < FONT>. После закрывающего тега < /FONT> действие тега < BASEFONT> восстанавливается. Для этого тега не существует закрывающего тега.

В качестве параметров могут использоваться точно такие же параметры, что и для тега

< FONT>, а именно: FACE, SIZE и COLOR.

Форматирование HTML-документа.

Разделение на абзацы и многое другое:

Как вам известно из прошлой лабораторной работы в документе HTML невозможно создать абзац, используя клавишу [Enter].

Для перехода на следующую строку воспользуйтесь командой < BR>

Для создания пустой строки воспользуйтесь командой < P>

Для создания горизонтальной черты воспользуйтесь командой < HR>

Заголовки в документе создаются с помощью команд: < Hi> Заголовок < /Hi>

причем при i = 1 заголовок самый крупный, а при i = 6 - самый мелкий.

 

< P> Новый абзац

< HR> Горизонтальная линия

< BR> Конец строки

 

Заголовки < H1> Самый большой < /H1>

< H6> Самый маленький< /H6>

 

Поговорим теперь о каждом из параметров несколько подробнее.

Тег < P> может задаваться с параметром горизонтального выравнивания ALIGN.

Возможные значения параметра приведены в таблице 1. По умолчанию выполняется выравнивание по левому краю.

Таблица 1

Значения параметра ALIGN

 

Значение параметра ALIGN	Действие
LEFT CENTER RIGHT JUSTIFY	Выравнивание по левой границе окна браузера Выравнивание по центру окна браузера Выравнивание по правой границе окна браузера Выравнивание по ширине (по двум сторонам)

 

Пример использования заголовков с различным уровнем выравнивания:

< P>

< H1> Заголовок размера 1< /H1>

< H2> Заголовок размера 2< /H2>

< H3 ALIGN=CENTER> Заголовок размера 3< /H3>

< H4 ALIGN=RIGHT> Заголовок размера 4< /H4>

< H5> Заголовок размера 5< /H5>

< H6> Заголовок размера 6< /H6>

Основной текст документа

Тег < HR> позволяет провести рельефную горизонтальную линии в окне браузера. Этот тег не требует закрывающего тега. И имеет следующие параметры: ALIGN (LEFT, CENTER, RIGHT),

WIDHT-устанавливает длину линии в пикселях или процентах от ширины окна браузера.

SIZE-устанавливает толщину линии в пикселях.

NOSHADE-оттеняет рельефность линии.

COLOR-указывает цвет линии, используя формат RGB или стандартное имя.

 

Пример : < HR ALIGN=CENTER WIDTH=100% NOSHADE>

< HR ALIGN=CENTER WIDTH=75%>

< HR ALIGN=CENTER WIDTH=50% SIZE=10>

 

Создание списков

Списки предназначены для представления информации в упорядоченном виде.

В HTML - документах используется 3 вида списков (см. Лаб. раб. №8):

1.Неупорядочные списки (Тег < UL> ),

2.Маркированные списки (Тег < OL> ),

Элемент списка задается тегом < LI>.

В теге < UL> могут быть указаны два параметра: COMPACT и TYPE.

Параметр COMPACT записывается без значений и применяется для указания браузеру, что данный список следует выводить в компактном виде. Например, может быть уменьшен шрифт или расстояние между строчками списка и т.д.

Параметр TYPE может принимать следующие значения:

TYPE=disc-маркеры отображаются закрашенными кружками;

TYPE=circle-маркеры отображаются не закрашенными кружками;

TYPE=square-маркеры отображаются закрашенными квадратиками;

Параметр TYPE может употребляться для указания вида маркеров отдельных элементов списка:

< P> Маркированный список.

< UL TYPE=circle>

< LI> Первый маркер.

< LI> Второй маркер.

< LI TYPE=square> Третий маркер.

< /UL>

В теге < OL> могут быть указаны два параметра: COMPACT, TYPE и START.

Параметр COMPACT имеет тот же смысл, что и у маркированных списков. Параметр TYPE используется для задания вида нумерации списка. Может принимать следующие значения:

TYPE=A-задаёт маркеры в виде прописных латинских букв;

TYPE=a-задаёт маркеры в виде строчных латинских букв;

TYPE=I-задаёт маркеры в виде больших римских цифр;

TYPE=i-задаёт маркеры в виде маленьких римских цифр;

TYPE=1-задаёт маркеры в виде арабских цифр;

Параметр TYPE с теми же значениями может употребляться для указания вида нумерации отдельных элементов списка. Для этого параметр TYPE разрешено указывать в теге элемента списка < LI>.

Параметр START тега < OL> позволяет начать нумерацию списка не с единицы. В качестве значения параметра START всегда должно указываться натуральное число, вне зависимости от вида нумерации списка. Приведём пример:

< OL TYPE=A START=5>

Такая запись определяет нумерацию списка с прописной латинской буквы " E". Для других видов нумерации запись START=5 задаст нумерацию, соответственно, с числа " 5", римской цифры " V" и т.д.

Списки определений задаются с помощью тега-контейнера < DL> (Definition List), также называемые словарями определений специальных терминов, являются особенным видом списков. В отличии от других типов списков, каждый элемент списка определений всегда состоит из двух частей. В первой части элемента списка с помощью тега < DT> (Definition Term) помечается определяемый термин, а во второй части тегом < DD> < Definition Description> - абзац с его определением. Для тегов < DT> и < DD> можно не записывать соответствующие закрывающие теги.

В общем, список определений записывается следующим образом:

< DL>

< DT> Термин

< DD> Определение термина

< /DL>

 

Графика.

Разработчики Web-страниц могут управлять цветом фона документа, а также указывать изображения, используемые в качестве фонового.

Фоновые изображения для HTML-документа всегда заполняет всё окно просмотра. Если размер изображения меньше размеров окна просмотра, то оно будет размножено по принципу мозаики.

Поэтому фоновые изображения должны создаваться так, чтобы при появлении на экране границы сшивки повторяющихся изображений были бы не видимы.Эта задача напоминает подбор рисунка при оклеивании обоями стен комнаты.

Приведём пример записи тега < BODY> с указанием фонового цвета и фонового изображения:

< BODY BACKGROUND=имя файла.gif BGCOLOR=RRGGBB>

Одновременное задание параметров BACKGROUND и BGCOLOR вовсе не обязательно. Любой из них, равно как и оба вместе могут отсутствовать.

 

⇐ Предыдущая12345678910Следующая ⇒

Поделиться: