Простий документ 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=UTF-8" >

• 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=UTF-8" >

< /HEAD>

< BODY>

Розклад занять на вівторок

< /BODY>

< /HTML>

3. Для перегляду створеної Web-сторінки загрузіть броузер Microsoft Internet Explorer.

Завдання 2. Деякі спеціальні команди форматування.

Існують спеціальні команди, що задають переміщення рядків униз < BR>, а також початок нового абзацу < P>.

1. Внесіть зміни у ваш попередній файл.

< HTML>

< HEAD>

< TITLE> Навчальний файл HTML< /TITLE>

< meta http-equiv=" Content-Type" content=" text/html; charset=UTF-8" >

< /HEAD>

< BODY>

< P> Розклад < /P>

< BR> занять < BR>

на вівторок

< /BODY>

< /HTML>

Завдання 3. Виділення фрагментів тексту.

1. Внесіть зміни у ваш попередній файл.

< HTML>

< HEAD>

< TITLE> Навчальний файл HTML< /TITLE>

< meta http-equiv=" Content-Type" content=" text/html; charset=UTF-8" >

< /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

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>