Практична робота №1
Тема: Розробка веб-сайту, графіка на веб-сторінках.
Мета: сформувати уявлення про оформлення тексту HTML-документі, забезпечення форматування умінь та навичок: задання структури HTML-документа, створення фону, тексту різних кольорів, заголовків, списків, графіки.
Опорні знання
Форматування тексту
Teг<FONT>. . .текст. . .</FONT> використовується для роботи з текстом.
Він має атрибути:
FACE —задає гарнітуру шрифту;
COLOR — задає колір шрифту;
SIZE — визначає розмір шрифту.
<FONT FACE="Monotype Corsiva" SIZE="6" COLOR="red">Oкcaнa</FONT>
<І> Цей текст буде виділений курсивом </І>
<ТТ> Цей текст буде виділений моноширинном шрифтом </ТТ>
<U> Цей текст буде підкреслений </U>
<S> Цей текст буде перекреслений </S>
<В> Цей текст буде напівжирним шрифтом </В>
<ВІG> Цей текст буде великим шрифтом</ВІG>
<SMALL> Цей текст буде малим шрифтом </SMALL>
<SUP> верхній індекс </SUP>
<SUB> нижній індекс</SUB>
Гіперпосилання на веб-сторінці
Кожна сторінка повинна мати гіперпосилання на інші сторінки веб-сайту, це дозволяє переміщуватися в межах одного сайту і переходити на інші. Для того, щоб створити посилання, потрібно його текст помістити в контейнер <А>...</А>.
У тегі <А> з домогою атрибуту HREF необхідно додати адресу сторінки чи ресурсу Інтернет, на який робиться посилання. Загальний вигляд коду:
<А HREF="адрес"> текст гіперпосилання</А>
Посилаючись на сайт технікуму, потрібно вказати його повну адресу. Наприклад, для сайту технікуму потрібно вказати його повну адресу — http: / / www. pngrt.net.
<А HREF="http://www.pngrt.net"> ПНГрТ</A>
Якщо потрібно створити посилання на іншу веб-сторінку в рамках одного сайта, досить вказати її адресу. Як правило, це просто назва файла, за умови, що шукана Веб-сторінка знаходиться в тій самій папці, що й поточна.
Гіперпослання на сторінку H2.htm матиме вигляд:
<А HREF="H2.html">cторінка 2 </А>
Якщо ж веб-сторінка, на яку робиться гіперпосилання, знаходиться в іншій папці, то потрібно вказувати повне ім'я даного файла:
<А HREF="D:\Moї документи\НТМL\Н2.папка 1">Сторінка 2< /А> Щоб створити гіперпосилання на файл, потрібно вказати його ім'я з розширенням у атрибуті HREF.
<А HREF="D:\Moї документи\Стенд.dос">Стеди</А>
Для оформлення гіперпосилань на Веб-сторінці різними кольорами використовуються атрибути Tera<BODY>:
LINK — колір гіперпосилань за замовчуванням;
ALINK — колір активних гіперпосилань (до яких підведений курсор); VLINK — колір переглянутих гіперпосилань.
Розміщення зображень на Веб-сторінках у мові HTML
Для розміщення зображення на Веб-сторінці використовується тег <IMG> його атрибути:
SRC — задає адресу малюнка;
WIDTH — ширина малюнка;
HEIGHT — висота малюнка;
ALT — додавання коментаря, який буде відображатися при наведенні курсору на зображення;
BORDER — визначає товщину рамки навколо зображення.
Практичні завдання
Завдання 1
Запустіть програму Блокнот.
Наберіть приклад HTML-документа у блокноті:
<HTML>
<HEAD><TITLE>Моя сторінка></TITLE></HEAD>
<BODY BGCOLOR="yellow">
<P ALIGN="CENTER"><H1>Моя біографія</H1><P>
</BODY>
</HTML>
Збережіть файл у своїй папці та назвіть його 1.html та закрийте файл.
Перегляньте отриману веб-сторінку
Проаналізуйте результат.
Завдання 2
Розміщення зображення D:\l.jpg на веб-сторінці.
Запустіть програму Блокнот.
Наберіть приклад HTML-документа у блокноті:
<HTML>
</BODY>
<P ALIGN="CENTER">
<IMG SRC="D:\1.jpg"WIDTH="300" HEIGHT="250" BORDER="4" ALT="Операційна система">
</BODY>
<HTML>
Збережіть файл у своїй папці та назвіть його 2.html та закрийте файл.
Перегляньте отриману веб-сторінку
Проаналізуйте результат.
Завдання 3
Запустіть програму Блокнот.
Наберіть приклад HTML-документа у блокноті:
<HTML>
<HEAD><TITLE>МІЙ САЙТ</TITLE></HEAD>
<BODY BGCOLOR="yellow">
<P ALIGN="CENTER"><H1>ПОРИ РОКУ</H1></P>
<A HREF="22.HTML">ЗИМА</A>
</BODY>
<HTML>
Збережіть файл у своїй папці та назвіть його 3.html та закрийте файл.
Перегляньте отриману веб-сторінку
Проаналізуйте результат.
Завдання 4
Запустіть програму Блокнот.
Наберіть приклад HTML-документа у блокноті:
<HTML>
<HEAD><TITLE>ЗИМА</TITLE></HEAD>
<BODY BGCOLOR="RED">
<A HREF="3.HTML">НАЗАД</A>
<P ALIGN="CENTER"><H1>КРАСУНЯ ЗИМА</H1></P>
</BODY>
</HTML>
Збережіть файл у своїй папці та назвіть його 22.html та закрийте файл.
Перегляньте отриману веб-сторінку
Проаналізуйте результат.
Завдання 5
Створіть сторінки Весна, Літо, Осінь аналогічно до Зими.
Завдання 6
Вставте на сторінки відповідні зображення