Учебное пособие: Створення простої web-сторінки
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-файл, двічі клацнувши на його піктограмі, а також
встановлювати інші параметри розташування фотокартки, подивитися результат.
ПОСИЛАННЯ
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>
<body text="#CCOOOO"
bgcolor="#FFFFFF">
<img
src="photo.jpg" align="left" HSPACE=30 VSPACE=5
ALT="моя фотокартка" WIDTH=80 HEIGHT=80>
<p align="justify">
На фотокартці я.
Можемо стати друзями, якщо вам сподобалась мояособа.
<br>
<а href="mailto:Lab3@hirup.km.ua"> Lab3@hirup.km.ua - пишіть листи
</а>
</р>
</body>
</html>
У файл priklad5.html за допомогою
редактора "Блокнот" додайте нові елементи i збережіть з новим
ім'ям index.html:
<html>
<head>
<title> Мій перший крок
</title>
</head>
<body
text="#336699"bgcolor="#FFPFFF" link="#336699"
alink="#336699" vlink="#336699" > <center>
<H3>Привіт, це моя перша
сторшка</НЗ> <br>
<font color="cc0000">
<H1>Ласкаво просимо !</H1></font> </center>
<p align="justify">
<font size="+2">
Шановний колего! </font> Я вивчаю <font size="+l"> мову
HTML,</font> щоб створити власну <i>домашню Web-сторінку </i>
для спілкування з друзями 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>
<ul> <ul> два ввдступи
</ul></ul>
<ul> <ul><ul> три
ввдступи </ul></ul></ul>
Питания для самоконтролю:
1.
Як у
Web-сторінку вставити малюнок?
2.
Як
встановити обтікання мапюнка текстом?
3.
Як
встановити відстань між текстом i малюнком?
4.
Як
встановити горизонтальні i вертикальні розмфи малюнка?
5.
Як
створити посилання на інший документ?
6.
Як
записати посилання на поштову скриньку?
7.
Яке
ім'я повинен мати головний документ?
8.
Як
створити список і вибрати маркер для нього?
9.
Як
зробити один, два або три відступи?
КОМПЛЕКСНА ЛАБОРАТОРНА РОБОТА "СТВОРЕННЯ
HTML-ФАЙЛА"
Виконати такі дії:
1.
На
листку паперу або в зошиті написати текст HTML-файла для створення Web-сторінки
за наведеним взірцем (без списку).
Привіт, це моя
перша сторінка
Прізвище,
ім’я, група
Шановний
колего! Я
вивчаю мову HTML, щоб створити власну домашню
Web-сторінку для спілкування з друзями та
знайомими. Щоб вони могли подивитися мою фотокартку, прочитати про
мене, написати декілька рядків в мою книгу для гостей.
Ось
перші прізвища гостей в цій книзі:
o
Іваненко
Іван
o
Петренко
Петро
o
Сидоренко
Микола
|
Рисунок 3. Взірець HTML-сторінки
Страницы: 1, 2, 3, 4 |
