Студопедия  
Главная страница | Контакты | Случайная страница

АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатика
ИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханика
ОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторика
СоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансы
ХимияЧерчениеЭкологияЭкономикаЭлектроника

Г.П.Щедровіцький

Для підготовки 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 | Поможем написать вашу работу | Нарушение авторских прав




lektsii.net - Лекции.Нет - 2014-2024 год. (0.016 сек.) Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав