Веб-орієнтована розробка програмного забезпечення ЗПі-81-20210115T104851Z-001 / Лабораторна робота 1 МОВА HTML_ФРЕЙМИ
.docЛабораторна робота № 1
Тема:Мова розмітки гіпертекстових сторінок (HTML). Форматування тексту.
Мета:
використовуючи основні теги для форматування тексту розробити HTML-документ, що відповідає всім необхідним вимогам.
Теоретичні відомості.
Всесвітня павутина World Wide Web виткана з Web-сторінок, які створюються за допомогою так званої мови розмітки гіпертексту HTML (Hyper Text Markup Language). Хоча багато хто говорить про програмування цією мовою, HTML зовсім не є мовою програмування в традиційному розумінні. HTML - мова розмітки документа. При розробці HTML-документа виконується розмітка текстового документа, ці позначки служать для вказівки форми представлення інформації, що міститься в документі.
Мова HTML дозволяє:
1) Створювати і редагувати Web-сторінки, зокрема свою домашню Web-сторінку, яку можна потім розмістити в Інтернеті; 2) Редагувати документи HTML, отримані з Інтернету, так щоб функціонували всі впроваджені в документ об'єкти (картинки, анімації і т.д.); 3) Створювати мультимедійні презентації, слайд-шоу, демонстраційні проекти, завдяки гіпертекстовим посиланням і можливості вставляти в документ HTML малюнки, діаграми, анімації, відеокліпи, музичний і мовний супровід, текстові спецефекти (наприклад, рядок, що біжить).
Розглянемо основні поняття мови HTML. 1. Елемент - це конструкція мови HTML, або контейнер, що містить дані. Web-сторінка є набором елементів. 2. Тег - це стартовий і кінцевий маркери елементу. Теги визначають межі дії елементів і відокремлюють елементи один від одного. У тексті Web-сторінки теги полягають в кутові дужки, наприклад:
<HTML>
. Кінцевий тег завжди забезпечується косою межею:
</HTML>
. 3. Гіперпосилання - фрагмент тексту, який є покажчиком на інший файл або об'єкт. Гіперпосилання дозволяють переходити від одного документа до іншого. 4. Фрейм - область гіпертекстового документа з своїми смугами прокрутки. 5. Аплет - програма, передавана на комп'ютер клієнта у вигляді окремого файлу і що запускається при прогляданні Web-сторінки. 6. Скрипт - програма, включена до складу Web-сторінки для розширення її можливостей. 7. Завантаження (DownLoad) - копіювання документа з Web-сервера на комп'ютер клієнта.
Основні теги, використовувані для форматування тексту.
Тег - це стартовий і кінцевий маркери елементу. Теги визначають межі дії елементів і відокремлюють елементи один від одного. У тексті Web-сторінки теги полягають в кутові дужки, Наприклад:
<HTML>
< /HTML>
- кінцевий тег завжди забезпечується косою межею. Більшість HTML-тегів - парні, тобто на той, що кожен відкриває тег вигляду
<tag>
є той, що закриває тег вигляду
</tag>
з тим же ім'ям, але з додаванням "/". Теги можна вводити як великими, так і маленькими буквами. Наприклад
<body>
<BODY>
і
<Body>
будуть сприйняті браузером однаково. Атрибути - один і більш - вставляються в HTML - дескриптори для того, щоб надати Web-браузеру додаткову інформацію про те, як браузер повинен сприймати необхідний тег. Наприклад:
<font color = "red" face = "Helvetica">
у даному прикладі для тега
<font>
атрибутами являються color і face.
Розглянемо загальну структуру типового простого документа HTML:
<COMMENT>
Коментар
</COMMENT>
<HTML>
<HEAD>
<TITLE>
Назва документа
</TITLE>
</HEAD>
<BODY>
Тут розташований текст самого документа HTML.
</BODY>
</HTML>
Дамо пояснення вказаним тегам документа HTML
. Обов'язкові Теги
<html>
...
</html>
Тег
<html>
повинен відкривати HTML-документ. Аналогічно, Тег
</html>
повинен завершувати HTML-документ.
<head>
...
</head>
Ця пара тегів указує на початок і кінець заголовка документа. Крім найменування документа (див. опис Теги )
<title>
у цей розділ може включатися безліч службової інформації.
<title>
...
</title>
Все, що знаходиться між тегами
<title>
і
</title>
тлумачиться браузером як назва документа, показуючи назву поточного документа в заголовку вікна і друкує його в лівому верхньому кутку кожної сторінки при виводі на принтер. Рекомендується назва не довше 64 символів.
<body>
...
</body>
Ця пара тегів вказує на початок і кінець тіла HTML-документа, яке тіло, власне, і визначає зміст документа.
Три основних тега
<HTML>
<HEAD>
і
<BODY>
передають броузеру основну інформацію для ідентифікації і організації документа.
Коментарі
Браузери ігнорують будь-який текст, поміщений між
<!-- і -->
. Це зручно для розміщення коментарів. Приклад:
<!-- Це коментар -->
Розглянемо непарні теги форматування символів тексту:
Ці теги одиночні, тобто непарні, вони не вимагають закриваючих тегов з косою межею.
<BR>
- цей тег використовується, якщо необхідно перейти на новий рядок, не перериваючи абзацу.
<HR>
- тег описує ось таку горизонтальну лінію (тег може додатково включати атрибути SIZE (визначає товщину лінії в пікселах) і/або WIDTH (визначає розмах лінії у відсотках від ширини екрану):
Розглянемо парні теги форматування:
<H1>
<H2>
<H3>
<H4>
<H5>
<H6>
. При цьому заголовок буде більший, у
<H2>
менше, у
<H3>
ще менше і т.д.
<H1>
...
</H1>
-
<H6>
...
</H6>
Теги вигляду
<Hi>
(де i - цифра від 1 до 6) описують заголовки шести різних рівнів. Заголовок першого рівня - найбільший, шостого рівня, природно - найдрібніший.
<P>
...
</P>
Така пара тегов описує абзац. Все, що поміщене між
<P>
і
</P>
сприймається як один абзац.
Теги <Hi>
і
<P>
можуть містити додатковий атрибут ALIGN - атрибут вирівнювання (читається "елайн", від англійського "вирівнювати")
<p align=left>
...
</p>
- вирівнювання тексту в абзаці по лівому краю.
<p align=right>
...
</p>
- вирівнювання тексту в абзаці по правому краю.
<p align=center>
...
</p>
- вирівнювання тексту в абзаці по центру.
<p align=justify>
...
</p>
- повне вирівнювання по обох краях екрану.
Форматування шрифту
Фізичні стилі
<B>
...
</b>
- Виділення тексту напівжирним шрифтом. Зразок.
<SMALL>
...
</small>
-Зменшений розмір шрифту. Зразок.
<BIG>
...
</big>
- Збільшений розмір шрифту Зразок.
<I>
...
</i>
- Виділення тексту курсивом. Зразок.
<STRIKE>
...
</strike>
Елемент, що створює перекреслене зображення тексту. Його можна замінювати простішим:
<S>
...
</s>
. Приклад перекресленого тексту.
<U>
...
</u>
- Підкреслене зображення тексту. Зразок
<SUB>
...
</sub>
задає нижній індекс. Приклад:
x
<sub>
1
</sub>
+x
<sub>
2
</sub>
=x
<sub>
3
</sub>
x1+x2=x3
<SUP>
...
</sup>
- задає верхній індекс. Приклад: Теорема Піфагора а
<sup>
2
</sup>
+b
<sup>
2
</sup>
=c
<sup>
2
</sup>
a2+b2=c2
Логічні стилі
<EM>
...
</em>
- від англійського emphasis - акцент
<STRONG>
...
</strong>
- від англійського strong emphasis - сильний акцент
<CODE>
...
</code>
- для фрагментів початкових текстів
<SAMP>
...
</samp>
- від англійського sample - зразок
<KBD>
...
</kbd>
- від англійського keyboard - клавіатура
<VAR>
...
</var>
- від англійського variable - змінна
<TT>
...
</tt>
- імітація машинки, що пише
<FONT>
...
</font>
- дозволяє змінювати колір, розмір і тип шрифту тексту, що знаходиться між початковим і кінцевим тегамі.
. Всі ці характеристики визначаються за допомогою відповідних атрибутів. Абсолютний розмір шрифту задається за допомогою size (розмір): size="Абсолютный розмір шрифту" Цей атрибут може приймати значення від 1 до 7. Розмір шрифту може задаватися відносно базового: size="+число" size="-число" Зразки розмірів шрифтів: Шрифт 7. <font size="+7">
Шрифт 7
</font>
Шрифт 6.
<font size="+6">
Шрифт 6
</font>
і т.д Шрифт 5. Шрифт 4. Шрифт 3. Шрифт 2. Шрифт 1.
Атрибут face (вигляд) дозволяє задавати тип шрифту. face="Назва шрифту"
Наприклад (<font face="Verdana">Например</font>)
Атрибут color (колір) дозволяє задавати колір шрифту. color= "колір"
Наприклад (<font color="#CC0000"> Например</font>)
Кольрове оформлення.
Для цього найпростіше встановити відповідні атрибути тега
<BODY>
. Атрибут ТЕХТ= визначає колір тексту на сторіночці, а атрибут BGCOLOR= - колір фону. Крім того, тег
<BODY>
може включати атрибут background="[ім'я файлу]", який задає зображення, що служить фоном для тексту і інших зображень. Як і будь-яке інше зображення, фон повинен бути представлений у форматі GIF (файл з розширенням *.gif) або JPEG (файл з розширенням *.jpg або *.jpeg). Назви кольорів можна вводити по назвах, наприклад: "black" (чорний), "white" (білий), "yellow" (жовтий), "green" (зелений), "fuchsia" (бузковий) і т.д. Існує досить багато назв кольорів, які можна використовувати в HTML, проте можна отримати будь-який з кольорів, ввівши його шістнадцятирічний номер. Шістнадцятирічний номер кольору повинен складатися з шести цифр. Перші дві означають інтенсивність червоної складової, другі дві - зеленою і останні дві - синій. Таким чином, червоний колір позначається як FFOOOO, зелений, - OOFFOO і синій - OOOOFF. Колір з номером 000000 - чорний (немає жодної складової), а FFFFFF - білий. Якщо це зрозуміло, то можна поекспериментувати з інтенсивністю кожної складової окремо. Колір можна вибрати, скориставшись таблицею, що додається до роботи.
Списки. Списки в HTML бувають двох видів: впорядковані (пронумеровані) і неврегульовані (непронумеровані). Відрізняються вони лише способом оформлення. Перед пунктами неврегульованих списків зазвичай ставляться символи-буллети (bullets), наприклад, крапки, ромби і т.п., тоді як пунктам впорядкованих списків передують їх номери. Елементи: -
<UL>
...
</ul>
Створює неврегульований список -
<OL>
...
</ol>
Створює впорядкований список -
<LI>
...
</li>
Створює пункт меню усередині елементів OL або UL
Вставка зображення
<IMG>
- використовується для вставки зображень в HTML-документ. Елемент допускає вставку зображень у форматах JPEG (зокрема progressive jpeg) і Compuserve GIF (включаючи прозорі і анімовані). Елемент IMG не має кінцевого тега. Атрибути: SRC - обов'язковий атрибут. Вказує адрес (URL) файлу із зображенням. HEIGHT і WIDTH - визначають ширину і висоту зображення відповідно. Якщо вказані значення не співпадають з реальним розміром зображення, зображення масштабується (деколи з помітною втратою якості). HSPACE і VSPACE - визначають відступ картинки (у пікселах) по горизонталі і вертикалі від інших об'єктів документа. Просто необхідно при обтіканні зображення текстом. ALIGN - обов'язковий атрибут. Вказує спосіб вирівнювання зображення в документі. Може приймати наступні значення: left - вирівнює зображення по лівому краю документа. Прилеглий текст обтікає зображення справа. right - вирівнює зображення по правому краю документа. Прилеглий текст обтікає зображення зліва. NAME - визначає ім'я зображення, унікальне для даного документа. Ви можете вказати будь-яке ім'я без пропусків з використанням латинських символів і цифр. BORDER - визначає ширину рамки навколо зображення в пікселах. Рамка виникає, тільки якщо зображення є гіпертекстовим посиланням. У таких випадках значення BORDER зазвичай вказують рівним нулю.
Посилання
<A>
...
</A>
- створення анкера (якорі), або гіперпосилання. Атрибути: HREF - визначає той, що знаходиться між початковим і кінцевим тегами текст або зображення як гіпертекстове посилання (URL, або лінк) на документ (і/або область документа), вказаний в значенні даного атрибуту. Можливі значення: http://... - створює посилання на www-документ; ftp://... - створює посилання на ftp-сайт або розташований на ньому файл; mailto:Эл.адрес одержувача - запускає поштову программу-клієнт із заповненим полем імені одержувача. Приклад:
<A HREF="mailto:user@mail.box">
Послати лист
</A>
<а href="http://www.***.com.ua/">
www.***.com.ua
</a>
. NAME - позначає ту, що знаходиться між початковим і кінцевим тегами область документа як можливий об'єкт для посилання. Як значення потрібно латиницею написати будь-яке слово-покажчик, унікальне для даного документа. Цей атрибут використовується для створення якоря. TARGET - визначає вікно, на яке указує гіпертекстове посилання. Цей атрибут використовується тільки спільно з атрибутом HREF. Можливі значення: _self - указує, що визначений в атрибуті HREF документ повинен відображатися в поточному фреймі; _top - указує, що документ повинен відображатися у вікні-батьку всієї поточної фреймової структури; _blank - указує, що документ повинен відображатися в новому вікні.
Завдання: Створити HTML-документ за такими вимогами:
1.Текст HTML-документа повинен містити заголовки, підзаголовки, виділення напівжирним, жирним, підкресленим, перекресленим, виділення курсивом і т.д. У роботі повинні використовуватися різні способи вирівнювання тексту.
2.Повинні змінюватися колір, розмір і тип шрифту. У роботі необхідно використовувати від 2-х типів шрифтів.
3.Необхідно використовувати вставки зображень.
4.Документ повинен містити фото або картинку, обтічну текстом.
Посилання: в межах документа (якір), посилання на поштову скриньку, посилання на який-небудь сайт.
Контрольнi запитання.
Що насправдi являю собою мова HTML ? Що вона дозволяє?
Назвати основнi теги мова розмiтки HTML,iх призначення?
Якi атрибути використовують для визначення
основних параметрiв шрифту?
Як вставити зображення в HTML-документ?
Що таке гiперпосилання ?Як вставити його в HTML-документ?
Лабораторна робота № 1А(ПРОДОВЖЕННЯ)
Тема:Фрейми
Мета:
створення фреймової структури HTML-документа
Теоретичні відомості.
Фрейми дозволяють розбивати вікно проглядання браузера на декілька прямокутних підобластей, розташованих поряд один з одним. У кожну з підобластей можна завантажити окремий HTML-документ, проглядання якого здійснюється незалежно від інших. Між фреймами при необхідності можна організувати взаємодію що полягає в тому, що вибір посилання в одному з фреймів може привести до завантаження документа в інший фрейм. При створенні сторінок з фреймами розробляються декілька HTML-файлів. Документи разкладки (layout), використовуються для створення структури Web-сторінок, тобто розділення їх на декілька областей. Документи змісту (content) призначені для заповнення інформацією кожній з областей.
Використовуючи фрейми, які дозволяють розбивати Web-сторінок на підвікна, можна значно поліпшити зовнішній вигляд і функціональність інформаційних систем і Web-застосувань. Кожне підвікно, або фрейм, може мати наступні властивості: - Кожен фрейм має свій URL, що дозволяє завантажувати його незалежно від інших фреймов. - Кожен фрейм має собственоє ім'я (параметр NAME), що дозволяє переходити до нього з іншого фрейма. - Розмір фрейма може бути змінений користувачем прямо на екрані за допомогою миші (якщо це не запрешено вказівкою спеціального параметра).
Фрейми визначаються в структурі <FRAMESET>
яка використовується для сторінок, що містять фрейми, замість розділу
<BODY>
звичайного документа. Web-сторінки складені з фреймів, не можуть містити розділ
<BODY>
у своєму HTML-коді. У свою чергу, сторінки з розділом
<BODY>
не можуть використовувати фрейми. Контейнер з тегів
<FRAMESET>
і
</FRAMESET>
обрамляє кожен блок визначень фрейма. Всередині контейнера
<FRAMESET>
можуть міститися тільки теги
<FRAME>
і вкладені теги
<FRAMESET>
. Тег
<FRAMESET>
має два параметри: rows і cols. Горизонтальне ділення екрану задається за допомогою атрибуту rows, а вертикальне - за допомогою атрибуту cols. Значення атрибуту можуть бути виражені в пікселах або відсотках. Крім того використовується символ *, для позначення частини екрану, що залишилася.
<FRAMESET>
...
</FRAMESET>
- Визначає склад і розміри кадрів (фреймів) на екрані.
Атрибути :
COLS - визначає розміри і кількість вертикальних вікон ROWS - визначає розміри і кількість горизонтальних вікон
<FRAME>
- Визначає HTML файл для кожного кадру. Тег
<FRAME>
визначає одиночний фрейм. Він повинен розташовуватися усередині пари тегів
<FRAMESET>
і
</FRAMESET>
. Цей тег не є контейнером на відмінність від
<FRAMESET>
не має завершуючого тега.
Атрибути :
SRC
- адреса HTML-документа
(
<FRAME SRC="MyDocument.html">
)
NAME
- задає ім'я кадру
FRAMEBORDER
-віддзеркалення рамки фрейма (0-вимкнена) Для завантаження в потрібному вікні HTML-документа по гіперпосиланню з іншого вікна використовують атрибут
TARGET
в тезі
<A HREF>
(
<A HREF="Text.html" TARGET="nameWindow">
) Для спрощення можна використовувати тег
<BASE>
(
<BASE TARGET="nameWindow">
) Параметр
TARGET
- задає кадр, що виділяється за умовчанням для відображення гіпертексту
NORESIZE
- включає режим, при якому користувач не може змінити розміри даного кадру
SCROLLING
- лінійка прокрутки (SCROLLING=YES - створюється лінійка прокрутки, SCROLLING=NO - лінійка прокрутки не створюється) Параметри
MARGINWIDTH
і
MARGINHEIGT
дають можливість встановлювати ширину полів фрейма.
На практиці в тезі <FRAME>
рідко використовуються одночасно всі параметри. Найбільш важливий параметр - scr (скорочення від слова source). Досить часто задається єдиний параметр src.
Наприклад: <FRAME src="url">
Значення параметра src визначає URL-адреса документа, який буде завантажений спочатку в даний фрейм. Зазвичай як така адреса записується ім'я HTML-файлу, розташованого в тому ж самому каталозі, що і основний документ. Тоді рядок визначення фрейма виглядатиме, наприклад, так:
<FRAME src="sample.htm">
Звичайно, як значення scr може бути задана будь-яка допустима URL-адреса. Параметр name визначає ім'я фрейма, яке може використовуватися для посилання до даного фрейма. Зазвичай посилання задається з іншого фрейма, розташованого на тій же самій сторінці. Наприклад :
<FRAME src="sample.htm" name="frame_1"">
Такий запис створює фрейм з ім'ям "frame_1", на який може бути виконане посилання. Наприклад:
<A href="other.htm" target="frame_1">
Кликніть тут для завантаження документа other.htm у фрейм з ім'ям frame_1
</a>
Звернете увагу на параметр target, який посилається на ймення фрейм. Якщо для фрейма не задано ім'я, то буде створений фрейм без імені, і не буде можливості використовувати посилання на нього з іншого фрейма. Імена фреймів повинні починатися з алфавітно-цифрового символу.
<IFRAME>
...
</IFRAME>
- Створення вкладеного вікна.
Атрибути:
frameBorder - наявність рамки для вложеного вікна height - висота вікна width - ширина вікна marginHeight - верхній і нижній відступ документа у вікні marginWidth - лівий і правий відступ документа у вікні SCROLLING - прокрутка (scrolling=yes - прокрутка дозволена, scrolling=no - прокрутка заборонена) SRC - опис документа, що вставляється (SRC="имя файлу" - вставка у вікно файлу)
Завдання:
1.Текст HTML-документа повинен розташовуватися в розробленій структурі фрейму.
2.Сторінка повинна мати не менш, ніж 3 фрейми.
3.Необхідно розробити систему посилань для відкриття нових сторінок в головному вікні фрейму.
4.У фреймовій структурі повинні бути реалізовані всі атрибути.
Необхідно створити вкладений фрейм.
Контрольнi запитанння.
Що таке фрейм? Якi його властивостi?
2. Який порядок оформлення документу HTML, який мiстить фрейми?
3. Якi основнi параметри тега FRAME?