Лекція 2. Розмітка тексту. Зображення. Посилання.
Як тільки контент готовий, і додана розмітка для структуризації документа (html, head, title і body), саме час визначити елементи контенту.
В цій лекції представлені елементи, що застосовуються для розмітки текстового та графічного контенту. Їх не так багато, як можна уявити, до того ж ви будете регулярно використовувати далеко не всі.
2.1. Розмітка тексту за допомогою HTML
Абзаци
В минулій лекції ми познайомилися з тегами, необхідними для створення найпростішої HTML-сторінки, і з деякими службовими тегами, які не відображаються в браузері. На цій лекції ми будемо вивчати теги для логічної розмітки тексту. Використовувати їх можна тільки всередині тега <body>.
Почнемо з найпростішого тега <p> (paragraph), за допомогою якого створюються абзаци. За замовчуванням абзаци починаються з нового рядка і мають вертикальні відступи, якими можна управляти за допомогою стилів.
Заголовки і підзаголовки
Для створення структури великих текстів зазвичай використовуються заголовки. У текстових редакторах є можливість виділити частину тексту як заголовок. В мові HTML для виділення заголовків передбачено ціле сімейство тегів: від <h1> до <h6>. Тег <h1> (headline 1) позначає найважливіший заголовок (заголовок верхнього рівня), а тег <h6> позначає підзаголовок самого нижнього рівня.
На практиці нечасто зустрічаються тексти, в яких зустрічаються підзаголовки нижче третього рівня. Тому самими часто використовуваними тегами заголовків є: <h1>, <h2> і <h3>. Варто відзначити, що пошукові системи надають особливе значення заголовкам, тому необхідно вчитися правильно їх використовувати.
Маркований (ненумерований) список
Списки часто використовуються в різних документах. Іноді, щоб зробити список, користувач просто нумерує рядки тексту. Такий підхід не є хорошим, оскільки в документі відсутня логічна сутність «список». У HTML існує сімейство тегів для створення списків: невпорядкованих, упорядкованих і списків визначень.
Невпорядковані (або марковані) списки створюються за допомогою тега <ul> (unordered list), який може містити всередині себе теги <li> (list item), що позначають «елемент списку».
Єдине, що дозволено в межах розмітки маркованого списку (тобто між відкриваючим і закриває тегами ul), - це один або кілька елементів списку. Ви не можете вставити туди інші елементи, і там не може бути нерозміченого тексту. Наприклад:
<ul> - відкриваємо маркований список
<li>Перший пункт списку</li> -додаємо пункти списку
<li>Другий пункт списку</li> -додаємо пункти списку
<li>Наступний пункт списку</li> -додаємо пункти списку
</ul> - закриваємо маркований список
Впорядкований (нумерований) список
Впорядкований список створюється за допомогою тега <ol> (ordered list), який може містити всередині себе теги <li>. Якщо елементи неупорядкованого списку за замовчуванням позначаються маркерами, то елементи впорядкованого списку - нумеруються. Нумеровані або впорядковані списки призначені для елементів, які слідують в певному порядку, наприклад покрокові інструкції. Вони функціонують так само, як і описані раніше марковані списки, за винятком того, що визначені за допомогою тега <ol>, та замість маркерів браузер автоматично вказує номера перед елементами списку, тому вам не потрібно проставляти їх у вихідному документі. Це дозволяє легко міняти місцями елементи списку без повторної нумерації.
Для впорядкованого списку можна задати атрибут start, який змінює початок нумерації. Наприклад:
<ol start = "3">
<li> перший пункт списку </ li>
<li> другий пункт списку </ li>
</ ol>
Призведе до такого результату:
3. перший пункт списку
4. другий пункт списку
Для зміни маркерів і номерів списків варто використовувати властивість list-style-type таблиці стилів CSS. Наприклад для маркованих списків Ви можете змінити форму маркера з кола на квадрат або незаштриховане коло, на власне зображення, або видалити маркер повністю. Для нумерованих списків - замінити традиційні арабські цифри римськими (I., II., IІІ. або i., ii., iii.), літерами (А., В., С., або а., b., с.) та іншими типами нумерації.
Багаторівневий список
Створити багаторівневий список досить просто, пдже будь-який список може бути вкладенийв інший. Спочатку потрібно створити список першого рівня, а потім всередину будь-якого елементу цього списку, між тегами <li> і </li>, додати список другого рівня. При цьому необхідно акуратно закривати всі теги.Приклад правильного коду:<ul> <li>1 <ul> <li>1.1</li> <li>1.2</li> </ul> </li> <li>2</li></ul>Приклад коду з помилкою:<ul> <li>1</li> <ul> <li>1.1</li> <li>1.2</li> </ul> <li>2</li></ul>У прикладі з помилкою вкладений список (1.1-1.2) вставлений не всередину відповідного елемента списку (1), а між елементами (1 та 2), що неприпустимо. Кількість рівнів у списках не обмежена. У багаторівневому списку можна використовувати як впорядковані, так і невпорядковані списки.
Список визначень (термінів)
Список визначень створюється за допомогою трьох тегів:
1. <dl> (definition list) позначає сам список визначень;
2. <dt> (data term) означає термін;
3. <dd> (data definition) позначає визначення терміна.
Теги <dt> і <dd> пишуться парами всередині <dl>. Наприклад:
<dl>
<dt> Термін </ dt>
<dd> Визначення </ dd>
<dt> Другий термін </ dt>
<dd> І його визначення </ dd>
<dt> Кішка </ dt>
<dd> Виріб з шерсті розважального характеру </ dd>
</ dl>
Важливість. Теги <strong> и <b>
Ще раз відзначимо, що ця лекція присвячена логічній розмітці тексту, тому приділяється особлива увага змісту елементів, їх призначенню, а не візуальному оформленню. У попередній частині ми познайомилися з елементами, які призначені для розмітки великих блоків тексту: заголовків, абзаців і списків. В цій і наступних частинах ми познайомимося з елементами, призначеними для розмітки невеликих фраз і окремих слів.
Перші два теги, що ми розглянемо, призначені щоб вказати на важливість слова чи фрази. Тег <strong> визначає важливість зазначеного тексту. Тег <b> (bold) призначений для виділення тексту без додання йому особливої важливості.
Найкраще відмінності цих тегів будуть помітні людям, які використовують спеціальні налаштування ОС, зокрема, сліпим і слабозорим. Коли вони включать функцію читання тексту, то «читалка» буде інтонацією виділяти слова з тегом <strong>. Те ж саме стосується і тегів <em> (emphasis) та <i>. Тег <em> «читалка» виділятиме інтонацією. Візуально обидва тега однакові – вони виділяють текст жирним шрифтом. Відзначимо, що новий сенс тегу <b> надали в HTML5. Раніше це був тег, який просто робить текст напівжирним. Тобто він був призначений лише для візуального форматування.
Акцентуємо увагу. Теги <em> та <i>
Наступні два тега призначені для акцентування уваги на слові або фразі. Тег <em> визначає текст, на який зроблений особливий акцент, який змінює зміст речення. Наприклад:
Закінчивши економічну кібернетику отримаєте кваліфікацію <em> економіст </ em>
В браузері:
Закінчивши економічну кібернетику отримаєте кваліфікацію економіст
Тег <i> (italic) позначає текст, який відрізняється від навколишнього тексту, але не є більш важливим. Зазвичай так виділяють назви, терміни, іноземні слова. Наприклад, якщо ми хочемо вказати, що інспектор - це якийсь спеціальний термін, то розмітимо текст так:
Зазвичай <i> інспектором </ i> браузера користуються для пошуку помилок.
Візуально обидва тега однакові, вони виділяють текст курсивом. Новий сенс тегу <i> надали в HTML5. Раніше це був просто тег для виділення тексту курсивом.
Переноси та розділювачі. Теги <br> и <hr>
Іноді виникає необхідність вставити в текст перенесення рядка, не створюючи при цьому абзац. Наприклад, при розмітці віршів або текстів пісень. Для цього в HTML передбачений одиночний тег <br> (break). Іноді цей тег використовується для розбиття тексту на «як би абзаци», що є поганим підходом. Використовуйте для розмітки абзаців тег <p>.
Одиночний тег <hr> (horisontal rule) використовується для того, щоб створити горизонтальну лінію-розділювач. Якщо ви хочете вказати, що одна тема або думка закінчена і починається інша, можете вставити так званий тематичний розрив на рівні абзацу за допомогою елемента hr. Він додає розділювач між логічними розділами або абзацами тексту без введення нового рівня заголовка.
У специфікаціях HTML до версії HTML5 елемент hr визначений як «Горизонтальна лінія», так як саме це він додає на сторінку. Браузери раніше відображають hr як затінену горизонтальну лінію, розміщену на окремому рядку, за замовчуванням залишаючи вільний простір зверху і знизу. На зовнішній вигляд цієї лінії можна впливати за допомогою атрибутів, але правильніше робити це за допомогою CSS (це буде вивчатися в наступних лекціях).
Якщо вам потрібна лише декоративна лінія, то краще створіть правило, вказавши кольорові рамки перед або після обраного фрагмента тексту за допомогою CSS.
Цитати
У HTML існує декілька тегів для позначення цитат:
• <blockquote> призначений для виділення довгих цитат, які можуть складатися з кількох абзаців. Тег виділяє цитату як окремий блок тексту з відступами.
• <q> (quote) призначений для виділення коротких цитат в тексті пропозиції. Текст всередині цього тега автоматично обрамляється лапками.
• <cite> використовується для того, щоб виділити джерело цитати – назву твору, але не автора цитати.
Верхні та нижні індекси
Наступні два тега зазвичай використовуються не для виділення слів, а для виділення окремих символів. Їх використовують для вказівки одиниць виміру або для написання простих формул. Наприклад: 20м2, H2O, X3+X2=1
Тег <sup> (superscript) відображає текст у вигляді верхнього індексу.
Тег <sub> (subscript) відображає текст у вигляді нижнього індексу.
Варто відзначити, що ці теги є чисто презентаційними і не мають власної семантики. Ці теги можна використовувати всередині один одного для створення більш складних формул. Якщо вам потрібно вставити дуже складну формулу в HTML-документ, краще скористатися спеціальним мовою розмітки MathML.
Відмічаємо зміни. Теги <del> і <ins>
Будь-який документ протягом свого «життя» може змінюватися. З поширенням динамічних веб-додатків, вносити зміни в HTML-документи стало простіше простого. Іноді виникає питання: а що ж саме було змінено в документі, що було додано, а що видалено? Якраз для опису змін призначені теги <del> і <ins>.
<del> (delete) виділяє текст, який був вилучений у новій версії документа.
<ins> (insert) виділяє текст, який був доданий в новій версії документа.
Найпростішим прикладом застосування цих тегів може служити список помилок. Коли помилка виправлена, її позначають тегом <del>, якщо знайдена нова помилка, то її додають у список і позначають тегом <ins>.
Переформатований текст
Напевно, ви вже помітили, як відрізняється відображення коду в HTML-редакторі і в браузері. Ви можете ставити скільки завгодно пробілів в HTML-коді, але браузер відобразить їх як один. Ви також можете ставити скільки завгодно переносів рядка в HTML-коді, а в браузері перенесення не буде, якщо тільки не використовувати спеціальні теги, наприклад <p> або <br>. Змінити цю поведінку браузера можна за допомогою тега <pre> (preformatted), який позначає «попередньо відформатований текст». Браузер зберігає і відображає всі прогалини і переноси, що є всередині тега <pre>. Найчастіше цей тег використовується при відображенні прикладів коду.
Властивість white-space:рге каскадних таблиць стилів також може бути використано для збереження пробілів і абзацних відступів на сторінці. На відміну від тега <рге>, шрифт тексту, відформатованого за допомогою властивості white-space, не відображається як моноширинний.
Просто виділений текст
У HTML5 з'явився новий тег <mark>, який позначає виділений текст. Іноді при роботі з об'ємними текстами ми використовуємо маркер, щоб виділяти ключові слова, ідеї або щось інше на що варто звернути увагу. Таке ж призначення і у тега <mark>. У сучасних браузерах текст всередині <mark> підсвічується жовтим фоном.
Вставка спеціальних символів
Залишилася ще одна пов'язана з текстом тема, перш ніж ми перейдемо до наступного питання. Деякі загальні символи, такі як символ авторського права ©, що не є частиною стандартного набору ASCII. Інші позначення, наприклад знак менше (<) – якщо Ви помістіть його окремо в HTML-документі, браузер буде інтерпретувати його як початок тега. У коді сторінок потрібно уникати подібних символів. Уникати - значить не вводити безпосередньо символ, а вказувати його числове або іменоване символьне посилання. Коли браузер «бачить» таке посилання, він підставляє належний значок в цій позиції при виведенні сторінки. Існує два способи звернутися до певного символу: за числовим значенням (числова сутність) або використовуючи скорочене ім'я для символу (іменована сутністю). Всі символьні посилання починаються з амперсанда (&) І закінчуються крапкою з комою (;).
Це стане ясніше, коли ми розглянемо приклади. Так, я хотів би додати символ авторського права до моєї сторінці, тому повинен використовувати іменовану сутність © (або її числовий еквівалент ©) в тій позиції, де я хочу відобразити символ. Наприклад:
<р> Усі права захищені © 2015, Економічна кібернетика </ р>
або:
<р> Усі права захищені © 2015, Економічна кібернетика </ р>
в браузері буде виглядати, як:
Усі права захищені © 2015, Економічна кібернетика
Мова HTML визначає сотні іменованих символьних сутностей, як частина мови розмітки, тобто ви не можете створити власну. Повний список символьних посилань представлений на сайті: www. webstandards.org/learn/reference/charts/entities/.
2.2. Посилання
Що таке посилання?
Створюючи сторінку для Всесвітньої павутини, ви ймовірно станете вставляти посилання на інші веб-сторінки: розділи власного сайту або сторонні ресурси. На посиланнях побудована вся Всесвітня павутина. Зараз ми розглянемо принципи розмітки, завдяки яким працюють посилання на сторонні сайти, інші розділи власного сайту, а також посилання в межах однієї сторінки. Є елемент, який робить можливою роботу посилань - це якір (прив’язка), або тег <а> (anchor).
Посилання, зазвичай, виглядає як підкреслена частина тексту, клацаючи на якій ви переходите на іншу сторінку, відкриваєте зображення або починаєте завантажувати файл. Якщо уявити, що Інтернет це величезна мережа з безліччю вузлів, то посилання будуть нитками, що з'єднують всі вузли цієї мережі. Посилання створюються за допомогою дуже простого і короткого тегу <a> Наприклад:
<a href="https://htmlacademy.ru"> Сайт з лабами по Web-програмуванню</a>
Задаємо адресу посилання
Щоб перетворити виділений текст на посилання, помістіть його між відкриваючим і закриваючим тегами <а> та </а> і за допомогою атрибуту href (hypertext reference) вкажіть URL-адресу сторінки, на яку буде здійснюватися перехід. Вміст елемента якоря стає гіпертекстовим посиланням. Тег <a> без адреси не використовується, оскільки він описує посилання яке нікуди не веде. Наприклад:
<a href="http://www.ekibernetika.org.ua"> сайт кефедри ЕК </a>
У посилання в прикладі задано адресу http://www.ekibernetika.org.ua. Значенням атрибута є URL, який зазвичай називають просто адресою. Адреси бувають різні: абсолютні, відносні, ті що вказують на сторінку, на файл, зображення, ті що містять якір і так далі. А значить і посилання може вказувати на будь-який об'єкт в Інтернеті – на будь-яку веб-сторінку, на будь-який файл. Якщо клацнути по посиланню, що веде на файл, то браузер запропонує його завантажити. Однак, якщо браузер вміє обробляти файли цього типу, то вміст файлу відкриється прямо в браузері. Найчастіше так відбувається із зображеннями. Останнім часом браузери навчилися відкривати .pdf файли і багато інших.
Абсолютна адреса
Поговоримо детальніше про адреси. Вони можуть бути абсолютними і відносними. Абсолютні адреси містять в собі протокол, ім'я сервера і шлях. Наприклад, в адресі https://htmlacademy.ru/courses:
https:// - це протокол
htmlacademy.ru - ім'я сервера, також називається домен або хост
/courses - шлях
Абсолютна адреса хороша тим, що однозначно вказує розташування документа. Браузер просто запрошує за вказаним протоколом (https) з зазначеного сервера (htmlacademy.ru) документ із зазначеним шляхом (/courses). Іноді абсолютні адреси записуються в скороченому вигляді, наприклад ось так: /courses. У цьому випадку, браузер підставляє протокол і сервер поточної сторінки. Наприклад, якщо на сайті https://htmlacademy.ru є посилання з адресою /courses, то браузер для запиту перетворює його в наступне: https://htmlacademy.ru/courses.
Використовуйте скорочені абсолютні адреси при заданні посилань всередині свого сайту, тоді у випадку зміни домену вам не доведеться нічого змінювати в коді сайту.
Відносна адреса
Відносне посилання описує шлях до зазначеного документа відносно поточного. Відносна URL-адреса вказуються при створенні посилань на інші документи на тому ж сайті (тобто на одному і тому ж сервері). У ній не потрібно вказувати протокол або домен, а тільки шлях до файлу. Ось приклади відносних адрес:
courses/1
./courses
../../run/1
У відносних адресах можуть використовуватися спеціальні символи, аналогічні символам у шляхах файлових систем: / і .. .
Якщо браузер бачить, що у посиланні задана відносна адреса, то він повинен перетворити цю адресу в абсолютну, щоб знати куди веде посилання. Для цього браузер використовує поточну адресу сторінки. Наприклад, так перетворюються адреси різних посилань на одній і тій же сторінці:
|
Поточна адреса |
Адреса в посиланні |
Перетвориться в |
|
2 |
||
|
.. |
||
|
../../contacts |
Використовувати відносні адреси для навігації по сайту не рекомендується. Однак відносні адреси бувають корисні, наприклад, у зовнішніх CSS-файлах.
Посилання з якорем
Посилання з якорем зазвичай використовуються для створення навігації всередині конкретної сторінки. Наприклад, змісту на початку сторінки з великою статтею. Посилання з якорем містить символ #, після якого йде ідентифікатор. Ідентифікатор створюється за допомогою атрибуту id, який може бути заданий у будь-якого тега.
Можна задати адресу, що складається з одного якоря, наприклад:
<a href="#glava1"> Глава 1 </a>
При клацанні на таке посилання браузер знайде на сторінці елемент з атрибутом id зі значенням glava1 і прокрутить вікно сторінки до нього. Тобто перезавантаження сторінки не відбудеться. Якір також можна використовувати і в абсолютних адресах, тоді після переходу на потрібну сторінку станеться прокрутка до заданої частині цієї сторінки.
Створення посилання на фрагмент іншого документа
Щоб створити посилання на фрагмент, що знаходиться в іншому документі, потрібно в кінець URL-шляху до документа (абсолютного або відносного) додати ім'я цього фрагмента. Наприклад, посилання на заголовок «Н» на сторінці глосарію з іншого документа в тому ж каталозі буде виглядати наступним чином:
<а href = "glossary.html#startN">Глосарій, буква Н </а>
Можливо навіть створення посилань на певне розташування на сторінці іншого сайту - для цього потрібно лише вказати в кінці абсолютного URL-шляху ідентифікатор фрагмента, як тут:
<а href = "http://www.example.com/glossary.html#startN"> Глосарій, буква H </a>
Спливаюча підказка
Для того, щоб додати посиланню спливаючу підказку, треба використовувати атрибут title. Наприклад:
<a title="Подсказка" href="#">
Підказка з'явиться, коли курсор затримається над посиланням деякий час. Підказки допомагають роз'яснити призначення незрозумілих посилань, а також посилань-зображень.
2.3. Робота з картинками.
Додання зображень
Щоб додати на сторінку зображення, потрібно використовувати одиночний тег <img> (image) з атрибутом src (source), в якому вказана адреса картинки. наприклад:
<img src = "logo.png">
До речі, найпоширенішими форматами зображень у мережі є JPEG і PNG.
Розміри зображень
Щоб управляти шириною або висотою зображення, потрібно використовувати атрибути width і height. Приклад:
<img width = "100" src = "...">
В прикладі зображенню задана ширина 100px (пікселів). Зверніть увагу, що в атрибуті width після цифри немає px. Якщо ви задаєте розмір картинки в пікселях, то використовуйте просто цифри. Додавати px не потрібно, такий стандарт.
У наступному прикладі, зображенню задана відносна ширина 50 відсотків:
<img width = "50%" src = "...">
Висоту у відсотках зазвичай не задають. Якщо задати лише один з розмірів, ширину або висоту, то другу розмірність браузер обчислить самостійно виходячи з пропорцій зображення. Якщо ж задати і ширину, і висоту для картинки:
<img width = "100" height = "100" src = "...">
то браузер може порушити пропорції вихідного зображення.
Альтернативний текст
Якщо у користувача відключені зображення чи їх неможливо завантажити, то в браузері відображається альтернативний текст. Наприклад, якщо меню зроблено за допомогою зображень, то альтернативний текст допоможе зрозуміти, куди веде кожен пункт. Загалом, задавати альтернативний текст хороший стиль програмування, хоча і не є обов`язковим. Альтернативний текст зображення задається за допомогою атрибуту alt (alternative). Приклад:
<img src = "cat.png" alt = "Кіт у повному розквіті сил">
Зображення з посиланням
Посилання можна робити не лише за допомогою тексту, але і за допомогою зображень. Для цього потрібно обернути тег <img> в тег <a>. Наприклад:
<a href="http://keksby.ru">
<img src = "cat.png" alt = "Кіт">
</a>
Часто посилання-зображення використовуються в галереях, коли на зменшену версію зображення ставиться посилання на повнорозмірну картинку.