- •Html-формат
- •Робота з тегами.
- •Як працюють браузери
- •Визначення html-файлу.
- •Визначення заголовка.
- •Завдання розміру символів
- •Використання стилів заголовка
- •Гарнітура і колір шрифту.
- •Запис кольору у форматі rgb
- •Атрибути зображення
- •Посилання в межах одного документа
- •Як підготувати гарну Web-сторінку
- •Тестування
- •Висновок
Вступ
Ціль занять — вивчення основних концепцій HTML, необхідних для розуміння принципів розробки документів для Інтернету.
Сьогодні Інтернет є одним з найсучасніших і революційних засобів передачі інформації. Інтернет складається з численних комп'ютерних мереж, об'єднаних в одну глобальну мережу і, що обмінюються між собою інформацією. В даний час особливо швидко розвивається частина Інтернету, називана World Wide Web (WWW або просто Web). У WWW утримується інформація, представлена в текстовому, графічному, відео- і аудіоформатах.
Html-формат
Основним форматом Web-документів, що складають уміст вузлів Web, є Hypertext Markup Language (HTML — мова розмітки гіпертексту). HTML являє собою сукупність досить простих команд, що вставляються у вихідний текст документа (ASCII-файл) і дозволяють керувати представленням цього документа на екрані дисплея. Таким чином, текст, підготовлений у будь-якому текстовому редакторі і збережений у звичайному ASCII-форматі, стає Web-сторінкою (HTML-документом) після додавання в нього ряду команд мови HTML.
Робота з тегами.
Команди HTML задаються за допомогою спеціальних елементів, називаних тегами (tag). Теги дозволяють керувати представленням інформації на екрані при відображенні HTML-документів спеціальними програмами — браузерами , або оглядачами (від англ. browse — переглядати), такими, як Microsoft Internet Explorer або Netscape Navigator.
Тег має вигляд рядка символів, вкладеного між символами “<” і “>”. Наприклад, <BR> — це тег переносу рядка.
Існують два типи тегів:
• одноелементний тег, що досить просто вставити в текст для того, щоб зробити яку-небудь дію;
• парний тег, що впливає на текст, вкладений між місцем, де ужитий тег, і місцем, у якому зазначена ознака завершення команди. Ознака завершення команди — це той же самий тег, тільки починається із символу “/”. Наприклад, <BODY> і </BODY> — ознаки початку і закінчення тексту документа.
Як працюють браузери
Графічна, відео- і аудіоінформация зберігається в окремих файлах і приймається браузером відповідно до посилань у документі на ці файли. Прийнявши інформацію, браузер компонує елементи документа відповідно до того, що задано командами HTML, і показує результат на екрані з урахуванням попередніх настроювань, що стосуються розмірів вікна браузера, використовуваної колірної схеми, установлених шрифтів і т.д.
Файли HTML — це звичайні текстові файли, що мають розширення НТМ. Будемо використовувати для створення і редагування файлів HTML стандартну програму Блокнот (Notepad), що входить у комплект Windows, а для перегляду результату створення Web-сторінок — браузер Microsoft Internet Explorer.
Визначення html-файлу.
Перший тег, що повинний знаходитися в будь-якому HTML-документі, — це <HTML> ... </HTML>. Цей тег указує на те, що даний документ дійсно містить у собі HTML-текст. Усе, що ви напишете у своєму документі, повинне знаходитися усередині даного тега:
<HTML>
...
текст документа
...
</HTML>
Ви вказали, що ваш документ дійсно містить команди HTML, ви повинні розбити документ на дві частини — заголовок і власне текст.
Визначення заголовка.
Визначення заголовка повинне знаходитись усередині тега <HEAD> ...</HEAD>:
<HTML>
<HEAD>
...
опис заголовка
...
</HEAD>
...
текст документа
...
</HTML>
У розділі опису заголовка можна вказати заголовок документа, для цього використовується тег <TITLE> ... </TITLE>. Коли браузер зустрічає цей тег, він відображає усе, що знаходиться усередині нього, як заголовок. Приклад того, як використовується даний тег:
<HTML>
<HEAD>
<TITLE> Цей заголовок документа </TITLE>
</HEAD>
...
текст документа
...
</HTML>
Визначення тіла документа.
Весь інший HTML-документ, включаючи весь текст, утримується усередині тега <BODY> ...</BODY>. Тепер наш документ виглядає приблизно так:
<HTML>
<HEAD>
<TITLE> Цей заголовок документа </TITLE>
</HEAD>
<BODY>
...
текст документа
...
</BODY>
</HTML>
Незважаючи на те що присутність цих трьох тегів передбачена стандартом, більшість браузерів може відобразити документ навіть при їхній відсутності.
Однак варто привчити себе завжди вказувати ці теги — і вам не прийдеться турбуватися з приводу редагування документа, якщо в майбутньому ці теги стануть необхідні.
Завдання 1. Створення найпростіших файлів HTML.
1. Створіть у своєму каталозі папку KURS, у якій ми будемо зберігати сконструйовані Web-сторінки.
2. Запустіть програму Блокнот (Notepad).
3. Наберіть у вікні редактора найпростіший текст файлу HTML:
<HTML>
<HEAD>
<TITLE> Навчальний файл HTML</TITLE>
</HEAD>
<BODY>
Розклад занять на вівторок
</BODY>
</HTML>
4. Збережіть файл під ім'ям RASP.HTM.
5. Для перегляду створеної Web-сторінки завантажте браузер Microsoft Internet Explorer.
6. Виконайте команду Файл (File), Відкрити (Open), Перегляд (Огляд, Browse), знайдіть у папці KURS файл RASP.HTM і завантажте його. Переконаєтеся, що назва Web-сторінки (“Навчальний файл HTML”) відбилося у верхньому, статусному, рядкові браузера.
Завдання 2. Керування розташуванням тексту на екрані.
1. При необхідності виконайте пункти 5 — 6 завдання 1.
2. Відкрийте першоджерело створеної вами Web-сторінки, виконавши команду Вид (View), Джерело (У виді HTML). Відкриється вікно програми Блокнот, у якому ваша Web-сторінка буде представлена в командах HTML.
3. Внесіть зміни в текст файлу HTML, розташувавши слова “Розклад”. “занять”, “на вівторок” на різних рядках:
<HTML>
<HEAD>
<TITLE> Навчальний файл HTML</TITLE>
</HEAD>
<BODY>
Розклад
занять
на вівторок
</BODY>
</HTML>
4.Збережіть текст із внесеними змінами у файлі RASP.HTM за допомогою команди Файл (File), Зберегти (Save).Закрийте програму Блокнот.
5. Переглянете за допомогою браузера Microsoft Internet Explorer отриману Web-сторінку, використовуючи клавішу F5 або команду Вид (View), Обновити (Refresh). Чи змінилося зображення тексту на екрані?
Примітка. Надалі після внесення змін у Web-сторінку завжди виконуйте пункти 4 — 5 завдання 2.
Завдання 3. Деякі спеціальні команди форматування
Існують спеціальні команди, що виконують розрив рядка і задають початок нового абзацу. Крім того, є команда, що забороняє програмі браузера яким-небудь чином змінювати форматування тексту і дозволяє точно відтворити на екрані заданий фрагмент текстового файлу.
Тег переходу рядка <BR> відокремлює рядок від наступного тексту або графіки. Тег абзацу <Р> теж відокремлює рядок, але ще додає порожній рядок, що видимо виділяє абзац. Ці теги є одноелементними.
Використання тегів переходу рядка й абзацу.
1. Внесіть зміни в текст файлу HTML:
<HTML>
<HEAD>
<TITLE>Навчальний файл HTML</TITLE>
</HEAD>
<BODY>
<Р> Розклад</Р>
<ВR>занять<ВR>
на вівторок
</BODY>
</HTML>
2. Збережіть текст із внесеними змінами у файлі RASP.HTM.
3. Перегляньте за допомогою браузера Microsoft Internet Explorer отриману Web-сторінку. Як змінилося зображення тексту на екрані?
Завдання 4. Виділення фрагментів тексту.
1. Внесіть зміни у файл RASP.HTM:
<HTML>
<HEAD>
<TITLE>Навчальний файл HTML</TITLE>
</HEAD>
<BODY>
<B> Розклад </U><I>
занять</I> <U>
на вівторок</U>
</BODY>
</HTML>
2. Перегляньте отриману Web-сторінку.
Можливе використання комбінованих виділень:
<I><U>Розклад </U></I> <I>занять
</I> <U> на вівторок</U>
Але при цьому необхідно пам'ятати наступне правило запису комбінованих тегів:
<Тег-1> <Тег-2> ... </Тег-2> </Тег-1> — правильний запис;
<Тег-1> <Тег-2> ... </Тег-1> </Тег-2> — помилковий запис.