Учебное пособие: Створення простої web-сторінки
Щоб задати колір для всього документа,
треба дати відповідну команду в <body>. Наприклад, так:
<body text="#336699">
Teг <font></font> -
багатофункціональний. За його допомогою можна задавати не тільки колір тексту в
конкретній частині документа, але й розмір i вид шрифту (про це далі).
ВСТАНОВЛЕННЯ КОЛЬОРУ
ФОНУ
Колір фону встановлюється за
допомогою знайомого тега <body>. Наприклад, чорний фон встановиться
командою:
<body
bgcolor="#000000">
Якщо колір в <body> не
вказувати, то з мовчазної згоди він буде білим (або будь-яким іншим). Тому
краще колір фону встановлювати, щоб не було не передбачуваного кольору фону.
Спробуйте до попереднього HTML-файла
за допомогою редактора "Блокнот" додати нові елементи i зберегти з
новим ім'ям priklad2.html:
<html>
<head>
<ы1е>Мій перший
крок</title>
</head>
<body
text="#336699" bgcolor="#FFFFFF">
Привіт, це моя перша сторінка.
<br>
<font
со1ог="#ССОООО"> Ласкаво просимо! </font>
</body>
</html>
Зверніть увагу: в тезі <body>
одночасно встановлюється колір тексту документа i колір фону.
Це означає, що весь текст сторінки
буде сірим, крім тексту, для якого спеціально встановлёно інший колір. Якщо
колір тексту в <body> не задавати, то "з мовчазної згоди" він
буде чорним.
Рекомендується за допомогою броузера
переглянути цей HTML-файл, для чого досить двічі клацнути на його піктограмі,
можна встановлювати інші кольори для тексту i фону, спостерігати результат.
Якщо змін не видно, то це означає, що
зміни внесені неправильно, або ви забули зберегти документ.
Можна переглянути за
допомогою броузера HTML-файл, двічі клацнувши на його піктограмі
ПАРАГРАФ
Параграфи вводяться тегом
<р></р>. За допомогою параграфів можна вирівнювати текст:
по центру
<р
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
Питання
для самоконтролю
1.
Якою
мовою створюється Web-сторінка i яким чином відображується?
2.
Що
таке "гіперпосилання"? Який воно має вигляд i як ним користуватися?
3.
Що
таке "тег"? Для чого теги використовуються?
4.
Яку
структуру має HTML-документ?
5.
Як
відобразити на екрані HTML-документ?
6.
Як
мовою HTML встановити колір тексту?
7.
Яким
тегом одночасно встановити колір тексту i фону?
8.
Як
вирівняти текст по центру, по ширині, по лівому або правому краю?
9.
Якими
засобами мови HTML виділити фрагменти тексту?
10.
Якими
засобами мови HTML задати написання тексту або (i) вид шрифту?
Вставка
малюнків
Щоб вставити малюнок, треба
скористатися тегом:
<img src="my.jpg">,
де my.jpg -ім'я файла, що містить
малюнок. Замість my.jpg можна вставити ім'я будь-якого іншого малюнка (з
розширенням jpg, gif, png, bmp). Головне, щоб між лапками стояв шлях та ім’я
файла малюнка (у наведеному прикладі малюнок знаходиться в одній папці з файлом
HTML-документа).
Якщо малюнок знаходиться в
іншій папці, то його краще переписати в папку, де знаходиться HTML-документ.
Для "співіснування" малюнка
(наприклад, pr1.png) i тексту документа використовують теги:
малюнок з лівого
краю, текст його обтікає справа:
<img src="prl.png"
align="left">
малюнок з правого
краю, текст його обтікає зліва:
<img src="prl.png"
align="right">
Kpiм параметрів align, існують ще
кілька параметрів:
відстань між
текстом i мапюнком по вертикалі (тут 10 пікселів):
<img src="prl.png"
Vspace="10">
відстань між
текстом i малюнком по горизонталі (30 пікселів):
<img src="prl.png"
Hspace="30">
опис малюнка
(якщо встановити курсор миші на малюнок, через секунду з'явиться вказаний текст
- тут "моя фотокартка"):
<img src="prl.png" alt="моя фотокартка">
ширина малюнка (тут 100
пікселів):
<img src= "pri.png"
width="100">
висота малюнка (тут 200
пікселів):
<img src="prl.png"
height="200">
рамка навколо малюнка (тут
товщина лінії 5 пікселів):
<img src="prl.png"
border="5">
Страницы: 1, 2, 3, 4 |
