Почему html не язык программирования
Перейти к содержимому

Почему html не язык программирования

  • автор:

HTML и CSS в веб-разработке

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

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

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

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

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

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

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

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

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

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

Например, абзац – это элемент HTML, который начинается с тега

, содержит текст, другие элементы HTML и заканчивается закрывающим тегом

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

Первые версии языка 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 .

Создание нового файла в Sublime Text

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

Пример html-, css- и js-кода в одном файле

На скрине файл содержит не только теги HTML, также имеются включения кода на CSS и JS. Команды CSS заключаются между html-тегами

. Команды JS – между . Отметим, что подобный способ включения не единственный.

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

Просмотр html-страницы в браузере

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

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

 html> head> title>Пример 1/title> style> h1 < 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 onclick="changeTheme()"> Изменить тему /button> h1>HTML, CSS, JS/h1> p>В клиентском веб-программировании чаще всего используется три языка - HTML, CSS и JavaScript./p> body> /html>

X Скрыть Наверх

Введение в веб-разработку и создание сайтов

Что такое HTML и зачем он нужен

Что такое HTML и зачем он нужен главное изображение

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

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

Гипертекст — это система текстов, в которой разработчики прописывают элементы сайта и связывают их между собой ссылками. Благодаря гипертексту мы можем переходить по ссылкам на сайте, открывать видео и картинки. А гипертекстовая разметка — это правила, по которым разработчики создают текст веб-страницы.

Фронтенд-разработчик — с нуля до трудоустройства за 10 месяцев

  • Постоянная поддержка от наставника и учебного центра
  • Помощь с трудоустройством
  • Готовое портфолио к концу обучения
  • Практика с первого урока

Вы получите именно те инструменты и навыки, которые позволят вам найти работу

Зачем нужен HTML

Основная цель HTML — структурировать и оформлять контент на сайте.

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

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

Возможности HTML

С помощью HTML можно:

  • Делать текстовую разметку — форматировать текст, выделять фрагменты, создавать списки, добавление сноски.
  • Встраивать медиа. HTML позволяет размещать на сайте изображения, аудио, видео, карты.
  • Создавать ссылки и навигацию. Гиперссылки и списки меню помогают быстрее найти информацию и сориентироваться на странице.
  • Создавать таблицы. Нередко информацию удобно представить в табличном виде. HTML умеет работать с таблицами.
  • Создавать формы. Формы нужны для регистрации посетителей сайта по телефону и электронной почте, оформления заказов, опросов и сбора обратной связи — отзывов, комментариев, предложений.

В HTML можно даже создавать простой дизайн: например, устанавливать цвет и шрифт текста или фоновый цвет блока. Но более сложный дизайн страницы разработчики делают с помощью CSS — языка стилей, который создали специально для работы в связке с HTML.

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

Читайте также:

Как выглядит код на HTML

Увидеть HTML-код очень просто. Для этого нажмите клавишу F12 на любом сайте или правую кнопку мыши и выберите «Показать исходный код» или «Просмотр кода страницы». В разных браузерах названия этой команды может отличаться.

Так выглядит HTML-код главной страницы блога Хекслета

HTML-код пишут и сохраняют в документе — текстовом файле с расширением .html или .htm . HTML-файл можно написать в любом текстовом редакторе, даже в стандартном Блокноте Windows. Чтобы просматривать HTML-файлы, интернет не нужен.

Если создать несколько HTML-файлов в одной папке и поставить внутри гиперссылки, то можно переходить по этим ссылкам из одного документа в другой.

Что такое теги HTML

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

Самая простая HTML-страница состоит из трех тегов: , и .

Теги и используют на странице только один раз.

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

В теге хранится служебная информация — заголовок и кодировка страницы.

Внутри тега помещается содержимое страницы, которое отображается в браузере — текст, изображения, видео.

В теге — заголовок веб-страницы. Его браузер отобразит как название и сохранит в описании, если сохранить страницу в закладки.

Тег помещает изображение в нужное место страницы.

Есть парные и непарные HTML-теги, первых — большинство. Парный тег состоит из открывающего и закрывающего тега. Закрывающий тег содержит дополнительный элемент / — эта косая черта называется «слэш».

Например, тег

, внутри которого размещается текст, парный:

 Слава роботам! 

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

 src='robot-bender.jpg' alt='picture-of-Bender-the-robot'> 

У каждого тега есть атрибуты. Они расширяют возможности тегов: задают стили, добавляют ссылки, управляют мультимедиа.

В примере выше показаны два основных атрибута непарного тега — это src и alt . Атрибут src добавляет ссылку на файл изображения, атрибут alt — подпись к картинке, которую покажет браузер, если файл изображения не загрузится.

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

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

Заголовки

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

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

Заголовки конкретной страницы помогают поисковым системам вроде Google или «Яндекса» определить ее содержание. Для поисковиков каждый следующий тег заголовка менее важен, чем предыдущий. То есть у заголовка меньшая важность, чем у заголовка .

Абзац

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

.

Текст, разбитый на абзацы читать и воспринимать легче, чем сплошное «полотно». Абзац делит содержимое на логически связанные блоки.

Списки

Списки упорядочивают информацию на странице и улучшают ее восприятие. Обычно используются нумерованные и ненумерованные списки.

Ненумерованные или маркированные списки («буллеты») добавляют на страницу тегом . Такие списки применяют, когда последовательность элементов не важна.

Отдельный элемент в списке любого типа вводится тегом . Этот тег нужно закрывать после каждого пункта.

Читайте также:

Преимущества и недостатки HTML

Плюсы HTML

  • Простота и доступность. HTML — это простой язык разметки, который легко изучить и использовать. Код на нем можно писать в любом текстовом редакторе.
  • Адаптивный дизайн. Теги в современных версиях HTML позволяют делать разные версии одного сайта для удобного просмотра на любом устройстве: от смартфона и планшета до большого монитора.
  • Гибкость. На HTML можно создавать простые сайты без использования интерактивных изменяющихся элементов. Например, лендинг, сайт-визитку компании, портфолио, каталоги, справочники, инструкции, небольшие блоги.

Минусы HTML

  • Ограниченные возможности. HTML — это язык разметки, а не язык программирования. Делать современные сайты только на HTML не получится. HTML, например, не может создавать динамические веб-страницы, которые изменяются в реальном времени без перезагрузки страницы. Для создания чего-то более сложного не обойтись без CSS и JavaScript.
  • Неполная совместимость последних версий HTML и браузеров. Некоторые браузеры не сразу встраивают поддержку новых функций и тегов, старые версии (Internet Explorer версии 8 и более ранней) могут неадекватно интерпретировать новые теги.

Является ли HTML языком программирования

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

Чтобы обрабатывать данные, введенные в формы, обмениваться этой информацией с базами данных, хранящимися на сервере, создавать анимацию используют языки программирования JavaScript, PHP и Python.

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

Освоить HTML можно на курсах Хекслета — пройдите их, чтобы сделать свой первый шаг в профессии фронтенд-разработчика.

Профессия «Фронтенд-разработчик»

  • Изучите востребованные JavaScript и TypeScript
  • Научитесь создавать пользовательские интерфейсы сайтов и приложений
  • Освойте самый популярный фреймворк JavaScript — React
  • Познакомьтесь с языками веб-разработки HTML и CSS

HTML — не язык программирования, и это плюс!

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Перевод статьи «HTML is not a programming language and that’s the best thing about it».

Я люблю HTML. Чем больше я его узнаю, тем сильнее утверждаюсь в мысли, что это гениальное творение рук человеческих. А больше всего мне в нем нравится то, что он не является языком программирования.

Языки программирования — отстой. Они постоянно сбоят (я клянусь, я всегда сразу пишу свой JavaScript идеально, а он все равно умудряется сбоить).

И что еще хуже — чаще всего в результате падает вся программа! Лучше уж карточный домик складывать на мосту в ветреную погоду.

А вот (для контраста) посмотрите, как прекрасен HTML:

Это красивый, семантический HTML5. Он заботится о доступности. Содействует удобочитаемости. Не забывает о стилизации. Еще и поисковым роботам помогает.

Если старый браузер не знаком с HTML5, он просто посчитает элемент nav старым добрым div, и все будет работать.

Если разработчик или пользователь с редактором кода (например, WordPress-бэкендер) напишет nax вместо nav, это все равно сработает.

Давайте посмотрим другой пример:

 
HTML HTML is an acronym for HyperText Markup Language. It was created by Tim Berners-Lee in 1989.

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

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

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

Сохраняйте спокойствие и прекращайте программировать

Я не хочу программировать. Мне часто приходится это делать — в тех случаях, когда одного HTML недостаточно для описания того, что должен делать мой сайт. Как и у многих из нас, мой обычный день крутится вокруг фронтенд-фреймворков JavaScript. Некоторые из них мне очень нравятся.

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

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

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

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

Вот почему глубокое знание HTML имеет безграничную ценность: с его помощью вы обеспечиваете пользователю качество, а только это и важно в конечном счете.

Гибкость

Одно из лучших произведений, которые мне довелось прочитать в этом году, — «Resilient Web Design» Джереми Кейта. Там рассказывается, как из-за XHTML 2.0 мы чуть не потеряли один из самых важных аспектов HTML:

«[XHTML 2.0] также должен был реализовать драконовскую XML-модель обработки ошибок. Если в XML-документе встречается хоть одна ошибка — атрибут, не взятый в кавычки, или пропущенный закрывающий слэш — парсер должен немедленно остановиться и отказаться отображать что бы то ни было».

Слава богу, мы к этому не пришли.

«XHTML 2.0 умер, не родившись. Его теоретическая чистота была отвергнута людьми, которые создавали сайты для жизни».

Я ведь говорил: нормальные люди не хотят программировать.

Сложен ли HTML?

Конечно, чтобы понимать, насколько великолепен HTML, нужно его знать. Я имею в виду по-настоящему знать.

Семантика, доступность, SEO, браузерная совместимость и дефолтные стили, новые теги, устаревшие теги, специфические атрибуты, касающиеся языка и времени, формы, оптимизация производительности, метаданные, медиаресурсы…

Даже без учета генерируемого фреймворками «супа из тегов» есть существенная разница между просто хорошей и отличной HTML-разметкой.

Было бы ошибкой считать, что HTML (и CSS) — легкая часть веб-разработки. Проблема в том, что чтобы это понять, нужно хорошо изучить эти языки.

JavaScript — сложный. Это каждый знает, но откуда? А оттуда: прежде чем вы добьетесь, чтобы код заработал, вам придется иметь дело с бесчисленными красными ошибками, блокирующими весь проект. И только после болезненного дебаггинга ваш код запустится правильно.

А вот с HTML вы не облажаетесь. Вы можете написать суп из тегов, создать плохие формы, не следовать наилучшим подходам, но благодаря гибкости языка код все равно будет работать.

Когда вы первый раз пишете JavaScript, это бардак какой-то. Когда вы впервые пишете HTML, вы чувствуете себя гением веба.

И только со временем и опытом приходит понимание, что вы не гений: гении — те, кто создал HTML. Именно они дали вам прекрасный инструмент, а чтобы научиться действительно хорошо с ним работать, потребуется много практики и терпения.

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

Кризис идентичности языков веба

То, как мы называем разные вещи, имеет значение. Когда систематически недооценивают части проектов, касающиеся HTML/CSS, это очень огорчает тех, кто знает о важности этих частей. Больно слышать, когда говорят, что фронтенд-разработчики «не заботятся о CSS», ведь расположение пикселей на экране это практически определение нашей профессии.

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

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

Мы просто что-то создаем

На своих курсах я часто использую термин «язык разработки». Не замечал, чтобы это выражение часто использовалось в английском. На французском мы говорим «langage de développement», и я думаю, это прекрасно (and I think that’s beautiful — отсылка к концовке популярных мемов, — прим. перев.).

Этот термин может стать собирательным для HTML, CSS и JS — и при этом никого не бесить.

Из Кембриджского словаря:

«Разработка: изобретение или создание чего-либо».

Кажется, что дебаты о том, являются ли HTML и CSS языками программирования, будут длиться вечно. Но суть в том, что они используются (порой — наряду с JS) для «создания чего-либо», и этот факт никто не оспаривает.

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

Я считаю, что мы просто должны вернуть не-программированию его крутость.

Язык HTML: что это такое и как он работает

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

Иллюстрация: Оля Ежак для Skillbox Media

Евгений Кучерявый

Евгений Кучерявый

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

Консультант: Кристина Трапезникова

Главный дизайнер компании VVDEV. Считает, что хорошие дизайнеры, как и фронтендеры, должны знать HTML.

HTML (от английского HyperText Markup Language) — это язык гипертекстовой разметки текста. Он нужен, чтобы размещать на веб-странице элементы: текст, картинки, таблицы и видео.

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

Вот, например, как выглядит сайт Skillbox Media на одном HTML:

Из чего состоит HTML-код

HTML состоит из тегов — команд, которые указывают браузеру, как отображать помещённый в них текст. Это и есть элементы веб-страницы. У каждого тега есть имя, которое заключается в угловые скобки и >.

Например, в тег обычно помещают текст:

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

  • контейнеры (div);
  • абзацы;
  • заголовки;
  • списки;
  • таблицы.

Так выглядит код веб-страницы с тегами и :

Теперь добавим ещё один тег — . Он центрирует элементы на экране. Затем положим в него теги и :

Как HTML работает на сайтах

Давайте разберём, как браузеры отрисовывают веб-страницы с помощью HTML-файлов.

Принцип работы разметки следующий:

  • Вы вводите в адресную строку адрес сайта или страницы.
  • Браузер отправляет запрос по этому адресу и получает файл в формате HTML.
  • Код из полученного файла последовательно преобразуется в визуальные объекты.

При этом каждый браузер руководствуется своими правилам отображения элементов. Раньше разработчикам приходилось создавать отдельные версии сайтов для Internet Explorer, Firefox, Opera и других браузеров. Стоило только не учесть какую-то особенность браузера, и сайт падал на глазах у разочарованных пользователей. К счастью, организация W3C разработала веб-стандарты — чтобы сайты отображались более или менее одинаково во всех браузерах.

Но и от обыкновенных ошибок никто не застрахован. Если разработчик по невнимательности не закроет тег или добавит содержимое куда-нибудь не туда, на странице вылезет что-то неожиданное. Допустим, мы написали таблицу:

Что можно и нельзя сделать на HTML

HTML — это каркас сайта. По нему браузер отрисовывает веб-страницу, наводит «красоту» с помощью CSS и добавляет логику через JavaScript. Например, в HTML-файле можно прописать:

  • гиперссылки;
  • таблицы;
  • изображения;
  • блоки;
  • абзацы;
  • формы;
  • заголовки.

Можно даже задавать простой дизайн напрямую в HTML — например, устанавливать цвет и шрифт текста или фоновый цвет блока. Однако профессионалы не рекомендуют так делать — лучше указывать стили в файле CSS. Там-то ваша фантазия ничем не будет ограничена: задавайте любые отступы, размещайте элементы нестандартными способами, играйтесь с прозрачностью, тенями и анимацией. Всё что угодно — но в CSS. Договорились? 🙂

Действия пользователей пока обрабатывают в основном с помощью JavaScript и его фреймворков. Но некоторые функции постепенно приходят в HTML. Например, перетаскивание объектов, или Drag & Drop, раньше было доступно только в JavaScript.

HTML — язык программирования?

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

Во многих источниках HTML всё-таки называют языком программирования. Не верьте! HTML — это всего лишь формат текста. По сути, HTML-файл ничем не отличается от «вордовского» файла.

Сколько времени нужно, чтобы освоить HTML

Основы, которых хватит на создание примитивных страниц, можно изучить за час. То есть быстрее, чем была написана эта статья. Но мастерство приходит с практикой. Мало просто создать каркас — нужно убедиться, что он везде правильно отображается.

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

Читайте также:

  • Как писать на HTML5 и какие в нём есть возможности
  • Как правильно верстать HTML-таблицы
  • Тест. Сможете ли вы разговаривать с веб‑разработчиком на одном языке?
  • Что такое JavaScript и зачем он нужен

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

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