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="ru">
<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="ru">
<head>
<meta charset="utf-8">
<title>Заголовок</title>
</head>
</html>

Заголовок file: ///D:/...

Коротко опишем содержание нашей страницы. Описание может появляться при отображении результатов поиска под заголовком страницы.

<!DOCTYPE HTML>
<html lang="ru">
<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="ru">
<head>
<meta charset="utf-8">
<title>Веб-страница</title>
<meta name="Description" content="Моя первая интернет страница">
</head>
<body>
Я создаю интернет страницу, а это мой текст.
</body>
</html>

Упрощенный вариант

Смотреть пример.

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

Открывая два варианта мы видим что они не чем не отличаются.

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

В других разделах рассмотрим теги используемые в контейнере body.