Лабораторна робота №1
Тема: Ознайомлення з мовою HTML
Питання для обговорення:
Створити web-сторінку з розповіддю про себе за зразками прикладів.
Методичні вказівки для студентів
Теоретична частина
1. Про гіпертекст. Текстові документи створюють за допомогою текстових редакторів, наприклад, MS Word, WordStar тощо, зберігають у файлах, виводять на екран для візуального перегляду і видруковують на папері. Гіпертекстові документи, на відміну від звичайних текстових документів, не призначені для виведення на папір. Головне їхнє застосування - подання інформації на екран комп'ютера.
Під час створення гіпертекстового документа інформацію ретельно добирають, оскільки великі за обсягом тексти читати з екрана незручно. Зазвичай такі тексти зберігають не в одному, а у декількох файлах. Інформацію з цих файлів користувач виводить на екран лише тоді, коли вона йому потрібна, і у такій послідовності, яка його найліпше влаштовує. Робить він це за допомогою гіперпосилань.
Як вам відомо, гіперпосилання може мати вигляд підкресленого тексту іншого, ніж основний текст, кольору, рисунка або деякого значка-піктограми. Воно містить невидиму для користувача частину - адресу файлу чи позначки у документі, до якої потрібно перейти, і реагує на укажчик і клацання миші. Якщо укажчик миші навести на гіперпосилання, то він набуде вигляду долоні. Якщо тепер клацнути лівою клавішею миші, то виконається перехід на інше місце в тексті або відкриється новий файл. Такий файл може містити текст, звук чи відеозображення.
Гіпертекст - це електронний документ, який містить гіперпосилання на інші документи. Термін "гіпертекст" у 1969 р. запровадив Тед Нельсон, хоча принцип організації інформації з використанням посилань відомий віддавна. Візьмемо для прикладу енциклопедичний словник. Він складається з коротких статей. Однак читач, якщо потрібно, може отримати додаткову інформацію завдяки словам, що набрані курсивом. У словниках ці слова служать посиланнями на інші статті. Ідею гіпертекстових інформаційних систем на теоретичному рівні сформулював В. Буш у 1945 році.
Гіпертекстова технологія - це інформаційна технологія, що базується на використанні гіпертекстів. Її застосовують у комп'ютерних енциклопедіях і навчальних програмах, у прикладних програмах для роботи з довідковою інформацією, а також для організації доступу до інформації у WWW-просторі, тобто для роботи з web-документами.
2. Поняття про web-документи. Розглянемо відмінність між звичайним гіпертекстовим документом й web-документом. Звичайні гіпертекстові документи, наприклад, з комп'ютерної енциклопедії зберігаються на одному диску, a web-документи однієї тематики можуть розташовуватися на комп'ютерах-серверах у різних кінцях світу. Якщо пересилання файлів лініями зв'язку відбувається швидко, користувач може навіть не звернути уваги на те, що інформацію він отримує не зі свого комп'ютера, а із серверу, який знаходиться в Токіо, у Львові чи в Нью-Йорку.
Web-документи зберігаються і пересилаються як текстові файли з розширенням htm чи html тощо. Це звичайні тексти, написані мовою HTML. Відображаються такі тексти на екрані зовсім інакше, ніж вони виглядають у html-файлі. Для відображення html-файлів використовують броузери.
Отже, web-документ — це текст, написаний мовою HTML чи іншою, який призначений для перегляду електронної інформації на екрані комп'ютера за допомогою броузера.
Web-документ, який ми бачимо на екрані броузера, називають web-сторінкою. Це пов'язано з тим, що хорошим стилем уважається подання деякої частини інформації на одній умовній сторінці. Бажано, щоб web-сторінка поміщалась на одній-двох екранних сторінках і використання вертикального скроллінгу було мінімальним. Додаткову інформацію користувач має читати на інших сторінках, користуючись гіперпосиланнями.
Декілька web-документів на одну тему, що є на деякому комп'ютері чи належать одному власникові, утворюють web-вузол (інший термін - web-caйm).
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-файлу можна використати текстовий редактор Блокнот чи будь-який інший, що дає змогу готувати файли у текстовому форматі. Після написання html-файл потрібно зберегти на диску з деякою назвою з розширенням назви htm чи html.
Приклад 1. Структуру html-файлу продемонструємо за допомогою тексту, де деяка особа розповідає про себе:
В
<HTML> <!--Це
файл filel.htm-->
<HEAD>
<
TITLE>
Назва вікна web-
сторінки </TITLE>
</HEAD>
<BODY
параметри >
<!--Далі йде текст, наприклад, такий.-
->
Мене звати Світлана. Мені 16 років.
Я хочу стати web-дизайнером.
Це моя
перша web-сторінка.
Тут я можу писати будь-який текст,
наприклад, про себе і мої інтереси.
Пізніше
я навчуся вставляти фотографії, картинки,
звук,
відеозображення шляхом посилання на
відповідні графічні,
звукові чи відеофайли. Я збережу цей
файл на
диску і відкрию його у броузері. Моя
сторінка ще не красива
і не цікава. Але скоро я навчуся робити
цікаві web-сторінки.
Я
розташую файл на сервері, і мою сторінку
зможуть
побачити в різних кінцях світу.
</BODY>
</HTML>
Рис. 1. Текст html-файлу у вікні броузера
Службові слова, наведені великими літерами, вивчатимемо далі, їх можна писати також малими літерами.
4. Тегова модель файлу. Команди мови HTML називаються тегами. Теги бувають одинарними і парними. Більшість тегів парні, як, наприклад, тег означення html-файлу: <HTML> ... </HTML>. Такі теги називаються інакше контейнерами. Контейнер може містити текст та інші теги.
Парні теги позначають початок і кінець області дії відповідної команди. Теги записують у кутових дужках. Тег, що закриває область дії, має косу риску. Не забувайте її писати, інакше тег працюватиме неправильно.
Тег може містити параметри, які користувач записує у першому блоці тега через пропуск чи з нового рядка, наприклад, <BODY TEXT="red">...</BODY>. Нечислові значення параметрів прийнято записувати у лапках.
У середині пари тегів <HEAD>...</HEAD> описують заголовок документа. Головна частина заголовка документа - заголовок Windows-вікна, який пишуть у середині пари тегів <TITLE>...</TITLE>. Інші елементи заголовка вивчатимемо пізніше.
Тег <!-- текст --> позначає коментар. Текст у середині цього тега виводитися на екран не буде. Коментар можна писати також у середині парного тега <COMMENT> текст-коментар </COMMENT>.
Зауваження. У багатьох книжках замість слова параметр вживають термін атрибут, а одинарний чи парний теги називають елементом, наприклад, елемент BODY тощо.
5
.
Елемент (тег) BODY.
У середині пари тегів <BODY паpaметри>...</BODY>
записують увесь текст сторінки. Цей
текст
відображатиметься у вікні броузера.
Щоб на екрані відобразити звичайним способом стандартний текст, жодного програмування не потрібно - достатньо набрати потрібний текст. Якщо ж дизайнер хоче подати текст спеціально, щоб він виглядав якнайкраще, до тексту застосовують теги форматування. У цьому, зокрема, і полягає суть програмування мовою HTML.
Розглянемо головні параметри тега BODY:
|
BACKGROUND = "d:\myweb\picturel .jpg " |
Задає шлях до картинки для тла |
|
BGCOLOR = "white" |
Задає білий колір тла, якщо не використовується тло-картинка |
|
BGPROPERTIES = "fixed" |
Фонове зображення не прокручується |
|
TEXT = "black" |
Задає колір тексту (тут чорний) на сторінці |
|
Інші параметри, що стосуються способів відображення гіперпосилань (LINK, VLINK, ALINK), вивчатимемо пізніше.
6. Форматування тексту для web-сторінок. Розглянемо теги, які використовують для форматування тексту.
Теги форматування символів тексту (вони парні):
<В> текст </В> |
Жирний шрифт тексту |
<І> текст </І> |
Шрифт-курсив |
<U> текст </U> |
Підкреслений шрифт |
<SUB> текст </SUB> |
Нижній індекс. Наприклад, щоб отримати вираз Н2О, пишуть H<SUB>2</SUB>O |
<SUP> текст </SUP> |
Верхній індекс, наприклад, 1а вулиця, а2 |
<BIG> текст </BIG> |
Великий шрифт |
<SMALL> текст </SMALL> |
Малий шрифт |
<EM> текст </ЕМ> |
Виокремлений курсивом текст (те саме, що тег І) |
<B> <I> текст </І> </В> |
Жирний курсив. Цей приклад демонструє застосування принципу вкладення тегів |
Теги для розміщення тексту (вони одинарні):
<P> |
Цей тег означає початок нового абзацу. Його можна записувати в кінці попереднього. Наступне після тега <Р> речення починатиметься з нового, вирівняного до лівого краю, абзацу без відступу. Між абзацами буде порожній рядок. Зауважимо, що тег <Р> може використовуватися як парний: <Р> текст абзацу </Р> |
<BR> |
Наступний за цим тегом текст буде наведено у новому рядку без пропуску рядка |
<HR> |
У рядку буде проведена горизонтальна лінія |
7. Заголовки і теги вирівнювання. Заголовок - окремий тип абзацу. Є шість видів заголовків, які відрізняються розмірами символів:
Теги |
Результат на екрані |
<Н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> |
Вирівнювання до правого краю |
Зауваження. Теги заголовків не варто використовувати для створення звичайних абзаців з різними розмірами шрифту.
Приклад 2. Розгляньте зразок форматування тексту для web-сторінки з розповіддю деякої особи про себе.
<HTML> <І--Це
файл
file2.htm
-->
<HEAD>
<TITLE> My web-page </TITLE>
</HEAD>
<BODY BGCOLOR ="yellow"
TEXT =
"navy">
<СЕNТЕR><Н1>Привіт!</Н1>
<H2>
Мене звуть Світлана </Н2> </CENTER>
<HR>
<H3>
Мені 16 років </НЗ>
<Н4>
Я хочу стати web-дизайнером
</Н4>
<HR>
Це моя <В> друга</В>
спроба створити web-сторінку.
Я вже
вмію користуватися заголовками,
вставляти лінії, форматувати текстові
абзаци. Пізніше я навчуся вставляти
<I>фотографії,
картинки, звук, відеозображення</I>
шляхом посилання на відповідні
<U>графічні,
звукові чи відео файли </U>.<Р>
Я збережу
цей файл на диску і відкрию його у
броузері.
<Р>
Цю
web-сторінку
я буду удосконалювати. Її ще рано
розміщувати
на сервері.<HR>
</BODY>
</HTML>
На рис. 2 подано вигляд екрана після відкривання файлу file2.htm у броузері.
Рис. 2. Вигляд сторінки у броузері