Перелік умовних позначень і скорочень. CSS (cascading style sheets) – каскадні таблиці стилів

CSS (Cascading Style Sheets) – каскадні таблиці стилів.

HTML (Hypertext Markup Language) – мова розмітки гіпертексту.

1. ПОДАННЯ ТЕКСТОВИХ ДОКУМЕНТІВ У ФОРМАТІ HTML

1.1 Мета роботи

Вивчення правил формування HTML-документа, подання текстового документа у форматі HTML на прикладі сторінки контактної інформації.

1.2 Вказівки до організації самостійної роботи студентів

Під час виконання роботи необхідно ознайомиться з літературою [1 – 3], матеріалами конспекту лекцій та інформацією, наведеною в підрозділі 1.4.

1.3 Опис програмного продукту, використовуваного для виконання лабораторної роботи

Для виконання лабораторної роботи використовується ПЕОМ, операційна система Windows 2007, Web - браузер Internet Explorer / Opera / Google Chrome, текстовий редактор.

1.4 Порядок виконання роботи та вказівки до її виконання

1.4.1 Розглянемо деякі основні теоретичні положення, необхідні для виконання даної лабораторної роботи

Розглянемо приклад коду для завдання заголовка і назви документа (рис. 1.1):

<HTML>

<Head> Заголовок документа <Title>Название документа в окне браузера

</Title> </Head>

</HTML>

Рисунок 1.1 – Вікно браузера із заголовком та назвою документа

Тег Head – визначає початок і кінець заголовка документа. Є контейнером для елементів, що містять технічну інформацію про документ. (TITLE, BASE, STYLE, LINK, META).

Тег Title – елемент HTML-коду, який відповідає за ті слова, які з'являться в заголовку веб-браузера.

Приклад коду для того, щоб заголовок документа був синього кольору, посередині сторінки з розміром першого рівня (<h1> Тема першого рівня </ h1>) рис. 1.2.

<HTML>

<Head> <H1 Align = Center> <font color = blue> Тема Документа </ H1>

<Title> Назва документа у вікні браузера </ Title>

</ Head>

</ HTML>

Рисунок 1.2 – Вікно з заголовком документа

Тег <font> являє собою контейнер для зміни характеристик шрифту, таких як розмір, колір і гарнітура. Хоча цей тег досі підтримується всіма браузерами, він вважається застарілим і від його використання рекомендується відмовитися на користь стилів. атрибути:

• color – встановлює колір тексту;

• face – визначає гарнітуру шрифту;

• size – задає розмір шрифту в умовних одиницях

Наприклад, код в HTML 5 (рис. 1.3):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

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

<html>

<head>

<title>Название документа в окне браузера</title>

</head>

<body>

<p><font size="5" color="red" face="Arial">П</font> ервая буква этого предложения

написана шрифтом Arial, выделена красным цветом и увеличена в размерах.</p>

</body>

</html>

Рисунок 1.3 – Вікно браузера з прикладом розміру і

кольору шрифту тексту

Тег <p>... </ p> створює новий абзац.

Тег <div>... </ div> ділить Веб-сторінку на області з метою застосування стилів.

Тег <BR>... </BR> – перенесення рядка.

Тег <BODY>... </ BODY> – тіло Веб-сторінки, яке описує її вміст.

Приклад коду із завданням фону і кордонів документа (рис. 1.4):

<HTML>

<Head> <H1 Align=Center> <font color=blue> Заголовок Документа </H1>

<Title> Название документа в окне браузера </Title>

</Head>

<Body bgcolor="#CCCCCC" leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0"> <font color=black> Текст документа </Body>

</HTML>

Рисунок 1.4 – Вікно браузера з прикладом завдання кольору фону

Розглянемо атрибути web-документа (табл. 1.1).

Таблиця 1.1 – Атрибути документа

Назва	Опис
alink, link, vlink	Визначають колір гіперпосилань

Продовження табл. 1.1

Назва	Опис
background	Визначає графічний фон
bgcolor	Змінює колір фону
bgproperties	Визначає можливість переміщення графічного фону під час перегляду сторінки
bottommargin	Змінює висоту нижнього поля
leftmargin	Змінює ширину лівого поля
marginheight	Змінює висоту верхнього і нижнього полів
marginwidth	Змінює ширину лівого і правого полів
rightmargin	Змінює ширину правого поля
Text	Змінює колір тексту
topmargin	Змінює висоту верхнього поля

Приклад коду для форматування тексту (рис. 1.5):

<HTML>

<Head> <H1 Align="Center"> <font color=blue> Заголовок Документа </H1>

<Title> Название документа в окне браузера </Title>

</Head>

<Body bgcolor="#CCCCCC" leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0"> <font color=black> <H3 align=center>Текст документа </H3>

<p>MARGINHEIGHT - определяет ширину (в пикселах) верхнего и нижнего полей документа. Работает только в браузерах Netscape.</p>

<p>TOPMARGIN - определяет ширину (в пикселах) верхнего и нижнего полей документа. Работает только в браузерах Internet Explorer.</p>

<div> MARGINWIDTH - определяет ширину (в пикселах) левого и правого полей документа. Работает только в браузерах Netscape.

LEFTMARGIN - определяет ширину (в пикселах) левого и правого полей документа. Работает только в браузерах Internet Explorer.

BACKGROUND - определяет изображение для "заливки" фона. Значение задается в виде полного URL или имени файла с картинкой в формате GIF или JPG.

BGCOLOR - определяет цвет фона документа.</div>

<I><h5 align="right"> TEXT - определяет цвет текста в документе.</I></h5>

<p>LINK - определяет цвет гиперссылок в документе.</p>

<p>ALINK - определяет цвет подсветки гиперссылок в момент нажатия.</p>

<p>VLINK - определяет цвет гиперссылок на документы, которые вы уже просмотрели.</p>

<p>Значения атрибутов BGCOLOR, TEXT, LINK, ALINK и VLINK задаются либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.</p>

</Body>

</HTML>

Рисунок 1.5 – Приклад форматування тексту

Розглянемо приклад написання посилань.

Абсолютні посилання можуть бути занадто громіздкими і переставати працювати, якщо переміщений молодший (child) по ієрархії документ.

Відносні посилання легше вводити і оновлювати, але і цей зв'язок обривається, якщо переміщений старший (parent) по ієрархії документ. Обидва види зв'язку можуть порушитися при перенесенні документа з одного комп'ютера на інший.

Тег <a>... </a> – є одним з важливих елементів HTML і призначений для створення посилань.

Тег < base > – інструктує браузер щодо повного базової адреси поточного документа.

Тег < nav > – групує посилання навігації по сайту.

Синтаксис для того, щоб створити гіпертекстове зв'язок:

< А HREF = " адрес_pecypcа "> выделенний_текст_ссылки </ А >,

Приклад в HTML 5.HTML5IECrOpSaFx

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<p><a href="images/xxx.jpg">Посмотрите на мою фотографию!</a></p>

<p><a href="tip.html">Как сделать такое же фото?</a></p>

</body>

</html>

<!DOCTYPE HTML>

< html >

< head >

< meta charset="utf-8" >

< title > Тег А </ title >

</ head >

< body >

< p >< a href="images/xxx.jpg" > Посмотрите на мою фотографию! </ a ></ p >

< p >< a href="tip.html" > Как сделать такое же фото? </ a ></ p >

</ body >

</ html >

Наведемо приклад коду вікна веб-сторінки з посиланням на інший документ і з виведенням на екран картинки по правому краю (рис. 1.6)

<HTML>

<Head> <H1 Align="Center"> <font color=blue> Заголовок Документа </H1>

<Title> Название документа в окне браузера </Title>

</Head>

<Body bgcolor="#CCCCCC" leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0"> <font color=black> <H3 align=center>Текст документа </H3>

<div> MARGINWIDTH - определяет ширину (в пикселах) левого и правого полей документа. Работает только в браузерах Netscape.

BGCOLOR - определяет цвет фона документа.</div>

<I><h5 align="right"> TEXT - определяет цвет текста в документе.</I></h5>

<p>LINK - определяет цвет гиперссылок в документе.</p>

<p>ALINK - определяет цвет подсветки гиперссылок в момент нажатия.</p>

<p>VLINK - определяет цвет гиперссылок на документы, которые вы уже просмотрели.</p>

<A HREF="Document 1.html"> <A HREF="Document 2.html">Ссылка</A>

</Body>

</HTML>

Рисунок 1.6 – Вікно браузера з посиланням на інший документ і з виведенням на екран картинки по правому краю

Приклад коду для виводу на екран документа з наступними параметрами: ширина лівого поля 100.pxl, висота верхнього поля 100.pxl, ширина правого поля 100.pxl, висота нижнього поля 300.pxl. Документ містить зображення з розмірами width = "120" height = "190" (рис. 1.7).

<Body leftmargin="100"

topmargin="100" rightmargin="100"

bottommargin="300">

Рисунок 1.7 – Вікно браузера з документом, що містить зображення з розмірами 120х190

Приклад коду для гіпертекстового посилання на зображення (рис. 1.8):

<A HREF="Document 1.html"><A HREF="Document 2.html"><H2 Align="left"> <font color="Maroon"> Адрес дворца </H2> </A> /* при натисканні на «Адреса палацу», відкривається Document 2.*/

Примітка. Document 3.htm був створений окремо, в який завантажено зображення notrdam1 (рис. 1.7).

Рисунок 1.8 – Вікно з прикладом гіпертекстового посилання на зображення

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

1. У текстовому редакторі "Блокнот" створити файл *.html і, використовуючи теги HTML, HEAD, TITLE і BODY, задати структуру HTML документа.

2. Визначити і задати в створеному HTML-документі значення полів і колірну схему сайту, зручну для сприйняття користувача:

- ліве поле;

- верхнє поле;

- колір фону;

- колір тексту;

- колір посилань (звичайних, активних, відвіданих).

3. Використовуючи теги заголовка H1 і H2 вивести у верхній частині HTML-документа назву сайту та назву сторінки відповідно, вирівнюючи їх по центру.

4. За допомогою тегів форматування тексту B, I, U та FONT навести абзац з текстом привітання користувача, а також контактну інформацію з обов'язковими полями: Адреса, Телефон, Факс, E-mail. Сайт. Назви полів позначити за допомогою списку визначень DL і виділити їх контрастним напівжирним шрифтом (рис. 1.9).

5. Переглянути результат в браузері.

6. Зробити висновки по роботі.

1.5 Зміст звіту

1. Теорія зі створення шаблону HTML-документа.

2. Таблиця значень полів та колірної схеми сайту згідно п. 2.

3. Текст створеного HTML-документа.

4. Копія екрану з відображенням створеного HTML-документа.

5. Висновки по роботі.

Рисунок 1.9 – Форматування тексту сторінки «Контакти»

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

1. Розшифрувати абревіатуру HTML.

2. Привести приклад коду для гіпертекстового посилання на зображення.

3. Описати призначення тегів: Head, Title, Body, Base, Nav, Font, P, Div.

4. Описати призначення атрибутів: Background, Margin, Bgcolor, Text, Link, Alink і Vlink.

5. Чим відрізняються: заголовок від назви документа?

6. Описати процес опису полів нового Web - документа.

7. Описати базовий шаблон HTML-документа.

8. Яким чином відбувається поділ тексту Web - документа на абзаци?

9. Визначення гіпертекстових посилань.

10. Описати поняття абсолютні та відносні посилання.

2 ТАБЛИЦІ ТА ОСНОВНІ ЕЛЕМЕНТИ ФОРМ В HTML-документі

2.1 Мета роботи

Вивчення основ побудови таблиць в HTML-документі та їх використання при завданні структури web-сторінок.

2.2 Вказівки до організації самостійної роботи студентів

Під час виконання роботи необхідно ознайомиться з літературою [1 – 3], матеріалами конспекту лекцій і інформацією, наведеної в підрозділі 2.4.

2.3 Опис програмного продукту, використовуваного для виконання лабораторної роботи

Для виконання лабораторної роботи використовується ПЕОМ, операційна система Windows 2007, Web- браузер Internet Explorer / Opera / Google Chrome, текстовий редактор.

2.4 Порядок виконання роботи та вказівки до її виконання

2.4.1 Розглянемо деякі основні теоретичні положення, необхідні для виконання даної лабораторної роботи

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

<HTML>

<Head> <H1 Align="Center"> <font color="blue"> Харьковский национальный университет радіоэлектроники </H1>

<Title> Название документа в окне браузера </Title>

<A HREF="Laba 3.html"><A HREF="Document 2.html"><H2 align="left"><font color="#FF0000">Главная</A></H2>

<A HREF="Laba 3.html"><A HREF="Document 2.html"><H2 align="left"><font color="#FF0000">Информация для абитуриентов</A></H2>

<A HREF="Laba 3.html"><A HREF="Document 2.html"><H2 align="left"><font color="#FF0000">Перечень специальностей</A></H2>

<A HREF="Laba 3.html"><A HREF="Document 2.html"><H2 align="left"><font color="#FF0000">Контакты</A></H2>

</Body>

</HTML>

Рисунок 2.1 – Вікно браузера зі створеним web-документом

Створення таблиць у документі HTML.

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

Для створення таблиці служить тег <TABLE>. Як відомо таблиця складається з рядків, а рядки, в свою чергу складаються з комірок. Для визначення рядків служить тег <TR>, для створення осередків – <TH>, <TD>.

Тег <TH> використовується для створення осередків з заголовками.

Тег <TD> – для звичайних осередків з даними.

Приклад створення таблиць (рис. 2.2).