Як вставити гіперпосилання в HTML? Створення та використання гіперпосилань у HTML. Як зробити картинку посиланням у HTML, Вконтакті, на форумі та за допомогою CSS Зображення у вигляді гіперпосилання для
У цьому уроці ми поговоримо про те, як зробити посилання в HTML. Посилання часто використовуються на сайтах, вони дозволяють переходити з однієї сторінки сайту на іншу. Особливістю посилань і те, що можуть вести як на веб-сторінку, а й у файли, зображення та інших.
Посилання можуть бути внутрішні та зовнішні. За внутрішніми посиланнями здійснюється перехід на сторінки та файли всередині одного сайту. Зовнішні посилання ведуть на сторонні сайти, документи та файли. При цьому, задаються ці види посилань практично однаково.
Як зробити посилання в HTML, приклади1. HREF - відповідає за те, куди має вести посилання. Стандартне посилання визначається наступним чином: Текст посилання.
2. TARGET - відповідає за те, в якому вікні відкриватиметься документ. За замовчуванням новий документвідкривається у поточному вікні браузера. Атрибут "target" дозволяє відкривати посилання у новому вікні браузера. Цей атрибут має такі параметри:
- _blank – завантажує сторінку в новому вікні;
- _self - завантажує сторінку у поточному вікні;
- _parent - завантажує сторінку у фрейм-батько;
- _top - скасовує всі кадри та завантажує сторінку в новому вікні.
3. NAME – використовується для переходу до конкретної області усередині сторінки. Після символу "решітка" вказується в лапках ключове слово (закладка або мітка). Для переходу до цієї мітки використовується посилання, в якому ця мітка прописується.
Приклад зовнішнього посиланняПерейти на сайт
Перейти на сайт Безкоштовні уроки з WordPressПриклад 4. Зображення як посилання.
Приклад зображення як посилання
Перейти до тексту
Текст сторінки...
У цьому прикладі на сторінці ставиться мітка "list" за допомогою атрибута "name". Посилання на цю позначку забезпечить перехід у певну область сторінки.
Завантажити файл Написати листаМожна задати колір посилань за допомогою атрибутів, які вказуються в тезі body як параметри. Розглянемо ці атрибути:
- link – не відвідане посилання, за замовчуванням воно відображається синім кольором;
- alink — активне посилання, яке за замовчуванням має червоний колір;
- vlink — відвідане посилання, яке має за замовчуванням фіолетовий колір.
Таким чином, ми розібралися за яким принципом створюються посилання HTML. Посилання можна надавати певні стилі оформлення. Про можна подивитися в уроці, перейшовши за посиланням.
Думаю, Вам уже зрозуміло про що піде мовау цьому розділі .. і Ви знаєте, що собою являє посилання, якщо ні, то натисніть сюди .. Існує кілька видів посилань, а так само "механізмів" переходу по них. У цьому розділі постараюся докладно розповісти про те, як прописати посилання, а також присвятити тонкощі справи по роботі з ними.
Ліричний відступ:
Якось в армії підходить до мене начальник штабу і наказує, цитую:
Принеси мені ось той документ, правда я не знаю, де він і який!! Що стоїш? Бігом давай!! Запізнююся я!
Так ось, до чого я це, щоб браузер, як я тоді, не впав у ступор, йому необхідно знати: точну назву документа, шлях до документа, і місце куди його принести, точніше, де його відкрити.
на Наразіза допомогою блокнота ми створили тільки один HTML документ у мене він з ім'ям index.html (навіщо вибрав таку дивну назву index.html і навіщо воно потрібно дивіться у) у Вас не знаю з яким, Ви самі ім'я вигадували, але думаю, Ви його пам'ятайте і знаєте де він лежить, якщо звичайно Ви не мій начальник штабу:).. У цьому документі ми спробуємо створити посилання на інший документ, якого у нас ще немає. Так що перш ніж на нього посилатися, його потрібно створити, благо це вже вмієте.
Тепер я знаю, що у вас два html документа index.html та primer.html і що тепер у Вас є мінімальний набір для подальшого навчання.
Текстові посиланняЗнайомимося тег (від anchor-якор), в нього можна укласти текст або малюнок, які стануть посиланням на ті чи інші документи. Атрибут тега href задає ім'я та шлях до документа, на який вказує посилання.
Все разом пишеться так:
Тут мої фотки!!Як Ви напевно зрозуміли primer.html це ім'я нашого другого html документа, а напис "Тут мої фотки!!" це шматочок тексту із файлу index.html.
За аналогією з малюнками тег шлях посилання до документа, що відкривається, прописується тими ж способами:
Тут мої фотки!! - А це означає, що файл primer.html розміщений на рівень вище документа
Тут мої фотки!! - Документ розташований на сайті www.site.ru.
Ну, що давайте спробуємо? Нижче наведено приклад відразу двох документів у яких прописані посилання, що вказують один на одного.
Файл index.html:
Робимо посиланням шматочок тексту
Скажи мені, люба дитина: в якому вусі у мене дзижчить?
У правому чи лівому?
Файл primer.html:
Перейшли за посиланням сюди
А ось і не вгадав! У мене дзижчить в обох вухах.
Ну я так не граю...
З прикладу видно, що посилання виділяються кольором, за замовчуванням синеньким - посилання, а червоненьким - вже відвідане посилання, ці кольори можна змінити за допомогою вже добре відомого нам тега, що відкриває< body >та його атрибутів.
link – колір посилання.alink – колір натиснутого, активного посилання.
vlink – колір відвідуваного посилання.
Пишеться так:
Продовжуючи говорити про колір текстового посилання, варто згадати, що при необхідності можна примусово виділяти кольором як усе посилання, так і окремі його частини (фрази слова літери) знайомим тегом та його атрибутом color. Втім, це стосується не тільки кольору, так само окремо можна задати розмір, стиль і шрифт тексту. Але пам'ятайте, що маніпуляції з кольором потрібно проводити усередині тега ось тута не за бортом, інакше колір посилання буде або за замовчуванням, або оскільки прописано в тезі
Файл index.html:
Веселка
Подивіться на фразу, яка допоможе Вам запам'ятати місця квітів у веселці
Р
А
Д
У
Г
А
Файл primer.html:
Веселка
Кожен
мисливець
бажає
знати
де
сидить
фазан
Повернутися на головну
Одна з Ваших сторінок на сайті обов'язково має називатися index.html. Саме файл з такою назвою на Вашому сайті шукатиме програма робот, коли людина запровадить ім'я Вашого сайту. Оскільки сторінка index.html відкриватиметься першою, робіть її головною. Інші сторінки можете називати, як завгодно… більше жодних нюансів із іменами немає.
Про реєстр.. Прописуючи шлях та імена документів пам'ятайте, що, наприклад: Page.html, page.html та PAGE.html це імена різних документів! Це ж стосується імен закладок та малюнків. Завжди враховуйте регістр при написанні коду, є ймовірність, що такі імена не будуть розпізнані тим чи іншим браузером. Візьміть за правило все писати та обзивати маленькими латинськими літерамиТоді ризик людського фактора і капризів програм зведеться до нуля.
Правило трьох кліків.
Намагайтеся формувати "дерево посилань" таким чином, щоб відвідувач сайту міг з будь-якої його сторінки потрапити до будь-якого місця сайту за мінімальну кількість переходів за посиланнями. Більше трьох переходів до потрібного місця на сайті це вже не є добре. Нескінченні завантаження непотрібних людині сторінок можуть призвести до нервового розладу та передчасного закриття сайту. Бережіть час гроші та нерви людей.
Головною ознакою HTML-документа є наявність у ньому гіперпосилань (або просто посилань) на інші документи, сайти, файли, картинки і т. д. Саме можливість вставляти в сторінки посилання на об'єкти поза нею і зробила Інтернет настільки популярним та зручним для використання. Тому при створенні свого сайту завжди пам'ятай про «магію» посилань.
У цьому уроці ми поговоримо про створення посилання на сайт, на його окрему сторінку або файл. Ти дізнаєшся про те, як змінити текст посилання, як відкрити його в новому вікні, як зробити посиланням картинку, що таке зовнішні та внутрішні посилання та багато іншого. Плюс, у тебе вже є інформація про роботу з посиланнями, якою ми торкалися на минулих уроках (наприклад, про те, як можна змінити колір посилання ми говорили в ).
Загалом цей урок зробить твоє уявлення про створення посилань закінченим і достатнім. Ти зрозумієш, як створити гіперпосилання в HTML та навіщо. І навчишся керувати її властивостями.
Терміни § 1. Посилання на файл, посилання на сайт, посилання на сторінку
Численні питання про те, чим відрізняється посилання на файл від посилання на сайт або його окрему сторінку, змусили мене винести відповідь на нього на початок цього уроку. Відповідь така: нічим. Всі перелічені посилання є зовнішніми по відношенню до вихідної сторінки і створюються тим самим способом.
Щоб не розтікатися думкою по дереву, покажу все на прикладі.
У браузері ми побачимо ось що:
У браузері ми побачимо ось що:
Як бачиш, всі типи посилань створюються абсолютно однаково. Різниця лише на адресі об'єкта, на який потрібно послатися. А тепер перейдемо до основної частини уроку.
§ 2. Створення зовнішніх посиланьМіж собою посилання різняться на зовнішні та внутрішні, а також на текстові та графічні. Зовнішні посилання ведуть за межі html-сторінки, внутрішні на різні частини цієї ж сторінки. Текстові посилання являють собою текст (за замовчуванням, він виділено синім кольором і підкреслено), а графічні, як об'єкт, яким потрібно клацнути для переходу, містять якусь картинку. Всі ці різновиди посилань створюються HTML з допомогою тега (скорочення від англ. anchor - якір). Розглянемо його детальніше.
Для створення зовнішнього посилання на сайт, сторінку або файл служить атрибут тега - href. Як атрибут приймає URL-адресу сайту, сторінки або файлу (про це ми говорили вище). Між тегами розташовується видима частина посилання (анкор посилання), тобто те, що ми бачимо на екрані браузера. Анкор посилання може бути як звичайним текстом (текстове посилання), так і графічним зображенням(Посилання-картинка). Посилання-картинка створюється вставкою знайомого нам тега між тегами та . Загалом, синтаксис створення посилання має такий вигляд:
Наприклад, щоб створити текстове посилання на головну сторінку цього сайту, потрібно написати наступний HTML-код:
http://www.seoded.ru/">Головна сторінка сайту сайт
У браузері це виглядатиме так:
Як писав на початку цього уроку, колір тексту посилань (анкору) можна змінити за допомогою . Взагалі, до тексту посилань можна застосовувати ті ж, що й до основного тексту сторінки, тобто виділяти жирним, курсивом, використовувати заголовки і т.д.
§ 2.1 Графічні посилання (посилання-картинки)Як я вже сказав вище, щоб створити посилання-картинку, потрібно замість тексту використовувати . Приклад такого посилання виглядає так:
А браузер покаже:
За промовчанням, браузер оточує картинку в графічному посиланні рамкою. Якщо це небажано, то атрибуту border тега IMG потрібно надати значення 0:
border="0">
Головна сторінка
§ 3. Внутрішні посиланняДля комфортного переміщення сторінками з великою кількістю контенту використовуються внутрішні посилання. Саме з їх допомогою я зробив «Зміст уроку» (див. на початку цієї сторінки). Внутрішні посилання створюються за тим самим принципом, як і зовнішні. Тільки у значенні атрибуту href вказується «якір» посилання. "Якір" створюється атрибутом name :
name="ім'я якоря">текст
І мене «якоря» задається довільно. Тут варто сказати, що не всі браузери розуміють російські імена якорів, тому рекомендую використовувати латиницю. Текст між тегами для створення «якоря» не є обов'язковим і, найчастіше, не вказується.
"Я кір" розташовується в тих місцях сторінки, в які повинен потрапити користувач після натискання на посилання.
Як я вже сказав вище, в атрибуті href внутрішнього посилання замість адреси вказується ім'я потрібного «якоря» з обов'язковим символом решітки (#) перед ним. Розберемо з прикладу.
Я створив "якір" з ім'ям zagolovok і розмістив його в коді сторінки поряд із заголовком цього уроку ("Гіперпосилання в HTML"). Код «якоря» наступний:
name="zagolovok">
href="#zagolovok">До заголовка
А в браузері так:
Якщо ти помітив, то після переходу за внутрішнім посиланням до заголовка змінилася URL-адреса в адресному рядку браузера:
До початкової адреси:
http://www..html
http://www..html#zagolovok
І, використовуючи цю особливість, можна посилатися на певне місце сторінки з будь-якого ресурсу в Інтернеті! Т. е., припустимо, ти створив сторінку з об'ємною статтею про щось (або виклав на сторінці велику кількість фотографій) і помітив її внутрішніми посиланнями. Перебуваючи в , тобі потрібно було послатися не просто на сторінку зі статтею (або фотографіями), а на певне місце на ній (або певну фотографію). Використовуючи варіант із внутрішнім посиланням на адресу, ти з легкістю досягнеш потрібного.
§ 4. Абсолютні та відносні посиланняГоловна сторінка
А ось із відносними посиланнями трохи складніше. У таких посиланнях адреса вказується або щодо кореневої папки сайту (та, в якій лежить головна сторінка), або щодо вихідної сторінки. Такі посилання потрібні, наприклад, якщо сайт лежить на домашньому комп'ютері. Або це не сайт, а сторінка-покажчик на інші документи.
Допустимо нам потрібно послатися на сторінку klienty.html, яка лежить в одній папці з головною сторінкоюсайту. Тоді код відносного посилання набуде вигляду:
/klienty.html">Клієнти
А тепер припустимо, що в одній папці з головною сторінкою лежить папка zakazy і вже в ній лежить сторінка klienty.html Тоді код відносного посилання стане таким:
/zakazy/klienty.html">Клієнти
Тепер розглянемо створення гіперпосилань щодо вихідної сторінки. Допустимо, у нас є сторінка price.html (початкова сторінка) і з неї потрібно послатися на сторінку klienty.html Тут бувають такі типові варіанти:
1. Сторінки price.html та klienty.html знаходяться в одній папці.
klienty.html">Клієнти
2. у кореневій папці сайту, сторінка price.html лежить у папці zakazy на один рівень вище).
Код стане таким:
../klienty.html">Клієнти
Дві точки показують, що потрібно вийти з поточної папки до рівня вище.
3. Сторінка klienty.html і папка zakazy знаходяться в кореневій папці сайту, папка mebel лежить у папці zakazy, сторінка price.html лежить у папці mebel (тобто сторінка klienty.html щодо вихідної сторінки price.html лежить на два рівні вище ).
../../klienty.html">Клієнти
Т. е. кожен рівень позначається двома точками і сліше «/».
4. у кореневій папці сайту, сторінка klienty.html лежить у папці zakazy (тобто тепер сторінка klienty.html щодо вихідної сторінки price.html лежить на один рівень нижче).
zakazy/klienty.html">Клієнти
У цьому випадку крапки та сліші не ставляться.
5. Стор. лежить на два рівні нижче).
zakazy/mebel/klienty.html">Клієнти
6. У кореневій папці сайту лежать дві папки: zakazy та oplata. Сторінка klienty.html лежить у папці zakazy , вихідна сторінка price.html лежить у папці oplata (тобто обидві сторінки лежать у різних папках на рівень нижче кореневої папки сайту).
../zakazy/klienty.html">Клієнти
Для створення посилання на електронну пошту потрібно замість URL-адреси у значенні атрибуту href написати адресу електронної пошти із зазначенням протоколу (mailto: ). І тоді при натисканні за таким посиланням відкриється вікно поштової програмиіз вписаною в поле «Кому» адресою електронної пошти. У HTML-коді це виглядає так:
mailto: [email protected]">Моя пошта
А у браузері так.
Здрастуйте, шановні читачі блогу сайт! Як відомо, для успішної розкрутки сайту та підвищення його позицій у результатах пошукової видачі необхідно проводити якісну SEO оптимізацію сайту. Поняття “”, яка, у свою чергу, ділиться на внутрішню та зовнішню, нерозривно пов'язане з такими поняттями, як “внутрішні та зовнішні посилання сайту”. Тому, нам дуже важливо знати, скільки посилань має бути на сайті, як перевірити їх кількість, як забрати зайві посилання з сайту та закрити їх від індексації, як нарощувати масу посилань і т.д. Щоб відповісти на всі ці та інші питання щодо внутрішніх і зовнішніх посилань, давайте, для початку, розберемося, що таке посилання (або гіперпосилання) в HTML.
У цій статті я розповім, що таке посилання, як зробити гіперпосилання в HTML на сайті, як відкрити посилання в новому вікні, як створити посилання на адресу електронної пошти (e-mail) та як зробити посиланням картинку. Торкнемося також таких понять, як html-теги та атрибути гіперпосилань, анкор посилання, html якір (anchor) і хеш-посилання. Тож почнемо.
Що таке посилання (гіперпосилання).Якщо гіперпосилання веде на веб-сторінку або файл, яких не існує (віддалено, переміщено) або його адреса вказана неправильно, то таке посилання називається бита. Битих посилань на сайті не повинно бути, оскільки вони вводять відвідувачів в оману і, перейшовши, за таким посиланням людина вже навряд чи повернеться на Ваш сайт. Докладніше про те, чому з'являються биті посилання, як їх шукати та виправляти, ми поговоримо в окремій статті. А зараз продовжимо.
Як зробити посилання (гіперпосилання) у HTML на сайті.Зробити посилання на іншу сторінку свого сайту дуже легко. Для створення гіперпосилання треба вказати браузеру, що є посиланням та вказати адресу документа, на який вона вестиме. Робиться це за допомогою HTML-тегу та обов'язкового атрибуту href :
Тут URL – це адреса документа, на який потрібно перейти. А текст гіперпосилання, розташований між тегами і, називається анкором посилання і видно відвідувачу веб-сторінки. Крім того, що текст посилання (анкор) інформує читача, куди буде здійснено перехід, він ще дуже важливий у пошуковій оптимізації (SEO), оскільки служить одним із визначальних факторів, що впливають на ранжування Вашого сайту за ключовими словами, які містяться в цьому анкорі. Зазвичай такий вид ранжирування називають посилальним.
Абсолютне посилання
Вони використовуються для вказівки документа на іншому сайті (зовнішнє посилання).
Допускається робити абсолютні посилання і всередині одного сайту, проте правильніше використовувати для створення внутрішнього посилання відносні адреси, які виглядають коротшими. Але, аналізуючи різні сайти, я помітив, що переважна більшість веб-майстрів роблять внутрішні посилання з абсолютними адресами. Тут є свій плюс, оскільки, якщо у Вас скопіюють сторінку, то таким чином Ви отримаєте робочі зворотні посилання.
Як бачите, із абсолютними посиланнями все просто. Ось із відносними складніше, оскільки при їх створенні треба розуміти, яке значення атрибуту href треба вказати, оскільки воно залежить від вихідного розташування документів. Як я вже говорив, ніхто з цим особливо не морочиться і робить всі посилання на сайті абсолютними. Однак, якщо Вам цікаво дізнатися, як правильно створювати відносні посилання для сайту, можу порекомендувати статтю Дмитра, автора блогу ktonanovenkogo.ru. Більш детального та зрозумілого пояснення я ще не зустрічав.
Для прикладу, покажу, як виглядатиме посилання, що веде до файлу щодо кореня сайту (просто відсікаємо все, що ліворуч від третього слеша в аналогічному абсолютному посиланні):
Відносне посилання
На головну
Текст посилання (анкор)
Кольори та оформлення спливаючого тексту залежать лише від налаштувань операційної системита браузера.
Як відкрити посилання у новому вікні.За промовчанням, при переході за посиланням новий документ буде відкрито у поточному вікні. Однак, при перегляді сайтів мені це особисто не зручно. Читаючи статтю та переходячи за посиланням, мені зручно, щоб сторінка відкривалася у новому вікні і я міг у будь-який момент продовжити читання попередньої статті. Інша причина відкрити посилання в новому вікні це те, що при переході на чужий сайт велика ймовірність того, що читач вже не повернеться назад. Особливо якщо він здійснить кілька переходів і просто не згадає, де він був кілька хвилин тому.
Відкрити посилання у новому вікні нам допоможе атрибут target тега . За замовчуванням він має значення _self, яке зазвичай не прописується. Щоб відкрити документ у новому вікні, змінюємо значення атрибуту target на _blank :
| 1 | Нове вікно |
Нове вікно
Що робити, якщо при відвідуванні чужого сайту, де посилання відкриваються у поточному вікні, Ви хочете відкривати їх у новому? Треба просто клацати по них не кнопкою, а коліщатком миші. В цьому випадку Нова сторінкавідкриється у новому вікні.
Як зробити посилання на e-mail (адреса електронної пошти).При натисканні за цим посиланням відкриється програма для роботи з електронною поштою, встановлена у Вас за замовчуванням, де буде заповнено поле “Кому”. Щоб автоматично заповнювалась і тема листа, треба зробити посилання на e-mail такого виду:
Дмитро КтоНаНовенького радить ще один спосіб встановлення закладок у тексті веб-сторінки, без використання HTML якорів. Для цього робимо закладку з будь-якого HTML-тегу, що є на сторінці, прописуючи йому універсальний атрибут id. Наприклад, робимо закладку з тега заголовка h3 :
Текст заголовка
Важливо в атрибуті ID першим символом імені якоря прописувати латинську букву, потім можна використовувати будь-які інші дозволені символи.
Давайте, приміром, повернемося до заголовка “А потім продовжимо.
Можна використовувати хеш-посилання для переходу на потрібне місце не тільки в межах однієї сторінки, а й для переходу на іншу сторінку сайту. Для цього ми встановлюємо html якір у потрібному місці на потрібній сторінці, а в саму хеш-посилання перед символом ґрат прописуємо адресу цієї сторінки. Наприклад:
Текст посилання на html якір-закладку
Види та колір гіперпосилань у HTML.- Не відвідане посилання – має синій колір та підкреслення.
- Активне посилання – приймає червоний колір під час між клацанням миші за посиланням та початком завантаження нової сторінки. Зрозуміло, у такому стані вона знаходиться зовсім недовго.
- Відвідане посилання – змінює свій колір на фіолетовий після переходу по ньому.
Змінити колір гіперпосилань у html-документі можна за допомогою тега та наступних його атрибутів:
- Link – колір не відвіданих посилань.
- Alink – колір активного посилання.
- Vlink – колір відвідуваних посилань.
Усі наведені атрибути можна поєднувати:
| 1 |
Сподіваюся, тепер зрозуміло, як створити гіперпосилання на HTML-сторінці та на e-mail, як зробити картинку посиланням, що таке текстові анкори, хеш-посилання та html якорі, які бувають html-теги та атрибути посилань. Я постарався, наскільки зміг, докладно розповісти, що таке посилання HTML і які вони бувають. Нагадаю, що вставка гіперпосилань у текст здійснюється лише у режимі HTML.
Таких довгих статей ще не доводилося писати, більше 10 000 символів. Але на цьому тема посилань не вичерпана, далі буде.
Якщо вам була корисна ця стаття, прохання натискати на кнопочки соц.сетей нижче. До нових зустрічей на сторінках!
Доброго часу доби, мої дорогі друзі та читачі. Я сподіваюся, що ви вирішили все ж таки вирішити взяти участь у моєму конкурсі і вже пишіть про свій блогерський шлях. Ну а я хотів би продовжити наше вивчення мови html і сьогодні я вам хотів би розповісти про одну з найважливіших складових, а саме гіперпосилання.
Так, без таких гіперпосилань інтернет був би не таким зручним. Ні, брешу. Він був би взагалі не зручним у плані навігації. Ви можете уявити інтернет без них? Я особисто ні.
І сьогодні ми з вами дізнаємося, як вставити гіперпосилання у html. Але спочатку я хотів би вас запитати: Чи знаєте ви, що таке взагалі гіперпосилання і чим воно відрізняється від звичайного посилання? Тут насправді все просто: посилання - це просте написання інформації, що посилається на який-небудь документ. При цьому натиснути ви на цей текст не можете (нічого не буде), але ви знаєте, де шукати інформацію.
Приклад: Про те, як виділяти волосся у фотошопі, ви можете дізнатися за адресою //сайт/adobe-photoshop/kak-vydelit-volosy/
Гіперпосилання – це такий самий текст, тільки суть його полягає в тому, що на цей текст можна натиснути та потрапити на бажану сторінку, сайт чи будь-який інший об'єкт. Причому сам текст може бути будь-яким, тим часом як адреса прописується вже всередині окремо і може бути зовсім іншою. Але як би там не було, все одно в розмовній промові їх називають просто посиланнями. Ось приклад гіперпосилання:
Про те, як правильно виділяти волосся у фотошопі ви можете прочитати в одній з моїх.
Ну та гаразд. Хороша теорія. Тепер перейдемо до практики і подивимося які відповідають за всі ці справи.
За гіперпосилання відповідає парний тег, але сам по собі він нічого не представляє. Він завжди йде у зв'язці з атрибутом. І в даному випадку нам потрібно постійно прописувати цей href. У значенні атрибуту ми ставимо посилання на бажаний ресурс. А в самому вмісті ми пишемо сам текст, який має стати клікабельним (працювати натисканням). Подивіться приклад і думаю, що ви все зрозумієте.
Пошукова система Яндекс
Як ви зрозуміли, в цьому прикладі я написав, що при натисканні на шматок тексту «Пошукова система Яндекс» людина направиться за адресою, написаною у значенні атрибуту href.
Я думаю, що багато хто з вас знає, що існують внутрішні і зовнішні посилання. Внутрішні здійснюються всередині одного каталогу, тобто сайту, а зовнішні посилання ведуть на якийсь сторонній ресурс. І зараз я покажу, як робити і ті, й інші.
Внутрішні переходи Файл у тій самій папці
Але такий перехід буде працювати за умови, якщо файл, на який ви посилаєтеся, буде перебувати в тій же папці, що й файл, в якому ви ставите посилання. Для інших варіантів все трохи інакше.
Що ми зараз зробили? А зробили ми таке: оскільки шлях до фотографії лежить в окремій папці img, яка знаходиться в одній папці з файлом pushkin.html, то в значенні атрибуту нам доводиться спочатку написати назву папки, а потім через сліш (/) повну назву документа (у нашому випадку фотографії).
А ось тепер збережіть та запустіть файл pushkin.html у браузері. Ви побачите, що слово "Фото" стало виділено синім кольором і стало клікабельним, а це означає, що натиснувши на це посилання, ми потрапимо на файл fofo.jpg, який знаходиться в папці img.
Ну як? Все зрозуміло? Ви в разі чого питайте, не соромтеся.
Зовнішні переходиНу і звичайно ж не можна не згадати про зовнішні посилання, після натискання на які ми потрапимо на зовсім інший сайт. Але тут нічого складного нема. Вся суть полягає в тому, що ви в значення href кидаєте повну адресу сайту або веб-сторінки. Приклад із яндексом я показував вище. Але вам ще один приклад:
Я вчитимуся на майстри соціальних проектів.Тут ми потрапляємо на конкретну сторінку сайту.
За умовчанням при натисканні посилання документ відкривається у тому вікні, як і ваша сторінка, тобто. ваша сторінка закриється. А це не є добре. Зокрема для контентних проектів або блогів, що просуваються, рекомендується робити так, щоб при натисканні на посилання, документ відкривався в новому вікні або вкладці, не закриваючи вашу сторінку.
У цьому нам допоможе атрибут target зі значенням "_blank". Тут нічого складного немає. Вам просто треба буде вставити це всередині тега, що відкриває після значення атрибуту href. Давайте візьмемо той уривок із файлу lukomorye.html, де ми робили посилання на сторінку pushkin.html, тільки тепер пропишемо цей самий атрибут. Виглядати це має так:
З поеми Руслан та Людмила (Автор - А.С. Пушкін)
Ну, тут все зрозуміло. Тепер при натисканні на вміст потрібна сторінка відкриється у новому вікні. Ця річ дуже потрібна, тому що якщо її не прописати, то користувач просто піде з вашої сторінки. А так він у будь-якому випадку залишиться на ній, тільки якщо сам спеціально не закриє її. Спробуйте зробити все самі, тільки робіть своїми ручками прекрасними. Не треба копіювати та вставляти.
Ну ось якось так. Начебто все найважливіше розповів, але якщо ви хочете рухатися в цьому напрямку та вивчити HTML та CSS для створення професійних сайтів, блогів і навіть інтернет-магазинів, то обов'язково подивіться чудовий відеокурс на цю тему. Уроки дійсно чудові і розповідається дійсно для людей, які з сайтобудування ще мало знайомі або незнайомі зовсім.
Ну, а на цьому наш сьогоднішній урок закінчено. Я сподіваюся, що моя стаття вам сподобалася і буду радий, якщо ви станете моїм постійним читачем. Тому не забудьте передплатити оновлення мого блогу, щоб не пропустити чогось цікавого. Ну а вам я бажаю успіхів у всіх ваших починаннях. Бувай!
З повагою, Дмитро Костін.
