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

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

Лінки

with one comment

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

Атрибути

Деякі теги мають властивості, які називаються атрибутами. Наприклад майже кожен тег, має атрибут title. В ньому прописується текст підказки яку видно, коли користувач наводить курсор на елемент тегу. Хай нам потрібно написати відоме скорочення: HTML. І щоб коли користувачі наводять на нього курсор, вони могли його розшифрувати. Це робиться просто:

<html>
<head><title>Абревіатура</title></head>
	<body>
		<abbr title="Hypertext Markup Language">HTML</abbr>
	</body>
</html>

Тут ми бачимо, як правильно записувати атрибути. Назва атрибуту, потім знак рівності, і значення в подвійних лапках. В стандарті HTML 4.0 немає атрибутів без значень.

Краще писати всі атрибути і їх значення маленькими буквами.
Нащо?
Заради майбутнього!

Посилання

Як я вже казав, основною властивістю, яка відрізняє нормальний текст і гіпертекст є гіперпосилання. Гіперпосилання створюються за допомогою тегу <a>, з атрибутом href, який приймає значення потрібного нам URL. Наприклад потрібно створити сторінку, яка містить посилання на цю статтю. Це може виглядати приблизно так:

<html>
<head><title>Посилання</title></head>
	<body>
		Тут можна знайти матеріали про web-дизайн: <a href="http://www.bunyk.wordpress.com">www.bunyk.wordpress.com</a>
	</body>
</html>

Тепер на сторінці напис www.bunyk.wordpress.com стане гіперпосиланням.

Зазвичай сторінки в інтернеті не сидять самотньо. Вони розміщуються купками, які називаються сайтами. Сайт – це за моїм визначенням набір сторінок, і інших файлів, які мають спільну частину URL. Наприклад всі сторінки які починаються на http://www.microsoft.com належать до одного сайту, однієї маленької комп’ютерної фірми. Далі йде символ “/”, і адреса продовжується.

Можна зробити в себе на комп’ютері маленьку модель сайту. Для цього потрібно створити новий каталог, в якому будемо розміщувати файли. Потім в каталозі розмістити файл index.htm . Якщо є якесь посилання на ваш сайт, без вказівки, який конкретно файл завантажувати, то буде завантажений саме index.htm. Далі ми можемо створити ще одну папку всередині нашої. Нехай вона називається subdir. Якщо в ній розмістити файл іndex.htm, то щоб перейти до нього потрібно буде написати: “www.ваш_сайт.com/subdir/”.

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

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

Діалог завантаження файлу

Діалог завантаження файлу

Наприклад, якщо ви співак і хочете поділитись своїми піснями з іншими, ви можете покласти в папку з сайтом файл track1.mp3, а в файлі index.htm написати:

<html>
<head><title>Моя музика</title></head>
	<body>
		Я щойно записав новий трек. Ви можете <a href="track1.mp3">скачати його тут.</a>
	</body>
</html>

Якщо файли знаходяться в одному каталозі, то в атрибуті href достатньо написати назву файлу, щоб зробити посилання. Якщо ж ми маємо файли “site/1.htm” і “site/subdir/2.htm”, то щоб з першого зробити посилання на другий, а з другого на перший, треба написати href="subdir/2.htm" і href="../1.htm" відповідно. Такі адреси називаються відносними. Дві крапки означають “той каталог що вище”. Відносні адреси добрі тим, що коли ми перейменовуємо папку “site”, чи міняємо хостинг їх не потрібно змінювати.

Але цим можливості тегу <a> не вичерпуються. a – скорочено від anchor – що значить якір. За допомогою тегу <a> можна ставити в гіпертекстовому документі якорі, або говорячи простіше закладки, які дозволяють переходити в певне місце документа. Це особливо корисно, коли документ великий, і потрібно швидко переходити в ньому до певного розділу. Для цього існує атрибут id.

Я щоправда не розумію для чого робити закладки за допомогою тегу <a>, коли атрибут id є в кожному тезі. Але всіма способами виходить нормально.

Щоб довго не пояснювати знову наведу приклад:

<html>
<head><title>Моя музика</title></head>
	<body>
		<h1>Зміст</h1>
		<a href="#part1"><h2>Частина 1</h2></a>
		<a href="#part2"><h2>Частина 2</h2></a>
		<a href="#part2"><h2>Частина 2</h2></a>
		<h1 id="part1">Частина 1</h1>
		<p>Багато тексту</p>
		<h1 id="part2">Частина 2</h1>
		<p>Багато тексту</p>
		<h1 id="part3">Частина 3</h1>
		<p>Багато тексту</p>
	</body>
</html>

Коли ми робимо гіперпереходи в межах одної сторінки, то в атрибуті href просто пишемо знак шарпа (“#”), і назву закладки (те що написано в атрибуті id). А коли робимо перехід на закладку в іншій сторінці, то спочатку пишемо адресу сторінки, потім додаємо знак шарпа і закладку. Коли випадково робиться перехід на закладку якої не існує, нічого страшного не відбувається. Ми просто попадаємо на початок сторінки, як при звичайному переході.

Взагалі то w3cschools писали про атрибут name, але крім того вони писали, що скоро цей атрибут буде відкинуто і замінено на id. Тому думаю краще використовувати новіший, і в два рази коротший варіант. А чим коротша сторінка, тим швидше вона завантажиться 🙂

Найчастіше сторінки завантажуються в тому вікні, де ви клацнули посилання. Але ми можемо вибрати місце де будуть завантажуватись сторінки. Для цього в тезі <a> існує атрибут target. Він може приймати значення _blank якщо нам потрібно завантажувати сторінку в новому вікні, _self, якщо нам нічого міняти не потрібно (воно і так завантажується в тому вікні де клацнули), _parent, якщо ми хочемо забрати з вікна фрейми, і відкрити сторінку на все вікно.

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

Advertisements

Written by bunyk

Січень 30, 2009 at 13:58

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

Tagged with

Одна відповідь

Subscribe to comments with RSS.

  1. Hello from selenium on Linux with firefox 10.0.12

    bunyk

    Жовтень 4, 2013 at 16:04


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

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

Лого WordPress.com

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

Twitter picture

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

Facebook photo

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

Google+ photo

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

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

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