Основи HTML (частина 3)

Як зробити посилання в HTML

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

Цей пост буде охоплювати:

• Текстові посилання HTML – додавання тексту, який пов’язаний з певним URL
• Додавання зображення з допомогою HTML
• Посилання зображення HTML – додавання зображення, яке пов’язане з конкретним URL

Створення посилань з використанням HTML

Для того, щоб розміщувати посилання на інші сторінки сайту (внутрішня перелінковка) або на зовнішні ресурси, а так само створювати посилання, зображення, HTML, вам потрібно знати HTML код. Ось так виглядає проста текстова посилання:

Проста текстова посилання. Приклад.
Текст

1

Текст

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

Текстова посилання
SEO блог

1

SEO блог

Ну а ось так (SEO блог) вона буде виглядати в записи, коментарі, форуму і т. д.

Як це працює?

Розглянемо посилання , вона може бути розбита на три частини:

це для посилання. Не має значення, це текст або зображення, це завжди-код посилання. Наступним важливим моментом є вказівка “URL” посилання, іншими словами, куди браузер буде направляти нас, коли ми натискаємо на елемент (текст чи картинка). При вказівці посилання вам слід завжди використовувати абсолютний адресу – це означає, що URL починається з http:// інакше ви побачите повідомлення про помилку. Не забувайте закривати цю частину з допомогою >.

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

І, нарешті, третій розділ. В HTML, якщо ви відкриваєте тег, такий як необхідно закрити його, тому ми додаємо в самому кінці.

Рекомендую до прочитання: Основи HTML (частина 4)

Додавання зображення з допомогою HTML

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

Приклад коду вставки зображення

1

Як це працює?

Перша частина уточнює, що цей код є зображенням .

Друга частина є джерелом зображення SRC = “URL зображення”, іншими словами, де знаходиться зображення. Це може бути адреса на сайті/блозі або на зовнішньому ресурсі, таким як Dropbox, Flickr, Photobucket і т. д. Головне, використовувати правильний URL, щоб зображення відображалося. Тут не використовується URL сторінки, а використовується URL адресу зображення. Як правило, цей URL закінчується в типом файлу зображення, таких як PNG, JPEG і т. п.

В третій частині додамо, alt = “Опис зображення” , щоб вказати браузеру, що зображено на картинці. alt дуже важливий для SEO. А потім закриття > .

Створення посилання зображення HTML

Тепер, після того, як ви дізналися, як створити посилання HTML і як додати зображення, дуже просто об’єднати їх. Створити зображення, яке буде вести на певний URL при натисканні. Ось код посилання зображення HTML, але на цей раз замість тексту ми додаємо код для зображення.

Приклад посилання зображення HTML

1

Як це працює?

Ми відкриваємо посилання .

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

Ну і звичайно, не забувайте закривати посилання , ось і все.

Рекомендую до прочитання: Технічна підтримка сайтів

Іноді ми хочемо, щоб пов’язана з посиланням сторінка відкривалася в новій вкладці браузера. Для цього потрібно додати такий код в першій частині: target = “_blank” перед > . Це можна зробити і для посилання зображення HTML для текстової посилання.

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

1	Текст вашого посилання

Приклад посилання, зображення, HTML відкривається в новому вікні браузера

1

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