HTML and CSS: березня 2015

неділя, 29 березня 2015 р.

Картинки в HTML

Картинки вставляються тегом <img src = "/ шлях до картинки / назва картинки. Розширення картинки">.

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

Код, використаний у зображенні:

<a href="куда переходимо при нажатті">

Тобто картинка - не що інше, як звичайна посилання, в яку вставляється код з адресою та параметрами картинки:

Всі задіяні в коді теги вам вже без сумніву зустрічалися в попередніх розділах, за винятком хіба що hspace і vspace - ці два тега теж не є обов'язковими, але при їх наявності навколо картинки утворюється відступ у відповідну кількість пікселів від тексту. Погодьтеся, це набагато простіше, ніж вимучувати ці прогалини за допомогою таблиць, прогалин і верств або ж взагалі ліпити текст впритул до картинки ... Навколо картинки за допомогою border = "1" можна спорудити елегантну рамочку, а при необхідності (якщо дуже лінь або по стратегічним задумам) змінити розміри відображення картинки за допомогою все тих же width і height - якщо вказати в них менші розміри, ніж реально у картинки, можна вписати її в будь практично дизайн.

Навіщо це потрібно? Чому б не обрізати картинку графічним редактором - що набагато більш практично ?!

Розглянемо мінуси заниження розмірів картинки за допомогою HTML:

- Картинка зберігає свої реальні розміри і, відповідно, вага - навіть якщо ви зробите огромадное картинку в мег вагою, розмірами з поштову марку, грузиться вона буде всіма своїми мегамі.

- Картинка втратить багато деталей, що в деяких випадках перетворює її в щось незрозуміле.

тепер плюси заниження розмірів:

- Картинку можна вписати в дизайн, пожертвувавши парою сантиметрів, а при копіюванні її на гвинт вона збереже свої розміри.

Це потрібно в рідкісних випадках, коли ви вивішуєте картинку розмірами більшими, ніж роздільна здатність монітора відвідувача. І картинку в дизайн впишемо і збережеться вона на все 2040 на скільки там належить.

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

Береться зображення:

Натиснувши на ліву половинку, переходимо на Google.ru, натиснувши на праву - переходимо на мій сайт.

Як це реалізовано?

Читаємо код:

перша частина включається в тег картинки:

<Img src = "наша картинка.jpg" usemap = "# Map">

далі, де-небудь внизу, або на самому початку сторінки, але в межах тега <body> додаємо власне "карту посилань", як називається ця технологія:

<Map name = "Map">

<Area shape = "rect" coords = "2,2,60,74" href = "посилання на Google.ru">

<Area shape = "rect" coords = "61,4,112,76" href = "посилання на мій сайт">

</ Map>

Примітка: жирним виділено те, що повинно бути присутнім обов'язково, звичайним текстом - змінні параметри.

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

Як задаються координати? Координати задаються відраховуючи від лівого верхнього кута картинки по пикселу в напрямку лівого верхнього кута і правого нижнього кута. У нашому випадку, у першій картинки відступ 2 пікселя зліва і зверху у 1 контрольної точки, а правий нижній кут, відповідно, відстоїть від лівого верхнього кута картинки на 60 зліва і 74 пікселя зверху. Алгоритм зрозумілий? Для тих, хто не допер, повторюся: координати лівого верхнього кута задається області щодо лівого верхнього кута картинки + координати правого нижнього кута області щодо все того ж верхнього лівого кута картинки. (Здорово! Навіть я зрозумів!) Звичайно, вручну це все вираховувати довго і клопітно. Набагато простіше скористатися однією зі спеціальних програм, що автоматизують всі рутинні процедури. Ось наприклад, в DreamWeaver MX є така функція у вигляді простого "розтягування" області над картинкою і призначення їй посилання. Ніяких цифр при цьому вводити не потрібно - програма вважає все сама. Від вас вимагається лише РОЗУМІТИ що діється в коді і вміти розпізнати цю фічу в коді інших сторінок, якщо коли-небудь вам буде потрібно розібратися в пристрої інших сайтів.

Координатні карти можуть бути не обов'язково квадратними - можна задати область-коло або довільну область зі складним зламаним контуром.

Розглянемо роботу з окружністю:

Повозивши курсором над цією картинкою, ви можете побачити, що область всередині лупи, крізь яку дивиться око веде на один сайт, а вся інша (за рідкісними "просвітами") - веде на інший сайт.

У першому випадку зона задана колом, у другому - многоугольником. Дивимося код:

<Img src = "наша картінка.jpg" usemap = "# Map2"> - рядок тега картинки змінюється тільки в імені карти координат. Вважаю, вже все додумалися, що однакові імена елементів в межах однієї сторінки неприпустимі. Це стосується, до речі кажучи, і якорів.

А ось у винесених окремо координатних тегах у нас зміни помітніші:

<Map name = "Map2">

<Area shape = "circle" coords = "84,28,26" href = "http://google.ru/">

<Area shape = "poly" coords = "65,3,51,41,78,58,109,48,110,71,7,75,4,6,34,5" href = "http://srez.ru/" >

</ Map>

Перша строка, як ви вже напевно здогадалися, не що інше, як той самий коло (в тезі area shape зазначено "circle", що по-англійськи буде "окружність"). Координати у неї вираховуються за методом визначення центру кола - це перші дві цифри, а третя цифра - це радіус нашої окружності. Саме радіус, а не діаметр! (Для тих, хто в танку пояснюю - радіус, це відстань від центру кола до її краю. Центр в свою чергу - це та точка, яка рівновіддалена від будь-якої точки на краю кола)

Другий рядок коду - це наша багатокутна область, заповнює більшу частину вільного простору навколо кола. У тезі area shape у неї значиться "poly", що означає багатокутник. Координати тут обчислюються парами цифр (відстань від лівого і відстань від верхнього країв). Кожній точці відповідають дві координати. Точок може бути скільки-завгодно велика безліч, але зловживати не варто - "зрубують" кути, спрощуйте систему - немає чого нагромаджувати жуткоплавние вигини тільки для краси. Повірте, приблизною розмітки на швидку руку тут цілком вистачить. Як тільки точок стає більше трьох, наш потенційний багатокутник стає трикутником. Посилання, йому призначена, буде спрацьовувати між точками. Якщо додати ще одну точку (четверту), але розставити їх так, щоб ці самі точки як би перетинали власні з'єднувальний лінії, то фігура може перетворитися на подобу двох трикутників, зрощених кутами:

На цьому про картинки поки що все:)

понеділок, 16 березня 2015 р.

Таблиці в HTML

Таблиці в HTML є одним з найнеобхідніших елементів і самими універсальними засобами форматування картинок і тексту. Є, звичайно, і альтернативні способи, такі як шари наприклад, але це громіздко, тяжко і незручно ... Справа в тому, що всяка бродилка бачить шари по своєму, і для більш менш пристойного відображення шарів необхідно писати довгий і нудний скрипт, да і той не панацея ... У той час, як таблиці, хоч у деяких нюансах нерідко і розходяться, але розбіжність-то мінімально.
Отже, код найпростішої таблиці 2х2 осередки:
<Table width = "200" border = "1" cellspacing = "0" cellpadding = "0">
початок таблиці містить:
width - ширина (у нас 200 піхелей),
border - товщина облямівки / бордюру нашої таблиці (у нас 1 піхель)
cellspasing - відстань між осередками,
cellspadding - відступ від кордонів осередку всередині неї.
решті код:
<Tr>
<Td> 1 </ td>
<Td> 2 </ td>
</ Tr>
<Tr>
<Td> 3 </ td>
<Td> 4 </ td>
</ Tr>
</ Table>

додавши в код сегмент:
<Tr>
<Td> 3 </ td>
<Td> 4 </ td>
</ Tr>
ми отримаємо третій рядок з двома стовпчиками.
<Table width = "200" border = "1" cellpadding = "0" cellspacing = "0">
<Tr>
<Td rowspan = "2"> 1 </ td>
<Td> 2 </ td>
</ Tr>
<Tr>
<Td> 3 </ td>
</ Tr>
<Tr align = "center">
<Td> 4 </ td>
<Td> 5 </ td>
</ Tr>
</ Table>
виділення жирним в коді відповідає зафарбовані сірим кольором у таблиці.
всі відміну такого побудови таблиць залючается в появі параметра rowspan = "2"
цифра в якому відповідає кількості "подстрок", тобто буквально те, скільки рядків злилося в цьому осередку:

<Table width = "200" border = "1" cellpadding = "0" cellspacing = "0">
<Tr>
<Td> 1 </ td>
<Td rowspan = "2"> 3 </ td>
</ Tr>
<Tr>
<Td> 2 </ td>
<Tr align = "center">
<Td> 4 </ td>
<Td> 5 </ td>
</ Tr>
</ Table>
Якщо в симетричною таблиці ми читаємо зліва-направо, то тут відбувається те ж саме, тільки чому ж у коді попереду 2-ки коштує осередок з цифрою 3? Все дуже просто - буквально код розшифровується, як "осередок 1", "осередок 3, що складається з ДВОХ подстрок", осередок 2, другий рядки. Але фізично осередок 3 належить до ПЕРШОЇ рядку! Адже HTML читається саме через підрядник - зліва-направо; 0)
А що буде, якщо поставити після 3-ки ще таку ж комірку? 3b наприклад?
3 січня 3b
2
4 Травня
<Table width = "200" border = "1" cellpadding = "0" cellspacing = "0">
<Tr>
<Td> 1 </ td>
<Td rowspan = "2"> 3 </ td>
<Td rowspan = "2"> 3b </ td>
</ Tr>
<Tr>
<Td> 2 </ td>
<Tr align = "center">
<Td> 4 </ td>
<Td> 5 </ td>
</ Tr>
</ Table>
Так, так - в тій комірці теж досить прописати rowspan = "2".
А що, якщо в правій колонці нам треба три осередки?
3 січня 3b
2 3c
3d
<Table width = "200" border = "1" cellpadding = "0" cellspacing = "0">
<Tr>
<Td> 1 </ td>
<Td rowspan = "3"> 3 </ td>
<Td> 3b </ td>
</ Tr>
<Tr>
<Td rowspan = "2"> 2 </ td>
<Td> 3c </ td>
</ Tr>
<Tr>
<Td> 3d </ td>
</ Tr>
</ Table>

Читаємо код: Осередок 1 (звичайна)> осередок 3 (складається з трьох злитих воєдино рядків)> осередок 3b (теж звичайна); тут у нас починається другий рядок. Починається вона з осередку №2, що позначається як "осередок, що складається з двох рядків, тобто злитих по вертикалі осередків", а осередки 3с і 3d - абсолютно звичайні комірки. Для упрочщенія розуміння рядки в таблиці на прикладі позначені різними тонами, тобто кожен тон відповідає рядку. Це трохи складно усвідомити з наскоку, але це досить важливо - розуміти черговість зчитування та принцип побудови, так що напружтеся і постарайтеся: 0) Від глибини розуміння процесу залежатиме вміння користуватися всіма перевагами таблиць, а не 10-15% якими користується більшість.
Якщо ж у нас є в наявності яейкі, суміщені по горизонталі, то замість тега rowspan використовується тег colspan, естетсвенно, в тій комірці, яка займає площу декількох.):
1
2 Березня
Так само слід окремо запам'ятати, що параметри, що вставляються в тег відкриття рядки (<tr>) IE не сприймаються !!! Ось, не хоче він їх бачити і враховувати і все тут! Некотрие бачить, а деякі - ні в яку. Тому призначати теги будемо тільки самим осередкам або всієї таблиці відразу.
Розглянемо, як задаються розміри таблиць:
Ми можемо задати ширину всієї таблиці в цілому єдиної цифрою. Це може бути, як 100% (тобто від краю до краю доступного простору), так і чітка ширина в пікселях (на прикладі - 200):
У коді це пишеться так:
<Table width = "200" border = "1" cellpadding = "0" cellspacing = "0"> Або так:
<Table width = "100%" border = "1" cellpadding = "0" cellspacing = "0">
За замовчуванням * (тобто якщо у значенні ширини після цифри не йде знак відсотка (%)), число, вказане в лапках, буде розцінюватися як пікселі. Головна відмінність в тому, що якщо розмір вказаний жорстко, у точках, то при звуженні вікна таблиця "упреться" краями в тег, в який вона вкладена і не дасть йому "звузитися", якщо той має ширину, задану відносно, тобто у відсотках від доступної ширини. Для більшої наочності розгляньте цей приклад.
ширину ми задаємо, вставляючи в тег початку таблиці параметр
width = "число ширини (можна у відсотках)"
так само можна задати і вертикальний розмір -
height = "число ширини (тільки в пікселях!)"
Майте на увазі, що звужує таблиця розтягується по вертикалі. І цим треба користуватися. НЕ потрібно намагатися підігнати текст під жорстко-фіксовану таблицю - це ламерізм. У таблиці є кілька видів вирівнювання вмісту щодо країв таблиць:
align = "left" align = "middle" align = "right"
valign = "top" valign = "middle"
align = "center" valign = "bottom"
align = "right"
в кожному осередку зазначений тип застосованого в ній вирівнювання, але крім них існує ще й параметр justify. Це вирівнювання по ширині з обох країв. На більшості сторінок причому, що дивно, навіть на тих, які роблять здавалося б професійні команди, присутній такий ламерізм як відсутність вирівнювання по правому краю:
... В кожній комірці вказано тип застосованого в ній вирівнювання, але крім них існує ще й параметр justify.
Це вирівнювання по ширині з обох країв. На більшості сторінок причому, що дивно, навіть на тих, які роблять здавалося б професійні команди, присутній такий ламерізм як відсутність вирівнювання по правому краю:
зверніть увагу на правий край - нерівно, неохайно, некрасиво ... і читати противно якщо це вибудувано парою-трійкою стовпців, як у багатьох інтернет "газет" і "журналів". Здавалося б - ну і подумаєш?!. проте швидкість і простота сприйняття реально вище, коли око перескакує на початок наступного рядка з завжди однакового місця, ніж коли рядки закінчуються +/- 1 см від краю. Особливо це стосується великих і довгих текстів.
Саме тому я всім раджу не забувати про цей важливий і потрібний тег. Адже і сторінка стане куди красивіше, вишикувавшись рівними стовпчиками, а не чимось на манер втратила половину зубців гребінця: 0)
тож .. теги вирівнювання. Як правильно їх прописувати і з чим вони пов'язані? Згадуємо принцип успадкування * тегів, про який йшла мова у "введенні".
Призначаючи будь-якої частини або всієї таблиці бажане властивість, слід уявляти, як воно вплине на розташовану в таблиці інформацію:
вирівнювання про лівому краю
без параметрів

тег вирівнювання <centre> </ centre>, застосований на цю клітинку, на вкладену таблицю жодним чином не впливає - тільки на текст.

всередині осередку застосований
параметр "вирівнювання
справа ", але йому
протистоїть тег
рівняння по середині -
як бачимо тег
вирівнювання по центру
отримує пріоритетне
вплив, як би "забиваючи"
старший тег.
в цей же час тег рівняння на центр абсолютно не впливає на вирівнювання всередині таблиці іншої таблиці або картинки - тег <centre> </ centre> впливає тільки на текст.

застосований тег вирівнювання по Левме краю, як в комірці, так і у вигляді стандартного <centre>
на початок таблиці вставлений тег вирівнювання по правому краю.
а текст, як бачите, може і обтікати таблицю з країв, і прилягати до того краю, за яким вирівнюються.
Примітка: вікно при перегляді вищенаведеного прикладу має бути відчинене ширше - інакше вирівнювання можна не помітити (якщо вкладені таблиці упрутся в краю основної таблиці).
За допомогою таблиць можна здійснити самий хитромудрий дизайн, розташувати вміст практично як завгодно .. Ось приклад типової організації сайту:
логотип і банер
меню
конкретно у мого сайту структура трохи складніше:
меню
1

банер
менюшка 2
вміст
менюшка 2
банер
меню
3

Основна таблиця з двома вертикальними роздільниками, в ній вкладено ще кілька таблиць, на малюнку вони виділенням чорною облямівкою. Вдивіться в структуру в цілому - вона поділена на вертикальні області, в яких "плавають" таблиці блоків - лівій частині, центральної частини та правій частині сторінки.
Навіщо такі складнощі? Дуже просто - якщо зробити структуру у вигляді:
лого-тип?
банер текст текст текст текст текст текст текст
меню? вміст
Як бачимо з прикладу, єдиної таблицею наш дизайн не вийде - адже "распирающий" одну з комірок текст спотворить весь дизайн: 0 (
Ось саме тому і потрібно користуватися вкладеними в одну велику таблицю декількома таблицями-блоками. Крім того, це відкриває додаткові можливості по розмітці всього цього господарства.
Наприклад у нас є кут таблиці з менюшка. Від краю треба відступити ендцать міліметрів, щоб букви не торкалися краю екрана. Як це зробити? Способів є багато.
Наприклад, ставимо в комірці головної таблиці вирівнювання по правому краю, а в таблиці, яку туди вкладаємо, ставимо вирівнювання по лівому. Ось що у нас виходить:

логотип
1 пункт
2 пункт
3 пункт
4 пункт
5 пункт
Ширина лівої колонки - 130 піхелей, ширина вкладеної таблиці - 110.
В результаті маніпуляцій з вирівнюванням маємо відступ від лівого краю 20 піхелей (різницю в ширині стовпчика і вкладеної таблиці)
Регулюємо ширину вкладеної таблиці. Чим вона ширше, тим її лівий край і, ессно, текст в ній, ближче до краю екрана.

пункт 1
пункт 2
пункт 3
пункт 4
пункт 5
А можна зробити і такий ефект - теж виглядає цілком пристойно.
Але (більш правильно!) Щоб покращити сприйняття тексту, насамперед раджу скористатися в основній таблиці відступом від країв (тег cellpadding), завдяки чому у вас залишаться елегантні поля. Щоб таблиця не псувала виду своєї рамкою, раджу основну таблицю робити "невидимої" за допомогою тега border (призначте "бордер = нуль" і рамки таблиці буде не видно). Також не забувайте користуватися тегом "justify", який, щоб не пхати його в текст безпосередньо, можна вписати в конкретний осередок - <td align = "justify"> <td>.
Як бачимо - таблиці дозволяють зробити практично будь-який ефект, крім накладення - в цьому у шарів велику перевагу, але про них пізніше ... Власне, про таблиці на цьому не закінчується, просто інші області ставляться скоріше до маніпуляцій стилями і шарами.
Але наостанок уточнимо всі параметри, якими можна маніпулювати в таблицях:

вирівнювання: width і height - пишуться послідовно або поодиноко. Транскрипція приблизно <td width = "число" height = "число"> </ td>
Параметри задаються цілим числом, або ж цілим числом з%, тобто = "100%" - вирівняти по ширині від стінки до стінки.



<Table width = "100" border = "0" height = "100" cellspacing = "4" cellpadding = "0" bgcolor = "# 999999">
<Tr bgcolor = "# CCCCCC">
<Td> & nbsp; </ td>
<Td> & nbsp; </ td>
<Td> & nbsp; </ td>
</ Tr>
<Tr bgcolor = "# CCCCCC">
<Td> & nbsp; </ td>
<Td> & nbsp; </ td>
<Td> & nbsp; </ td>
</ Tr>
<Tr bgcolor = "# CCCCCC">
<Td> & nbsp; </ td>
<Td> & nbsp; </ td>
<Td> & nbsp; </ td>
</ Tr>
</ Table>

або ось так:



<Table width = "100" border = "0" height = "100" cellspacing = "4" cellpadding = "0" bgcolor = "# 999999">
<Tr bgcolor = "# CCCCCC">
<Td> & nbsp; </ td>
<Td> & nbsp; </ td>
<Td> & nbsp; </ td>
</ Tr>
<Tr bgcolor = "# CCCCCC">
<Td> & nbsp; </ td>
<Td> & nbsp; </ td>
<Td> & nbsp; </ td>
</ Tr>
<Tr bgcolor = "# CCCCCC">
<Td> & nbsp; </ td>
<Td> & nbsp; </ td>
<Td> & nbsp; </ td>
</ Tr>
</ Table>

цікаво, да? Тепер уточнимо значення використаних тегів:
bgcolor = "код з шести цифр виду # 000000" - задає фон комірці, або таблиці - залежно, куди вставлений цей параметр.
bordercolor = "# FFFFFF" - колір бордюру (рамки)
Ну і про маніпуляції з cellspacing і cellpadding не забуваємо: 0) поваріюруйте їх розміри.
Такий спосіб куди простіший, ніж підставляння картинок - адже всяко меншу кількість коду HTML, ніж у найменшій картинці. Правда є один нюанс - все раз завантажені з сайту картинки кешируются у вас в комп'ютері і якщо, наприклад, таких картинок-куточків у вас добрий десяток, це не означає, що одна і та ж картинка буде грузиться десять разів. Навпаки, вона завантажиться одного разу і розставити по всіх потрібних місцях. З таблицею це реалізувати куди складніше, особливо, якщо ваш хостинг не має ні SSI ні PHP. Так що взагалі-то в більшості випадків простіше все-таки користуватися картинками зі сторонами піскселов по 5-10.
Так, ще дрібна, але корисна фіча - наприклад, нам потрібно вписати текст одним рядком, і щоб таблиця підлаштувалася під ширину цієї самої рядка. Але найчастіше, якщо у таблиці не визначений розмір або визначений свідомо менший, ніж у вашій рядки, цю саму рядок бродилка перенесе в другу. Щоб не дозволити такого перенесення, потрібно в тег комірки вставити слово nowrap. Ніяких параметрів йому прописувати не потрібно, просто виділити з обох боків пропусками. Рядок в такій комірці буде завжди пряма. Пам'ятайте тільки, що вона буде "розпирати" дизайн при спробі стиснути вікно до більш вузьких розмірів. Раджу перевірити, як це буде виглядати і пам'ятати про цей нюанс.

вівторок, 10 березня 2015 р.

Колір

Хочу розпочати свою розповідь з того який тег відповідає за колір тексту.

Тег, що задає колір:

color = "# FF0000"

приклад: <font face = "Comic Sans MS" size = "1" color = "# FF0000"> текст </ font>)

Принцип позначення кольору.

колір можна задати двома способами:

a) цифрами, що буде більш точно за відтінками.

б) англійським словом.

Спосіб А. Ставимо #, після чого пишемо цифри.

перші дві цифри - це насиченість червоним,
другі дві цифри - це насиченість зеленим,
треті дві цифри - це насиченість синім кольором.

Чому саме три параметри? Тому що це не що інше, як спосіб отримання кольори в телевізорі - RGB (Red Green Blue). Адже зображення в звичайному ЕЛТ моніторі формується за принципом висвічування трьох точок заданих кольорів: чим яскравіше точка, тим більше цього кольору в нашому "пікселі" (піксель - "точка"). Цифри задавати по 16-річної системі, тобто немає від 0 до 10, а від 0 до FF.

0,1,2,3,4,5,6,7,8,9,0А, 0B, 0C, 0D, 0E, 0F - це і є 16-ковий рахунок. І саме в межах цього й можна задавати кожному сегменту свій колір. Тобто мінімально це може бути 00 00 00, що відповідає чорному, максимально - це буде FF FF FF, що відповідає білому. всі проміжні комбінації - це вже відтінки. Наприклад, червоний колір - це FF 00 00, зелений - це 00 FF 00, синій - 00 00 FF.

Спосіб Б. Для спрощення набору основних кольорів в стандарті HTML було дозволено заміщати ціферний ряд звичайним словом, що позначає той чи інший колір в англійській мові. Наприклад, пропис color = black забарвить виділене тегом в чорний колір, green - в зелений, white - в білий і т.п. Слова, що позначають колір, можна легко знайти в словнику. Але я все ж раджу використовувати саме 16-ковий позначення, оскільки це з більшою точністю буде відображено бродилками різних виробників. Так, у багатьох пошукачів є така фішка або спосіб, як порівняння кольору написів з кольором фону.

Тегами кольору можна задати не тільки колір шрифту, але і колір більшості елементів HTML.

понеділок, 2 березня 2015 р.

Гіперпосилання

Що таке гіперпосилання? Гіперпосилання, вони ж URL ("урли"), "лінки" та інша - основа всього инета ... Власне, зустрічаєте ви їх на кожному кроці - ось хоча б тут, в меню, при переході на іншу сторінку, в інший розділ. .. У цій главі я розповім не тільки банальне відоме 90% сетянам "<a href =" але і про інші хітрушкі, знайомі небагатьом. Але будемо послідовні. Отже ... урл:
<a href="http://что-то там.ру"> найменування лінка </a>
так виглядає звичайна посилання в коді. А в броузері ми побачимо те, що знаходиться в "контейнері" тега, тобто в нашому прикладі це - "найменування линка".
Здавалося б, все ясно, але є нюанси ..
Шляхи в гіперпосиланням можуть бути абсолютними або ж відносними.
Що таке абсолютний шлях?
Це посилання виду <a href="http://srez.ru/"> мій сайт </a> - посилання, що веде на мій сайт з будь-якого місця, навіть будучи розташованої в збереженому на гвинті документі вона буде переправляти користувача на забитий в неї адресу.
Що таке шлях відносний?
- Це шлях, що відсилає юзверя з урахуванням поточного його розташування. Наприклад, ми маємо сайт http://srez.ru/. А в ньому маємо пачку директорій, серед яких, наприклад, XXX - гляньте в адресний рядок дії (тим, хто в танку - це в самому верху; 0)) бачимо там приблизно таке - http://srez.ru/директория/файл .html (взагалі зазвичай пага закінчується на .html, або навіть .shtml, а у який користується php - взагалі файли "без розширення", але це не суть важливо),

Загалом ... - відносний шлях (в конкретному випадку слід розглядати те, що після знака "дорівнює") читається як Сайт, директорія "teach", в ній директорія html, і в ній вже лежить файло з ім'ям links (закінчення не пишу , тому як воно прописано в скрипті .php) з усією цією завірюхою. Отже ... Розглянемо посилання на сторінку "index" (файл "Бредісловіе"):

"Абсолютний" ("жорсткий") шлях:
<a href="http://сайт.ru/діректорія/файл.html"> ім'я посиланням </a>

Залежний шлях:
<a href="файл.html"> файл </a>

Що ж бачимо? Залежний шлях і коротше (а отже, і менше важить і його простіше писати!) І зручніше - не потрібно пригадувати весь шлях - достатньо бути впевненим, що файл.html лежить в одній директорії сайту з файлом, до якого (або з якого) ми звертаємося. Це полегшить юзверя житіє в разі, якщо він тупо збереже сторінки на гвинт.

Показую на пальцях: -
в директорії X є два файла - Y і Z
так ось ... в будь-якому з цих файлів буде працювати посилання на інший, поставлена як просто
<a href="Y.html"> назву посилання </a> або ж
<a href="Х.html"> назву посилання </a>

Ну а що робити, якщо він лежить в іншій директорії?

Тут вже доведеться врахувати частину шляху ...
потрібно уявити собі "дерево".
Сайт.ru:
/ X
fail1.html
fail2.html
fail3.html
fail4.html
/ Y
/ G
fail5.html

Поясню докладніше: На сайті дві директорії - X і Y. У директорії Х лежать 4 файлу. У директорії Y лежить директорія G, в якій лежить ще один файл.
Завдання - поставити посилання, що відкриває один з перших 4-х файлів з файлу fail5.html

абсолютний шлях:
<a href="http://сайт.ру/X/fail1.html"> назву посилання на 1-й файл </a> - посилання цього виду спрацює з будь-якого місця сайту, навіть якщо конкретно цю HTMLьку перенести на зовсім інший сайт.
абсолютний шлях до файлу file5.html в цьому випадку відповідно -
<a href="http://сайт.ру/Y/G/fail5.html"> назву ссИлкіна 5-й файл </a>

Тепер - залежні шляху.
до files1.html з файлу files5.html:
<a href="../../X/fail1.html"> назву посилання </a> - якщо перенести файл з такою посиланням в іншу директорію сайту - вона вже не спрацює ..

до files5.html з файлу files1.html:
<a href="../Y/G/fail5.html"> назву посилання </a> - ця ссликой теж не спрацює, якщо її місце розташування усередині сайту зміниться ... - наприклад в результаті реформування розділу.

Тепер пояснення - "../" це означає команду бродилки піднятися з поточної директорії на рівень вище. Скільки їх у нас всього? Сайт.ру / X / Y / вважаємо: Сайт - це у нас "кореневий каталог" (як диск С :, наприклад), в ньому директорія Y в якій ще й G. Дві директорії. Отже, "../" пишемо два рази - без лапок есессно. (Див. Вище). Тепер бродилка з поточного місця (з файлу fail5.html), звідки отримала посилання, вибереться в кореневу директорію (http: //www.сайт.ru/), але звідси треба йти в інші директорії, знову вглиб сайту .. Йдемо: / X / - на директорію вглиб.
Суть процесу зрозуміла?

Ще варіант, якщо файл, в який веде посилання, знаходиться в тій же директорії, можна написати просто <a href="fail4.htm">
У цьому випадку бродилка спробує запустити заданий на засланні файл в цій же самій директорії, де знаходиться містить посилання файл.

З fail5.html на інші файли така посилання не прокотить.
(Вона повинна буде мати вигляд ../../X/files1.html)

Але саме зручне, це ШЛЯХ ВІД КОРНЯ, він же "відносний"
Ми просто вказуємо шлях щодо кореня (початку сайту)

Тобто, якщо ми напишемо /X/fail3.html, то за умови, що бродилка знаходиться на сайті, а не дивиться на збережену пагу, ми потрапимо акурат на файл3.html

Цей спосіб вказівки посилань найбільш оптимальний, так як нам не потрібно вираховувати, на скільки рівнів підніматися щодо директорії з файлом, з якого ми йдемо. Ми просто вказуємо шлях до того файлу, який хочемо бачити від КОРНЯ сайту ... з його, так би мовити, почала ...

Наприклад, відкрита у нас в Far`e або який її подібної оболонці директорія Program Files. Написавши в командному рядку c: /windows/notepad.exe - в цьому шляху не враховується ЗВІДКИ ми звертаємося до файлу такому-то. Враховується тільки, де він лежить відносно кореня. У нашому випадку це диск С :. У разі вашої сторінки - http: //пага.ру/
І вигляд у посилання буде: <a href="/teach/html/index"> початок уроків з HTML </a>

Що ще потрібно знати про посилання?
Іноді дуже зручно буває, щоб посилання відкрилася в новому вікні, а та сторінка, з якою ми пішли, залишилася незмінною і нікуди не пропала. В цьому випадку ми можемо навести на лінк курсор і, натиснувши праву кнопку миші, вибрати в контекстному меню варіант "Відкрити в новому вікні" (для туканів: друга зверху рядок субменюшкі *). А можна - полегшити відвідувачеві жісь і прописати цю опцію у своїй посиланням самостійно:

<a href="http://сайт.ru/X/fail1.htm" target="_blank"> відкрити "fail1.html" у новому вікні </a>

да-да ... ось це саме target = "_ blank" Воно пишеться через пробіл після href = "URL" і закривається символом>.

які види target ще бувають?

_self - це завантажить лінк в активне вікно. Тобто в те, в якому натиснуто лінк. Він спрацьовує за замовчуванням.
_parent
_top

- Останні два вам не знадобляться, бо до того часу, коли ви дозріє до розуміння, як цим користуватися, ви вже будете знати, що воно робить, і так. Використовується досить рідко? Переважно, всякими лінивцями-збоченцями за звичкою мающіхся давно застарілими фреймами: 0)

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

Розмістивши де-небудь в тексті "якір" вигляду <a name = "число або ім'я (англійськими літерами!)", Ви можете позиціонувати сторіночку цієї міченої рядком по верхній кромці вікна дії. Набираємо в адресному рядку ім'я нашого файлу, але після кінцівки ставимо додаткове "# ім'я мітки". Наприклад, мітку в файлі file1.htm ми назвали metka 2 - звернутися до неї можна, викликавши файл /путь/file1.htm#metka2 - це можна зробити як вручну, набравши це в рядку адреси, так і забивши у заслання виду <a href = "file1.htm # metka2"> звернення до мітці №2 </a>
Ось, власне, і все основне, що потрібно знати про гіперлінках. А ..., та, звичайно ж
Посилання можуть бути також приліплені і на картинки. Тобто, спрацьовувати при наведенні / натисканні курсору на картинку.
Ось це вставити в документ картинку названіе.gif шириною 82 пікселя, висотою 90 пікселів і має бордюр в 0 пікселів. Тобто, не має оного: 0):
<Img src = "названіе.gif" width = "82" height = "90" border = "0" alt = "картинка">
але про картинки і фони буде окрема глава, так що наберіться терпіння і перегортайте по порядку; 0)

неділя, 29 березня 2015 р.