КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Посилання
|
|
|
|
Питання для самоконтролю
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-файл, двічі клацнувши на його піктограмі, а також встановлювати інші параметри розташування фотокартки, подивитися результат.
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:[email protected] > [email protected] - пишітъ листи </а>
Спробуйте в папці з головним документом створити додатковий 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:[email protected]"> [email protected] - пишіть листи
</а>
</р>
</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 клацнути.
Щоб повернутся на сторінку основного документа, треба на панелі інструментів броузера натиснути кнопку "Назад".
|
|
|
|
Дата добавления: 2013-12-13; Просмотров: 348; Нарушение авторских прав?; Мы поможем в написании вашей работы!