- •Українська будівельна корпорація «укрбуд»
- •Вступ в мову html
- •Структура html-документа
- •Встановлення кольору тексту
- •Встановлення кольору фону
- •Параграф
- •Створення заголовка
- •Питання для самоконтролю
- •Графіка I посилання на web-сторінці Вставка малюнків
- •Посилання
- •Відступи
- •Комплексна лабораторна робота "створення html-файла"
- •Оформления таблиць
- •Вирівнювання вмicту комірок
- •Форматування комірок
- •Підсумкова лабораторна робота "власна web-сторінка"
- •Список літератури
Питання для самоконтролю
Якою мовою створюється Web-сторінка i яким чином відображується?
Що таке "гіперпосилання"? Який воно має вигляд i як ним користуватися?
Що таке "тег"? Для чого теги використовуються?
Яку структуру має HTML-документ?
Як відобразити на екрані HTML-документ?
Як мовою HTML встановити колір тексту?
Яким тегом одночасно встановити колір тексту i фону?
Як вирівняти текст по центру, по ширині, по лівому або правому краю?
Якими засобами мови HTML виділити фрагменти тексту?
Якими засобами мови HTML задати написання тексту або (i) вид шрифту?
Графіка I посилання на web-сторінці Вставка малюнків
Щоб вставити малюнок, треба скористатися тегом:
<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">
Bci параметри можуть застосовуватися одночасно один з одним, щоб запобігти плутанини в їx застосуванні. Наприклад, так:
<img src="prl.png" aling="left" Hspace=30 Vspace=5 alt="моя фотокартка">
Малюнок буде притиснутий до лівого краю екрана, текст буде його обтікати справа, ввдстань до тексту по горизонталі - 30 пікселів, по вертикалі - 5 пікселів, при встановленні курсору миші на малюнку з'явиться напис "моя фотокартка".
Спробуйте в папку з HTML-файлом переписати довільний малюнок (наприклад, з ім'ям photo.jpg). В HTML-файл за допомогою редактора "Блокнот" додати нові елементи i зберегти з новим ім'ям priklad5.html:
<html>
<head>
<title> Мій перший крок </title>
</head>
<body text="#336699" bgcolor="#000000">
<center>
<H3>Привіт, це моя перша сторінка.</H3>
<br>
<font color="#CCOOOO"> <H1> Ласкаво просимо! </H1> </font>
</center >
<img src="photo.jpg " align="left" HSPACE=30 VSPACE=5
alt="моя фотокартка" WIDTH=80 HEIGHT=80>
<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-файл, двічі клацнувши на його піктограмі, а також встановлювати інші параметри розташування фотокартки, подивитися результат.