Форматування тексту Форматування тексту засобами HTML
При виведенні тексту на екран монітора браузери ігнорують форматування, яке виконується при створенні тексту текстовим редактором, тобто ігноруються невідтворювані символи переведення рядка, абзацу, іноді навіть ігноруються порожні (без тексту) рядки. Форматування тексту мовою HTML виконується використання спеціальних тегів і передбачає створення заголовків, абзаців, вирівнювання тексту, виділення тексту напівжирним шрифтом, курсивом, підкресленням, зміну розміру шрифту. Для того, щоб відобразити текст у повній відповідності до форматування, здійсненого за допомогою текстового редактора (прогалини, невідтворювані символи переведення рядка), використовуйте контейнер <pre>…</pre>
Це лого відображене за допомогою попередньо відформатованих символів та тега <pre>
___________________________$
_________________________$
_______________________$$
______________________$$
______________________$
______________________$
_________$$$$_$$$$
______$$$$$$$$$
____$$$$$$$$$
___$$$$$$$$$
__$$$$$$$$$
_$$$$$$$$$
_$$$$$$$$$
_$$$$$$$$$
_$$$$$$$$$
__$$$$$$$$$
___$$$$$$$$$
____$$$$$$$$$$
_____$$$$$$$$$
______$$$$$$$$$
________$$$$$$$$
__________$$$$$$$
____________$$$$$$
____________$$$$
Атрибути
Всі HTML елементи можуть мати атрибути:
Атрибути надають додаткову інформацію про елемент
Атрибути завжди вказуються в початковому тезі
Атрибути зазвичай входять в пари ім'я/значення, наприклад: <p name="value">
Атрибути поділяють на універсальні (які можна застосувати до усіх тегів) і специфічні (які є особливими і застосовуються в певних тегах, з конкретною метою). Нижче у таблиці представлений обширний список атрибутів і тегів, у яких вони застосовуються. Значок (*) означає, що це універсальний атрибут. Також варто зазначити, що є застарілі теги та атрибути, які не варто застосовувати, але необхідно про них знати (такі теги та атрибути не виділяються в даній таблиці).
Форматування символівМова HTML надає можливість виділяти фрагменти тексту напівжирним шрифтом, курсивом, підкресленням тощо. Для цього в HTML існують спеціальні дескриптори, які називають дескрипторами стилів.
Дескриптори стилів є контейнерами фізичними: <br>, <hr>, <i>, <sub>, <sup>, <u>, <pre>, <nobr>, <wbr>, <strike>.
або логічними:
<cite> — текст-цитата,<code> — текст коду програми,<kbd> — назва клавіші,<samp> — тест фрагменту результатів виконання програми,<small> — зменшення розміру шрифту на 1,<var> — назва змінної або параметра,<big> — збільшення розміру шрифту на 1,<xmp> — текст-зразок (переважно моноширинний).
ШрифтТег <font> використовувався в HTML 4 для вказівки шрифту, розміру шрифту та кольору тексту. Не підтримується в HTML 5.
Атрибут face задається одним, або кількома назвами шрифтів, розділеними комами. З цього списку вибирається перший з наявних у комп’ютері.Атрибут size вказує абсолютне значення (від 1 до 7) чи відносне (від –4 до +4) розміри шрифту по відношенню до розміру основного шрифту.Атрибут color можна задавати як значення #RRGGBB схеми RGB. Тут RR — інтенсивність червоного кольору у шістнадцятковій системі (цифри 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F), GG — зеленого, BB — синього кольору. Атрибут color можна задавати також як одне зі сталих значень
<html> <head> <title>Приклади задання кольору</title> </head > <body> <font size="+2">Можна використати такі кольори:</font><br> <font color="aqua">бірюзовий, </font> <font color="black">чорний, </font> <font color="blue">світло-синій, </font> <font color="fuchsia">бузковий, </font> <font color="gray">сірий, </font> <font color="green">зелений, </font> <font color="lime">салатовий, </font> <font color="maroon">бордовий, </font> <font color="navy">синій </font> <font color="olive">оливковий, </font> <font color="purple">фіолетовий, </font> <font color="red">червоний, </font> <font color="silver">сріблястий, </font> <font color="teal">сіро-зелений, </font> <font color="white">білий, </font> <font color="yellow">жовтий, </font> <font color="#fg9012">#fg9012 </font> </body> </html>
Основи гіпер-посилань
HTML посилання
HTML посилання складають основу Веб, вони пов'язують між собою різні веб-сторінки.
Посилання (гіперпосилання) створюються за допомогою тегу <a>. Посилання складається з двох частин: контенту та адреси посилання, наприклад:
<p>Замовити книжки у <a href="https://shop.ua">магазині</a></p>
Контент посилання - це фрагмент тексту, зображення чи будь-який блок, який виділяється в документі (за замовчуванням, синім кольором і підкресленням).
Адресну частину посилання для користувача не видно, вона представляє URL-адресу об'єкта, до якого необхідно перейти.
Атрибути тегу <a>
download - вказує, що ціль буде завантажена, коли користувач натисне гіперпосилання.
href - вказує URL-адресу сторінки, на яку переходить посилання.
target - вказує, де відкрити пов’язаний документ ("_blank", "_parent", "_self", "_top")
Уставляння гіпертекстових посилань в HTML-документ
Uniform Resource Locator (URL) - єдиний покажчик ресурсів, що визначає місцезнаходження ресурсу. В загальному вигляді має формат:
метод://ІР адреса сервера|доменна адреса сайту/шлях#якір.
Найбільш поширені методи доступу: http, mailto, file, ftp.
Метод http надає доступ до веб-сторінки за протоколом HTTP, наприклад: <a href="http://www.site.ua/">
Метод mailto запускає сеанс поштового зв'язку із зазначеним адресатом і хостом, наприклад: <a href="mailto:[email protected]">
Метод file забезпечує читання файлу з локального диска, наприклад: <a href="file://gallery/pictures/summer.html">
Метод ftp здійснює запит до FTP-сервера на отримання файлу, наприклад: <a href="ftp://pgu/directory/library">
Метод tel створення посилання з номером телефону - з телефонами, здатними виходити в Інтернет і ноутбуками, які прив'язані до телефонів, посилання з номером телефону стають все більше і більше корисними. <a href="tel:+380970000000">
Адреси описують, де знаходиться ресурс, наприклад, www.site.ua. Якщо адреси не вказано, то посилання вважається локальним, тобто, воно відноситься до тієї ж машини, на якій знаходиться html-документ, що містить посилання.
Далі вказується шлях (частковий або повний), за яким здійснюється перехід.
Під якорем розуміють посилання на місце всередині поточного html-документа.
Сам текст URL не відображається браузером, він використовується для виконання запропонованих дій при активації посилання (зазвичай, клацанням миші).