Лабораторна робота №1
Тема:Структурні теги HTML документів та форматування тексту
Мета: Опанувати принципи побудови логічної структури HTML-документа і основні принципи форматування тексту.
Теоретичні відомості.
Створення HTML-документа відбувається розташуванням тегів (tags) мови HTML всередині звичайного неформатованого тексту. Теги HTML — це послідовності символів, які починаються знаком «менше» (<) і закінчуються знаком «більше» (>). Теги можуть мати атрибути, які, в свою чергу, можуть приймати певні значення. Броузери WWW обов'язково дотримуються трьох правил при синтаксичному аналізі HTML:
Пробіли та інші «невидимі символи» ігноруються.
Теги форматування можуть бути написані великими або малими літерами.
3. Більшість тегів форматування пишуться парами.
Технологія створення HTML-документа
HTML-документ можна створювати за допомогою найпростішого текстового процесора, який дозволяє зберігати текстові (ASCII) файли, наприклад Windows Notepad (Блокнот). При цьому не застосовуються ніякі коди для форматування.
Порядок створення Web-документа:
У головному меню WINDOWS вибрати пункт Пуск-Программы -Стандартные -Блокнот.
Ввести структуру документа
3. Зберегти створений документ, обов'язково надавши йому розширення *.htm
4. Перевірити вигляд створеної гіпертекстової сторінки. Для перевірки одержаної сторінки завантажити Internet Explorer, відкрити меню File, вибрати команду Open file, завантажити створений файл.
5 Для внесення змін повернутись до програми Блокнот, внести зміни, зберегти файл.
6. Активізувати Internet Explorer, натиснути кнопку Обновить.
Структурні теги HTML-документа визначають початок і закінчення різних частин документа. Хоча багато броузерів правильно інтерпретують документ і без них, правила вимагають, щоб структурні теги були включені до документа. На початковому етапі вивчення мови HTML ці теги обов'язково повинні включатись до кожного із створюваних документів,
Позначення HTML-документа
<HTML>... < /HTML> - включають в себе всі інші теги HTML і весь інформаційний зміст документа.
<HTML> розташовується у першому рядку документа;
< /HTML> - у останньому рядку.
Заголовок документа
<HEAD>... </HEAD> - містить інформацію про документ.
Назва документа
<TITLE>... </TITLE> - назва документа, яка відображається в рядку заголовка internet Explorer.
Тіло документа
<BODY>,..</BODY> - тіло документа містить весь текст з інформацією і всі теги HTML, які використовуються для форматування тексту.
ПРИКЛАД (базова структура HTML-документа) Файл у форматі HTML:
<HTML>
<HEAD>
<ТITLЕ> Моя перша HTML-cтopiнкa </TITLE>
</HEAD>
<BODY>
</BODY> </HTML> "
Microsoft Internet Explorer і Netscape Navigator допускають застосування атрибутів LEFTMARGIN=«n» і «TOPMARGIN=«n» у тегу <BODY> Атрибут LEFTMARGIN = задає ліве поле для всієї сторінки. TOPMARGIN= визначає верхнє поле. Число п вказує на ширину поля у пікселях. Наприклад, тег <BODY LEFTMARGIN= «40»> створює на всій сторінці ліве поле шириною 40 пікселів. При n=0 ліве поле відсутнє.
ФОРМАТУВАННЯ ТЕКСТУ
Розмітка, яка створюється за допомогою мови HTML, дозволяє організовувати текст у логічні, легко зрозумілі розділи або застосовувати до нього специфічний формат. Теги форматування дозволяють визначити такі елементи:
початок абзацу і кінець рядка;
стилі заголовків;
фізичні стилі;
логічні етилі;
списки;
спеціальні символи.
Тег управління абзацом
Початок абзацу
<Р>...</Р> - позначає початок і кінець нового абзацу.
Атрибути тега <Р>
ALIGN=LEFT|RIGHT|CENTER|JUSTIFY - вирівнює текст всередині абзацу.
ПРИКЛАД запису тега абзацу з атрибутом:
<Р ALIGN= JUST1FY> - абзац вирівнюється по ширині.
Тег управління переходом на новий рядок
Тег <BR> розпочинає новий рядок тексту в межах поточного абзацу.
Примусове переведення рядка використовується для того, щоб порушити стандартний порядок відображення тексту.
Теги змістового виділення тексту
<BLOCKQUOTE>... </BLOCKQUOTE> - дозволяє розміщувати текст на рівній відстані від меж екрана і створювати відступи ліворуч і праворуч,
Тег додає поля ліворуч і праворуч від тексту і дозволяє розташувати текст компактно у центрі сторінки. При використанні <BLOCKQUOTE > декілька разів текст дедалі більше стискається до центра.
<СІТЕ>....</СІТЕ> - розмічає текст як цитату, як правило, курсивом..
Теги стильового виділення тексту
Фізичні стилі - це реальні атрибути шрифту, такі, як курсив або жирне виділення.
Тег
<I>...</I>
<BIG >... </BIG>
<SMALL >...</ SMALL >
<SUB >...</ SUB >
<SUP >...</ SUP >
Значення
курсив (ITALIC)
жирний шрифт (BOLD)
Телетайп Підкреслений
Перекреслений текст
Збільшений шрифт
Зменшений шрифт
Підрядкові символи надрядкові символи
ПРИКЛАДІ
Файл у форматі HTML:
<HTML>
<HEAD>
<TITLE>Moя перша HTML- сторінка <TITLE>
</HEAD>
<BODY>
<P ALIGN=CENTER>
УКРАЇНСЬКА МИНУВШИНА <BR>
Етнофафічний довідник </Р>
</BODY>
</HTML>