Мова html

1.Ознайомлення з мовою html

Текстові документи створю­ють за допомогою текстових редакторів, наприклад, MS Word, WordStar тощо, зберігають у файлах, виводять на ек­ран для візуального перегляду і видруковують на папері. Гіпертекстові документи, на відміну від звичайних текстових документів, не призначені для виведення на папір. Головне їхнє застосування - подання інформації на екран комп'ютера.

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

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

Гіпертекст - це електронний документ, який містить гіперпосилання на інші документи. Термін "гіпертекст" у 1969 р. запровадив Тед Нельсон, хоча принцип організації ін­формації з використанням посилань відомий віддавна. Ідею гіпертекстових інформаційних систем на теоретичному рівні сформулював В. Буш у 1945 році.

Гіпертекстова технологія — це інформаційна техноло­гія, що базується на використанні гіпертекстів. Її застосову­ють у комп'ютерних енциклопедіях і навчальних програмах, у прикладних програмах для роботи з довідковою інформа­цією, а також для організації доступу до інформації у WWW- просторі, тобто для роботи з web-документами.

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

Отже, web-документ — це текст, написаний мовою HTML чи іншою, який призначений для перегляду електрон­ної інформації на екрані комп'ютера за допомогою броузера.

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

Декілька web-документів на одну тему, що є на деякому комп'ютері чи належать одному власникові, утворюють web-вузол (інший термін - web-сайт).

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

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

Одне з найважливіших правил web-дизайну полягає у структуризації інформації, вдалому поділу її на окремі части­ни і налагодженні зв'язків між ними.

Розглянемо структуру web-документа. Простий доку­мент складається з текстових блоків, двох-трьох рисунків невеликих розмірів, горизонтальних ліній та гіперпосилань.

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

Текстові блоки є трьох головних типів: короткі (по два-три речення) текстові абзаци, списки, таблиці.

Згідно з чинним стандартом абзаци на класичній web-сторінці відокремлюються порожнім рядком і не мають від­ступів у першому рядку. Абзац може бути вирівняний до од­ного з країв або до центру екрана. Особлива зручність пере­гляду інформації зумовлена тим, що в нормальному режимі web-сторінка не має горизонтальної смуги прокручування, а вертикальна смуга може бути. Броузер автоматично масштабує горизонтальне зображення різних елементів сторінки, враховуючи характеристики монітора комп'ютера клієнта і розміри Windows-вікна, в якому демонструється документ.

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

3. Мова HTML. Для створення web-сторінок послуговую­ться гіпертекстовими редакторами, наприклад, HotMetalPRO, Hot Dog Professional, Netscape Editor, webedit, HTMLWriter, HTML Assistant, HTMLed, де використовується мова HTML- Hyper Text Markup Language (мова для розмічування гіпертекстових документів). Сучасні редактори, такі як FrontPage, Dream Viewer, MS Word тощо, дають змогу створювати web-сторінки методом конструювання, тобто без застосування кодів мови HTML. Вони генерують цей код автоматично.

Розглянемо створення web-сторінки за допомогою мови HTML. Для підготовки html-файлу можна використати текстовий редактор NotePad чи будь-який інший, що дає змогу готувати файли у текстовому фор­маті. Після написання html-файл потрібно зберегти на диску з деякою назвою з розширенням назви htm чи html.

Приклад 1. Структуру html-файлу продемонструємо за допомогою тексту, де деяка особа розповідає про себе:

<HTML> <!-це файл fle1.htm->

<HEAD>

<TITLE> Назва вікна web-сторінки </TITLE>

</HEAD>

<BODY параметри> <!-Далі йде текст, наприклад, такий.->

Мене звати Світлана. Мені 16 років. Я хочу стати web-дизайнером.

Це моя перша web-сторінка.

</BODY>

</ HTML>

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

4. Тегова модель файлу. Команди мови HTML назива­ються тегами. Теги бувають одинарними і парними. Біль­шість тегів парні, як, наприклад,

<HTML> ... </HTML> тег означення html-файлу. Такі теги називаються інакше кон­тейнерами. Контейнер може містити текст та інші теги.

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

Тег може містити параметри, які користувач записує у першому блоці тега через пропуск чи з нового рядка, наприк­лад, <BODY TEXT="red">…</BODY>. Нечислові значення параметрів прийнято записувати у лапках.

У середині пари тегів <HEAD>...</HEAD> описують за­головок документа. Головна частина заголовка документа - заголовок Windows-вікна, який пишуть у середині пари тегів <TITLE>...</TITLE>.

Тег <!- текст -> позначає коментар. Текст у середині цього тега виводитися на екран не буде. Коментар можна писати також у середині парного тега <COMMENT> текст-коментар </COMMENT>.

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

5. Елемент (тег) BODY. У середині пари тегів <BODY параметри> ... </BODY> записують увесь текст сторінки. Цей текст відображатиметься у вікні броузера.

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

Головні параметри тега BODY:

BACKGROUND = " d: \myweb\picture1.ipj"	Задає шлях до картинки для тла
BGCOLOR = "white"	Задає білий колір тла, якщо не використовується тло-картинка
BGPROPERTIES = "fixed"	Фонове зображення не прокручується
TEXT = "black"	Задає колір тексту (тут чорний) на сторінці

6. Форматування тексту для web-сторінок. Розглянемо теги, які використовують для форматування тексту.

Теги форматування символів тексту (парні):

<В> текст </В>	Товстий шрифт тексту
<І> текст </І>	Шрифт-курсив
<U> текст </U>	Підкреслений шрифт
<SUB> текст </SUB>	Нижній індекс. Наприклад, щоб отримати вираз Н2О, пишуть H<SUB>2</SUB>0
<SUP> текст </SUP>	Верхній індекс, наприклад, Iа вулиця, а2
<BIG> текст </BIG>	великий шрифт
<SMALL> текст </SMALL>	Малий шрифт
<EM> текст </ЕМ>	Виокремлений курсивом текст (те саме, що тег І)
<B> <I> текст </І></В>	Товстий курсив. (застосування вкладення тегів)

Теги для розміщення тексту (одинарні):

<Р>	означає початок нового абзацу. Можна записувати в кінці попереднього. Наступне після тега <Р> речення починатиметься з нового, вирівняного до лівого краю, абзацу без відступу. Між абзацами буде порожній рядок. <Р> може викорис­товуватися як парний: <Р> текст абзацу </Р>
<BR>	текст за тегом буде наведено у новому рядку без пропуску рядка
<HR>	у рядку буде проведена горизонтальна лінія

7. Заголовки і теги вирівнювання. Заголовок - окремий тип абзацу.

Є шість видів заголовків, які відрізняються роз­мірами символів:

Теги	Результат на екрані
<Н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>	Вирівнювання до правого краю

Зауваження. Теги заголовків не варто використовувати для створення звичайних абзаців з різними розмірами шрифту.

Приклад 2. Розглянемо зразок форматування тексту для web-сторінки з розповіддю деякої особи про себе.

<HTML> <!-Це файл file2.htm ->

<HEAD>

<TITLE> My web-page </TITLE>

</HEAD>

<BODY BGCOLOR="yellow" TEXT = "navy">

<CENTER><H1>Привіт!</H1>

<H2> Мене звуть Світлана </Н2> </CENTER>

<HR>

<H3> Мені 16 років </НЗ>

<Н4> Я хочу стати web-дизайнером </Н4>

<HR> Це моя <В>друга</В> спроба створити web-сторінку. Я вже вмію користуватися заголовками, вставляти лінії, форматувати текстові абзаци. Пізніше я навчуся вставляти <І>фотографїї, картинки, звук, відеозображення</І> шляхом посилання на відповідні <U> графічні, звукові чи відеофайли</U>.<Р> Цю web-сторінку я буду вдосконалювати. Її ще рано розміщувати на сервері.<HR>

</BODY> </HTML>

8. Версії мови HTML. Мова HTML виникла у наслідок тривалих процесів розвитку й удосконалення гіпертекстових інформаційних систем. В основі синтаксису мови лежить стандарт ISO 8879:1986 „Information processing. Text and of­fice systems. Standard Generalized Markup Language (SGML)". Однак на практиці відхилення від стандарту майже всіма фірмами стало звичним явищем. Сьогодні нагляд за розвит­ком мови здійснює консорціум W3C - некомерційна організа­ція, створена у 1994 році з метою розробки стандартів і засо­бів для web-технологій. W3C очолює автор сучасної web-кон­цепції Тім Бернерс Лі, а учасниками консорціуму є близько 200 організацій, зокрема провідні у світі фірми Microsoft і Netscape. Під егідою консорціуму було створено низку версій мови: HTML 3.2 (1996), HTML 4 (1997), HTML 4.01 (1999). У мову були введені нові елементи: таблиці стилів, засоби ство­рення форм і фреймів, засоби, що полегшили доступ до web людям з обмеженими фізичними можливостями і та ін. З но­винками і результатами роботи консорціуму можна ознайо­митися на сайті www.w3.org. Ми дотримувати­мемось синтаксису версії HTML 4.