- •6.100202 «Процеси машини і обладнання
- •Всесвітня мережа internet
- •Дулепа в.І.
- •Компютерні мережі
- •Питання для самоконтролю:
- •Електронна пошта
- •3 Групи новин (телеконференцій)
- •Лабораторна робота № 30 Вправа № 1 Створення Web-сторінки
- •Мова html
- •Структура html- документа
- •Встановлення кольору фону
- •Параграф
- •Створення заголовків
- •Привіт, це моя перша сторінка ласкаво просимо!
- •Вправа № 2. Графіка і посиланя на Web-сторінці
- •Вправа №3
- •Індивідульне завдання.
- •Список літератури
Вправа № 2. Графіка і посиланя на Web-сторінці
Встановленя малюнків
Щоб вставити малюнок потрібно скористатися тегом:
<img src=my.jgp>, де my.jgp - імя файла що містить малюнок.
Замисть my.jgp можна вставити імя будь якого іншого малюнка (з рошширенням jpg, gif, png, bmp). Головне щоб між лапками стояв шлях та імя файла малюнка (у наведеному прикладі малюнок знаходиться в одній папці з файлом HTML-документа).
Якщо малюнок знаходиться в іншій папці, то його краще переписати в папку, де знаходиться HTML - документ.
Для «співіснуваня» малюнка і тексту документа використовують теги:
Малюнок злівого краю текст його обтікае справа
<img src=pr1.png align=>
Малюнок з правого краю текст його обтікае з ліва
<img src pr1.align==right>
Крім параметрів align існують ще декілька параметрів:
Відстань між текстом і малюнком по вертикалі
<imgsrc=pr1.png Vspake=10
Відстань між текстом і малюнком по горизонталі
<img src=pr1.png Hspace=30>
Секунду і з’явиться вказаний текст – тут моя фотокартка
<img src=pr1.png alt=моя фотокартка>ширина малюнка (тут 100 пікселів)
<img src=pr1.png width=100>
Висота малюнка (тут 200 пікселів)
<img src=pr1.png height
Рамка навколо малюнка(тут товщина лінії5 пікселів)
<img src=pr1 border=5>
Всі параметри можуть застосовуватись один з одним,щоб запобігти плутанини в їх застосувані. Наприклад так:
<img src =pr1.png align=left Hspace=30 Vspace=5 alt=моя фотографія>
Малюнок буде притиснутий до лівого краю екрана.
Спробуйте в папку з HTML - файлом переписати довільний малюнок (наприклад з ім’я photo.jpg). В HTML - файл за допомогою редактора «Блокнот» додати нові елементи і зберегти з новим ім’ям prickled.html:
<html>
<head>
<title>
<head>
<bodi text=#336699 bgcolor=#000000>
<center>
<H3>привіт це, моя перша сторінка.<H3>
<br>
<font color=#CC0000><h1. Ласкаво просимо!<H1><font>
<center>
<img src=photo.jpg align=left HSPACE=30 VSPACE=5 ALT=моя фотокартка WIDTH=80 HEIghT=80>
<p align=yustify>
<font size=+2> Шановний колего! <font> Я вивчаю <font size=+1> мову HTML, <font> щоб створити власну <i> домашню Web сторінку <i> для спілкування з друзями і знайомими. Щоб вони могли <b> <i> прочитати про мене,написати кілька рядків в мою<u.готову книгу <u>
<p>
<body>
<html>
Рекомендується за допомогою браузера переглянути цей HTML-файл, двічі клацнувши на його піктограмі, встановлювати інші параметри розсташуваня фотокартки,подивитися результат.
Посиланя
Web-сторінка складаеться із кількох документів. Один з них головний з імям index.html – він відкриваеться першим і повинен обовязково лежати на вашому сайті в інтернет.
Інші документи можна називати як завгодно. Краще щоб вони знаходились в одній папці з HTML – документом.
Посиланя на інші документи як частини нашої Web-сторінки може бути текст або малюнок.
Нехай втіже папці з головним документом index.html створено новий текстовий документ. Зміст документа може бути довільним і мати вашу фотокартку. Для цього випадку в основному документі фразу «подивитися мою фотокартку» можна зробити посиланням. Тег посиланя на цей документ може виглядати так:
<a href= “prf.html”> подивитися мою фотокартку <a>
Щоб встановити колір посилання, треба доповнити вже відомий тег <bodi> новми параметрами:
<bodi text=#336699 bg color=#FFFFFF
link=339999 alink=#339999 vlink=#339999>
(link – колір посилання, alink – колір активного посилання, vlink – колір посилання, яке відвідували).
Тут кольори всі однакові, але й вони можуть бути різними.
Посиланя на поштову скриньку записується за зразком: a freh=mailto aspect @ km.sh.ua. пишіть листи </a>
Спробуйте в папці з головним документом створити додатковий html-файл з ім’ям prf.html і довільним текстом. Наприклад таким:
<html.
<head>
<title>друга сторінка<title>
<head>
<bodi text= “#CC0000”bgcolor=”#FFFFFF”>
<img src=photo.jpg align=left HSPACE=30 VSPACE=5 ALT= ”моя фотокартка” WIDTH=80 height=80>
<p align=”jystify”>
На фотокартці я. Можемо стати друзями, якщо вам сподобалась моя особа.
<br>
<a href=mailto:aspekt@km.sh.ua> - напишіть листи
</a>
</p>
</bodi>
</html>
У файл priclad5.html за допомогою редактора «Блокнот» додати нові елементи і зберегти з новим ім’ям index.html:
<html>
<head>
<title>
</head>
<bodi text=”#336699” bgcolor=”#FFFFFF” link=”#336699”
aling=”#3336699” vlink=”#336699”>
<center>
<H3>Привіт це перша сторінка </H3>
<br>
<font color=”cc0000”> <H1> Ласкаво просимо! </H1><font>
</center>
<p align=”jysttify”>
<font size=”+2”> Шановний колего! <font> Я вивчаю <font size=”+1”> мовуHTML,<font> щоб створити власну <i> домашню web-сторінку </i> для спілкуваня з друзями і знайомими, щоб вони могли <a href=”prf.html”> подивитися мою фотокартку </a> прочитати про мене, написати кілька рядків в мою гостьову книгу.
</p>
</body>
</html>
Можна за допомогою браузера переглянути файл основного документа index.html, двічі клацнувши його на піктограмі.
Щоб перейти на додаткову Web-сторінку, досить встановити курсорна посиланя «подивитися мою фотокартку» і клацнути.
Щоб повернутися на сторінку основного документа, треба на панелі інструментів браузера натиснути кнопку «Назад».
Списки
Списки маркіруються за допомогою тега <li><li> за взірцем:
● <litupe=disk> Задуйвітер </li>
○ <li tupe=cirkle> Макогоненко </li>
■ <li tupe=scuare> Петренко </li>
Відступи
Для встановленя одного з, двох трьох відступів використовується ter<ul></ul> за зразком:
<ul>один відступ </ul>
<ul><ul>два відступи </ul></ul>
<ul><ul><ul>три відступи</ul></ul>></ul>
Питаня для самоконтролю:
1. Як наweb-сторінку вставити малюнок?
2. Як вставити обтіканя малюнка текстом?
3. Як вставити відстань між текстом і малюнком?
4. Як встановити горизонталі і вертикалі малюнка?
5. Як створити посиланя на інший документ?
6. Як записати посиланя на поштову скриньку?
7. Яке імя повинен мати головний документ?
8. Як створити список і вибрати маркер для нього?
9. Як зробити один,два або три відступи?