Створення простої web-сторінки (стр. 2 из 3)

Щоб виділити текст, використовують теги заголовків Н1-Н6. Наприклад, так: <НЗ>3 Новим роком! </Н3>.

Заголовки призначені для виділення невеликої частини тексту (рядок, фраза). Щоб виділити великий фрагмент тексту або тільки одне слово, треба скористатися відомими тегом за зразком:

TEKCT

<font size="+3"> ТЕКСТ

ТЕКСТ

ТЕКСТ

ТЕКСТ

текст

текст

Параметр size задає розмір шрифту, але, на відміну від заголовків, текст не виділяється жирним шрифтом i немає примусового перенесення. Написання тексту задається за допомогою тегів:

Жирний текст

Текст курсивом

Підкреслений текст

Для фрагмента тексту можна застосовувати кілька meгів. Наприклад:  <i> Жирний курсив 

Назва шрифту задається за допомогою тегів:

шрифт Arial

Тут за допомогою атрибута face задано шрифт Arial.

Спробуйте до попереднього HTML-файла за допомогою редактора "Блокнот" додати нові елементи i зберегти з новим ім'ям priklad4.html:

<html>

<head>

<title>Mій перший крок</title>

</head>

<НЗ>Привіт, це моя перша сторінка.</НЗ>

<H1> Ласкаво просимо! </H1>

</center >

 Шановний колего!  Я вивчаю мову

<font size="+l"> HTML,  щоб створити власну  домашню Web-сторінку для спілкування з друзями i знайомими. Щоб вони могли   подивитися мою фотокартку , прочитати про мене, написати кілька рядків в мою книгу для гостей.

</р>

</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) вид шрифту?

ГРАФІКА I ПОСИЛАННЯ НА WEB-СТОРІНЦІ

Вставка малюнків

Щоб вставити малюнок, треба скористатися тегом:

<img src="my.jpg">,

де my.jpg -ім'я файла, що містить малюнок. Замість my.jpg можна вставити ім'я будь-якого іншого малюнка (з розширенням jpg, gif, png, bmp). Головне, щоб між лапками стояв шлях та ім’я файла малюнка (у наведеному прикладі малюнок знаходиться в одній папці з файлом HTML-документа).

Якщо малюнок знаходиться в іншій папці, то його краще переписати в папку, де знаходиться HTML-документ.

Для "співіснування" малюнка (наприклад, pr1.png) i тексту документа використовують теги:

малюнок з лівого краю, текст його обтікає справа:

малюнок з правого краю, текст його обтікає зліва:

Kpiм параметрів align, існують ще кілька параметрів:

відстань між текстом i мапюнком по вертикалі (тут 10 пікселів):

відстань між текстом i малюнком по горизонталі (30 пікселів):

опис малюнка (якщо встановити курсор миші на малюнок, через секунду з'явиться вказаний текст - тут "моя фотокартка"):

ширина малюнка (тут 100 пікселів):

висота малюнка (тут 200 пікселів):

рамка навколо малюнка (тут товщина лінії 5 пікселів):

Bci параметри можуть застосовуватися одночасно один з одним, щоб запобігти плутанини в їx застосуванні. Наприклад, так:

Малюнок буде притиснутий до лівого краю екрана, текст буде його обтікати справа, ввдстань до тексту по горизонталі - 30 пікселів, по вертикалі - 5 пікселів, при встановленні курсору миші на малюнку з'явиться напис "моя фотокартка".

Спробуйте в папку з HTML-файлом переписати довільний малюнок (наприклад, з ім'ям photo.jpg). В HTML-файл за допомогою редактора "Блокнот" додати нові елементи i зберегти з новим ім'ям priklad5.html:

<html>

<head>

<title> Мій перший крок </title>

</head>

<H3>Привіт, це моя перша сторінка.</H3>

<H1> Ласкаво просимо! </H1>

</center >

<img src="photo.jpg " align="left" HSPACE=30 VSPACE=5

alt="моя фотокартка" WIDTH=80 HEIGHT=80>

Шановний колего ! Я вивчаю

мову HTML, щоб створити власну домашню Web-сторінку для спілкування з друзями i знайомими. Щоб вони могли подивитися мою фотокартку, прочитати про мене, написати

кілька рядків в мою книгу для гостей.

</р>

</body>

</html

Рекомендуеться за допомогою-броузера переглянути цей HTML-файл, двічі клацнувши на його піктограмі, а також встановлювати інші параметри розташування фотокартки, подивитися результат.

ПОСИЛАННЯ

Web-сторінка може складатися із кількох документів. Один з них головний з ім'ям index.html або main.html - він відкривається першим i повинен обов'язково лежати на вашему сайті в Internet.

Інші документи можна називати як завгодно (наприклад, photos.html, about_me.html, my_pets.html, friends.html, gh516hgd.htmi). Kpaщe, шоб вони знаходились в одній nanui з HTML-документом.

Посиланням на інші документи як частини нашої Web-сторінки може бути текст або малюнок.

Нехай в тай же папці з головним документом index.html створено новий текстовий документ (наприклад, з ім'ям prf.html). Вміст документа може бути довільним i мати вашу фотокартку. Для цього випадку в основному документі фразу "подивитися мою фотокартку" можна зробити посиланням. Тег посилання на цей документ буде виглядати так:

<а href="prf.html"> подивитися мою фотокартку </а>

Щоб встановити колір посилання, треба доповнити вже ввдомий тег <body> новими параметрами:

<body text="#336699" bgcolor="#FFFFFF"

link="#339999" alink="#339999" vlink="#339999">

(link - колір посилання, alink - колір активного посилання, vlink -колір посилання, яке відвідували).

Тут кольори всі однакові, але вони можуть бути і різними.

Посилачия на поштову скриньку записусгься за зразком:

<а href=mailto:lab3@hirup.km.ua> Lab3@hirup.km.ua - пишітъ листи </а>

Спробуйте в папці з головним документом створити додатковий HTML-файл з ім'ям prf.html i з довільним текстом. Наприклад, таким:

<html>

<head>

<title> друга сторінка </title>

</head>

На фотокартці я. Можемо стати друзями, якщо вам сподобалась мояособа.

<а href="mailto:Lab3@hirup.km.ua"> Lab3@hirup.km.ua - пишіть листи

</а>

</р>

</body>

</html>

У файл priklad5.html за допомогою редактора "Блокнот" додайте нові елементи i збережіть з новим ім'ям index.html:

<html>

<head>

<title> Мій перший крок </title>

</head>

<H3>Привіт, це моя перша сторшка</НЗ>

<H1>Ласкаво просимо !</H1> </center>

Шановний колего! Я вивчаю мову HTML, щоб створити власну домашню Web-сторінку для спілкування з друзями i знайомими. Щоб вони могли <а href="prf.html"> подивитися мою фотокартку </а>, прочитати про мене, написати кілька рядків в мою книгу для гостей. </р>

</body>

</html>

Можна за допомогою броузера переглянути файл основного документа index.html, двічі клацнувши на його піктограмі.

Щоб перейти на додаткову Web-сторінку, досить встановити курсор на посилання "подивитися мою фотокартку" i клацнути.

Щоб повернутся на сторінку основного документа, треба на панелі інструментів броузера натиснути кнопку "Назад".

СПИСКИ

Списки маркуються за допомогою тега <li> </li> за взірцем:

Маркер	Опис
·	<li type="disk"> Задуйвітер </li>
o	<li type="circle"> Макогоненко </li>
-	<li type="square"> Петренко </li>

ВІДСТУПИ

Для встановлення одного, двох i трьох відступів використовується тег <ul> </ul> за зразком:

<ul> один ввдступ </ul>