|
Для підготовки html-файлу можна використати текстовий редактор Notepad чи будь-який інший, що дає змогу готувати файли у текстовому форматі. Після написання, html-файл потрібно зберегти на диску з деякою назвою з розширенням назви htm чи html.
Приклад 1. Структуру html-файлу продемонструємо за допомогою тексту, де деяка особа розповідає про себе:
<HTML>
<HEAD>
<TITLE> Назва вікна web-сторінки </TITLE>
</HEAD>
<BODY параметри>
<!--Далі йде текст, наприклад, такий. -->
Мене звати Орест. Мені 28 років. Я хочу стати web- дизайнером. Це моя перша web-сторінка. Тут я можу писати будь-який текст, наприклад, про себе і мої інтереси. Пізніше я навчуся вставляти фотографії, картинки, звук, відеозображення шляхом посилання на відповідні графічні, звукові чи відеофайли. Я збережу цей файл на диску і відкрию його у броузері. Моя сторінка ще не красива і не цікава. Але скоро я навчуся робити цікаві web-сторінки.
Я розташую файл на сервері, і мою сторінку зможуть побачити в різних кінцях світу.
</BODY>
</HTML>
Відкривши такий файл у броузері, побачимо web-сторінку, де відомості про цю особу будуть розміщені дещо інакше, ніж у файлі: увесь текст розміщений в одному абзаці вирівняний до лівого краю, немає абзацного відступу.
Більшість тегів парні, як, наприклад, тег означення html-файлу: <HTML>... </HTML>. Такі теги називаються інакше контейнерами. Контейнер може містити текст та інші теги.
У середині пари тегів <HEAD>...</HEAD> описують заголовок документа. Головна частина заголовка документа заголовок Windows-вікна, який пишуть у середині пари тегів <TITLE>...</TITLE>.
Тег <!-- текст --> позначає коментар. Текст у середині цього тега виводитися на екран не буде. Коментар можна писати також у середині парного тега <COMMENT> текст-коментар </COMMENT>.
У середині пари тегів <BODY паpaметри>...</BODY> записують увесь текст сторінки. Цей текст відображатиметься у вікні броузера.
Розглянемо головні параметри тега BODY:
BACKGROUND = "d:\myweb\picturel.jpg" | Задає шлях до картинки для тла |
BGCOLOR = "white" | Задає білий колір тла, якщо не використовується тло-картинка |
BGPROPERTIES = "fixed" | Фонове зображення не прокручується |
TEXT = "black" | Задає колір тексту (тут чорний) на сторінці |
Розглянемо теги, які використовують для форматування тексту.
Теги форматування символів тексту (вони парні):
<В> текст </В> | Товстий шрифт тексту |
<І> текст </I> | Шрифт- курсив |
<U> текст </U> | Підкреслений шрифт |
<SUB> текст </SUB> | Нижній індекс. |
<SUP> текст </SUP> | Верхній індекс. |
<BIG> текст </BIG> | Великий шрифт. |
<SMALL> текст </SMALL> | Малий шрифт. |
<EM> текст </EM> | Виокремлений курсивом текст(те саме, що тег І) |
<B><I> текст </I></B> | Товстий курсив. |
Теги для розміщення тексту (вони одинарні):
<P> | Цей тег означає початок нового абзацу. Його можна записувати в кінці попереднього. Наступне після тега <Р> речення починатиметься з нового, вирівняного до лівого краю, абзацу без відступу. Між абзацами буде порожній рядок. Зауважимо, що тег <Р> може використовуватися як парний: <Р> текст абзацу </Р> |
<BR> | Наступний за цим тегом текст буде наведено у новому рядку без пропуску рядка |
<HR> | У рядку буде проведена горизонтальна лінія |
Заголовок - окремий тип абзацу. Є шість видів заголовків, які відрізняються розмірами символів:
Теги | Результат на екрані | ||
<Н1>Заголовок 1</Н1> | Заголовок 1 | ||
<Н2>Заголовок 2</Н2> | Заголовок 2 | ||
<НЗ> Заголовок 3</НЗ> | Заголовок 3 | ||
<Н4>Заголовок 4</Н4> | Заголовок 4 | ||
<Н5>Заголовок 5</Н5> | Заголовок 5 | ||
<Н6>Заголовок 6</Н6> | Заголовок 6 | ||
Заголовок за замовчуванням вирівнюється до лівого краю вікна. Якщо вирівнювання заголовка чи іншого елемента на сторінці потрібно задати явно, то використовують теги вирівнювання:
<CENTER> елемент </CENTER> | Вирівнювання до центру |
<LEFT> елемент </LEFT> | Вирівнювання до лівого краю |
<RIGHT> елемент </RIGHT> | Вирівнювання до правого краю |
Розгляньте зразок форматування тексту для web-сторінки з розповіддю деякої особи про себе.
<HTML>
<HEAD>
<TITLE> My web-page </TITLE>
</HEAD>
<BODY BGCOLOR ="yellow" TEXT = "navy">
<CENTER><Hl>Привіт!</Hl>
<H2> Мене звуть Світлана </Н2> </CENTER>
<HR>
<H3> Мені 22 роки </НЗ>
<Н4> Я хочу стати web-дизайнером </Н4>
<HR>
Це моя <В>друга</В> спроба створити web-сторінку. Я вже вмію користуватися заголовками, вставляти лінії, форматувати текстові абзаци. Пізніше я навчуся вставляти <І>фотографії, картинки, звук, відеозображення</І> шляхом посилання на відповідні <І>графічні, звукові чи відеофайли</І>.<Р>
Я збережу цей файл на диску і відкрию його у броузері. <Р>
Цю web-сторінку я буду удосконалювати, її ще рано розміщувати на сервері.<HR>
</BODY>
</HTML>
Щоб задати назву конкретного шрифту, його розмір і колір, використовують парний тег FONT із параметрами FACE, SIZE та COLOR, наприклад,
<FONT FACE = "Decor, Arbat, Kudriashov"
SIZE = +2 COLOR = "red">
(текст)
</FONT>
Основні кольори мають такі назви:
Black - чорний green - зелений
Navy - темно-синій teal - бірюзовий
Silver - сірий lime - яскраво-зелений
Blue - синій aqua - блакитний
Maroon – малиновий olive - темно-зелений
Purple - бузковий gray - темно-сірий
Red - червоний yellow- жовтий
Fuchsia - рожевий white - білий
Є три типи списків: ненумерований, нумерований, тлумачення. Список може мати заголовок, який охоплюють тегами <LH>...</LH>, наприклад
<LH> Це заголовок списку </LН>.
Ненумерований список утворюють за допомогою парного тега <UL>...</UL> і одинарних тегів <LI>, наприклад, так:
<LH> Мої улюблені предмети:</LН>
<UL>
<LІ> інформатика
<LІ> англійська мова
<LI>історія
</UL>
На екрані отримаємо:
Мої улюблені предмети:
· інформатика
· англійська мова
· історія
Нумерований список створюють за допомогою парного тега <OL>... </OL> з необов'язковим параметром TYPE і одинарних тегів <LI> так:
<LH> Мої улюблені предмети:</LH>
<OL TYPE="1">
<LI>Інформатика
<LI>Англійська мова
<LI>Історія
</OL>
На екрані отримаємо: Мої улюблені предмети:
1. Інформатика
2. Англійська мова
3. Історія
Таблиці створюють за допомогою таких тегів:
<TABLE параметри>
<ТС> Заголовок таблиці </ТС>
Тут пишемо теги для заповнення клітинок таблиці рядок за рядком
</TABLE>
Для заповнення клітинок таблиці використовують такі парні теги (закриваючі теги можна не зазначати):
<TR>...</TR> | Формують рядок таблиці |
<ТН> текст </ТН> | Формують клітинку з заголовком рядка чи стовпця |
<ТD> текст </ТD> | Формують текст кожної клітинки. |
Заголовки рядків і стовпців виводитимуться товстішим шрифтом.
Приклад 2. Створимо на web-сторінці таблицю-витяг з успішності студента за три семестри з трьох предметів: фізики, математичного аналізу та Алгоритмічних мов програмування:
<CENTER>
<TABLE BORDER=3
BGCOLOR="yellow"
BORDERCOLOR="green">
<TC><I> Мої оцінки за три семестри: </I></ТС>
<TR> <TH></TH>
<ТН>І семестр </ТН>
<ТН>II семестр </ТН>
<ТН>ІП семестр</ТН>
</TR>
<TR> <TH АLIGN="lеft"> Фізика </ТН>
<TD>4</TD>
<TD>4</TD>
<TD>5</TD> </TR>
<TR> <TH АLIGN="1еft> Мат. Аналіз </ТН>
<TD>5</TD>
<TD>5</TD>
<TD>5</TD>
</TR>
<TR> <TH АLIGN="1еft">Алгоритм. Мови </ТН>
<TD>5</TD>
<TD>5</TD>
<TD>4</TD>
</TR>
</TABLE>
</CENTER><P>
Щоб об'єднати у рядку декілька послідовних клітинок, наприклад, дві в одну, у відповідному першому тезі <ТН> чи <TD> записують параметр ROWSPAN = 2. А щоб об'єднати у стовпці дві клітинки в одну, використовують параметр COLSPAN=2.
Колір рамки таблиці задають параметром BORDERCOLOR = "колір рамки", а колір тла клітинок - параметром BGCOLOR—"колір фону". Товщину рамки в піксе-лях задають параметром BORDER="товщина рамки, 3". Якщо значення параметра - число нуль або параметра немає, то рамка буде невидимою.
За замовчуванням більшість елементів на сторінці, наприклад, текст, таблиці, списки, текст у клітинках таблиці, броузер вирівнює до лівого краю екрана чи клітинки. Часто тип вирівнювання потрібно змінити. Лінії можна вирівнювати до центру екрана чи до правого краю. Таблиці вирівнюють відносно екрана або тексту, який її облямовує. Текст у клітинках таблиці вирівнюють до центру чи до країв у горизонтальному чи вертикальному напрямках. Для цього до об'єктів застосовують теги вирівнювання CENTER, LEFT, RIGHT або у відповідних тегах <HR>, <TABLE>, <TH>, <TD> та в інших використовують параметр ALIGN зі значеннями "left" - зліва, "center" - до центру, "right" - справа, "top" - угорі, "middle" - посередині, "bottom" - унизу. Значення "top", "middle", "bottom" може мати також параметр VALIGN, який забезпечує вирівнювання у вертикальному напрямку.
Для вдалого розташування таблиць чи рисунків варто проекспериментувати з параметрами WIDTH і HEIGHT, які задають ширину і висоту елемента в пікселях або відсотках до розмірів усього екрана, наприклад, <TABLE WIDTH=300> задає ширину таблиці 300 пікселів; <TABLE WIDTH=50%> задає ширину таблиці півсторінки у горизонтальному напрямку.
Параметр SUMMARY="текст" використовують для інформації про призначення і структуру таблиці для клієнтських броузерів, що здійснюють невізуальне подання сторінки для осіб з фізичними обмеженнями, синтезують звук чи базуються на принципах азбуки Бройля.
Щоб створити заголовок таблиці, застосовують елемент CAPTION з параметром ALLIGN, наприклад, так:
<CAPTION ALLIGN="bottom"> Цe моя таблиця </CAPTION>.
Параметри WIDTH і SIZE застосовують також для проведення ліній різної довжини і товщини, наприклад, тег <HR SIZE=30 COLOR="red"> замість звичайної лінії дає червону смугу товщиною 30 пікселів.
Довідка. Інформацію можна подати у вигляді таблиці без рамок за допомогою парного тега <PRE>...</PRE>. Текст у середині цього тега оформляють засобами табуляції. Броузер такий текст переформатовувати не буде.
Графічні зображення, такі як фотографії, картинки, піктограми тощо, зберігаються на серверах в окремих файлах з розширеннями bmp, jpg, gif та іншими і відображаються на web-сторінці за допомогою тега <IMG> з параметрами:
<IMG SRC="адреса графічного файлу"
ALT = "альтернативний текст"
ALIGN="left"
WIDTH=240 HEIGHT=200>
Дія тега. Обов'язковим є лише перший параметр SRC. Альтернативний текст - це текст, який виводитиметься замість картинки, якщо броузер не може прийняти графічний файл або якщо режим відображення графіки вимкнено. Параметр ALIGN задає місце розташування картинки на екрані, а параметри WIDTH і HEIGHT - її розміри за шириною і висотою в пікселях або відсотках.
Зображення можна подати в рамці. Це рекомендують робити, якщо його використовуватимуть як гіперпосилання.
Для створення рамки навколо зображення призначений параметр BORDER= "товщина рамки в пікселях".
Праворуч і ліворуч від картинки, яку обгортає текст, можна зробити вільний простір: HSPACE = "кількість пікселів". Можна створити вільний простір також над і під рисунком: VSPACE = "кількість пікселів".
За допомогою тега IMG можна вставити також відео-фільм, який запускатиметься в момент відкриття web-сторінки:
<IMG DYNSRC=" адреса відеофайлу">.
Для виклику віддалених файлів, тобто файлів, які є на серверах у мережі Інтернет, адресу записують із зазначеням назви протоколу доступу http і URL-адреси файлу, наприклад,
SRC = "http://www.polynet.lviv.ua/ourpage.htm".
Для доступу до файлів на локальному диску використовують протокол доступу file: SRC = "file:///диск:/шлях до файлу". Наприклад, SRC= "file:///d:/mycatalog/mypage.htm". Назву протоколу можна інколи не писати, наприклад, SRC = "c:/windows/forest.bmp".
Якщо графічні чи інші файли є в тому ж каталозі, що основний html-файл, то достатньо зазначити лише назву файлу, наприклад, SRC = "myfoto.gif". Якщо файл є в деякому сусідньому каталозі images, то шлях до нього подають так: "../images/myfoto.gif". Отже, тег IMG може мати такий вигляд:
<IMG SRC="c:/windows/forest.bmp" АLТ="Ліс">.
Щоб вставити звук чи відео, достатньо як значення параметра HREF у тезі гіперпосилання задати шлях до відповідного звукового чи відеофайлу, який вже є на диску, наприклад, так:
Тепер <А HREF="mysound.wav">
послухайте мене (150К) </А>.
Текст «послухайте мене (150К)» стане гіперпосиланням, клацнувши на якому можна почути привітання, застереження, деяку інформацію, яка була заздалегідь записана, наприклад, за допомогою програми Фонограф у файл "mysound.wav" обсягом 150 Кбайт. Оскільки звукові та відеофайли завантажуються довго, рекомендують зазначати у гіперпосиланнях їхні обсяги в кілобайтах.
Щоб звуковий чи відеоефект повторювався декілька разів, у тезі <А> використовують параметр LООР=n, де п -кількість повторень.
Щоб звук з деякого файлу пролунав у момент запуску сторінки, потрібно використати тег <BGSOUND SRC = "адреса звукового файлу">.
Інший спосіб - використайте тег <EMBED SRС="адреса звукового файлу"> і, крім звукового ефекту, отримаєте на екрані магнітофонну панель для регулювання тривалості й сили звуку, припинення звучання, продовження тощо.
Г.П.Щедровіцький
Дата добавления: 2014-12-19; просмотров: 35 | Поможем написать вашу работу | Нарушение авторских прав |