Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

Главная » Основы HTML » Как указать кодировку сайта на HTML. Основы HTML для начинающих. Урок №20

15.03.2016


00:43


3274


пока нет


Как указать кодировку сайта на HTML. Основы HTML для начинающих. Урок №20

Как указать кодировку сайта на HTML. Основы HTML для начинающих. Урок №20

Всем привет!
Продолжаем изучать основы HTML. В этом уроке мы разберем, как указать HTML кодировку  для сайта (веб-страницы).
Этот урок очень важен, так как незнание того, как указать кодировку для веб-страницы может привести к тому, что вашу страницу не смогут прочитать. Вы спросите: «Это как так, не смогут?».
Давайте я покажу, как выглядит мой блог с неправильной кодировкой:

Как указать кодировку сайта на HTML. Основы HTML для начинающих. Урок №20

Ну как вам? Все ли смогли прочитать :smile:? Хотя, если постараться, то смысл сможете понять по картинкам. Но разве таким сайтом удержишь посетителя?

Итак, HTML кодировка –  это таблицы соответствия кодов и символов алфавита. То есть, наш компьютер по кодировке поменяет код на понятные читабельные буквы :gazeta:.

Чтобы сообщить браузеру, в какой кодировке находятся символы веб-страницы, необходимо прописать между тегами <head></head> вот такой мета тег:

<meta http-equiv="Content-Type" content="text/html; charset=имя кодировки">

Обратите внимание, в коде есть слово «имя кодировки». Здесь нужно указать  HTML кодировку.
Обычно это utf-8 или windows-1251.

Кодировка для utf-8:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

Кодировка для windows-1251:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> 

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

Переходим к практике.

Как создать HTML документ с
кодировкой utf-8

Открывайте стандартный блокнот. «Все программы» => «Стандартные» => «Блокнот»:

Как создать HTML документ с кодировкой utf-8

Далее вставляете в блокнот стандартный код HTML:

<html>
<head>
<title> Моя первая HTML-страничка на StepkinBlog.ru</title>
</head>
<body>
Здравствуйте, это моя первая страница на StepkinBlog.ru.
</body>
</html>

Теперь указываем, в какой кодировке сохранена веб-страница. Для этого разместите между тегами <head></head> вот этот мета-тег:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Вот так должно получиться (строка №4):

<html>
<head>
<title> Моя первая HTML-страничка на StepkinBlog.ru</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
Здравствуйте, это моя первая страница на StepkinBlog.ru.
</body>
</html>

Жмите в блокноте «Файл» => «Сохранит как…»:

Как создать HTML документ с кодировкой utf-8

Там, где пункт «Имя файла» напишите название веб-страницы на латинице и с расширением «.html». Я думю, вы это помните еще с первых уроков.
Там, где пункт «Кодировка:» укажите «UTF-8».
Жмите «Сохранить»:

Как создать HTML документ с кодировкой utf-8

Увеличить изображение?

Как создать HTML документ с кодировкой windows-1251

Открывайте стандартный блокнот. «Все программы» => «Стандартные» => «Блокнот».
Далее вставляете в блокнот стандартный код HTML:

<html>
<head>
<title> Моя первая HTML-страничка на StepkinBlog.ru</title>
</head>
<body>
Здравствуйте, это моя первая страница на StepkinBlog.ru.
</body>
</html> 

Теперь указываем, в какой кодировке сохранена веб-страница. Для этого разместите между тегами <head></head> вот этот мета-тег:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

Вот так должно получиться (строка №4):

<html>
<head>
<title> Моя первая HTML-страничка на StepkinBlog.ru</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
Здравствуйте, это моя первая страница на StepkinBlog.ru.
</body>
</html>

Жмите в блокноте «Файл» => «Сохранит как…»:

Как создать HTML документ с кодировкой utf-8

Там, где пункт «Имя файла» напишите название веб-страницы на латинице и с расширением «.html». Я думю, вы это помните еще с первых уроков.
Там, где пункт «Кодировка:» укажите «ANSI».
Жмите «Сохранить»:

Как создать HTML документ с кодировкой utf-8

Вот и все!

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

Для примера в блокнте установите код:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

И укажите при сохранении «ANSI»:

Как создать HTML документ с кодировкой utf-8

Так как это неправильно, результат будет вот таким:

Как создать HTML документ с кодировкой utf-8

Сохраняйте правильно ваши веб-страници во избежание вот таких результатов :coffe:



Случайные записи:

  1. Как мы отдыхали в Геническе
  2. Создание простого сайта на Bootstrap 3. Практика по пройденному материалу
  3. Создание галереи изображений. Основы bootstrap3 для начинающих. Урок №26
  4. Контейнер. Основы bootstrap 3 для начинающих. Урок №3
  5. Основы HTML для начинающих – «Моя первая страничка на HTML». Урок №2

Последние записи рубрики:

  1. Бесплатный курс по основам HTML
  2. Шпаргалка по HTML на русском языке
  3. Создание простого мини сайта. Практика по пройдённому материалу
  4. Тесты HTML онлайн. Основы HTML для начинающих
  5. Как прописать мета теги. Основы HTML для начинающих. Урок №21

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 245