Тема: зображення. Зв’язування файлів за допомогою гіперпосилання.

Мета: Створити сторінку з вмонтованими малюнками та гіперпосиланням-текстом і гіперпосиланнями-малюнками.

ТЕОРЕТИЧНІ ВІДОМОСТІ

Гіперпосилання

Як відомо, скорочення HTML означає "мова маркування гіпертекстів". Що ж таке гіпертекст? На відміну від звичайного тексту, який можна читати тільки від початку до кінця, гіпертекст дозволяє здійснювати миттєвий перехід від одного фрагмента тексту до іншого. В HTML перехід від одного фрагмента тексту до іншого задається за допомогою наступного тега:

<A HREF="[адреса переходу]">виділений фрагмент тексту</A>

В якості параметру [адреса переходу] може використатися кілька типів аргументів. Найпростіше – це задати ім'я іншої HTML-сторінки, до якої потрібно перейти. Наприклад:

<A HREF="index.html">Перейти до змісту</A>

Такий код приведе до появи в документі виділеного фрагмента Перейти до змісту, при натисканні на який у поточне вікно буде завантажений документ index.html.

Зверніть увагу: якщо в адресі переходу не зазначений каталог, перехід буде виконаний усередині поточного каталогу. Якщо в адресі переходу не зазначений сервер, перехід буде виконаний на поточному сервері. Із цього треба зробити одне дуже важливе практичне міркування: якщо Ви підготу­вали до публікації деяку групу HTML-документів, які посилаються один на одного тільки по імені файлу й перебувають в одному каталозі на Вашому комп'ютері, вся ця група документів буде працювати точно так само, якщо її помістити в будь-який інший каталог на будь-якому іншому комп'ютері у локальній мережі або... в Інтернет! Таким чином, у Вас з'являється можли­вість розробляти цілі колекції документів без підключення до Інтернету, і тільки після остаточної готовності, підтвердженої випробуван­нями, поміща­ти колекції документів на Інтернет цілком.

 

При необхідності можна задати перехід не просто до деякого сайту, але й до певного місця усередині цього сайту. Для цього необхідно створити в сайті, до якого буде заданий перехід, деяку опорну крапку, або анкер.

Розберемо це на прикладі.

Допустимо, що необхідно здійснити перехід з файлу 1.htm до слів "Перехід закінчений" у файлі 2.htm (файли перебувають в одному каталозі). Насамперед, необхідно створити от такий анкер у файлі 2.htm:

<A NAME="AAA">Перехід закінчений</A>

Слова "Перехід закінчений" при цьому ніяк не будуть виділені в тексті сайту. Потім у файлі 1.htm (або в будь-якому іншому) можна визначити перехід на цей анкер:

<A HREF="2.htm#AAA">Перехід до анкера AAA</A>

До речі кажучи, перехід до цього анкера можна визначити й усередині самого документа 2.htm - досить тільки включити в нього от такий фрагмент

<A HREF="#AAA">Перехід до анкера AAA</A>

На практиці це дуже зручно при створенні більших сайтів. На початку сайту можна помістити зміст, що складається з посилань на анкери, розташовані в заголовках розділів сайту.

Щоб уникнути непорозумінь рекомендується задавати імена анкерів латинськими буквами. Стежите за написанням імен анкерів: більшість браузерів відрізняють великі букви від маленьких. Якщо ім'я анкера визначене як AAA, посилання на анкер aaa або Aa не виведуть Вас на анкер AAA, хоча сайт, швидше за все, буде завантажений коректно.

 

Зображення

Вмонтувати зображення в HTML-документ дуже просто. Для цього потрібно тільки мати це саме зображення у форматі GIF або JPEG і написати один рядок в HTML-тексті. Допустимо, нам потрібно включити в документ зображення, записане у файл picture.gif, що перебуває в одному каталозі з HTML-документом:

<IMG SRC="picture.gif">

Мітка <IMG SRC="[ім'я файлу]"> може також включати атрибут ALT="[текст]", наприклад:

<IMG SRC="picture.gif" ALT="Картинка">

Зустрівши таку мітку, броузер покаже на екрані текст Картинка й почне завантажувати на його місце картинку з файлу picture.gif. Атрибут ALT може виявитися необхідним на випадок, якщо в броузері відключене автоматичне завантаження зображень (при повільному підключенні до Інтернет це робить­ся для економії часу).

Припустимо, малюнок mypicture.jpg перебуває в тій же папці, що й сама HTML-сторінка. Тоді ваш код буде виглядати приблизно так:

<CENTER>

<IMG SRC="mypicture.jpg" WIDTH="190" HEIGHT="230" ALT="Мій малюнок">

</CENTER>

Атрибути WIDTH і HEIGHT задають розмір картинки на екран

ПРАКТИЧНА ЧАСТИНА

1. Завантажіть програми Блокнот і Internet Explorer. Створіть у своїй папці порожні HTML-файли: index_ВашаФамилия.htm, back.htm, next.htm і gallery.htm.

2. Завантажіть програму Paint. Створіть у своїй папці кілька малюнків розміром 500х700 пикселей, назвавши їх mypic.jpg, 1.jpg, 2.jpg і т.д.

3. Для кожного з нумерованих малюнків створіть по зменшеній копії розміром 50х70 пикселей, зберігши їх під іменами 1а.jpg, 2а.jpg і т.д. Закрийте програму Paint.

4. У тіло файлу index_ВашаФамилия.htm додайте наступний код:

<A HREF="back.htm">Назад</A>

<A HREF="gallery.htm" TARGET="new">

<IMG SRC="mypic.jpg" WIDTH="250" HEIGHT="350" ALT="Це мій малюнок"></A>

<A HREF="next.htm">Вперед</A>

У випадку з посиланнями "назад" і "вперед" броузер просто завантажить у вікно файл із назвою back.htm при щиглику на підкресленому слові назад і, відповідно next.htm при щиглику на підкресленому слові вперед. Але якщо нажати на малюнок, то файл gallery.htm завантажиться вже в окремому вікні. Це виконується за допомогою атрибута TARGET і його параметра new. Цей атрибут також дуже зручний при використанні фреймів.

САМОСТІЙНО: сторінку gallery.htm заповнити html-кодом так, щоб при перегляді броузером вона виглядала приблизно так:

Моя галерея малюнків
Довільний малюнок	Довільний малюнок	Довільний малюнок

Тема: Фрейми та форми.

Мета: Навчити студентыв створювати сторінку, що складається із фреймів і містить форми-кнопки.

 

ТЕОРЕТИЧНІ ВІДОМОСТІ

У вікні броузера може бути показані не одна сторінка а одночасно дві, три або більше. У такому випадку кожна зі сторінок називається фреймом. Файл із кодом фреймів не містить нічого, крім їхніх параметрів і посилань на відповідні файли. Тому, якщо ви просто завантажите такий файл і не створи­те при цьому файли, на які буде посилатися фрейм, те броузер повідомить вам, що він не може знайти потрібні файли, і нічого вам не покаже. Фрейми можуть бути вкладеними друг у друга.

Завдання. Створіть файли з назвами left.htm і right.htm і заповните їх довільним текстом.

Створіть файл index.htm і введіть у нього наступний код:

<HTML>

<HEAD> <TITLE> А тут Ваша назва...</TITLE> </HEAD>

<FRAMESET FRAMEBORDER="0" COLS="20%,80%">

<FRAME NAME="left" SRC="left.htm" SCROLLING="auto" NORESIZE>

<FRAME NAME="right" SRC="right.htm" SCROLLING="auto" NORESIZE>

</FRAMESET>

</HTML>

Форми

Форма — це інструмент, за допомогою якого HTML-документ може послати деяку інформацію в деяку заздалегідь певну крапку зовнішнього миру, де інформація буде деяким чином оброблена. Форма відкривається міткою <FORM> і закінчується міткою </FORM>. HTML-документ може містити в собі кілька форм, однак форми не повинні перебувати одна усередині іншої.

Для того, щоб запустити процес передачі даних з форми оброблювачеві, потрібний якийсь орган керування. Створити такий орган керування дуже просто.

Завдання: Напишемо найпростішу форму. Добре, коли відвідувач сам може вибрати кольори тла відображуваної сторінки. І ви можете дати йому таку можливість! Для цього на сторінці right1.htm пишемо наступне:

< form ><input type="button" value="red" onClick="document.bgColor='FF0000'">

<input type="button" value="yellow" onClick="document.bgColor='FFFF00'">

<input type="button" value="blue" onClick="document.bgColor='0000FF'">

</ form >

У поле value перебуває напис, відображуваний на кнопці, а FF0000, FFFF00 і 0000FF — кольори тла, одержувани при натисканні кнопки. При перегляді такої сторінки з'являться три кнопки, при натисканні яких буде змінюватися кольори тла. На сторінці left.htm уведіть код:

< html >

<body bgcolor="Bisque">

<a href="right.htm"><small>1-й пункт меню</small></a><br>

<a href="right1.htm"><small>2-й пункт меню</small></a><br>

</body>

</ html >

Завантажити збережений файл index.htm у броузері. Як вплинув уведений HTML-код на вигляд сторінок, відображуваних броузером?