Посилання та зображення в html

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

Я думаю, що Ви жодного разу не зустрічали жодної сторінки в Інтернеті, на якій не було жодного зображення або посилання. Тому матеріал даної статті є надто важливим, в той же час він дуже простий, завдяки чому його зможе освоїти навіть школяр.

Перше, що ми зробимо - це додамо HTML посилання на нашу сторінку.

Для цього напишемо в тезі такий код:

тег HTML означає початок посилання. У цього тега є різні атрибути. Давайте почнемо з "target".

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

значення "_self"Означає, що сторінка відкриється в цьому ж вікні.

значення "_new"Означає, що сторінка відкриється в новому вікні (деякі браузери відкривають не нове вікно, а створюють нову вкладку в браузері).

значення "_blank"Означає, що сторінка буде відкрита в новій вкладці.

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

Наступний атрибут "href"Означає шлях до сторінки. Так як нам поки посилатися ні на що, то доводиться послатися на ту ж сторінку. Що стосується форми запису, то тут бувають абсолютні і відносні шляхи.

Абсолютний шлях задає повний шлях до файлу, наприклад, так: "https://mysite.ru/images/image1.jpg". А відносний шлях вказують шлях щодо каталогу, в якому знаходиться поточний файл. Наприклад, наш файл"index.html"Лежить в корені сервера, а ми пишемо:"href = `images / image1.jpg`". Це означає те ж саме, що і якби ми написали:"https://mysite.ru/images/image1.jpg". Це, що стосується абсолютних і відносних шляхів.

Сподіваюся, що з атрибутом "href"Все стало зрозуміло. Зрозуміло, посилатися можна не тільки на HTML-сторінки, але і на будь-які файли, будь то картинки, будь то фільми, будь то музика, будь то архіви, будь то ще все, що завгодно.

Відео: HTML 5 Посилання та зображення

Останній атрибут - це "title". Тут все зовсім просто. Цей атрибут задає текст, який буде видно при наведенні мишки на посилання.

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

Тег означає кінець гіперпосилання.

Також можна задавати колір посилань. Знову ж буде працювати чи ні - залежить від браузера. Але все-таки, давайте я Вас з цим познайомлю. Додамо в тег три атрибути: "link","vlink"І"alink". Кожен з цих трьох атрибутів може приймати значення будь-якого кольору. Атрибут"link"Означає колір невідвіданих посилання. Відповідно,"vlink"Вказує колір відвіданих посилання. І, нарешті, атрибут"alink"Вказує колір посилання в момент безпосереднього натиснення. Як бачите, тут теж нічого складного немає.

Тепер додамо зображення, але перш, ніж це робити. Відразу після додавання HTML-посилання ставимо тег "
". Цей тег також є поодиноким, і він означає перехід на новий рядок. Напишемо в тезі такий код:

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

Відео: Як зробити Картинку Посиланням

Атрибут "src"Вказує шлях до картинки. Знову ж можна вказувати, як абсолютний шлях, так і відносний шлях, в залежності від ситуації.

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

атрибути "width"І"height"Вказують ширину і висоту картинки відповідно. Якщо їх не вказувати, то картинка буде мати такий розмір, який має исходник.

Раджу потренуватися, виводячи різні зображення, тільки попередньо розмістіть файли картинок разом з "index.html". Наприклад, створіть в цьому ж каталозі папку"images"І розміщуйте туди зображення. А в атрибуті"src"Пишіть значення" images / Файл картинки ".

Таким чином, код Вашої сторінки повинен бути приблизно таким:

Ось і вся наука. Як бачите, нічого складного немає, як і все в базових знаннях з HTML і базових знаннях зі створення сайту.

До зустрічі в наступній статті.

З повагою, Михайло Русаков.

P.S. Якщо Ви хочете дізнатися більше по HTML, то подивіться мій безкоштовний курс з прикладом створення сайту на HTML: https://srs.myrusakov.ru/html