HTML-Таблиці, теорія

Як будувати таблиці в HTML’і – чи не найважливіше, що має знати майбутній веб-дизайнер. Будування сайту без використання табличок – дуже складна задача. Не слід плутати таблиці HTML із звичайними таблицями – в HTML вони в основному використовуються не для занесення даних , а для створення каркасу для сторінки. Без прописаних таблиць ваша інтернет-сторінка скоріше за все, буде виглядати так:

Тицни сюди

Іншими словами,  відвідувач побачить просто набір інформації 🙂 Розглянемо наступну сторінку:

Тицни сюди

З’явилася структура, завдяки якій ресурс має навігаційну панель і більш «професіний» вигляд. Я спеціально навела приклади сторінок з ресурсу Народ.ру, бо їх робили не професіонали, а звичайні люди, яким стало цікаво поекспериментувати з кодуванням  – такі, як ми з вами.

Погляньте на свій власний блог знаючи, що він також має табличну структуру. Спробуйте намалювати  її в уяві (або й на папері).  До речі, не відкладайте папір далеко, бо сьогодні він буде потрібен.

Розглянули блоги? Якщо так, то скоріше за все, вже помітили —  спочатку була саме таблиця. Не тексти, не графічні елементи, не CSS, а таблиця. І вже на неї, як м’язи і шкіра на скелет нарощувалися шапки з назвою та описом блога, меню, місця під банери і рекламу, різноманітні кнопочки і графічні елементи.

А до таблиці?…

До таблиці була ідея. Ідея про те, що саме, яких розмірів і де має знаходитися в блозі. Звичайно, як будь-яка інша ідея, ця спочатку прописувалася на папері, а потім вже втілювалася у життя. Подумайте, що обов’язково має бути на сайті вашої мрії? Я назву декілька елементів:

  1. Мальований заголовок
  2. Логотип
  3. Бокова панель з меню
  4. Текстове поле
  5. Місце для лінків на інші ресурси

 

Це – дуже проста модель, що не враховує безліч інших варіантів – чати, закладинки, календарі і т.д. Якщо у вашій уяві з’явилося більше елементів – просто супер J Запишіть їх.

А тепер – візьмемо аркуш паперу і спробуємо накреслити всі ці елементи у вигляді таблички:

Нумерація згідно с моїм списком елементів вище

Приблизно так буде виглядати сторінка з подібним каркасом. Увага! Сайту що на малюнку, не існує. Тобто, дизайн у нього зовсім не такий 🙂

Тож домашнє завдання:

а) роздивитися якомога більше каркасів у різних веб-сторінок і

б) намалювати каркас для власного проекта — будемо працювати далі 🙂

 

Графічні мапи, практика

Якщо ви виконали домашнє завдання з попереднього уроку, можете починати розраховувати координати графічної мапи для відібраної картинки.

Вигадаємо мапі ім’я

Як будь-який документ, вулиця або місто, графічна мапа потребує власної назви. Уявіть, що на одній сторінці ви розміщуєте декілька мап – браузеру якось потрібно їх розрізняти 🙂

Тож для початку вигадаємо мапі (або мапам) ім’я:

1 мапа: <IMG SRC="адреса малюнка" USEMAP="#назва мапи">
2 мапа: <IMG SRC="адреса малюнка" USEMAP="#назва мапи">

В готовому вигляді цей клаптик коду буде таким:
1 мапа: <IMG SRC="cats.jpg" USEMAP="#cats">
2 мапа: <IMG SRC="dogs.jpg" USEMAP="#dogs">

Тепер можна писати текст замітки, а між текстом в потрібних місцях розташувати потрібні мапи:
 <map name="cats">
[.... тут будуть знаходитися координати, про які розповідатиму далі ....]
</map>
 <map name="dogs">
[...тут будуть знаходитися координати, про які розповідатиму далі...]

</map>

Приділіть особливу увагу тому, що у графічних мап є закриваючі теги: </map> . Не забувайте їх ставити!

 

Знаходимо координати

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

 

Кодуємо

Тепер, коли всі потрібні координати знайдені і занотовані, можна приступати до розміщення їх у коді:

 

<img src="посилання на малюнок, що слугує графічною мапою" usemap="#назва мапи" border="0">
<map name="назва мапи">
<area shape="форма, яку збираєтеся використовувати. Наприклад Polygon" coords="19,44,45,11,87,37,82,76,
49,98" href="
посилання, куди має переводити активна форма"></map>

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

Бажаю вдалих експериментувань!

Графічні мапи, теорія

Пам’ятаєте блог про Хелоуїн, в якому можна було «гуляти» картинками, шукаючи приховані сторінки?

Такі інтерактивні картинки називаються графічними мапами і  зробити їх може кожна людина, що хоч трохи знайома з HTML’ом. Часу це займе більше за редагування та вставляння до замітки простого зображення, але скільки цікавих речей можна втілити в життя за допомогою графічних мап!

Тема графічних мап достатньо довга; тож я розбила її на два уроки. Сьогодні займемося теорією та підготовкою робочого матеріалу. Давайте поміркуємо, де саме нам прийдуть на допомогу графічні мапи?

 

  1. Мапа – вона і є мапа. Якщо вам колись хотілося виставити в блозі мапу власного міста на якій можна було б віднайти, де ви живете; де працюєте; де купуєте найсвіжіший хліб і т.д., це можна зробити за допомогою однієї єдиної інтерактивної картинки.
  2. У вас є спільні фото вашої сім’ї, друзів, співробітників і про кожного з них ви бажаєте написати щось окремо. З такого фото можна зробити графічну мапу – до кожної людини на фото буде прив’язана окрема сторінка.
  3. За допомогою мапи можна створювати чудові графічні меню з прихованими лінками.
  4. Оригінальні листівки на свята.
  5. Міні-ігри.

 

Ці п’ять пунктів – перше, що прийшло в мою голову. Впевнена – приводів використати графічну мапу в інтернет-проекті можна знайти набагато більше.

 

Оберіть зображення

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

 

Координати

Обираючи для публікування картинку, я зазвичай використовую графічний редактор щоб підігнати до потрібних її розміри, кольорову гаму і т. д. Для графічної мапи потрібно знати координати майбутніх активних точок на картинці. Відкрийте картинку в звичайному Пейнті (Windows) поводіть по зображенню мишею, слідкуючи за правим кутом рядка стану (status bar) програми. В ньому будуть змінюватися координати вказівника миші, їх потрібно буде записати, але це потім. Спочатку дізнаємося, якими можуть бути…

Активні точки

Активні точки (місця на картинці, що переводитимуть користувачів на інші сторінки) можуть бути трьох типів:

-RECT – прямокутна форма. Для прямокутної активної точки потрібні 2 різні координати. Координати верхнього правого кута і лівого нижнього кута активного прямокутника.

-Circle – форма кола. Знадобиться координата середини кола та його радіус в пікселях. Пам’ятаєте, що радіус – це половина діаметру? Саме цю форму я найбільше використовувала при створенні блога до Хелоуїну 🙂

 

-POLYGON – довільна форма. Її використовують частіше за все, але і мороки вона приносить найбільше. Уявіть, що на вашій картинці активними мають бути зірки або трикутники. І ви знаходите координати всіх потрібних точок форми трикутника (три координати) чи  п’ятикутної зірки (5 або 10 координат в залежності від деталізації). Чесно кажучи, я б для зірки використала коло а для трикутника – прямокутну форму (звичайно, якщо проект дозволяє).

Будемо вважати, що привід для використання графічної мапи ви знайшли, картинки підготували, всі потрібні координати записали. Тепер настає черга заповнення сторінок, на які переводитиме графічна мапа. Звичайно, чим більше активних точок на мапі, тим більше матеріалу вам потрібно підготувати 🙂 Тож сьогоднішнє домашнє завдання полягає в розробці плану графічної мапи і наповненню сторінок до неї.

Бажаю успіху!

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 свого блога, але весь час плутаєтеся з назвами та місцезнаходженням потрібних селекторів, ці схеми вам стануть у пригоді. Кожен окремий блок блога обведено червоним, а під рискою, що йде з конкретного блока можна побачити назву селектора. який за нього відповідає. Деякі селектори в коді CSS вам можуть не зустрітися. Але якщо ви допишете їх власноруч, працювати будуть.

На першій схемі-скріншоті ви побачите основну сторінку блога; на другому — більшість селекторів будуть належати до відкоментованого змісту (коли на сторінці блога відкривається окрема замітка з коментарями). Змінюючи вказані на схемах селектори, ви будете змінювати зовнішній вигляд того блока, до якого вони належать.

Як користуватися схемами?

1. Наведіть на схему мишею.

2. Клацніть на ній правою кнопкою, та оберіть пункт спливаючого меню «Відкрити зображення». Ви можете просто передивитися схему та запам’ятати, які теги за що відповідатимуть; або скопіювати схеми собі на жорсткий диск.

Урок 9. Лінки -ІІ (практика)

На минулому уроці ми дізналися від Абетки, як правильно писати лінки та ставити якорі в замітках. Сьогодні пропоную трохи в цьому потренуватися 🙂 Спеціально для цього заняття Абеткою було створено два приклади:

1. Приклад застосування якорів в замітці
2. Приклад оформлення лінків за допомогою CSS:

Якщо перший приклад веде до іншого блога, другий ви можете переглянути, навівши мишею на список останніх заміток у вузькій колонці.

За зовнішній вигляд як лінків, так і якорів в цих прикладах відповідає частина CSS’у, що описує їх батьківські елементи (блоки, в яких розташовані лінки). Зовнішній вигляд загальних лінків зазвичай прописується в CSS командами a {} (лінк загалом) та a:hover {} (вигляд лінка з наведеною на нього мишею). Для того, щоб надати унікальний вигляд лінкам якого-небудь окремого блока, додаємо до селектора даного блока часточку a або a:hover:

.BlogEntryContent + a
.BlogEntryContent + a:hover
— якщо хочемо змінити вигляд посилань всередині заміток, додаємо до селектора, що відповідає за контент замітки, a та a:hover і вписуємо до CSS коду блога окремими селекторами.
.CommentedEntryContent + a:hover
.CommentedEntryContent + a
— те саме робимо для селекторів, що відповідають за відкоментований зміст заміток.

Нові селектори мають виглядати так:

.BlogEntryContent a,
.CommentedEntryContent a {background:
фоновий колір посилання;
color: колір тексту посилання;
text-decoration: якщо хочете, щоб посилання не було підкресленим, впишіть none;
font-size: розмір шрифта у пікселях;
font-weight: товщина шрифта;
font-family: назва шрифта;
line-height: відстань між рядками у пікселях або процентах; } — якщо селекторам потрібно надати однаковий стиль, запишіть перед дужками з кодом через кому.

.BlogEntryContent a:hover,
.CommentedEntryContent a:hover {background:
фоновий колір посилання, що має змінитися при наведенні миші;
color: колір тексту, що має змінитися при наведенні миші;} — до селекторів з a:hover додаємо відомості тільки про ті елементи, що мають змінитися при наведенні миші.

Для зміни зовнішнього вигляду посилань для останніх заміток блога така формула:

#BlogTitlesLastEntries + a {}
#BlogTitlesLastEntries + a:hover {}

На прикладі блога CSS ми бачимо, що до #BlogTitlesLastEntries a:hover крім кольорової схеми була додана властивість border.

Абетку досить часто запитують, як змінити лінк, який поділяє замітку на основну частину та вступ. За цей лінк відповіда.ть ось ці селектори:

.InfoUnderEntryMore, .InfoUnderEntryMore а,
.InfoUnderEntryMore a:hover

Експериментуйте 🙂

Домашнє завдання: Пізніше всі ці навички вам стануть у пригоді при створенні власного сайту, а зараз ви маєте можливість добре поекспериментувати із зовнішнім виглядом ваших блогів 🙂 До речі, якщо ви вважаєте, що ми завершили з темою лінків, ви помиляєтесь — ми повернемося до них пізніше, під час вивчення графічних елементів в HTML та графічних мап HTML.

Від себе додам, що з наступного уроку ви дізнаєтеся  про всі основні правила додавання картинок в HTML, а також — яким чином робляться графічні мапи. За допомогою графічних мап можна робити справжні казкові речі. Зайдіть наприклад, на сайт Джоан Роулінг. Можливо, що за цим посиланням треба буде натиснути на «re-enter site». Ви побачите не звичайний проект з шапкою, текстовою частиною і меню; а побачите нанедбаний робочий стіл (я так розумію, самої Джоан). Клацаючи мишею по предметах ви будете переходити на інші сторінки сайту, або щось змінюватиметься на головній сторінці. Звичайно, в цьому випадку задіяно складне програмування, але зробити переходи на різні сторінки свого власного сайту з однієї картинки ви зможете 🙂

Урок 9. Лінки — 1

Гіперлінки та Якорі

Гіперлінк — це «адреса» документу чи будь-якого ресурсу в мережі інтернет. Гіперлінком можна позначити будь-який веб-ресурс: сторінку HTML, зображення, медіа-файл і так далі.

Інтернетівський Якір не слід плутати з якорем рибалки, хоча заякорити він і може. Але не човник, а якусь конкретну документа. Якір — це гіперлінк, що використовується всередині документа, переводячи користувача з однієї його частини до іншої. Гарний приклад якоря — залінкований зміст книги, що була опублікована єдиним документом.

HTML-елемент Якір <a> використовуєтья для означення не тільки якорів, але й гіперлінків. Тому надалі я буду називати елемент <a> коли він переводитиме кліком на іншу частину одного й того ж самого документу якорем, а коли переводитиме на інший HTML-документ, лінком.

Правила написання лінка:

<a href=»інтернет-адреса»>Текст лінка</a>

Стартовий тег a містить в собі атрибут href, який робить зі звичайного якоря гіперлінк. 
Між відкриваючим та закриваючим тегами знаходиться текст, який будуть читати в браузері (і клікати по ньому) відвідувачі вашої сторінки. Майте на увазі, що зміст між тегами не обов’язково має бути текстом. Завжди можна залінкувати картинку 🙂

Пам’ятаєте, як додаються атрибути? До тега a після атрибута href можна додати атрибут target, який пояснює браузеру, в якому вікні відкривати лінк. За замовчуванням гіперлінк відкривається в тому ж самому вікні браузера. Додайте до тега target значення _blanktarget=»_blank»; і гіперлінк відкриється в новій вкладці:

<a href=»http://www.Blox.ua/» target=»_blank»>Створи блог!</a>

Якщо ми хочемо пролінкувати між собою частини однієї й тієї ж самої замітки, слід використовувати атрибут name.

Як зробити якір:

<a name=»comment»>Коментарі</a> (позначаємо заголовок тієї частини тексту, до якої хочемо перейти за допомогою лінка, в лапках a name знаходиться назва якоря)

Лінк до якоря з того ж самого документа:

<a href=»#comment»>Перейти до коментарів</a>

Позначка «#comment» вказує браузеру, що цей лінк веде до якоря з назвою comment.

Лінк до заякорених коментарів з іншої інтернет-сторінки:

<a href=»Інтернет-адреса сторінки#comment»>Перейти до коментарів</a>

Слід пам’ятати, що не можна різним якорям давати однакові назви. Якщо подтрібно зробити переходи на декілька фрагментів тексту з коментарями, відмічайте їх як comment1 і comment2.

Якщо браузер не зможе знайти якоря на який посилається лінк, він перешле користувача догори документа.

Прописуючи адреси лінків, не забувайте ставити слеші наприкінці: html/. Кожен лінк без кінцевого слеша генерує подвійний запит на сервері (в таких випадках сервер спочатку обробляє запит, самостійно ставить слеш і знов обробляє запит).

Сьогодні домашнього завдання не буде, а у вівторок ви знов зустрінетеся з Алісою, що пояснюватиме, як за допомогою CSS стилізувати всі ваші лінки 🙂

Урок 8. Атрибути — ІI (практика)

Привіт! Хочу запропонувати трохи попрактикуватися сьогодні з вбудованим до HTML-коду CSS. Як ви маєте пам’ятати з попереднього уроку, вбудовувати CSS ми будемо за допомогою атрибута style.
Можливо, у вас не один блог, а декілька, і ви вирішили пролінкувати блоги один в одному. А може, існує який-небудь інший інтернет-ресурс, до якого ви б хотіли ненав’язливо привернути увагу відвідувачів свого блога. Є декілька шляхів вирішення цього питання:

1. Дати лінк з поясненнями куди він ведев, в замітці.

Переваги і недоліки:
Для того, щоб так зробити, вам зовсім не треба знати HTML’у чи CSS’у. Ви можете детально написати про ресурс в замітці; пояснити відвідувачам, в яких випадках було б корисно відвідати рекомендований ресурс. Але згодом ви будете писати ще і ще, доки замітка з лінком не загубиться під стрічкою нової писанини.

2. Додати лінк до закладинок.

Переваги і недоліки:
Лінк завжди буде знаходитися на головній сторінці блога, але він не буде надто помітним для користувачів.

3. Додати оформлений лінк до HTML-поля блога

Переваги і недоліки:
Для того, щом оформити лінк, потрібно мати гарний смак і хоч трошечки бути знайомим з HTML. Звісно, можна скористатися якою-небудь програмою для створення блока з лінком, але іноді такі програми можуть виявитися недоступними. Якось Абетка додавала лінк з інтернет-кафе в чужому місті. Вона не тільки не мала змоги використати редактор для веб-сторінок, але й графічний банер для посилання розробити. Тож треба було викручуватися виключно HTML’ом. Давайте спробуємо і ми розробити яке-небудь посилання. Таке, наприклад:

Якщо ви вагаєтеся з вибором дизайну, гарним рішенням буде використати основні кольори ресурсу, на який веде лінк.

1. Пригадайте, як ми лінкували сторінки свого сайту в 6 уроці. Таким само чином робимо лінк на потрібний нам ресурс:

<a href=»адреса потрібної тобі сторінки»>текст, який буде слугувати посиланням</a>

2. Тепер робимо лінк помітним за допомогою атрибута style. Style прописується одразу за посиланням; всередині відкриваючого тега a:

<a href=»адреса потрібної тобі сторінки» style=»font-size:розмір шрифта у пікселях; font-family:назва шрифта; line-height:відстань між рядками тексту в пікселях; color:колір тексту»>текст, який буде слугувати посиланням</a>

В цьому прикладі було використано такі властивості CSS:

font-size, font-family, line-height і color.
Докладніше про них ви можете дізнатися з минулих уроків, присвячених редагуванню CSS блога. Ви можете використати будь-які інші властивості CSS для зміни стилю текста посилання; наведеним прикладом можливості таблиць стилів не обмежуються.
Отже, ми змінили вигляд самого лінка. А яким чином я зробила окреме кольорове віконечко для нього?

3. Придивіться до схеми:

Як можна з неї побачити, структура кожного сайта — блочна. В блоці вузької шпальти розміщено блоки календаря, закладинок. останніх заміток та HTML-поля блога. За кожен блок блога відповідає окрема частина загального файла CSS. Тож якщо ми хочемо, щоб наше посилання відрізнялося від загальної таблиці стилів, ми маємо створити для нього окремий блок.

4. Зробити блочний елемент можна за допомогою тега div, який слугує виділенню частини документа в окремий блок. Привласнюємо нашому блоку атрибут style:

<div style=»text-align:потрібне вирівнювання текста; width:ширина блока в пікселях; background:фоновий колір;  border:рамка»></div>

В цьому прикладі було використано такі властивості CSS:

text-align, width, background, border

Як і у випадку з посиланням, це далеко не всі можливості оформлення блока. Докладніше про це ви можете дізнатися з минулих уроків, присвячених редагуванню CSS блога.

5. Тепер всередину блока, який у нас вийшов, додаємо посилання:

<div style=»text-align:потрібне вирівнювання текста; width:ширина блока в пікселях; background:фоновий колір;  border:рамка»><a href=»адреса потрібної тобі сторінки» style=»font-size:розмір шрифта у пікселях; font-family:назва шрифта; line-height:відстань між рядками тексту; color:колір тексту»>текст, який буде слугувати посиланням</a></div>

І банер готовий!

На всяк випадок надаю повний працюючий код прикладу:

<div style=»text-align:center; width:240px; background:#269DDE; border:5px #FF7800 double»><a href=»http://wiki.blox.ua/html» style=»font-size:18px; font-family:Impact; line-height:30px; color:white»>Хочеш стати блогером-профі? Відкрий для себе енциклопедію блоґґінга</a></div> 

Опанувавши цей урок, ви зможете оформлювати за власним смаком будь-який віджет, який забажаєте вставити до блога. Але пам’ятайте, що тегом div слід користуватися тільки в тих випадках, коли досягти потрібного візуального відображення елемента за допомогою загальної таблиці стилів CSS складно чи неможливо.

Домашнє завдання: Робимо посилання на потрібний вам ресурс і встановлюємо його до вузької шпальти блога. При цьому можна не обмежуватися наданими в прикладі властивостями CSS 🙂