Здрастуйте, шановні читачі блогу . У черговій статті з цієї рубрики ми продовжимо розглядати теги. Раннє ми дізналися що таке Html теги і за версією валідатора W3C ), поговорили про оформлення коментарів і Doctype), а так само зачепили тему символів пробілу в Html коді і спецсимволов (мнемонік) . Так, ще ми обговорили можливості завдання кольори в Html .
Сьогодні я хочу докладніше зупинитися на тих елементах мови гіпертекстової розмітки, з якими ви будете найчастіше стикатися в роботі над своїм веб-проектом. Я кажу про вставку зображень і гіперпосилань в код вебсторінок. Без знання цього дуже важко буде продуктивно працювати над дизайном сайту. Ці теги активно використовуються як при написанні та оформленні статей, так і в оформленні шаблону, натягнутого на каркас движка.
Як вставити картинку — html теги Img
Припустимо, що ви використовуєте для написання статей візуальний редактор дозволяє не замислюватися, яким саме чином прописуються теги картинок і гіперпосилань в коді. Але справа в тому, що жоден редактор не є ідеальним, і часто для виправлення чергового бага в оформленні тексту статті просто необхідно буде перейти в режим html редактора і внести зміни безпосередньо в самі теги малюнків і посилань.
Якщо ви будете знати, як вставляти в HTML документ картинки та посилання, то це може сильно спростити вам життя і зекономити час. Тим більше, що вивчити десяток найпоширеніших елементів не складе праці. Реально використовуваних при сучасній верстці тегів залишилося не так вже й багато, ну і, звичайно ж, сьогоднішні герої є одними з найбільш розповсюджених і часто вживаних.
З іншого боку, в оформленні використовуваного вами шаблона також активно застосовуються ті ж самі елементи — вставки посилань, зображень, контейнери, списки (тут про них йдеться), різні форми і таблиці (Tr, Th, Td, Table).
І, отже, для того, щоб розуміти структуру шаблону (тут про шаблони Joomla розповідається, а тут про теми WordPress) і при необхідності вносити в нього зміни, знову ж таки необхідно знання хоча б невеликої кількості елементів коду. Повірте, витрачений на це час з лишком окупиться в подальшому. Ну, будемо вважати, що я вас переконав у необхідності знайомства з мовою розмітки і пора переходити безпосередньо до героїв нашої сьогоднішньої публікації.
Для вставки картинок на сторінку служить html тег Img. Представлена нижче картинка вставлена з допомогою нього:
Атрибут Src дозволяє вказати ім’я та місце зберігання файлу зображення (іншими словами — шлях до нього). При цьому може бути вказана відносна або абсолютна посилання на файл з картинкою. Шляхи задаються за допомогою символу ‘/’, який служить роздільником між назвами вкладених каталогів, у яких зберігаються файли малюнків.
Абсолютний шлях у Src буде починатися з http://vash_sait.ru (для мого блогу — https://). Далі, використовуючи ‘/’ для розділення імен вкладених папок, прописується повний шлях до файлу картинки, закінчуючись в кінці ім’ям і розширенням самого файлу. Наприклад, images/finik.jpg
Відносний шлях у Src задається за допомогою визначення відносного шляху від вихідної папки, в якій лежить файл самого HTML документа і з якої ви намагаєтеся відкрити зображення, до графічного файлу. Якщо цей файл знаходиться на сервері в тій же папці, що і документ, з якого до нього звертаються, то шлях до нього вказувати не потрібно — потрібно вказати тільки ім’я графічного файлу (зберігаючи регістр букв).
Якщо цей файлик знаходиться на тому ж сервері, але в іншому каталозі, потрібно вказати шлях до нього від каталогу, де знаходиться документ, з якого до нього звертаються (у прикладі, показаному вище, використовується як раз відносний шлях — image/finik.jpg).
Задаємо ширину і висоту зображення з допомогою атрибутів Width і Height
Html-атрибути Width і Height дозволяють встановити розмір області (ширину і висоту, відповідно), що відводитиметься на сторінці під дане зображення. Вони вставляються усередині тега Img, наприклад, так:
Якщо ця область буде не відповідати реальному розміру картинки, яку ви хочете вставити, малюнок буде, відповідно, розтягнутий або звужений до заданого розміру. Проте не слід використовувати цей спосіб, скажімо, для зменшення розміру вставляється в документ малюнка. Адже його вага залишиться великий, а це буде сповільнювати завантаження веб-сторінки.
Краще попередньо змінити розмір зображення в графічному редакторі (можна навіть і в онлайн фоторедакторі), а вже потім вставляти її в документ. Також при збереженні графічного файлу слід звертати увагу на його підсумковий вагу. Він не повинен бути занадто великий. Іноді краще трохи пожертвувати якістю зображення (благо, що при невеликих розмірах це буде практично не помітно) для зменшення підсумкового ваги.
Використовуйте при збереженні малюнків компактні формати растрової графіки типу GIF (для вставки схематичних зображень) або JPG (для вставки фотографій). Width і Height, на відміну від атрибута Ѕгс (єдиного обов’язкового в тегу Img), є необов’язковими. Багато їх просто не вказують, але вони, тим не менше, дозволяють трохи прискорити завантаження документа.
Справа в тому, що якщо браузер не знаходить Width і Height всередині html тега Img, то йому потрібен час на те, щоб дізнатися розмір картинки, завантажити його і тільки після цього продовжити завантажувати інший вміст документа. У разі ж коли ви прописали Height і Width, оглядач автоматично резервує місце під зображення зазначених у цих атрибутах розмірів і продовжує завантажувати веб-сторінку далі.
Якщо графічні файли, виведені на дану сторінку дуже важкі і їх дуже багато, то вставка Height і Width дозволить користувачам приступити до читання тексту сайту, в той час як графіка ще буде завантажуватися.
Також, якщо ви не вкажете Width і Height всередині Img, то може виникнути ситуація, коли при маленькій картинці і дуже довгому альтернативному тексті (задається атрибутом Alt в тегу Img, про це мова піде нижче), до того як завантажиться графіка, тимчасово відбудеться зсув дизайну сайту, т. к. довгий альтернативний текст буде займати стільки місця, скільки йому знадобиться.
У випадку ж використання Width і Height місце для виведення альтернативного тексту буде обмежено розмірами, визначеними в них розміру. Здебільшого, саме з-за цього я намагаюся прописувати ці атрибути тегу Img.
Alt і Title html тегу Img
Дуже корисними, з точки зору внутрішньої пошукової оптимізації сайту, є атрибути Alt і Title. Читайте про просування і розкручування сайту самостійно або в публікації «Як розкрутити сайт» .
Перший з них задає так званий альтернативний текст для зображення. Цей текст ви зможете побачити, якщо вимкнути показ графіки в браузері. Alt і призначений для цього – розповісти пошуковим системам про те, що за малюнок тут мав би бути. Title призначений для інформування користувача про зміст картинки.
Вміст Title зі складу тега Img показується у спливаючій рядку, якщо користувач підведе миші на малюнку. Обидва цих атрибутів (якщо ви їх прописали) дозволяють включити зображення вашого веб-проекту в пошук по зображеннях Яндекс і Google Images. Тому не варто нехтувати цією можливістю і в обов’язковому порядку прописувати хоча б Alt. Оформлення ваших зображень повинно бути приблизно таким:
Насправді атрибутів, які можуть бути використані в html тег Img, досить багато, і ви можете дивитися їх все хоча б за наведеним посиланням. Але використовувати на практиці ви будете швидше всього лише перераховані мною в цій статті.
Ще раз нагадую про правила написання тегів. Після відкривається трикутної дужки, обов’язково без пробілу, пишеться його назва, потім, через пробіл, пише назва атрибуту, допустимого для нього. Після назви атрибута, без пробілу, ставиться знак «дорівнює» і пишеться в лапках його параметр (наприклад, ширина в пікселях для Width).
Наступний атрибут всередині html тега відокремлюється від попередньої пропуском. В кінці ставиться закриває трикутна дужка. Звертаю вашу увагу, що Img не є парним, тобто у нього немає закриваючого тега.
В ідеалі, приблизно так і повинні бути оформлені всі картинки використовуються на вашому веб-проекті. Такого виду можна домогтися і не правлячи для кожного зображення html-код вручну. Візуальні редактори різних CMS (Joomla, WordPress та ін) дозволяють задати все це багатство в зручному для користувача інтерфейсі, але після пробної налаштування обов’язково перевірте код (в будь-якому візуальному редакторі можна переключитися на показ html коду статті).
Створюємо гіперпосилання за допомогою html-тега посилання «A»
Посилання — один з основних елементів організації документа Html. Без них веб-сторінка була б просто сторінкою. Вони створюються за допомогою тега «А». Обов’язковим атрибутом є тільки Href. Він задає URL (шлях), куди повинен перейти користувач клацнувши по даній гіперпосилання.
Посилання може вести як на внутрішню сторінку вашого ж ресурсу (дуже важливий момент внутрішньої оптимізації пов’язаний саме з перелінковкою сторінок сайту)), так і на сторінку іншого проекту. Html тег A є парним і, відповідно, має закриває елемент. Текст гіперпосилання (анкор — тут про нього докладно написано в плані сприяння SEO просування) розміщується між відкриваючим і закриваючим тегами «A».
Приклад:
Пошукові системи аналізують не тільки сам анкор, але і слова, що її оточують. Це слід враховувати при розміщенні посилань на свій сайт на інших ресурсах. Для того, щоб вона виглядала більш натурально, можна частину тексту винести за межі анкора, наприклад:
Анкор (якщо посилання використовується для внутрішньої перелінковки, то цей текст повинен містити ключові слова, за якими ви хочете просувати статтю, на яку веде цей лінк)
Відкривання в новому вікні і посилання з картинки (зображення)
Ну, гаразд, це ми знову відволіклися на пошукову оптимізацію. Повернемося знову до тегам. Для html тега «A» є один дуже потрібний атрибут, який дозволить відкривати сторінки, на яку вказує дана посилання в новому вікні. Це може знадобитися, якщо ви з однієї своєї сторінки посилаєтеся на безліч зовнішніх документів. У цьому випадку відвідувачу було б зручніше, щоб ваша сторінка завжди залишалася відкритою.
Target для цієї мети має параметр, що дозволяє відкривати сторінку в новому вікні, який називається _BLANK. Якщо Target не заданий в теге A, то посилання буде відкриватися в цьому ж вікні. Приклад використання атрибуту Target:
Зверніть увагу, що порядок атрибутів всередині тегів ніяк не регламентований. З таким же успіхом можна написати:
Як анкора для html тега посилання замість тексту може використовуватися зображення. У цьому випадку Img полягає в відкриваючий і закриваючий теги A:
Є думка, що пошукачі вище цінують посилання з картинки, а за деякими даними виходить протилежне. Але при використанні такого типу лінків немає анкора, в який можна було б вставити потрібні ключові слова. В цьому випадку можна використовувати атрибут Title для тега A.
Title можна використовувати і у випадку звичайного текстового анкора. У цьому випадку інформація прописана в ньому буде видно, якщо підвести курсор миші на гіперпосиланні. Власне, цей атрибут можна використовувати практично у всіх теги мови Html, але особливого толку від цього не буде.
Створення якорів і хеш-посилань
Ще один цікавий атрибут NAME, який раніше досить широко використовувався для створення так званих якорів посилань, до яких можна було звертатися за допомогою так званих хеш-посилань. Трохи заплутано, але зараз спробую внести ясність. Припустимо, що вам потрібно послатися на конкретне місце в тексті документа (не на його початок), де йде обговорення певного питання.
Якщо поставити просту гіперпосилання на цю статтю, то після переходу по ній стаття відкриється в самому її початку і користувачеві доведеться самому відшукувати в ній те місце, на якому ви хотіли сконцентрувати увагу. Так от з допомогою якорів і хеш-посилань можна зробити так, щоб стаття відкривалася саме на тому місці, де ви задумали і користувачеві не доведеться перелопачувати зайвий матеріал.
Для реалізації описаного способу створення гіперпосилань у Html документі раніше потрібно було вставити попередньо якір в ту статтю, на яку буде вести хеш-посилання. Якір представляв із себе конструкцію нагадує звичайну посилання, але при цьому він залишався невидимим для відвідувача. Виглядав він так:
Тобто виходить, що якір складався лише відкриває і закриває тега «А», при цьому він не містив анкора і мав один єдиний обов’язковий атрибут NAME. Параметром цього атрибута служила мітка, назву якої ви повинні були поставити самі. Ця мітка в подальшому використовувалася при створенні хеш-посилання.
Зараз такий спосіб вставки якорів вважається застарілим і валідатором Html коду буде розцінюватися, як груба помилка. Будь ласка, зверніть на це увагу. Тепер якоря розставляються за допомогою додавання селектора ID в найближчий тег.
Припустимо, що для заголовка статті це могло б виглядати так:
Заголовок
Отже, після того, як ми розставили в тексті статті всі необхідні якоря, можна приступати до створення хеш-посилань, які будуть посилатися на місця в тексті статті, заздалегідь помічені описаним вище способом (з допомогою селектора ID).
Гіперпосилання створюється стандартним чином, за винятком того, що в кінці Урла, який прописується в Href ставиться знак решітки (знак дієза або хеш-символ), а після нього йде назва мітки того якоря, який стоїть в потрібному місці тексту статті.
Хеш-посилання буде виглядати приблизно так:
За допомогою хеш-посилання ви перейдете не тільки на потрібну сторінку, але також браузер автоматично прокрутить вікно до потрібного місці в тексті.
Якщо якір знаходиться в тому ж Html документі, що і хеш-посилання, то можна вказати тільки якір.
Удачі вам! До зустрічей на сторінках блогу
