Лабораторна робота 5 Webдокументи

Работа добавлена на сайт samzan.net:

Лабораторна робота № 5

Web-документи. Мережа Internet

Мета: Уміти створювати прості web-сторінки та надавати їм певного вигляду, використовуючи для цього основні команди мови HTML.

Теоретичні відомості

Web-сторінки створюються за допомогою мови розмітки HTML (yperText Markup Language — Мова розмітки гіпертексту). Документ HTML оброблюється браузером та відтворюється на екрані у звичному для людини вигляді. HTML разом із каскадними таблицями стилів та вбудованими скриптами — це три основні технології побудови веб-сторінок.

HTML впроваджує засоби для:

* створення структурованого документу шляхом позначення структурного складу тексту: заголовки, абзаци, списки, таблиці, цитати та інше;

* отримання інформації із Всесвітньої мережі через гіперпосилання;

* створення інтерактивних форм;

* включення зображень, звуку, відео, та інших об'єктів до тексту.

Документ HTML 4.01 складається з трьох частин:

Декларація типу документу (англ. Document type declaration, Doctype), на початку документа, в якій визначається тип документа (DTD).
Шапка документу (знаходиться в межах елементу head), в якій записано загальні технічні відомості або додаткова інформація про документ, яка не відтворюється безпосередньо в браузері;
Тіло документу (може знаходитися в елементах body або frameset), в якому міститься основна інформація документа.

Нижче наведено приклад загальної структури HTML-документу:

<!doctype HTML public "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Мій перший HTML-документ</title>

</head>

<body>

Hello world!

</body>

</html>

Елементи візуальної розмітки застосовуються задля опису візуальних ефектів тексту, не зазначаючи при цьому функції тексту свого контексту. Остання чинна специфікація HTML 4.01 визначає більшість з цих елементів такими, що не рекомендується застосовувати у розмітці. Наприклад:

Фрагмент HTML-розмітки документа

Відтворення в браузері

<font size="5">Давньогрецькі боги</font>

<br />

<b>Посейдон</b> — володар світових вод, Океану, в латинян йому відповідав <i>Нептун</i>, у слов'ян —

<i>Цар Моря, Цар Морський, Водяник</i>.

Основні теги

Тег означення початок та кінець html-файлу

<HTML>web-сторінка</HTML>

Пара тегів які описують заголовок документа

<HEAD>текст</HEAD>

<TITLE>текст</TITLE> - заголовок Windows-вікна.

Введення коментарів

або у середині парного тегу

<COMMENT> текст-коментар </COMMENT>

Введення тексту на сторінку

<BODY BACKGROUND="шлях/адреса файлу зображення для тла"

BGCOLOR = "колір тла" TEXT = "колір символів" >

Текст

</BODY>

Теги форматування символів тексту

<В> текст </В>	Товстий шрифт тексту
<І> текст </I>	Шрифт- курсив
<U> текст </U>	Підкреслений шрифт
<SUB> текст </SUB>	Нижній індекс.
<SUP> текст </SUP>	Верхній індекс
<BIG> текст </BIG>	ВЕЛИКИЙ шрифт
<SMALL>текст</SMALL>	Малий шрифт

Створення абзаців

<P Align=left|right|center|justify> <В> текст </В> </P>

Означає початок нового абзацу.

Наступне після тегу <Р> речення починатиметься з нового, вирівняного до лівого краю, абзацу без відступу. Між абзацами буде порожній рядок

<BR>Наступний за цим тегом текст буде наведено у новому рядку без пропуску рядка

Заголовки

<Н№>Заголовок</Н№> - де № - це число яке змінюється від 1 до 6, визначає розмір символів Заголовка (за зменшенням). Починається з абзацу та вирівнюється до лівого краю.

Теги вирівнювання

<CENTER>текст по центру</CENTER>

<LEFT>текст до лівого краю (за умовчанням)</LEFT>

<RIGHT>текст до правого краю</RIGHT>

Рисування горизонтальної лінії

Шрифти

текст

</FONT>

розміри символів шрифту можуть бути від 1 до 7. (Розмір 3 вважається стандартним, він орієнтовно відповідає 10 пунктам).

Тег з відформатованим текстом

<PRE>текст відображатиметься у браузері так як записаний у коді (перехід на рядки, пропуски тощо)</PRE>

Скорочення

<ACRONYM TITLE=”текст розшифровки”> скорочення</ACRONYM>

Основні кольори

black - чорний	#000000	green - зелений	#008000
navy - темно-синій	#000080	teal - бірюзовий	#008080
silver - сірий	#C0C0C0	lime - яскраво-зелений	#C0FF00
blue - синій	#0000FF	aqua - блакитний	#00FFFF
maroon - малиновий	#800000	olive - темно-зелений	#808000
purple - бузковий	#800080	gray - темно-сірий	#808080
red - червоний	#FF0000	yellow - жовтий	#FFFF00
fushsia - рожевий	#FF00FF	while - білий	#FFFFFF

Службові та недруковані символи

&lt	<
&gt	>
&nbsp	Нерозривний пробіл
&amp	&
&laquo &raquo &quot	« » “
&ndash	-
&mdash	--- подовжине тире
&pi	p

Створення списків

Маркований список:

<LH> заголовок списку</LН>

<LI> елемент списка

<LI> елемент списка . . .

</UL>

Нумерований список:

<LH>заголовок списку</LH>

<LI [TYPE="значення параметра"]>елемент списку

<LI>елемент списку . . .

</OL>

де значення параметра TYPE задають зображення нумерації списку:

"і" - римськими малими (і, іі, ііі, iv, ...),

"І" - римськими великими (І, II, III, IV, ...) цифрами,

"а" - латинськими малими (a, b, c, d, ...),

"А" - латинськими великими (А, В, С, ...) літерами.

Список визначень

<LH>3aголовок</LH>

<DL>

<DT> термін

<DD> визначення 1

<DD> визначення 2 ...

</DL>

Створення таблиць

<TABLE параметри>
[<ТС> Заголовок таблиці </ТС>]
<TR><ТН>текст заголовок у клітинці</ТН> <ТD>текст у клітинці</ТD> … </TR>

<TR><ТН>текст заголовок у клітинці</ТН> <ТD>текст у клітинці</ТD> … </TR>

………………….

</TABLE>

Порожню клітинку описують, як <ТD></ТD> або <ТD> </ТD> .

Деякі параметри <TABLE>

BORDERCOLOR = "колір рамки"
BGCOLOR= "колір тла"
BORDER=товщина рамки
ROWSPAN=n COLSPAN=n	n – кількість об’єднаних послідовних клітинок у рядку (у стовпці) у відповідних тегах <ТН> чи <TD>

Графічні об'єкти

<IMG SRC="адpeca графічного файлу. bmp або jpg, або gif "

ALT = "альтернативний текст"

ALIGN="вирівнювання "

WIDTH=ширина у пікселях HEIGHT=висота BORDER=товщина рамки в пікселях>

Гіперпосилання

Гіперпосилання на файл.

<А HREF = "адреса файлу"

NАМЕ="#позначка"

TAGET={_blank|_self}> <!-- вікно для тексту – у новому або у тому самому-- >

текст-гіперпосилання </А> .

Гіперпосилання на деяке графічне зображення.

<А HREF = " адреса файлу "> <IMG SRC = " адреса графічного файлу "> </A>

Гіперпосилання в межах сторінки.

Визначається місце позначки у файлі

<А NАМЕ="#ім’я позначки"></А>

та гіперпосилання на створену позначку

<A HREF="#ім’я позначки"> текст гіперпосилання </А>

Змінити колір гіперпосилання – у тегу <BODY>:

LINK = "колір"	Колір гіперпосилання
VLINK="кoлip"	Змінює колір гіперпосилання після першого його використання
ALINK="колір"	Змінює колір активізованого гіперпосилання

Динамічні ефекти

<MARQUEE HEIGHT = висота смуги в пікселях

BGCOLOR = "колір тла смуги"

LOOP= число кількості проходів>

Текст, що рухається

</MARQUEE>

Навігаційна карта

Опис самого зображення карти має обов’язковий параметр:

<IMG USEMAP = "#назва карти">,

Карту у цілому описується

<МАР NAME ="#назва карти">

...

</МАР>

Параметри тегу <AREA>:

HREF = "адреса ресурсу, який викликають"

ALT = "альтернативний текст-підказка"

TAGET=”{_blank|_self}” <!-- вікно для тексту – у новому або у тому самому-- >

SHAPE=”{rect|circ|poly|default}“ <!--тип форми області (прямокутником за замовчуванням, колом, багатокутником, все зображення ).

COORDS = "список координат області"

Створення сайтів

Для поділу вікна браузера на фрейми

...

</FRAMESET>

Розміри областей задають: відносно у % або фіксовано - у пікселях та роз’єднуються ,.

Параметри <FRAME >

SRC =Url стартового html-файлу

NAME=назва фрейму - значенням якого є назва фрейму, цю назву придумує користувач, вона використовуватиметься далі як значення параметра TARGET тегу <А>.

Параметри для тегів FRAMESET та FRAME

FRAMEBORDER={0|1} <!--Задає наявність рамок фреймів (0 за умовчанням) або no|yes

BORDER =ширину межі між фреймами у пікселях

BORDERCOLOR=колір межи (за замовчуванням – сірий)

Тільки для FRAME

MARGINHIGHT=величину відступів зверху у пікселях

MARGINWIDTH=величину відступів від бокових

SCROLLING =”{no|yes|auto}” Задає наявність чи відсутність смуг прокручування у вікні

NORESIZE (Забороняє змінювати розміри фрейму у вікні браузера (без значень))

Форми

Тег для опису форми

<FORM ACTION=”url оброблювача даних”

METHOD={Get|Post} <!--спосіб передачі даних по посиланню або за значенням

ENCTYPE={application/x-www-form-urlencoded або text/plain} - тип кодування для обробки програмою або для передачі по електронної пошті

[TARGET=значення]>

елементи форми

</FORM>

Поле введення: тексту, пороля, вибір файла, прихований текст:

<INPUT TYPE={Text | Password | File | Hidden }

NAME=ім’я елемента

VALUE=текст за замовчуванням

SIZE=кількість видимих символів рядка

MAXLENGTH=максимальна кількість символів рядка>

Кнопки: посилання даних, кнопки-картинки, відміни:

<INPUT TYPE={Submit | Image | Reset}

VALUE=назва на кнопці>

Список варіантів

………………..

Список перемикачів:

………………..

Список, що випадає:

<SELECT NAME=ім’я списку

SIZE=висота видимої частини списку (у рядках)

MULTIPLE (без значень) > - вибір декількох пунктів

<OPTION VALUE= «значення, що передається»

SELECTED (без значень)> за замовчуванням

</SELECT>

Текстове поле:

<TEXTAREA NAME=ім’я

ROWS=висота (у рядках)

COLS =довжина (у символах)>

Текст </TEXTAREA>.

Послідовність виконання роботи

Створіть окрему папку під лабораторну роботу
Відкрийте редактор NotePad або Блокнот
Створіть за допомогою текстового редактора html-файл з особистими даними про себе

Текст повинен мати заголовок, складатися з декількох абзаців, мати коментарі. \

Задайте назву вікна web-сторінки.

<HEAD>

<TITLE>Особисті данні</TITLE>

</HEAD>

<BODY>

Я Петренко Іван Іванович. Народився 12 квітня 199...р.

у м. Львів.

В 201... році закінчив школу №... м. Івано-Франківськ.

Моя адреса: індекс, місто, вулиця, будинок, квартира.

</BODY>

</HTML>

Збережіть його під назвою filel1.htm у власній папці.
Відкрийте файл file1.htm у браузері Internet Explorer.

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

Відредагуйте сторінку. Для того щоб відредагувати файл, треба спочатку відкрити програму NotePad або Блокнот, а потім файл і кожного разу після редагування треба зберігати файл.

Задайте колір фона та тексту. Змінюйте відповідні параметри тегу BODY - BGCOLOR і TEXT (назви кольорів: red, green, white, yellow, blue, #ffaa55 тощо).

Виконайте форматування тексту у файлі filel.htm. Застосуйте у тексті різні накреслення літер (жирний, курсив, підкреслений).

Заголовок тексту відцентруйте та відокремити від іншого тексту порожнім рядком.

Кожний абзац розташуйте з нового рядка.

Укінці всього тексту проведіть лінію.

Створіть ще один html-файл з розповіддю про своє навчання.

Проекспериментуйте з тегами форматування тексту. Використайте якнайбільше тегів форматування і надайте своїй сторінці якнайліпшого вигляду.

Збережіть файл із назвою file2.htm.
Перегляньте цей файл за допомогою браузера.
Додайте до тексту список своїх улюблених предметів у вигляді нумерованого списку.
Збережіть файл на диску і перегляньте його у браузері.
Виокремте список у тексті іншим шрифтом.

Робота з таблицями

Нижче створить таблицю з даними про свій рейтинг.

Таблиця буде складатися з 3 стовпців та 4 рядків.

Задайте заголовок таблиці “Результати рейтингу”.

Задайте заголовки стовпців та рядків.

Заповніть таблицю оцінками.

Приклад (створення таблиці з трьох стовпців та трьох рядків)

<TR>

<TD> Предмет</TD> <TD> Рейтинговий бал </TD> <TD> Оцінка </TD>

</TR>

<TR>

<TD> Інформатика та програмування </TD> <TD>99</TD> <TD>5</TD>

</TR>

<TR>

<TD>Іноземна мова</TD> <TD>99</TD> <TD>5</TD>

</TR>

</TABLE>

Змінить вигляд таблиці.
Задайте товщину рамки таблиці, задайте кольори рамки та фона таблиці.
Вирівнюйте текст у клітинках таблиці.
У заголовках – по центру, в інших клітинках – на ваш смак.
Проекспериментуйте з параметрами тегу TABLE. Об'єднайте деякі дві клітинки таблиці в одну. Удоскональте свою сторінку якнайліпше.
Створіть ще одну таблицю.
Відкрийте свою web-сторінку file2.htm та створіть таблицю для розміщення фотографії та тексту.
Таблиця повинна складатися з одного рядка та двох стовпців: у першому - фото, у другому – текст, наприклад. (Графічні файли повинні мати розширення bmp, jpg, gif).
Відредагуйте графічне зображення..
Встановіть розміри фотографії, виділіть її рамкою.
Зробіть фотографію як гіперпосиланням до файлу file1.htm з особистими даними.
Змініть таблицю.

Зробіть її без рамки. Вставте у свій файл гіперпосилання на html-файл або на адресу в Інтернеті.

Наприклад,

<a href="http://ief.nung.edu.ua">сайт Інженерно-екологічного інституту </a>

Застосуйте гіперпосилання для переходу на початок сторінки.
В кінці сторінки розташуйте рядок з гіперпосиланням:
Застосуйте до заголовку динамічний ефект.
У файлі file2.htm зробіть рядок Ця сторінка створена Прізвище І.П. рухомим у смузі будь-якого кольору.

Робота з фреймами

Створіть сайт про себе. Складіть основний файл, який запускатиме сайт та розподіляти його на фрейми.

Сайт поділить на два вертикальних фрейми, лівий (вузький) та правий. Лівий фрейм матиме зміст сайту у вигляді гіперпосилань для навігації по сайту, правий – як початкова сторінка та для перегляду сторінок сайту.

Збережіть основний файл під назвою frame1.html.

Складіть файл для опису лівого фрейму.

Він повинен містити: заголовок, наприклад, Сайт Прізвище І.П. та 4 гіперпосилання на файли, які мають містити інформацію про вас особисто, вашу родину, друзів, місце навчання, ваші захоплення, успіхи у навчанні, адресу тощо (можна скористатися файлами, які були створені у лабораторних роботах № 1, 2 ).

Забезпечте відображення сторінок у правому фреймі.

Збережіть файл під назвою leftframe.html.
Складіть файл для опису правого фрейму. Він має вигляд початковою сторінки сайту, наприклад, такого змісту: Запрошуємо на сайт Прізвище І.П.
Збережіть його під назвою rightframe.html.
Розташуйте інформацію у фреймах як найкраще, форматуйте текст, задайте необхідні параметри.

Задайте колір тла фреймам. Відкрийте почергово файли leftframe.html та rightframe.html .

Наприклад, жовтий колір тла у лівому фреймі та зелений — у правому.

Заберіть межу між фреймами.

Задайте смуги прокручування лише для правого фрейму.

Скопіюйте основний файл під назвою frame2.html.

Створіть початкову сторінку більш цікавою. Виконайте відповідні зміни у файлі.

Поділіть правий фрейм на два горизонтальних фрейми. У вузькому верхньому фреймі розташуйте особисту емблему з деякого графічного файлу або фотографію. Як це зробили?

У нижньому фреймі організуйте перегляд сторінок.

Збережіть зміни у файлі frame2.html.
Удоскональте сайт, щоб він виглядав як найліпше. Перегляньте його у браузері.
Створіть рисунок для графічної навігаційної панелі за допомогою графічного редактора Paint.

Підберіть у бібліотеці, що є на комп'ютері рисунок, який може бути основою навігаційної карти.

Рисунок модифікуйте за допомогою графічного редактора, наприклад, створіть текстові написи на ньому. Розташуйте елементи для гіперпосилань та уточніть координати гарячих областей.

Збережіть рисунок як файл з розширенням ris.bmp.

Запишіть html-файл для навігаційної карти. Як описати рисунок як навігаційну карту?

Задайте відповідні розміри карти. Опишіть гарячі області карти. Зробіть їх як коло, прямокутник та трикутник. У якому тезі робиться опис? Який тег та параметри для цього використовується?

Збережіть під назвою karta.html.. Виконайте його. Проекспериментуйте з картою
Скопіюйте основний файл під назвою frame3.html.
У лівому фреймі для попереднього сайту розташуйте графічну навігаційну карту.

Змініть основний файл так щоб замість файлу leftframe.html використовувався файл karta.html.. Збережіть файл.

Забезпечте відображення сторінок у правому фреймі.

Який параметр використовується для цього у тезі <AREA>?

Контрольні питання

Що таке web-документ?
Для чого призначена програма-браузер?
Що таке web-вyзoл (web-сайт)?
Яка структура простого web-документа?
Для чого призначена мова HTML?
Що таке тег і які є теги?
Які параметри може мати тег BODY?
Який тег позначає початок нового абзацу?
Які теги позначають товстий, курсивний і підкреслений шрифти?
Які теги призначені для вирівнювання елементів на сторінці?
Яке призначення тегу FONT, параметри тегу FONT?
Які є типи списків?
Як створити ненумерований список?
Як створити нумерований список?
Як створити список означень?
Яке призначення тегу TABLE, параметри тегу TABLE?
Які теги формують у таблиці рядки, клітинки-заголовки і звичайні клітинки?
Як у таблиці об'єднати декілька клітинок в одну?
Який параметр використовують для вирівнювання елементів?
Яка особливість пари тегів <PRE>...</PRE>?
Як вставити графічне зображення у web-сторінку?
Які параметри може мати тег IMG?
За допомогою якого тегу вставляють гіперпосилання?
Яке призначення параметрів LINK, VLINK, ALINK?
Як деяке графічне зображення зробити гіперпосиланням?
Які є види посилань у межах одної web-сторінки?
Що таке якоря?
Як запустити звук одночасно з відкриванням сторінки?
Як створити динамічний ефект рухомого тексту?
Які ви знаєте параметри рухомого тексту?
Що таке фрейми?
Яке призначення основного html-файлу?
Які параметри може мати тег <FRAMESET>?
Які параметри може мати тег <FRAME>?
Як створюються складні конфігурації фреймів?
Яке призначення параметра TARGET?
Яке призначення тегу-контейнера NOFRAME?
Що таке навігаційна карта?
Що таке гаряча область?
Які форми можуть мати гарячі області?

1. Організація приймання товару в аптеці
2. Будова, функції та методи дослідження мітохондрій
3. реферату- Історія виникнення і розвитку макроекономічної наукиРозділ- Макроекономіка Історія виникнення і
4. декабристы[1] Ответить на этот вопрос и легко и трудно- легко потому что почти все источники декабризма изве
5. реферату- Сучасне вивчення природиРозділ- Екологія Сучасне вивчення природи План
6. Исповедь на заданную тему
7. тема знаний умений и навыков сама по себе а набор ключевых компетентностей в интеллектуальной гражданскоп
8. С обладает рядом неоспоримых преимуществ благодаря которым эти столы можно с уверенностью назвать самыми
9. Пермский государственный университет
10. О федеральном бюджете на 2011 год и на плановый период 2012 и 2013 годов
11. Место Президента РФ в системе государственных органов
12. Статья публикуется здесь в том первоначальном виде в каком была подана в редакцию журнала
13. Лабораторная работа 11 решение системы уравнений Инвертирующий сумматор Инвертирующий сумматор с
14. Об обеспечении санитарного и эпидемического благополучия населения от 24 февраля 1994 г
15. Тема- Биполярные транзисторы
16. реферат дисертації на здобуття наукового ступеня кандидата медичних наук Київ 2005 Дисер
17. Wht types of prevention do you know I know three types of prevention
18. Теогония Происхождение богов
19. МЕЖДУ ИНСТИНКТОМ И РАЗУМОМ Глава 2
20. Этический смысл Посланий Ал Павла I в нэ

Материалы собраны группой SamZan и находятся в свободном доступе