Приклад
Лекція 2.
Посилання та графічні об’єкти на WEB-сторінках.
Графічні об’єкти на WEB-сторінках.
Посилання на WEB-сторінках.
Засоби навігації на WEB-сторінках.
Підключення до Інтернету з метою розміщення сторінки.
Графічні об’єкти на WEB-сторінках .
Вставка картинки в документ:
<img src="my.jpg">
Замість my.jpg ми можемо підставити ім'я будь-якої картинки (me.gif, main.png). Найголовніше зрозуміти, що все розташоване між лапками - посилання (шлях до картинки). Наш приклад говорить про те, що картинка лежить в тому ж каталозі (директорії, теці) у якій лежить і наш документ. Якщо картинка лежить в піддиректорії (у теці, яка лежить у вашій основній теці), то посилання на неё виглядатиме так:
<img src="my/my.jpg">
Якщо картинка лежить на рівень вище, а документ знаходиться в піддиректорії, то посилання на неё буде таким:
<img src="../my.jpg">
Якщо картинка лежить на іншому сайті, то шлях прописується повністю:
<img src="http://www.homepage.ru/my/my.jpg">
Для вашої зручності кладіть картинку в ту ж теку, що і документ, тоді плутанини буде менше:) Також я хочу звернути вашу увагу на те, що MY.jpg, my.JPG, my.jpg і MY.JPG – це різні імена файлів. Ніколи не забувайте, що регістр потрібно враховувати.
Запам'ятаєте, тег img не вимагає закриваючого тега.
Приклад
Отже, ми задалися питанням як же зробити так, щоб текст розташовувався весь поряд з картинкою, а не лише одна його строчка. Все дуже просто. Давайте пригадаємо про атрибут align, який відповідає за вирівнювання. Атрибут align є і в картинок:
<img src="pr1.png" align="left">
Це означає що картинка буде притиснута до лівого краю екрану, а текст обтікатиме її справа. Щоб зробити навпаки (картинка справа, текст зліва) треба прописати right:
<img src="dsc00048.JPG" align="right">
Але це не все: текст може розташовуватися внизу картинки (це за умовчанням) - (1), посередині - (2) і вгорі - (3):
(1) - <img src="DSC00048.JPG" align="bottom">
(2) - <img src="DSC00048.JPG" align="middle">
(3) - <img src="DSC00048.JPG" align="top">
Окрім атрибуту align для тега <img> можна ввести ще декілька атрибутів: (1) - <img src="DSC00048.JPG" vspace="10">
(2) - <img src="DSC00048.JPG" hspace="30">
(3) - <img src="DSC00048.JPG" alt="моя фотография">
(4) - <img src="DSC00048.JPG" width="100">
(5) - <img src="DSC00048.JPG" height="200">
(6) - <img src="DSC00048.JPG" border="5">
Далі зробимо пояснення.
(1) - атрибут vspace - задає відстань між текстом і малюнком (по вертикалі). Відстань задається в пікселях. Pixel - мінімальна одиниця зображення, крапка. Наприклад, дозвіл екрану 800х600 - 800 на 600 крапок. У нашому прикладі відстань дорівнює 10 пікселям.
(2) - атрибут hspace - теж задає відстань між текстом і малюнком, але по горизонталі. Відстань задається в пікселях. У нашому прикладі воно дорівнює 30 пікселям (крапкам).
(3) - атрибут alt - короткий опис картинки. Якщо навести курсором миші на малюнок, і так потримати його (курсор) декілька секунд вискочить опис картинки. У нашому випадку це буде фраза - "Урановий кар'єр, штат Юту, США". Якщо параметр alt не задавати, опису не буде. Але розумні люди говорять, що опис картинкам задавати слід (особливо, якщо це кнопки), оскільки є особливі люди які бродять по інтернету з відключеною графікою. Без alt їм не буде видно на що натискувати (якщо картинка є засланням або кнопкою в меню), оскільки картинка не відображується, а при заданому alt, можна побачити напис, для чого картинка призначена.
(4) атрибут width - ширина самої картинки (у пікселях). Якщо ширину не задавати спеціально, то за умовчанням вона дорівнюватиме реальній ширині картинки (а так ви можете її зробити або вже, або ширше).
(5) - атрибут height - висота самої картинки (теж в пікселях). Так само як у випадку з width висоту (height) картинки можна і не задавати.
(6) – атрибут border - рамка довкола самої картинки (у пікселях). Можна не задавати. Проте, за умовчанням, рамка довкола картинки є завжди. І якщо ви хочете прибрати її, то виставляйте атрибут border рівним нулю.
Як ми пам'ятаємо, атрибути для одного тега можуть уживатися одночасно один з одним, щоб уникнути плутанини продемонструю наочно на нашій сторіночці. Введемо наступні атрибути для нашої картинки:
<img src="pr1.png" align="left" hspace="30" vspace="5" alt="моя фотографія">
Наша картинка буде притиснута до лівого краю екрану, текст обтікатиме її справа, відстань до тексту по горизонталі - 30 пікселів, по вертикалі - 5 пікселів (щоб красиво все виглядало), ну, і якщо ви наведете на картинку курсор, то вискочить напис - "моя фотографія".
Ми не говорили, як розташувати саму картинку в центрі екрану (справа, зліва). Тут все дуже просто, пригадаєте параграфи (<p></p>) або інші теги для вирівнювання тексту, про яких ми говорили, адже вони не лише текст вирівнюють (див. наш приклад, наша картинка поміщена в параграф, як і текст).
Також картинку можна зробити фоном документа. Це прописується у відкриваючому тегу body:
<body text="#6600CC" bgcolor="#FFCCFF" background="ваш_фон.jpg">
Атрибут background вказує на те, де лежить фонова картинка, в нашому прикладі він вказує на те, що наша фонова картинка лежить в тій же директорії (теці), що і наш документ.