Простий документ 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>
Загальні відомості про документ розміщуються у тегах <META>. Наприклад:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
Windows –1251 — кодування для російської мови в операційній системі Windows.
Koi8-r — кодування для російської мови в операційній системі Unix.
Завдання 1. Створення найпростіших файлів HTML.
1. Запустити програму Блокнот (Notepad).
2. Наберіть у вікні редактора простий текст файла HTML:
<HTML>
<HEAD>
<TITLE> Навчальний файл HTML</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</HEAD>
<BODY>
Розклад занять на вівторок
</BODY>
</HTML>
3. Для перегляду створеної Web-сторінки загрузіть броузер Microsoft Internet Explorer.
Завдання 2. Деякі спеціальні команди форматування.
Існують спеціальні команди, що задають переміщення рядків униз <BR>, а також початок нового абзацу <P>.
Внесіть зміни у ваш попередній файл.
<HTML>
<HEAD>
<TITLE> Навчальний файл HTML</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</HEAD>
<BODY>
<P>Розклад</P>
<BR>занять<BR>
на вівторок
</BODY>
</HTML>
Завдання 3. Виділення фрагментів тексту.
1. Внесіть зміни у ваш попередній файл.
<HTML>
<HEAD>
<TITLE> Навчальний файл HTML</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</HEAD>
<BODY>
<B>Розклад</В><I>
занять</I> <U>
на вівторок</U>
</BODY>
</HTML>
Можна використовувати комбіновані виділення текстів, наприклад:
.............
<I><В> Розклад </В></I> <I> занять
</I> <U> на вівторок </U>
............
Але при цьому необхідно пам¢ятати таке правило запису комбінованих тегів:
<тег-1><тег-2>...</тег-2></тег-1> — правильний запис;
<тег-1><тег-2>...</тег-1></тег-2> — неправильний запис.
Завдання 4. Використання стилів заголовка.
Використовується шість тегів заголовків (від <H1> до <H6>). Кожному тегу відповідає конкретний стиль, заданий параметрами настроювання броузера.
<HTML>
<HEAD>
<TITLE> Навчальний файл HTML</TITLE>
</HEAD>
<BODY>
<P><H1>Розклад</Н1></P><BR>
<H2><I>занять</I><U>на вівторок</U></H2>
</BODY>
</HTML>
Завдання 5. Установлення розміру поточного шрифту.
Тег шрифту <FONT> дозволяє задати розмір поточного шрифту в окремих місцях тексту у діапазоні від 1 до 7.
<HTML>
<HEAD>
<TITLE> Навчальний файл HTML</TITLE>
</HEAD>
<BODY>
<FONT SIZE="7">Розклад</FONT>
занять на вівторок
</BODY>
</HTML>
Завдання 6. Встановлення гарнітури і кольору шрифту.
Тег <FONT> дає можливість управляти розміром, гарнітурою і кольором тексту. Зміна гарнітури виконується простим доповненням до тега <FONT>, атрибута FACE. Наприклад, для зображення тексту шрифтом Arial необхідно записати: <FONT FACE= ¢¢ARIAL¢¢>.
Для зміни кольору шрифту у тег <FONT> додають атрибут COLOR=¢¢X¢¢. Замість X потрібно підставити або назву кольору (у лапках), або його шістнадцятирічне значення (формат RGB). Приклади запису кольору у форматі RGB наводимо у таблиці 1.
Таблиця 1
| Колір | RBG | Колір | RBG |
| Black чорний | Purple бордовий | FFOOFF | |
| While білий | FFFFFF | Yellow жовтий | FFFFOO |
| Red червоний | FFOOOO | Brown коричневий | |
| Green зелений | OOFFOO | Orange оранжевий | FF8000 |
| Azure бірюзовий | OOFFFF | Violet фіолетовий | 8000FF |
| Blue синій | OOOOFF | Gray сірий | АОАОАО |
1. Внесіть зміни у ваш попередній файл.
<HTML>
<HEAD>
<TITLE> Навчальний файл HTML </TITLE>
</HEAD>
<BODY>
<U><I><B><FONT COLOR="#FFOOOO" FACE="ARIAL"
SIZE="7">
Розклад </FONT></B></I></U>
занять на вівторок
</BODY>
</HTML>
2. Самостійно змінити розмір, колір, гарнітуру, стиль тексту.
Завдання 7. Вирівнювання тексту по горизонталі.
Вирівнювання тексту виконується за допомогою атрибута ALIGN у тезі <P>.
Внесіть зміни у ваш файл.
<HTML>
<HEAD>
<TITLE> Навчальний файл HTML</TITLE>
</HEAD>
<BODY>
<P ALIGN="CENTER">
<FONT COLOR="#008080" SIZE="7">
<B> Розклад </B></FONT><BR>
<FONT SIZE="6"><I>занять на вівторок </I>
</FONT>
</Р>
</BODY>
</HTML>
Завдання 8. Встановлення кольору фону і тексту.
При зображенні фону і тексту броузери використовують кольори, встановлені за замовчуванням, — вони задані параметрами налаштування броузера. Якщо ви хочете задати інші кольори, то це потрібно зробити на початку файла HTML у тезі <BODY>. Атрибут BGCOLOR визначає колір фону сторінки, TEXT — колір тексту для всієї сторінки, LINK та VLINK визначає колір відповідно невідвіданих і відвіданих гіперпосилань (останні два параметри розглянемо пізніше).
<HTML>
<HEAD>
<TITLE> Навчальний файл HTML</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFCC" TEXT="#330066">
<P ALIGN="CENTER">
<FONT COLOR="#008080" SIZE="7">
<B> Розклад </B></FONT><BR>
<FONT SIZE="10"><I>занять на вівторок </I>
</FONT>
</P>
</BODY>
</HTML>
Дата добавления: 2015-06-05; просмотров: 499;