Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
абораторная работа № 14
|
[1] Оглавление [2] Часть 1. Таблица и изображение на web-странице. [2.1] Таблица на веб-странице [2.2] Изображения на веб-странице [3] Тема 2. Гиперссылки и реализация гиперссылок на HTML: [4] Часть 3. Фреймы на веб-странице [5] Таблица для выполнения заданий: |
Для создания таблицы в документе используют следующие теги:
|
тег |
значение |
атрибуты |
что задаёт |
|
|
<table> |
Задание таблицы |
border |
Ширина боковой рамки или рамки вокруг изображения |
|
|
<tr> |
Задание строк |
cellspacing |
Ширина фронтальной рамки |
|
|
<td> |
Задание ячеек |
bordercolor |
Цвет границы таблицы |
|
|
<img> |
Вставка изображения |
rowspan |
Объединение ячеек (ряды) |
|
|
align:выравнивание текста по: top – верхней части изображения middle – средней части изобр. bottom – нижнему краю left – показывает изображение слева right – показывает изображение справа |
colspan |
Объединение ячеек (столбцы) |
||
|
height |
Высота изображения в пикселях |
|||
|
width |
Ширина изображения в пикселях |
|||
Ширина таблицы может быть задана в пикселях (width=450) или в процентах от ширины страницы (width=40%). Если размер таблицы должен меняться при изменении ширины окна, устанавливайте процентное отношение, если не должен меняться – устанавливайте значение в пикселях.
При построении таблицы создаётся впечатление её выпуклости из-за двойной рамки – первая – фронтальная, вторая – боковая.
Ячейки в таблице могут быть объединены с помощью атрибутов rowspan=n, где n – это количество строк, выделяемых под ячейку или colspan=k, где k – количество столбцов, выделенных под ячейку.
Изображения для веб-странице можно создавать и редактировать в различных графических редакторах, они также могут быть получены с помощью цифрового фотоаппарата, сканера, сети Интернет.
Наиболее предпочтительны для изображений графические форматы .gif, .jpg и .png, которые позволяют ускорить процесс загрузки.
Важно отметить, что все изображения, которые мы видим на веб-странице, хранятся в отдельных файлах, а на самой странице имеются лишь ссылки на соответствующие файлы.
Для размещения изображений на веб-странице предназначен тег <img>. В простейшем случае он имеет вид <img src="ИмяФайла">. В общем случае он может содержать атрибуты, которые задают способ отображения следующей конструкции:
<img src="ИмяФайла" border="Ширина рамки вокруг изображения" align="Выравнивание текста относительно изображения" width="Ширина изображения" height="Высота изображения" >
Пример размещения рисунка на сайте: <img src="pes.jpg">
Для задания атрибутов рисунка (ширины и высоты), нужно написать ниже предложенный тег с соответствующими атрибутами:
<img src="pes.gif" width="100" height="93">
Задание на урок:
Построить таблицу из двух строк и столбцов с фиксированной шириной 250 пикселей, шириной боковой рамки 2 пикселя и ячейками зелёного цвета.
<table border="2" width="250" bgcolor="blue">
Примечание 1: красный – red, фиолетовый – violet, салатовый – lime, серый – silver.
Сохраните и просмотрите результат.
Примечание 2: для того, чтобы изображение отображалось на Вашей страничке, его нужно сохранить в ту же папку, где сохранён сам Ваш документ или указывать полный адрес документа с расширением.
Примечание 3: Для того, чтобы узнать, какое расширение документа, нужно поднести указатель мыши к документу, прочитать расширение во всплывающей подсказке и вписать его после документа с точкой перед названием.
Результат:
Примечание:
Вместо рисунка можно выводить текст, в случае, если рисунок не найден при помощи тега: <img alt="Текст надписи">
<img hspace= «n» >-задаёт ширину в пикселах пустого поля справа и слева от изображения.
<img vspace= «n» >-задаёт ширину в пикселах пустого поля сверху и снизу от изображения.
Атрибут align определяет положение картинки по отношению к соседним элементам документа.
<img align = “top” >-по верхнему краю
<img align = “middle” >-по центу
<img align = “bottom” >-по нижнему краю
<img align = “left” >-по левому краю
<img align = “right” >-по правому краю
Картинку можно использовать в качестве «обоев». То есть она будет занимать всё окно браузера и на ней можно располагать текст так, как вам удобно. Для этого используется специальный атрибут тега <body>:
<body background = “имя файла с картинкой-фоном” > (например, “bg01.jpg”)
Примечание: рисунки так же могут быть вставлены в таблицы.
Часть текста, название, участок изображения, имеющие ссылки на другой текст внутри этого же документа или другой документ в сети Интернет, называются гипертекстовой связью (Hypertext link) или гипертекстовой ссылкой.
Изображение или участок текста, слово, с которым связаны гиперсвязи, называется якорем (anchor), линком (link) или ссылкой.
На экране якорь выделяется каким-либо образом на фоне остального текста – подчёркиванием и особым цветом, который устанавливается по умолчанию.
Чтобы превратить обычный документ в гипертекстовый, в него нужно вставить гипертекстовые связи. Для этого используют парный тег <A href= “… ”>…</A>.
Атрибут href определяет ULR-адрес ссылки, на которую будет совершён переход, если щелкнуть мышью по объекту, находящемуся между тегами.
Если ссылка производится на документ, находящийся в той же папке, что и исходный документ, достаточно указать только имя файла:
<A href= ” U2.html”>Устройство компьютера</A>
Для гиперссылки можно создать всплывающую подсказку к тексту ссылки с помощью атрибута title= “текст”: <A href= ” U2.html” title= “Блоки ПК”>Устройство компьютера</A>.
Якорем гиперссылки может быть не только текст, но и рисунок:
<A href= ” new.htm”><IMG src= “ris.gif”></A>.
Для перехода внутри одного документа используются два тега <A>. Первая команда с атрибутом href является источником перехода (якорем), вторая с атрибутом name – приёмником.
Пример:
<A href= “#метка ”>текст</A> - задание перехода по метке.
<A name= “метка ”>Метка</A> - сюда браузер переходит по ссылке.
На экране ничего не отображается.
Обычно браузер устанавливает цветовое оформление ссылок по умолчанию. Можно изменить эти настройки специальными атрибутами тега <BODY>:
Link – цвет неактивных ссылок;
Vlink – цвет посещённых ссылок;
Alink – цвет активной ссылки.
<BODY link= “green” alink= “lime” vlink= “gray” >
Выполните задания:
Задание 1.
Создайте 2 HTML-документа, отличающихся цветом фона. Сохраните их под именем STR1.html и STR2.html соответственно. Создайте гиперссылки с первого документа на другой и обратно. Покажите учителю.
Задание 2.
Документ START.html. В качестве фона выберите рисунок «Штукатурка.bmp». Фон задаётся атрибутом, аналогично <body background = "штукатурка.bmp" >. Заголовок задайте «Мой зоопарк» - синим цветом. Задайте горизонтальную линию произвольной ширины.
Леопард - типичный крупный представитель обширного семейства кошачьих. Обыкновенная окраска леопарда - различной интенсивности желтый фон, густо усеянный черными пятнами. Изредка встречаются черные леопарды. Их чаще всего называют черной пантерой.
Жизненный цикл медведей вызывает удивление во многих отношениях. Например, новорожденный детеныш черного медведя размером с белку, но когда он достигнет зрелости, его вес увеличится в пятьсот раз.
А Вы знаете, что африканский слон может весить 7 тонн?
Фрейм (FRAME – кадр или рамка) – мощный механизм представления информации на веб-страницах. С помощью фреймов экран разделяется на несколько областей, в каждой из которых отображается содержимое отдельной страницы.
Фреймы часто используются для организации навигации по сайту. В один фрейм загружается список гиперссылок. При щелчке по любой из них содержимое новой страницы отображается в другом фрейме.
Так как документ с фреймами состоит из нескольких документов, для создания фреймовой структуры тег <Body> не используется. Вместо него необходим тег <Frameset> и парный ему тег </Frameset>.
Этот тег имеет следующие атрибуты:
|
атрибут |
пример |
|
|
cols |
Количество фреймов-столбцов. Значением этого атрибута является список размеров каждого из фреймов. |
<Frameset cols= “20%, 60%, 20%”> … </Frameset> (задаёт три вертикальных фрейма соответствующих размеров) Примечание: размер последнего фрейма можно задавать с помощью символа *, означающего оставшуюся часть экрана. Размеры можно задавать не только в процентах, но и в пикселах. |
|
rows |
Количество фреймов-строк. |
<Frameset rows= “10%, *”> … </Frameset> (задаёт 2 горизонтальных фрейма, причём первый занимает 10 % экрана, второй – всю оставшуюся часть) |
|
Примечание: Если указать два атрибута одновременно, каждый горизонтальный фрейм будет разбит на указанное число вертикальных фреймов. |
||
|
border |
Ширина рамки между фреймами. |
При border= “0” границы будут отсутствовать. |
|
bordercolor |
Цвет рамки |
Для описания каждого из фреймов используется тег <Frame> с атрибутом src= “имя файла”.
Атрибут scrolling определяет наличие линеек прокрутки содержимого фрейма. (yes – линейки прокрутки отображаются всегда, no – не отображаются, auto – появляются в случае необходимости).
Например:
<HTML>
<FrameSet rows= “50%, *” cols= “35%, 65%”>
<Frame src= “a.html”>
<Frame src= “b.html”>
<Frame src= “c.html”>
<Frame src= “d.html”>
</FrameSet>
</HTML>
Задание 1.
Создайте два HTML-документа. Сохраните их как файлы A.html и B.html. Эти страницы будут отличаться названиями и цветом фона.
Создайте базовую страницу, на которой будут отображаться фреймы, и сохраните её в файле с именем baza.html:
Задание 2.
Создайте базовую страницу bazaG.html, на которой будут отображаться горизонтальные фреймы:
Задание 3.
Создайте базовую страницу bazaB1.html, на которой будут отображаться как горизонтальные, так и вертикальные фреймы одновременно:
Задание 4.
Создайте базовую страницу bazaCol.html, на которой будет отображена фреймовая структура с вложенными фреймами.
Возможны 2 варианта создания:
1-й вариант – создание двух html-документов:
|
Документ basaCol.html |
Документ basa1.html |
|
<html> <head> <title>фреймы</title> </head> <Frameset rows= "20%, *" > <Frame src= "a.html"> <Frame src= "basa1.html"> </Frameset> </html> |
<html> <Frameset cols= "30%, *" > <Frame src= "c.html"> <Frame src= "d.html"> </Frameset> </html> |
2-й вариант – создание одного документа:
<html>
<head>
<title>фреймы</title>
</head>
<Frameset rows= "20%, *" >
<Frame src= "a.html">
<Frameset cols= "30%, *" >
<Frame src= "c.html">
<Frame src= "d.html">
</Frameset>
</Frameset>
</html>
|
Присутствие |
|
|
Часть 1. Таблица и рисунки на веб-странице |
|
|
Часть 2. Гиперссылки на веб-странице |
|
|
Часть 3. Фреймы на веб-странице |
Примечание: обратите внимание, что ВСЕ задания нужно выполнить на практике, а законспектировать себе в конспект нужно только как создаются фреймы.
11
Фронтальная рамка
оковая
рамка