Урок 19. Створення та адміністрування сайту. Практична робота 6.
Включення картинок у веб-сторінку завжди приводить до успішних проектів або просто до гарного і красивого інтерфейсу сайту.
За допомогою якої ж команди можна помістити графічний елемент на html-сторінку?
Усі картинки, фотографічні знімки, ілюстрації, графіки, схеми вставляються в документ за допомогою такого тега, який не вимагає закриваючої частини:
<img src="image.jpg">
Де «image.jpg» - це власне картинка-об’єкт з її іменем і розширенням.
Уся інформація, розташована між лапками є посиланням (тобто, шляхом до картинки).
У нашому прикладі картинка лежить у тій же папці, де й сама веб-сторінка.
1. Якщо ж картинка лежить у папці, яка лежить у вашій основній папці, то шлях до неї буде виглядати так:
<img src="papka/image.jpg">
2. Якщо картинка лежить на рівень вище, а сама сторінка перебуває в піддиректорії, то посилання буде іншим:
<img src="../image.jpg"> 3. Якщо картинка розміщена на іншому сайті, то шлях прописується повністю:
<img src="http: // www. sait. com. ua / images/image.jpg">
На практиці, для своєї ж зручності, картинку завжди потрібно класти в одну папку з веб-сторінкою і ніякої плутанини не буде.
Також важливо знати, що IMAGE.jpg, image.JPG, image.jpg і IMAGE.JPG - це різні імена файлів і регістр імен завжди потрібно враховувати.
Після вставки картинки виникає питання: що потрібно зробити, аби увесь текст розташовувався поруч із картинкою, а не тільки один його рядок?
Згадаємо про атрибут ALIGN", який відповідає за вирівнювання і використовується з багатьма іншими тегами.
Атрибут «align» є і у картинок:
<img src="image.jpg" align="left">
У такому випадку картинка буде притиснута до лівого краю екрана, а текст буде обтікати її праворуч.
Щоб розмістити картинку праворуч, а текст обтікав її ліворуч, треба прописати Right":
<img src="image.jpg" align="right">
Але це ще не всі параметри. Текст може розташовуватися:
внизу картинки - <img src="image.jpg" align="bottom">
посередині - <img src="image.jpg" align="middle">
вгорі - <img src="image.jpg" align="top">
Крім параметра «ALIGN» для тега < img > є ще кілька атрибутів:
VSPACE - визначає відстань між текстом і малюнком по вертикалі; задається в пікселях.
Наприклад: <img src="image.jpg" vspace="20">, де 20 – це кількість пікселів екрана монітора.
HSPACE - задає відстань між текстом і малюнком по горизонталі. Відстань задається теж у пікселях.
Наприклад: <img src="image.jpg" hspace="30">.
ALT - короткий опис картинки. Якщо навести курсором миші на малюнок і потримати його секунду, то «вискочить» опис картинки (працює тільки в Internet Explorer).
Опис картинкам задавати потрібно (особливо, якщо вони є кнопками), тому що є користувачі, які «блукають» по Інтернету з відключеною графікою.
А без атрибута «ALT» їм не буде видно на що натискати - якщо картинка не відображається, при заданому «alt», можна побачити напис про призначення картинки.
<img src="image.jpg" alt="малюнок">
BORDER – задає в пікселях товщину рамки навколо картинки. <img src="image.jpg" border="4">
WIDTH - ширина самої картинки в пікселях. Якщо ширину не задавати, то вона буде дорівнювати реальній ширині картинки.
HEIGHT - висота самої картинки в пікселях. Якщо висоту не задавати, то вона буде дорівнювати реальній висоті картинки.