CSS-блог також приймає участь в конкурсі

Best Ukrainian Blog Awards

Якщо цей блог виявився для вас корисним, запрошую до голосування на конкурсі українських блогів Best Ukrainian Blog Awards. Натисніть на кнопочку в цій замітці для того, щоб перейти на сторінку голосування. Віддавши голос за CSS-блог, ви нічого не втрачаєте, бо за правилами конкурсу маєте можливість голосувати за всі блоги, що вам подобаються. Навіть за власні. Наперед всім дуже-дуже дякую 🙂

Урок 10. Зображення — 1

Жодна інтернет-сторінка в наші часи не залишається без картинок. Тема використання зображень в HTML цікава і обширна, тому я поділила десятий урок на три частини. В першій (сьогоднішній) частині урока ви навчитеся вставляти картинки до власних інтернет-сторінок без допомоги графічного редактора.

Тег Image та атрибут Src

В HTML картинки визначаються тегом <img> (image — зображення). Цей тег використовується тільки разом з атрибутами та не має закриваючого варіанту.
Для того, щоб наша картинка відображалася на сторінці, ми маємо використати атрибут src (source – джерело) разом з тегом img. Між лапками атрибута вставляємо шлях до місцерозташування картинки в інтернеті:

<img src=«url картинки» />

Скопіюйте адресу власної картинки з файлів блога, і вставте її до коду між лапками:


<img src=»
http://sometales.blox.ua/resource/sassy.jpg» />

Розташуйте цей код в простому редакторі між тими абзацами тексту, де має бути картинка.
Так само можна вставити адресу будь-якої картинки, розміщеної в інтернеті. Клікніть на картинці, що вже розташована на інтернет-сторінці, правою кнопкою миші. Оберіть з вспливаючого меню пункт «Копіювати адресу зображення», вставте адресу до коду. Чи може бути легше? 🙂

Атрибут Alt

Атрибут аlt використовується для того, щоб надати зображенню альтернативне текстове пояснення. Деякі користувачі інтернету відключають можливість показу зображень у браузерах або застосована вами картинка може бути видалена згодом. Тож якщо ви хочете донести зміст картинки до всієї аудиторії, пишіть її короткий опис між лапками атрибуту аlt:

<img src=» sassy.jpg « alt=»Одна з фей Емі Браун» />

Що цікавенького можна робити з картинками:

1. Зробити для сторінки фонове зображення:

<body background=»адреса картинки«>
Чим менша за розмірами картинка для фонового зображення, тим краще. Якщо не вказати за допомогою CSS’у чогось іншого, картинка буде повторюватися по всій сторінці.

2. Вирівняти картинку

Вирівнюється картинка за допомогою атрибутів align(розташування картинки), width (ширина картинки в пікселях) та height (висота картинки в пікселях).
В атрибуті align ми можемо зазначити один з таких параметрів:
bottom – картинка вирівнюватиметься по нижній межі текстового рядка;
middle – картинку буде встановлено посередині текстового рядка;
top – картинка вирівнюватиметься по верхній межі текстового рядка;
right – картинка вирівнюватиметься зправа тексту;
left – картинка вирівнюватиметься зліва від тексту.
Давайте як приклад візьмемо розташування посередині:

<img src =»адреса картинки» align=»middle» width=»ширина» height=»висота«>

Частина тексту частина текстУ Частина тексту частина текстУ

3. Задаємо картинці інші розміри

Ви можете вказати для атрибутів width та height як справжні розміри картинки в пікселях, так і будь-які інші, потрібні вам. Але краще все ж таки встановлювати потрібні розміри в графічних програмах перед тим, як розміщувати зображення в інтернеті.

4. Зробити з картинки графічне посилання

Усілякі інтернетні кнопочки — то картинки з прикріпленими до них лінками. Ось як має виглядати код для створення графічного лінка:

<a href=»адреса сторінки, на яку вестиме картинка«><img border=»0″ src=»адреса картинки» width=»ширина» height=»висота«>

border=»0″ прописується для того, щоб навколо картинки не було рамки.

Ви можете так захопитися вставкою картинок до HTML-коду, що забудете про трафік, який сильно підвищують різноманітні зображення. Якщо це можливо, зменшуйте вагу картинок до 100-300 Кб, та не розташовуйте на одній сторінці більше десяти картинок.
Я впевнена, що більшість матеріалу з цього уроку вам була відома і без мене. Але для того, щоб вивчити наступну його частину, присвячену графічним мапам, необхідно мати базові поняття про зображення в HTML.

Новий шаблон

Шаблон

Я кщо хтось (чи щось) вас добряче дістав, саме час приміряти цей шаблон. А до шпальти з фото розшукуваного злочинця поставити свого ворога (як це зробити, написано в тестовій замітці шаблона). Не думайте, що Абетка стала такою кровожерною, просто ці тижні вона дуже багато бігала держустановами, які і надихнули її на таке ось «мистецтво».

Якщо вам сподобався цей шаблон, клацніть на малюнку, а потім знайдіть у вузькій шпальті шаблона, що відкриється, кнопочку «Копіюйте мій CSS»