- •Самостійна робота № 2
- •Теоретичні відомості
- •1. Як влаштований html–документ
- •2. Теги форматування
- •Коментарі
- •3. Форматування шрифта
- •Фізичні стилі
- •Логічні стилі
- •4. Організація тексту всередині документа
- •5. Таблиці
- •6. Посилання на інший документ (загальні посилання)
- •7. Кольорове оформлення сторінок засобами html
- •Практичне завдання
Самостійна робота № 2
Тема: Загальні принципи створення сайтів. Вивчення мови розмітки гіпертекстів HTML.
Мета: Ознайомитись з технологією створення Web-сайтів. Вивчення мови розмітки гіпертексту HTML. Вивчити основні теги Web-документу.
Звіт про виконання роботи має містити:
виконане практичне завдання;
відповіді на контрольні питання;
висновок.
Теоретичні відомості
1. Як влаштований html–документ
HTML-документ – це текстовий файл з розширенням *.htm (Unix-системи можуть містити файли з розширенням *.html).
Текстовий редактор, наприклад, WordPad або Notepade (Блокнот) використовується для підготовки HTML-файлів, а оглядач, наприклад, Internet Explorer – як інструмент контролю за зробленим.
Приклад 1. У текстовому редакторі, наприклад WordPad або Notepade (Блокнот) введіть простий HTML-документ:
<html>
<head>
<title>
Приклад 1
</title>
</head>
<body>
<H1>
Початок!
</H1>
<P>
Це найпростіший приклад HTML-документа.
</P>
<P>
Цей sample.htm-файл може бути одночасно відкритий і у Notepad (або WordPad), і у Internet Explorer. Збережіть зміни в Notepad (Файл–Сохранить). Відкрийте sample.htm у Internet Explorer, щоб побачити зміни реалізовані у HTML-документі.
</P>
</body>
</html>
Для зручності читання були введені абзаци, але у HTML це не обов'язково. Браузери ігнорують символи кінця рядку і пропуски у HTML–файлах. Змініть sample1.htm таким чином і збережіть зміни:
<html>
<head>
<title>Приклад 1 </title>
</head>
<body>
<H1> Початок! </H1>
<P>Це найпростіший приклад HTML–документа. .</P>
<P> Цей sample.htm–файл може бути одночасно відкритий і у
Notepad (або WordPad), і у Internet Explorer. Збережіть зміни в Notepad (Файл–Сохранить). Необхідно відкрити sample.htm у Internet Explorer, щоб побачити зміни реалізовані у HTML–документі.</P>
</body>
</html>
Зробіть активним вікно Internet Explorer з відкритим файлом sample1.htm і застосуйте команду Обновить.
Вся інформація про форматування документа зосереджена в його фрагментах, що знаходяться між знаками "<" і ">". Такий фрагмент (наприклад, <html>) називається тегом (англійською–tag).
Більшість HTML–тегів–парні, на кожний тег, що відкривається <tag> є тег, що закривається</tag> з тим же ім'ям, але додається "/".
Теги можна вводити як великими, так і маленькими літерами. Наприклад, теги <body>, <BODY> и <Body> будуть сприйматись браузером однаково.
Багато тегів, крім імені, можуть містити атрибути–елементи, що дають додаткову інформацію про те, як браузер повинен обробляти поточний тег.
Обов'язкові теги
<html> ... </html>
Тег <html> відкриває HTML–документ. Тег </html> – завершує HTML–документ.
<head> ... </head>
Ця пара тегів вказує на початок і кінець заголовку документа. Крім назви документа, в цей розділ можна додати багато службової інформації.
<title> ... </title>
Все, що знаходиться між мітками <title> і </title>, тлумачиться оглядачем як назва документа. Оглядач показує назву поточного документа у заголовку вікна. Рекомендується назва не довша 64 символів.
<body> ... </body>
Ця пара тегів вказує на початок і кінець HTML–документа, тіло і визначає вміст документа.