Лабораторна робота
Тема: Створення списків в HTML-документі. Стилі заголовків. Гіпертекстові посилання.
Мета: навчитись застосовувати кольори для оформлення еле-ментів НТМL-документа, опанувати основні стилі заголовків, що використовуються в HTML-документах, опанувати методи створення різних видів списків у HTML-документі, способи створення гіперзв’язків.
Теоретичні відомості
Функції заголовків
Заголовки характеризуються такими ознаками:
1. Міра змістовності, склад і форма заголовка.
2. Місце заголовка на сторінці відносно основного тексту.
3. Взаємодія заголовка з текстом.
4.Характер частини тексту, позначеної заголовком. Мова HTML використовує шість стилів заголовків для виділен-ня тексту. Стилі нумеруються від 1 до 6, причому розмір шрифту заголовка першого стилю є найбільшим.
Стандарт мови HTML нараховує 11 атрибутів тега заголовка, але не всі вони реалізовані у більшості програм-броузерів. Розглянемо тільки атрибут АLIGN, який дозволяє вирівнювати текст за правою, лівою межею або по центру. За замовчуванням текст вирівнюється за лівою межею. Даний атрибут застосовується також до графіки і таблиць.
Значення атрибута ALIGN такі ж, як і для тегу розбиття тексту на абзаци <р> (див. Розділ 4).
Основні стилі заголовків
<Hn>...</Нn>, де n - номер стилю від 1 до 6 - виділяє текст різними стилями.
ПРИКЛАД Файл у форматі НТМL:
<HTML> <НЕАD> <TITLE>Моя перша НТМL-сторінка</ТІТLЕ> </НЕАD> <ВODY>
<Н1 ALIGN=СENTER>УКРАЇНСЬКА МИНУВШИНА </Н1>
<Н2 ALIGN=CENTER>ЕТНОГРАФІЧНИЙ ДОВІДНИК</Н2>
<НЗ АLIGN=RIGHT>ТРАДИЦIЙНЕ ЖИТЛО</НЗ>
<Н4>НАРОДНІ ЗАНЯТТЯ</Н4>
<Н5 ALIGN=RIGHT>УКРАЇНСЬКА КУХНЯ</Н5>
<Н6>НАЦІОНАЛЬНЕ ВБРАННЯ</Н6>
</ВODY> </HTML>
Списки надають зручну можливість представлення інформації в документах.
Елементи списків всіх типів мають відступ від лівої межі екрана.
Тип Теги списку Теги елементів
Нумерований <OL>...</OL> <LI>...</LI> - елемент списку
Маркований <UL>...</UL> <LI>...</LI> - елемент списку
Список описів <DL>...</DL> <DD>...</DD> - назва терміна
<DT>...</DT> - визначення терміна
За замовчуванням елементи впорядкованого списку нумерують-ся цілими числами починаючи з 1. До тега нумерованого списку <OL> існує атрибут TYPE. Встановлюючи TYPE рівним «А», «а», «І», «і», можна змінити схему нумерації на великі літери, малі літе-ри, великі або малі римські цифри відповідно.
Атрибут START дозволяє задавати початкове значення для ну-мерації (за замовчуванням START=1, але можна вказати будь-яке додатне число).
Атрибут TYPE тега <UL> дозволяє змінювати вигляд маркера
TYPE=disk - маркер має вигляд диска;
TYPE=circle - маркер має вигляд кола;
TYPE=square - маркер має вигляд квадрата.
ПРИКЛАД (нумерований список) Файл у форматі HTML:
<HTML> <HEAD> <ТІТLЕ>Моя перша НТМL-сторінка</ТІТLЕ> </HEAD>
<BODY>
<P ALIGN=CENTER>
<B>УКРАЇНСЬКА МИНУВШИНА </B><BR>
<І>Етнографічний довідник </I><BR>
<OL>
<LI>ТРАДИЦІЙНЕ ЖИТЛО</LI>
<LI>НАРОДНІ ЗАНЯТТЯ</LI>
<LI>УКРАЇНСЬКА КУХНЯ</LI>
<LI>НАЦІОНАЛЬНЕ ВБРАННЯ</LI>
</OL>
</Р>
</BODY> </HTML>
ПРИКЛАД (маркований список)
файл у форматі HTML:
<HTML> <HEAD> <ТІТLЕ>Моя перша НТМL-сторінка</ТІТLЕ> </HEAD>
<BODY>
<Н1 ALIGN=CENTER>УKPAЇHCЬKA МИНУВЩИНА </H1><BR>
<Н2 АLIGN=СENTER>Етнографічний довідник </H2><BR>
<Р ALIGN= CENTER><B>УKPAЇHCЬKA КУХНЯ </В> </Р>
<UL>
<LI>ПОВСЯКДЕННА Й СВЯТКОВА ЇЖА ТА НАПОЇ</LI>
<LI>РЕЖИМ І СЕЗОННІСТЬ ХАРЧУВАННЯ, ХАРЧОВІ
ЗАБОРОНИ </LI>
<LI>ОБРЯДОВА ЇЖА</LI>
</UL>
</BODY> </HTML>
ПРИКЛАД (список описів):
Файл у форматі HTML:
<HTML> <HEAD> <ТІТLЕ>Моя перша НТМL-сторінка</ТІТLЕ> </HEAD> <BODY> <Н1 ALIGN=CENTER>УKPAЇHCЬKA МИНУВЩИНА
</H1><BR>
<Н2 ALIGN=CENTER>Eтнoгpaфiчний довідник</Н2><ВR>
<Р ALIGN==CENTER><B>OБPЯДOBA ЇЖА</В> </Р>
<DL> <DT><B>ПACKA</B></DT>
<DD>весняний обрядовий хліб, який готували до Великодня. Дуже здобне вчинене тісто на яйцях, маслі, сметані, олії, цукрі добре вимішували і ставили у тепле місце сходити. </DD>
<DT><B><кутя</B>
<DD>подається на стіл у Святий вечір, у переддень Різдва. На Правобережжі кутю готували з пшениці, а на сході - з ячменю і зап-равляли тертим маком, горіхами, медом і узваром. </DD> </DL> </BODY> </HTML>
Гіпертекстовий документ – це документ, який містить пов’язані посилання (гіпертекстові посилання) на інші документи, дозволяючи здійснювати переходи між ними за допомогою натискання вказівником миші на гіперпосиланні.
Гіпертекстове посилання складається з 2 частин: вказівника і адресної частини (URL). Вказівник – текст (або графічне зображення), на якому користувач повинен клацнути, для того, щоб перейти в інше місце. URL – вказує адресу, з якої браузер буде завантажувати документ, коли користувач підведе до неї вказівник і натисне кнопку мишки. Текстові вказівники, як правило, підкреслені і виділені кольором.
Щоб дізнатись чи є елемент сторінки гіпертекстовим посиланням слід підвести до нього вказівник мишки, якщо вказівник набере вигляду долоні, елемент є посиланням.
Будь-який текст може бути гіпертекстовим вказівником в HTML, незалежно від його розмірів або використаного форматування.
Формат адресного вказівника:
<A HREF= “URL”>текст вказівника</A>
Літера А у тегу <A HREF> означає вказівник, а HREF – гіпертекстове посилання.
Між початковим і кінцевим тегами знаходиться текст вказівника або зображення, які є гіпертекстовими посиланнями на документ, (або область документа), вказаний у значенні <A HREF= “URL”>.
Можливі значення:
http://... - створює посилання на WWW-документ;
ftp://... - створює посилання на ftp-сайт або розташований на ньому файл*
Якщо тип з'єднання і адреса машини не вказані, відправною точкою є адреса поточного документа. Це дозволяє використовувати відносні посилання. Наприклад, посилання <А HREF = «docs/title.htm»> Документація </А> зроблене на файл title.htm у папці docs.
ПРИКЛАД (поєднання гіпертекстовими посиланнями двох файлів)
1. Створити файл l.htm:
<HTML> <HEAD> <ТІТLЕ>Моя перша НТМL-сторінка</ТІТLЕ> </HEAD>
<BODY>
<Н1 ALIGN=CENTER> НАРОДНІ ВІРУВАННЯ, ДЕМОНОЛОГІЯ, КОСМОГОНІЯ </Н1>
<А HREF=«2.htm»>Українська міфологія</А>
</BODY></HTML>
2. Створити файл 2.htm:
<HTML> <HEAD> <TITLE>Пов'язана сторінка</ТІТLЕ> </HEAD>
<BODY>
<НЗ ALIGN=CENTER>Українська міфологія</НЗ>
<Р ALIGN=JUSTIFY> Українська міфологія як сукупність переказів про живу й неживу природу та людину розвивалася на основі давньої загальнослов'янської міфології. В українській міфології у художньо-образній формі знайшли поєднання реальні знання з фантастично-релігійними елементами та повір'ями. </Р>
<А HREF=«l.htm»>Ha початкову сторінку</А>
</BODY>
</HTML>
Гіперпосилання може бути у вигляді графічного зображення:
<А HREF=«URL»> <IMG SRC=«aдpeca файла»></А>
ПРИКЛАД (посилання на адресу в мережі Internet)
Файл у форматі HTML:
<HTML> <HEAD> <ТІТLЕ>Моя перша НТМL-сторінка</ТІТLЕ> </HEAD> <BODY>
<Р ALIGN=CENTER>
<В>УКРАЇНСЬКА МИНУВЩИНА </B><BR>
<І>Етнографічний довідник</І><ВК>
<U>До читача</U>
</Р> <Р ALIGN=RIGHT> По додаткову інформацію за цією темою звертатись: <BR><A
HREF=«http://www.nbuv.gov.ua»> <І>Національна бібліотека Украї-
ни ім.В.І.Вернадського</І></А></Р>
</BODY> </HTML>
У тегу <BODY> можуть визначатись колір тексту гіпертекстового вказівника, в тому числі і того, за яким вже було здійснено переходи.
Атрибути тегу <BODY>:
LINK Задає колір тексту, який є вказівником гіпертекстового посилання. Наприклад: <BODY LINK= # FF1493>.
ALINK Задає колір вказівника активного посилання.
VLINK Задає колір тексту вказівників посилань, за якими вже були