Архитектура Аудит Военная наука Иностранные языки Медицина Металлургия Метрология
Образование Политология Производство Психология Стандартизация Технологии


Лабораторная работа № 2. «Списки и ссылки»



Разработка HTML-страниц

Лабораторный практикум

Часть 7

 


ОГЛАВЛЕНИЕ

ВВЕДЕНИЕ. 3

Лабораторная работа № 1. Создание простейшего HTML-файла. 4

Лабораторная работа № 2. «Списки и ссылки». 12

Лабораторная работа № 3. Графика в интернет-документах. 22

Лабораторная работа №4. Создание графического меню с использованием навигационных областей HTML. 28

Лабораторная работа № 5. Таблицы в интернет-документах. 30

Лабораторная работа № 6. Фреймы. 37

Приложение А Названия цветов. 44

Приложение Б Краткий справочник по тегам. 48

Список использованных источников. 51


ВВЕДЕНИЕ

 

Настоящее пособие предназначено для студентов и ориентировано на поддержку дисциплин “Информатика” и “Информационные системы и технологии”.

Лабораторный практикум – состоит из шести лабораторных работ, предусматривающих освоение основных возможностей по разработке HTML-страниц. Каждая лабораторная работа содержит перечень заданий для выполнения, учитывающих будущую специализацию студентов.

Каждая лабораторная работа способствует закреплению и углублению знаний, полученных студентами на лекционных занятиях.

Данное пособие ориентировано на поддержку лабораторных и практических занятий в компьютерных классах; может также использоваться для самостоятельной работы, индивидуального и дистанционного обучения.


Лабораторная работа № 1.
Создание простейшего HTML-файла.

Краткие теоретические сведения

HTML-файл является простым текстовым файлом, содержащим инструкции программе-браузеру (Internet Explorer, Netscape, Opera, Mozilla и т. д.) для отображения информации на экране монитора. Эти инструкции записываются при помощи специальных команд - тегов. Тег представляет собой управляющую конструкцию, заклю­ченную в скобки. Например:

< B> этот тег выведет на экран жирный текст < /B>

В данном случае первая латинская буква «В», заключенная в скобки является открывающим тегом, а вторая со знаком прямой слэш - закрывающим. Такая конструкция называется парным тегом или тегом-контейнером и управляет внешним видом информации, заключенной между двумя тегами.

Кроме парных тегов существуют одиночные. Например: < BR>. Данный тег вставляет в документ принудительный перенос на сле­дующую строку.

В теги могут добавляться различные параметры, уточняющие его.

HTML-файл имеет строго определенную структуру. В обязательном порядке это должны быть три раздела:

1. HTML

2. HEAD

3. BODY.

Раздел HTML

Раздел HTML определяет специфику документа, содержание которого будет интерпретироваться браузером. Раздел описывается тегом- контейнером < HTML>... < /HTML> и дает браузеру информацию о том, что документ разработан с помощью языка разметки HTML.

Раздел HEAD

Раздел HEAD выполняет функцию рабочего заголовка HTML- документа. Теги, указываемые внутри этого раздела, чрезвычайно важны и могут сильно влиять на внешний вид документа, но сами остаются незаметными глазу пользователя.

Данному разделу сопоставлен парный тег < HEAD>. < /HEAD>.

Внутри этого тега могут использоваться следующие вложенные теги:

1. < TITLE> - это парный тег задает заголовок окна программы- браузера. Например:

< TITLE> Мой первый файл< /TITLE>

В заголовке окна программы отобразится фраза «Мой первый файл». Какие-либо дополнительные параметры в данном теге не используются, поскольку внешний вид заголовка окна программы определяется настройками операционной системы компьютера.

2. < BASE> - непарный тег служит для указания полного базово­го URL-адреса документа. С его помощью относительная ссылка продолжает работать, если документ переносится в другой каталог или даже на другой компьютер. Тег < BASE> работает аналогично команде path MS-DOS.

< BASE HREF=" //www.my host.by/manukevich" >

В данном примере использован тег < BASE> с параметром HREF, который определяет базовый адрес основного Интернет-документа.

3. Мета-определения < МЕТА>. Мета-определения электронного документа описываются целым рядом параметров, входящих в со­став непарного тега < МЕТА> и предназначенных для описания внутренних свойств HTML-файла. Например:

а. < МЕТА NAME=" keywords" CONTENT= " HTML, Web, WWW, Web-страница, Интернет" >

Данная строка в файле задает ключевые слова документа. Таких строк в документе может быть много.

б. < МЕТА NАМЕ=" беБСг1рб1оп" СОЫТЕЫТ=" НТМЬ. Ла­бораторный практикум: Быстрое освоение популяр­ного языка гипертекстовой разметки HTML" >

Данная строка представляет краткое описание Интернет- документа.

в. < МЕТА ЫАМЕ=" Аи^ог" СОЫТЕЫТ=" Александр Шевченко" >

Конструкция предназначена для указания автора (авторов) теку­щего документа.

Также могут использоваться иные параметры, приведенные в табл. 1.1.

Таблица 1.1 Параметры типа мета-определений NAME

Параметр Функция Подпараметры
keywords Указание ключевых слов документа  
description Указание краткого описания документа  
author Информация об авторе (авторах) документа  
robots Составление правил для индексирования документа поисковыми системами (робо­тами) ALL NONE INDEX NOINDEX FOLLOW NOFOLLOW
rating Установление возрастной категории содержания документа  
document- state Определение частоты индексирования документа  
revisit Определение промежутка времени, через которое должно производиться повторное индексирование документа  
distribution Категория распространения документа (массовое или ограниченное)  
URL Указание основного адреса документа для индексирования (в случае существования «зеркальных» копий)  
copyright Установление авторского права и перечис­ление условий распространения документа  
generator Информация о программном обеспечении, с помощью которого создавался документ  

 

Раздел Body описывается парным тегом < BODY>...< /BODY>, внутри которого размещается большинство существующих тегов HTML. Тег < BODY> имеет ряд параметров (табл. 1.2), которые условно можно разделить на четыре основные группы (параметры фона, границ документа, текста и гиперссылок).

Таблица 1.2 Параметры тега < BODY>

Параметр Функция
BGCOLOR Определение цвета фона
BACKGROUND Указание фонового рисунка
BGPROPERTIES Изменение свойств фона (например, фиксирование фонового рисунка)
TOPMARGIN, BOTTOMMARGIN, LEFTMARGIN, RIGHTMARGIN, MARGINWIDTH, MARGINHEIGHT Определение размера отступов
TEXT Определение цвета основного текста
LINK, ALINK, VLINK Определение цвета гиперссылок

BGCOLOR устанавливает цвет фона, значение которого может быть введено в символьном эквиваленте, в шестнадцатеричном ко­де или в формате цветовой модели RGB.

На примере показано три варианта установки цвета фона (белого):

1) < BODY BGCOLOR=" white" >

2) < BODY BGCOLOR=" #FFFFFF" >

3) < BODY BGCOLOR=" 255, 255, 255" >

Параметр BACKGROUND позволяет накладывать на фон доку­мента графическое изображение:

< BODY BACKGROUND=" images/bg.gif" >

Из параметров текста документа реально применяется только один - TEXT. Он задает цвет основного текста на странице (значение параметра может быть введено аналогично цвету фона документа):

< BODY TEXT=" black" >

Параметры гиперссылок (связей с внутренними или внешними документами) определяют цвет активных (ALINK), не посещенных (LINK) и посещенных (VLINK) ссылок:

< BODY LINK=" #OOOOFF" ALINK=" #OOOOFF" VLmK=" blue" >

Форматирование текста

Область работы с текстом в HTML включает в себя большое коли­чество всевозможных тегов, составляющих две основные группы: теги логического форматирования и теги физического форматирования.

Тег < ACRONYM> — используется для расшифровки аббревиа­тур. Реализуется через параметр TITLE и отображается в браузере при наведении курсора на слово-аббревиатуру. Пример:

< ACRONYM TITLE=”HyperText Markup Language”> HTML< / ACRONYM> - один из наиболее популярных и распространенных на сегодня языков разметки текста, используемый для создания Web-сайтов.

Тег < CITE> — призван выделять различные цитаты и высказы­вания, названия библиографических источников и пр. Текст, поме­щенный между тегами < CITE> и < /CITE>, браузером выделяется курсивом.

Тег < CODE> — предназначен для визуального выделения не­больших фрагментов программного кода. Код, размещенный в этом парном теге, отображается моноширинным шрифтом.

Тег < ЕМ> — используется для интонационного выделения опре­деленного текстового фрагмента. Браузерами отображается курсивом (так же, как теги < CITE> и < I> ).

Теги < H1>, < Н2>... < H6> — тег < H> с указанием одной из цифр (от 1 до 6) задает определенный размер заголовка всего текста це­ликом или его конкретного фрагмента. Соответственно заголовок < H6> будет минимальным, a < H1> — самым большим. Особенно­стью тегов < H> является то, что они уже подразумевают отступ от текстовой части и разработчикам HTML-документов не приходится делать отступ самостоятельно.

Тег < STRONG> используется для выделения фрагментов текста, на которых необходимо акцентировать внимание пользователя. Браузерами результат такого форматирования отображается жир­ным начертанием. В визуальном плане аналогичен тегу < B>.

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

Тег < B> - функция этого тега аналогична действию тега < STRONG>, а именно - визуальное выделение фрагмента текста, на котором следует сделать акцент, отображается жирным начертанием.

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

Следует заметить, что тег < BASEFONT> используется в двух разделах документа: HEAD и BODY. Закрывающего тега < BASE­FONT> не требует.

Тег < FONT> - один из основных тегов физического форматиро­вания текста отображающий свойства шрифтов. Для него могут ис­пользоваться следующие параметры:

FACE - параметр, посредством которого браузер отображает текст указанным в HTML-коде шрифтом. При этом значение пара­метра FACE должно соответствовать установленному на компьюте­ре пользователя шрифту. В случае если такого шрифта нет, текст будет показан стандартным (по умолчанию) шрифтом. Часто разра­ботчики HTML-документов добавляют сразу несколько значений параметра FACE. Таким образом, если первого шрифта не окажется на компьютере пользователя, то браузер отобразит текст вторым шрифтом. Не будет найдено второго шрифта, браузер приступит к поиску третьего и т. д. Пример:

< FONT FACE=" Tahoma", " Arial", " Verdana " > Этот текст будет показан одним из 3-х указанных шрифтов.< /FONT>

COLOR — параметр, предназначенный для выбора цвета, которым будет написан текст. HTML-конструкция имеет следующий вид:

< FONT COLOR=" red" > Этот текст будет написан красным цветом. < /FONT>

SIZE - функцией этого параметра является определение размера шрифта, которое происходит по условной шкале от 1 до 7. При этом указание размера может осуществляться как в виде относительного показателя (+1), так и в виде абсолютного (1). Средним значением размера шрифта принято считать показатель 3. Однако окончательный вид шрифта с учетом свойств его размеров может отличаться в зависимости от модели и версии браузера.

Тег < I> - тег, аналогичный тегам логического форматирования < CITE> и < ЕМ> (выделяет нужную часть текста курсивом). В ряде случаев использование < I> рекомендуется заменять соответствую­щими тегами логического форматирования.

Тег < SMALL> - предназначен для установки размера шрифта не­много меньшего, чем остальные слова (поместив нужный фрагмент между парным тегом < SMALL>, получим эффект, противополож­ный действию тега < BIG> ).

Тег < SPAN> - применяется в случае, когда выделенному фрагмен­ту текста необходимо присвоить определенные свойства, а к помощи никакого логического тега прибегнуть нельзя.

Тег < SUB> - позиционирует фрагмент текста относительно нижней линии строки. Весьма удобный инструмент для написания математических и химических формул.

Тег < SUP> - размещает текстовый фрагмент относительно верх­ней линии строки. Также подходит для включения в разнообразные формулы.

Тег < TT> - спецификация определяет его как тег для отображения телетайпа или текста, набранного моноширинным шрифтом. В ряде случаев может быть заменен тегом < CODE>.

Тег < U> делает текст подчеркнутым.

Разделение на абзацы

При отображении HTML-файла на компьютере необходимо про­изводить структурирование документа при помощи специального тега < P>. Перед началом каждого абзаца текста следует поместить тег < Р>. Закрывающий тег < /P> не обязателен. Браузеры обычно отделяют абзацы друг от друга пустой строкой.

Тег < Р> может задаваться с параметром горизонтального выравни­вания ALIGN. Возможные значения параметра приведены в табл. 1.3. По умолчанию выполняется выравнивание по левому краю.

Тег < BR> производит принудительный перенос строки текста.

Тег < NOBR> запрещает перевод строки.

Тег < WBR> дает возможность указать браузеру место возможного перевода строки, что будет выполнено только при необходимости.

Таблица 1.3 Значения параметра ALIGN

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

 

Горизонтальные линии

Тег < HR> позволяет провести рельефную горизонтальную ли­нию. Этот тег не является контейнером, поэтому не требует закры­вающего тега. До и после линии автоматически вставляется пустая строка. Параметры тега < HR> представлены в табл. 1.4.

Таблица 1.4 Параметры тега < HR>

Параметр Назначение
ALIGN Выравнивает по краю или центру; имеет значения LEFT, CENTER, RIGHT
WIDTH Устанавливает длину линии в пикселях или процен­тах от ширины окна браузера
SIZE Устанавливает толщину линии в пикселях
NOSHADE Отменяет рельефность линии
COLOR Указывает цвет линии. Используется формат RGB или стандартное имя

Пример:

 

< HR АLIGN=CENTER WIDTH=50% NOSHADE>

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

Ход работы

1. Создать пустой текстовый файл с именем Proba_1.HTM на диске С:. Для этого можно использовать текстовый редактор Note­pad, либо в любом файловом мониторе (FAR, TotalCommander) установить на одной из панелей диск C: и нажать сочетание клавиш ALT+F4. После этого ввести имя файла.

2. Набрать следующий текст:

< HTML>

< HEAD>

< TITLE> Мой первый HTML-документ< /TITLE>

< META HTTP-EQUIV=" Content-Type" CONTENT=" text/ html; charset=Windows-1251" >

< META NAME=" keywords" CONTENT=" HTML, документ, первый" >

< META NAME=" description" СО^Е^=" Это мой пер­вый HTML-документ" >

< /HEAD>

< BODY BGCOLOR=" #FFFFFF" TOPMARGIN=" 30"

TEXT=" black" LINK=" #00FF00" ALINK=" #00FF00"

VLINK=" blue" >

Это мой первый HTML-документ!

< /BODY>

< /HTML>

3. Сохранить документ. Открыть при помощи доступного интер­нет-броузера. Внимательно изучить то, что появилось в окне про­смотра.

4. Изменить цвет фона на желтый. Для этого задать значение BGCOLOR=" #FFFF00".

5. Сохранить текстовый файл. Обновить отображаемый HTML- файл.

Дополнить существующий файл следующим фрагментом текста и изучить действие использованных тегов:

< BR> < ACRONYM TITLE=" Harry Potter and the Deathly Hallows" > Гарри Поттер < /ACRONYM> - Фраг­мент последнего романа Дж.Роулинг < BR>

< CITE> Чувство напряженного ожидания наполнило тёплый воздух шатра, гул голосов кое-где нару­шался взрывами хохота. < /CITE> < CODE> Мистер и миссис Уизли ходили по проходам, улыбались и приветствовали родственников. < /CODE> < EM> Мис­сис Уизли < /EM> была в мантии нежно-аметисто­вого цвета и такого же цвета шляпе. Секундой позже < B> Бил и Чарли< /B> встали перед шатром, < I> оба в праздничных робах с большими белыми розами, заколотыми в петлицах. < /I> < SMALL> Фред свистнул по-волчьи, < /SMALL> что вызвало < TT> всплеск хохота по залу< /TT>, но затем в шатре наступила тишина< U> и только тихая музыка исхо­дила из того, что выглядело как золотые надувные шары. < /U> < BR>

6. Сохранить текстовый файл. Обновить отображаемый HTML- файл.

7. Набрать в существующем файле следующий текст:

< P Align= Right>

Сжала руки под тёмной вуалью... < BR>

" Отчего ты сегодня бледна? " < BR>

-От того, что я терпкой печалью < BR>

Напоила его допьяна.< BR>

< CITE> Анна Ахматова< CITE> < BR> < BR> < /P>

< P Align=CENTER>

< FONT FACE=" Verdana", " Arial", " Helvetica" SIZE=+3 COLOR=red>

< b> Баллада о Любви < /b> < br>

Когда вода Всемирного потопа< br>

Вернулась вновь в границы берегов, < br>

Из пены уходящего потока< br>

На берег тихо выбралась Любовь < br>

-И растворилась в воздухе до срока, < br>

А срока было - сорок сороков... < br>

< I> Владимир Высоцкий< /I>

8. Подвести под текстом черту при помощи следующего тега:

< HR ALIGN=CENTER WIDTH=50% NOSHADE COLOR=Blue>

9. Используя теги SUB и SUP написать формулы

(a + b)2 = a2 + 2ab + b2;

cij = aij + bij

10. Выполнить самостоятельно следующее задание:

а) создать html-файл, в мета-описаниях которого фигурирует название дисциплины, университета, факультета и фамилии препо­давателя и студента;

б) задать название, состоящее из фамилии и имени;

в) средствами html добиться, чтобы внешний вид документа был максимально приближен к следующему:

 

НЕСКАЗАННОЕ, СИНЕЕ, НЕЖНОЕ...

 

Несказанное, синее, нежное...

Тих мой край после бурь, после гроз,

И душа моя - поле безбрежное –

Дышит запахом меда и роз.

Я утих. Годы сделали дело,

Но того, что прошло, не кляну.

Словно тройка коней оголтелая

Прокатилась во всю страну.

Сергей Есенин

Ход работы

1. Создать документ на основании текста программы, приведенного в теоретической части (пример 1).

2. Создать фреймовую структуру следующего вида:

ФРЕЙМ 1: Заголовок сайта
ФРЕЙМ 2: Список ссылок на фотографии студенческой группы. Фотографии открываются во ФРЕЙМЕ 3. ФРЕЙМ 3: В этом фрейме открываются фотографии по ссылкам из ФРЕЙМА 2.  
ФРЕЙМ 4: В этом фрейме открываются подписи к фотографиям, открываемым во ФРЕЙМЕ 3.

Размеры фреймов задать самостоятельно.


 

Приложение А
Названия цветов

Название Hex Red Green Blue
aliceblue #F0F8FF
antiquewhite #FAEBD7
aqua #00FFFF
aquamarine #7FFFD4
azure #F0FFFF
beige #F5F5DC
bisque #FFE4C4
black #000000
blanchedalmond #FFEBCD
blue #0000FF
blueviolet #8A2BE2
brown #A52A2A
burlywood #DE8887
cadetblue #5F9EA0
chocolate #D2691E
coral #FF7F50
cornflowerblue #6495ED
cornsilk #FFF8DC
crimson #DC143C
cyan #00FFFF
darkblue #00008B
darkcyan #008B8B
darkgoldenrod #B8860B
darkgray #A9A9A9
darkgreen #006400
darkkhaki #BDB76D
darkmagenta #8B008B
darkolivegreen #556B2F
darkorange #FF8C00
darkorchid #9932CC
darkred #8B0000
darksalmon #E9967A
darkseagreen #8FBC8F
darkslateblue #483D8B
darkslategray #2F4F4F
darkturquoise #00CED1
darkviolet #9400D3
deeppink #FF1493
deepskyblue #00BFFF
dimgray #696969
dodgerblue #1E90FF
firebrick #B22222
floralwhite #FFFAF0
forestgreen #228B22
fuchsia #FF00FF
gainsboro #DCDCDC
ghostwhite #F8F8FF
gold #FFD700
goldenrod #DAA520
gray #808080
green #008000
greenyellow #ADFF2F
honeydew #F0FFF0
hotpink #FF69B4
indianred #CD5C5C
indigo #4B0082
ivory #FFFFF0
khaki #F0E68C
lavender #E6E6FA
lavenderblush FFF0F5
lemonchiffon #FFFACD
lightblue #ADD8E6
lightcoral #F08080
lightcyan #E0FFFF
lightgoldenrodyellow #FAFAD2
lightgreen #90EE90
lightpink #FFB6C1
lightsalmon #FFA07A
lightseagreen #20B2AA
lightskyblue #87CEFA
lightslategray #778899
lightsteelblue #B0C4DE
lightyellow #FFFFE0
lime #00FF00
limegreen #32CD32
linen #FAF0F6
magenta #FF00FF
maroon #800000
mediumaquamarine #66CDAA
mediumblue #0000CD
mediumorchid #BA55D3
mediumpurple #9370DB
mediumseagreen #3CB371
mediumslateblue #7B68EE
mediumspringgreen #00FA9A
mediumturquoise #48D1CC
medium violetred #C71585
midnightblue #191970
mintcream #F5FFFA
mistyrose #FFE4E1
moccasin #FFE4B5
navajowhite #FFDEAD
navy #000080
oldlace #FDF5E6
olive #808000
olivedrab #6B8E23
orange #FFA500
orangered #FF4500
orchid #DA70D6
palegoldenrod #EEE8AA
palegreen #98FB98
paleturquoise #AFEEEE
palevioletred #DB7093
papayawhip #FFEFD5
peachpuff #FFDAB9
peru #CD853F
pink #FFC0CB
plum #DDA0DD
powderblue #B0E0E6
purple #800080
red #FF0000
rosybrown #BC8F8F
royalblue #4169E1
salmon #FA8072
sandybrown #F4A460
seagreen #2E2B57
seashell #FFE5EE
sienna #A0522D
silver #C0C0C0
skyblue #87CEEB
slateblue #6A5ACD
slategray #708090
snow #FFFAFA
springgreen #00FF7F
steelblue #4682B4
tan #D2B48C
teal #008080
thistle #D8BFD8
tomato #FF6347
turquoise #40E0D0
violet #EE82EE
wheat #F5DEB3
white #FFFFFF
whitesmoke #F5F5F5
yellow #FFFF00
yellowgreen #9ACD32

Приложение Б
Краткий справочник по тегам

Краткий справочник содержит описание тегов HTML. IE - Microsoft Inter­net Explorer, NC - Netscape Communicator. Число означает, с какой версии браузер поддерживает данный тег.

Тег Версия HTML NC IE Описание
A 1.0 3+ 3+ Ссылка
ADDRESS 2.0 3+ 3+ Информация об авторе
APPLET 3.2 3+ 3+ Java апплет
AREA 3.2 3+ 3+ Задание активной области для карты изобра­жения
B 2.0 3+ 3+ Жирный текст
BASE 2.0 3+ 3+ URL, относительно которого ведется адреса­ция ссылок
BASEFONT 3.2 3+ 3+ Задание шрифта, размера и цвета текста по умолчанию
BGSOUND - - 3+ Фоновая музыка
BIG 3.2 3+ 3+ Увеличивает размер шрифта
BLINK - 3+ - Мерцающий текст
BLOCKQUO TE 2.0 3+ 3+ Создание цитаты
BODY 2.0 3+ 3+ Тело документа
BR 2.0 3+ 3+ Перевод строки
BUTTON 4.0 6+ 4+ Кнопка
CAPTION 3.2 3+ 3+ Заголовок таблицы
CENTER 3.2 3+ 4+ Выравнивание элемента по центру окна брау­зера
CITE 2.0 3+ 3+ Используется для выделения цитат
CODE 2.0 3+ 3+ Обозначает фрагмент программного кода
COL 4.0 - 3+ Колонка таблицы
COLGROUP 4.0 - 3+ Служит для определения группой столбца таблицы
COMMENT - - 3+ Комментарий игнорируемый браузером
DD 2.0 3+ 3+ Описание списка определений
DEL 4.0 - 4+ Отмечает текст как удаленный
DFN 3.2 - 3+ Отмечает текстовый фрагмент как определе­ние
DIR 2.0 3+ 3+ Создание списка
DIV 3.2 3+ 3+ Контейнер для задания стиля блока, используется также для создания слоев
DL 2.0 3+ 3+ Создание списка определений
DT 2.0 3+ 3+ Задание списка определений
EM 2.0 3+ 3+ Выделение фрагмента текста
EMBED - 3+ 3+ Вставка внешнего объекта в HTML
FIELDSET 4.0 6+ 4+ Группировка элементов форм
FONT 3.2 3+ 3+ Изменение параметров шрифта
FORM 2.0 3+ 3+ Добавление формы
FRAME 4.0 3+ 3+ Определяет одиночный фрейм
FRAMESET 4.0 3+ 3+ Разбивает окно браузера на фреймы
H1 2.0 3+ 3+ Заголовок первого уровня
H2 2.0 3+ 3+ Заголовок второго уровня
H3 2.0 3+ 3+ Заголовок третьего уровня
H4 2.0 3+ 3+ Заголовок четвертого уровня
H5 2.0 3+ 3+ Заголовок пятого уровня
H6 2.0 3+ 3+ Заголовок шестого уровня
HEAD 2.0 3+ 3+ Блок для хранения служебной информации
HR 2.0 3+ 3+ Горизонтальная линия
HTML 2.0 3+ 3+ Указывает браузеру, что документ в формате HTML
I 2.0 3+ 3+ Курсивное начертание текста
IFRAME 4.0 - 3+ Плавающий фрейм
IMG 2.0 3+ 3+ Вставка изображения
INPUT 2.0 3+ 3+ Поле формы
INS 4.0 - 4+ Отмечает текст как вставку
ISINDEX 2.0 3+ 4+ Поиск по ключевым словам
KBD 2.0 3+ 3+ Отмечает текст как вводимый пользователем с клавиатуры
LABEL 4.0 6+ 4+ Название группы в форме
LAYER - 4+ - Создание слоя
LEGEND 4.0 6+ 4+ Создает рамку вокруг формы
LI 2.0 3+ 3+ Элемент списка
LINK 2.0 4+ 3+ Связь с другими документами
MAP 3.2 3+ 3+ Карта-изображение
MARQUEE - - 3+ Поле для перемещения текста
MENU 2.0 3+ 3+ Создание списка
META 2.0 3+ 3+ Метаинформация
MULTICOL - 3+ - Многоколоночный текст
NOBR - 3+ 3+ Запрет перевода строки
NOEMBED - 3+ - Альтернативный текст для встроенных объек­тов
NOFRAMES 4.0 3+ 3+ Альтернативное содержание для браузеров не поддерживающих фреймы
NOLAYER - 3+ - Альтернативное содержание для браузеров не поддерживающих слои
NOSCRIPT 4.0 3+ 3+ Альтернативное содержание для браузеров не поддерживающих скрипты
OBJECT 4.0 4+ 3+ Вставка внешнего объекта
OL 2.0 3+ 3+ Нумерованный список
OPTION 2.0 3+ 3+ Создание выпадающего списка
P 2.0 3+ 3+ Параграф
PARAM 3.2 3+ 3+ Задание значения параметру.
PLAINTEXT - 3+ 3+ Обычный текст
PRE 2.0 3+ 3+ Текст пишется как есть, включая все пробелы
Q 4.0 - 4+ Отмечает короткие цитаты в строке текста.
S 3.2 2+ 3+ Зачеркнутый текст
SAMP 2.0 - 3+ Отмечает текст как пример
SCRIPT 3.2 3+ 3+ Область скрипта
SELECT 2.0 3+ 3+ Элемент выпадающего списка
SMALL 3.2 3+ 3+ Уменьшает размер шрифта
SPAN 4.0 4+ 3+ Встроенный элемент для задания стиля фраг­мента
STRIKE 3.2 3+ 3+ Зачеркнутый текст
STRONG 2.0 3+ 3+ Выделение фрагментов текста
STYLE 3.2 4+ 3+ Указание стиля
SUB 3.2 3+ 3+ Нижний индекс
SUP 3.2 3+ 3+ Верхний индекс
TABLE 3.2 3+ 3+ Таблица
TBODY 4.0 - 4+ Тело таблицы
TD 3.2 3+ 3+ Ячейка таблицы
TEXT AREA 2.0 3+ 3+ Поле многострочного текста в форме
TFOOT 4.0 - 3+ Нижний колонтитул таблицы
TH 3.2 3+ 3+ Ячейка таблицы, которая является заголовком
THEAD 4.0 - 4+ Верхний колонтитул таблицы
TITLE 2.0 3+ 3+ Заголовок страницы
TR 3.2 3+ 3+ Строка таблицы
TT 2.0 3+ 3+ Моноширинный текст
U 3.2 3+ 3+ Подчеркнутый текст
UL 2.0 3+ 3+ Маркированный список
VAR 2.0 3+ 3+ Отмечает имена переменных программ

 

 


 

Разработка HTML-страниц

Лабораторный практикум

Часть 7

 


ОГЛАВЛЕНИЕ

ВВЕДЕНИЕ. 3

Лабораторная работа № 1. Создание простейшего HTML-файла. 4

Лабораторная работа № 2. «Списки и ссылки». 12

Лабораторная работа № 3. Графика в интернет-документах. 22

Лабораторная работа №4. Создание графического меню с использованием навигационных областей HTML. 28

Лабораторная работа № 5. Таблицы в интернет-документах. 30

Лабораторная работа № 6. Фреймы. 37

Приложение А Названия цветов. 44

Приложение Б Краткий справочник по тегам. 48

Список использованных источников. 51


ВВЕДЕНИЕ

 

Настоящее пособие предназначено для студентов и ориентировано на поддержку дисциплин “Информатика” и “Информационные системы и технологии”.

Лабораторный практикум – состоит из шести лабораторных работ, предусматривающих освоение основных возможностей по разработке HTML-страниц. Каждая лабораторная работа содержит перечень заданий для выполнения, учитывающих будущую специализацию студентов.

Каждая лабораторная работа способствует закреплению и углублению знаний, полученных студентами на лекционных занятиях.


Поделиться:



Последнее изменение этой страницы: 2017-05-11; Просмотров: 328; Нарушение авторского права страницы


lektsia.com 2007 - 2024 год. Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав! (0.122 с.)
Главная | Случайная страница | Обратная связь