 |
Главная Случайная страница Контакты | Мы поможем в написании вашей работы! | |
Лабораторна робота 2
|
|
Варіант 1
Вставка картинок у документ: <img src="my.jpg">
Замість my.jpg ми можемо підставити ім'я будь-якої картинки (me.gif, main.png). Найголовніше зрозуміти, що все розташоване між лапками - посилання (шлях до картинки). Наш приклад говорить про те, що картинка лежить в тому ж каталозі (директорії, теці), в якій лежить і наш документ. Якщо картинка лежить в піддиректорії, то посилання на неї буде таке:
<img src="/my/my.jpg">
Якщо картинка лежить на рівень вище, а документ перебуває в піддиректорії, то посилання на неї буде таким:
<img src="../my.jpg">
Якщо картинка лежить на іншому сайті, то шлях прописується повністю:
<img src="http://www.homepage.ru/my/my.jpg">
Для зручності кладіть картинку в ту ж директорію, що і документ, тоді плутанини буде менше (тег img не вимагає закриваючого тега).
<html>
<head>
<title>Мій перший крок </title>
</head>
<body text="#336699" bgcolor="#000000">
<center>
<H3>Здравствуйте, це моя перша сторінка.</H3>
<br>
<font color="#CC0000"> Ласкаво просимо!</font>:) </center>
<p align="justify">
<img src="primtocodephoto.gif"> Я зовсім недавно почав(ла) знайомитися з віртуальним життям, але мені за давньою традицією теж захотілося створити свою домашню сторіночку для моїх нових віртуальних друзів і знайомих, щоб вони могли подивитися мої фотографії, прочитати про мене, черкнути пару рядків у мою гостьову книгу. А може і просто випадковий відвідувач раптом захоче познайомиться зі мною, і у мене з'явиться <b> ще один віртуальний друг? </b>
</p>
</body>
</html>
У деяких тегів є параметри (атрибути), параметр може задаватися один, а може їх бути декілька. Наприклад у тега <p> - <p align="justify">. Параметр align є і у картинок:
<img src="pr1.png" align="left">
Це означає, що картинка буде притиснута до лівого краю екрана, а текст обтікатиме її справа. Щоб зробити навпаки (картинка справа, текст зліва) треба прописати right:
<img src="pr1.png" align="right">
Але це не все: текст може розташовуватися внизу картинки (це за замовчуванням) - (1), посередині - (2), і вгорі - (3):
(1) - <img src="pr1.png" align="bottom">
(2) - <img src="pr1.png" align="middle">
(3) - <img src="pr1.png" align="top">
Окрім параметра align існує ще декілька параметрів:
(1) - <img src="pr1.png" Vspace="10">
(2) - <img src="pr1.png" Hspace="30">
(3) - <img src="pr1.png" alt="моя фотография">
(4) - <img src="pr1.png" width="100">
(5) - <img src="pr1.png" height="200">
(6) - <img src="pr1.png" border="5">
Тепер пояснення по пунктах.
(1) - параметр vspace - задає відстань між текстом і малюнком (по вертикалі). Відстань задається в пікселях (pixel - мінімальна одиниця зображення, крапка.
(2) - параметр hspace - теж задає відстань між текстом і малюнком, але по горизонталі. Відстань задається в пікселях.
(3) - параметр alt - короткий опис картинки. Якщо навести курсор миші на малюнок, і так потримати його (курсор) декілька секунд з’явиться опис картинки. У нашому випадку це буде фраза - "моя фотографія". Якщо параметр alt не задавати, опису не буде.
(4) - параметр width - ширина самої картинки (у пікселях). Якщо ширину не задавати спеціально, то вона буде рівна реальній ширині картинки.
(5) - параметр height - висота самої картинки (теж в пікселях). Так само як у випадку з width висоту (height) картинки можна і не задавати.
(6) - параметр border - рамка навколо самої картинки (у пікселях). Можна не задавати.
Усі параметри можуть використовуватися одночасно один з одним. Введемо такі параметри для нашої картинки:
<img src="pr1.png" align="left" HSPACE=30 VSPACE=5 alt="моя фотографія">
Наша картинка буде притиснута до лівого краю екрана, текст обтікатиме її справа, відстань до тексту по горизонталі - 30 пікселів, по вертикалі - 5 пікселів, а якщо ви наведете на картинку курсор, то з’явиться напис - "моя фотографія".
<html>
<head>
<title>Мій перший крок </title>
</head>
<body text="#336699" bgcolor="#000000">
<center>
<H3>Здравствуйте, це моя перша сторінка.</H3>
<br>
<font color="#CC0000"> Ласкаво просимо!</font>:) </center>
<p align="justify">
<img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотографія"> Я зовсім недавно почав(ла) знайомитися з віртуальним життям, але мені за давньою традицією теж захотілося створити свою домашню сторінку для моїх нових віртуальних друзів і знайомих, щоб вони могли подивитися мої фотографії, прочитати про мене, написати пару строчок в мою гостьову книгу. <br><br> А може і просто випадковий відвідувач раптом захоче познайомиться зі мною, і у мене з'явиться <b> ще один віртуальний друг? </b><br><br> На фотографії зображений(а) я. Якість картинки не дуже хороша, на жаль, тому вона не чітка і роздивитися риси мого обличчя трішки проблематично. Але в цілому помітно, що я цілком нічого:) <br><br> Якщо ти так теж думаєш, то давай зустрінемося, поговоримо, чаю поп'ємо в кафешці?:) Хто знає, може статися так, що ми і в реальному житті станемо друзями</p>
</body>
</html>
Картинку можна використати як фон документа. Це прописується у відкриваючому тегу body:
<body text="#336699" bgcolor="#000000" background= "ваш_фон.jpg">
Тепер пора поговорити про посилання. Наша сторінка може складатися з декількох документів. Один з них головний (index.html або main.html) - він відкривається першим і повинен обов'язково лежати на вашому сайті в інтернеті.
Решту документів ви можете називати як завгодно (photos.html, about_me.html, my_pets.html, friends.html, gh516hgd.html). Вони всі можуть лежати в одній директорії (теці), а можуть – у різних.
Посиланням на ці інші документи може бути текст (фраза, слово), а може бути і картинка. На цій сходинці ми розглянемо тільки текстове посилання.
Спершу створимо новий документ (у нашому прикладі prf.html) в тій же директорії (теці), де знаходиться наш головний документ index.html. Зміст документа вигадайте самі. Хай prf.html - документ з вашими фотографіями. Тоді ми можемо фразу "подивитися мої фотографії" зробити посиланням на prf.html:
<a href="prf.html">посмотреть мои фотографии</a> (прим.)
Тег <a></a> робить посиланням укладену в нього картинку або фразу (текст). Принципи прописування шляху тут такі ж як у випадку з картинками:
(1) - <a href="prf.html">мои фотографии</a>
(2) - <a href="/photos/prf.html">мои фотографии</a>
(3) - <a href="http://www.homepage.ru/prf.html">мои фотографии</a>
У випадку (1) документ лежить в тій же директорії (теці), що і документ, в якому ми посилаємося на prf.html, у випадку (2) документ лежить у піддиректорії /photos, у випадку (3) ми посилаємося на сайт http://www.homepage.ru, де лежить потрібний нам документ.
Але є один чинник, який нам потрібно врахувати: колір посилання потрібно прописувати, тому пригадаємо про відкриваючий тег боди:
<body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">
Розберемося що до чого: link - колір посилання, alink - колір активного посилання (натиснутою), vlink - колір уже відвіданого посилання. У нашому прикладі кольори однакові, але вони можуть бути різними. Отже пропишемо кольори для посилання і саме посилання в нашому документі:
<html>
<head>
<title>Мій перший крок </title>
</head>
<body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">
<center>
<H3>Здравствуйте, це моя перша сторінка.</H3>
<br>
<font color="#CC0000"> Ласкаво просимо!</font>:) </center>
<p align="justify">
<img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография"> Я зовсім недавно почав(ла) знайомитися з віртуальним життям, але мені за давньою традицією теж захотілося створити свою домашню сторіночку для моїх нових віртуальних друзів і знайомих, щоб вони могли <a href="prf.html"> посмотреть мои фотографии</a>, почитати про мене, черкнути пару рядків у мою гостьову книгу. <br><br> А може і просто випадковий відвідувач раптом захоче познайомиться зі мною, і у мене з'явиться <b> ще один віртуальний друг? </b><br><br> На фотографії зображений(а) я. Якість картинки не дуже хороша, на жаль, тому вона не чітка і розгледіти риси мого обличчя проблематично. Але в цілому помітно, що я цілком нічого:) <br><br> Якщо ти так теж думаєш, то давай якось зустрінемося, поговоримо, чаю поп'ємо в кафешці?:) Хто знає, може ми і в реальному житті станемо друзями:)</p>
</body>
</html>
Посилання на вашу поштову скриньку прописується так:
<a href="mailto:[email protected]"> [email protected] - пишіть листи </a> (прим.)
Посиланням може бути і картинка. Принцип посилання той же, що і у випадку з текстом, тільки між тегами вставляється не текст, а картинка:
<a href="prf.html"> <img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография"> </a>
Це ми введемо в наш приклад, зробивши посиланням на документ з фотографіями (prf.html) картинку pr1.png:
<html>
<head>
<title>Мій перший крок </title>
</head>
<body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">
<center>
<H3>Здравствуйте, це моя перша сторінка.</H3>
<br>
<font color="#CC0000"> Ласкаво просимо!</font>:) </center>
<p align="justify">
<a href="prf.html"> <img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография"></a> Я зовсім недавно почав(ла) знайомитися з віртуальним життям, але мені за давньою традицією теж захотілося створити свою домашню сторіночку для моїх нових віртуальних друзів і знайомих, щоб вони могли <a href="prf.html"> посмотреть мои фотографии</a>, почитати про мене, черкнути пару рядків у мою гостьову книгу. <br><br> А може і просто випадковий відвідувач раптом захоче познайомиться зі мною, і у мене з'явиться <b> ще один віртуальний друг?:) </b><br><br> На фотографії зображений(а) я. Якість картинки не дуже хороша, на жаль, тому вона не чітка і розгледіти риси мого обличчя проблематично. Але в цілому помітно, що я цілком нічого:) <br><br> Якщо ти так теж думаєш, то давай зустрінемося, поговоримо, чаю поп'ємо в кафешці?:) Хто знає, може бути ми і в реальному житті станемо друзями.
</p>
</body>
</html>
Картинка primtocodephoto.gif стала посиланням. Якщо ви помітили: навколо картинки з'явилася рамочка. Цю рамочку можна залишити, якщо вам вона подобається, а можна вилучити, якщо ви задасте картинці параметр border="0"
<img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотографія" border="0">
Посилання може бути не тільки на документ з розширенням *.html, але і на багато інших (*.doc, *.mp3, *.jpg, *.gif, *.txt, *.zip, *.exe і т.д:) Робиться це все за тим же принципом:
<a href="http://www.melody.ru/music.mp3"> викачати пісню </a>
<a href="http://www.melody.ru/"> музичний сайт </a>
Але повернемось до картинки, багато хто з вас, напевно, стикався з таким явищем: коли тиснеш на маленьку картинку, то завантажується велика в тому ж або в новому вікні. Як це робиться? Робимо посиланням картинку (допустимо small.jpg) і посилаємося на іншу картинку (допустимо big.jpg):
<a href="big.jpg"> <img src="small.jpg"> </a>
У цьому випадку велика картинка відкриється в тому ж вікні. Але як же зробити так, щоб картинка (або будь-який інший файл-документ) відкрилася в новому вікні? У тега <a></a> є параметр target:
<a href="big.jpg" target="_blank"> <img src="small.jpg"> </a>
Отже, target="_blank" - указує на те, що документ (картинка в нашому випадку), на який веде посилання, відкриється в новому вікні броузера (Explorer`а).
Списки.
Їх зручно використовувати в певних ситуаціях, наприклад, у розділі зміст
Саме тегом <li></li> вони і задаються.
У тега <li> є параметр type:
- <li type="disk">,
- <li type="circle">,
- <li type="square">.
Якщо ви користувалися текстовими редакторами, то знаєте, що таке табуляція (це коли ви тиснете на кнопочку Tab і весь текст зміщується вправо). Схожа фунція є і в HTML:
<ul>Ваш текст</ul>
Щоб відступ (табуляція) був більший треба вкладати тег <ul> у самого себе:<ul><ul> Два відступи</ul></ul>,
<ul><ul><ul>Три відступи</ul></ul></ul>
Лінії
Задаються тегом <Hr> і не вимагають закриваючого тега:
У лінії є багато різних параметрів:
(1) <Hr align="right"> (center або left)
(2) <Hr width="30%"> (ширина лінії у відсотках/пікселях)
(3) <Hr size="6"> (товщина лінії)
(4) <Hr NoShade> (відміна об'ємності)
(5) <Hr color="cc0000"> (колір лінії, тільки в IE)
Лабораторна робота № 2
Варіант 2
Завдання 1. Розміщення графіки на Web-сторінці
Тег < IMG...> дозволяє вставити зображення в документ. Зображення з'явиться в тому місці документа, в якому записаний цей тег. Команда записується з одиночним тегом, тобто закриваючий тег не застосовується. Графіка в Web, як правило, поширюється в трьох форматах: GIF, JPG, PNG. Для виконання вправи вважаємо, що графічний файл Wagon.gif зберігається в робочому каталозі HTML, де є і наша Web-сторінка.
1. Внесіть зміни до файла RASP.HTML:
<HTML>
<HEAD>
<TITLE> Учбовий файл HTML </TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#330066">
<P ALIGN=CENTER>
<FONT COLOR="#008080" SIZE="7"><B> Розклад </B></FONT><BR>
<FONT SIZE="6"> <1>занять на вівторок</I></FONT><BR><BR>
< IMG SRC="Wagon.gif '>
</P>
</BODY>
</HTML>
Тег < IMG...> має немало атрибутів (див. таблицю 2), які можна задавати додатково. Вони можуть розташовуватися де завгодно в тегу після коду IMG.
Атрибути зображення Таблиця 2
Дата публикования: 2015-04-07; Прочитано: 262 | Нарушение авторского права страницы | Мы поможем в написании вашей работы!
