www.ABC-Color.com
Онлайн розмальовки на різні теми
Довідка

Самовчитель HTML5

Створення веб сторінки.
Статті написані практично коротко, не відволікаючись на різні специфіки та історію.

Технічна інформація для інтернет браузерів

На html файлі можна не писати невидиме вміст сторінки, але якщо ви хочете, щоб воно правильно відображалося у вас і надалі, а також у інших користувачів в інтернеті, потрібно, як мінімум вказати тип документа і кодування.

Щоб файл відкрився правильно

Текст можна просто вставити в html сторінку.

Я створюю інтернет сторінку, а це мій текст.

Name.html file: ///D:/... Я створюю інтернет сторінку, а це мій текст. Name.html file: ///D:/... РЇ створюю інтернет сторінку, Р° це РјС–Р№ текст.

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

<meta charset="utf-8">

І за правилами хорошого тону вказуємо тип документа. У минулих версіях був створений XHTML, з іншим синтаксисом, що створює плутанину і комп'ютер може не спрінять правильно ваші теги, якщо не вказати тип документа.

<!DOCTYPE HTML>
<meta charset="utf-8">
Я створюю інтернет сторінку, а це мій текст.

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

<!DOCTYPE HTML>
<html> - Приклад відкритого тега
</html> - Приклад закритого тега

Зазначаємо мову тексту на інтернет странице. (Не обов'язково, але бажано для правильного відображення стилю письма і для автоматичних інтернет перекладачів, і правильного аудіо відтворення тексту.)

<!DOCTYPE HTML>
<html lang="uk">
<meta charset="utf-8">
Я створюю інтернет сторінку, а це мій текст.

Зміст папки head

Контейнер даних інформації призначеної для браузерів і пошукових систем.
Технічну інформацію вкладати в контейнер не обов'язково, вона просто повинна бути в горі сторінки. Закриваючий тег теж не обов'язковий браузер може сам визначити, де закінчується технічна інформація.

<!DOCTYPE HTML>
<head></head>

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

<!DOCTYPE HTML>
<head>
<meta charset="utf-8">
</head>

Вкажіть кодування і напишіть текст кирилицею (Наприклад: російською мовою) і збережіть закривши файл, якщо при повторному відкритті файлу, текст не відобразитися вірно, тоді ваш текстової редактор налаштований на збереження документа в іншому кодуванні. Наприклад в популярній для кирилиці ANSI, де латинські букви і цифри (128 знаків) носять однаковий код з UTF.
Для коректного відображення в SVG та інших символів, налаштуйте ваш текстовий редактор на кодування utf-8.
Наприклад в програмі "Notepad++" в головному верхньому меню є розділ "Кодировки" виберіть пункт "Кодировать в UTF-8 (без BOM)". (BOM - це маркер вказуючий кодування символу) Тепер всі файли будуть зберігатися в цьому кодуванні.
В текстовом редакторе "notepad" який стоїть за умовчанням на Windows, при збереженні файлу виберіть в меню "Файл" натисніть пункт "Сохранить как..." і в низу вікна буде віконце "Кодировки" клікніть на трикутник в віконечку і в списку виберіть UTF-8. Потім натисніть кнопку поруч"Сохранить" тепер файл буде відкриватися в кодування UTF-8. Для збереження нового файлу в цьому кодуванні процес потрібно повторити.

Напишемо назву вашого документа, вона буде відображатися у верху вкладки браузері підписуючи відкриту сторінку. А також видаватися в результатах пошуку.

<!DOCTYPE HTML>
<html lang="uk">
<head>
<meta charset="utf-8">
<title>Назва сторінки</title>
</head>
</html>

Назва сторінки file: ///D:/...

Стисло опишіть зміст нашої сторінки. Опис може з'являтися при відображенні результатів пошуку під заголовком сторінки.

<!DOCTYPE HTML>
<html lang="uk">
<head>
<meta charset="utf-8">
<title>Код в HTML 5</title>
<meta name="Description" content="Стислий опис коду для створення html файлу">
</head>
</html>

В контейнер можна вкласти ще багато інших тегів і інший вміст. Отут описані тільки найпопулярніші.

Також можна прописати стилі CSS і скрипти або поставити посилання на файл з ними.

Для прискорення завантаження сторінки рекомендується прописувати стилі та скрипти в контейнері body, це залежить від їх розміру і призначення.

Контейнер body

В контейнер body вставляється весь видимий для користувача зміст інтернет сторінки.

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

Також може вставлятися, як зазначено вище, скрипти та стилі.

Так виглядає класичний скелет структури HTML сторінки.

<!DOCTYPE HTML>
<html>
<head>
... Невидима технічна інформація.
</head>
<body>
... Видима html сторінка
</body>
</html>

Структура сприймається інтернет браузерами як само собою зрозуміле і якщо ви її не пропишіте вони її створять самі. Навіть якщо не напишіте протокол завантаження для HTML 5 вони все одно відкриють html файл використовуючи протокол встановлений у них за замовчуванням.

Приклади можна скачати.

Дивитися приклад.

<!DOCTYPE HTML>
<html lang="uk">
<head>
<meta charset="utf-8">
<title>Веб-страница</title>
<meta name="Description" content="Моя перша інтернет сторінка">
</head>
<body>
Я створив інтернет сторінку, а це мій текст.
</body>
</html>

Спрощений варіант

Дивитися приклад.

<!DOCTYPE HTML>
<html lang="uk">
<meta charset="utf-8">
<title>Веб-страница</title>
<meta name="Description" content="Моя перша інтернет сторінка">
Я створив інтернет сторінку, а це мій текст.

Відкриваючи два варіанти ми бачимо що вони нічим не відрізняються.

А якщо переглянути код елемента спрощеного завантаженого файлу, то він не буде відрізнятися від першого варіанту. Браузер сам розставити контейнера.

В інших розділах розглянемо теги використовують в контейнері body.