Блоґ одного кібера

Історія хвороби контуженого інформаційним вибухом

Елементи оформлення

leave a comment »

попередній розділ
Зміст
Наступний розділ

Підведемо риску

Інколи ви щось пишете, пишете, і раптом відчуваєте що потрібно підвести риску.


Робиться це просто як новий рядок: <hr /> (horisontal ruler). Взагалі то в цього тегу є атрибути які настроюють зовнішній вигляд, але їх використання в нових стандартах небажане. Дозволені тільки загальні атрибути, такі як id, class, style і атрибути подій, але це теми наступного розділу.

Картинки

До цього моменту ми прочитали дуже багато тексту про текст. Звісно – текст найважливіша частина будь-якої сторінки (якщо звісно це не сторінка якої небудь галереї), але суцільний текст штука доволі нудна. Ілюстрований текст виглядає набагато краще. Щоб вставити в текст зображення використовують тег <img>. Його атрибут src, задає джерело (source) – файл в якому міститься картинка. Цей тег одинарний, що означає, що коли ми пишемо код який відповідає найновішим стандартам, його потрібно закінчувати так: />.

Інколи картинки не відображаються. Це відбувається з різних причин. Тим не менш, потрібно щоб користувач і в таких випадках знав, що ви хотіли йому показати. Для цього картинки мають атрибут alt. Він задає текст, який буде відображатись на місці картинки, в тих випадках, коли сама картинка недоступна.

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

Також ми можемо змінити розміри картинки. Наприклад, якщо ми маємо маленьке зображення, ми можемо його розтягнути. Щоправда тоді воно буде відображатись дещо розмито. Також можна змінювати розміри зображення разом зі зміною розмірів вікна браузера. Для цього розміри вказують у відсотках. Розміри задаються атрибутами width і height. Приклад:

<html>
<head><title>Картинки</title></head>
	<body>
		<img src="image.jpg" alt="Маленька картинка" title="Маленька картинка" width="100" height="100"/><br />
		<img src="image.jpg" alt="Велика картинка" title="Велика картинка" width="400" height="400"/><br />
		<img src="image.jpg" alt="Широка картинка" title="Широка картинка" width="100%" height="400"/><br />
	</body>
</html>

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

Карти

Зображення можна поділити на області різної форми, кожна з яких може посилатися в інше місце. Для цього за допомогою тегу <map> задають карту. Атрибут id, який ідентифікує карту, і використовується для зв’язку з картинкою. Щоб картинці призначити карту, потрібно в атрибуті usemap картинки написати ідентифікатор карти, яку використовує картинка. Всередині тегу карти містяться теги областей, які задаються тегами <area>. Знову ж таки, цей тег одинарний, і хоче щоб його правильно закривали. Атрибут href, задає адресу посилання, атрибут nohref, якщо призначити йому значення true, виключає зону з карти. Атрибут shape задає форму області: rect – прямокутна, circle – круг, і poly для многокутника.

<img src="planets.gif" width="145" height="126" usemap="#planetmap">

<map id="planetmap" name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

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

Форму задають за допомогою атрибуту coords, який містить чотири координати (ліво, верх, право, низ) для прямокутника, три (координати центра і радіус) для кола, і парну кількість для многокутника (координати кожної вершини). Координати можна дізнатись морем способів. Можна в пеінті подивитись. А якщо форма складна, точок багато, то можна і спеціальну програму використати. Щось подібне до X-Map. Хоча, якщо чесно, ні цією програмою, ні картами, я не користувався. Але якщо таке є, то треба давати можливість людям знати. Інакше книжка якась не солідна буде.

Наступний розділ
Зміст
попередній розділ

Advertisements

Written by bunyk

Січень 30, 2009 at 17:32

Оприлюднено в Кодерство, Павутина, Розмітка

Tagged with

Залишити відповідь

Заповніть поля нижче або авторизуйтесь клікнувши по іконці

Лого WordPress.com

Ви коментуєте, використовуючи свій обліковий запис WordPress.com. Log Out / Змінити )

Twitter picture

Ви коментуєте, використовуючи свій обліковий запис Twitter. Log Out / Змінити )

Facebook photo

Ви коментуєте, використовуючи свій обліковий запис Facebook. Log Out / Змінити )

Google+ photo

Ви коментуєте, використовуючи свій обліковий запис Google+. Log Out / Змінити )

З’єднання з %s

%d блогерам подобається це: