Всем салют, друзья!
Сегодня я расскажу вам, что такое html, в этой статье мы рассмотрим историю и его развитие. Выясним как создаются сайты и на сколько это сложно.
Погнали!
1. HTML код — что это такое простыми словами
HTML (англ. "hyper text markup language" — язык гипертекстовой разметки) — это специальный язык разметки, который применяется при создании сайтов в интернете.
Все браузеры без проблем понимают html и могут переводить его для нас с вами в понятном виде. Любая страница сайта является html-кодом, этот код браузер переводит в дружественный вид для пользователя. Этот код вы можете посмотреть, он доступен на каждой странице все что вам нужно сделать это щелкнуть правой кнопкой мыши и выбрать посмотреть исходных код или поступит еще проще - нажать на клавиатуре CTRL+U:
Язык html очень популярен. Сегодня этот язык является единственным, с помощью которого создается разметка сайта. Я хочу подчеркнуть тот факт, что именно разметка. Так называемый "движок" создается на другом языке программирования (чаще всего php), который позволяет создавать интерактивные страницы (html этого не позволяет).
Файлы, созданные на html, имеют расширения . html или . htm. Для создания файла html, достаточно открыть блокнот и сохранить его с расширением .html.
2. Пример и структура html кода
Ниже приведен пример со структурой типичной html страницы. Обратите внимание, что html код делится на две области:
1.Заголовок
2.Тело страницы.
<!DOCTYPE html>
<html>
<head>
<title>Название страницы</title>
...
Заголовочные теги (подключение стилей, скриптов)
...
</head>
<body>
...
<!-- Начало тела страницы.
Это комментарий. Он виден только в коде, а на странице он отсутствует -->
<div class="shapka">
Шапка сайта
</div>
...
<div class="page">
<div class="sidebar_left">
Левая колонка
</div>
...
<div class="content">
... Основная часть сайта...
</div>
...
<div class="sidebar_right">
Правая колонка
</div>
...
<div class="footer">
Низ страницы
</div>
...
</div>
</body>
</html>
Редактировать этот код можно в любом редакторе, но чаще всего для разработки html сайта используют notepad++ (продвинутый редактор, который выделяет теги и показывает ошибки).
Разметка состоит из html тегов (иногда пишут "тэг").
3. Что такое HTML тег
HTML тег — это один из элементов верстки html который нужен для структуры. Теги имеют открывающий знак < и закрывающий >.
Например, <teg>. Почти каждый тег парный и требует закрывающего тега </teg>. Если вебмастер забудет поставить закрывающий тег или сделает это некорректно, то верстка будет не валидной. Если это тег относится к тем, что держат "каркас" сайта, то сайт может "поплыть" (боковая колонка сместится вниз и т.п.).
Запрещено закрывать теги не по порядку их открытия. Например
<!DOCTYPE html>
<html>
<body>
<!-- Неправильно: -->
<div>
<table>
</div>
</table>
<!-- Правильно: -->
<div>
<table>
</table>
</div>
</body>
</html>
Более подробно про создание html страницы читайте в статье: Знакомство с html (это первый урок по этой тематике)
Если HTML представляет собой скелет (структура) сайта, то CSS (CSS (от англ. "Cascading Style Sheets", каскадные таблицы стилей) — список стилей для сайта на html)— это набор правил, которые отвечают за то, как это будет выглядеть, а именно, какой будет шрифт (размер, цвет, толщина), как будут располагаться элементы на сайте друг относительно друга и т.п. Поэтому HTML и CSS довольно тесно связаны между собой.
4. История развития HTML
1. HTML 1.0 (1986) — самая первая версия, в которой отсутствовало множество важных тегов. Официально не существует.
2. HTML 2.0 (22 сентября 1995) — появление тега form
3. HTML 3.2 (14 января 1997) — появление тега table, а также различные эффекты обтекания текста изображения
4. HTML 4.0, 4.01 (24 декабря 1999)— добавлена поддержка скриптов и фреймов, введена таблица стилей CSS
5. HTML 5.0 — новая версия, которая вступила в силу с 2014 году. Советую прочитать: особенности оптимизации сайта в html5
Кстати, в выше рассмотренном примере, чтобы подчеркнуть использование стандарта HTML 5.0 мы использовали специальный тег <!DOCTYPE> в начале документа.