- •Створення простої web-сторінки
- •Вступ в мову html
- •Структура html-документа
- •Встановлення кольору тексту
- •Встановлення кольору фону
- •Параграф
- •Створення заголовка
- •Питання для самоконтролю
- •Графіка I посилання на web-сторінці Вставка малюнків
- •Посилання
- •Відступи
- •Комплексна лабораторна робота "створення html-файла"
- •Оформления таблиць
- •Вирівнювання вмicту комірок
- •Форматування комірок
- •Підсумкова лабораторна робота "власна web-сторінка"
- •Список літератури
Параграф
Параграфи вводяться тегом <р></р>. За допомогою параграфів можна вирівнювати текст:
по центру
<р align="center">текст</p>
по лівому краю
<р align="left">текст</p>
по правому краю
<р align="right">текст</p>
по ширині
<р align="justify">текст</p>
Якщо не встановлювати параграф, текст "з мовчазної згоди" вирівнюється по лівому краю.
Спробуйте до попереднього HTML-файла за допомогою редактора "Блокнот" додати нові елементи i зберегти з новим ім'ям priklad3.html:
<html>
<head>
<title>Mій перший крок</title>
</head>
<body text="#336699" bgcolor="#FFPFPF">
<center
Привіт, це моя перша сторінка.
<br>
<font color="#CCOOOO"> Ласкаво просимо! </font>
</center >
<р align="justify">
Шановний колего! Я вивчаю мову HTML, щоб створити власну домашню Web-сторінку для спілкування з друзями i знайомими.
Щоб вони могли подивитися мою фотокартку, прочитати про мене, написати кілька рядків в мою книгу для гостей.
</р>
</body>
</html>
Рекомендується за допомогою броузера переглянути цей HTML-файл, для чого досить двічі клацнути на його піктограмі. Можна встановлювати інші вирівнювання тексту i подивитися результат.
Створення заголовка
Щоб виділити текст, використовують теги заголовків Н1-Н6. Наприклад, так: <НЗ>3 Новим роком! </Н3>.
Заголовки призначені для виділення невеликої частини тексту (рядок, фраза). Щоб виділити великий фрагмент тексту або тільки одне слово, треба скористатися відомими тегом <font> </font> за зразком:
<font size="+4"> TEKCT </font>
<font size="+3"> ТЕКСТ </font>
<font size="+2"> ТЕКСТ </font>
<font size="+l"> ТЕКСТ </font>
<font size="+0"> ТЕКСТ </font>
<font size="-l"> текст </font>
<font size="-2"> текст </font>
Параметр size задає розмір шрифту, але, на відміну від заголовків, текст не виділяється жирним шрифтом i немає примусового перенесення. Написання тексту задається за допомогою тегів:
<b> Жирний текст </b>
<i> Текст курсивом </i>
<u> Підкреслений текст </ u >
Для фрагмента тексту можна застосовувати кілька meгів. Наприклад: <b> <i> Жирний курсив </i> </b>
Назва шрифту задається за допомогою тегів:
<font face="ARIAL"> шрифт Arial </font>
Тут за допомогою атрибута face задано шрифт Arial.
Спробуйте до попереднього HTML-файла за допомогою редактора "Блокнот" додати нові елементи i зберегти з новим ім'ям priklad4.html:
<html>
<head>
<title>Mій перший крок</title>
</head>
<body text="#336699" bgcolor="#FFFFFF">
<center>
<НЗ>Привіт, це моя перша сторінка.</НЗ>
<br>
<font color="#CCOOOO"> <H1> Ласкаво просимо! </H1> </font>
</center >
<p align="justify">
<font size="+2"> Шановний колего! </font> Я вивчаю мову
<font size="+l"> HTML, </font> щоб створити власну <i> домашню Web-сторінку </i> для спілкування з друзями i знайомими. Щоб вони могли <b> <i> подивитися мою фотокартку </i> </b>, прочитати про мене, написати кілька рядків в мою <u> книгу для гостей. </u>
</р>
</body>
</html>
Якщо за допомогою броузера переглянути цей HTML-файл, двічі клацнувши на його піктограмі, на екрані він буде мати наведений вигляд (Рисунок 2) (зверніть увагу на розміри i написання шрифтів текстів "Привіт, це моя перша сторінка", "Ласкаво просимо!" i "Шановний колего!...", а також інші фрагменти тексту).
Рисунок 2. Результат виконання файлу priklad4.html