Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
Лабораторна робота № 5
Web-документи. Мережа Internet
Мета: Уміти створювати прості web-сторінки та надавати їм певного вигляду, використовуючи для цього основні команди мови HTML.
Теоретичні відомості
Web-сторінки створюються за допомогою мови розмітки HTML (yperText Markup Language — Мова розмітки гіпертексту). Документ HTML оброблюється браузером та відтворюється на екрані у звичному для людини вигляді. HTML разом із каскадними таблицями стилів та вбудованими скриптами — це три основні технології побудови веб-сторінок.
HTML впроваджує засоби для:
* створення структурованого документу шляхом позначення структурного складу тексту: заголовки, абзаци, списки, таблиці, цитати та інше;
* отримання інформації із Всесвітньої мережі через гіперпосилання;
* створення інтерактивних форм;
* включення зображень, звуку, відео, та інших об'єктів до тексту.
Документ HTML 4.01 складається з трьох частин:
Нижче наведено приклад загальної структури 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>
Рисування горизонтальної лінії
<HR WIDTH =”довжина у пікселях” SIZE=”товщина лінії” COLOR="колір лінії">
Шрифти
<FONT FACE = "назва шрифту" SIZE = розмір шрифту COLOR = "колір">
текст
</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 |
Службові та недруковані символи
|
< |
< |
|
> |
> |
|
  |
Нерозривний пробіл |
|
& |
& |
|
« » " |
« » “ |
|
&ndash |
- |
|
&mdash |
--- подовжине тире |
|
&pi |
p |
Створення списків
Маркований список:
<LH> заголовок списку</LН>
<UL [TYPE={disc|circle|square} ]>
<LI> елемент списка
<LI> елемент списка . . .
</UL>
Нумерований список:
<LH>заголовок списку</LH>
<OL TYPE="значення параметра" [START={0|1}]>
<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 параметри> <!--Для опису окремих зон зображення -->
...
</МАР>
Па раметри тегу <AREA>:
HREF = "адреса ресурсу, який викликають"
ALT = "альтернативний текст-підказка"
TAGET=”{_blank|_self}” <!-- вікно для тексту – у новому або у тому самому-- >
SHAPE=”{rect|circ|poly|default}“ <!--тип форми області (прямокутником за замовчуванням, колом, багатокутником, все зображення ).
COORDS = "список координат області"
Створення сайтів
Для поділу вікна браузера на фрейми
<FRAMESET {COLS|ROWS}=”розмір лівої обл.,розмір правої обл.,...”>
<FRAME параметри>
<FRAME параметри>
...
</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=назва на кнопці>
Список варіантів
<INPUT TYPE=checkbox NAME=значення1 [CHECKED]>
<INPUT TYPE=checkbox NAME=значення2 >
………………..
<INPUT TYPE=checkbox NAME=значенняN>
Список перемикачів:
<INPUT TYPE=radio NAME=значення1 [CHECKED]>
<INPUT TYPE=radio NAME=значення2>
………………..
<INPUT TYPE=radio NAME=значенняN>
Список, що випадає:
<SELECT NAME=ім’я списку
SIZE=висота видимої частини списку (у рядках)
MULTIPLE (без значень) > - вибір декількох пунктів
<OPTION VALUE= «значення, що передається»
SELECTED (без значень)> за замовчуванням
<OPTION параметриN>
</SELECT>
Текстове поле:
<TEXTAREA NAME=ім’я
ROWS=висота (у рядках)
COLS =довжина (у символах)>
Текст </TEXTAREA>.
Текст повинен мати заголовок, складатися з декількох абзаців, мати коментарі. \
Задайте назву вікна web-сторінки.
<HTML> <!--Це файл filel.htm -->
<HEAD>
<TITLE>Особисті данні</TITLE>
</HEAD>
<BODY>
Я Петренко Іван Іванович. Народився 12 квітня 199...р.
у м. Львів.
В 201... році закінчив школу №... м. Івано-Франківськ.
Моя адреса: індекс, місто, вулиця, будинок, квартира.
</BODY>
</HTML>
Для цього відкрийте свою робочу папку та двічі клацніть мишею на назві файлу.
Задайте колір фона та тексту. Змінюйте відповідні параметри тегу BODY - BGCOLOR і TEXT (назви кольорів: red, green, white, yellow, blue, #ffaa55 тощо).
Заголовок тексту відцентруйте та відокремити від іншого тексту порожнім рядком.
Кожний абзац розташуйте з нового рядка.
Укінці всього тексту проведіть лінію.
Проекспериментуйте з тегами форматування тексту. Використайте якнайбільше тегів форматування і надайте своїй сторінці якнайліпшого вигляду.
Робота з таблицями
Таблиця буде складатися з 3 стовпців та 4 рядків.
Задайте заголовок таблиці “Результати рейтингу”.
Задайте заголовки стовпців та рядків.
Заповніть таблицю оцінками.
Приклад (створення таблиці з трьох стовпців та трьох рядків)
<TABLE BORDER> <!--таблиця -->
<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>
Зробіть її без рамки. Вставте у свій файл гіперпосилання на html-файл або на адресу в Інтернеті.
Наприклад,
<a href="http://ief.nung.edu.ua">сайт Інженерно-екологічного інституту </a>
Робота з фреймами
Сайт поділить на два вертикальних фрейми, лівий (вузький) та правий. Лівий фрейм матиме зміст сайту у вигляді гіперпосилань для навігації по сайту, правий – як початкова сторінка та для перегляду сторінок сайту.
Збережіть основний файл під назвою frame1.html.
Він повинен містити: заголовок, наприклад, Сайт Прізвище І.П. та 4 гіперпосилання на файли, які мають містити інформа цію про вас особисто, вашу родину, друзів, місце навчання, ваші захоплення, успіхи у навчанні, адресу тощо (можна скористатися файлами, які були створені у лабораторних роботах № 1, 2 ).
Забезпечте відображення сторінок у правому фреймі.
Задайте колір тла фреймам. Відкрийте почергово файли leftframe.html та rightframe.html .
Наприклад, жовтий колір тла у лівому фреймі та зелений — у правому.
Заберіть межу між фреймами.
Задайте смуги прокручування лише для правого фрейму.
Скопіюйте основний файл під назвою frame2.html.
Поділіть правий фрейм на два горизонтальних фрейми. У вузькому верхньому фреймі розташуйте особисту емб лему з деякого графічного файлу або фотографію. Як це зробили?
У нижньому фреймі організуйте перегляд сторінок.
Підберіть у бібліотеці, що є на комп'ютері рисунок, який може бути основою навігаційної карти.
Рисунок модифікуйте за допомогою графічного редактора, наприклад, створіть текстові написи на ньому. Розташуйте елементи для гіперпосилань та уточніть координати гарячих областей.
Збережіть рисунок як файл з розширенням ris.bmp.
Задайте відповідні розміри карти. Опишіть гарячі області карти. Зробіть їх як коло, прямокутник та трикутник. У якому тезі робиться опис? Який тег та параметри для цього використовується?
Змініть основний файл так щоб замість файлу leftframe.html використовувався файл karta.html.. Збережіть файл.
Який параметр використовується для цього у тезі <AREA>?
Контрольні питання