Основи розробки WEB-документів засобами мови розмітки гіпертексту HTML

World Wide Web (скорочено WWW) є глобальною гіпертекстовою структурою. Ця технологія реалізує ідею глобальної інформаційної бази даних. Робота в WWW вимагає наявність доступу в Інтернет.
Гіпертекст – це текст зі вставленими в нього командами розмітки, що посилаються на інші місця цього тексту, інші документи, малюнки і інші об'єкти. Під час перегляду такого тексту користувач бачить виділені іншим кольором або підкреслені в тексті слова, по яких можливий перехід на інші об'єкти.
Розміщення власних матеріалів в Інтернеті включає два етапи: підготовку матеріалів і їх публікацію.
Підготовка матеріалів полягає в створенні документів, що мають формат, прийнятий в Інтернеті, тобто Web-сторінок. Вони пишуться на мові HTML (Hyper Text Markup Language – мова розмітки гіпертексту). HTML надає можливість використання малюнків, таблиць, різних шрифтів в гіпертекстовому документі, а також так званих скриптів (своєрідних програм в HTML-документах).
Публікація матеріалів, тобто відкриття до них доступу, здійснюється після рішення організаційних питань, пов'язаних з отриманням дискового простору на Web-сервері для їх розміщення.
Для передачі HTML-документів використовується HTTP – протокол передачі тексту (Hyper Text Transfer Protocol).
Для перегляду HTML-сторінок в WWW використовуються спеціальні програми, які називаються браузерами (броузерами). Найбільш поширеним браузером є Internet Explorer фірми Microsoft Corporation. Програма Internet Explorer поставляється разом з операційною системою Windows, і тому немає необхідності додатково встановлювати браузер. Для читання електронної пошти і новин використовується додаток Microsoft Outlook. Для створення і редагування HTML-документів можна також використовувати HTML-редактор FrontPage, або використовувати можливості програми Word, Excel, Access, PowerPoint.
1.1. Створення Web-документів на мові HTML
Документ на мові HTML є звичайним текстовим файлом, що містить як сам текст, так і спеціальні теги форматування документа і посилання на файли, що містять графічну і звукову інформацію. Теги форматування призначені для програм перегляду гіпертексту. Відповідно до них браузер формує зовнішній вигляд документа для виведення його на екран.
Для HTML-документів прийняті наступні розширення файлів:
.htm – для операційних систем, що підтримують не більше трьох символів для розширення файлів (MS DOS, Windows 3.X);
.html – для операційних систем, що підтримують більше трьох символів для розширення файлів (UNIX, Windows 95 і вище).
У текст документа не можуть включатися символи < &, «.
Теги мови HTML призначені для форматування і розмітки документа. Тег починається з символу . Практично всі теги мови HTML є парними, за деяким виключенням. Всі теги, атрибути і буквені параметри використовують латинські символи, які можуть бути як рядковими, так і прописними. У випадку парних тегів закриваючий тег відрізняється від відкриваючого наявністю символу / після відкриваючої кутової дужки.
Наприклад: ... – парний тег опису параграфів. Дія парного тегу поширюється на весь текст, розташований між ними. Мова HTML передбачає використання вкладених тегів.
В деяких випадках теги можуть містити атрибути. Атрибути – це ключові слова. Вони відділяються від тега і інших атрибутів пропусками. Значення атрибуту розміщується після символу = і поміщається в лапки. Наприклад: . У парних тегах атрибути додаються тільки до відкриваючого тегу.
Значення параметрів, як правило, також поміщаються в лапки, але можуть бути і без них. Наприклад, SIZE=10 або SIZE="10". Тут атрибут SIZE має значення 10.
1.1.1. Структура HTML-документу
HTML-документ починається в тегом і закінчується тегом . Між цими тегами розташовується текст документа. Наприклад:

Текст документа

Інші елементи документу розбивається на два розділи: розділ головної частини документа і розділ самого тіла документа.
На екрані теги не відображаються, як не відображаються елементи головної частини. Відображається тільки текст.
Розділ головної частини документа починається і закінчується тегами і . У головній частині між тегами і , вказується назва документа, також зустрічаються теги, що дозволяють описати ключові слова документу, та іншу додаткову інформацію. Основний зміст документа розташовується між парними тегами .
Наприклад:


назва документа


Текст документа


1.1.2. Функціональні блокові елементи. Теги форматування тексту
У більшості Web-документів основними функціональними елементами є заголовки і абзаци.
Заголовки
Мову HTML підтримує 6 рівнів заголовків. Вони задаються за допомогою парних тегів від ... до .... При відображенні документів текст різних рівнів відображається шрифтами різних розмірів. Рівні повинні бути вкладеними.
Абзаци
Для створення параграфа або абзацу тексту використовуються парні теги і . Наприклад:
текст першого абзацу
текст другого абзацу .
Тег може бути не парним, тобто використання закриваючого тегу не обов'язково. Натиснення на клавішу ENTER недостатньо для переходу на новий рядок. Для цієї мети використовується непарний тег
. Порожній рядок при цьому не вставляється.
Як обмежувач абзацу може використовуватися горизонтальна лінійка. Цей елемент задається непарним тегом

---

. Горизонтальна лінія використовується для розділення тексту на логічні частини. Для завдання додаткових параметрів горизонтальної лінійки використовуються наступні атрибути:–

---

– задає товщину лінії в пік селях;–

---

– задає довжину лінії по горизонталі в пікселях або відсотках від ширини екрану. –

---

– задає вирівнювання лінії по лівому краю, по центру або по правому краю. –

---

– за замовчуванням лінія виводиться з використанням тривимірного ефекту. При використанні даного атрибуту лінія виводиться одним кольором.
Наприклад, якщо створюється горизонтальна лінійка шириною в 10 пікселів, що займає половину ширини вікна і розташовану справа, слід записати:

---

.
Для створення горизонтальної лінійки зеленого кольору шириною в 8 пікселів, що займає 80 % ширина вікна при вирівнюванні по центру, слід записати:

---

.
Відповідно для завдання смуги червоного кольору слід записати COLOR= "RED", для завдання блакитного кольору лінії слід записати COLOR= "BLUE" і т.д.
1.1.3. Списки
Для представлення інформації у вигляді ненумерованого списку використовуються теги

і

. Кожен елемент списку задається за допомогою непарного тегу

.

• Приклад I
  
• Приклад 2
  
• Приклад 3
  

Для представлення інформації у вигляді нумерованого списку використовуються теги

і

. Кожен елемент списку задається за допомогою непарного тегу

.
Приклад:

1. Приклад 1
   
2. Приклад 2
   
3. Приклад 3
   

1.1.4. Таблиці
Таблиці зручні для представлення великих об'ємів даних. Таблиця в мові HTML задається за допомогою парного тегу . Вона може містити заголовок, що задається парним прапором . Закриваючий тег можна опустити. Кожен рядок таблиці містить осередки таблиці, які можуть відноситися до двох різних типів. Осередки в заголовках стовпців рядків задають парним тегом , інші осередки парним прапором можна опустити. Атрибути елементів, використовуваних при створенні таблиць:
a) ALIGN. Елемент – таблиця, заголовок, рядок, осередок.
Використовуються для вирівнювання таблиці по горизонталі, розміщення заголовка над або під таблицею;
WIDTH. Елемент – рядок, осередок. Задається ширина;
HIGHT. Елемент – осередок. Задається висота;
BGCOLOR. Елементи – таблиця, осередок. Задає колір фону;
e) BORDER. Елемент – таблиця. Відображення меж осередків і зовнішньої рамки таблиці.
1.1.5. Коментарі
Коментарі розміщуються між тегами

і

. Терміни всередині коментаря починаються з тегу

, визначення починаються з тегу

.
Приклад,

Байт

Містить 8 бітів.

Кілобайт

Містить 1024 байти.

1.2. Форматування тексту
Управління форматуванням тексту не є основним завданням мови HTML. Тому у сучасних версіях HTML, починаючи з версії 4.0 теги, що задають форматування, розглядаються як застарілі. Їх використання не рекомендується.
Парний тег управляє параметрами шрифту. Він повинен містити хоч би один з трьох атрибутів: Color, Face, Size. Атрибут Color задає колір тексту. Наприклад, Color= «Red». Атрибут Size визначає розмір шрифту у відносних одиницях від 1 до 7. Наприклад, Size=4. Цей атрибут можна задавати із знаком + або – щодо поточного розміру. Наприклад, . Атрибут Face задає гарнітуру шрифту.
Приклад, Шрифт 4-го розміру
Цей текст зелений
Зображення символів задається за допомогою парних тегів: (напівжирний шрифт), (курсив), (підкреслений текст), (викреслений текст). Їх використання не рекомендується. Замість них слід використовувати парні прапори (виділення), (сильне виділення). Для опису комп'ютерних програм використовують парні прапори (початковий текст програми), (текст, що вводиться з клавіатури), (приклад введення програми), (програмні змінні).
1.2.1 Гіперпосилання
HTML-документ є гіпертекстовим. Тег гіперпосилання є одним з найбільш важливих тегів мови HTML. Цей тег позначає текст або графічне зображення як мету переміщення в Інтернеті. Гіперпосилання визначається парним тегом і . Тег включає декілька атрибутів. Обов'язково є наявність одного з наступних атрибутів: Name або HREF. Як значення атрибуту використовується URL-адреса документа, на який веде посилання. Ним може бути довільний документ, розташований на загальнодоступному вузлі мережі (Web-вузол, архів FTP і ін.). Наприклад, щоб потрапити на сайт Галицької Академії, слід записати гіперпосилання .
Для створення гіперпосилання, наприклад, в документі Zavdana на документ з іменем Zavdana1, в текст цього документу слід вставити рядок
Zavdana1 .
1.2.2 Підготовка і використання графічних файлів
Графічні ілюстрації є в більшості випадків невід'ємною частиною Web-документа. Для використання графічних файлів використовуються два формати – GIF і JPEG.
У Web-документі можна виділити наступні типи графічної інформації:
картинки для шпалер документів;
кнопки і заголовки;
картинки або безпосередньо графічні матеріали.
Малюнки зберігаються на Web-вузлах в окремих файлах, але відображаються як елементи Web-сторінок. Для вставки малюнка використовується текстовою елемент, що задається непарним тегом . Він повинен містити обов'язковий атрибут SRC, що задає адресу файлу із зображенням у відносній або абсолютній формі.
Наприклад: .
При відображенні малюнка браузер за умовчанням використовує його реальні розміри. Атрибути WIDTH і HIGHT задають ширину і висоту малюнка в пікселях.
Наприклад:
.
Для завдання способу взаємодії малюнка з текстом використовується атрибут ALIGN, який може приймати значення:
BOTTOM – нижня межа зображення поєднується з нижнім краєм текстового рядка;
MIDDLE – середина зображення поєднується з серединою текстового рядка;
ТОР – верхня межа зображення вирівнюється по верхньому краю текстового рядка;
LEFT – зображення розміщується у лівого краю сторінки;
RIGHT – зображення розміщується у правого краю сторінки, а текст розміщується зліва від нього.
Наприклад:

Фоновий малюнок (шпалери) задається за допомогою атрибуту BACKGROUND в тегу . Значенням цього атрибуту повинна бути абсолютна або відносна адреса URL для файлу із зображенням. Наприклад:
.
Картинки, які можна використовувати як фон, можна знайти, наприклад, на Web-сервері .
Розглянемо використання малюнків з картинної галереї ClipArt. Для створення файлу з малюнком з цієї колекції використаємо програма WORD. З допомогою меню Вставка>Малюнок>Картинки вставити в документ неохідний малюнок. Картинка зберігається після виконання команд Файл > Зберегти як веб-сторінку. У діалоговому вікні, Збереження документа вказується шлях до файлу з картинкою. Файл слід зберегти в особистій папці студента. Указується ім'я файлу, наприклад Ris1. Тип файлу встановлюється як веб-сторінка. Після натиснення на клавішу Зберегти в особистій папці студента з'являється папка з ім'ям Ris1.files. Ця тека містить файл з ім'ям image002.gif, у якому збережений малюнок. На цей малюнок слід посилатися при вставці малюнка у веб-сторінку. Для цього слід вставити рядок
.
Розташування малюнка прийняте посередині сторінки.
Завдання 1. Створення простої Web-сторінки
1. В текстову редакторі Блокнот введіть наступний текст:


Перша Web-сторінка студента (прізвище)



Перша Web-сторінка створена (дата) і буде збережена в під ім'ям zavdanna1.html

Для створення фону (шпалер) тег слід записати так:
або
.
У першому випадку фон буде блакитним, а текст буде червоного кольору. У другому випадку фон задається картинкою з ім'ям 2.jpg, а текст буде жовтого кольору.
2. Збережіть документ в своїй папці під ім'ям zavdanna1.html і
другий раз під ім'ям zavdanna1.txt.
3. Подивіться, як відображається цей файл у браузері. як відображається заголовок документа, розташований між тегами і , і відображення вмісту основного документа, розташованого між тегами і .
Завдання 2. Вивчення прийомів форматування абзаців
1. Відкрийте файл zavdanna1.txt і видаліть текст між тегами і .
2. Після тегу введіть новий текст.
1. Додаткові засоби підготовки документів .
Відокремите подальший текст зеленою горизонтальною лінією за допомогою тегу

---

:

---

.
Далі введіть:
1.1. Гіперпосилання .
У WORD 2003 автоматично оформляють шляхи до файлів з їх іменами, а також адреси Web-сторінок і електронної пошти як гіперпосилання.
Приклад створення гіпертекстового посилання розглянутий вище. Нижче приведений приклад створення гіперпосилання на файл Zavdanna1.htm, який знаходиться на жорсткому диску локального комп'ютера.
3. Відокремите цей абзац від решти тексту червоної горизонтальної лінії за допомогою прапора

---

:

---

.
4. Введіть ще один абзац тексту, почавши його з тегу . Наприклад:
Побудова маркованого і нумерованого списків.
5. Побудуйте маркований список. Для цього введіть:

• Завдання 1
  
• Завдання 2
  Завдання 3
  

Побудуйте нумерований список. Для цього введіть:

1. Завдання 1 – проста веб-сторінка
   
2. Завдання 2 – веб-сторінка з елементами форматування
   
3. Завдання 3 – включення таблиці у веб-сторінку
   

6. Відокремите цей абзац смугою жовтого або зеленого кольору.
Вставте з колекції ClipArt малюнок. Розташуйте малюнок з правого боку сторінки.
7. Вставте гіперпосилання на файл з ім'ям zavdanna1.html. Для цього після малюнка вставте рядки:
Активізуйте гіперпосилання
Zavdanna1 .
8. Збережете цей документ під ім'ям zavdanna2.html і другий раз під ім'ям zavdanna2.txt.
9. Перегляньте відображення файлу zavdanna2.html за допомогою браузера. Встановіть зв'язок між елементами коду HTML і фрагментами документа, що відображається на екрані. Текст Zavdanna1 буде виділений як гіперпосилання. Активізація цього тексту викликає появу файлу Zavdanna1.
Завдання 3. Створення таблиць
1. Відкрийте файл Zavdanna1.txt.
2. Видаліть в файлі весь текст, що знаходиться між тегами і .
3. Введіть тег

, і рядки таблиці, які задаються за допомогою парних тегів

. Закриваючі прапори і

.
4. Введіть рядок Список телефонів .
5. Перший рядок таблиці містить заголовки стовпців. Введіть:




7. Завершіть таблицю тегом

СЛУЖБА Номер телефону. 6. Введіть:
Пожежна охорона	01
Міліція	02
Швидка допомога	03
Газова служба	04

.
8. Збережете документ під іменами Zavdanna3.htm та Zavdanna3.txt.
9. Прогляньте отриманий файл за допомогою браузера. Вивчіть, як створена таблиця відображається в програмі Internet Explorer.
Завдання 4. Створення прайс-листа засобами мови HTML
Засобами мови HTML створіть прайс-лист за поданим зразком (рис.1).
Рис.1. – Зразок прайс-листа
Варіант 1 – Материнські плати на чіп сетах Intel
Виробник | Модель | Ціна, грн.
Foxconn | 945P7AA-8KS2 | 500
Gigabyte | GA-8I945p-G | 525
MSI | 945P Neo Platinum | 600
ASUS | P5LD2 Deluxe | 700
Варіант 2 – Струйні принтери
Виробник | Модель | Ціна, грн.
Lexmark | Z735 | 225
HP | DeskLet 3940
Варіант 1 – Материнські плати на чіп сетах Intel |
300
HP | DeskLet 5943 | 550
HP | DeskLet 6623 | 950
Варіант 3 – Струйні принтери
Виробник | Модель | Ціна, грн.
Epson | Stylus C48 | 350
Epson | Stylus C87 | 500
Canon | Pixma iP1600 | 375
Canon | Pixma iP5200 | 900
Варіант 4 – Монітори
Виробник | Модель | Ціна, грн.
Samsung | SyncMaster 795F | 650
Samsung | SyncMaster 757MB | 850
LG | Flatron F720B | 725
LG | Flatron F720P | 800
Варіант 5 – Монітори LCD
Виробник | Модель | Ціна, грн.
Samsung | SyncMaster 960BF | 2000
Samsung | SyncMaster 970P | 2500
LG | Flatron L1980Q | 2200
Acer | AL1951B | 2100
Варіант 6 – Процесори
Найменування | Ціна, грн. | Гарантія, міс
AMD Athlon 64 3000+ | 475 | 24
Celeron D352 | 480 | 36
AMD Athlon 64 3500+ | 525 | 24
Pentium D805 | 625 | 36
Варіант 7 – Жорсткі диски
Найменування | Ціна, грн. | Об’єм, GB
Western Digital WD800JB | 300 | 80
Hitachi HDS722516VLAT80 | 400 | 160
Samsung SP1614N | 410 | 160
Samsung SP2004C SATA NCQ | 450 | 200
Варіант 7 – Відеокарти
Найменування | Ціна, грн. | Чіпсет
ASUS EN7600GT | 1200 | GF 7600GT
MCI NX7300GT | 500 | GF 7300GT
Sapphire Radeon X1900GT | 1800 | Radeon X1900GT
eVGA GF 7900GT | 2000 | GF 7900GT
Завдання 4. Створення Web-документа за допомогою редактора FrontPage2003
Найбільш поширеними HTML-редакторами є FrontPage, HotDog. Розглянемо створення Web-документа, використовуючи редактора FrontPage 2003.
1. Запустіть програму FrontPage 2003
2. Виконайте команду Файл > Створити. У списку, з правого боку, в розділі Створити сторінку активізуємо пункт Порожня сторінка.
Відкривається порожня сторінка, на якій потім створюватиметься веб-сторінка.
3. Виконуємо команду Файл > Зберегти як.
4. Заповнення веб-сторінки.
1). Вставка горизонтальної лінії. У полі Вставка вибираємо Горизонтальна лінія.
Встановлюємо курсор на горизонтальній лінії, що з'явилася, і натискаємо праву клавішу миші. У контекстному меню, що з'явилося, вибираємо Властивості горизонтальної лінії і натискаємо ліву клавішу миші. У діалоговій панелі Властивості горизонтальної лінії відредагувати ширину, висоту, вирівнювання, колір.
2). Вставка малюнка. Виконати команди Вставка > Малюнок > З файлу. У діалоговому вікні Малюнок знайти свою папку та вказати ім'я малюнка і натиснути кнопку Вставити. Вибраний малюнок буде поміщений після зеленої лінії.
3). Редагування розміщення малюнка. Для цього покажчик курсора навести на малюнок, натиснути праву клавішу миші і в контекстному меню, що з'явилося, вибрати пункт Властивості малюнка. У діалоговому вікні Властивості малюнка натискаємо клавішу Вигляд і вибираємо Обтікання (можна вибрати Немає, Зліва, Справа). У розділі Положення вибираємо По середині. У розділі Розмір проставляється галочка у віконці Задати розмір. У розділах Ширина і Висота указуємо ширину і висоту малюнка в крапках або відсотках (приймемо у відсотках і вкажемо 100 і 200). Натискається кнопка ОК.
4). Вставка таблиці. Для цього:–
Поставте курсор в задане місце документу і виконайте команди Таблиці > Вставити таблицю. –
У діалоговому вікні Вставка таблиці в розділі Параметри макету вибрати Задіювати параметри макету на основі вмісту таблиці.–
У розділі Розмір вказати число рядків і стовпців. Решту параметрів прийняти за умовчанням.–
У таблицю введіть задану кількість рядків та стовпців.
5. За допомогою редактора створіть прайс-лист, згідно зразку (рис.1), і відповідно до заданого варіанту (спираючись на наведені вище рекомендації).
6. Відкрийте створений документ в браузері та переконайтеся, що створений документ правильно відображається браузером.
Змініть ширину вікна браузера і подивіться, як при цьому міняється вид документа.
Поверніться в програму FrontPage і виконайте команду Вигляд > HTML.
Дослідіть автоматично створений код HTML, визначите, як за допомогою тегів HTML реалізовані використані команди форматування.
Завдання 6. Створення Web-документа за допомогою табличного процесора Excel 2003
1. Активізуйте програму MS EXCEL.
2. У вікні програми, створіть прайс-лист, згідно зразку (рис.1), і відповідно до заданого варіанту.
3. Виберіть команду Файл > Зберегти як Web-сторінку.
4. У діалоговому вікні Збереження документа вкажіть ім'я файлу, тип файлу Веб-сторінка (*.htm; *.html), виберіть команду Опублікувати.
5. У діалоговому вікні Публікація Web-сторінки розкрийте список Вибрати. Виберіть Лист 1 або інший лист, на якому створений документ. Переконаєтеся, що в області Параметри перегляду знятий прапор Додати. Цей прапорець управляє інтерактивністю.
6. Задайте заголовок опублікованим даним, натиснувши кнопку Змінити. Введений заголовок відображатиметься в заголовку браузера, незалежно від поточного заголовка Web-сторінки.
7. У полі Ім'я файлу введіть ім'я файлу і повний шлях до файлу.
8. Щоб відразу побачити результати публікації в своєму браузері, встановіть прапорець Відкрити сторінку в оглядачі.
Натиснути кнопку Опублікувати.
9. Порівняйте отримані html коди сторінок отриманих при виконанні завдань 4, 5 та 6. В якому випадку отримано найбільш простий код? В чому полягає їх відмінність?

Внимание, отключите Adblock

Вы посетили наш сайт со включенным блокировщиком рекламы!
Ссылка для скачивания станет доступной сразу после отключения Adblock!

Скачать