ЛАБОРАТОРНА РОБОТА
ЛАБОРАТОРНА РОБОТА
ТЕМА: INTERNET. СТВОРЕННЯ WEB–СТОРІНКИ, ЗАСТОСУВАННЯ МОВИ HTML
МЕТА: Уміти створити нескладні Web-сторінки засобами мови HTML, а також за допомогою програм FronPage або Word.
ПЛАН:
Створити особисту Web-сторінку засобами мови HTML.
Створити Web-сторінку за допомогою Web-комповзера.
ТЕОРЕТИЧНІ ВІДОМОСТІ:
1. Гіпертекст. Гіпертекст – це електронний документ, який містить гіперпосилання на інші документи. Гіперпосилання може мати вигляд підкресленого виокремленого кольором тексту, ри-сунка або деякого значка. Воно містить невидиму для користу-вача частину – адресу файлу чи адресу місця у документі, до якого потрібно перейти. Гіперпосилання реагує на вказівник і клацання миші. Якщо вказівник миші навести на гіперпосилання, то він набуде вигляду долоні. Якщо тепер клацнути лівою клаві-шею миші, то виконається перехід на інше місце в тексті або активізується новий файл. Такий файл може містити текст, звук чи відеозображення. Гіпертекстову технологію застосовують для подання інформації у WWW-просторі, зокрема, для роботи з Web-документами.
Web-документ зберігається і пересилається як файл з роз-ширенням htm чи html. Це звичайні текстові файли – програми, написані мовою HTML. Відображаються такі файли на екрані зовсім інакше, ніж вони виглядають у html-файлі. Для відобра-ження html-файлів використовують броузери.
Web-документ інакше називають Web-сторінкою. Броузер дає змогу легко переходити від одної сторінки до іншої за допомогою команд Вперед і Назад чи кнопок зі стрілками на панелі інстру-ментів.
Декілька Web-документів на одну тему, що є на деякому комп'ютері чи належать одному власнику, утворюють Web-вузол (інший термін Web-сайт).
2. Структура Web-документа. Типовий простий Web-доку-мент складається з текстових блоків, двох-трьох рисунків невели-ких розмірів, горизонтальних ліній та гіперпосилань. Більш склад-ні Web-документи містять фрейми (вкладені Web-сторінки), елементи керування (кнопки, перемикачі, поля діалогу), динамічні ефекти та графічні об'єкти ActiveX.
Є три типи текстових блоків: короткі (по два-три речення) текстові абзаци, списки, таблиці.
Згідно з прийнятим стандартом абзаци на Web-сторінці роз-межовуються порожнім рядком і не мають відступів у першому рядку. Абзац може бути вирівняний до одного з країв або до центру екрана. Особлива зручність перегляду інформації зумовлена тим, що в нормальному режимі на Web-сторінці немає горизонтальної смуги прокручування (а вертикальна є). Броузер автоматично масштабує горизонтальне зображення різних елементів сторінки, враховуючи характеристики монітора комп'ютера клієнта і розміри Windows-вікна, в якому демонструється документ.
Інформація на сторінці традиційно подається на сірому чи білому фоні, але її можна розмістити і на кольоровому фоні чи на фоні картинки з деякого графічного файлу.
3. Мова HTML. Для створення Web-сторінок Web-дизайнери використовують гіпертекстові Web-редактори, наприклад, HotMetal PRO, Hot Dog Рrofessional, Netscape Editor тощо, де використовується мова HTML – Hyper Text Markup Language (мова для розмічування гіпертекстових документів). Сучасні редактори FrontPage і MS Word дають змогу створювати Web-сторінки методом конструювання без застосування кодів мови HTML, оскільки коди вони генерують автоматично.
Для підготовки html-файлу можна використати текстовий редактор NotePad. Після написання програми файл потрібно зберегти на диску з деякою назвою з розширенням htm чи html. Програма мовою HTML (html-файл) має таку загальну структуру:
<HTML>
<HEAD>
<TITLE> Назва вікна Web-сторінки </TITLE>
</HEAD>
<BODY параметри>
Мене звати Валентина. Мені 20 років.
Я хочу стати Web-дизайнером.
Це моя перша Web-сторінка. Тут я можу писати будь-який текст, наприклад, про себе і мої інтереси. Пізніше я навчуся вставляти фотографії, картинки, звук, відеозображення шляхом посилання на відповідні графічні, звукові чи відеофайли. Я збережу цей файл на диску і відкрию його у броузері. Моя сторінка ще не красива і не цікава. Але скоро я навчуся робити прикольні Web-сторінки.
Я розташую файл на сервері і мою сторінку зможуть побачити в різних кінцях світу.
</BODY>
</HTML>
Команди мови HTML називаються тегами. Теги бувають одинарними і парними. Більшість тегів є парними, як наприклад, тег означення HTML-файлу: <HTML> ... </HTML>.
Парні теги позначають початок і кінець області дії відповідної команди. Теги записують у кутових дужках. Тег, що закриває область дії, має косу риску. Не забувайте її писати, інакше тег працюватиме неправильно. Тег може містити параметри, які користувач записує у першому тезі через пропуск, наприклад, <BODY TEXT="red">.
Між тегами <TITLE>...</TITLE> пишуть заголовок Windows-вікна, а між <BODY napaметри>...</BODY> — основний текст, до якого застосовують теги форматування.
Розглянемо основні параметри тега BODY:
BACKGROUND = "шлях до графічного файлу" – задає картин-ку для фону; BGCOLOR = "white" – задає білий колір фону, якщо не використовується фон-картинка; TEXT = "black" – задає колір тексту (тут чорний) на сторінці.
4. Теги для форматування тексту
<Р> – початок нового абзацу; його прийнято записувати в кінці попереднього. Наступне речення починатиметься з нового, вирівняного до лівого краю абзацу без відступу у першому рядку.
<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.
Заголовок за замовчуванням вирівнюється до лівого краю вікна. Якщо вирівнювання
