Лекція 2: HTML та HTML5
Лекція 2: HTML та HTML5
1.1. Основи HTML
HTML (HyperText Markup Language) - мова гіпертекстової розмітки, що задає розташування елементів на веб-сторінці.
Перегляд HTML-документу здійснюється за допомогою браузера, який відображає документ на основі початкового коду, що описує структуру HTML-документа.
Результатом інтерпретації HTML-документа браузером є веб-сторінка, яка, на відміну від HTML-документа містить не лише текст, але й зображення, звук, відео, інтерактивні елементи та інше. Процес інтерпретації (парсинг) починається перш, ніж веб-сторінка повністю завантажена в браузер. Браузери обробляють HTML-документи послідовно, з самого початку, при цьому обробляючи CSS і співвідносячи таблиці стилів з елементами сторінки.
Основною одиницею мови HTML є тег. За допомогою тегів описується вся структура HTML-документа. Теги оформляються кутовими дужками <ім'я тегу>, між якими прописується ім'я тегу.
Практично всі теги мають атрибути (глобальні, що застосовуються для всіх html-елементів, і власні), які вказуються у форматі параметр = "значення". Атрибути дозволяють змінювати властивості елемента, для якого вони задані. Атрибути прописуються в початковому тезі елемента.
Атрибути class і id застосовні до всіх HTML-елементів. Кожному конкретному елементу можна привласнити кілька значень class і тільки одне значення id. Множинні значення class записуються через пробіл, наприклад, <div class = "nav top">. Значення class і id повинні складатися тільки з букв, цифр, дефісів і нижніх підкреслень і повинні починатися тільки з літер.
Більшість тегів - парні, вони складаються з початкового і кінцевого тегів. Початковий тег показує, де починається елемент, кінцевий - де закінчується. Закриваючий тег утворюється шляхом додавання слешу / перед ім'ям тега: <ім'я тега> ... </ ім'я тега>. Між початковим і кінцевим тегами знаходиться вміст тега - контент.
Одиночні теги не можуть зберігати в собі вмісту безпосередньо, він прописується як значення атрибута, наприклад, тег <input type = "button" value = "Кнопка"> створить кнопку з текстом Кнопка всередині.
Теги можуть вкладатися один в одного, наприклад, <p> <i> Текст </ i> </ p>. При вкладенні слід дотримуватися порядку їх закриття (принцип "матрьошки"), наприклад, наступний запис буде невірним: <p> <i> Текст </ p> </ i>.
1. Структура HTML-документа
HTML слідує правилам, які містяться у файлі оголошення типу документа (Document Type Definition, або DTD). DTD являє собою XML-документ, що визначає, які теги, атрибути та їх значення дійсні для конкретного типу HTML. Для кожної версії HTML є свій DTD.
DOCTYPE відповідає за коректне відображення веб-сторінки браузером. DOCTYPE визначає не тільки версію HTML (наприклад, html), але і відповідний DTD-файл в Інтернеті.
<! DOCTYPE html> <! - Оголошення формату документа ->
<html>
<head> <! - Технічна інформація про документ ->
<meta charset = "UTF-8"> <! - Визначаємо кодування символів документа ->
<title> ... </ title> <! - Задаємо заголовок документа ->
<link rel = "stylesheet" type = "text / css" href = "style.css"> <! - Підключаємо зовнішню таблицю стилів ->
<script src = "script.js"> </ script> <! - Підключаємо сценарії ->
</ head>
<body> <! - Основна частина документа ->
</ body>
</ html>
Елементи, що знаходяться всередині тега <html>, утворюють дерево документа, так звану об'єктну модель документа, DOM (document object model). При цьому елемент <html> є кореневим елементом.
Найпростіша структура веб-сторінки
Щоб розібратися у взаємодії елементів веб-сторінки, необхідно розглянути так звані "родинні стосунки" між елементами. Відносини між множинними вкладеними елементами підрозділяються на батьківські, дочірні та сестринські.
- Предок - елемент, який містить в собі інші елементи. На рис. 1 предком для всіх елементів є <html>. У той же час елемент <body> є предком для всіх містяться в ньому тегів: <h1>, <p>, <span>, <nav> і т.д.
- Нащадок - елемент, розташований всередині одного або більше типів елементів. Наприклад, <body> є нащадком <html>, а елемент <p> є нащадком одночасно для <body> і <html>.
- Батьківський елемент - елемент, пов'язаний з іншими елементами нижчого рівня, і що знаходиться на дереві вище їх. На рис. 1 <html> є батьківським тільки для <head> і <body>. Тег <p> є батьківським тільки для <span>.
- Дочірній елемент - елемент, безпосередньо підлеглий іншому елементу більш високого рівня. На рис. 1 тільки елементи <h1>, <h2>, <p> і <nav> є дочірніми по відношенню до <body>.
- Сестринський елемент - елемент, що має загальний батьківський елемент з даним, так звані елементи одного рівня. На рис. 1 <head> і <body> - елементи одного рівня, так само як і елементи <h1>, <h2> і <p> є між собою сестринськими.
1.1. Елемент <html>
Є кореневим елементом документа. Всі інші елементи містяться всередині тегів <html> ... </ html>. Все, що знаходиться за межами тегів, не сприймається браузером як код HTML і ніяк їм не обробляється. Для елемента доступні атрибути manifest і xmlns, а також глобальні атрибути.
1.2. Елемент <head>
Розділ <head> ... </ head> містить технічну інформацію про сторінку: заголовок, опис, ключові слова для пошукових машин, кодування і т.д. Введена в ньому інформація не відображається у вікні браузера, однак він містить велику кількість даних, які вказують браузеру, як слід обробляти сторінку. Для елемента доступні глобальні атрибути.
1.3. Елемент <title>
Обов'язковою тегом розділу <head> є тег <title>. Текст, розміщений всередині цього тегу, відображається у заголовку браузера. Довжина заголовка повинна бути не більше 60 символів, щоб повністю поміститися в заголовку. Текст заголовка повинен містити максимально повний опис вмісту сторінки. Для елемента доступні глобальні атрибути.
1.4. Елемент <meta>
Необов'язковим тегом розділу <head> є одинарний тег <meta>. З його допомогою можна задати опис вмісту сторінки і ключові слова для пошукових машин, автора html-документа та інші властивості метаданих. Елемент <head> може містити кілька елементів <meta>, бо в залежності від використаних атрибутів вони несуть різну інформацію. Для елемента <meta> доступні атрибути charset, content, http-equiv, name, а також глобальні атрибути.
1.5. Елемент <style>
Всередині цього елемента задаються стилі, які використовуються на сторінці. Для завдання стилів в html-документі використовується мова CSS. Таких елементів на сторінці може бути декілька. Для елемента доступні атрибути media, scoped, type, а також глобальні атрибути.
Всередину цього елемента можна записувати код форматування як самих елементів сторінки, так і сторінки цілком.
<style type="text/css">
.paper {
width: 200px;
height: 300px;
background-color: #ef4444;
color: #666666;
}
</style>
Щоб підключити до елементу заданий стиль, необхідно через атрибут class (або id) привласнити елементу відповідну назву:
<div class="paper">
...
</div>
CSS-код можна вбудовувати безпосередньо в елемент розмітки у вигляді значення атрибута style, наприклад:
<p style="color: #666666; background-color: #ef4444; padding: 20px;">
1.6. Елемент <link>
Задати стилі для документа можна також за допомогою іншого способу - записати їх в окремий файл з розширенням .css, наприклад, style.css.
Підключити файл зі стилями до веб-сторінці можна двома способами:
А. через директиву @import url
<! DOCTYPE html>
<html>
<head>
<style>
@import url (style.css);
</ style>
<meta>
<title> </ title>
</ head>
Б. з використанням елемента <link>
Елемент не вимагає закриваючого тегу. Даний елемент визначає відносини між поточною сторінкою та іншими документами. Таких елементів на сторінці може бути кілька. Запис буде мати наступний вигляд:
<link rel = "stylesheet" href = "style.css" type = "text / css">
Для елемента доступні атрибути href, hreflang, media, rel, type, а також глобальні атрибути.
1.7. Елемент <script>
Елемент <script> дозволяє приєднувати до документа різні сценарії. Закриваючий тег обов'язковий, при цьому текст сценарію може розташовуватися або всередині цього елемента, або в зовнішньому файлі. Якщо текст сценарію розташований в зовнішньому файлі, то він підключається за допомогою атрибутів елемента. Для елемента доступні атрибути async, charset, defer, src, type, а також глобальні атрибути.
1.8. Елемент <body>
В цьому розділі знаходиться весь вміст документа. Для елемента доступні глобальні атрибути.
1.2. HTML теги
HTML теги є основою мови HTML. Кожен тег містить певну інформацію, яка може описувати документ загалом або спосіб форматування тексту. Весь вміст веб-сторінки задається за допомогою тегів. Тег поміщається в кутові дужки <тег>. Найчастіше для тегу задається парний закриваючий тег, але в деяких випадках він відсутній.
Інформація, що розміщена між відкриваючим і закриваючим тегом, називається його контейнером.
В таблиці http://html5book.ru/html-tags/ наведено повний перелік тегів, що підтримуються HTML4 и HTML5.
У тегів також можуть бути атрибути. HTML атрибути повідомляють браузеру, яким чином має відображатися той чи інший елемент сторінки. Атрибути дозволяють зробити більш різноманітними зовнішній вигляд інформації, доданої за допомогою однакових тегів. Значення атрибута завжди заключають в лапки "". Назви та значення атрибутів не чутливі до регістру, але, тим не менш, рекомендується набирати їх у нижньому регістрі.
<тег атрибут1 = "значення1 " атрибут2=«значення1 значення2» > контент </ тег>
Універсальні атрибути можуть бути використані для будь-якого HTML-елемента, власні атрибути тільки для певного типу тегів
Самими поширеними універсальними атрибутами є
- class Визначає ім'я класу для елемента (використовується для визначення класу в таблиці стилів). Прийняті значення: ім'я класу.
- idВизначає унікальний ідентифікатор елемента. Прийняті значення: id - ідентифікатор елемента.
- styleВказує на код CSS, що застосовується для оформлення елемента.
- title Визначає додаткову інформацію про елемент, задаючи спливаючу підказку для сторінки. Прийняті значення: текст.
Умовно теги можна поділити на групи
- Блокові елементи. Характеризуються тим, що займають всю доступну ширину, висота елемента визначається його вмістом, і він завжди починається з нового рядка.
- Рядкові елементи. Є безпосередньою частиною іншого елемента, наприклад, текстового абзацу. В основному використовуються для зміни вигляду тексту або його логічного виділення.
Блокові теги
Загальні характеристики блокових тегів
- На початку і в кінці блокових тегів, автоматично ставиться перенесення рядка.
- В блокових тегах можна управляти шириною і висотою: width, height
- В блокових тегах можна управляти зовнішніми і внутрішніми відступами
- Блокові теги займають всю ширину, наприклад якщо поставити їм фон, то фон займають всю ширину батьківського елементу.
- Оскільки блокові теги займають всю ширину батьківського елементу, то об'єктами знаходяться всередині блокового тегу, можна керувати за допомогою горизонтального та вертикального вирівнювання
- Всередині блокових тегів можна розміщувати інші блокові теги, а також рядкові теги.
Типові блокові теги
<div> Універсальний блоковий елемент.
<p>, <h1>-<h6>, <blockquote> Теги для HTML текста
<hr> Горизонтальна лінія.
<ol>, <ul> Встановлює нумерований (маркований) список.
<table> Створює таблицю.
<form> Встановлює форму на веб-сторінці.
Рядкові теги
Загальні характеристики рядкових тегів
- На відміну від блокових, у рядкових тегів НЕ ставиться автоматичний перенос рядка, на початку і в кінці.
- В рядкових тегах не можна управляти шириною і висотою: width, height
- В рядкових тегів не можна встановлювати зовнішні відступи (margin), лише внутрішні (padding)
- Рядкові теги НЕ займають всю ширину батьківського елементу.
- Оскільки рядкові теги НЕ займають всю ширину батьківського елементу, то елементами, що знаходяться всередині рядкових тегів, не можна керувати за допомогою горизонтального чи вертикального вирівнювання
- Всередині рядкових тегів можна розміщувати інші рядкові теги, але блокові розміщувати не можна.
Типові рядкові теги
<a> Є одним з важливих елементів HTML і призначений для створення посилань.
<br> Перенесення рядка.
<em> Встановлює курсивне накреслення шрифту.
<span> Універсальний рядковий елемент.
<strong> Акцентує текст, зазвичай жирним накресленням.
<sub> Відображає шрифт у вигляді нижнього індексу.
<sup> Відображає шрифт у вигляді верхнього індексу.
<img> Відображає зображення.
1.3. HTML текст
Теги для форматування тексту несуть смислове навантаження і зазвичай задають для тексту, укладеного всередину, стильове оформлення, наприклад, виділяють текст жирним шрифтом або відображають його іншим шрифтом.
Грамотно відформатований текст дає зрозуміти пошуковим системам, які слова несуть важливе смислове навантаження, по яких з них переважно слід ранжувати веб-сторінку в пошуковій видачі. Вся текстова інформація, яка відображається на сайті, розміщується всередині тега <body>.
Тег абзацу <p>
Розбиває текст на окремі абзаци, відокремлюючи один від одного порожнім рядком. Браузер автоматично додає верхній і нижній відступ.
Теги заголовків <h1>-<h6>
Заголовки є важливим елементом веб-сторінки, вони допомагають впорядкувати текст, сформувати його структуру. У специфікації HTML існує шість рівнів заголовків, завдяки чому можна легко виділяти теми і підтеми.
Заголовки є блоковими елементами, завжди починаються з нового рядка. Браузер автоматично додає перед заголовком і після нього порожній рядок.
Текст в заголовках впливає на індексацію сайту пошуковими системами, оскільки багато роботів звертають увагу саме на вміст заголовків сайту, тому, краще завжди використовувати ці теги, міняючи зовнішній вигляд і розмір за допомогою стилів.
При використанні заголовків необхідно враховувати їх ієрархію, тобто за <h1> повинен слідувати <h2> і т.д. Також не допускається вкладення інших тегів в теги <h1> ... <h6>.
Теги для форматування тексту
<em> відображає шрифт курсивом, надаючи тексту значимість.
<strong> задає напівжирне накреслення шрифту, відноситься до тегів логічної розмітки, вказуючи браузеру на важливість тексту.
<sub> використовується для створення нижніх індексів. Зсуває текст нижче рівня рядка, зменшуючи його розмір.
<sup> використовується для створення ступенів. Зсуває текст вище рівня рядка, зменшуючи його розмір.
<pre> дозволяє вивести текст на екран, зберігши початкове форматування. Пробіли і переноси рядків при цьому не видаляються.
<blockquote> Виділяє цитати всередині документа, виділяючи його відступами і переносами рядків.
<br> Переносить текст на наступний рядок, створюючи розрив рядка.
<hr> Використовується для поділу контенту на веб-сторінці. Відображається у вигляді горизонтальної лінії.
1.4. HTML посилання
HTML посилання складають основу Інтернету, адже саме вони пов'язують всі веб-сторінки в єдину мережу.
Посилання, або гіперпосилання, створюються за допомогою тегу <a>. Посилання складається з двох частин: вказівника посилання та адресної частини посилання.
Покажчик посилання являє собою фрагмент тексту або зображення, який візуально виділяється в документі (за замовчуванням, синім кольором і підкресленням).
Адресну частину посилання для користувача не видно, вона представляє URL-адресу об'єкта, до якого необхідно перейти.
Вставка гіпертекстових посилань в HTML-документ
Uniform Resource Locator, URL
Єдиний покажчик ресурсів (URL) визначає місцезнаходження ресурсу. В загальному вигляді має наступний формат:
метод: // ім'я_сервера: порт / шлях # якір.
Найбільш поширені методи доступу: file, http, ftp, mailto.
- Метод file забезпечує читання файлу з локального диска, наприклад:
file://gallery/pictures/summer.html - Метод http надає доступ до веб-сторінці по протоколу HTTP, наприклад:
http://www.anysite.ru/ - Метод ftp здійснює запит до FTP-сервера на отримання файлу, наприклад:
ftp://pgu/directory/library - Метод mailto запускає сеанс поштового зв'язку із зазначеним адресатом і хостом, наприклад:
mailto: [email protected]
Ім'я сервера описує повне мережне ім'я машини, наприклад, www.anysite.ru. Якщо ім'я сервера не вказано, то посилання вважається локальним, тобто воно відноситься до тієї ж машини, на якій знаходиться html-документ, що містить посилання.
За іменем сервера вказується номер порту ТСР, на якому функціонує веб-сервер. Якщо порт не вказано, за замовчуванням використовується порт 80.
Далі вказується шлях, по якому здійснюється перехід по посиланню. Він може бути частковий або повний.
Під якорем розуміють посилання на місце всередині поточного html-документа.
Сам текст URL не відображається браузером, він використовується для виконання запропонованих ним дій при активації посилання (зазвичай клацанням миші).
Абсолютний URL
Абсолютний шлях містить всю інформацію, що необхідна браузеру для знаходження файлу. Абсолютний шлях містить: назву протоколу, доменну або IP-адресу комп'ютера (хосту), папку (шлях до файлу) та ім'я файлу. Наприклад,
http://www.anysite.ru/папка/file.html
Якщо файл знаходиться в кореневій папці, то шлях до файлу буде відсутній:
http://www.anysite.ru/file.html
У разі відсутності імені файлу буде завантажуватися веб-сторінка, яка задана за замовченням у налаштуваннях веб-сервера:
Наявність завершального слеша / означає, що звернення йде до папки, а якщо його немає - то безпосередньо до файлу.
Відносний URL
Відносна URL-адреса описує шлях до зазначеного документа щодо поточного, вона визначається з врахуванням місця розташування веб-сторінки, на якій знаходиться посилання. Відносні посилання використовуються при створенні посилань на інші документи на одному і тому ж сайті. У такому випадку не вказується протокол або домен, а тільки сам шлях до файлу.
Наприклад, у разі переходу зі сторінки http://www.anysite.ru/папка1/папка2/file1.html на сторінку
http://www.anysite.ru/папка1/папка2/file2.html.
Якщо потрібна веб-сторінка знаходиться в тій же папці, що і веб-сторінка, що містить посилання, то посилання буде мати наступний запис:
<a href="file2.html"> Анкор (текст) посилання </a>
Якщо зі сторінки http://www.anysite.ru/папка1/папка2/file1.html потрібно перейти на сторінку http://www.anysite.ru/папка1/папка2/папка3/file2.html, то посилання буде такою:
<a href="папка3/file2.html"> Анкор (текст) посилання </a>
При переході зі сторінки http://www.anysite.ru/папка1/папка2/file1.html на сторінку http://www.anysite.ru/папка1/file2.html посилання буде мати наступний вигляд:
<a href="../file2.html"> Анкор (текст) посилання </a>
У разі переходу з http://www.anysite.ru/папка1/папка2/папка3/file1.html на сторінку http://www.anysite.ru/папка1/file2.html посилання буде такою:
<a href="../../file2.html"> Анкор (текст) посилання </a>
Зовнішні посилання
Посилання на веб-сторінки інших сайтів є зовнішніми, вони вставляються в HTML-документ за допомогою тегу <a>. Щоб створити зовнішнє посилання, потрібно вказати абсолютну URL-адресу, яку починається з протоколу http:// (або https://)
Сам тег <a> повинен розташовуватися всередині блокового елемента, наприклад, <div>, <p> та ін. У блоці тегів <a> ... </a> поміщається текст (анкор посилання) або інший об'єкт, який буде виділятися як посилання, маскуючи при цьому сам адресу.
Текст посилання відображається підкресленим, колір шрифту - синій, при наведенні на посилання курсор змінює вигляд. Основним параметром тега <a> є атрибут href, який задає URL-адреса веб-сторінки. Наприклад:
<a href="http://html5book.ru> анкор </a>
Посилання на розділи поточної сторінки
Внутрішні посилання створюють посилання на різні розділи поточної веб-сторінки, тим самим дозволяючи швидко переміщатися між розділами. Це є зручним у разі, коли на сторінці занадто багато тексту.
Внутрішні посилання також вставляються за допомогою тега <a> з різницею в тому, що атрибут href містить ім'я покажчика (так званий якір), а не URL-адресу. Перед ім'ям покажчика ставиться знак #.
Наприклад, наступний запис додасть невеликий зміст на сторінку з швидкими переходами на відповідні розділи.
<h1> Пори року </ h1>
<h2> Зміст </ h2>
<a href="#p1"> Літо </a> <! - Задаємо якір через id елемента ->
<a href="#p2"> Осінь </a>
<a href="#p3"> Зима </a>
<a href="#p4"> Весна </a>
<p id = "p1"> ... </ p> <! - Додаємо відповідний id елементу ->
<p id = "p2"> ... </ p>
<p id = "p3"> ... </ p>
<p id = "p4"> ... </ p>
Якщо потрібно зробити посилання з однієї сторінки сайту на певний розділ іншої сторінки сайту, то необхідно задати id для цього розділу сторінки, а потім додати його до абсолютної адреси посилання:
<th id = "about_color"> color </ th>
<a href="http://html5book.ru/css-shrifty/#about_color" class="site" target="_blank"> color </a>
Посилання на сторінки одного сайту
При створенні посилань на сторінки власного сайту задаються відносні посилання, які звертаються до певної сторінці на одному і тому ж сервері.
Коли браузер не знаходить у посиланні протокол http://, він виконує пошук зазначеного документа на тому ж сервері. Відносні посилання описують шлях до потрібного файлу щодо положення поточного документа.
У випадку, якщо сторінки знаходяться в одному каталозі, то замість запису
<a href="http://html5book.ru/styling-hyperlinks/"> Оформлення гіпертекстових посилань </a>
досить буде вказати ім'я файлу з розширенням (якщо воно задане в адресі сторінки)
<a href = "styling-hyperlinks" > Оформлення гіпертекстових посилань </a>.
Якщо документи знаходяться в різних каталогах, і кінцевий файл знаходиться у вкладеному каталозі щодо поточного, необхідно вказати ім'я каталогу і ім'я сторінки через слеш, наприклад,
<a href="lessons/lesson1.html"> Урок 1 </a>
При створенні посилання на вищестоящий каталог шлях до файлу повинен починатися з ../, що дослівно означає: повернутися на рівень вище і слідувати за зазначеним шляхом, аналогічно з кнопкою "Назад".
Можна задавати шлях до документів щодо кореневого каталогу. Звернення до кореневого каталогу здійснюється через символ /. Далі вказуються каталоги, в які браузер повинен перейти, щоб дістатися до потрібного документа.
Графічні посилання
Засобами HTML можна було створювати посилання за допомогою тексту або зображень. З появою HTML5 елемент <a> може містити крім вбудованого контенту ще і блокові елементи, тобто, можна об'єднувати в одному посиланню головний заголовок і логотип вашого сайту:
<a href="http://summer.ru">
<h1> ЛІТО </ h1>
<img src = "logo.png" alt = "ЛІТО">
</a>
Атрибути посилань
Крім глобальних атрибутів, елемент <a> підтримує власні атрибути.
- href - значенням атрибута є URL-адреса документа, на яку вказується посилання.
- nofollow - забороняє пошуковій системі переходити за посиланнями на даній сторінці або за конкретними посиланнями.
- target - вказує на те, в якому вікні повинен відкриватися документ, до якого веде посилання. Приймає наступні значення:
_self - сторінка завантажується в поточне вікно;
_blank - сторінка відкривається в новому вікні (вкладці) браузера;
_parent - сторінка завантажується у фрейм-батько;
_top - сторінка завантажується в повне вікно браузера.
1.5. HTML зображення
HTML зображення додаються на веб-сторінки за допомогою тега <img>.
Використання графіки робить веб-сторінки візуально привабливіше. Зображення допомагають краще передати суть і зміст веб-документа. Також, за допомогою HTML-тегів можна робити карти-зображення з активними областями.
Вставка зображень в HTML-документ
Тег <img>
Зображення додаються на веб-сторінки за допомогою одинарного тега <img>, закриваючий тег не потрібний. Оскільки елемент <img> є рядковим, то рекомендується розташовувати його всередині блокового елемента, наприклад, <p> або <div>.
Тег <img> має обов'язковий атрибут src, значенням якого є адреса вбудованого зображення, і рекомендований атрибут alt, наприклад:
<img src = "image.png" alt = "Приклад коду">
Для тегу <img> доступні наступні атрибути:
- alt - атрибут alt позначає альтернативний текст для зображення. Виводиться на місці появи зображення до його завантаження або при відключеній графіці, а також виводиться спливаючій підказкою при наведенні курсору миші на зображення.
- height - задає висоту зображення. Прийняті значення: px /%.
- src - задає URL-адресу зображення. Прийняті значення: url-адресу.
- width - задає ширину зображення. Прийняті значення: px /%.
Адреса зображення
Адреса зображення може бути вказана повністю (абсолютний URL), наприклад:
url (http://anysite.ru/images/anyphoto.png)
Або ж через відносний шлях від документа або кореневого каталогу сайту:
url (../ images / anyphoto.png) - відносний шлях від документа,
url (/images/anyphoto.png) - відносний шлях від кореневого каталогу.
Це інтерпретується наступним чином:
../ - піднятися вгору на один рівень, до кореневого каталогу,
images/ - перейти до папки з зображеннями,
anyphoto.png - вказує на файл зображення.
Розміри зображення
Без завдання розмірів зображення відображається на сторінці в реальному розмірі. Відредагувати розміри зображення можна за допомогою атрибутів width і height. Якщо буде задано лише один з атрибутів, то інший буде обчислюватися автоматично для збереження пропорцій малюнка.
Формати графічних файлів
Формат JPEG (Joint Photographic Experts Group). Зображення JPEG є ідеальними для фотографій, вони можуть містити мільйони різних кольорів. Стискають зображення краще за GIF, але текст і великі площі з суцільним кольором можуть покритися плямами.
Формат GIF (Graphics Interchange Format). Є ідеальним для стиснення зображень, в яких є області з суцільним кольором, наприклад, логотипів. GIF-файли дозволяють встановити один з кольорів прозорим, завдяки чому фон веб-сторінки буде видно через частину зображення. Також GIF-файли можуть містити просту анімацію. GIF-зображення містять всього лише 256 кольорів, через що зображення виглядають плямистими і нереалістичного кольору, як плакати.
Формат PNG (Portable Network Graphics). Містить кращі властивості GIF- і JPEG-форматів. Містить мільйони кольорів і дає можливість зробити один з кольорів прозорим, при цьому стискає зображення в менший розмір, ніж GIF-файл.
Формат APNG (Animated Portable Network Graphics). Формат зображення, що засновано на форматі PNG. Дозволяє зберігати анімацію, а також підтримує прозорість.
Формат SVG (Scalable Vector Graphics). SVG-малюнок складається з набору геометричних фігур, описаних у форматі XML: лінія, еліпс, багатокутник і т.п. Підтримується як статична, так і анімована графіка. Набір функцій містить різні перетворення, альфа-маски, ефекти фільтрів, можливість використання шаблонів. Зображення у форматі SVG можуть змінюватися в розмірі без зниження якості.
Формат BMP (Bitmap Picture). Представляє нестиснене (оригінальне) растрове зображення, шаблоном якого є прямокутна сітка пікселів. Bitmap-файл складається з заголовка, палітри і графічних даних. У заголовку зберігається інформація про графічне зображення і файл (глибина пікселів, висота, ширина і кількість кольорів). Палітра вказується тільки в тих Bitmap-файлах, які містять палітрове зображення (8 і менше біт) і складаються не більше ніж з 256 елементів. Графічні дані представляють саму картинку. Глибина кольору в даному форматі може бути 1, 2, 4, 8, 16, 24, 32, 48 біт на піксель.
Формат ICO (Windows icon). Формат зберігання іконок в Microsoft Windows. Також, Windows icon, використовується як іконка на сайтах в Інтернеті. Саме картинка такого формату відображається поруч з адресою сайту або на закладці в браузері. Один ICO-файл містить один або кілька значків, розмір і колір кожного з яких задається окремо. Розмір значка може бути будь-яким, але найбільш вживані квадратні значки зі сторонами 16, 32 і 48 пікселів.
1.6. HTML списки
HTML списки представляють набір згрупованих абзаців тексту, помічених значками (маркований список) або цифрами (нумерований список).
Елементи списку є простим набором блокових елементів, що мають додатковий блок, розташований збоку, який не бере участі в компонуванні.
Також виділяють списки визначень, які складаються з пар термін-визначення.
Використання HTML-списків для структурування інформації
Маркірований список
Маркірований список представляє невпорядкований список (Unordered List - ненумерований список). Створюється за допомогою парного тега <ul>. В якості маркера елементу списку виступає мітка, наприклад, зафарбований кружечок.
Кожен елемент списку додається за допомогою тега <li> (List Item - елемент списку). Для тегу <li> доступний атрибут value, який дозволяє змінити номер обраного елемента списку.
<ul>
<li> Microsoft </ li>
<li> Google </ li>
<li> Apple </ li>
<li> IBM </ li>
</ ul>
Нумерований список
Нумерований список поміщають всередину пари тегів <ol>. Кожен пункт списку потрібно помістити в тег <li>. Браузер автоматично вставляє номери елементів по порядку і якщо видалити один або кілька елементів такого списку, то інші номери будуть автоматично змінені.
Для тегу <ol> доступні наступні атрибути:
- start - задає початкове значення, від якого починається відлік нумерації, наприклад, конструкція <ol start = "10"> першому пункту присвоїть порядковий номер "10". Також можна одночасно задавати тип нумерації, наприклад, <ol type = "I" start = "10">.
- type - задає вид маркера для використання в списку (у вигляді букв або цифр). Прийняті значення:
1 - значення за замовчуванням, десяткова нумерація.
A - нумерація списку в алфавітному порядку, заголовні букви (A, B, C, D).
a - нумерація списку в алфавітному порядку, малі літери (a, b, c, d).
I - нумерація римськими великими цифрами (I, II, III, IV).
i - нумерація римськими малими цифрами (i, ii, iii, iv).
HTML розмітка:
<ol>
<li> Microsoft </ li>
<li> Google </ li>
<li> Apple </ li>
<li> IBM </ li>
</ ol>
Список визначень
Списки визначень описуються за допомогою тега <dl>. Для додавання терміна застосовується блоковий непарний тег <dt>, а для вставки визначення - блочний парний тег <dd>.
Для тегів <dl>, <dt> і <dd> доступні глобальні атрибути.
<dl>
<dt> Режисер: </ dt>
<dd> Петро Точилін </ dd>
<dt> У ролях: </ dt>
<dd> Андрій Гайдулян </ dd>
<dd> Олексій Гаврилов </ dd>
<dd> Віталій Гогунський </ dd>
<dd> Марія Кожевнікова </ dd>
</ dl>
Вкладений список
Найчастіше можливостей простих списків не вистачає, наприклад, при створенні змістів ніяк не обійтися без вкладених пунктів. Код для створення вкладеного списку буде мати наступний вигляд:
<ul>
<li> Пункт 1. </ li>
<li> Пункт 2.
<ul>
<li> Підпункт 2.1. </ li>
<li> Підпункт 2.2.
<ul>
<li> Підпункт 2.2.1. </ li>
<li> Підпункт 2.2.2. </ li>
</ ul>
</ li>
<li> Підпункт 2.3. </ li>
</ ul>
</ li>
<li> Пункт 3. </ li>
</ ul>
Создано на конструкторе сайтов Okis при поддержке Flexsmm - накрутка подписчиков в ютубе