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

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

Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

HTML — это первое, с чем сталкиваются начинающие веб-разработчики.

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

<div>
  <a aria-hidden='true' href='/'>Hexlet</a>
  <ul>
    <li>
      <a href="/my"><span></span>
        Мой Хекслет
      </a>
    </li>
    <li><a href="/courses"><span></span>
      Курсы
      </a>
    </li>
  </ul>
</div>

Именно такой код и называется HTML. Hypertext Markup Language (HTML) — это язык разметки для создания веб-страниц или веб-приложений. Пусть вас не смущает слово «язык», HTML не является языком программирования.

Другими словами, на HTML не программируют, как иногда думают начинающие веб-разработчики.

Формально языком программирования называют только тот язык, который является Тьюринг-полным.

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

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

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

u и выглядит это так:

текст c <u>ашыпкой</u> будет подчёркнутым

Тег u относится к парным тегам. Кроме открывающего тега <u> он требует наличия закрывающего тега: </u>. Так браузер понимает, когда нужно перестать делать текст подчеркнутым.

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

<!-- Список из двух элементов -->
<ul>
  <li>one</li>
  <li>two</li>
</ul>

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

Создайте файл index.html в любом удобном месте вашего компьютера. Добавьте туда html код, указанный ниже, а затем откройте файл в браузере.

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
    <meta name="description" content="My first page">
  </head>
  <body>
    <h2>Hello, World!</h2>
    <ul>
      <li>One</li>
      <li>Two</li>
    </ul>
  </body>
</html>

Поздравляю, вы сделали свою первую страницу! Если захотите потренироваться, то это всегда можно сделать здесь https://plnkr. co/edit/ (другие подобные сервисы легко гуглятся).

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

<a href="/about">О компании</a>
<a href="https://hexlet.io">Хекслет</a>

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

HTML — не единственный язык разметки. Например, текст этого урока я пишу с использованием разметки Markdown. Она обладает более скромными возможностями, чем HTML, но при этом сильно удобнее для простых текстов, которые пишутся вручную и требуют только базового форматирования. Более того, на Хекслете Markdown используется повсеместно. Практически в любом месте, где вы можете написать нам, можно использовать markdown.

## Заголовок
* Первый элемент списка
* Второй элемент списка

Но браузер не понимает разметку Markdown. Как же она работает? Все очень просто: сначала Markdown транслируется в HTML, который уже отдается браузеру, а браузер уже выполняет свою главную задачу — отрисовывает страницу. Трансляция производится программным способом, но для понимания общего принципа работы это не важно.

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

HTML, как и большинство языков разметки, очень прост. Учить его «от и до» не нужно. Главное, понять общую схему работы и научиться применять правильные теги. Этого достаточно для старта. Хороший справочник по html можно найти на developer.mozilla.org.

Браузер для разработчиков

В любом современном браузере есть специальная панель разработчика (Developer Tools или «инструменты разработчика»). Она позволяет в удобном виде просматривать структуру страницы и менять её. Показывает статистику по загрузке зависимых ресурсов. Помогает анализировать изменения во время взаимодействия с загруженной в браузере страницей. Попробуйте открыть её в вашем любимом браузере и поэкспериментировать.

Хекслет

На Хекслете есть бесплатный курс Основы современной вёрстки, содержащий текстовые уроки, интерактивные упражнения и тесты.


Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Основы HTML | Веб-программирование

Учебные программы » Веб-программирование » Лабораторный практикум » Основы HTML

HTML (HyperText Markup Language) — язык разметки гипертекста, используемый для создания документов, независимых от аппаратно-программной платформы. HTML — это не язык программирования, а описательный язык.

Цель работы: В ходе выполнения этой лабораторной работы необходимо освоить базовые приемы использования языка HTML для создания макета веб-страницы.

Задание к работе

  1. Спроектировать структуру веб-сайта по теме вашей учебной научно-исследовательской работы (УНИРС) или по любой другой теме, сопоставимой (или бОльшей) по объему с УНИРС. (см. также Практикум по программированию)
  2. Разработать эскиз оформления веб-сайта (использовать любой графический редактор).
  3. Выполнить верстку
    макета страницы с блочной структурой
    по разработанному эскизу.

Указания к работе

Описание тегов здесь и далее дается без привязки к конкретной версии языка HTML, это сделано умышленно, чтобы акцентировать внимание на общих принципах разметки. Это же относится и к атрибутам тегов. Подробные описание возможностей различных версий HTML (на уровне стандартов) всегда доступны на сайте http://www. w3.org.

Типовая структура парного тега:

<тег [атрибут="значение" [атрибут="значение" [...]]]>содержимое</тег>

Типовая структура непарного (одиночного) тега:

<тег [атрибут="значение" [атрибут="значение" [...]]] />

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

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

  • Теги HTML не чувствительны к регистру.
  • Различные версии HTML поддерживают устаревшие (deprecated) теги только для обратной совместимости.
  • Значения атрибутов крайне рекомендуется закрывать в одинарные или двойные кавычки.

Структура веб-страницы

См. Введение в HTML.

Список основных тегов HTML

ТегОбязательные атрибутыОписание
<html> Контейнер HTML-документа.
<head> Блок мета-данных HTML-документа
<title> Название HTML-документа, выводится в заголовке окна программы-браузера.
<meta>См. подробное описание мета-теговПредоставляет дополнительную информацию о документе.
<body>
 
Начальный и конечный тег тела документа.
<p>Параграф, основной текстовый контейнер, закрывающий тег обязателен </p>. После закрывающего тега браузер выполняет перенос строки и абзацный отступ.
<div>Контейнер, основное предназначение — размещение блоков содержимого на странице
<br> (в XHTML/HTML 5 — <br />) Принудительный перенос строки, закрывающий тег не требуется
<pre> Заключенный в теги <pre></pre> текст будет отображаться так, как
он был отформатирован:
с точным соблюдением переносов строк и	интервалов. 
<ul> Неупорядоченный (маркированный) список, элементы списка выводятся тегом <li>
<ol> 
Упорядоченный (нумерованный) список, элементы списка выводятся тегом <li>
<a>href = «URI»Создает в документе гиперссылку, обязательный атрибут href указывает на ресурс или его местонахождение
<i> Заключенный в теги <i></i> текст будет отображаться курсивом.
<b> Заключенный в теги <b><b> текст будет отображаться жирным шрифтом.
<tt> Заключенный в теги <tt></tt> текст будет отображаться моноширинный шрифтом.
<h2>…<h6> Заголовки разделов. Возможные значения — от h2 до h6. Семантически правильная структура заголовков веб-страницы влияет на ее ранжирование в поисковом индексе.
<sub> Заключенный в теги <sub></sub> текст будет смещен вниз (нижний индекс)
<sup> Заключенный в теги <sup></sup> текст будет смещен ввверх (верхний индекс).
<big> Заключенный в теги <big></big> текст будет отображаться шрифтом большего размера.
<small> Заключенный в теги <small></small> текст будет отображаться шрифтом меньшего размера.
<img>src=»URI»
alt = «some text»
Непарный тег. Указывает на изображение, загружаемое с адреса, заданного значением обязательного атрибута src. Значение атрибута alt используется, если изображение не может быть загружено или отображено.
<table> Контейнер таблицы. Строки формируются тегом <tr>, ячейки — <td>

Мета-теги

Основное предназначение мета-тегов (<meta . .. />), это включение информации о документе, которая может содержать сведения об авторе, дате создания документа или авторских правах.

Вся информация, находящаяся в мета-тегах ориентирована на серверы, браузеры и поисковых роботов. Для посетителя веб-страницы информация, которую несут в себе мета-теги, будет не видна.

В документе может находится любое количество тегов <meta>. Все они размещаются в блоке <head>…&lt/head>.

Рассмотрим некоторые, часто используемые мета-теги:

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

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

<meta http-equiv="Refresh" content="N; url=http://example.org/">

Автоматическое перенаправление (редирект) через N секунд после открытия с текущей страницы на указанный адрес .

<meta name="author" content="Имя автора страницы">

Используется для указания имени автора. Поисковые системы могут найти нужную информацию по имени автора.

<meta name="keywords" content="список, ключевых, слов">

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

<meta name="description" content="Сюда вписывается краткое описание страницы">

Этот тег задает фразу, по которой пользователь определяет суть вашей страницы и решает, посещать ли ее. Вписанные выражения в данный meta-тег играют важную роль в рейтинге страницы. Ключевые фразы из описания должны совпадать с основным текстом страницы, это тоже играет большую роль при индексации страницы поисковыми роботами.

<meta name="robots" content="index,all">

Управление поисковым роботом, указание ему того, что страницу нужно индексировать (или нет, если указано «noindex»).

Cпециальные символы

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

СимволМнемокодЧисловой кодОписание
 &nbsp;&#160;неразрывный пробел
¢&cent;&#162;цент
£&pound;&#163;фунт стерлингов
¥&yen;&#165;иена или юань
§&sect;&#167;параграф
©&copy;&#169;знак copyright
«&laquo;&#171;левая двойная угловая скобка
&shy;&#173;место возможного переноса
®&reg;&#174;знак зарегистрированной торговой марки
°&deg;&#176;градус
²&sup2;&#178;верхний индекс два (x²)
³&sup3;&#179;верхний индекс три (x³)
·&middot;&#183;точка по середине
»&raquo;&#187;правая двойная угловая скобка
½&frac12;&#189;дробь – одна вторая
×&times;&#215;знак умножения
÷&divide;&#247;знак деления
σ&Sigma;&#931;греческая заглавная буква сигма
λ&lambda;&#955;греческая строчная буква лямбда
μ&mu;&#956;греческая строчная буква мю
&bull;&#8226;маркер списка
&hellip;&#8230;многоточие . ..
&euro;&#8364;валюта евро

Немного о верстке

Общее форматирование

<!-- Это комментарий -->
<h2>Заголовок</h2>
<p align="center">Абзац по центру</p>
<p align="right">Абзац по правому краю</p>
<p>Обычный текст — <b>полужирный текст</b></p>
<p><span>Ooops!</span> — использование CSS</p>

Структура макета веб-страницы

Возможности HTML и CSS позволяют создавать гипертекстовые страницы как с линейной, так и с нелинейной структурой. Линейные структуры (где текст отображается последовательно, элемент за элементом) сейчас используются не часто. Пример веб-страницы с линейной структурой приведен в листинге 1 (обратите внимание на исходный код веб-страницы).

Больше возможностей по дизайну представляют макеты веб-страниц с нелинейной структурой, которые создаются:

  1. С использованием фреймов.
  2. С использованием табличной верстки.
  3. С использованием блочных элементов.

Пусть требуется создать документ, логически разделенный на три блока (рис. 2): «head» — верхний блок, «menu» — левый блок, «content» — правый блок. Примеры, иллюстрирующие как это можно сделать перечисленными способами, приведены в листингах 2, 3 и 4.

Рис.2. Веб-страница с тремя блоками

Листинг 2. Фреймовая структура

<!--
Содержимое блоков хранится в файлах top.html, left.html, content.html
Сборка выполнена в файле index.html, имеющем следующий вид:
-->
<html>
<head>
<title>Фреймы</title>
</head>
<frameset rows="10%,*">
<frame name="top" src="top.html">
<frameset cols="10%,*">
<frame name="left" src="left.html">
<frame name="cont" src="content.html">
</frameset>
<noframes>Это для браузеров, не поддерживающих фреймы.</noframes>
</frameset>
</html> 

Листинг 3. Табличная структура

<html>
<head>
<title>Таблицы</title>
</head>
<body>
<table>
<tr>
<td colspan=2>HEAD</td>
</tr>
<tr>
<td>LEFT</td>
<td>CONTENT</td>
</tr>
</table>
<body>
</html>

Листинг 4. Блочная структура

<html>
<head>
<title>Блоки (div)</title>
<style> <!-- см. внедренные стили -->
body	{margin: 10px;}
div	{border: solid 1px black;}
.top	{position: relative; height: 100px; width: 100%;}
.left	{position: absolute; top: 114px; left: 10px; width: 200px; }
.main	{position: absolute; top: 114px; left: 214px; margin-right:8px;}
</style>
</head>
<body>
<div>TOP</div>
<div>LEFT</div>
<div>CONTENT</div>
</body>
</html> 

Контрольные вопросы

  1. Что такое HTML? Что такое гипертекстовый документ?
  2. Что такое тег? Структура тега HTML. Формат записи.
  3. Привести структуру HTML документа. Описать назначение тегов <html>, <head>, <meta>, <body>.
  4. Что такое атрибут тега? Формат записи атрибутов.
  5. Перечислить теги для представления текстовго содержимого и дать их описание.
  6. Как представляются гиперссылки в HTML документе? Дать пример внутренних и внешних ссылок.
  7. Перечислить виды списков, существующих в HTML. Привести теги, представляющие списки в HTML.
  8. Что такое вложенные списки в HTML? Привести пример разметки вложенного списка.
  9. Как включаются графические объекты в HTML документы?
  10. Куда будет указывать ссылка, если атрибут href оставить пустым (<a href=»»>анкор</a>)?
  11. Как будет отображаться страница, если мета-тег charset не будет соответствовать фактической кодировке текста?
  12. Что произойдет, если в странице использовать следующий код:
    <meta http-equiv="refresh" content="0;">

CC-BY-SA Анатольев А. Г., 12.02.2013

Разделы дисциплины

Методические материалы

Конспект лекций

Лабораторный практикум

Задания на самостоятельную подготовку

Дополнительные материалы

Материалы раздела

МУ к ЛР по веб-программированию (Скачать pdf, 2.2МБ)

Основы HTML

Каскадные таблицы стилей

Введение в JavaScript

Объекты javascript

Администрирование веб-сервера

Серверные приложения. Основы языка PHP

Библиотечные функции PHP

Веб-формы

Взаимодействие серверных веб-приложений с БД

Сессии. Ограничение доступа к содержимому веб-страниц

Использование .htaccess

Спецификация SiteMap

Формат RSS

Интеграция веб-сайта с внешними сервисами

Отладка сайта. Размещение сайта на веб-сервере

Связанные темы

Лекция 2. Основы HTML

Лекция 3. Каскадные таблицы стилей

Лекция 4. Протокол HTTP

Каскадные таблицы стилей

Как выбрать лучший браузер?

Типы веб-сайтов

Проектирование структуры сайта

Тег HTML »

В тегах HTML, Новый

Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Узнать больше

Элемент
Структура HTML-документа до и после HTML5 — вот что изменилось
Что делает
HTML-тег ?
Элемент
используется для обозначения содержимого веб-страницы, относящегося к центральной теме этой страницы или приложения. Он должен включать контент, уникальный для этой страницы, и не должен включать контент, который дублируется на нескольких веб-страницах, например верхние и нижние колонтитулы и основные элементы навигации.
Дисплей
встроенный
Использование
семантический | Structural

Содержание

  • 1 Структурирование вашего HTML Document
    • 1,1 Использование
    • 1.2 Правильные определения на вашей странице
  • 2 Бруузер — это структурный и семантический элемент, определяющий основной раздел страницы, где отображается контент. Подобные элементы включают
    , который обозначает статью в файле HTML, и

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

    Ваш адрес email не будет опубликован. Обязательные поля помечены *