Практична робота

Практична робота №26

        Тема. Створення Web-документів, що містять теги форматування символів, гіперпосилання та графіку.
        Мета. Навчитись створювати Web-документи, форматувати текст, що вміщений до них, створювати гіперпосилання та поміщати до них графіку.
        Обладнання: комп'ютери IBM PC, інструкція.

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

HTML - hypertext markup language - мова розмітки гіпертексту. Найбільш популярна зараз версія 4.0
Основними елементами HTML є теги (tags), за допомогою яких проводиться розмітка тексту. Вони служать для представлення спеціальних атрибутів та інструкцій по форматуванню, які в браузерах перетворюються на готові фрагменти веб-сторінки, готової для перегляду користувачем.
Кожен тег має такий формат:
<tag>Bміст цього Teгa</tag> ,
де <tag> - це відкриваючий тег, a </tag> - закриваючий.
Існують також теги, які можна використовувати без закриваючих тегів.
Щоб краще зрозуміти, як працюють теги, наведемо таку аналогію: якщо ми описуємо форму якогось предмета, то можемо сказати, що він круглої форми, чи кубічної, чи пірамідальної. Точно так само ми можемо сказати, що якийсь елемент в документі знаходиться зліва, справа чи по центру. Саме це форматування і відбувається за допомогою тегів.
HTML- документ має 3 основні області.
Найвищий порядок у документі має тег <HTML>, для якого цей документ є підлеглим. Наступними по старшинству є області <HEAD> (заголовок) та <BODY> (тіло документа).
Метатеги починаються із ключового слова meta, їхні дії розрізняються за використаними атрибутами.
Атрибут name специфікує інформація про сторінку (самоназва документа).
Атрибут http-equiv - задає інформацію заголовка.
Атрибут content служить для опису атрибутів name та http-equiv.
Зрозуміло, що сучасна веб-сторінка не може обходитись без графічних зображень, як у області оформлення, так і в області фактичної інформації. Для веб-дизайну використовується З основні графічні формати: .gif, .jpeg, .png. Для вставки зображень використовують тег <img scr>.
Шляхом до певного об'єкта будемо називати його точне місце розміщення. Існують такі типи шляхів: абсолютний, відносний, коренезалежний та документозалежний шляхи.
З'язок між двома об'єктами ми назвемо посиланням, застосувавши яке на першому об'єкті, ми можемо перейти до зв'язаного з ним, але не навпаки. Наприклад:
<а href="main.html" > головна сторінка </а>
Розберемо це посилання. Тег <а> - (anchor - якір) - містить в собі інформацію, куди користувач має перейти, натиснувши на це посилання. Атрибут href містить в собі точне місцезнаходження адреси посилання. Посилання повинне закінчуватись закриваючим тегом </а>.
Ото ж на веб-сторінці, в результаті виконання даного рядка буде видно повідомлення "головна сторінка", при клікові на якому браузер відкриє файл main.html.
Тег <а href> можна використовувати для посилання на текстові, графічні, відео та звукові файли, архіви, електронні поштові адреси та адреси сайтів, JavaScript-сценарії.
Для довідки див. Короткий словник тегів HTML, який розміщено нижче.

Завдання 1.

Створити "каркас" Web-сторінки і встановити такі початкові параметри:
o Назва документа: Сторінка ХХХХХХХХХХХ, де - прізвище виконавця.
o Включити до заголовку такі метатеги:
o<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <meta пате="моя сторінка" content="nepnia пробна сторінка ХХХХХХХХХХХ "> <meta name="keywords" content="комп'ютер, навчання, знання"> <meta name="description" сопіепІ="Вчимось будувати web-сторінки">
o Встановити колір фону сторінки білий, а колір тексту - чорний.
o Записати створену сторінку під іменем proba.htm на диск А:

Завдання 2.

Набрати до документу такий текст та відформатувати його за вказівками, поданими у зьому.
Цей текст вирівняний по лівому краю
текст+4
текст+3
текст+2
текст+1
текст+0
текст-1
текст-2
Цей текст вирівняний по центру

текст НІ
текст Н2
текст НЗ
текст Н4
текст Н5
текст Н6

Цей текст вирівняний по правому краю
Напівжирний текст
Похилий текст (курсив) Підкреслений текст

Додаткове завдання:

Малий (тег small)
Нормальний текст
Великий (тег big)
Перекреслений
Перекреслений (теги Strike і S)
H,SO4 AX3+BX2+CX+D=0
Щоб отримати вираз Н2О, пишуть: H2O
< теги Sup і Sub)

Завдання 3.

Вставити до документа графічне зображення з іменем img.jpg. Встановити для нього
вирівнювання по центру та-розміри 100x100. Виявити недоліки зображення у браузері та записати висновки до зошита з практичних робіт.

Завдання 4.

Змінити розмір зображення на пропорційне, зменшивши його пропорційно в 2 рази.

Завдання 5.

Створити ще одну порожню Web-сторінку з іменем probal.htm та записати її на диск А:

Завдання 6.

Встановити для графічного об'єкта img.jpg, що знаходиться в документі proba.htm, гіперпосилання, яке відкриває документ probal.htm.

Завдання 7.

Створити нижче графічного зображення посилання на такий E-mail: read@.write.com.ua з надписом "Моя пошта"

Порядок виконання роботи:

1. Ввімкнути комп'ютер.
2. Дочекатись повного завантаження Windows.
3. Запустити редактор, в якому буде створюватись Web-документ.
4. Виконати завдання №1.
5. Виконати завдання №2.
6. Виконати завдання №3.
7. Виконати завдання №4.
8. Виконати завдання №5.
9. Виконати завдання №6.
10. Виконати завдання №7.
11. Записати висновки до зошита з практичних робіт.
12. Закрити всі відкриті вікна.
13. Вимкнути комп'ютер.

Домашнє завдання:

1. Підготуватись до практичної роботи № 27. Тема "Створення Web-документів, що містять теги оформлення списків та таблиць".
    1.1. Переписати до зошита з практичних робіт інструкцію до роботи № 27.
    1.2. Повторити основні теги HTML.
    1.3. Повторити створення списків та таблиць у HTML.

Запитання до захисту практичної роботи:

1. Що таке HTML?
2. Які теги, що входять до заголовку документа, ви знаєте?
3. Що таке метатеги?
4. Які теги визначають тіло HTML-документа?
5. Які теги використовуються для форматування тексту?
6. За допомогою яких тегів ми поміщаємо у документ графічне зображення?
7. Що таке гіперпосилання?

Зауваження для вчителя:
1. Для виконання цієї роботи необхідно підготувати невелике за розміром графічне зображення, зберегти його у форматі .jpg (img.jpg) та переписати на диски учнів до початку виконання практичної роботи. Бажано більше за 100x100 та яке не є квадратом. А також сповістити розміри цього зображення (у пікселах) учням.
2. Виконання завдань, що описані в практичній роботі, можна спрощувати, виконуючи у текстовому редакторі Word, після чого імпортувати у вигляді Web-сторіно або ускладнювати, редагуючи "голий" HTML-код у будь-якому текстовому редакторі, наприклад, у "Блокноті".

Короткий словник тегів HTML.

<а href="інший_локумент.html"</a> - посилання
target=_blank - відкриває посилання в новому вікні.
name="anchorl" - ім'я закладки.
<агеа> - визначає геометричні області усередині карти і посилання, зв'язані з кожною
областю.
shape="rect"" (circle, poly) - тип області (прямокутник, коло, багатокутник)
coords="xl,yl,..." - координати, кількість залежить від типу області
аlt="опис" - опис, підказка
href= "document.html" - посилання
 - жирний текст <big></big> - великий текст
<body></body> - обов'язковий тег
<body text="#ccOOOO"> - задає колір тексту всього документа
<body bgcolor="#000000"> - задає колір тла документа
<body background="KapTHHKa.jpg"> - задає фонову картинку
<body Iink="#ff9999"> - задає колір посилання '
<body alink="#ff9999"> - задає колір активного (натиснутого) посилання
<body vlink="#ff9999"> - задає колір відвіданого посилання
<body topmargin="0"> - визначає ширину верхніх і нижніх полів документа для IE
<body leftmargin="0"> - визначає ширину лівих і правих полів документа для IE

<body marginheight="0"> - визначає ширину верхніх і нижніх полів документа для NN

<body marginwidth="0"> - визначає ширину лівих і правих полів документа для NN
  - перенос рядка (примусовий)
clear="all"(left, right) - завершення обтікання текстом об'єкта (картинки).
<center></center> - центрування тексту
<fontx/font> - сам по собі погоди не робить, завжди вживається з одним із параметрів, наведених нижче
<font со1ог="#ссОООО">текст</fоnt> - задає колір тексту обраної частини документа.

TeKCT - задає розмір шрифту тексту (від -2 до +4)

текст</fоnt> - задає визначений шрифт у документі (можна прописати який-небудь екзотичний шрифт)
<frame src="menu.html"> - визначає фрейм і його властивості усередині frameset -глави
marginheight="0" - визначає ширину верхніх і нижніх полів фрейма. marginwidth="0" - визначає ширину лівих і правих полів фрейма. scrolling="yes" (no, auto) - лінійка прокручування буде завжди (ніколи, якщо треба). name="window-l" - ім'я фрейму використовується для посилання на нього з інших документів (фреймів) за допомогою параметра тега <а> target (name="ім'я_фрейму").
<frameset></frameset> - визначає фреймову структуру документа. Відкриває і закриває список фрэймов - глави
rows=" 100,200,*" - визначає кількість і розміри горизонтальних фреймів (рядів). Розміри задаються у відсотках чи у пікселях.
cols="10%,20%,70%" - визначає кількість і розміри вертикальних фреймів (колонок). Розміри задаються у відсотках чи у пікселях.
border - визначає ширину рамок фреймів у пікселях. <Нх></Нх> - заголовок <head></head> - обов'язковий тег <hr> - лінія
<Hr align="fight" > (center чи left> <Hr width="30%"> (ширина лінії у відсотках) <Hr size="6"> (товщина лінії) <Hr NoShade> (скасування об'ємності) <Hr color="ccOOOO"> (колір лінії, тільки в IE)
<html></html> - обов'язковий тег <іх/і> - виділяє текст курсивом

<img src="Baшa_Kapтинкa.jpg"> - малюнок
Border="5" - рамка навколо картинки width="500" - ширина картинки height="100" - висота картинки
align="left" - розташування тексту стосовно картинки (right, top, middle, left, bottom) vspace="10" - відстань від картинки до тексту по вертикалі hspace="30" - відстань від картинки до тексту по горизонталі ая="опис" - опис картинки usemap="#kartal" - посилання на карту
<map></map> - навігаційні карти name="kartal" - ім'я карти
<marquee></marquee> - рядок, що біжить.
height="16" - висота рядка width="250" - ширина рядка bgcolor="#99CCFF" - колір тла
vspace="10" - відстань від рядка, що біжить, до тексту (картинок, ін. об'єктів) по вертикалі hspace="20" - відстань від рядка, що біжить, до тексту (картинок, ін. об'єктів) по горизонталі
1оор="2" - скільки разів прокрутится рядок
direction="left" (right, up, down) - напрямок руху рядка - уліво (вправо, нагору, униз) behavior="scroll" (slide, alternate) - поводження рядка - звичайне прокручування (прокручування з зупинкою, від краю до краю) scrollamount="l" - швидкість руху рядка. Вона може приймати значення від 1 до 10 (1 -найповільніший рух, 10 - найшвидший)
<li</li> СПИСКИ
type="disk" - повний кружок (за домовленістю) Іуре="сігс1е" - порожній кружок type="square" - квадратик
<ol></ol> - нумерований список
<р></р> - параграф
<р align="center" >текст</р> - центрування тексту.
<р align="right" >текст</р> - вирівнювання тексту по правому краю документа.

<р align="left" >текст</р> - вирівнювання тексту по лівому краю документа.

<р align="justify" >текст</р> - вирівнювання тексту по обох краях документа.
<рге></рге> - форматований текст <s></s> - перекреслений текст <smallx/small> - маленький текст <stike></strike> - перекреслений текст  - нижній індекс
 - верхній індекс <title></title> - назва документа <table></table> - таблиці
<tr></tr> - рядок (ряд) таблиці.
<td></td> - стовпець таблиці.
bgcolor="#FFCC33" - колір тла таблиці.
background='KapTHHKa.gif' - задає фоновий малюнок для таблиці. width="50" чи width="50%" - ширина таблиці у пікселях чи відсотках. height="45" чи height="45%" -'висота таблиці у пікселях чи відсотках. align="center" (right, left) - вирівнює вміст осередку щодо її центру (правого чи лівого країв).
valign="middle" (top, bottom) - вертикальне вирівнювання вмісту рядка (комірки) по середині.
colspan="2" - розтягти комірку на кілька стовпців.
rowspan="2" - розтягти комірку на кілька рядів.
cellspacing="5" - задає простір між комірками.
cellpadding="5" - задає простір усередині комірки між її вмістом і межами. border="3" - задає товщину рамки таблиці. bordercolor="#000000" - задає колір рамки таблиці.
<tt></tt> - фіксований текст
 - підкреслений текст
<ul></ul> - ненумерований список

Запитання до захисту практичної роботи:

1. Що таке гіперпосилання?
2. Що таке WEB-документ?
3. Яка структура простого WEB-документа?
4. Яке призначення мови HTML?
5. Що таке тег і які є теги?