HTML (язык гипертекстовой разметки) – это текстовый подход к описанию структуры контента, содержащегося в файле HTML. Эта разметка сообщает веб-браузеру, как отображать текст, изображения и другие виды мультимедиа на веб-странице.
Часто используемые теги HTML
Роль HTML заключается в информировании веб-браузера о том, как структурирован контент, содержащийся в файле HTML. Обычно используемые теги HTML включают в себя <H1>, который описывает заголовок верхнего уровня; <H2>, который описывает заголовок второго уровня; <p>, описывающий абзац; <table>, описывающий табличные данные; и <ol>, который описывает упорядоченный список информации.
Как видно из этого очень короткого списка, теги HTML в первую очередь определяют структурные элементы страницы.
Вариации HTML
В первые дни существования всемирной паутины разметка текстовых документов с использованием синтаксиса HTML была более чем достаточной для облегчения обмена академическими документами и техническими заметками. Однако по мере того, как интернет выходил за рамки научных кругов и становился домом для широких слоев населения, веб-страницам предъявлялось все больше требований с точки зрения форматирования и интерактивности.
HTML 4.01 был выпущен в 1999 году, когда интернет еще не был столь влиятельным, а HTML5 не был стандартизирован (вплоть до 2014 года). За это время разметка HTML перешла от простого описания структуры содержимого веб-страницы до описания того, как должен выглядеть контент, когда веб-страница отображает его.
В результате страницы на основе HTML4 часто включали в тег информацию о том, какой шрифт использовать при отображении текста, какой цвет следует использовать для фона и как выравнивать содержимое.
Описание в HTML-теге того, как HTML-элемент должен быть отформатирован при отображении на веб-странице, считается антипаттерном HTML. HTML должен описывать структуру контента, а не то, как он будет стилизован и отображен в браузере.
Для рендеринга как правило используют каскадные таблицы стилей (CSS). HTML-файл может содержать ссылку на каскадную таблицу стилей, которая будет содержать информацию о том, какие цвета использовать, какие шрифты использовать, а также другую информацию, отображающую элемент HTML. Отделение информации о структуре страницы, которая является ролью HTML, от информации о том, как веб-страница выглядит, когда она отображается в браузере, которая является ролью файла CSS, является шаблоном разработки программного обеспечения и известной передовой практикой, которую мы знаем под названием разделение ответственности.
Особенности форматирования
HTML4 против HTML5
Шаблон разделения ответственности более строго соблюдается в HTML5, чем в HTML4. В HTML5 теги жирный <b> и курсив <i> считаются устаревшими. Для тега абзаца атрибут align был полностью удален из спецификации HTML.
В целях обратной совместимости веб-браузеры будут продолжать поддерживать эти устаревшие теги HTML, но изменения в спецификации HTML демонстрируют стремление сообщества вернуться к своей первоначальной цели описания структуры контента, одновременно поощряя разработчиков, использующих каскадные таблицы стилей для форматирования.
HTML-тег против элемента против атрибута
Идея использования текста для описания способа отображения текста может показаться несколько парадоксальной, но это не так. Ведь это и есть причина того, почему HTML известен как язык разметки.
Используя HTML, документ, содержащий текст, дополнительно размечается текстом, описывающим, как документ должен отображаться. Чтобы отделить часть разметки от фактического содержимого файла HTML, используется специальный отличительный синтаксис HTML. Эти специальные компоненты известны как теги HTML. Теги могут содержать пары имя-значение, известные как атрибуты, а часть содержимого, заключенная в тег, называется элементом HTML.
Что такое правильно оформленный HTML?
Чтобы веб-браузер отображал HTML-страницу без ошибок, она должна быть снабжена правильно сформированным HTML-кодом. Чтобы быть правильно сформированным, каждый элемент HTML должен содержаться в открытом теге - <p> и закрытом теге - </p>. Кроме того, любой новый тег, открытый в другом теге, должен быть закрыт до закрытия содержащего тега. Таким образом, <h1> <p> правильно сформированный HTML </p> </h1> является правильно сформированным HTML-кодом, в то время как <h1> <p> правильно сформированный HTML </h1> </p> не является правильно сформированным HTML.
Стандарты синтаксиса HTML
Другое синтаксическое правило заключается в том, что атрибуты HTML должны быть заключены в одинарные или двойные кавычки. Часто ведутся споры о том, какой формат является технически правильным, но Консорциум Всемирной паутины утверждает, что оба подхода приемлемы.
Лучший совет для выбора между одинарными и двойными кавычками – сохранять единообразие во всех документах. Проверки стиля HTML могут использоваться для обеспечения согласованного использования на страницах.
Важно: иногда требуется применение одинарных кавычек, например, в случае, когда значение атрибута фактически содержит символ двойной кавычки. Обратное правило также верно.
Как использовать и реализовать HTML
Поскольку HTML полностью основан на тексте, файл HTML можно редактировать, просто открыв его в такой программе, как Notepad ++, Vi или Emacs. Любой текстовый редактор может использоваться для создания или редактирования файла HTML, и пока файл создается с расширением .html, любой веб-браузер (такой как Chrome или Firefox) будет способен отображать его как веб-страницу.
Для профессиональных разработчиков программного обеспечения существует множество редакторов WYSIWYG для разработки веб-страниц. NetBeans, IntelliJ, Eclipse и Microsoft Visual Studio предоставляют редакторы WYSIWYG как подключаемые модули или как стандартные компоненты, что делает их невероятно простыми в использовании и реализации HTML. Эти WYSIWYG-редакторы также предоставляют средства устранения неполадок в HTML, хотя современные веб-браузеры часто содержат плагины веб-разработчика, которые высвечивают проблемы с HTML-страницами, такими как отсутствующий конечный тег или синтаксис.
Chrome и Firefox включают инструменты разработчика HTML, которые позволяют немедленно просматривать полный HTML-файл веб-страницы, а также позволяют редактировать HTML на лету и сразу же вносить изменения в браузер.
Самые распространенные ошибки при редактировании HTML
- Не заморачивайтесь с текстовыми редакторами. Текстовые редакторы – не та вещь, о которой вам нужно беспокоиться, поскольку любой из них достойно выполнит свою работу. Все, что вам нужно сделать, это написать свой код и сохранить его с правильным расширением. Некоторые текстовые редакторы, такие как Notepad ++, поставляются с функцией подсветки синтаксиса и могут облегчить написание страницы, но когда дело доходит до разработки, любой из вариантов будет одинаково хорошо работать.
- Структурируйте страницу правильно с правильными тегами. <Div> может работать так же, как тег <span> или <p>, но важно понимать, какой из них должен использоваться и где. Это всего лишь примеры. Есть много других, таких как тег <link> и тег <a>. Как только вы узнаете разницу, то поймете, какой из них следует использовать в определенной части страницы.
- Использование встроенного CSS или включение JavaScript в HTML-файл – плохая идея для опытного разработчика, не говоря уже о новичке. Оба этих компонента будут работать в большинстве случаев, но как только они начнут создавать проблемы, это может превратиться в настоящий кошмар с многочисленными попытками найти источник проблемы. Импортированные CSS/JavaScript, с другой стороны, предлагают большую гибкость и могут помочь сделать крупномасштабные изменения более легкой задачей. Поэтому рекомендуется импортировать файлы с помощью тегов ссылок в элементе <head> и внешних таблицах стилей. Это значительно облегчит процесс настройки при необходимости.
- Не стоит заблуждаться насчет различных версий HTML, все они отличаются друг от друга. Первое, что будет отличаться для новичка, так это предложение объявления типа документа. Хотя вы можете просто использовать <!doctype html> в HTML5 для объявления типа документа, XHTML имеет для этого свою собственную команду. Какую бы версию вы ни выбрали для написания своей разметки, вы должны сначала знать ее точный синтаксис. Могут быть различные теги, которые работают в одной версии HTML, но плохо показывают себя в других. Поэтому важно использовать только те, которые действительно предназначены для конкретно вашей версии. HTML5 для новичка подойдет лучше всего, поскольку он упрощен и прост в освоении.
- Предположение, что IDE (интегрированные среды разработчиков) являются лучшим способом разработки веб-страницы, а код, написанный в одной из них, нельзя использовать в другой. Ни одна среда разработки веб-страниц не делает ничего особенного с кодом, кроме, возможно, DreamWeaver. Так что код, написанный в одной из них, полностью переносим и совместим с любой другой IDE. Если же вы новичок, то нужно просто использовать текстовый редактор, такой как Notepad ++, а затем запустить веб-страницу либо через сервер, либо через хостинг. IDE лучше избегать, если вы впервые беретесь за разработку веб-сайтов. Они очень усложнят ситуацию и лишь помешают вашему обучению.
Публикация сайта
Из-за большого разнообразия методов размещения сайтов мы расскажем об одном из наиболее часто используемых способов это сделать – FTP.
Интернет-провайдеры и компании, предоставляющие услуги веб-хостинга, предоставляют доступ по протоколу FTP (File Transfer Protocol), который позволяет пользователям копировать файлы со своего компьютера на сервер. У пользователей ПК для этого есть две возможности: одной из них является использование программы FTP, входящей в состав Windows, а другим рекомендуемым решением является загрузка сторонней программы FTP. В любом случае это должно позволить пользователю отправлять свои файлы при условии, что сервер разрешает доступ по FTP.
После подключения к серверу найдите папку или каталог, в котором находится ваша веб-страница. Обычно это папка public_html. Если вы используете Windows FTP, введите "cd public_html" или "dir", чтобы увидеть, как называется папка. Или откройте папку через CuteFTP или любой другой FTP-клиент. Попав в эту папку, вы можете отправить свои HTML-файлы на сервер для доступа к ним через интернет. Пользователи Windows FTP для отправки своих файлов могут ввести "send index.htm".
Если после выполнения приведенных выше рекомендаций вы не смогли опубликовать свой веб-сайт, обратитесь в службу поддержки вашего интернет-провайдера.