Хід роботи
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–документа, тіло і визначає вміст документа.
2. Теги форматування
<H1> ... </H1>–<H6> ... </H6>
Теги виду <Hi> (де i–цифра від 1 до 6) описують заголовки шести різних рівнів. Заголовок першого рівня–самий крупний, шостого рівня–самий дрібний.
<P> ... </P>
Така пара тегів описує абзац. Все, що знаходиться між <P> і </P>, сприймається як один абзац.
Теги <Hi> і <P> можуть містити додатковий атрибут ALIGN ("вирівнювати"), наприклад:
<H1 ALIGN=CENTER> Вирівнювання заголовку по центру</H1>
або
<P ALIGN=RIGHT> Зразок абзацу з вирівнюванням по правому краю </P>
Приклад 2. У редакторі Notepade створіть файл sample2.htm з таким вмістом:
<html>
<head>
<title>Приклад 2</title>
</head>
<body>
<H1 ALIGN=CENTER>Продовження!</H1>
<H2>Це складніший приклад HTML–документа</H2>
<P>Тепер ми знаємо, що абзац можна вирівнювати не тільки вліво, </P>
<P ALIGN=CENTER> але й по центру </P> <P ALIGN=RIGHT> або по правому краю.</P>
</body>
</html>
Перегляньте файл sample2.htm у браузері Internet Explorer.
Непарні теги та &–послідовності
<BR>
Цей тег використовується для переходу на новий рядок, не перериваючи абзац .
Приклад 3. У редакторі Notepade створіть файл sample3.htm з таким вмістом:
<html>
<head>
<title>Приклад 3</title>
</head>
<body>
<H1>Деякі положення</H1>
<H2>Основи роботи</H2>
<P>HTML–файли розробляються на локальному диску <BR>
Іншими словами, комп'ютер, на якому виконуються роботи може і не мати підключення до Інтернет<BR>
*.htm–файл може бути одночасно відкритий і у Notepad (або WordPad), і у Internet Explorer. <BR>
Для того, щоб побачити зміни, що зроблені у текстовому редакторі, у Internet Explorer, застосовується команда Обновить <BR>
</body>
</html>
<HR>
Тег <HR> описує горизонтальну лінію:
Тег може включати атрибути SIZE (визначає товщину лінії в пікселях) і/або WIDTH (визначає розмах лінії в процентах від ширини екрана).
Приклад 4. У редакторі Notepade створіть файл sample4.htm колекції горизонтальних ліній з таким вмістом:
<html>
<head>
<title>Приклад 4</title>
</head>
<body>
<H1>Колекція горизонтальних ліній</H1>
<HR SIZE=2 WIDTH=100%><BR>
<HR SIZE=4 WIDTH=50%><BR>
<HR SIZE=8 WIDTH=25%><BR>
<HR SIZE=16 WIDTH=12%><BR>
</body>
</html>
&–послідовності
Символи "<" і ">" сприймаються браузерами як початок і кінець HTML–тегів. Для того, щоб показати ці символи на екрані в HTML використовуються &–послідовності (символьні об'єкти або эскейп–послідовності). Браузер показує на екрані символ "<", коли зустрічається в тексті послідовність <. Знак ">" – кодується послідовність > (за першими буквами англійських слів greater than–більше, ніж).
Символ "&" (амперсанд) кодується послідовністю &
Послідовність лапки (") кодується послідовністю "
Крапка з комою – є обов'язковими елементами &– послідовності. Крім того, всі літери, що складають послідовність, повинні бути в нижньому регістрі (тобто маленькі). Використання тегів типу " або & не допускається.
&–послідовності визначені для всіх символів з другої половини ASCII–таблиці (куди входять і російські букви). Деякі сервери не підтримують восьми бітну передачу даних, і тому можуть передавати символи з ASCII–кодами вище 127 тільки у вигляді &–послідовностей.