Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
СТВОРЕННЯ ПРОСТОЇ WEB-СТОРІНКИ.rtf
Скачиваний:
12
Добавлен:
05.02.2016
Размер:
1.5 Mб
Скачать

Питання для самоконтролю

  1. Якою мовою створюється Web-сторінка i яким чином відображується?

  2. Що таке "гіперпосилання"? Який воно має вигляд i як ним користуватися?

  3. Що таке "тег"? Для чого теги використовуються?

  4. Яку структуру має HTML-документ?

  5. Як відобразити на екрані HTML-документ?

  6. Як мовою HTML встановити колір тексту?

  7. Яким тегом одночасно встановити колір тексту i фону?

  8. Як вирівняти текст по центру, по ширині, по лівому або правому краю?

  9. Якими засобами мови HTML виділити фрагменти тексту?

  10. Якими засобами мови 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-файл, двічі клацнувши на його піктограмі, а також встановлювати інші параметри розташування фотокартки, подивитися результат.