Лекции.Орг


Поиск:




Загальна структура HTML-документу




ЛАБОРАТОРНИЙ ПРАКТИКУМ

для студентів напряму підготовки 6.050101

«Комп‘ютерні науки»

 

денної та заочної форм навчання

 

Всі цитати, цифровий та фактичний матеріал, бібліографічні відомості перевірені. Написання одиниць відповідає стандартам   Підписи авторів________________ «11» червня 2015 р.   Реєстраційний номер електронного лабораторного практикуму у НМВ 51.24-11.06.2015 СХВАЛЕНО На засіданні кафедри інформаційних систем Протокол № 13 від 18.05.2015 р.

 

КИЇВ НУХТ 2015


Web-технології та Web-дизайн. [Електронний ресурс]:.лабораторний практикум для студ. напряму підготовки 6.050101 «Комп‘ютерні науки» денної та заочної форм навчання./уклад. Ю.П.Чаплінський, О.В.Субботіна – К.: НУХТ, 2015. – 137 с.

 

Рецензент: Л.Ю.Маноха, канд. техн. наук.

 

Укладачі: Ю.П.Чаплінський, канд. техн. наук,с.н.с.

О.В.Субботіна

 

Відповідальний за випуск: В.В. Самсонов, канд. техн. наук, професор.

 

Подано в авторській редакції

 


ВСТУП

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

Навчальна дисципліна «Web - технології та Web – дизайн» направлена на вивчення студентами базових принципів побудови Web-сторінок та Web-сайтів, опанування основних Web-технологій розробки інтернет-додатків, що базуються на використанні мови HTML, CSS та мов програмування JavaScript, C# і т.д.

 


МЕТА, ЗМІСТ, ПОРЯДОК ПРОВЕДЕННЯ І КОНТРОЛЮ ЛАБОРАТОРНИХ РОБІТ

Мета вивчення дисципліни – ознайомлення студентів з функціональними можливостями та практичним застосуванням сучасних веб-технологій.

Метою лабораторного практикуму є закріплення у студентів знань розділу «Основи мови HTML та Web-дизайну» дисципліни «Web-технологіїта Web-дизайн» та набуття навиків використання сучасних Інтернет-технологій.

Лабораторний практикум включає в себе вісім лабораторних робіт, в яких послідовно розглянуто основні теги мови HTML, приклади використання CSS, створення макетів Web-сторінок.

Лабораторні роботи побудовані на єдиній методичній основі – всі вони містять назву, мету, завдання та список запитань для самоперевірки.

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

З кожної виконаної студентом лабораторної роботи оформлюється індивідуальний звіт, який за результатом захисту оцінюється викладачем. Підсумкові оцінки, отримані студентом за виконання лабораторних робіт, враховуються при виставленні модульної підсумкової оцінки з даної навчальної дисципліни.

 

Завдання дисципліни – формування в студентів вміння розробляти програмні коди веб-сайтів та веб-порталів.

 

У результаті вивчення навчальної дисципліни студент повинен

 

знати: можливості та практичне застосування основних сучасних серверних веб-технологій; принципи та методи розробки веб-сайтів та веб-порталів.

 

вміти: застосовувати методи та інструментальні засоби для проектування веб-застосувань; розробляти програмні коди для веб-сайтів та веб-порталів засобами: ASP.NET, J2EE, HTML, JavaScript, PHP, XML, AJAX.

 


Лабораторна робота 1

Тема: Застосування базових тегів розмітки гіпертексту

Мета: набути навичок створення HTML-сторінки за допоги тегів розмітки гіпертексту.

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

 

1.1 Теоретичні положення

Загальна структура HTML-документу

Мова HTML визначає набір дескрипторів, які можна використовувати або для опису параметрів форматування, або для визначення посилання на іншу Web-сторінку. Всі дескриптори розміщують у кутових дужках (< тег >). Дескриптори зазвичай використовуються парами. Всі об'єкти, що не укладені в кутові дужки, інтерпретатор сприймає як текстові елементи, відображаючи їх на екрані комп'ютера «як є». Спрощена структура документа HTML виглядає таким чином

 

 
 

 

 


Рис.1.1 Спрощена структура документу HTML

 

У HTML є ще одна значна особливість, що відрізняє його від інших мов програмування: практично всі теги даної мови, за винятком деяких окремо обумовлених випадків - парні. Така пара складається з «відкриває» і «закриває» тега, які відрізняються лише наявністю в останньому символу «/» Все, що розташоване між відкривають закриває тегом, обробляється інтерпретатором згідно з алгоритмом, присвоєному даного конкретного тегу. У загальному вигляді програмна рядок HTML з відкриває і закриває тегами виглядає так:

<тег> значення, що обробляється</тег>.

Дана властивість HTML дозволяє використовувати принцип вкладення одного тега в інший, коли оброблюваним значенням однієї команди може служити інша команда. Ось простий приклад вкладення двох тегів один в один:

<тег1>

<тег2> значення, що обробляється </тег2></тег1>

 

УВАГА! При роботі з кодом HTML необхідно запам'ятати одне просте правило: якщо десь в тексті програми зустрічається відкриваючий тег, обов'язково повинен бути присутнім і закриваючий. Недотримання цього правила викличе помилку при обробці такого документа інтерпретатором браузера.

Як видно з ілюстрації, основний, глобальної конструкцією внутрішнього коду веб-сторінки є щось, позначене на малюнку прямокутником з написом "Документ HTML ". Спеціальна команда, покликана " пояснити " браузеру, що він має справу саме з документом HTML, а не з текстовим або, наприклад, графічним файлом. Така команда називається " тег верхнього рівня" і записується так:

<НТМL> Вміст </НТМL>

Тег верхнього рівня - парний, причому його вміст як раз і є весь код HTML, що становить документ. Таким чином, правило застосування даної директиви також очевидно: відкриває тег записується найпершої рядком HTML документа, а закриває - самої останньої.

Заголовок веб-сторінки містить вичерпну інформацію про сам документ, а іноді також спеціальні директиви транслятора, що підказують вбудованому в браузер інтерпретатору HTML правила, за якими слід обробляти код. Необхідно відзначити, що вміст заголовка не відображається в браузері і не впливає на зовнішній вигляд документа: це службова інформація, яка необхідна, насамперед, самому браузеру.

Синтаксис тега заголовка в загальному вигляді виглядає так:

<HEAD> Вміст </HEAD>

З наведеної схеми видно, що розділ HEAD слідує в html-документі безпосередньо за тегом <HTML> і є другою обов'язковою командою, яку необхідно включати в код web-сторінки.

«Зовнішній заголовок», який, як показано на схемі, є вкладеною командою тега <HEAD>. Мнемоніка зовнішнього заголовка записується таким чином:

<ТITLE> Зовнішній заголовок </ TITLE>

Саме він відображається у верхньому полі броузера в якості назви сторінки при її відкритті, і саме значення тега <TITLE> підставляється за умовчанням в відповідне діалогове вікно, коли користувач заносить документ в папку «Вибране».

Остання структурна складова коду web -сторінки - розділ «Тіло документа».

Тіло документа, що описується тегами <BODY> </ BODY>, включає в себе весь основний код розмітки сторінки, який і визначає відображення html - документа на екрані монітора. Основний текст, ілюстрації, елементи навігації і все, що ви хочете продемонструвати відвідувачам вашого сайту, розміщується всередині даного тегу. Перша сторінка

<HTML>

<HEAD>

<ТITLE>Моя перша web-сторінка</TITLE>

</HEAD>

<BODY>

</BOOY>

</HTML>

 

1.1.2 Теги і атрибути

Тег - це деяка команда HTML, яка вказує інтерпретатору браузера, яким чином він повинен обробляти відповідне значення кожної конкретної директиви. Це значення і називається атрибутом тегу. Тег може мати атрибут або не мати його. Наприклад, тег верхнього рівня <HTML> не має атрибутів, а в рядку створення нової таблиці <TABLE BORDER="1" WIDTH="100"> вираз «BORDER =" 1 "WIDTH =" 100 "» є атрибутом тега <TABLE>.

У загальному вигляді синтаксис запису тега HTML в сукупності з його атрибутами виглядає наступним чином:

<ТЕГ ІМ’Я_АТРИБУТУ-1="ЗНАЧЕННЯ" ІМ’Я_АТРИБУТУ-2="ЗНАЧЕННЯ"... ІМ’Я _АТРИБУТУ-n="ЗНАЧЕННЯ">

Специфікація мови HTML дозволяє опускати лапки для наступних видів атрибутів: Атрибути, що записуються тільки малими або великими символами латинського алфавіту і не включають інших символів, наприклад, цифр. Атрибути, що складаються тільки з цифр від 0 до 9. Атрибути, що позначають проміжки часу.

Наприклад, запис атрибутів BORDER = "1" або ALIGN = "CENTER" допустимо представити як BORDER = 1 і ALIGN = CENTER.

 

1.1.3 Регістр запису команд

HTML є одним з небагатьох мов програмування, що не чутливих до регістру, в якому ви записуєте команди (в даному випадку - теги та імена їх атрибутів). Інтерпретатор броузера однаково обробить директиви <HEAD>, <head>, <Head> або <hEaD>. Єдиним винятком з цього правила служать два елементи HTML: адреси URL та escape-послідовності.

 

1.1.4 Escape-послідовності

Web -майстру необхідно, щоб символи відображалися у вікні броузера «як є», тобто як текст, інтерпретатор ж сприймає їх як частину команд розмітки гіпертексту. Для того щоб уникнути проблем при відображенні подібних елементів, і були придумані так звані escape - послідовності, або, як їх ще іноді називають, «нотації символьних об'єктів». Запис escape - послідовності увазі заміну службових символів спеціальними командами, які в процесі інтерпретації документа заміщуються виведеними на екран шуканими знаками. Всі escape - послідовності починаються з символу амперсанд («&») і закінчуються крапкою з комою, а між ними розміщується сама команда, що записується в рядковому регістрі.

 

Таблица 1.1. Найбільш поширені escape-послідовності

Символ Значення Команда
<   >   "   &     ©   ® Символ «меньше, чем»; левая угловая скобка   Символ «больше, чем»; правая угловая скобка   Прямые кавычки   Амперсанд   Неразрывный прогалина (словосочетания, разделенные таким пробелом, не разрываются при переносе)   Символ копирайту   Символ зарегистрированной торговой марки &lt;   &gt;   &quot;   &#38;   &nbsp;     &сору;   &reg;

 

Escape - послідовності записуються в тексті за тими ж правилами, за якими вживаються позначаються ними символи, іншими словами, нотація символьного об'єкта просто вставляється в ту ділянку тексту, де за розрахунками web - майстри повинен слідувати відповідний службовий символ.

Наприклад, рядок html - коду:

На цій сторінці викладені мої &quot думки вголос&quot з даного питання відобразиться у вікні броузера наступним чином:

На цій сторінці викладені мої "думки вголос" з даного питання

Для вставки символу прогалини використовувається символ &nbsp.

 

1.1.5 Переведення рядка, прогалини, табуляція

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

Іншими словами, такі елементи тексту, як

дане словосполучення

або

дане

словосполучення

на екрані монітора будуть виглядати однаковим чином

:дане словосполучення

Таким чином, будь-яку кількість пропусків між словами, відступ, виконаний за допомогою клавіші «Tab», або перетворення рядка за натисканнєм клавіші «Enter» перетворюються при компіляції документа в один символ прогалини. Тому для форматування основного тексту на web - сторінці застосовуються спеціальні теги. Винятком з цього правила може служити тільки текст, позначений спеціальним тегом <PRE> - командою попереднього форматування. Мнемоніка записи цього тегу виглядає наступним чином:

<PRE>

попередньо відформатований текст

</ PRE >

У цьому випадку все, що розташоване між відкриттям та закриттям тегу <PRE>, а в нашому прикладі це вираз «попередньо відформатований текст», відобразиться у вікні броузера із збереженням всіх введених дизайнером прогалин, перекладів рядків і відступів табуляції. Однак зловживати застосуванням даної команди не рекомендується, оскільки в силу несхожості алгоритмів обробки коду HTML різними броузерами можливе спотворення отформатованого таким чином тексту залежно від екранних налаштувань користувачів. Усередині тегу PRE заборонено використовувати інші теги форматування тексту.

 

1.1.6 Коментарі

Код HTML може містити коментарі, призначені як для самого web -майстра, що створює документ, так і для стороннього користувача, який читає лістинг чужої сторінки. І в тому і в іншому випадку коментарі записують з метою уникнути можливої плутанини при вивченні коду html -документа. Коментарі не обробляються інтерпретаторами броузерів, але й не відображаються на екрані, вони залишаються у складі коду web - сторінки «як є».

Коментар відкривається символьної послідовністю, що починається з відкриває кутової дужки, знаку оклику і двох знаків тире: <! -, Закривається ж кілька іншим поєднанням символів: ->.

:<! - текст коментаря ->

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

 

1.1.7 Загальні рекомендації

Творець мови HTML, консорціум W3C, рекомендує включати в якості першого рядка html-коду перед тегом <HTML> так званий дефінітивний визначник, що показує, що дана web-сторінка створена саме з використанням HTML версії 3.2, а не який-небудь інший. Визначник не несе явною функціонального навантаження і не впливає на відображення документа в броузері, однак специфікації вимагають його використання. Синтаксис записаного визначника завжди однаковий:

<! DOCTYPE HTML PUBLIC "- / / W3C / / DTO HTML 3.2 / / EN">

 

1.1.8 Кольорові специфікації

Деякі елементи мови HTML можуть мати в якості атрибутів змінні, що позначають кольори. Ці змінні застосовуються в основному для визначення кольору фону html - документа, кольору тексту або кольору, за допомогою якого відображаються гіперпосилання. Визначити той чи інший колір при створенні web -сторінки можна двома методами: за допомогою завдання спеціальних колірних міток, що позначають назви кольорів словами, або за допомогою шістнадцятирічного цифрового коду, що заміняє ці мітки.

Відомо, що для виведення кольорових зображень на екран монітора застосовується так звана палітра RGB (Red, Green, Blue). Згідно з цим стандартом можна отримати абсолютно будь-який бажаний відтінок шляхом змішування всього лише трьох фарб: червоною, зеленою і синій. За допомогою колірних міток або цифрового коду web - майстер має можливість використовувати в документі HTML будь-який колір, який піддається відображенню в рамках стандарту RGB.

Зрозуміло, колірні нотації, задані за допомогою символьних міток, легше запам'ятовуються і інтуїтивно зрозумілі будь-якому програмісту, хоча б трохи знайомому з англійською мовою. Існує 140 квітів, для яких прийняті стандартні символьні мітки. Квітів ж, які можливо відобразити за допомогою цифрового коду, незрівнянно більше. Більше того, далеко не всі броузери здатні відображати деякі кольори, задані символьної нотацією. Наприклад, Netscape Navigator розпізнає їх значно більше, ніж Microsoft Internet Explorer.

Для позначення кольору шістнадцятковим цифровим кодом прийнятий наступний синтаксис запису: перед самим кодом ставиться символ «#», далі слід набір з шести знаків в шістнадцятковій системі числення. Незважаючи на те що в розпорядженні web - майстри є більше ста колірних міток, на практиці активно використовується лише шістнадцять з них. Саме ці кольори були прийняті в якості стандарту для шестнадцатиколірній палітри VGA. Позначення даних квітів наведено в табл. 1.2.

 

Таблиця 1.2. стандартні кольори

Колір Значення RGB Символьна мітка Цифровий код
Білий Чорний Зелений Світло-зелений Сірий Світло-сірий Жовтий Темно-бордовий Синій Темно-синій Блакитний Смарагдовий Червоний Пурпурний Рожевий Оливковий 255 255 255 0 128 0 0 255 0 128 128 128 192 192 192 255 255 0 128 0 0 0 0 255 0 0 128 0 255 255 0 128 128 255 0 0 128 0 128 255 0 255 128 128 0 White Black Green Lime Gray Silver Yellow Maroon Blue Navy Aqua Teal Red Purple Fuchsia Olive #FFFFFF #000000 #008000 #00FF00 #808080 #C0C0C0 #FFFF00 #800000 #0000FF #000080 #00FFFF #008080 #FF0000 #800080 #FF00FF #808000

Інші кольори, для яких існує символьне позначення, наведені у спеціальному файлі. Пам'ятайте, що для передачі кольорів в html-документі переважніше все ж таки користуватися шістнадцятковим цифровим кодом, тільки так ви можете бути впевнені, що броузер користувача розпізнає необхідний колір коректно.

 

1.1.9 Базові теги розмітки гіпертексту

Існують спеціальні команди, що дозволяють відформатувати текст на екрані саме так, як це необхідно web-майстру.

Для того щоб вивести у складі html-документа текстовий абзац, необхідно укласти відповідний уривок тексту в теги <Р> і </ Р>. Синтаксис запису такої команди виглядає наступним чином:

<Р ALIGN = APГУMEHT>

Текст, що укладається в абзац

</ Р>

Аргументом атрибута «ALIGN» може служити одне з чотирьох логічних виразів, значення яких наведено нижче: RIGHT - вирівнювання тексту по правому краю екрану чи шпальти таблиці; LEFT - вирівнювання тексту по лівому краю екрану або стовпця таблиці; CENTER - вирівнювання тексту по центру екрана або стовпця таблиці; JUSTIFY - вирівнювання тексту по ширині екрану чи шпальти таблиці.

Таким чином, текст, форматування якого всередині абзацу задано тегом < Р ALIGN = JUSTIFY >, буде вирівняний на екрані комп'ютера по всій його ширині. Якщо при використанні тега < Р> не задано ніяких атрибутів, за замовчуванням використовується ліве вирівнювання.

Можна не включати жоден з перерахованих вище аргументів до складу тегу форматування абзацу, оскільки мова розмітки гіпертексту дозволяє використовувати деякі з них як самостійні теги, призначені для позиціонування декількох об'єктів документа у вікні броузера. Використовуються ці теги наступним чином:

<LEFT>

Частина коду HTML

< / LEFT >

Все, що укладено між тегами <LEFT> і < / LEFT > - текст, таблиці, графічні об'єкти, - буде вирівняно по лівому краю екрана.

<CENTER>

Частина коду HTML

</ CENTER >

Все, що міститься між тегами <CENTER> і </ CENTER >, позиціонується по центру екрана.

<RIGHT>

Частина коду HTML

</ RIGHT >

Все, що укладено між тегами <RIGHT> і </ RIGHT >, буде вирівняно по правому краю екрану.

.Якщо ви хочете, щоб усередині текстового блоку броузер відобразив переклад рядка, наприклад, для відділення одного абзацу від іншого, в кінці рядка слід помістити тег <BR>. Наступне слово, що зустрічається за даним тегом, буде перенесено на новий рядок. Прикладом використання цієї команди мо «жет служити наступний уривок коду HTML:

<P>

Цей текст знаходиться на одному рядку екрана. <BR>

А цей текст відобразиться вже з нового рядка.

</ Р>

Можливе використання декількох тегів <BR> поспіль для завдання послідовності з декількох порожніх рядків. Примітно, що команда <BR> не має закриває тега. Іноді тег <BR> містить атрибут CLEAR, який може приймати одне з трьох значень: LEFT, RIGHT або ALL. Зазначені параметри дозволяють переносити текст зі зміщенням нового рядка відповідно до лівої, правої або обом кордонів екрану одночасно. Синтаксис запису цього тега з атрибутом CLEAR такий:

<BR СLЕАR="значення">.

Деякі браузери переносять рядки самостійно, причому розривають рядок в тому місці, де вона виходить за межі екрану. Якщо програмісту необхідно відобразити текстовий рядок фіксованої довжини без переносів, використовується тег <NOBR>

<NOBR> Рядок без переносів </ NOBR >

При використанні даного тега в разі, якщо довжина рядка перевищує ширину екрана, в нижній частині вікна броузера з'являється горизонтальна смуга прокрутки.

Іноді для розстановки логічних акцентів у тексті творцеві web -сторінки доводиться використовувати контекстне виділення будь-яких слів або виразів шрифтом: жирним або курсивним. У цих випадках також необхідно використовувати відповідні директиви HTML:

<В> Текст. виділяється жирним шрифтом </ В >

<I> Текст, що виділяється курсивним шрифтом </ I>

Дані пари тегів можна вкладати одна в іншу. Наприклад, виділити текст жирним курсивним шрифтом можна так:

<В> <I> Текст. виділений жирним курсивним шрифтом </ I > </ В >

Однак творці специфікації мови HTML застерігають програмістів від зловживання цими тегами, оскільки інтерпретатори далеко не всіх сучасних броузерів вміють їх правильно розпізнавати. Саме тому рекомендується використання аналогічних директив, званих «командами логічного виділення». Вони виконують ті ж функції, але синтаксис запису у них дещо інший:

< ЕМ > Текст. виділяється курсивним шрифтом </ ЕМ >

<STRONG> Текст. виділяється жирним шрифтом </ STRONG >

Очевидно, що для виділення тексту жирним курсивним шрифтом можна використовувати вкладення даних тегів один в одного:

<STRONG> < ЕМ > Текст, виділений жирним курсивним шрифтом </ ЕМ > < / STRONG >

Для виділення тексту підкресленням використовується тег <U>. Синтаксис його записі також досить простий:

<U> Підкреслений текст </ U>

Для відображення перекресленого тексту використовується тег <DEL>

<SUB> - Тег, що дозволяє відобразити підрядковий текст.

<SUP> - тег, що дозволяє відобразити надрядковий текст.

<ТТ> - тег, що дозволяє вивести на екран частина тексту фіксованим шрифтом, так званий телетайпную текст.

Використання моноширинних шрифтівДля відображення моноширинних шрифтів використовуються дескриптори <TT>, <CODE>, <KBD>, <SAMP>Для смислового виділення фрагментів тексту, крім вище зазначених, ще є дескриптори <DEL> і <INS>.Тег <DEL> може застосовуватися для позначення тексту, який буде знищено (виглядає як закреслений текст).Тег <INS> може застосовуватися для надання смислового акценту матеріалу, який щойно з'явився на сторінці (текст з ознакою підкреслення).<BIG> - Тег, що дозволяє вивести частину тексту великим шрифтом.

ПРИМІТКА При обробці коду HTML інтерпретатором броузера розмір шрифту вираховується не в пікселах, а в умовних пунктах нелінійного розміру, величина такого «пункту» залежить від використовуваної вами реалізації броузера. «Нормальний» (що підставляється за умовчанням) шрифт має висоту три пункти.

Використання тега <BIG> збільшує «нормальний» розмір шрифту на один пункт. Синтаксис запису цієї команди такий:

<BIG> Текст </ BIG >

Щоб збільшити розмір шрифту більш ніж на один пункт, можна використовувати послідовність з кількох тегів <BIG>:

<BIG> <BIG> Тeкст </ BIG > </ BIG >

Аналогічно зменшення розміру шрифту на один пункт можна домогтися з використанням тега <SMALL>. Мнемоніка записи цього тега виглядає наступним чином:

<SMALL> Текст </ SMALL >

Припустимо також використання декількох вкладених елементів <SMALL>, подібно до того, як це було показано для тега <BIG>.

Слід пам'ятати, що смислове виділення тексту найкраще застосовувати тоді, коли це дійсно необхідно, оскільки текст, зайво що рясніє жирними, курсивними або підкресленими словами, важкий для сприйняття, при його читанні сильно втомлюються очі і розсіюється увага. Контекстне виділення можна використовувати для відображення цитат або ключових фраз, проте велику частину тексту краще виводити стандартним шрифтом «нормального» розміру без виділення.

 

1.1.10 елемент <FONT>

Тепер ви знаєте, що керувати розміром виведеного на екран тексту можна за допомогою тегів <BIG> і <SMALL>. А як програміст може змінювати інші параметри шрифту? Для цього й існує директива <FONT>.

Як відомо, розмір шрифту в стандарті HTML позначається умовними, пунктами, причому всього їх налічується сім. Однак не всі броузери розуміють термін «пункт» однаково. Наприклад, при відображенні документа в Microsoft Internet Explorer розміри всіх шрифтів різні, за винятком пунктів 2 і 3 - вони відображаються шрифтом однієї висоти, яка дорівнює величині, прийнятій за замовчуванням, і залежить від користувача налаштувань броузера. У Netscape Navigator абсолютно однаково відображаються пункти 4 і 5, а так само 6 і 7, вони більше по висоті, ніж пункт 3, який є «нормальним» розміром шрифту.

ПРИМІТКА Слід пам'ятати, що деякі броузери, наприклад Microsoft InternetExplorer, дозволяють настроювати параметри тексту, відображуваного в складі документів HTML, шляхом зміни розміру шрифту, що підставляється інтерпретатором броузера за замовчуванням. Це означає, що параметри елемента <FONT>, так само як і інших тегів, керуючих розміром шрифту, можуть змінюватися залежно від користувача налаштувань. З тієї ж причини можливий ефект порушення компонування сторінки, оптимізованої для перегляду в броузері зі стандартними настройками. Уникнути цього можна, уклавши всі елементи документа в невидиму таблицю з фіксованою шириною, заданою в пікселах.

У загальному вигляді синтаксис запису тега <FONT> виглядає наступним чином:

<FONT FACE="значеніе1" SIZE="значеніе 2" COLOR="значеніе 3"> текст

</ FONT >

Значенням атрибута FACE є назва шрифту, який ви плануєте використовувати для відображення тексту, укладеного в теги <FONT> </ FONT >. Якщо, наприклад, замість параметра " значення! " у наведеному прикладі ви підставите " Arial", позначений тегом <FONT>, текст буде відображатися саме цим шрифтом.

УВАГА Пам'ятайте, що набір шрифтів, встановлених на комп'ютерах відвідувачів вашого сайту, може бути різним, і якщо ви вкажете в атрибуті FACE тега <FONT> шрифт, відсутній в системі користувача, контекстного екрані його монітора стане нечитабельним. Для того щоб уникнути помилок при відображенні тексту в броузерах кінцевих користувачів, використовуйте вказівки тільки на стандартні шрифти, наявні у складі більшості броузерів: Arial і New Times Roman. А краще взагалі опускати даний атрибут, дозволивши броузеру підставляти при інтерпретації коду той шрифт, який використовується за умовчанням.

Атрибут SIZE вказує на розмір шрифту, яким слід виводити текст. Параметр цього атрибута, позначений у нашому прикладі як " значеніе2 ", може бути описаний або абсолютної, або відносною величиною. Абсолютна величина увазі використання як параметр цілого числа в діапазоні від 1 до 6, що вказує на висоту шрифту в пунктах. Відносна ж величина, що позначається цілим числом зі знаком плюс або мінус (наприклад, +2 чи -1), - це кількість пунктів, які слід додати або відняти від розміру шрифту, використовуваного броузером за замовчуванням. Так, запис <FONT SIZE="+1"> говорить про те, що розмір поміченого таким тегом тексту буде на один пункт більше, ніж звичайний текст документа.

Замість значення атрибута COLOR підставляється або цифровий код потрібного кольору, або позначає цей колір символьна мітка.

Очевидно, що при використанні тега <FONT> будь-який з його атрибутів може бути опущений. Прикладом запису такої команди може служити наступний рядок коду HTML:

<FONT FACE="Arial" SIZE="+2" COLOR="#0000FF">

уривок тексту

</ FONT>

 

Таблиця 1.2 Розмір шрифтов

 

Розмір 1 8 пунктів
Розмір 2 10 пунктів
Розмір 3 12 пунктів
Розмір 4 14 пунктів
Розмір 5 18 пунктів
Розмір 6 24 пунктів
Розмір 7 36 пунктів

Дескриптор <BASEFONT> змінює параметри шрифту для всієї сторінки в цілому

<BASEFONT SIZE="4">

УВАГА! Пам'ятайте, що деякі броузери старих версій не підтримують директиву <FONT>. Серед них - текстовий броузер для UNIX- сумісних платформ, який носить назву Lynx.

 

1.1.11 Атрибути тега <BODY>

 

Про тег <BODY>, обозначающем тіло (основну частину) документа HTML, ми вже говорили на початку цього уроку. Необхідно додати лише те, що дана команда також може мати атрибути, використання яких у ряді випадків буває досить корисно, а іноді - просто необхідно.

У загальному вигляді синтаксис запису тега <BODY> з усіма допустимими атрибутами виглядає так:

<BODY BACKGROUND="URL" BGCOLOR="значеніе1" ТЕХТ="значеніе2" LINK="значеніе3" VLINK="значеніе4" ALINK="значеніе5">

тіло документа HTML

<BODY>

Атрибут BACKGROUND дозволяє дизайнеру помістити на web - сторінку якийсь фоновий малюнок, записавши як параметр атрибуту URL цього малюнка. URL можна задавати або у вигляді повної адреси Інтернету (наприклад, " http://www.server.ru/imaes/имя_файла.gif "), або у вигляді скороченого адреси із зазначенням шляху до директорії на поточному сервері, в якій зберігається дане зображення (наприклад, ".. images / імя_файла.gif "). Допускається просто вказувати ім'я графічного файлу, якщо він зберігається в тій же директорії, що і використовує його файл HTML. Дане зображення може мати будь-який розмір, оскільки при інтерпретації коду воно багаторазово повторюється, заповнюючи весь доступний простір у вікні браузера.

ПОРАДА Для того щоб уникнути неадекватності відображення того чи іншого кольору різними браузерами, наприклад, коли web - дизайнер вирішив застосувати на сторінці заливку -якого рідко використовуваного відтінку, рекомендується наступний підхід: створіть в будь-якому відповідному редакторі графічний файл потрібного кольору розмірами 1x1 піксел, після чого вкажіть його в якості фонового зображення, включивши URL цього малюнка в параметр атрибуту BACKGROUND тега <BODY>.

Атрибут TEXT дозволяє задати колір тексту для всього документа в цілому. Але не забувайте, що параметр, призначений даного атрибуту в тезі <BODY>, може бути змінений в певній ділянці тексту шляхом використання команди <FONT> з атрибутом COLOR. Для того щоб призначити фоновий колір всьому документу, використовується атрибут BGCOLOR. У цьому випадку web - сторінка буде цілком заповнена рівномірної заливкою зазначеного кольору.

ПРИМІТКА Атрибути BGCOLOR і BACKGROUND не виключають один одного, проте в останнього є пріоритет. Це означає, що у разі, коли задані обидва ці атрибута, спочатку виконується заливка web -сторінки кольором, призначеним в атрибуті BGCOLOR, поверх якої розміщується зображення, задане атрибутом BACKGROUND.

УВАГА Якщо ви не використовуєте графічних зображень як шпалер, а основним кольором html - документа взяли білий, використання атрибуту BGCOLOR з параметром "# FFFFFF " у складі тега <BODY> обов'язково. Обумовлено це правило наступною причиною: деякі броузери (наприклад, Microsoft Internet Explorer) дозволяють користувачам довільно змінювати фоновий колір завантажуваних web - сторінок, якщо він не заданий явно. Врахуйте, що нехтування явною вказівкою фонового кольору може викликати повне порушення розробленого вами дизайну.

Атрибут LINK дає web -майстру можливість призначити колір, яким відображається не відвідана гіперпосилання, тобто посилання, до якої відвідувач даного web - сайту ще не звертався. За замовчуванням їй присвоюється значення " blue " (I0000FF). У свою чергу, атрибут VLINK вказує на колір відвіданого посилання, значення якої за замовчуванням - " purple " (# 800080). І нарешті, атрибут ALINK визначає колір активного гіперпосилання, тобто колір, який гіперпосилання приймає з моменту натискання на неї курсором миші до моменту завантаження викликається нею ресурсу. За замовчуванням цей атрибут також має значення "purple".

Очевидно, що значення всіх атрибутів тега <BODY>, крім атрибута BACKGROUND, являють собою позначення кольорів символьними мітками або шістнадцятиричним цифровим кодом.

ПРИМІТКА При виборі квітів документа, тексту і гіперпосилань слід дотримуватися певної обережності, оскільки кольору, контрастно відображаються на кольоровому моніторі, можуть бути невиразні на чорно- білому. Уникнути подібних помилок можна за допомогою нескладного прийому: зробіть знімок екрана («скріншот») в момент, коли ваша web - сторінка завантажена в броузер (для цього необхідно натиснути кнопку Print Screen на клавіатурі комп'ютера), завантажте отримане зображення в графічний редактор і перегляньте його в режимі grayscale (256 відтінків сірого). Якщо обрана вами колірна схема і раніше виглядає контрастно, її можна сміливо застосовувати, якщо ні - доведеться використовувати інші кольори.

ПОРАДА Підбираючи кольори для web -сторінки, пам'ятайте, що використовувана вами колірна схема має бути «коректної». Читання тексту не повинно викликати труднощів, очі відвідувачів вашої сторінки не повинні втомлюватися. Пожалійте зір користувачів, не пишіть помаранчевим по зеленому.

УВАГА Встановивши одне із значень колірних параметрів вашої сторінки, жорстко задавайте та інші значення. Деякі броузери дозволяють користувачеві довільно міняти колір фону документа або виводиться на екран тексту, якщо вони не вказані явно. У цьому випадку заданий вами колір тексту може збігтися з кольором фону, встановленим у броузері користувача за замовчуванням, в результаті чого текст стане нечитабельним. Зміна одного з кольорових параметрів без зміни решти неприпустимо. Виняток можна зробити лише в тому випадку, коли в якості фонового кольору web -сторінки використовується білий. Ось приклад використання тега <BODY> з усіма допустимими атрибутами:

< BODY BACKGROUND = " http://www.myserver.com/images/back.jpg " BGCOLOR = " # 000000 " TEXT = " # FFFFFF " LINK = " # 008000 "

VLINK = " # 800080 " ALINK = " # FF0000 " >

Тіло документа HTML

</ BODY>

 

Заголовки

Редактор Microsoft Word крім звичайного і декількох допоміжних стилів написання тексту дозволяє створювати документ з використанням так званих стилів заголовка. У цьому випадку задана користувачем фраза позиціонується на сторінці щодо її центру і виводиться на екран великим жирним шрифтом. Більше того, у розпорядженні оператора є кілька різних стилів заголовка, що відрізняються в основному вертикальним розміром символів.

Аналогія з файлами Microsoft Word приведена тут не випадково: вона допоможе вам зрозуміти призначення заголовків, що застосовуються в документах HTML. Специфікація HTML дозволяє програмісту використовувати шість різних стилів, або, як їх ще прийнято називати, логічних рівнів заголовків. Для того щоб відобразити заголовок на web - сторінці, необхідно використовувати тег < Нn >, де n - ціле число від 1 до 6, що позначає номер рівня заголовка, причому самим верхнім рівнем прийнято вважати 1.

Синтаксис запису цієї команди в загальному вигляді такий:

< Нn АLIGN = " параметр " > Текст заголовка </ Нn >

де n = 1... 6.

Атрибут ALIGN дає можливість web -майстру визначити розташування заголовка у вікні броузера. Параметр цього атрибута може приймати одне з трьох можливих значень:

RIGHT - позиціонування заголовка по правій межі документа;

LEFT - позиціонування заголовка по лівій межі документа;

CENTER - позиціонування заголовка по центру документа.

За замовчуванням заголовки вирівнюються по лівому краю

страніци.

Вот приклад використання даного тега:

<Н1 ALIGN = " CENTER " >

ДOБPO ПРОСИМО НА МОЮ СТОРІНКУ!

</ Н1>

На жаль, не існує будь-яких чітко сформульованих правил застосування заголовків в документах HTML, за винятком одного і цілком очевидного: вони повинні слідувати в порядку пріоритету, тобто з 1 по б, але не навпаки. В принципі дане правило диктується не внутрішніми законами мови розмітки гіпертексту, а елементарної людської логікою, його порушення не викличе появи помилок. Не рекомендується також включати в документи заголовки нижче рівня < Н4 >, оскільки вони відображаються значно дрібнішим шрифтом, ніж основний текст web -сторінки, що ускладнює сприйняття інформації. У всіх інших випадках використання даної команди - справа смаку і естетичних уподобань автора проекту.

 

Списки

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

входження 1

входження 2

входження 3

Входження n

Мовою HTML подібний маркований список можна представити за допомогою команди <UL> наступним чином:

<UL ТУРЕ="параметр">

<LI> Входження 1 </ LI>

<LI> Входження 2 </ LI>

<LI> Обходження 3 </ LI>

<LI> Обходження n </ LI>

</ UL>

Атрибут TYPE дозволяє програмісту керувати так званим «буллет стилем», тобто зовнішнім виглядом і формою позначають кожне входження міток. Параметр цього атрибута може приймати одне з трьох значень:

DISC - мітки відображаються у вигляді заповнених чорним кольором кіл;

CIRCLE - мітки відображаються у вигляді порожнистих кіл;

SQUARE - мітки відображаються у вигляді заповнених чорним кольором квадратів.

За замовчуванням, тобто у разі, коли в маркірованому списку тег <UL> записується без атрибутів, TYPE = " DISC ".

Нумерований список дозволяє відображати упорядковану інформацію, яка виводиться на екран у вигляді позначеногоцифрами перерахування, наприклад:

1. входження 1

2. входження 2

3. входження 3І т. д.

У документі HTML нумерований список можна представити з використанням тега <OL>:

<OL ТУРЕ="параметр" START="значеніе">

<LI> Входження 1 </ LI>

<LI> Обходження 2 </ LI>

<LI> Входження 3 </ LI>

</ OL>

Атрибут TYPE, так само як і у випадку з маркованим списком, дозволяє змінювати буллет-стиль, тобто визначати вид маркерів, якими будуть позначатися складові список значення. У складі атрибута TYPE команди <OL> можна використовувати один з наступних параметрів:

"1" - звичайні арабські числа 1, 2, 3 і т. д.

"I" - римські цифри в заголовному регістрі I, II, III, IV і т. д.

"i" - римські цифри в рядковому регістрі i, ii, iii і т. д.

"А" - символьна маркування в заголовному регістрі А, В, С і т. д.

"а" - символьна маркування в рядковому регістрі а, b, с і т. д.

Атрибут START дозволяє задавати позицію, з якою слід почати маркування. Наприклад, якщо атрибут TYPE заданий як "1", а атрибут START-як "5", то нумерація почнеться з цифри 5. Якщо ж TYPE має значення "А", аSTART - "D", то маркування розпочнеться з символу D.

Атрибути START и VALUE. START Дає можлівість вібрато номер початкова Елемент списку, відмінний від 1. VALUE - примусово прізначає будь -якому елементу потрібний номер.

УВАГА При використанні атрибута START необхідно уважно стежити, - щоб його значення відповідало типу маркування, зазначеному в атрибуті TYPE. Запис <OL TYPE="I" START="A"> не допускається.

Навпаки, запис < OL TYPE = " A"START = " I" > цілком допустима.

За замовчуванням значення атрибута TYPE приймається як " 1 ", нумерація починається з першого елемента в кожному з типів маркування.

Можливе створення так званих вкладених списків, реалізованих за допомогою розміщення однієї пари тегів в інший, наприклад, команд створення маркованого списку всередині нумерованого. Проста реалізація вкладеного списку має вигляд:

входження 1

Входження 1-а

входження 1-6

входження 2

Входження 2-а

входження 2-6

Мовою HTML такий список можна представити таким набором команд:

<OL>

<LI> Обходження 1 </ LI>

<UL>

<LI> Обходження l-a </ LI>

<LI> Входження 1-б <LI>

</UL>

<LI> Входження 2 </ LI>

<UL>

<LI> Входження 2-a </ LI>

<LI> Обходження 2-6 </ LI>

</ UL>

</ OL>

У межах одного маркерного списку могут буті маркери різніх стілів. <UL ТУРЕ="circle">

<LI> Номер 1 </ LI>

<LI> Номер 2 </ LI>

<LI Type="disc"> Номер 3 </ LI>

<LI> Номер 4 </ LI>

</ UL>

Слід зазначити, що тег LI може включати ті ж атрибути, що і теги самих списків <UL> і <OL>. Якщо, наприклад, входження маркованого списку відображаються прийнятим за замовчуванням маркером DISC, але одне з найбільш значущих по контексту входжень програмісту необхідно позначити маркером SQUARE, можна записати тег даного елемента таким чином:

<LI ТYРЕ="SQUARE"> Входження </ LI>.

Аналогічно, один з пунктів нумерованого арабськими цифрами списку можна помітити символьним маркером, записавши відповідний тег наступним чином: <LI ТУРЕ="А"> Входження </ LI>. Важливо лише стежити за тим, щоб вказуються в тезі LI параметри атрибутів збігалися з типом використовуваного списку.

Крім нумерованих і маркованих списків мова розмітки гіпертексту дозволяє створювати списки визначень, для чого застосовуються команди <DL>. Зовнішній вигляд простого списку визначень такий:

Тема групи входжень 1

Входження 1-а

входження 1-6

Тема групи входжень 2

Входження 2-а

входження 2-6

У вигляді коду HTML цей список можна представити таким чином: <DL>

<DТ> Тема групи входжень 1

<DD> Входження 1-а

<DD> Входження 1-6

<DT> 3aголовок групи входжень 2

<DD> Входження 2-а

<DD> Входження 2-6

</DL>

Закриваючі теги для команд <DТ> і <DD> списку визначень можна опустити. Дані теги можуть використовуватися і самостійно: <DT> для відображення термінів, що виділяються в тексті шрифтом, a <DD> - для їх розшифровки, поміченої відступом. У цьому випадку наявність відповідних закривають тегів обов'язково.

 

1.1.14 Створення блоків цитат

Використовуються для створення блоків цитат на тлі іншого тексту дескриптори <BLOCKQUOTE> </ BLOCKQUOTE > і в середині тексту <Q> </ Q>. Дескриптор <Q> </ Q> багатьма браузерами не підтримується.

 

1.1.15 Завдання розмірів полів сторінки

 

Поля сторінки - полоси чистого простору між уявної рамкою, в якій розміщене вміст сторінки, і межами вікна браузера. Поля дозволяють сторінці надати охайний вигляд. За замовчуванням більшість Web- браузерів відображає сторінки з полями рівними приблизно 10 пикселам. IE допускає використання спеціальних атрибутів - LEFTMARGIN, RIGHTMARGIN, TOPMARGIN, BOTTOMMARGIN, а в Netscape - MARGINWIDTH, MARGINHEIGHT.приклад:

<BODY LEFTMARGIN="100" RIGHTMARGIN="100">

Для вставки символу пробілу.- використовується символ &nbsp.

 

1.2. Контрольні питання

1. Яка структура HTML документа?

2. Що таке тег?

3. Які є способи створення текст жирним шрифтом?

4. Які є способи створення текст курсивним шрифтом?

5. Які є види списків і як вони відрізняються між собою?

 

Завдання для виконання роботи

1. Відкрити програму “Блокнот” створити структуру документу HTML і зберегти даний файл з розширенням html (htm).

2. Задати заголовок Web-документу (TITLE)

3. Набрати текст не форматуючи. Переглянути результат

4. Зробити один абзац преформатованого тексту (тег Pre)

5. Зробити абзаци (тег P)

6. Зробити примусовий перехід на новий рядок (тег BR)

7. Використати спеціальни символи: додаткові прогалини, кавички, знак відсотків (Escape-послідовності)

8. Зробити вирівнювання абзацу тексту (атрибут ALIGN тегу P чи інші теги)

9. Зробити текстовий рядок без переносів

10. Зробити текст жирним шрифтом (двома способами)

11. Зробити текст курсивним шрифтом (двома способами)

12. Зробити текст жирним і курсивним шрифтами одночасно

13. Зробити підкреслений текст

14. Зробити закреслений текст (двома способами)

15. Зробити підрядковий текст

16. Зробити надрядковий текст

17. Зробити телетайпний текст

18. Збільшити розмір тексту

19. Зменшити розмір тексту

20. Виставити тип шрифту, розмір і його колір (FONT)

21. Задати фоновий колір Web-сторінки

22. Задати фоновий малюнок Web-сторінки

23. Зробити шість типів заголовків

24. Зробити нумерований список

25. Зробити нумерований список, який починається із заданого числа

26. Зробити маркований список

27. Зробити вкладений список

28. Зробити список визначень

29. Додати коментарі

30. Вставити додаткові прогалини

31. Вставка цитат

32. Використати різні маркери для списків

33. Задати розміри полів сторінки

 

 

Лабораторна робота 2

Тема: Використання графічних об’єктів та гіперпосилань в документах HTML

Мета: набути навичок використання графічних об’єктів та гіперпосилань в документах HTML

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

 

2.1 Теоретичні положення

2.1.1 Вставка графічних зображень

Дескриптор <IMG> дозволяє вставити в текст Web-сторінки графічні зображення.

Приклад:

<IMG SRC=”ris.jpg”>

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

Якщо файл розміщений у вкладеній папці, то треба вказати шлях до цього файлу.

<IMG SRC=”images/ris.jpg”>.

З метою вирівнювання по горизонталі використовується дескриптор наприклад <CENTER>. Якщо треба розмістити зображення з нового рядку то використовується дескриптори <P> чи <BR>.

Приклад:

<BR><CENTER><IMG SRC=”images/ris.jpg”></CENTER >

В якості банерів використовуються зображення з розмірами, приблизно рівними 450 пікселів по горизонталі і 100 пікселів по вертикалі. Подібний формат відповідає вимогам ефективного заповнення простору вікна браузера. Банери, як правило зберігаються у вигляді файлів типу GIF.

 

2.1.2 Додання фонової графіки

Атрибут BACKGROUND, використовується в контексті дескриптора <BODY>, дозволяє дати Web-сторінці графічний фон. Подібні зображення, як правило не великого розміру; браузер автоматично розміщує його копії таким чином, щоб повністю заповнити поверхню сторінки. (www.nepthys.com/textures imagine.metanet.com).

Приклад:

<BODY BACKGROUND=”1.jpg”>

 

2.1.3 Обрамлення графічного зображення

Атрибут BORDER дозволяє заключити графічне зображення, яке розміщене на Web-сторінці, в кольорову рамку. Також у випадку коли графічне зображення є гіперпосиланням (див. далі) атрибут BORDER із значенням 0 забирає автоматично створену рамку.

Приклад:

<CENTER><IMG SRC=”images/ris.jpg” BORDER=”10”></CENTER >

 

2.1.4 Задання параметрів обтікання графіки текстом

Атрибут ALIGN дозволяє встановити правила співіснування на Web-сторінці фрагментів тексту і графічних зображень. Атрибут ALIGN може мати два значення – left та right. Значення left примушує браузер розмістити зображення зліва від тексту, а right – справа від нього.

Приклад:

<CENTER><IMG SRC=”images/ris.jpg” ALIGN=” left”></CENTER>TEXT

Якщо необхідно, щоб форматуванню підлягав тільки певний фрагмент тексту, треба застосувати дескриптор <BR> з атрибутом CLEAR, який вказує позицію тексті, починаючи з якої дії механізму обтікання графіки текстом відмінюється. Значення left, right та all атрибута CLEAR дозволяють визначити, з якого боку – лівого, правого чи обох боків – текст далі буде вільний від графічних зображень.

Приклад:

<BR CLEAR=” left”>

 

2.1.5 Вирівнювання тексту відносно графіки

Атрибут ALIGN із значеннями top (зверху) middle (посередині) bottom (знизу) дозволяє задати вертикальне положення фрагменту тексту відносну меж сусіднього графічного зображення. По замовченню Web-браузери вирівнюють текст по положенню нижньої кромки зображення.

Приклад:

<P><IMG SRC=”images/ris.jpg” ALIGN=”top”>TEXT

Якщо атрибут ALIGN вже був застосований для задання параметра обтікання графіки текстом, встановити признак вирівнювання тексту відносно графіки в межах конкретної Web-сторінки буде неможливо.

Атрибуту ALIGN можуть бути присвоєні також значення texttop, absmiddle, absbottom (які не входять в стандарт HTML і обробляються не всіма браузерами), які є аналогічні по смислу top, middle та bottom відповідно.

 

2.1.6 Пуста область навколо графічного зображення

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

Атрибут HSPACE надає можливість задання ширини чистої області зліва і справа від зображення, а атрибут VSPACE керує значенням висоти пустих стрічок зверху і знизу.

Приклад:

<P><IMG SRC=”images/ris.jpg” ALIGN=”left” HSPACE=”20” VSPACE=”20”>

 

2.1.7 Побудова горизонтальної лінійки

Дескриптор <HR> дозволяє побудувати на Web-сторінці горизонтальну лінійку, яка являє собою лінію, котра візуально розділяє групу елементів сторінки. По замовченню Web-браузери будують лінійку товщиною 2 піксели. Атрибут SIZE задає горизонтальне значення товщини. Атрибут WIDTH задає значення, яке виражене у відсотках від поточного горизонтального розміру вікна браузера.

Приклад:

<HR SIZE=”10” WIDTH=”50%” >

 

2.1.8 Побудова списків з графічними маркерами

Для того щоб скористатися графічними маркерами, треба застосувати атрибут ALIGN із одним із значень top (зверху) middle (посередині) bottom (знизу), що дозволить відповідним чином вирівняти рядок тексту елемента списку по вертикалі відносно межі маркеру. Також атрибут HSPACE може покращити зовнішній вигляд даних завдяки встановленню ширини чистої стрічки, яка відділяє маркер від тексту елементу списку.

(www.grapholina.com/Graphics)

(www.theshockzone.com)

Приклад:

<UL>

<BR>< IMG SRC=”images/ris.jpg” ALIGN=”middle”>TEXT1

<BR>< IMG SRC=”images/ris.jpg” ALIGN=”middle”>TEXT2

<BR>< IMG SRC=”images/ris.jpg” ALIGN=”middle”>TEXT3

--

</UL>

 

2.1.9 Встановлення розмірів зображення

При встановлених розмірах зображення Web-браузер швидше завантажує дане зображення. Атрибути WIDTH та HEIGHT дозволяють встановлювати розміри зображень (якщо користувач відключить в своєму брудері засоби обробки зображень, побачить зображення саме в тих пропорціях, які були задумані), зменшувати чи збільшувати їх. Зменшити графічне зображення краще за допомогою графічних редакторів, таких як Adobe Photoshop. Якщо значення вводяться у відсотках відносно розмірі вікна браузера, достатньо задати тільки одне із них, ширину чи висоту, - інше браузер визначить самостійно, зберігши пропорції.

Приклад:

<BR>< IMG SRC=”images/ris.jpg” WIDTH=”230” HEIGHT=”300” ALIGN=”left”>

 

Використання зображень низької дозволяючої здатності

Атрибут LOWSRC дозволяє відтворити у вікні браузера зображення низької дозволяючої здатності під час пересилання на комп’ютер користувача вихідного високоякісного зображення (Атрибут LOWSRC не входить в стандарт HTML і не підтримується багатьма браузерами).

<BR>< IMG SRC=”Hi.jpg” LOWSRC=”Low.jpg” WIDTH=”230” HEIGHT=”300” ALIGN=”left”>

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

 

Наступні операції над зображеннями треба виконувати за допомогою графічних редакторів (наприклад Adobe Photoshop): перетворення формату зображення в gif чи jpeg; зменшення розмірів зображення; обрізка зображення; зменшення дозволяючої здатності зображення; зменшення глибини кольору зображення; застосування ефекту прозорості фону зображення; зображення з чергуванням формату GIF; застосування інваріантної політри для кольорів.

 

2.1.10 Побудова гіперпосилань, які вказують на іншу Web-сторінку.

 

Для зв’язку фрагменту тексту чи графіки, які представлені на одній Web-сторінці, з іншого боку застосовується дескриптор <A>. При побудові гіперпосилань, які вказують на іншу Web-сторінку завжди треба вказувати URL з абсолютною адресою сторінки. Абсолютною адресою називається адреса, яка вміщує відомості про місцезнаходження сторінки (наприклад http://www.ukr.net).

Приклад:

<P><A HREF=”http://www.ukr.net”> гіперпосилання</A></P>

 

2.1.11 Побудова гіперпосилань, які вказують на Web-сторінку в межах власного сайту.

Якщо створюється гіперпосилання в межах власного сайту, більш доцільно використовувати відносний URL.

Приклад:

<P><A HREF=”katalog/list2.html”> гіперпосилання</A></P>

 

Використання засобів навігації для сайту.

Колекція графічних зразків, які призначені для побудови засобів навігації: (www.bycarel.com/buttons) та (www.station4.com/buttonfactory)

Приклад:

<A HREF=”index.html”><IMG SRC=”homebutton.gif”></A>

без рамки

<A HREF=”index.html”><IMG SRC=”homebutton.gif” BORDER=”0”></A>

 

2.1.12 Створення гіперпосилання на об’єкт тіє ж сторінки

Для того, щоб побудувати посилання на область в середині поточної сторінки, спочатку треба дати назву цій області. Для цього використовується дескриптор <A> з атрибутом <NAME>. Ім’я повинно мати тільки букви і/або цифри. Далі коли сторінка вже поіменована на неї можна посилатися як звичайно, за допомогою дескриптора <A> і атрибута <HREF>.

Приклад:

<BR> <A NAME=”END”>TEXT</A>

Далі:

<BR> <A HREF=”#END”>TEXT</A>

 

2.1.13 Створення гіперпосилань на окремі області іншої сторінки

Приклад

<BR> <A NAME=”END”>TEXT</A> - код для сторінки на яку направлене гіперпосилання

Далі:

<BR> <A HREF=”List.html#END”>TEXT</A> - код для сторінки, яка вміщує гіперпосилання.

2.1.14 Використанн зображень, як гіперпосилання

Приклад:

<P><A HREF=”http://www.ukr.net”> <IMG SRC=”1.jpg”></A></P>

 

2.1.15 Створення гіперпосилань, які вказують на зображення. Створення мініатюрних зображень.

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

Приклад:

<A HREF=”Big.jpg”><IMG SRC=”small.jpg”></A>

 

2.1.16 Створення гіперпосилань, які вказують на файл.

Гіперпосилання, які вказують на файл, дозволяють користувачам копіювати на локальний комп’ютер документи, програми і іншу необхідну інформацію. Яка зберігається у вигляді файлів. Створюючи посилання треба вказати ім’я файлу і його місце знаходження.

Приклад:

<A HREF=”program/game.exe”>TEXT</A>

При виборі гіперпосилання браузер спробує відобразити вміст файлу. Якщо браузер не зможе це зробити, то він, керуючись значеннями параметрів настройки операційної системи, буде намагатися відкрити файл за допомогою відповідних додатків. Якщо такий додаток, браузер запропонує зберегти файл на диск.

 

2.1.17 Посилання на адресу електронної пошти

Для створення посилань на адресу електронної пошти треба вказати адресу e-mail тієї особи, якій користувачі будуть посилати повідомлення.

Приклад:

<A HREF=”mailto:[email protected]”>TEXT</A>

Для вказівки теми повідомлення використовується атрибут subject, перед яким буде символ &.

Приклад:

<A HREF=”mailto:[email protected]&subject=comments”>TEXT</A>

Якщо треба посилати на декілька електронних адрес одночасно, то використовується атрибут?cc

Приклад:

<A HREF=”mailto:[email protected][email protected], [email protected]&subject=comments”> TEXT </A>

 

2.1.18 Створення гіперпосилання, яке вказує на сайт FTP

При створенні гіперпосилання, яке вказує на сайт FTP, треба вказати повну адресу сайту, яка починається з префікса ftp://

Приклад:

<A HREF=”ftp://ftp.log.gov”>TEXT/</A>

Якщо використовується FTP-сервером не стандартний 21 порт, а якийсь тотреба його вказати:

<A HREF=”ftp://ftp.log.gov”:1999>TEXT/</A>

Якщо обов’язково треба вказати ім’я користувача і пароль, то треба дане гіперпосилання зробити наступним чином:

<A HREF=”ftp://name:[email protected]”>TEXT/</A>

Якщо треба зробити посилання на конкретний файл, який знаходиться на FTP-сервері, треба записати гіперпосилання наступним чином:

<A HREF=”ftp://ftp.log.gov/pub/newlist.txt”>TEXT/</A>

 

2.1.19 Відкриття Web-сторінок в новому вікні браузера

Атрибут TARGET дозволяє завантажити дані, на які вказує гіперпосилання, в нове вікно браузера. Для цього треба атрибуту TARGET присвоїти константу _blank. Дані кожного гіперпосилання, в якому використовується значення _blank, будуть завантажуватися у власне вікно.

Приклад:

<BR><A HREF=”list.html” TARGET =”_blank”>TEXT</A>

Якщо для якоїсь групи гіперпосилань для атрибуту TARGET використаємо ім’я вікна (імена чутливу до регістру клавіатури) і тоді ці гіперпосилання відкриваються в цьому вікні.

Приклад:

<BR><A HREF=”list.html” TARGET =”name”>TEXT</A>

Для швидкого задання імені вікна, яке призначається для завантаження даних, на яке будуть вказувати всі без винятку гіперпосилання поточної сторінки потрібно між дескрипторами <HEAD> і </HEAD> вставити рядок <BASE TARGET=”name”>, де name – є ім’я вікна, яке задається самостійно.

Приклад

<HEAD> <BASE TARGET=”name”> </HEAD>

 

2.1.20 Колір тексту гіперпосилань

Атрибуту LINK, VLINK, ALINK дозволяють задати колір шрифту для гіперпосилань.

Атрибут LINK використовується для виділення кольором гіперпосилань, які ще не вибрані читачем.

Атрибут VLINK використовується для виділення кольором гіперпосилань, які вже використовувались читачем.

Атрибут ALINK використовується для виділення кольоро





Поделиться с друзьями:


Дата добавления: 2016-12-04; Мы поможем в написании ваших работ!; просмотров: 610 | Нарушение авторских прав


Поиск на сайте:

Лучшие изречения:

Либо вы управляете вашим днем, либо день управляет вами. © Джим Рон
==> читать все изречения...

633 - | 501 -


© 2015-2024 lektsii.org - Контакты - Последнее добавление

Ген: 0.012 с.