HTML (HyperText Markup Language) – это язык разметки гипертекста, который используется для создания и структурирования веб-страниц. Простыми словами, HTML позволяет определить, как элементы веб-страницы, такие как заголовки, параграфы, списки, ссылки и изображения, должны отображаться в браузере. HTML это такая же повседневная и широкая в применении технология, как стол, стул или шариковая ручка. Ты видишь её каждый день в своём телефоне, на экране ноутбука и во множестве других мест. HTML уже давно стал частью современного мира.
Как мы помним из прошлых статей, интернет представляет из себя набор текстовых страниц, соединенных между собой ссылками. Открывая какую-либо страницу, мы запрашиваем у конкретного сервера программный код этой страницы, после чего страница рисуется в нашем веб-браузере. Интернет в целом, и протокол HTTP в частности, являются технологиями передачи текста. В свою очередь, текст сайтов кодируется с помощью языка HTML. Мы смотрим на очередную красивую страницу сайта - а внутри неё находится ни что иное, как чистый HTML-код, написанный программистами и обработанный специальными программами.
В классическом понимании, HTML не является языком программирования. Скорее, это язык для создания визуальной части веб-страницы - язык создания архитектуры страницы. Совокупность его элементов определяет каркас страницы, точно так же как кирпичи определяют стены и окна в доме. Ключевое отличие HTML от языков программирования - HTML всегда статичен, и нужен для создания структуры. HTML не позволяет анализировать или изменять данные, он нужен только для конструирования страниц сайта на этапе его разработки. Условный же язык программирования наоборот динамичен, и позволяет оперировать какими-то данными "на лету", анализируя и изменяя их.
Немного занятных формальностей про язык HTML 👨💻
- HTML был придуман в 1991 году. Автор первой версии языка - Тим Бернерс Ли, сотрудник ЦЕРН.
- «Язык» – это самая простая для понимания часть аббревиатуры. Как и любой язык, HTML имеет уникальный синтаксис и алфавит. То есть, имеет определенный набор правил, которые нужно соблюдать.
- «Разметка» в HTML – это способ "размечать" страницу, чтобы браузер знал, как правильно ее отобразить. Эти разметки не видны на самой странице человеческому глазу, они используются для указания браузеру, как показывать страницу посетителям. То есть - разметка точно задает, где на странице будет картинка, а где форма для ввода логина и пароля.
- «Гипертекст» – это текст, в котором есть ссылки на другие веб-страницы. Ссылки, как ты наверное знаешь, называются гиперссылками. С помощью гиперссылок мы можем переходить к другим частям этой же страницы, к другим страницам на текущем веб-сайте или к совершенно новым веб-сайтам.
- Язык HTML использует 99% существующих сайтов в классическом понимании термина "сайт".
- Наиболее часто используемые элементы HTML - это теги div, a, img, span. Самый частый тег - это div, представляющий из себя простой прямоугольник произвольного размера. Иными словами - большая часть сайтов сделана из прямоугольников, умело связанных друг с другом.
В какой момент рождается HTML код? 🧙
HTML используется для создания веб-страниц - это его прямое и единственное предназначение. HTML это бесплатный и свободно-распространяемый, общеизвестный инструмент. Соблюдение и наличие общепризнанного стандарта помогает гарантировать правильное отображение текста, изображений и других элементов. Этот язык настолько важен и нужен, что без него не было бы интернет-сайтов в классическом понимании. Стандарты HTML описаны специальной организацией по стандартизации. Например, последний стандарт языка HTML5 описан здесь. Компании, которые производят веб-браузеры (Google Chrome, Яндекс.Браузер и другие), должны придерживаться этого стандарта при разработке своих браузеров.
Программный код HTML создаётся веб-программистом в момент разработки сайта. Для каждой страницы сайта существует отдельный файл с соответствующим HTML-кодом. После этого, он отправляется в специальную папку на физическом сервере. С этого момента, такой HTML-код некоторой страницы становится общедоступным - и его можно посмотреть по некоторой ссылке в браузере. Создание страниц с помощью HTML-кода - это отчасти техническая наука, а отчасти чистое творчество, и немного отчасти - настоящая магия созидания.
С помощью HTML ты можешь не только добавлять заголовки, абзацы, списки и другие элементы. Ты также можешь вставлять изображения, видео, аудио-файлы и другие мультимедиа-ресурсы. И ты можешь ссылаться на другие веб-страницы на том же веб-сайте или на другие сайты. Иначе говоря, HTML позволяет создавать практически какие-угодно веб-страницы, ограничивая тебя лишь рамками твоего творчества и запасом вдохновения.
HTML используется не только для создания веб-страниц, но и для других вещей. Ты сможешь использовать его для:
- Создания таблиц на организации данных.
- Создания формы в целях сбора информации о пользователях, обработки транзакций, бронирования или размещения заказа.
- Создания электронных писем с помощью HTML.
Если ты хочешь создавать веб-страницы, таблицы, формы или электронные письма, тебе точно нужно знать, как писать HTML. На пути развития программиста - будь то FullStack-программист или веб-разработчик, знание языка HTML является обязательной частью.
Как писать на языке HTML? ✍️
По сравнению с другими языками, HTML – лёгкий в чтении и понимании язык программирования (разметки). По сути, он похож на простой английский текст с дополнительными символами.
Основным строительным блоком языка HTML является "элемент". Иногда его ещё называют "тегом" или HTML-тегом. Такой элемент содержит информацию, которую веб-браузер должен отобразить пользователю.
Элементы HTML вкладываются друг в друга - образуя целостный документ. Внутри HTML-элементов могут быть или другие элементы, или текст, или "ничего" - то есть пустота. В зависимости от типа элемента, они могут иметь определенные особенности, или иметь какое-то специальное поведение.
Как правило, перед написанием HTML-кода, программист или веб-дизайнер рисует примерный внешний вид страницы. Это может быть набросок от руки на листе бумаги А4, электронный скетч в специальном приложении вроде Figma, или любой другой концепт. Задача прототипирования перед фактическим написанием кода в том, чтобы программист получил какой-то ориентир внешнего вида, который ему нужно сделать.
Как использовать язык HTML? 🚀
Для начала работы с HTML тебе понадобится текстовый редактор – программа для написания и редактирования кода. Поскольку HTML-файл имеет простой стандартный текстовый формат, ты можешь использовать любой текстовый редактор. Например, самый обычный текстовый блокнот.
Когда ты откроешь текстовый редактор, ты, скорее всего, увидишь окно для ввода текста. Скопируй приведенный ниже HTML-код и вставь его внутрь редактора:
<!DOCTYPE html>
<html>
<body>
<h1 style="color: red;">Мой первый заголовок.</h1>
<p>Мой первый параграф.</p>
</body>
</html>
Затем сохрани файл и назови его «index.html». Ты можешь сохранить его на рабочий стол или в другую папку. После сохранения HTML-файла ты можешь открыть его в веб-браузере. Для этого можно дважды щелкнуть файл, щелкнуть правой кнопкой мыши и выбрать «Открыть» или просто перетащить файл в окно Google Chrome.
Если ты всё сделал правильно, то увидишь страницу с приветственным заголовком и параграфом с текста. Это и есть самая простая версия HTML-документа. Точно такие же файлы составляют весь интернет, который ты видишь. И пусть многие страницы выглядят гораздо профессиональней или красивей чем тестовый пример, будь уверен - внутри это точно такой же HTML-код, который подчиняется точно таким же общим правилам написания.
Как правильно создать HTML-файл? 🈯️
Файл HTML - это файл с программным кодом твоей веб-страницы, который будет загружен на веб-сервер. Обычно, сайт состоит не только из одной главной страницы index.html - а из множества html-страниц, связанных друг с другом. Для хранения всех html-файлов некоторого сайта используется веб-сервер.
Веб-сервер предназначен для общения твоего сайта с внешним виром. Внутри веб-сервера хранится папка с html-файлами, каждому из которых присвоена ссылка (адрес страницы). Таким образом, когда пользователь открывает какую-то конкретную страницу по некоторой ссылке, сервер отправляет копию этой HTML-страницы в браузер пользователя, и страница отображается на экране.
Чтобы создавать работающие и корректные html-файлы, надо следовать определенным правилам и принципам написания кода. Это не что-то сложное или сильно замысловатое, но определенно это то что надо знать и уметь уважающему себя программисту.
Шаг 1: Добавь объявление <!DOCTYPE>
В самом начале тебе нужно объявить тип документа HTML. Добавь специальный код <!DOCTYPE html> на самую первую строку файла. Директива <!DOCTYPE html> означает, что ты документ будет содержать в себе HTML-код по стандарту HTML5. Без объявления DOCTYPE браузер будет воспринимать документ как простой набор текста.
Шаг 2: Добавь элемент <html>
Далее тебе нужно добавить элемент <html> после объявления типа документа. Элемент html также называемый «корневым» элементом документа, поскольку он содержит все остальные элементы документа.
<!DOCTYPE html>
<html>
</html>
Все оставшиеся элементы документа будут размещены между этими тегами, внутри блока html.
Шаг 3: Добавь атрибут языка
Добавь атрибут «lang» (язык) в открывающий тег HTML. Это будет помогать программам для чтения с экрана определить язык твоего веб-сайта, что сделает его более доступнее. Атрибут lang подразумевает тип естественного языка, который будет использован на странице. Lang="ru" подразумевает Русский язык. Lang="en" подразумевает Английский язык. Наличие этого атрибута так же позволит браузеру быстрее определять язык страницы, и корректно отображать его относительно языка, который установлен в настройках твоего компьютера или смартфона.
Если не установлен языковой атрибут программы чтения с экрана по умолчанию, программы будут использовать язык операционной системы, что может привести к неправильному произношению заголовка и другой информации на странице.
<!DOCTYPE html>
<html lang="en">
</html>
Шаг 4: Добавь разделы head и body
HTML-документ всегда состоит из двух частей: раздел head и раздел body. Эти две части документа можно интерпретировать как "заголовок документа" и "тело документа".
Раздел head содержит подробную информацию о странице. Внутри него происходит подключение стилизации страницы, а так же интерактивных скриптов JavaScript. Концептуально, раздел head содержит данные, которые не будут видны пользователю - это мета-информация о страниц, которая нужна веб-браузеру для правильного отображения страницы.
Раздел body содержит физическое содержимое страницы. В разделе body есть всё, что пользователи могут видеть на веб-сайте, например абзацы, изображения, ссылки, видео и все остальное. Все то что ты видишь на любых страницах любых сайтов - относится именно к секции body и её содержимому.
<!DOCTYPE html>
<html lang=”en”>
<head>
</head>
<body>
</body>
</html>
Шаг 5: Добавь заголовок в раздел head
В разделе заголовка ты наверное захочешь дать имя своему документу. Напиши имя (в этом примере я возьму «Войти в IT»), а затем заключи его в теги <title></title>. То что ты здесь укажешь, будет отображаться внутри названия вкладки в веб-браузере.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Войти в IT</title>
</head>
<body>
</body>
</html>
Шаг 6: Добавь элементы HTML в раздел body
В разделе body давай добавим заголовок и абзац. Напиши содержимое заголовка и оберни его тегами <h1></h1>, затем напиши содержимое абзаца и оберни его тегами <p></p>. Это будут физические элементы, которые отобразятся внутри вкладки в веб-браузере.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Войти в IT</title>
</head>
<body>
<h1>Это заголовок</h1>
<p>Это параграф.</p>
</body>
</html>
В итоге, если ты всё сделал правильно - у тебя получился .html документ который сохранен на рабочем столе или в какой-то папке. Перетащи этот документ в веб-браузер с помощью мышки. И вероятно ты увидишь что-то вроде этого:
История появления языка HTML ⏳
Впервые язык HTML был представлен Тимом Бернерсом-Ли, британским учёным-компьютерщиком, в 1990 году как способ обмена информацией через Интернет. Можно сказать, что в этот момент и родился интернет в его первой версии. Вот тут у нас есть отдельная статья с подробностями по этому поводу.
Первоначальная версия HTML, известная как HTML 1.0, была простой и ограниченной в своих возможностях. Это позволило пользователям только создавать базовые текстовые документы с заголовками, абзацами и ссылками. Со временем были разработаны новые версии HTML, каждая из которых содержала новые функции и улучшения. На сегодняшний день, стандарт HTML позволяет создавать очень сложные и интерактивно-насыщенные веб-страницы, практически для любых целей.
HTML 2.0:
Выпущенная в 1995 году, эта версия принесла миру значительные улучшения, включая поддержку таблиц и встраивание изображений. В этой версии улучшен визуальный макет и интерактивность веб-страниц.
HTML 3.2:
Выпущенная в 1997 году, представила еще больше функций, таких как проверка форм ввода, фоновые изображения и улучшенная поддержка CSS (каскадные таблицы стилей). Это ознаменовало значительный шаг вперед в веб-дизайне и функциональности.
HTML 4.01:
Выпущенная в 1999 году, еще больше расширила возможности HTML. Добавлена поддержка фреймов, мультимедийного контента и языков интерактивных сценариев, таких как JavaScript. Эта версия оставалась стандартом веб-разработки на протяжении многих лет. Всевозможные плавающие формы, крутилки-вертелки, онлайн-карты городов и подобное - все это началось именно с версии 4.01.
В начале 2000-х годов Консорциум Всемирной паутины (W3C) начал работу над новой версией под названием XHTML (расширяемый язык разметки гипертекста). XHTML был призван объединить преимущества HTML и XML (расширяемый язык разметки), обеспечивая более строгий и структурированный подход к веб-разработке. Однако спецификация HTML5, представленная в 2014 году, приобрела большую популярность и широкое распространение. С тех пор доминирующим стандартом HTML является именно великий и могучий HTML5.
HTML5:
Эта версия языка принесла значительные улучшения, включая встроенную поддержку видео и аудио, холст для рисования графики, геолокацию и улучшенную семантику. Это также позволило создавать больше интерактивных веб-приложений без необходимости использования таких плагинов, как Flash.
С тех пор HTML5 стала стандартом де-факто для веб-разработки и продолжает развиваться. Она обеспечивает гибкую и мощную основу для создания современных и адаптивных веб-сайтов, поддерживающих широкий спектр устройств и браузеров.
В заключение, история HTML демонстрирует её эволюцию от простого языка разметки до универсального инструмента веб-разработки. С каждой версией HTML становится все более многофункциональным и позволяет создавать динамичные, интерактивные и визуально привлекательные веб-страницы.
Общие элементы HTML 📚
Первая версия HTML состояла всего из 18 элементов. С тех пор было выпущено больше версий с добавлением десятков тегов в каждую. В самой последней версии HTML - HTML5 - имеется 110 тегов HTML. Только представь себе - целых 110 различных элементов, чтобы нарисовать веб-страницу - это очень, очень большие возможности для творчества!
Однако не стоит и сильно переживать насчет обилия элементов – есть лишь буквально 10 из них, которые ты будешь использовать чаще всего. Ниже я рассмотрю наиболее распространенные элементы и их теги.
Абзац (<p>)
Элемент абзаца HTML представляет собой абзац. Поместив теги <p></p> вокруг текста, ты заставишь этот текст начинаться с новой строки. С точки зрения поисковых систем, любые авторские тексты должны быть заключены сначала в тег <article>, а потом в теги типа <p>.
<p>Это абзац.</p>
<p>Вот еще один абзац на новой строке.</p>
Изображение (<img>)
Элемент изображения HTML используется для вставки изображения в документ. Атрибут src является обязательным для правильного отображения, а атрибут alt следует добавить, чтобы учесть проблемы с загрузкой изображений или читателей с нарушениями зрения. Внутри атрибута src указывается фактическая ссылка на файл с изображением.
<img src="https://assets.codepen.io/6093409/sprocket.svg" alt="логотип звёздочки HubSpot"/>
Заголовки (<h1>-<h6>)
Элементы заголовка HTML обозначают различные уровни заголовков наших разделов. Тег <h1> обозначает самый высокий уровень и является наиболее заметным, тогда как тег <h6> обозначает самый низкий уровень и, следовательно, наименее заметен. Очень желательно, чтобы все значительные блоки с текстом имели заголовки. Это так же помогает поисковым систем определить содержимое твоего сайта и его качество.
<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
<h3>Заголовок 3</h3>
<h4>Заголовок 4</h4>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>
Блочный элемент (<div>)
Элемент div является основным блоком для конструирования страниц. Это - обычный прямоугольник, который имеет размер в длину равный размеру экрана, и размер в высоту, равный своему содержимому. Как показывает историческая практика, более 70% существующего HTML кода приходится именно на теги типа div.
Быть программистом. Знать HTML 😎
Итоговая мораль. Знание языка HTML является обязательным на пути развития как программиста широкого профиля, так и веб-разработчика. HTML - это простой и понятный язык, хорошее освоение которого занимает не более 2-3 месяцев. Научившись этому языку, ты сможешь самостоятельно создавать интернет-сайты и понимать устройство веб-страниц. ты можешь изучить этот язык самостоятельно, или воспользоваться профильным курсом - например по этой ссылке.
Не бойся экспериментировать и идти в новое. HTML является одним из базовых кирпичиков профессии программиста. Это одна из основ, которую очень просто выучить и ещё проще применять в реальной жизни. Попробуй - а вдруг у тебя всё получится?
🔥 Понравилось? Подпишись! Победим восстание роботов вместе! 🔥
🚀 P.S. Ты можешь круто поддержать меня и проект "Войти в IT" на boosty! Я публикую там более эксклюзивный и профессиональный, иногда немного личный контент. Хочешь посмотреть как я выгляжу в реальной жизни? Тогда жми: Ссылка 🚀
P.S.2 У меня ещё есть Telegram-канал. Там посты чуть попроще, и чуть повеселей. Ссылка
