Posted:
Июл 2, 2023
Comments:
0 Comments

Языки html: Что такое HTML и зачем он нужен каждому веб-разработчику / Skillbox Media

Введение в HTML (язык разметки гипертекста)

  • Язык разметки HTML

  • Теги

Язык разметки HTML

HTML — это язык для описания структуры веб-страниц. Страницы, созданные с его помощью, могут быть просмотрены только при помощи специальных программ (браузеров), установленных на компьютерах пользователей.

  • Аббревиатура HTML расшифровывается как Hyper Text Markup Language (язык разметки гипертекста).

  • Запомните, он не является языком программирования, это язык разметки.

  • HTML использует теги разметки, чтобы описать структуру веб-страницы.

Теги

HTML теги — это ключевые слова или символы, заключенные в угловые скобки, например <body>, <p>, <h3> и т.д. Теги бывают двух видов: парные и одиночные (их также называют пустыми). Парные теги состоят из открывающего и закрывающего тега, например: <p>текст</p>. Символ «/» после угловой скобки указывает на то, что тег закрывающий. Одиночные теги состоят только из открывающего тега, например: <br>. Теги не чувствительны к регистру, поэтому могут быть написаны как прописными, так и строчными буквами: <P> означает то же самое, что и <p>. Теги определяют, где начинается и где заканчивается, HTML-элемент.

С помощью тегов браузер распознает структуру и значение вашего текста, например, они сообщают браузеру, какая часть текста является заголовком, где начинается новый абзац, что нужно подчеркнуть и где расположить изображение (картинку). Получив эту информацию, браузер использует встроенные в него по умолчанию правила о том, как отображать каждый из этих элементов.

Примечание: в нашем HTML справочнике вы можете посмотреть стили, применяемые по умолчанию, для любого интересующего вас тега.

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

Так выглядит страница, в которой используются теги для разметки:


<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Летнее меню</title>
  </head>
  <body>
    <h2>Напитки в нашем кафе</h2>

    <h4>Мультифрукт - 100р.</h4>
    <p>Фруктовый напиток, содержащий апельсиновый и ананасовый соки.</p>

    <h4>Молочный коктейль - 150р.</h4>
    <p>Сливочное мороженое, перемешанное с мякотью фруктов.</p>
  </body>
</html>

То же самое, но без использования тегов:


Напитки в нашем кафе

Мультифрукт - 100р.
Фруктовый напиток, содержащий апельсиновый и ананасовый соки.

Молочный коктейль - 150р.
Сливочное мороженое, перемешанное с мякотью фруктов.

С этой темой смотрят:

  • Как браузер получает веб-страницы?

  • Создание html документа

  • HTML элементы

  • Структура html-документа

  • Введение в CSS

Языки HTML и CSS | Введение в веб-разработку.

Курс

Веб-программирование, или веб-разработка, – это, проще говоря, создание сайтов. Причем понятие «веб-разработка» предпочтительнее, так как при создании сайтов не все действия являются программированием в привычном понимании этого слова. При использовании языков HTML и CSS, то есть при создании шаблона сайта или страницы, говорят о верстке сайта. Настройка сервера, на котором размещается сайт, скорее сродни работе системного администратора, чем программиста.

Веб-разработка не ограничивается одним языком. Так клиентская часть сайтов базируется на трех китах – языках HTML, CSS, JavaScript (JS). Серверная часть может разрабатываться на любом из множества языков программирования (PHP, JS, Python, SQL и других).

Для создания просто устроенных небольших сайтов можно знать только языки HTML и CSS, о роли JavaScript будет достаточно иметь представление. Исполняемых сервером программ у таких сайтов по-сути нет. На сервере размещаются лишь готовые к отправке по сети файлы, включающие html- и css-код.

Логотипы HTML5 и CSS3

HTML расшифровывается как HyperText Markup Language, то есть язык гипертекстовой разметки. Чтобы легче было понять, скажем проще: язык текстовой разметки. Это значит, что командами языка HTML описывают, что есть что на странице текста. Что есть заголовок, что абзацы, картинка, список, метаданные и так далее.

Другими словами, с помощью HTML создают структуру страницы. Как бы говорят, какие элементы она включает. Разметка страницы с помощью языка HTML важна для поисковых роботов. Они обходят страницы, размещенные в сети Интернет, и индексируют их. Важна разметка и для браузера (программы, с помощью которой вы просматриваете веб-страницы). Интерпретируя html-код, браузер отображает страницу так, как задумывал программист.

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

В названии HTML, приставляя к слову «текстовый» слово «гипер», имеют в виду, что в тексте предусмотрена разметка ссылок, ведущих на другие страницы HTML. При клике по ссылке в окно браузера пользователя загружается другой документ HTML. Тот, на который указывает ссылка.

Обычные сайты состоят из веб-страниц, которые связаны между собой ссылками.

Браузер – это приложение, которое может интерпретировать (переводить) команды языка HTML в их представление для пользователя на экране монитора. Веб-страницы HTML браузер получает в режиме реального времени по сети Интернет с удаленного сервера, на котором разработчик сайта разместил свои html-страницы.

Команды языка HTML не совсем команды. Они описывают, декларируют, а не приказывают что-то сделать. Поэтому вместо «команды HTML» говорят о тегах HTML. С помощью тегов на странице обособляются структурные элементы HTML. Элемент может описываться как двумя тегами, так и одним.

Например, абзац – это элемент HTML, который начинается с тега <p>, содержит текст, другие элементы HTML и заканчивается закрывающим тегом </p>. С другой стороны, разрыв строки (переход на новую строку без создания нового абзаца) – тоже элемент HTML, но его формирует один тег <br>.

Первые версии языка HTML были представлены общественности в начале 90-х годов прошлого столетия. На сегодняшний день активно используется пятая версия – HTML5 (2014 год), которую мы и будем изучать в данном курсе.

У веб-страницы два класса чтецов: люди и программы (поисковые роботы, браузеры). Для машины важна правильная структурная разметка. Для человека важно удобное представление информации. То, как и сколь долго люди изучают страницу, формируют такую ее характеристику как поведенческие факторы. Среди прочего (той информации, которую собрал бот, «прочитав» файл) они оказывают влияние на позицию страницы в поисковой выдаче.

Человек лучше воспринимает аккуратно оформленные страницы, с удобным интерфейсом и продуманным дизайном.

В ранних версиях HTML было больше тегов, предназначенных для оформления текста. Это делало код грязным, его было тяжело обслуживать, имелось большое количество стилистических повторений. Данные проблемы были решены с помощью языка CSS, первые версии которого появились во второй половине 90-х. CSS расшифровывается как Cascading Style Sheets – каскадные таблицы стилей.

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

Итак, CSS – это по большому счету язык оформления страниц. Что под этим непосредственно понимается? Какую ширину имеет меню сайта, цвет ссылок, какого размера буквы текста абзацев, какое начертание шрифта используется, нужны ли где-то рамки, как выделяются цитаты, обрамляются картинки и так далее.

Помимо ссылок, нередко на страницы добавляют другие интерактивные элементы. Так содержимое и вид страницы могут меняться в зависимости от тех или иных действий пользователя. Например, при клике по картинке она разворачивается на весь экран. Или при нажатии на кнопку на странице запускается какая-то анимация. Подобная динамичность содержимого обычно обеспечивается с помощью языка программирования JavaScript.

Здесь мы говорим о JS в контексте его исполнения то что называется на стороне клиента, то есть браузером пользователя (клиентом считается браузер). Однако JS нередко используется в том числе на стороне сервера (там, где хранятся файлы, откуда они передаются). То есть на JS пишут программы, которые исполняются до того, как html-страница будет отправлена в браузер запросившего ее человека. При этом назначение таких серверных JS-программ несколько иное, чем у клиентского JS.

JS – это императивный (такие будем считать настоящими) язык программирования. HTML и CSS – описательные языки, они не приказывают, а декларируют, в данном случае как что-то должно выглядеть. Изучать такие языки проще.

Некоторые вещи, которые можно сделать с помощью JS также реализуемы с помощью CSS. Например, применяемые стили могут меняться в динамике, под разные размеры экранов применяться свои стилистические особенности. Также CSS может «отслеживать» наведение мыши, в определенных пределах позволяет создавать анимацию.

Чтобы приступить к web-разработке, необходим минимум программного обеспечения: любой текстовый редактор для программистов (такие поддерживают подсветку синтаксиса) и браузер, с помощь которого вы выходите в Интернет.

Рассмотрим начало работы с редактором Sublime Text (ссылка на его официальный сайт, откуда можно скачать редактор для вашей операционной системы).

Создадим на компьютере новую папку и назовем ее, например, webpage1. Откроем редактор Sublime и в меню выберем пункт File → Open Folder…, откроем ранее созданный каталог. На боковой панели редактора кликнем правой кнопкой мыши по названию каталога. В контекстном меню выберем New File.

После этого в рабочей области редактора откроется файл под названием untitled. Нажав Ctrl+S, сохраним его под названием index.html. Всё, можно писать код!

На скрине файл содержит не только теги HTML, также имеются включения кода на CSS и JS. Команды CSS заключаются между html-тегами <style> и </style>. Команды JS – между <script> и </script>. Отметим, что подобный способ включения не единственный.

Если данную страницу открыть в браузере (двойным кликом по файлу в папке или в Sublime через контекстное меню), вы увидите такую картину:

Если нажимать на кнопку, то цвета фона и текста будут меняться.

Код демонстрационного примера:

<!DOCTYPE html>
<html>
<head>
<title>Пример 1</title>
 
<style>
h2 {
    text-align: center;
    margin: 2em;
}
p {
    width: 400px;
    margin: auto;
    font-size: 24px;
}
</style>
 
<script>
let theme = 0;
 
function changeTheme() {
    if (theme == 0) {
        theme = 1
        document. body.style = 
        "background: #000; color: #fff";
    } else {
        theme = 0
        document.body.style = 
        "background: #fff; color: #000";
    }
}
</script>
</head>
<body>
 
<button>
    Изменить тему
</button>
 
<h2>HTML, CSS, JS</h2>
 
<p>В клиентском веб-программировании
чаще всего используется три языка - 
HTML, CSS и JavaScript.</p>
 
<body>
</html>

Объявление языка в HTML

Объявление языка в HTML

Вопрос

Как мне установить язык содержимого моей HTML-страницы?

На этой странице описывается, как разметить HTML-страницу, чтобы она давала информацию о языке страницы. Он начинается с общего резюме, а затем предоставляет дополнительные сведения в последующих разделах.

Быстрый ответ

Всегда используйте атрибут языка в теге html , чтобы объявить язык текста по умолчанию на странице. Это наследуется всеми другими элементами. Например:

Обратите внимание, что следует использовать элемент html , а не элемент body , поскольку элемент body не закрывает текст внутри элемента head документа.

Если страница содержит содержимое на другом языке, добавьте атрибут языка к элементу, окружающему это содержимое. Это позволяет вам стилизовать или обрабатывать его по-разному. Например:

Заголовок "Le Bon Usage".

Используйте атрибут lang для страниц, обслуживаемых как HTML. (Информацию о страницах, представленных в формате XML, включая полиглот-документы XHTML 1.x и HTML5, см. в разделе Выбор правильного атрибута.)

Используйте языковые теги из реестра IANA Language Subtag . Вы можете найти вложенные теги, используя неофициальный инструмент поиска языковых подтегов. (подробнее)

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

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

Вы никогда не должны использовать мета-элемент с атрибутом http-equiv , установленным на Content-Language , чтобы указать язык страницы, но в определенных обстоятельствах вы можете захотеть предоставить информацию о языке с заголовком HTTP для указания целевая аудитория вашей страницы. Независимо от того, используете ли вы заголовок HTTP или нет, вы всегда должны объявлять язык текста на странице с помощью языкового атрибута в теге html . Для получения дополнительной информации см. сопутствующую статью, заголовки HTTP, мета-элементы и информацию о языке.

Детали

В этом разделе представлена ​​более подробная информация по различным темам, связанным с объявлением языка в HTML.

Не забудьте также использовать атрибут dir при работе с двунаправленным текстом, таким как арабский, иврит и т. д.

Что делать, если содержимое элемента и значения атрибутов на разных языках?

Иногда язык текста в
атрибут и содержимое элемента на разных языках. Например, в правом верхнем углу этой статьи есть ссылки на переведенные версии этой страницы.
текст ссылки показывает язык целевой страницы, используя язык целевой страницы, но связанный атрибут title содержит подсказку в
язык текущей страницы:

Если ваш код выглядит следующим образом, язык
атрибуты на самом деле указывают, что не только содержимое, но и текст атрибута title на испанском языке.
Это явно неправильно.

Неверный код. Не копируйте!

Испанский

Вместо этого переместите атрибут, содержащий текст на другом языке, в другой элемент, как показано в этом примере, где элемент a наследует настройку по умолчанию en элемента html .

Испанский

Что делать, если нет элемента, на который можно повесить атрибут?

Если вы хотите указать язык содержимого, но вокруг него нет разметки, используйте такой элемент, как span , bdi или div вокруг содержимого.
Вот пример:

Вы бы сказали, что по-китайски это 中国科学院文献情报中心.

Выбор языковых значений

Чтобы быть уверенным, что все пользовательские агенты распознают язык, который вы имеете в виду, вам необходимо следовать стандартному подходу при предоставлении значений языковых атрибутов.
Вам также необходимо подумать о том, как стандартно относиться к диалектным различиям между языками, например, к различиям между английским (США) и
британский английский, которые значительно расходятся с точки зрения написания и произношения.

Правила создания значений языковых атрибутов описаны в спецификации IETF под названием BCP 47. В дополнение к определению того, как использовать простые языковые теги, такие как en для английского языка или fr для французского языка, BCP 47 описывает
как составлять языковые теги, которые позволяют указывать региональные диалекты, сценарии и другие варианты, связанные с этим языком.

BCP 47 включает наборы кодов языков и стран ISO, но выходит за их пределы. Чтобы найти соответствующие коды, вы должны обратиться к Реестр языковых подтегов IANA .

Неофициальный инструмент поиска языковых подтегов предоставляет удобный внешний интерфейс для реестра IANA.

Нежное, но довольно подробное введение в синтаксис тегов BCP 47 см. в статье Language.
теги в HTML и XML . Для получения помощи в выборе правильного языкового тега из множества возможных тегов и комбинаций см. Выбор языкового тега .

Выбор правильного атрибута

Если ваш документ HTML (т.е. используется как text/html ), используйте атрибут lang для установки языка
документа или диапазона текста. Например, следующее устанавливает французский язык по умолчанию:

При обслуживании страниц XHTML 1.x или полиглотов как text/html используйте оба атрибута lang и атрибут xml:lang вместе каждый раз, когда вы хотите установить язык. 9Атрибут 0011 xml:lang — это стандартный способ определения информации о языке в XML. Убедитесь, что значения обоих атрибутов идентичны.

Атрибут xml:lang на самом деле бесполезен для обработки файла как HTML, но заменяет атрибут lang всякий раз, когда вы обрабатываете или передаете документ как XML. Атрибут lang допускается синтаксисом XHTML и может также распознаваться браузерами. Однако при использовании других парсеров XML (таких как lang() в XSLT), вы не можете полагаться на распознавание атрибута lang .

Если вы обслуживаете свою страницу как XML (т.е. используете тип MIME, такой как application/xhtml+xml ), вы делаете
не нужен атрибут lang . Одного атрибута xml:lang будет достаточно.

Дополнительная информация

Информация в этом разделе вряд ли будет полезной, но она предоставлена ​​для полноты.

Указание метаданных о языке аудитории

В дополнение к включению атрибута языка на странице в тег html (что следует всегда делать), вы также могли столкнуться с объявлениями языка в заголовке HTTP (который обслуживается страницей) или как метаданные . элементов.

Важно отметить, что объявление языка на странице всегда переопределяет информацию HTTP, когда дело доходит до определения фактического языка текста, но информация HTTP может предоставить более общую информацию о предполагаемое использование ресурса. Не рекомендуется использовать элементы meta на странице HTML для объявления языка.

Для получения информации о Content-Language в HTTP и мета-элементах см. HTTP-заголовки, мета-элементы и информацию о языке .

Различные вещи, которые не имеют значения

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

Во-первых, нельзя объявить язык текста с помощью CSS.

Во-вторых, DOCTYPE , с которого должен начинаться любой HTML-файл, может содержать то, что некоторым кажется похожим на объявление языка. DOCTYPE в приведенном ниже примере содержит текст EN, что означает «английский». Это, однако, указывает на язык схемы , связанной с этим документом — это не имеет ничего общего с языком самого документа.

В-третьих, иногда люди предполагают, что информация о естественном языке может быть получена из кодировки символов. Однако кодировка символов не позволяет однозначно идентифицировать естественный язык: должно быть однозначное соответствие между кодировкой и языком, чтобы этот вывод работал, а такого нет. Например, одна кодировка символов может использоваться для многих языков, например. Латинский 1 (ISO-8859-1) мог кодировать как французский, так и английский, а также множество других языков. Кроме того, кодировка символов может варьироваться в зависимости от одного языка, например, для арабского языка могут использоваться такие кодировки, как «Windows-1256», «ISO-8859-6» или «UTF-8».

Однако все эти примеры кодирования в настоящее время являются спорными, поскольку весь контент должен быть написан в кодировке UTF-8, которая охватывает все языки, кроме самых редких, в единой кодировке символов.

В некоторых алфавитах, таких как арабский и иврит, отображаемый текст читается преимущественно справа налево, хотя в этом потоке числа и текст из других алфавитов отображаются слева направо. Разметка, такая как 9Атрибут 0011 dir необходим для установки общего контекста письма справа налево, а в некоторых случаях для правильного отображения двунаправленного текста требуется разметка, но это невозможно сделать с помощью языковой разметки.

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

Дальнейшее чтение

  • Начать? Язык в Интернете

  • Tutorial, Работа с языком в HTML

  • Ссылки по теме, Создание HTML и CSS

    • Язык
    • Использование атрибутов для объявления языка
    • Выбор языковых значений
    • Идентификация языковых изменений в документе

Коды языков HTML — список двухбуквенных кодов языков ISO

Рекламные объявления

Код языка используется для указания языка содержимого.

В следующей таблице перечислены двухбуквенные коды ISO 639.коды языков (отсортированные по языку в алфавитном порядке), которые можно использовать с атрибутами lang и xml:lang для указания языка, содержащегося внутри элемента в документе HTML и XHTML. Коды языков нечувствительны к регистру.

от

Языковая группа Язык Код ISO
Северо-Западный Кавказ Абхазский аб
Афро-азиатский Афар аа
Индоевропейская Африкаанс аф
Северо-европейский Албанский кв
Афро-азиатский Амхарский утра
Афро-азиатский Арабский ар
Индоевропейская Арагонский и
Индоевропейская Армянский хай
Индоевропейская Ассамский как
Аймаранский Аймара и
тюркский Азербайджанский аз
тюркский Башкирский или
Языковая изоляция Басков ЕС
Индоевропейская Бенгальский (бенгальский) млрд
Китайско-тибетский Бутани дз
Индоевропейская Бихари бх
креольский Бислама би
Индоевропейская Бретонский бр
Индоевропейская Болгарский бг
Китайско-тибетский Бирманский мой
Индоевропейская Белорусский (Белорусский) быть
Австро-азиатский Камбоджийский км
Индоевропейская каталонский ок
Китайско-тибетский китайский ж
Индоевропейская корсиканский совместно с
Индоевропейская Хорватский ч
Индоевропейская Чехия кс
Индоевропейская Датский да
Индоевропейская Голландский нл
Индоевропейская английский (американский) и
Построен Эсперанто эо
Уральский Эстонский и
Индоевропейская Фарерские острова или
Индоевропейская Фарси ФА
Австронезийский Фиджи фдж
Уральский Финский фи
Индоевропейская французский из
Индоевропейская фризский ф. у.
Индоевропейская Гэльский (шотландский) гд
Индоевропейская Гэльский (мэнский) гв
Индоевропейская Галисийский гл
Южнокавказская Грузинский ка
Индоевропейская немецкий из
Индоевропейская Греческий эль
Эскимосско-алеутский Калааллисут (Гренландия) кл
Тупиан Гуарани г
Индоевропейская Гуджарати гу
креольский Гаитянский креольский
Афроазиатский Хауса га
Афро-азиатский Иврит он, ив
Индоевропейская Хинди привет
Уральский Венгерский ху
Индоевропейская Исландский это
Построен Идо ио
Австронезийский Индонезийский идентификатор, в
Построен Интерлингва иа
Построен Интерлингв т. е.
Эскимосско-алеутский Инуктитут иу
Эскимосско-алеутский Инупиак ик
Индоевропейская ирландский га
Индоевропейская итальянский это
Японский японский и
Австронезийский яванский СП
Дравидийский Каннада кун
Индоевропейская Кашмири кс
тюркский Казахский кк
Нигер-Конго Киньярванда (Руанда) RW
тюркский Киргизский кк
Нигер-Конго Кирунди (Рунди) р-н
Языковая изоляция Корейский ко
Индоевропейская Курдский ку
Тай-Кадай Лаосский вот
Индоевропейская Латинский ла
Индоевропейская Латышский (латышский) лв
Индоевропейская Лимбургский (лимбургский) ли
Нигер-Конго Лингала по
Индоевропейская Литовский л
Индоевропейская Македонский мк
Австронезийский Малагасийский мг
Австронезийский Малайский мс
Австронезийский Малаялам мл
Афро-азиатский Мальтийский м
Австронезийский Маори миль
Индоевропейская маратхи г-н
Индоевропейская Молдавский пн
Монгольский Монгольский мин
Австронезийский Науру на
Индоевропейская Непальский пе
Индоевропейская Норвежский нет
Индоевропейская Окситанский ок
Индоевропейская Ория или
Афро-азиатский Оромо (Афан, Галла) или
Индоевропейская Пушту (пушту) пс
Индоевропейская польский пл
Индоевропейская португальский пт
Индоевропейская Панджаби па
Кечуань Кечуа или
Индоевропейская Рето-романтика п. м.
Индоевропейская Румынский ро
Индоевропейская Русский руб
Австронезийский Самоа см
креольский Санго сг
Индоевропейская Санскрит с
Индоевропейская Сербский ср
Индоевропейская сербско-хорватский ш
Нигер-Конго Сесото ст
Нигер-Конго Сетсвана тн
Нигер-Конго Шона сн
Китайско-тибетский Сычуань И II
Индоевропейская Синдхи сд
Индоевропейская сингальский и
Нигер-Конго Сисвати сс
Индоевропейская Словацкий ск
Индоевропейская Словенский сл
Афро-азиатский Сомалийский так
Индоевропейская Испанский эс
Австронезийский суданский и
Нигер-Конго Суахили (кисуахили) ПО
Индоевропейская Шведский св
Австронезийский Тагальский тл
Индоевропейская Таджикский тг
Дравидийский Тамильский та
тюркский Татарин тт
Дравидийский Телугу тэ
Тай-Кадай тайский-й
Китайско-тибетский Тибетский бо
Афро-азиатский Тигриня ти
Австронезийский Тонга до
Нигер-Конго Цонга тс
тюркский Турецкий т.

This entry was posted in Популярное