Лабораторна робота
Тема: Мова HTML. Теги форматування тексту.
Мета: Опанувати принципи побудови логічної структури HTML-документа і основні принципи форматування тексту.
Теоретичні відомості
Структурні теги документів HTML і форматування тексту
Створення HTML-документа відбувається розташуванням тегів мови HTML всередині звичайного не форматованого тексту.
Теги HTML - це послідовності символів, які починаються знаком «менше» (<) і закінчуються знаком «більше» (>). Теги можуть мати атрибути, які в свою чергу, можуть приймати певні значення.
Броузери WWW обов’язково дотримуються трьох правил при синтаксичному аналізі HTML:
Пробіли та інші «невидимі символи» ігноруються.
Теги форматування можуть біти написані великими або малими літерами.
Більшість тегів форматування пишуться парами.
Позначення HTML-документа
< HTML> … </ HTML> - включають в себе всі інші теги HTML і весь інформаційний зміст документа.
< HTML> розташовується в першому рядку документа;
</ HTML> - у останньому рядку.
Заголовок документа
<HEAD> … </HEAD> - містить інформацію про документ
Назва документа
<TITLE> … </TITLE> - назва документа, яка відображається в рядку заголовка Internet Explorer.
Тіло документа
<BODY> … </BODY> - тіло документа, містить весь текст з інформацією і всі теги HTML, які використовуються для форматування тексту.
ФОРМАТУВАННЯ ТЕКСТУ
Розмітка, яка створюється за допомогою мови HTML, дозволяє організовувати текст у логічні, легко зрозумілі розділи або застосовувати до нього специфічний формат. Теги форматування дозволяють визначити такі елементи:
початок абзацу і кінець рядка;
стилі заголовків;
фізичні стилі;
логічні стилі;
списки;
спеціальні символи.
Тег управління абзацом
Початок абзацу
<Р>…</Р> - позначає початок і кінець нового абзацу. Атрибути тега <Р>
ALIGN=LEFT|RIGHT|CENTER|JUSTIFY – вирівнює текст всередині абзацу.
Приклад запису тега абзацу з атрибутом:
<P ALIGN=JUSTIFY> - абзац вирівнюється по ширині.
Тег управління переходом на новий рядок
Тег <BR> - розпочинає новий рядок тексту в межах поточного абзацу.
Примусове переведення рядка використовується для того, щоб порушити стандартний порядок відображення тексту.
Теги змістового виділення тексту
<BLOCKQUOTE>…</BLOCKQUOTE> - дозволяє розміщувати текст на рівній відстані від меж екрана і створювати відступи праворуч і ліворуч.
При використанні <BLOCKQUOTE> декілька разів текст дедалі більше стискається до центра.
<CITE>…</CITE> - розмічає текст як цитату, як правило, курсивом.
Теги стильового виділення тексту
Фізичні стилі – це реальні атрибути шрифту, такі як курсив, або жирне виділення.
Тег Значення
<І> </І> курсив (ITALIC)
<В>...</В> жирний шрифт (BOLD)
<ТТ>... </ТТ> телетайп
<U>. ..</U> підкреслений
<S>...</S> перекреслений текст
< BIG >... </ BIG > збільшений шрифт
< SMALL >...</ SMALL > зменшений шрифт
< SUB >...</ SUB > підрядкові символи
< SUP>>…. </ SUP > надрядкові символи
ПРИКЛАД 1
Файл у форматі HTML:
<HTML>
<HEAD>
<TITLE> MOЯ перша HTML-CTОРІНКА</TITLE>
</HEAD>
<BODY>
<P ALIGN=CENTER>
УКРАЇНСЬКА МИНУВШИНА <BR>
Етнографічний довідник </Р>
</BODY>
</HTML>
ПРИКЛАД 2
Файл у форматі HTML:
<HTML>
<HEAD>
<ТІТLЕ>Моя перша НТМL-сторінка</ТІТLЕ>
</HEAD>
<BODY>
<Р ALIGN=CENTER>
<В>УКРАЇНСЬКА МИНУВШИНА </B><BR>
<І>Етнографічний довідник</І><ВК>
<U>До читача</U> </Р>
</BODY>
</HTML>
Контекстні підказки
Для пояснення змісту терміна при наведенні на нього мишкою використовується тег:
<ACRONYM title= «пояснювальний текст»> Термін </ACRONYM>.
ПРИКЛАД
<HTML> <ТІТLЕ>Моя перша НТМL-сторінка</ТІТLЕ>
<BODY>
<ACRONYM title=«Енциклопедія традиційної культури та побуту українців. Містить відомості про забуті способи ведення домашнього господарства, хатнє начиння, народну моду»>
<Р ALIGN=CENTER <B>УKPAЇHCЬKA МИНУВШИНА</В></Р>
</ACRONYM> </BODY> </HTML>
Коментарі і спеціальні символи
Для додавання коментарів у HTML-документи використовується контейнер <!— текст коментаря—>.
ПРИКЛАД
<!—Це перший варіант сторінки, створений 31/12/2000 —>.
Усі символи, розташовані між дужками, будуть ігноруватись броузером. Вставкою коментарів можна скористатись у процесі відпрацювання і перевірки створеного HTML-документа для ігнорування команд.
Якщо необхідно ввести символ, якого немає на клавіатурі, або символ, вже зарезервований в розмітці HTML-документа (наприклад, кутові дужки), необхідно ввести спеціальну послідовність символів. Для введення спеціальних символів у документ застосовується конструкція: &ІМ'Я СИМВОЛА. Після цієї послідовності ставиться знак «крапка з комою», щоб відділити закінчення символу і початок тексту.
Спеціальні символи використовуються для відображення елементів математичних символів (наприклад: ¾ це 3/4), рідкісних символів національних алфавітів і загальноприйнятих символів (&сору; - це ©, ® - це <§>)*.
ПРИКЛАД
<Р ALIGN=RIGHT>© Всі права застережені. Посилання обов'язкові.<Р>
Розмір шрифту
Основний розмір шрифту завжди дорівнює 3, якщо він не змінений тегом <BASEFONT=n>, де n=1-7.
Пара тегів <FONT>...</FONT> дозволяє задавати розмір, колір і гарнітуру тексту, що міститься між цими тегами.
Атрибути тегу <FONT>:
SIZE=n (n=1-7) Встановлює розмір шрифта – абсолютний, або відносний розмір шрифта. Відносний розмір – це розмір відносно SIZE=3 або розміру, заданого тегом <BASEFONT>. Для задання шрифту у відносних одиницях необхідно вказати, наскільки більшим (+) або меншим (-), ніж основний, має бути шрифт, що задається. Мінімальне абсолютне значення розміру шрифту 1, максимальне – 7. Наприклад: <FONT SIZE=10>
COLOR= Встановлює колір шрифту (RGB). <FONT COLOR=#00CED>
FACE= Гарнітура шрифту – задає ім’я (Arial, Times New Roman та ін.) шрифту (або перелік шрифтів) на комп’ютері користувача. У випадку відсутності шрифтів, текст відображається шрифтом, прийнятим за замовчуванням у броузері користувача. Гарнітуру шрифта можна переглянути у папці Шрифти (Панель управления у папці Мой компьютер або пункт головного меню Настройка).
Наприклад, <FONT FACE=”Arial”>Приклад шрифту Arial</Font>.
Приклад (для основного шрифту розміром 3)
<HTML> <HEAD> <TITLE>Моя перша HTML-сторінка</TITLE> </HEAD>
<BODY>
<H1 ALIGN=CENTER>Українська минувщина</H1><BR>
<H2 ALIGN=CENTER><FONT SIZE=2> Етнографічний довідник </FONT></H2><BR>
<P ALIGN=CENTER><B><FONT SIZE=4>Обрядова їжа </FONT> </B> </DT>
<DD> весняний обрядовий хліб до Великодня </DD>
</DL> </BODY> </HTML>
Хід роботи:
Створити HTML-документ, давши йому назву і визначивши його структуру.
Вирівняти абзац по правій межі екрана.
Представити інформацію у вигляді чотирьох рядків тексту, розміщених один під одним:
Сімейний та суспільний побут.
Сім'я і сімейна община.
Громада.
Громадські спільності.
Встановити такі фізичні стилі (у порядку слідування):
- жирний шрифт;
- підкреслений курсив:
- жирний курсив;
- підкреслений жирний курсив.
Вставити цитату до Web-сторінки, використовуючи теги
<СІТЕ>....</СІТЕ>. .
Текст для цитати:
СІМ'Я - засноване на шлюбі чи кровній спорідненості об'єднання людей, пов'язаних спільністю побуту та взаємною відповідальністю.
Створити документ, який містить один абзац. Застосовуючи до абзацу декілька разів тег <BLOCKQUOTE>...</BLOCKQUOTE>, дослідити, як його застосування вплине на відображенння введеного абзацу.
Представити інформацію у вигляді трьох рядків тексту, в кожному з яких розмір
