Практичне заняття №6 Тема: Зображення. Зв’язування файлів за допомогою гіперпосилання. Гіперпосилання –текст та гіперпосилання - малюнок.
Мета: Навчити студентів створювати сторінку з вмонтованими малюнками та гіперпосиланнями і показати зв'язок між файлами.
Теоретичні відомості
Зображення – це один з самих популярних елементів, незамінний інструмент web-дизайнера.
Тег IMG (HTML 2.0) – Image(зображення). Тег використовується для вмонтування зображення в HTML-документ. Для цього потрібно тільки мати це саме зображення у форматі GIF або JPEG або PNG.
Тег IMG не має кінцевого тегу,одинарний.
Формат тегу: <IMG src="ім`я файлу.тип">, тип вказувати обов`язково.
Атрибути:
SRC – обов'язковий атрибут. Вказує адресу (URL) файлу із зображенням.
HEIGHT і WIDTH – визначають довжину та ширину зображення відповідно. Якщо зазначені значення не збігаються з реальним розміром зображення, зображення масштабується (часом з помітною втратою якості).
HSPACE і VSPACE – визначають відступ картинки (у пикселах) по горизонталі й вертикалі від інших об'єктів документа. Просто необхідно при обтіканні зображення текстом.
ALIGN –вказує спосіб вирівнювання зображення в документі. Може приймати наступні значення:
–left – вирівнює зображення по лівому краю документа. Текст обтікає зображення праворуч. –right – вирівнює зображення по правому краї документа. текст обтікає зображення ліворуч. Alt – визначає текст, який буде відображатися браузером на місці зображення, якщо браузер не може знайти файл із зображенням або включений у текстовий режим. Як значення задається текст із описом зображення.
BORDER – визначає ширину рамки навколо зображення в пикселах. Рамка виникає, тільки якщо зображення є гіпертекстовим посиланням. У таких випадках значення BORDER звичайно вказують рівним нулю.
Приклад1.
Припустимо, нам потрібно вставити в документ зображення, записане у файлі, Кот.jpg, що перебуває в одному каталозі з HTML-документом:
<IMG SRC="Кот.jpg">, при вмонтуванні малюнка на сторінку необхідно враховувати його розміри, якщо малюнок маленький, то він буде повторюватися на екрані монітора багато разів, що не додасть краси вашій сторінці.
Приклад2
<IMG SRC="[ім'я файлу]"> може також включати атрибут ALT="[текст]", наприклад:
<IMG SRC="Кот.jpg" ALT="Картинка">
Зустрівши таку мітку, браузер покаже на екрані текст Картинка і почне завантажувати на його місце картинку з файлу Кот.jpg. Атрибут ALT може виявитися необхідним на випадок, якщо в браузері відключене автоматичне завантаження зображень (при повільному підключенні до Інтернет це робиться для економії часу).
Приклад3
Змініть розміри малюнка
<IMG SRC="Кот.jpg" WIDTH="190" HEIGHT="230" ALT="Мій малюнок">
Атрибути WIDTH і HEIGHT задають розмір малюнка на екрані.
Завдання
1.Створіть у новому файлі три наведених приклада. Для прикладу №3 малюнок візміть у рамку шириною=3 пк. Файл збережіть з ім`ям Малюнки.html.
Гіперпосилання та якоря
Гіперпосилання є двох видів:
на будь-яке місце на певній сторінці:
початок сторінки (top),
кінець сторінки (bottom),
позначений текст.
на файл;
Гіперпосилання вставляються за допомогою парного тегу: <A>
гіперпосилання може виглядати як підкреслений текст або малюнок.
курсор миші на посиланні змінює свою форму і приймає форму вказівного пальця;
для переходу по посиланню, необхідно клацнути по ньому мишею;
для повернення з гіперпосилання необхідно використати навігаційну кнопку браузера "Назад" ("Back").
Розглянемо випадок, коли гіперпосилання є текстом.
1)Перехід від одного фрагмента тексту до іншого в межах одного документа задається за допомогою наступних тегів:
Для переходу в межах документа необхідно:
1.Вибрати ім`я для мітки переходу, воно має бути унікальним;
2. В позиції переходу по мітці треба записати команду
<A href=#мітка>текст</A>,де
# -- ключовий символ;
мітка – обране ім`я мітки переходу;
текст – запис, який буде на екрані браузера як посилання.
3. Встановити тег з міткою-гіперпосиланням перед фрагментом, на який має виконуватися перехід
<A name=мітка></A>, крім того ім`я мітки повинно бути тим самим, що і в команді переходу.
На практиці це дуже зручно при створені великих сайтів.
Завдання
2. Вам необхідно створити у новому файлі з іменем «Мої гіперпосилання.html » наведений нижче приклад, з трьома гіперпосиланнями-мітками на різні частини одного файлу, при цьому мітки-гіперпосилання мають бути організовані як нумерований список , а також імена міток на відповідні фрагменти файлу повинні мати номери 1,2,3.
Ми наводимо вам текст у кодах фрагменту, який описує створення мітки-гіперпосилання на перший фрагмент:
<A href=#1>Жил да был...</A> - створення самої мітки з іменем 1
<A name=1> , це тег з міткою 1 перед фрагментом, на який виконується перехід
Жил да был
Крокодил.
Он по улицам ходил,
папиросы курил,
По-турецки говорил, -
Крокодил, Крокодил Крокодилович!
Приклад4