Посмотреть все уроки курса
Выбрать другой урок из курса
Поиск по сайту
Теория урока

13. Кодировка HTML-страницы и атрибуты тегов

@codebra_official
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ

Кратко

Проблема с кодировкой страницы

- При просмотре веб-страниц, вы можете видеть знаки вопроса и квадратики вместо текста. Это связано с неправильной кодировкой сайта.

Что такое кодировка

- Кодировка — это таблица символов, содержащая сам символ и его код.

- Термин «набор символов» редко используется, чаще говорят «кодировка».

- Популярные кодировки: ASCII и UTF-8.

История кодировок

- ASCII разработана для английского языка.

- Unicode расширил ASCII для других языков.

- UTF-8 исправила недостатки Unicode, позволяя кодировать до 2 миллиардов символов.

UTF-8 и ASCII

- В UTF-8 коды от 0 до 127 используются для символов ASCII.

- Если символ не входит в ASCII, старший бит первого байта устанавливается в 1.

- Каждый символ в UTF-8 кодируется восемью битами, если используется только ASCII.

Атрибуты в HTML

- Атрибуты — это дополнения к тегам, расширяющие их возможности.

- Атрибуты указываются в открывающемся теге и состоят из имени и значения, разделенных знаком равенства.

- Имя атрибута пишется в нижнем регистре, хотя HTML5 позволяет использовать любой регистр и не использовать кавычки.

В предыдущем уроке мы говорили о важном элементе сайта: тег <title>. Он используется для указания заголовка страницы, который отображается в имени вкладки. В этом уроке поговорим о кодировке веб-страницы.

Как добавить кодировку страницы

Вы когда-нибудь видели на странице в интернете какие-то знаки вопроса, квадратики и прочее вместо текста? Думаю, что видели. Так вот, у этого сайта проблема с кодировкой, вполне возможно разработчик ее не указал.

Кодировка, простыми словами, это таблица содержащая набор символов. Для того чтобы добавить кодировку сайта, нужен многофункциональный тег <meta> , о нем написан целый урок.

Итак, чтобы браузер понял, какую кодировку вы используете, применяйте эту строку:

Пример (html)
<meta charset = "utf-8"> 

Браузер увидит ее и будет использовать кодировку UTF-8.

Что такое кодировка

Кодировка, это набор символов, представленный в таблице. Таблица содержит сам символ и его код, например, двоичный (нули и единицы). Термин «набор символов» редко используется, чаще всего говорят «кодировка».

На данный момент популярны две кодировки: ASCII и UTF-8. На нашем сайте используется кодировка UTF-8.

Подробнее о кодировке

Кодировка ASCII является американской и разрабатывалась для английского языка.

Так как, к примеру, французский язык имеет надстрочные знаки, а русский алфавит не похож на английский, был разработан стандарт Unicode для расширения кодировки ASCII. Но и в Unicode, со временем, стало не хватать места для размещения новых символов. Поэтому на основе Unicode создали кодировку UTF-8, которая исправила эти недостатки.

Кодировка UTF-8 позволяет кодировать до 2 миллиардов символов, поэтому она доминирует в интернете.

В UTF-8 коды от 0 до 127 используются для представления символов ASCII. Если символ не входит в набор ASCII, то старший бит первого байта устанавливается в 1, что свидетельствует о дополнительном использовании байтов. То есть, если в документе используются только символы из ASCII, то каждый символ в UTF-8 будет кодироваться восьмью битами.

С кодировкой закончили, переходим к атрибутам тегов в HTML.

Что такое атрибуты

Настало время познакомиться с атрибутами в HTML. Вы их уже встречали, просто на них не акцентировалось внимание.

Атрибуты – это дополнения к тегам, расширяющие их возможности. Они всегда указываются в открывающемся теге. Атрибут состоит из имени и значения, разделенного знаком равенства.

Имя атрибута необходимо писать в нижнем регистре. Хотя HTML5 и позволяет писать значения атрибутов без кавычек, вы все равно про них не забывайте.

Например, в примере выше, charset - атрибут, а utf-8 - значение.

В следующем уроке будем разбираться как описать стили CSS в HTML-документе.

Похожие уроки Codebra

@codebra_official
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ
Что такое CSS?Знакомство с CSS
Продолжаем знакомится с JavaScriptЗнакомство с JavaScript
Универсальный тег в HTML форме - тег INPUTФормы в HTML
Универсальные атрибуты в HTMLРазметка текста в HTML
Селекторы атрибутов: простой выборСелекторы в CSS
Селекторы классов и идентификаторовСелекторы в CSS
Атрибуты для ссылок в HTMLСсылки в HTML
Как создать форму в HTML и ее атрибутыФормы в HTML
Что такое абзац в HTML (тег P)Разметка текста в HTML
Раздел «Знакомство с HTML»
1. УРОК: 1. Вводный урок по курсу HTML и CSS
2. УРОК: 2. Что такое язык HTML
3. УРОК: 3. Погружение в курс по HTML и CSS
4. УРОК: 4. Теги в HTML. Одинарные и парные теги
5. УРОК: 5. Что такое теги в HTML и для чего они нужны
6. УРОК: 6. Одинарные теги в HTML
7. УРОК: 7. Парные теги в HTML
8. ПРАКТИКА: 10. Структура HTML-документа
9. УРОК: 11. Что означают теги HTML, HEAD, BODY
10. УРОК: 12. Первая строка всех сайтов - DOCTYPE
11. УРОК: 13. Исходный код веб-страницы
12. УРОК: 14. Заголовок в HTML - тег TITLE
УРОК 13. 16. Кодировка HTML-страницы и атрибуты тегов
Вы здесь
14. УРОК: 17. Описание стилей CSS в HTML-документе
15. УРОК: 18. Подключение внешних файлов в HTML - стили CSS
16. ПРАКТИКА: 19. Что не хватает в структуре HTML-документа
17. ПРАКТИКА: 20. Опять чего-то не хватает в структуре HTML-страницы
18. УРОК: 22. Использование HTML метатегов (мета теги)
19. ПРАКТИКА: 23. Повторим метатеги в HTML
20. ПРАКТИКА: 24. Метатеги Facebook
21. ТЕСТ: 25. Тест по разделу «Знакомство с HTML»
Другие разделы
Раздел 2. Разметка текста в HTML
Раздел 3. Ссылки в HTML
Раздел 4. Изображения в HTML
Раздел 5. Таблицы в HTML
Раздел 6. Формы в HTML
Раздел 7. HTML5
Раздел 8. Остальное
Раздел 9. Знакомство с CSS
Раздел 10. Селекторы в CSS
Раздел 11. Структура и каскад
Раздел 12. Единицы измерения
Раздел 13. Шрифт
Раздел 14. Свойства текста
Раздел 15. Форматирование
Раздел 16. Отступы, рамки, поля
Раздел 17. Цвета и фон
Раздел 18. Позиционирование
Раздел 19. Верстка таблиц
Раздел 20. Списки
Раздел 21. Анимация
Раздел 22. Знакомство с Flexbox
Раздел 23. Практика с htmlbook.ru
Раздел 24. Элементы сайта
Впервые на сайте Codebra?

Извините за это всплывающее окно, меня они тоже раздражают.

Образовательный ресурс codebra.ru полностью посвящен программированию и компьютерной безопасности. Все курсы и уроки находятся на главной странице. Ради интереса можете посмотреть на содержимое курсов по Пентесту Active Directory, Python, HTML и CSS, JavaScript, C++ и другие, размещенные на главной странице.

Если что-то не нашли, то воспользуйтесь поиском по сайту, который находится на главной странице в самом верху.

Удачи в обучении!

Закрыть окно