- •Лабораторна робота № 5. Частина 1.
- •Основні теги мови html.
- •Теги для розміщення тексту (вони одинарні):
- •Теги форматування символів тексту (вони парні):
- •Заголовки і теги вирівнювання.
- •Приклад 2.
- •Завдання.
- •Хід роботи
- •Відкрийте редактор Блокнот (Notepad).
- •Частина 2.
- •Приклад 1.
- •2. Створення списків.
- •3. Створення таблиць.
- •Приклад 2.
- •4. Вирівнювання елементів.
- •Завдання
- •Хід роботи
Заголовки і теги вирівнювання.
Заголовок – окремий тип абзацу. Є шість видів заголовків, які відрізняються розмірами символів:
Теги |
Результат на екрані |
<Н1>Заголовок 1</Н1> |
Заголовок 1 |
<Н2>Заголовок 2</Н2> |
Заголовок 2 |
<НЗ>Заголовок 3</НЗ> |
Заголовок 3 |
<Н4>Заголовок 4</Н4> |
Заголовок 4 |
<Н5>Заголовок 5</Н5> |
Заголовок 5 |
<Н6>Заголовок 6</Н6> |
Заголовок 6 |
Теги вирівнювання:
<CENTER> елемент </CENTER> |
Вирівнювання до центру |
<LEFT> елемент </LEFT>
|
Вирівнювання до лівого краю
|
<RIGHT> елемент </RIGHT>
|
Вирівнювання до правого краю
|
Зауваження. Теги заголовків не варто використовувати для створення звичайних абзаців з різними розмірами шрифту.
Приклад 2.
Розгляньте зразок форматування тексту для web-сторінки з розповіддю деякої особи про себе.
<HTML> <!--Це файл file2.htm -->
<HEAD>
<TITLE> Форматування тексту </TITLE>
</HEAD>
<BODY BGCOLOR ="yellow" TEXT = "navy"> <!—задає колір тла та тексту -->
<CENTER> <H1 >Привіт!</Н1 > <H2> Мене звуть Світлана. </Н2> </CENTER>
<HR> <!—у рядку буде проведена горизонтальна риска -->
<H3> Мені 18 років </H3>
<H4> Я хочу стати фармацевтом </H4>
<HR>
Це моя
<B> друга </B>
спроба створити web-сторінку. Я вже вмію користуватися заголовками, вставляти лінії, форматувати текстові абзаци. Пізніше я навчуся вставляти
<I> фотографії, картинки, звук, відео-зображення </I>
шляхом посилання на відповідні
<U> графічні, звукові чи відео-файли. </U>
<P> Я збережу цей файл на диску і відкрию його у браузері. </P>
Цю web-сторінку я буду удосконалювати, її ще рано розміщувати на сервері.
<HR>
</BODY>
</HTML>
Завдання.
Мета. Створити web-сторінку з розповіддю про себе за зразками прикладів 1 і 2 наведених вище.
Хід роботи
Відкрийте редактор Блокнот (Notepad).
Створіть за допомогою текстового редактора html-файл з розповіддю про себе. Зробіть це так, як у прикладі 1, тобто без форматування тексту, і збережіть його командою Save as... з назвою filel.htm у власній папці. Тег <BODY> у файлі запишіть так: <BODY TEXT = "red">.
Відкрийте файл filel.htm у браузері. Для цього відкрийте свою робочу папку і двічі клацніть мишею на назві файлу.
Проекспериментуйте з різними значеннями кольорів (green, white, yellow, blue, #ffaa55 тощо) параметрів BGCOLOR і TEXT. He забувайте кожного разу після внесення змін виконувати команду Save as... у програмі Блокнот (Notepad), а для перегляду файлу у браузері двічі клацати на назві файлу filel.htm.
Виконайте форматування тексту у файлі filel.htm подібно до прикладу 2 і збережіть файл із назвою file2.htm.
Усі заголовки створіть у браузері зеленим кольором.
Перегляньте цей файл за допомогою браузера і проекспериментуйте з тегами форматування тексту.
Проекспериментуйте з розмірами вікна, в якому демонструється документ. Переконайтеся, що браузер автоматично змінює розташування тексту, щоб його можна було переглядати без горизонтальної смуги прокручування (текстові редактори цього не роблять).