Лекція на тему Мова HTML
« Назад
Мова HTML
Для створення Web- сторінок Web- дизайнери послуговуються гіпертекстовими редакторами, наприклад, HotMetal PRO, Hot Dog Professional, NetscapeEditor, Webedit, HTMLWriter, HTMLAssistant, HTMLed, де використовується мова HTML — Hyper Text Markup Language (мова для розмічування гіпертекстових документів). Сучасні редактори (FrontPage, програмні додатки до MS Word тощо) дають змогу створювати Web- сторінки методом конструювання без застосування кодів мови HTML (оскільки код вони створюють автоматично). Вивчаючи дану тему, ми створюватимемо Web- сторінки двома способами: 1) за допомогою мови HTML і 2) методом конструювання. Для підготовки html - файлу можна використати текстовий редактор Notepad. Після написання html- файл потрібно зберегти на диску з деякою назвою з розширенням назви htm чи html. Програмування тут суто символічне. Програма мовою HTML (html- файл) має таку загальну структуру: <HTML> <HEAD> <TITLE> Назва вікна Web- сторінки </TITLE> </HEAD> <BODY параметри> <!--Далі йде текст, наприклад, такий.—> SELPHY CP400 - компактний надшвидкісний сублімаційний принтер для прямого друку чудової якості фотографій з роздільною здатністю 300 точок на дюйм. Для фотодруку сумісна цифрова камера підключається прямо до компактного фотопринтера SELPHY за стандартом PictBridge. За допомогою простого меню камери можна вибрати розмір відбитку, тип матеріалу, наявність або відсутність полий і кількість копій. </BODY> </HTML> Команди мови HTML називаються тегами. Теги бувають одинарними і парними. Більшість тегів є парними, як наприклад, тег означення HTML-файлу: <HTML> ... </HTML>. Парні теги позначають початок і кінець ділянки дії відповідної команди. Теги записують у кутових дужках. Тег, що закриває ділянку дії, має косу риску (не забувайте її писати, інакше тег працюватиме неправильно). Тег може містити параметри, які користувач записує через пропуск у першому тезі, наприклад, <BODY TEXT=”red”>. Зазвичай назви тегів прийнято писати великими буквами, але можна й малими. У середині пари тегів <HEAD>...</HEAD> описують заголовок документа. Основною частиною заголовка документа є заголовок Windows-вікна, який пишуть в середині пари тегів <TITLE>...</TITLE>. У середині пари тегів <BODY параметри>...</ВОDY> записують (тобто програмують) те, що має відображатися у вікні браузера. Щоб на екрані відобразити звичайним способом стандартний текст, жодного програмування не потрібно — достатньо набрати цей текст. Якщо ж дизайнер хоче подати текст спеціальним чином, щоб він якнайкраще виглядав, потрібно застосувати до тексту теги форматування. У цьому, зокрема, і полягає суть програмування мовою HTML. Розглянемо основні параметри тегу BODY: BACKGROUND = "шлях до графічного файлу"— задає картинку для тла; BGCOLOR = "white" — задає білий колір тла, якщо не використовується тло-картинка; TEXT = "black" — задає колір тексту (тут — чорний) на сторінці. Тег <!-- текст --> позначає коментар. Текст у середині тегу виводитися на екран не буде. Коментар можна писати також у середині парного тегу <COMMENT> текст-коментар </COMMENT>.
Оформлення тексту для Web-сторінок
Розглянемо теги, які використовують для форматування тексту. Спочатку розглянемо основні одинарні теги для розміщення тексту. <Р> — цей тег означає початок нового абзацу, але його прийнято записувати в кінці попереднього. Наступне речення починатиметься з нового, вирівняного до лівого краю, абзацу без відступу. <BR> — наступний за цим тегом текст буде наведено у новому рядку без пропуску рядка. <HR> — буде проведена горизонтальна лінія. Розглянемо парні теги форматування символів тексту: <В> текст </В> — напівжирний шрифт тексту; <І> текст </І> — шрифт-курсив; <U> текст </U> — підкреслений шрифт; <SUB> текст </SUB> — нижній індекс, наприклад, Н2О; <SUP> текст </SUP> — верхній індекс, наприклад, 1а вулиця, а2; <BIG> текст </BIG> — великий шрифт; <SMALL> текст </SMALL> — малий шрифт; <ЕМ> текст </ЕМ> — виокремлений курсивом текст (те саме, що тег І); <В> <І> текст </І> </В> — напівжирний курсив. Цей приклад демонструє застосування принципу вкладення тегів. Зауважимо, що тег <Р> може використовуватися як парний: <Р> текст абзацу </Р>. Окремим типом абзацу є заголовок. Є шість видів заголовків, які відрізняються розмірами символів: Теги Результат на екрані <Н1>Заголовок 1</Н1> Заголовок 1. <Н2>Заголовок 2</Н2> Заголовок 2. <Н3>Заголовок 3</НЗ> Заголовок 3. <Н4>Заголовок 4</Н4> Заголовок 4. <Н5>Заголовок 5</Н5> Заголовок 5. <Н6>Заголовок 6</Н6> Заголовок 6.
Заголовок за замовчуванням вирівнюється до лівого краю вікна. Якщо вирівнювання заголовка чи іншого елемента на сторінці потрібно задати явно, то використовують теги вирівнювання: <CENTER> елемент </CENTER> — вирівнювання до центру; <LEFT> елемент </LEFT> — вирівнювання до лівого краю; <RIGHT> елемент </RIGHT> — вирівнювання до правого краю. Зауваження. Теги заголовків не варто використовувати для створення звичайних абзаців з різними розмірами шрифту.
МОВА HTML I WEB- ДИЗАЙН
1. Тег завдання параметрів шрифту FONT.Щоб задати назву конкретного шрифту, його розмір і колір, використовують парний тег FONT з параметрами FACE, SIZE та COLOR, наприклад, <FONT FACE = "Decor, Arbat, Kudriashov" SIZE = +2 COLOR = "red"> текст </FONT> Якщо на комп'ютері клієнта встановлено шрифт Decor, то він буде застосований до даного тексту, інакше браузер застосує шрифт Arbat чи Kudriashov, інакше — деякий свій стандартний шрифт, наприклад, Times New Roman. Розміри символів шрифту можуть бути від 1 до 7. Розмір 3 вважається стандартним, він орієнтовно відповідає 10 пунктам. Розмір 7 є найбільшим. Число 2 як значення параметра SIZE означає другий розмір шрифту, число +2 означає, що розмір шрифту має бути на дві одиниці більший, ніж стандартний, тобто п'ятий, число -2 означатиме перший розмір шрифту — на дві одиниці менший, ніж стандартний. Колір тексту буде червоний. Основні кольори мають такі назви: black--- чорний white---- білий gray--- темно-сірий silver---- сірий maroon-- малиновий red------ червоний green--- зелений lime----- яскраво-зелений navy--- темно-синій blue----- синій teal--- бірюзовий aqua----- блакитний purple-- бузковий fuchsia--- рожевий olive--- темно-зелений yellow---- жовтий Різних можливих відтінків цих кольорів є 16 мільйонів. Відтінки задають спеціальними шістнадцятковими кодами, як це прийнято в графічних редакторах, наприклад, один з відтінків сірого кoльopу має код #ff7800. Зауваження. У тексті можна використовувати так званий мнемо-код ", який відобразить на екрані лапки. Замість мнемо-коду можна використати числовий код ". Коди інших спецсимволів (<, >, & тощо) можна знайти у довідниках. Ще одна новинка: адреси тепер прийнято записувати в парному тезі <ADDRESS>...</ADDRESS>.
2. Створення списків.Є три типи списків: ненумерований, нумерований, означення. Список може мати заголовок, який охоплюють тегами <LH>...</LH>, наприклад, <LН>Це заголовок списку</LН>. Ненумерований список утворюють за допомогою парного тега <UL> ...</UL> і одинарних тегів <LI>, наприклад, так: <LH> Мої улюблені предмети:</LH> <UL> <LI>інформатика <LI>англійська мова <LI>історія </UL> На екрані отримаємо: Мої улюблені предмети: • інформатика • англійська мова • історія Нумерований список створюють за допомогою парного тега <OL>... </OL> з необов'язковим параметром TYPE і одинарних тегів <LI> так:
<LH> Мої улюблені предмети:</LH> <OL TYPE="1"> <LI>Інформатика <LI>Англійська мова <LI>Історія </OL> На екрані отримаємо: Мої улюблені предмети: 1. Інформатика 2. Англійська мова 3. Історія Значення "і" чи "І" параметра TYPE задає нумерацію римськими малими (і, іі, ііі, iv,...) чи великими (І, II, III, IV, ...) цифрами, а значення "а" чи "А" латинськими малими (a, b, c, d, ...) чи великими (А, В, С,...) літерами. Список означень використовують для тлумачення термінів, створення словників тощо. Його утворюють за допомогою парного тега <DL>...</DL> і двох одинарних тегів <DT> і <DD> так: <LН>Заголовок</LН> <DL> <DT> термін <DD> тлумачення 1 <DD> тлумачення 2 ... </DL> Наприклад, <LН>Я знаю такі нові терміни:</LН> <DL> <DT> HTML <DD> <I>мова для розмічування гіпертекстових Web-сторінок</I> <DT> браузер <DD> <I>програма для перегляду Web-документів</І> <DT> тег <DD> <I>засіб для записування команд мовою HTML</I> </DL> На екрані отримаємо: Я знаю такі нові терміни: HTML мова для розмічування гіпертекстових Web-сторінок браузер програма для перегляду Web-документів тег засіб для записування команд мовою HTML
3. Створення таблиць. Таблиці створюють за допомогою таких тегів: <TABLE параметри> <ТС>Заголовок таблиці</ТС> Тут пишемо теги для заповнення клітинок таблиці рядок за рядком </TABLE>
Для заповнення клітинок таблиці використовують такі парні теги (зауважимо, що закриваючі теги можна опускати): <TR>...</TR> формують рядок таблиці; <ТН>текст</ТН> формують клітинку-заголовок рядка чи стовпця; <ТD>текст</ТD> формують текст кожної клітинки.
Заголовки рядків та стовпців виводитимуться товстішим шрифтом. Створимо на Web-сторінці таблицю-витяг з відомості успішності студента за три перші семестри з трьох предметів: інформатики, математики та історії: <CENTER> <TABLE BORDER=3 BGCOLOR=" yellow" BORDER-COLOR="green"> <ТС><І>Мої оцінки за три семестри:</I></ТС> <TR> <TH></TH> <ТН>І семестр </ТН> <ТН>ІІ семестр </ТН> <ТН>ІІІ семестр</ТН> </TR> <TR> <TH ALGN=”left”>Інформатика</ТН> <TD>100/TD> <TD>100/TD> <TD>100/TD> </TR> <TR> <TH ALGN=”left”>Математика</ТН> <TD>90/TD> <TD>90</TD> <TD>90</TD> </TR> <TR> <TH ALGN=”left”>Історія</ТН> <TD>95</TD> <TD>88</TD> <TD910</TD> </TR> </TABLE> </CENTER><P> Щоб об'єднати у рядку декілька послідовних клітинок, наприклад, дві в одну, у відповідному першому тезі <ТН> чи <TD> записують параметр ROWSPAN=2. Щоб об'єднати у стовпці дві клітинки в одну, використовують параметр COLSPAN=2. Колір рамки таблиці задають параметром BORDERCOLOR="колір рамки", а колір тла клітинок параметром BGCOLOR="колір фону". Товщину рамки в пікселях задають параметром BORDER=”товщина рамки", наприклад, 3. Якщо значенням параметра є число нуль або параметра немає, то рамка буде невидимою.
4. Вирівнювання елементів.За замовчуванням більшість елементів на сторінці, наприклад, текст, таблиці, списки, текст у клітинках таблиці, браузер вирівнює до лівого краю екрана чи клітинки. Часто тип вирівнювання потрібно змінити. Лінії можна вирівнювати до центру екрана чи до правого краю. Таблиці вирівнюють відносно екрана або відносно тексту, який її облямовує. Текст у клітинках таблиці вирівнюють до центру чи до країв у горизонтальному чи вертикальному напрямках. Для цього до об'єктів застосовують теги вирівнювання CENTER, LEFT, RIGHT або в тегах <HR>, <TABLE>, <TH>, <TD> та в інших використовують параметр ALIGN зі значеннями "left" зліва, "center" до центру, "right" справа, "top" вгорі, "middle" посередині, "bottom" внизу. Останні три значення може мати також параметр VALIGN. Для вдалого розташування таблиць чи рисунків варто проексперементувати з параметрами WIDTH і HEIGHT, які задають ширину і висоту елемента в пікселях або відсотках до розмірів усього екрана, наприклад, <TABLE WIDTH=300> задає ширину таблиці 300 пікселів; <TABLE WIDTH=50%> задає ширину таблиці у півсторінки у горизонтальному напрямку. Для проведення ліній різної довжини і товщини застосовують параметри WIDTH і SIZE, наприклад, тег <HR SIZE=30 COLOR="red"> замість звичайної лінії дає червону полосу товщиною 30 пікселів. Довідка. Інформацію можна подати у вигляді таблиці без рамок за допомогою парного тега <PRE>...</PRE>. Текст у середині цього тега оформляють засобами табуляції. Браузер такий текст переформатовувати не буде.
5. Вставка графічних і відеофайлів.Графічні зображення (фотографії, картинки, піктограми тощо) зберігаються на серверах в окремих файлах з розширеннями bmp, jpg, gif та іншими і відображаються на Web-сторінці за допомогою команди, що описується одинарним тегом <IMG> з параметрами: <IMG SKR="адреса графічного файлу" ALT="альтернативний текст" ALIGN="left" WIDTH=240 HEIGHT=200> Обов'язковим є лише перший параметр SRC. Альтернативний текст - це текст, який виводитиметься замість картинки, якщо браузер не може прийняти графічний файл або якщо режим відображення графіки вимкнено. Параметр ALIGN задає місце розташування картинки на екрані, а параметри WIDTH і HEIGHT - її розміри за шириною і висотою в пікселях або відсотках. Зображення можна подати в рамці (що рекомендують робити), якщо його використовуватимуть як гіперпосилання. Для створення рамки навколо зображення призначений параметр BORDER="товщина рамки в пікселах". Праворуч і ліворуч від картинки, яку облямовує текст, можна зробити вільний простір: HSPACE = "кількість пікселів". Можна створити вільний простір також над і під рисунком: VSPACE = "кількість пікселів". За допомогою тега IMG можна вставити також відеофільм, який запускатиметься в момент відкриття Web-сторінки: <IMG DYNSRC="адреса відео-файлу">.
6. Адреси файлів.Для виклику віддалених файлів, тобто файлів, які є на серверах у мережі Internet, адресу записують із зазначенням назви протоколу доступу http і URL- адреси файлу, наприклад, "http://www.polynet.lviv.ua/ourpage.htm ". Для доступу до файлів на локальному диску використовують протокол доступу file: "file:///диск:/ шлях до файлу". Наприклад, "file:///d:/mycatalog/mypage.htm". Назву протоколу можна інколи не писати, наприклад, SRC="c:/windows98/JIec.bmp". Якщо графічні чи інші файли є в тому ж каталозі, що основний html-файл, то достатньо зазначити лише назву файлу, наприклад, SRC= "myfoto.gif". Якщо файл є в деякому сусідньому каталозі images, то шлях до нього можна подати так: "../images/myfoto.gif". Отже, тег IMG може мати такий конкретний вигляд: <IMG SRC="c:/windows98/Лec.bmp" АLТ="Ліс">.
7. Вставка гіперпосилань.Гіперпосилання є двох видів: 1) на файл; 2) на деяке місце на даній сторінці: початок сторінки (top), кінець сторінки (bottom), на позначений текст. Гіперпосилання вставляють за допомогою парного тега <А>...</А> з параметром HREF = "адреса файлу". Тут замість адреси можуть стояти слова top чи bottom чи текст, що є позначкою. Гіперпосиланням може бути текст або деяке графічне зображення. Розглянемо випадок, коли гіперпосиланням є текст. Нехай у реченні "Мене звуть Олена" слово "Олена" потрібно зробити гіперпосиланням на файл "file2.htm" чи "newinf.htm", що містить додаткові відомості про Олену. Це роблять так: Мене звуть <А HREF = "newinf.htm"> Олена</А>. У результаті цього на Web-сторінці слово Олена буде підкреслене і зображене іншим кольором. Колір гіперпосилання визначається у тезі BODY параметром LINK = "колір". Крім цього корисними є ще два параметри: VLINK= "інший колір" – змінює колір гіперпосилання на інший після першого використання; ALINK = "ще інший колір" – змінює колір щойно активізованого гіперпосилання на ще інший. Тепер розглянемо як деяке графічне зображення зробити гіперпосиланням. Для цього в середині тега <А>...</А> потрібно використати тег IMG. Наприклад, щоб фотографія Олени, що є у файлі "olena.gif", була в рамці й стала гіперпосиланням на файл new-inf .htm, пишуть так: <А HREF = "newinf.htm"><IMG SRC = "olena.gif" BORDER =8 ></A> Клацнувши на Web-сторінці на фотографії Олени, відкриємо файл newinf.htm з додатковою інформацією про неї. Будь-яку піктограму (картинку) можна вставити автономно чи як гіперпосилання, оскільки вона зберігається також у графічному файлі. Розглянемо другий тип гіперпосилань – посилання в межах сторінки. Спочатку потрібно позначити місце на сторінці, куди здійснюватиметься перехід. Якщо з деякого місця перехід має виконуватися на початок сторінки, то в те місце html-файлу, що відповідає початку сторінки, вводять тег, який називається якорем: <А NАМЕ="#початок"></А>. Аналогічно позначають деяке місце в кінці файлу: <А NАМЕ="#кінець"></А>. Якір можна кинути в будь-якому місці тексту так: <А NАМЕ="#моя позначка"х/А>. Тепер на сторінці розміщують гіперпосилання на створені позначки (якори): <А HREF="#noчаток' або "#кінець" або "#моя позначка"> текст гіперпосилання </А>. Якщо одна сторінка займає декілька екранів, то в кінці сторінки варто вставити гіперпосилання для переходу на початок, наприклад, так: А тепер можете перейти <А HREF="#початок">на початок</А> сторінки.
8. Вставка звуку і відеозображення.Важливо пам'ятати, що звукові файли мають розширення назв au, wav, mid, midi, ra, а відеофайли – avi, vivo, mpeg. Щоб вставити звук чи відео, достатньо як значення параметра HREF у тезі гіперпосилання задати шлях до відповідного звукового чи відеофайлу, який вже є на диску, наприклад, Тепер <А HREF="mysound.wav"> послухайте мене (150К) </А>. Текст «послухайте мене (150К)» стане гіперпосиланням, клацнувши на якому можна почути привітання, застереження, деяку інформацію, яка була заздалегідь записана, наприклад, за допомогою програми Фонограф у файл "mysound.wav" обсягом 150 Кбайт. Оскільки звукові та відеофайли завантажуються довго, рекомендують зазначати у гіперпосиланнях їхні обсяги в кілобайтах. Щоб звуковий чи відеоефект повторювався декілька разів, наприклад, 2, у тезі <А> використовують параметр LOOP=2. Щоб звук з деякого файлу пролунав у момент запуску сторінки, потрібно використати тег <BGSOUND SRC = "адреса звукового файлу">. Інший спосіб використайте тег <EMBED SRC=" адреса звукового файлу"> і, окрім звукового ефекту, отримаєте на екрані магнітофонну панель для регулювання тривалості й сили звуку, припинення звучання, продовження тощо.
9. Поняття про динамічні ефекти.Динамічними називаються ефекти, коли графічні зображення на Web- сторінці змінюються з часом, елементи сторінки змінюють розміри або навіть свій зміст після клацання над ними мишею, текст «біжить» уздовж екрана тощо. Розглянемо ефект тексту, який біжить у полосі, що має висоту HEIGHT ="висота в пікселях" і тло BGCOLOR ="колір тла". Ефект створюється за допомогою парного тегу <MARQUEE>...</MARQUEE>, а саме: <MARQUEE BGCOLOR="green" HEIGHT = 40> Олена Олена</ MARQUEE> Обидва слова "Олена Олена" будуть пробігати в полосі справа наліво, заходитимуть за край екрана і з'являтимуться знову справа. Даний тег рекомендують застосовувати до заголовків сторінки. Ефект відбивання від країв екрана забезпечує параметр BEHAVIOR = "alternate", а зупинити рядок біля лівого краю екрана може значення цього параметра "slide". Значення "right" параметра DIRECTION забезпечить ефект руху у протилежний бік. Обмеження кількості проходів, наприклад, числом 5, задається параметром LOOP=5. Полосу можна відцентрувати за допомогою параметрів HSPASE і VSPACE. Швидкість руху задає параметр SCROLLAMOUNT=3, де конкретне значення вибирають з діапазону від 1 (повільно) до 10 (швидко). Інші динамічні ефекти створюють за допомогою процедур з використанням мов програмування Visual Basic Script чи JavaScript. Зауваження. Немає єдиного стандарту мови HTML. Деякі теги чи їхні параметри не діють у всіх браузерах. Деякі теги і параметри для різних браузерів називаються по-різному. Якщо в написанні тегу, назви параметра чи в його значенні допущено синтаксичну помилку, то тег чи параметр не діятимуть.
10. Web-компоузери.Загальна назва програм для автоматизованого створення Web- сторінок без застосування користувачем мови HTML – Web - компоузери. Розглянемо відповідні можливості Web - додатків до програми MS Word. Щоб створити Web- сторінку чи цілий Web - сайт, потрібно під час створення нового документа перейти на закладку Web-сторінки і скористатися майстром чи створити нову сторінку. У другому випадку алгоритм дій дизайнерів такий:
Зауваження. Програма - компоузер автоматично створює html-файл, який можна переглянути і модифікувати з метою внесення деяких змін у Web-сторінку. Щоб створити мовою html цікаві сторінки вручну, потрібно мати адреси графічних файлів для тла сторінки, горизонтальних ліній тощо. З повагою ІЦ "KURSOVIKS"! |