ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 18.04.2024
Просмотров: 8
Скачиваний: 0
Лабораторна робота №4.
Тема: Створення списків та гіперпосилань у HTML-документі.
Мета роботи:
-
навчитися зв’язувати веб-сторінки за допомогою гіперпосилань, додавати гіперпосилання на фрагмент тексту на поточній сторінці;
-
вміти створювати списки різтих типів на мові HTML;
-
навчитися виконувати вставку малюнків в HTML-документ та використовувати їх як гіперпосилання.|
-
Виконати оформлення списків:
-
Створити новий документ 3_name|.htm, зберегти його в тому ж робочому каталозі жорсткого диска, що і документи з попередньої лабораторної роботи.
-
Ввести текст:
<HTML|>
<НЕАD|> <TІТLE|> Прізвище </TITLE>
</HEAD>
<BODY|>
Вітаю Вас на моїй третій web-сторінці|!
</BODY>
</HTML>
-
Доповнити текст документа (між тегами| <BODY|>.</BODY>) наступним текстом: Я знаю як оформляти: Шрифти, Заголовки, Абзаци
-
Оформити три останні рядки як список нумерований. Для цього використовувати наступну конструкцію тегів|:
-
Поміняти оформлення списку на список маркерований. Використовувати теги| <UL|>, </UL>
-
Створити «змішаний» список:
Я знаю як оформляти:
-
Шрифти
-
Розмір
-
Колір
-
Гарнітуру
-
Індекси
-
Заголовки
-
Від 1-го до 6-го рівня
-
Абзаци
-
Вирівнювання
-
Розрив рядків усередині абзацу
-
З використанням переформатування.
-
Створення гіперпосилань і закладок.
-
У документі 3_name|.html закріпити гіперпосилання за наступними елементами списку:
За словом Шрифт – гіперпосилання на документ 1_name|.html.
За словом Заголовки – на документ 1_name|.html.
За словом Абзаци - на документ 2_name|.html.
-
Встановити кольори для гіперпосилань за власним бажанням.
-
Створити закладку в документі 1_name|.html перед фразою «Машинобудівний коледж СумДУ». Дати їй ім'я «Osvita|».
-
Змінити перше гіперпосилання (слово Шрифт) так, щоб вона указувала на закладку «Osvita|» в документі 1_name|.html.
-
Створити закладку на початку поточного документа 3_name|.html. Привласнити їй ім'я «Hello|».
-
Змінити друге гіперпосилання (на слові Заголовки), визначивши для неї перехід в початок поточного документа на встановлену закладку «Hello|».
-
Створити закладку в документі 2_name|.html перед фрагментом тексту. Привласнити їй ім'я «Text|».
-
Встановити на слово переформатування гіперпосилання на закладку «Text|».
-
Перевірити правильність переходів по всіх гіперпосиланнях.
-
Закріпити гіперпосилання за графічними файлами:
-
Скопіювати в особисту папку три графічні файли (наприклад, Arrows1|.wmf, Arrows2|.wmf, Arrows3|.wmf).
Переконатися, що створені раніше документи 1_name|.html, 2_name|.html і 3_name|.html також знаходяться у вашому каталозі на жорсткому диску.
-
Вставка малюнків в документ.
-
Відкрити в Блокноті документ 2_name|.html.
-
Вставити малюнок Arrows1|.wmf у початок документа 2_name|.html. Для вставки використовувати тег| IMG| з параметрами WIDTH| і HEIGHT| для установки розмірів малюнка 50 пікселів по горизонталі і по вертикалі.
-
Зберегти документ під ім'ям 4_name|.html.
-
Проглянути в браузері| отриманий результат.
-
Ввести в тег| малюнка параметр ALIGN| для вирівнювання малюнка по правому краю. Проглянути результат в браузері|.
-
Вставити малюнок Arrows2|.wmf у кінець документа 4_name|.html перед, підібрати тип вирівнювання малюнка на свій розсуд. Встановити розмір малюнка 100 пікселів по горизонталі і по вертикалі. За допомогою параметра ALT| створити спливаючу підказку «Малюнок 2», що з'являється при наведенні курсора миші на малюнок.
-
Проглянути в браузері| отриманий результат.
-
Відредагувати тег| вставки малюнка Arrows1|.wmf, ввести в тег| атрибут ALT| для відображення тексту підказки «Повернутися». Проглянути в браузері| як реагує малюнок на наведення курсора миші.
-
Закріпити за малюнком Arrows1|.wmf у документі 4_name|.html гіперпосилання на документ 3_name|.html. Виконати перехід між документами.
-
Пред'явити результат викладачеві та оформити звіт.
-
Знати відповіді на контрольні запитання:
-
Що назвається гіперпосиланням?
-
Який елемент мови HTML відповідає за створення гіперпосилань?
-
Які атрибути можна додати до створення гіперпосилань?
-
За допомогою яких атрибутів можна призначити колір посилання у різних станах?
-
Що таке мітка (або закладка)?
-
В яких випадках використовують мітки?
-
Як додати зображення на веб-сторінку?
Основні теги| вставки малюнків, закладок і гіперпосилань
Вставка зображень |
||||||||
Вставка графічного файлу |
<IMG| SRC=”файл|” WIDTH=”ширина|” HEIGHT=”висота|” > |
Приклад: <IMG| SRC=”grafica|.gif” WIDTH=”550|” HEIGHT=”240|” ALIGN=|” right|” ALT=”Графічний| файл”>
|
||||||
Вирівнювання картинки щодо тексту |
<IMG| SRC=”файл|” ALIGN=”left|right|top|bottom|”> |
|||||||
Виведення тексту спливаючої підказки при наведенні курсора миші на малюнок |
<IMG| SRC=”файл|” ALT=”текст|”> |
|||||||
Вставка посилань |
||||||||
Посилання на іншу сторінку |
<A HREF=|” сторінка”> текст </A> |
<A HREF=”str2|.htm”> Ссилка1</a> |
||||||
Посилання на закладку в іншому документі |
<A HREF=|” сторінка # ім'я закладки”|> текст</A> |
<A HREF=|” index|.htm #met1”|> На головну сторінку </A>” |
||||||
Посилання на закладку в тому ж документі |
<A HREF=”#ім'я закладки ”> текст </A> |
<A HREF=|” #metka1|”> Ссилка2</a> |
||||||
Визначити закладку |
<A NAME=”ім’я закладки”>текст</A> |
<A NAME=”metka1”></A> |
||||||
Колір фону, тексту і посилань |
||||||||
Фонова картинка |
<BODY| BACKGROUND=”файл| малюнка”> |
<BODY| BACKGROUND| =”grafica.gif” TEXT=”black|” (чорний) LINK=”#FF0000|” (червоний) VLINK=”#FFFF00|” (жовтий) ALINK=”#FFFFFF|” (білий) </BODY> |
||||||
Колір фону |
<BODY| BGCOLOR=”#$$$$$$|”> |
|||||||
Колір тексту |
<BODY| TEXT=”#$$$$$$|”> |
|||||||
Колір посилання |
<BODY| LINK=”#$$$$$$|”> |
|||||||
Колір пройденого посилання |
<BODY| VLINK=”#$$$$$$|”> |
|||||||
Колір активного посилання |
<BODY| ALINK=”#$$$$$$|”> |
|||||||
|
|
|
|
|
|