План уроку: Міні-лекція. Виконання практичної роботи. ...
DESCRIPTION
Тема уроку: Вставка зображень та гіперпосилань на сайті. План уроку: Міні-лекція. Виконання практичної роботи. Звітування про результати. Підведення підсумків. МІНІ-ЛЕКЦІЯ. Вставка зображень в документ. з одн ієї й тієї ж папки:. image ( малюнок ). source ( джерело ). - PowerPoint PPT PresentationTRANSCRIPT
План уроку:
1. Міні-лекція.2. Виконання практичної роботи.3. Звітування про результати.4. Підведення підсумків.
ТЕМА УРОКУ:ВСТАВКА ЗОБРАЖЕНЬ ТА ГІПЕРПОСИЛАНЬ
НА САЙТІ
МІНІ-ЛЕКЦІЯ
3
Вставка зображень в документ
<IMG SRC="flag.jpg">
<IMG SRC="images/flag.jpg">
<IMG SRC="../images/flag.jpg">
<IMG SRC="http://www.vasya.ru/img/flag.jpg">
з однієї й тієї ж папки:
з іншої папки:
з іншого сервера:
image(малюнок)
source(джерело)
4
Вирівнювання зображень в документі
<IMG SRC="flag.jpg" ALIGN="left">
left right
top bottom(стандартно) middle
5
Задання відступу
<IMG SRC="net.jpg" ALIGN="left">
<IMG SRC="net.jpg" ALIGN="left" HSPACE=10 VSPACE=10>
VSPACE(vertical space)
HSPACE(horizontal space)
6
Інші параметри
<IMG SRC="myphoto.jpg"
ALT="Моя фотография"
ALIGN=“LEFT” WIDTH=100 HEIGHT=150
BORDER=0>
•підказка, що з’являється•надпис на місці малюнку,
якщо він відсутній
розміри малюнку
розмір рамки навколо малюнку
Створення гіперпосилань
Посилання бувають:
1. внутрішніми,
2. зовнішніми,
3. абсолютними,
4. відносними
при переході у межах того самого
документа
при переході до іншого документа,
розташованого на іншому веб-вузлі
містять всі компоненти, необхідні для того, щоб броузер зміг знайти веб-
сторінку в WWW
вказує на ресурс, що міститься на тому самому вузлі, що і вихідний документ
Гіперпосилання організуються у такий спосіб:На вихідній веб-сторінці визначається відправна точка посилання,
наприклад підкреслене слово або малюнок. На цільовій веб-сторінці задається точка призначення посилання, що відповідає як конкретному HTML – елементу (тексту, малюнку, ауді- або відео кліпу), так і документу в цілому.
Відправна точка посилання задається тегом <A>. Елемент А називається елементом прив’язки або якірним елементом.
Всередині тегу <A> ставиться обов’язковий атрибут href, за допомогою якого визначається точка призначення посилання (цільовий ресурс). Між тегами <A> і </A> розміщується текст посилання або елемент малюнка.
Створення відносного гіперпосилання:
<A href =“ind1.html”> друзі </A>
На веб-сторінці це посилання відображатиметься у вигляді тексту “друзі”.При натисненні кнопкою миші на даному гіперпосиланню буде
завантажуватися HTML- файл ind1.html
При посиланні на ресурс, розміщений у WWW, в атрибуті href вказується URL цього ресурсу:
<A href=“http://www.samsung.com”> телефони фірми Samsung </A>
Як атрибут href можна вказати ресурс mailto (виклик протоколу електронної пошти SMPT):
<A href = mailto://[email protected]> лист другу <A/>
УВАГА!!!: При створенні гіперпосилання в межах свого комп’ютера, краще за все розмістити файли, на які ви посилаєтесь, в каталозі з
вихідним документом
Створення внутрішнього посилання (замість атрибута href використовується атрибут name):
<A HREF=“#глав1”> <H2> Моє навчання </A> </H2>
<A NAME=“глав1”><H1><b><i>Моє навчання </A><BR>
…
Підведення підсумків
1 варіантЗНАЙТИ І ВИПРАВИТИ ПОМИЛКИ:
<HEAD><TITLE> Моя перша сторінка </TITLE></HEAD><BODY TEXT = “білий” BGCOLOR = “червоний”><IMG ="flag.jpg"><S> Моя веб-сторінка</S><H1 ALIGN = “CENTER”> Автор Іван Іванов </H1><H4> Дата створення 12.11.2011</H4></BODY></HTML>
2 варіантЗНАЙТИ І ВИПРАВИТИ ПОМИЛКИ:
<HTML><HEAD><TITLE> Моя друга сторінка </TITLE></HEAD><BODY TEXT = ”BLUE” BGCOLOR = “GREEN”>< SRC ="STEP.jpg"><S> Моя веб-сторінка</S><H3 ALIGN = “LEFT”> Автор Іван Іванов </H3><H2> Дата створення 12.11.2011</H2></BODY>
3 варіант
<HTML><HEAD><TITLE> Моя третя сторінка </TITLE></HEAD><BODY TEXT = ”BLUE” BGCOLOR = “GREEN”><IMG SRC ="STEP"><S> Моя веб-сторінка</S><H3 ALIGN = “LEFT”> Автор Іван Іванов </H3 BR><H2> Дата створення 12.11.2011</H2>
ЗНАЙТИ І ВИПРАВИТИ ПОМИЛКИ:
4 варіантЗНАЙТИ І ВИПРАВИТИ ПОМИЛКИ:
<HTML><HEAD><TITLE> Моя четверта сторінка </TITLE></HEAD><BODY TEXT = ”BLUE” BGCOLOR = “GREEN”><IMG SRC ="STEP.jpg"><S> Моя веб-сторінка</S><H3 ALIGN = “вліво”> Автор Іван Іванов </H3><H2> Дата створення 12.11.2011</H2><a href="foto.jpg"></a>Моє фото<BODY><HTML>
5 варіантЗНАЙТИ І ВИПРАВИТИ ПОМИЛКИ:
<HTML><HEAD><TITLE> Моя п'ята сторінка <TITLE></HEAD><BODY TEXT = “Yellow” BACKGROUND = “GREEN”><H1 ALIGN = “center”> Автор Іван Іванов </H1><HREF=“#глав1”> <H2> Моє хобі </H2><NAME=“глав1”><H1><b><i>Моє хобі<HTML></BODY>