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

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

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

Отже, створюємо папку “уроки з html”, в ній створюємо папку “урок1”, і в неї скопіювати файли нашого першого уроку.

Потім, в папці “уроки з html”, створимо папку “урок2”, і в неї скопіювати файли нашого другого уроку.

І, нарешті, в папці “уроки з html”, створимо папку “урок3”, в ній створимо і зробимо нашу звичайну заготовку (сподіваюся, ви вже навчилися).

Тепер зайдемо в папку “урок1” і перейменуємо наш файл з розширенням .html (повинен бути begin.html) lesson1.html.

Зайдемо в папку “урок2” і перейменуємо файл другого уроку в файл lesson2.html.

Аналогічно поступимо з папкою “урок3”: перейменуємо створену заготівлю lesson3.html, відкриємо її за допомогою блокнота і почнемо працювати.

Починаємо…

HTML-тег посилань

Тег, за допомогою якого створюються посилання — це тег текст посилання.

href — обов’язковий параметр, власне визначає за якою адресою веде посилання.

Посилання бувають абсолютні та відносні (внутрішні).

Абсолютні — це посилання на інші документи мережі,

Відносні — це посилання на різні місця одного і того ж документа.

Давайте, нарешті-таки, зробимо посилання, наприклад, на наш перший урок. Для цього в заготівлі lesson3 наберемо:

посилання на урок 1

Аналогічно на наш другий урок, посилання буде виглядати так:

Розберемося в коді.

По запису href=”../урок2/lesson2.html” можна здогадатися, що це шлях до файлу lesson2.html щодо файлу lesson3.html. Ми зараз на сторінці lesson3.html.

Дві поспіль йдуть точки говорять про те, що ми вийшли з папки урок3, де знаходиться lesson3.html у папку “уроки по html”.

Запис /урок2/ означає, що ми зайшли в папку “урок2” , і lesson2.html ім’я файлу, який потрібно відкрити.

Тобто, ..дві крапки означають вийти з папки в батьківську для неї папку, а / (коса або слеш) — увійти в папку.

Для наочності, якщо потрібно вийти з папки, а з тієї папки, у яку ми вийшли теж потрібно вийти, то написати це потрібно так: ../.. .

Пропоную в якості вправи зробити самостійно посилання зі всіх уроків на кожен урок.

Відповідно якщо файл, на який нам потрібно перейти, знаходиться в цій же папці, наприклад, в нашій папці (урок3) знаходиться файл my.html, то нам потрібно href записати просто ім’я цього файлу, тобто посилання на файл, що знаходиться в тій же папці .

Тепер створимо посилання на який — небудь сайт, наприклад на google.ru. Це буде виглядати наступним чином:

google

Тобто href потрібно прописати http://+назва сайту.

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

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

Досі ми робили посилання на html-сторінки, однак існує можливість створювати посилання на файли інших типів.

Тут є два нюанси в роботі цих посилань:

Перший — це те, що якщо браузер підтримує тип файлу, на який спрямована посилання, то він відкриє цей файл у своєму вікні. Це файли з розширенням gif, png, jpg, html, xhtml і ін).

Другий — це те, що якщо браузер не підтримує тип файлу, на який спрямована посилання, то він відкриє програму, яка асоційована з цим файлом. Це файли з розширенням avi, doc, xls та ін).

Виглядає така посилання досить просто, текст посилання — подібна посилання викличе відеопрогравач, яким ви переглядаєте avi-файли.

Аналогічно з іншими форматами.

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

Також існує можливість створювати посилання на інші ресурси Internet, тобто будуть викликатися програми для роботи з поштою, новинами і т. д.

Приклади таких посилань:

Відправити пошту другові

Тут ключове слово mailto, після якого йде адресу поштової скриньки. Після натискання на цю посилання викликається програма роботи з поштою (Outlook Express, The bat та ін), причому адресу одержувача вже буде заповнений, залишиться тільки написати лист і відправити його.

Новини

Тут news — означає перехід до ресурсу новин, newsname — це назва групи новин, на яку ви підписані. Відкриється програма Outlook Express для роботи з новинами.

Не можна не торкнутися ще один вид посилань. Це внутрішні посилання.

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

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

перейти на мітку 1

Зверніть увагу на те, що значення name у мітки і значення href у посилання збігаються.

Отже, візьміть який-небудь досить довгий фрагмент тексту, зробіть в декількох місцях мітки.

А на початку сторінки зробимо посилання на ці мітки.

перейти на мітку 1
перейти на мітку 2
перейти на мітку 3
перейти на мітку 4

І у нас вийшло таке зміст на початку сторінки.

HTML-тег зображень

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

Для вставки зображення використовується тег .

Параметр src є обов’язковим. Адреса url може бути як абсолютним, так і відносним.

Частіше використовуються відносні імена (ім’я файлу), якщо цей файл в тій же папці, що і сам html документ. Закривається тегу не існує.

Також тег має ряд параметрів. Ось деякі з них:

>

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

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

Посилання на архів нашого уроку: Архів 3 уроку