1 / 15

План уроку: Міні-лекція. Виконання практичної роботи. Звітування про результати.

Тема уроку: Вставка зображень та гіперпосилань на сайті. План уроку: Міні-лекція. Виконання практичної роботи. Звітування про результати. Підведення підсумків. МІНІ-ЛЕКЦІЯ. Вставка зображень в документ. з одн ієї й тієї ж папки:. image ( малюнок ). source ( джерело ).

jerome-paul
Download Presentation

План уроку: Міні-лекція. Виконання практичної роботи. Звітування про результати.

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Тема уроку:Вставка зображень та гіперпосилань на сайті План уроку: Міні-лекція. Виконання практичної роботи. Звітування про результати. Підведення підсумків.

  2. МІНІ-ЛЕКЦІЯ

  3. Вставка зображень в документ зоднієї й тієї ж папки: image(малюнок) source(джерело) <IMGSRC="flag.jpg"> з іншої папки: <IMGSRC="images/flag.jpg"> <IMGSRC="../images/flag.jpg"> з іншого сервера: <IMGSRC="http://www.vasya.ru/img/flag.jpg">

  4. Вирівнюваннязображень в документі <IMG SRC="flag.jpg"ALIGN="left"> left right bottom (стандартно) top middle

  5. Заданнявідступу <IMG SRC="net.jpg" ALIGN="left"HSPACE=10VSPACE=10> <IMG SRC="net.jpg"ALIGN="left"> VSPACE (vertical space) HSPACE (horizontal space)

  6. Іншіпараметри • підказка, щоз’являється • надпис на місцімалюнку, якщовінвідсутній <IMG SRC="myphoto.jpg" ALT="Моя фотография"ALIGN=“LEFT”WIDTH=100 HEIGHT=150 BORDER=0> розмірималюнку розмір рамки навколомалюнку

  7. Створення гіперпосилань при переході у межах того самого документа Посилання бувають: при переході до іншого документа, розташованого на іншому веб-вузлі внутрішніми, зовнішніми, абсолютними, відносними містять всі компоненти, необхідні для того, щоб броузер зміг знайти веб-сторінку в WWW вказує на ресурс, що міститься на тому самому вузлі, що і вихідний документ

  8. Гіперпосилання організуються у такий спосіб: На вихідній веб-сторінці визначається відправна точка посилання, наприклад підкреслене слово або малюнок. На цільовій веб-сторінці задається точка призначення посилання, що відповідає як конкретному HTML – елементу (тексту, малюнку, ауді- або відео кліпу), так і документу в цілому. Відправна точка посилання задається тегом <A>. Елемент А називається елементом прив’язки або якірним елементом. Всередині тегу <A> ставиться обов’язковий атрибут href, за допомогою якого визначається точка призначення посилання (цільовий ресурс). Між тегами <A> і </A> розміщується текст посилання або елемент малюнка. Створення відносного гіперпосилання: • <A href =“ind1.html”> друзі </A> На веб-сторінці це посилання відображатиметься у вигляді тексту “друзі”. При натисненні кнопкою миші на даному гіперпосиланню буде завантажуватися HTML- файл ind1.html

  9. При посиланні на ресурс, розміщений у WWW, в атрибуті href вказується URL цього ресурсу: • <A href=“http://www.samsung.com”> телефони фірми Samsung</A> Як атрибутhrefможна вказати ресурс mailto (виклик протоколу електронної пошти SMPT): <A href = mailto://garry@myserver.net.ua> лист другу <A/> • Створення внутрішнього посилання (замість атрибута hrefвикористовується атрибут name): <A HREF=“#глав1”> <H2>Моє навчання </A> </H2> … <A NAME=“глав1”><H1><b><i>Моє навчання </A><BR> Увага!!!: При створенні гіперпосилання в межах свого комп’ютера, краще за все розмістити файли, на які ви посилаєтесь, в каталозі з вихідним документом

  10. Підведення підсумків

  11. 1 варіант Знайти і виправити помилки: <HEAD> <TITLE> Моя перша сторінка </TITLE> </HEAD> <BODY TEXT = “білий” BGCOLOR = “червоний”> <IMG ="flag.jpg"> <S> Моя веб-сторінка</S> <H1 ALIGN = “CENTER”> Автор Іван Іванов </H1> <H4> Дата створення 12.11.2011</H4> </BODY> </HTML>

  12. 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>

  13. 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>

  14. 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>

  15. 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>

More Related