Вставки графики, гиперссылок, таблиц и бегущих строк.




Лабораторные работы № 1-3 по дисциплине

«Информационные технологии»

 

Общее задание для лабораторных работ №1-3: разработать сайт в соответствии с выбранной Вами индивидуальной темой (собственная домашняя страница, сайт какой-либо вымышленной организации, небольшой интернет-магазин и т.д.).

Требования к сайту.

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

Страницы должны быть выполнены в одном стиле.

Для оформления фона предлагается использовать цвет фона или фоновый рисунок.

При оформлении страниц необходимо продемонстрировать умение размещать на страницах следующие объекты:

  • шрифты различных типов, размеров и начертаний;
  • заголовки;
  • списки: нумерованные и маркированные;
  • внутренние и внешние ссылки;
  • бегущую строку;
  • рисунки (импорт из файла);
  • таблицы;
  • фреймы.

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

Основы HTML

Порядок выполнения работы.

 

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

D:\Family\

2. В блокноте – notepad (start – programs – accessories – notepad или пуск – программы – стандартные – блокнот) вставить следующий текст:

 

<html>

<head>

<title>Моя страница </title>

</head>

<body>

Здравствуйте, это моя первая страница.

<br>

Добро пожаловать!

</body>

</html>

 

3. Сохранить документ, присвоив ему имя index.html

D:\ Family\index.html

Если вы сохраняете документ, через Файл -> Сохранить (File -> Save), то, естественно, что он сохраняется как *.txt. Надо сохранять ваш документ следующим образом:

- Файл -> Сохранить Как (File -> Save as)
- Дальше вводите имя своего документа, например: index.html (а не просто index; приписочка *.html должна быть обязательно).
- Если вы уже сохранили ваш документ, как *.html, то при внесении изменений в этот документ вы можете уже сохранять их через Файл -> Сохранить (File -> Save).

4. Открыть браузер, допустим, Internet Explorer (не закрывая блокнот), и в браузере открыть свой документ.

Файл - Открыть - кнопка Обзор - index.html
File – Open – Browse – index.html

При изменении index.html (в блокноте), для просмотра изменений браузере, надо не забывать нажимать в браузере кнопку ОБНОВИТЬ. Если изменений не видно, то это значит, что вы где-то что-то неправильно написали, или забыли сохранить документ.

 

5. При оформлении страниц необходимо продемонстрировать умение размещать на страницах следующие объекты:

  • шрифты различных типов, размеров и начертаний;
  • заголовки;
  • нумерованные и маркированные списки;
  • оформление страницы (фон или фоновое изображение).

 


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

 

HTML (HyperText Markup Language – язык разметки гипертекста) – язык создания Web-страниц.

HTML документ – это обычный текстовый файл, содержащий текстовую и иную информацию, которая должна быть отображена на Web-странице, а также набор команд (тэгов), управляющих отображением этой информации на странице. Этот документ может быть создан в любом текстовом редакторе, сохранен в файле с расширением htm или html, а затем просмотрен с помощью одного из доступных браузеров (чаще всего Internet Explorer или Netscape Navigator).

 

Web-браузеры используют тэги HTML для того, чтобы понять, какой внешний вид должна иметь Web-страница. С помощью тэгов можно задавать цвета, заголовки, таблицы, изображения и многое другое. Все тэги HTML помещаются в угловые скобки < и >. Код любой Web-страницы должен начинаться тэгом <HTML> и заканчиваться тэгом </HTML> (закрывающий тэг, текст которого начинается косой чертой).

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

 

Web-страница обычно начинается с заголовка, который устанавливается с помощью тэга <HEAD>. Заголовок, как правило, содержит только заглавие страницы, которое устанавливается с помощью тэга <TITLE>. Этот заголовок не отображается в тексте Web-страницы. Он отображается в виде заголовка окна браузера.

Тело Web-страницы создается с помощью тэга <BODY>. В этом тэге можно использовать ряд ключевых слов, называемых атрибутами, для установки различных параметров. Использование атрибутов в различных браузерах различно. Далее будем ориентироваться на Internet Explorer.

Атрибуты тэга <BODY>

Атрибут Значение Описание
ALIGN CENTER | LEFT | RIGHT выравнивание информации
ALINK цвет цвет активных гиперссылок
BACKGROUND строка имя файла фонового изображения
BGCOLOR цвет цвет фона документа
BGPROPERTIES FIXED не прокручивать изображение фона
BOTTOMMARGIN целое число ширина нижнего поля
CLASS строка имя класса для элемента
ID идентификатор уникальный идентификатор элемента
LANG строка информация о языке
LANGUAGE JAVASCRIPT | VBSCRIPT  
LEFTMATGIN целое число ширина левого поля в пикселах
LINK цвет цвет гиперссылок
RIGHTMARGIN целое число ширина правого поля
SCROLL YES | NO  
STYLE строка  
TEXT цвет цвет текста
TITLE строка заголовок, используется как подсказка
TOPMARGIN целое число ширина верхнего поля
VLINK цвет цвет гиперссылок, которые уже посещались
событие сценарий  

 

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

Пример.

<BODY TEXT=ffff00 LINK=ff0000 ALINK=ffffff VLINK=ffff00>

 

Чтобы назначить изображение, которое должно быть использовано в качестве фона Web-страницы, необходимо задать значение атрибута BACKGROUND, либо в новом, либо в существующем тэге <BODY>.

Например,

<BODY BACKGROUND= “gif/back.gif”>

 

Видимые заголовки в теле Web-страницы создаются с помощью тэгов <H1>, <H2>, … <H6>, и соответствуют шести уровням заголовков. Создаваемый заголовок можно отцентрировать с помощью тэга <CENTER>.

 

Для вывода текста на страницу его следует просто поместить в тело страницы. текст будет выводиться цветом и шрифтом, заданным тэгом <BODY>. Текст можно оформить в виде отдельного параграфа с помощью тэга <P>. Текст автоматически выровняется по ширине страницы.

 

Тэг <BR> вставляет символ перевода строки. Для данного тэга не нужен закрывающий тэг.

 

Горизонтальную линию можно добавить с помощью тэга <HR>. Его атрибуты

ALIGN – выравнивание линии (LEFT | CENTER | RIGHT);

WIDTH – длина линии в пикселах или в процентах;

SIZE – высота линии в пикселах;

COLOR – цвет линии.

 

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

 

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

 

Элементы логического форматирования:

<CITE> (цитата) служит для выделения цитаты. Этот элемент можно также использовать для выделения названия книги или статьи (выделение курсивом);

<CODE> (код) предназначен для небольшого количества компьютерного кода (моноширинный шрифт);

<EM> (акцент) используется для выделения фрагмента текста, имеющего большое значение (выделение курсивом);

<KBD> (клавиатура) указывает, что пользователь должен дать ответ, используя клавиатуру (моноширинный шрифт);

<SAMP> (образец) используется для выделения знаков, на которых автор хочет акцентировать внимание (моноширинный шрифт);

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

<VAR> (переменная) служит для выделения имени переменной (курсив);

<DFN> (определение) используется для выделения второстепенного определения в списке определений (курсив).

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

 

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

 

 

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

<B> полужирный;

<I> курсив;

<TT> телетайп (шрифт печатной машинки);

<U> подчеркивание;

<STRIKE> зачеркивание

<BIG> крупный;

<SMALL> мелкий;

<SUB> нижний индекс;

<SUP> верхний индекс.

 

Для изменения внешнего вида текста, следует использовать тэг <FONT>. Его атрибуты:

Атрибут Значение Описание
CLASS строка имя класса для элемента
COLOR цвет цвет текста
FACE строка название шрифта
ID идентификатор уникальный идентификатор элемента
LANG строка информация о языке
LANGUAGE JAVASCRIPT | VBSCRIPT  
SIZE строка размер текста
STYLE строка стиль текста
TITLE строка заголовок, используется как подсказка
событие сценарий  

 

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

<DIV ALIGN=CENTER>

<DIV STYLE=”color: blue”>

 

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

Список в HTML состоит из контейнера, идентифицирующего список, и стандартного тэга элементов списка (в HTML все элементы списка используют один тэг - <LI>). Для задания заголовка списков используется тэг <LH>.

 

Для создания упорядоченных списков используется контейнер <OL>. В нем могут использоваться следующие атрибуты:

TYPE – выбор способа нумерация пунктов:

А – прописные буквы;

а – строчные буквы;

I – прописные римские цифры;

i – строчные римские цифры;

1 – арабские числа

START – установка начального значения пунктов.

 

Для создания неупорядоченных (маркированных) списков используется контейнер <UL>. Для изменения маркеров используется атрибут TYPE. Он может принимать значения disc, square и circle.

Как тэг <OL>, так и тэг <UL> поддерживают атрибут COMPACT, который указывает броузеру, что список следует отображать в более компактном виде.

 

Список определений является особым типом списков в HTML. Его формат состоит из определяемого термина и определения, размещенного с отступом. Для этих целей используется контейнер <DL>. В этом контейнере тэгом <DT> отмечается термин, а тэгом <DD> - определение. Оба этих тэга относятся к открывающим. Закрывающие тэги не нужны.

 

Пример комбинированного списка:

<HTML>

<HEAD>

<TITLE>Пример комбинированного списка</TITLE>

</HEAD>

<BODY>

<OL TYPE=I>

<LH><EM>Планеты Солнечной системы:</EM><BR>

<LI> Меркурий

<UL TYPE=circle>

<LI> Римский бог торговли, путешествий и воровства

<LI> Описание

<DL>

<DT> <B>Меркурий</B>

<DD> Это самая маденькая и самая близкая к Солнцу планета с

сидерическим периодом обращения вокруг Солнца в 88.0

дней и средним расстоянием до Солнца 58,3 миллиона километров

(36,2 миллиона миль). Средний радиус составляет

2414 километров (1500 миль).

</DL>

</UL>

<LI> Венера

<UL TYPE=circle>

<LI> Римская богиня любви и красоты

<LI> Описание

<DL>

<DT><B>Венера</B>

<DD> Вторая планета с радиусом 6052 километров (3760 миль),

массой, составляющей 0,815 массы Земли, сидерическим периодом

обращения вокруг Солнца 224,7 дней и средним расстоянием до

Солнца 108 миллионов километров (672 миллионов миль).

</DL>

</UL>

</OL>

</BODY>

</HTML>

 

 

Для вставки специальных символов (знаков) используются соответствующие им заменители. Часть из них приведена в таблице ниже:

Заменитель Символы
&cent, &pound, &yen ¢, £, ¥
&copy, &reg ©, ®
&deg º
&frac14, &frac12, &frac34 ¼, ½, ¾
&divide ÷
&pi π
&le, &ge <, >
&amp &
&spades, &clubs, &hearts, &diams ♠, ♣, ♥, ♦

 


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

Вставки графики, гиперссылок, таблиц и бегущих строк.

 

Изображение внедряется в Web-страницу с помощью тэга <IMG>.

Атрибут Значение Описание
ALIGN ABSBOTTOM | ABSMIDDLE | BASELINE | BOTTOM | LEFT | MIDDLE | RIGHT | TEXTTOP | TOP расположение рисунка и выравнивание текста относительно рисунка
ALT строка краткое описание
BORDER целое число толщина границы
CLASS строка имя класса для элемента
DATAFLD строка  
DATASRC строка  
DYNSRC строка  
HEIGHT целое число высота изображения
HSPACE целое число ширина свободного пространства вокруг изображения
ID идентификатор уникальный идентификатор элемента
LANG строка информация о языке
LANGUAGE JAVASCRIPT | VBSCRIPT  
LOOP строка  
LOWSRC строка  
NAME строка  
SRC строка источник изображения
STYLE строка  
TITLE строка заголовок, используется как подсказка
USEMAP строка  
VSPACE целое число высота пространства вокруг изображения
WIDTH целое число ширина изображения
событие сценарий  

Пример. <IMG WIDTH=236 HEIGHT=118 SRC=”gif/yourgif.gif”> </IMG>

 

Тэг <A> предназначен для создания гиперссылок как на другие страницы, так и на метки переходов внутри страницы. Он имеет следующие атрибуты:

Атрибут Значение Описание
ACCESKEY строка клавиша доступа
CLASS строка имя класса для элемента
DATAFLD строка  
DATASRC строка  
HREF строка адрес гиперссылки
ID идентификатор уникальный идентификатор элемента
LANG строка информация о языке
LANGUAGE JAVASCRIPT | VBSCRIPT  
METHODS строка  
NAME строка  
REL строка  
REV строка  
STYLE строка  
TARGET имя | _blank | _parent | _self | _top  
TITLE строка заголовок, используется как подсказка
URN строка  
событие сценарий  

 

Примеры.

Внешняя ссылка:

<A HREF=”https://www.microsoft.com” >Microsoft</A>

 

Внутренняя ссылка:

<A NAME=MIDDLE>Средняя часть Web-страницы</A>

<A HREF=”#MIDDLE”>Перейти к середине</A>

или

<H2 id=JumpHere>Вы можете перейти прямо к этому заголовку! </H2>

<A HREF=JumpHere>Щелкните здесь, чтобы перейти прямо к тому заголовку! </A>

 

Внешняя ссылка с помощью графического элемента:

<A HREF=”https://rampages.onramp.net/~jerry”><IMG SRC=”photo.gif”></A>

 

Таблицы в HTML формируются с помощью контейнера <TABLE>. Заголовок таблицы определяется тегом <CAPTION>. Каждая строка таблицы помещена в тэг <TR>. Ячейка определяется тегами <TD></TD>. В отдельной ячейке можно разместить отдельные вложенные таблицы или изображение. Ячейка, содержащая заголовок, определяется тэгом <TH>.

Атрибут BORDER определяет ширину рамки в пикселах для тэга <TABLE>.

К каждому из тэгов <TR>, <TH>, <TD> <CAPTION> могут быть применены следующие атрибуты:

ALIGN – выравнивание по горизонтали;

VALIGN – выравнивание по вертикали (top, bottom, middle, baseline);

BORDERCOLOR – цвет границы;

BGCOLOR – цвет фона.

 

WIDTH – ширина таблицы или ячейки в пикселах или процентах;

HEIGHT – высота таблицы или ячейки в пикселах или процентах;

BORDER – толщина рамки вокруг таблицы;

CELLPADDING, CELLSPACING – размещение в отдельных ячейках таблицы или во всей таблице дополнительного свободного пространства.

 

Для объединения двух и более смежных ячеек в строке используется атрибут ROWSPAN.

Для объединения двух и более смежных ячеек в столбце используется атрибут COLSPAN.

 

Бегущие строки создаются с помощью тэга:

 

<marquee>содержимое бегущей строки</marquee>

 


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

Фреймы в HTML 4.0

 

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

Фреймы идеально подходят для оформления следующих элементов:

Оглавление. Если поместить оглавление в виде вертикального столбца, то пользователи смогут обратиться к нему в любой момент, и им не нужно будет постоянно щелкать на кнопке возврата к предыдущей странице.

Неподвижные элементы интерфейса.

Формы и результаты. Можно создать форму в одном фрейме, а в другом отобразить результаты запроса.

Чтобы получить страницу, содержащую фреймы, нужно сначала создать несколько документов: во0первых, те, которые будут помещаться в фреймы, а во-вторых, документ, определяющий общую структуру страницы. Его обычно называют документом фреймовой структуры, или просто структурным документом.

Для создания структурного документа используется контейнер FRAMESET. в Этом дескрипторе используются всего атрибута: ROWS и COLS. Оба они принимают числовые значения (в пикселах или процентах). Значение * говорит о том, что конкретная строка или столбец буду занимать всю остальную часть страницы. Создавая фреймы, необходимо решить, как будет разделена страница: по вертикали (с помощью атрибута COLS) или по горизонтали (атрибут ROWS). В отдельном дескрипторе FRAMESET может использоваться только один из атрибутов – ROWS или COLS. Это означает, что фреймовая структура может состоять или только из строк, или только из столбцов. Чтобы создать строки внутри столбцов (или наоборот), потребуются вложенные дескрипторы FRAMESET. Например, с помощью следующего кода:

<FRAMESET COLS=”25%, *”>

<FRAMESET ROWS=”50%, 50%”>

</FRAMESET>

<FRAMESET ROWS=”10%, 90%”>

</FRAMESET>

</FRAMESET>

будет создана следующая структура:

 
 

Сначала страница была разделена на два столбца, причем левый занимает 25%, а правый – все остальное пространство, т.е. 75%. Затем первый столбец был разделен на две строки, каждая из которых занимает по 50%. Второй столбец также разделен на две строки, первая из которых занимает 10%, а вторая – 90%.

 

С помощью дескриптора <FRAME>, помещенного в контейнер FRAMESET, можно определить, что именно должно отображаться в конкретном фрейме. Атрибут SRC этого дескриптора используется для указания адреса страницы, которая должна быть загружена в фрейм.

Например:

<FRAMESET ROWS=”20%, 80%”>

<FRAME SRC=”menu.html”>

<FRAME SRC=”help.html”>

</FRAMESET>

Каждый дескриптор FRAME создает отдельное окно фрейма. Эти окна соответствуют определениям строк или столбцов в дескрипторе FRAMESET, но на экране никакие разделительные линии не появятся до тех пор, пока каждое окно не будет определено с помощью дескриптора <FRAME>.

Настройка фреймов.

Помимо SRC, в дескрипторе FRAME могут использоваться атрибуты NAME,, SCROLLING, NORESIZE. Все они, за исключением первого, оказывают влияние на внешний вид фрейма.

Атрибуты MARGINWIDTH и MARGINHEIGHT используются для определения вертикальных и горизонтальных полей фрейма.

Атрибут SCROLLING может принимать значения yes, no и auto. Он позволяет определить, присутствуют ли в окне фрейма полосы прокрутки. По умолчанию принимается значение auto, и в большинстве случаев это лучшее решение.

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

На внешний вид фрейма влияют также атрибуты FRAMEBORDER, BORDER, BORDERCOLOR.

Первый атрибут можно использовать либо в дескрипторе FRAMESET, либо в FRAME. Он может принимать значения yes (по умолчанию) или no (означает отсутствие границ).

С помощью второго атрибута можно определить ширину рамки в пикселах.

Третий атрибут определяет цвет рамки.

 

Чтобы контролировать процесс загрузки фреймов, нужно присвоить окнам фреймов имена. Для этого предназначен атрибут NAME, который используются в дескрипторе FRAME:

<Frame SRC='источник' NAME='имя окна'>

 

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

<A HREF='новый источник' TARGET='имя окна'> текст ссылки </A>.

 

 



Поделиться:




Поиск по сайту

©2015-2024 poisk-ru.ru
Все права принадлежать их авторам. Данный сайт не претендует на авторства, а предоставляет бесплатное использование.
Дата создания страницы: 2016-08-20 Нарушение авторских прав и Нарушение персональных данных


Поиск по сайту: