HyperText Markup Language (HTML) расшифровывается как «язык гипертекстовой разметки».
Изначально, значение может показаться слишком сложным, но на самом деле HTML – это простой текст, где есть ссылка на другой текст или ресурс.
В IT-индустрию данный термин попал из литературы. Оглавление любой книги – это и есть HTML, поскольку оно имеет отсылки на разные страницы.
Далее давайте выясним, что означает «язык разметки». С самого начала любой сайт – это просто страницы с набранным текстом, изображениями и ссылками. Как раз таки это и есть HyperText.
Если провести параллель между постройкой дома и созданием веб-сайта, то так же, как и в первом случае, для того, чтобы понимать, где будут двери, окна, кухня, ванная комната и так далее, нам понадобится план. То есть, HTML – это и есть чертеж (план) создающегося сайта.
HTML разметку вы можете увидеть на любом сайте в сети Интернет. Для этого необходимо зайти на страницу, нажать правой кнопкой мыши и в появившемся меню выбрать «View source» или «Просмотр кода страницы» (в зависимости от браузера, через который вы зашли, название может меняться).
Если документ HTML открыт в графическом редакторе, он будет отображаться как стандартный текстовый файл, а если его открыть в браузере, то его отображение будет представлено с разметочными тегами. Такой вариант HTML документа называется веб-страницей. Основная функция браузера – прочитать HTML и представить его в виде веб-страницы.
Структурные элементы HTML документа
Важно понимать, что HTML – это не язык программирования. Его главная задача: описание того, что расположено в документе (ссылки, изображения, текст, видеоролики), при помощи тегов. Теги пишут в специальных угловых скобках («<» и «>»). В основном, их употребляют парно.
Первоначально пишется открывающий тег, потом его содержание. После ставят закрывающий тег, который создается с помощью добавления слеша «/» перед названием тега.
Теги также имеют свои атрибуты, расширяющие их функционал. Такие атрибуты всегда пишутся внутри открывающегося тега.
Изучим структуру HTML документа на примере простой страницы.
HTML документ пишется с тега <!DOCTYPE html>. С его помощью браузеру передается информация о том, какая версия языка HTML используется страницей.
После <!DOCTYPE html> ставиться парный тег <html>.
Структуру HTML часто ставят в сравнение с деревом и <html> является его основой, стволом. Потом от этого «ствола» идет разветвление на <head> и <body>.
В <head> подаются данные, которые нужны браузеру и поисковым системам, а также добавляются стили для внешнего дизайна страниц. К примеру, в <head> написан обязательный тег <title></title> – тег заголовка страницы, отображенный на вкладке браузера.
Вся информация (текст, картинки и т. д.), отображающаяся на странице, должна размещаться внутри тега <body></body>.
Doctype, Html, Head, Title, Body – это обязательные теги, которые на новой странице пишутся всегда и именно в такой последовательности. Все это подается в файле с расширением «.html».
Теги: парные и одиночные
Существуют парные и одиночные теги. Давайте разберемся, в чем их отличие.
Одиночные теги пусты, они не имеют содержимого, с их помощью создаются различные элементы графики на странице. Для тегов такого типа закрывающий тег запрещен.
Парные теги называются так потому, что состоят из двух тегов: открывающего и закрывающего (<html></html>). Парные теги имеют содержимое, которое вмещает все, что расположено между открывающимся и закрывающимся тегами.
Тестирование в HTML
При работе с HTML документами важно понимать, что и как нужно тестировать. Первоочерёдное задание – проверить HTML код на ошибки валидации на страницах веб-сайта, убедиться, что сайт работает правильно в любом браузере, поскольку это одно из главных требований для всех программистов.
После тестирования и обнаружения дефектов (если такое будет), в код необходимо внести обновленные данные.
Есть огромное количество онлайн-программ, с помощью которых можно проверить HTML код на правильность генерации результата.
Представим 7 наиболее популярных методик проверки HTML кода в браузере.
Инструменты для тестирования HTML
JSBin
Очень часто, неопытные тестировщики-новички думают, что интерфейс JSFiddle является тяжелым для усвоения и соответственно, в работе. Поэтому, JSBin – это альтернативная JSFiddle программа, которая немного легче в применении.
У нее есть 2 типа доступа: бесплатный и профессиональный. И при первом, и при втором типе, бесплатно тестировать кода HTML, CSS и JavaScript в браузере можно неограниченное количество раз, но количество библиотек JavaScript, которые можно включить, фиксированное.
Если в работе нужен дополнительный функционал, такой как частные корзины и хостинг активов, необходимо завести профессиональный аккаунт.
CodePen
Данное приложение будет правильнее назвать онлайн-группой программистов, которые в своей работе применяют разные интерфейсные программы, по типу: HTML, CSS, JavaScript и много библиотек для создания кода. Грубо говоря, CodePen – это онлайн-редактор кода в браузере.
HTMLhouse
Этот инструмент – лучшее решение, если вы работаете только с HTML.
Интерфейс самый простой, понятный, нет лишнего функционала и поддержки.
С помощью HTMLhouse можно публиковать HTML и делиться им со всеми или только с выбранной аудиторией.
Для любого элемента кода, написанного в будущем, есть возможность поделиться ссылкой тогда, когда необходимо переслать ее.
Markup Validation Service W3C
Это бесплатное приложение для поиска ошибок валидации на сайте. С его помощью можно проверить выбранные данные на наличие багов, сформировать отчет с их перечислением и получить рекомендациями по их устранению.
Текстовый редактор
С его помощью можно запустить документ HTML. В процессе работы в текстовом редакторе (например, Sublime Text или Notepad ++) в автономном режиме, просто требуется загрузить документ с расширением .html и открыть его двойным щелчком.
Он открывается в браузере, установленном на ПК по умолчанию.
Чтобы проверить вывод данных в разных браузерах, можно в разделе «Настройки» своего компьютера изменить установленный для автоматической активации браузер.
JSFiddle
JSFiddle – это платформа для онлайн-проверки HTML кода в браузере. Сервис запустили в 2009 году.
В основном, JSFiddle применяется для проверки кода JavaScript онлайн, но тестировать код HTML, CSS и код, созданный на базе других интерфейсных библиотек, им тоже можно.
Владеет личным онлайн-редактором и, в то же время, отображает вывод. JSFiddle – наверное, лучшее приложение для работы с JavaScript.
Liveweave
Liveweave позволяет предварительно просмотреть HTML кода в режиме реальности, представляет собой одно из наиболее удобных приложений в данной сфере.
Интерфейс очень простой и доступный. При написании кода во встроенном редакторе всегда выдаются подсказки, благодаря чему значительно легче работать.
Помимо этого, код можно загрузить в облако и даже скачать его в формате .zip.
Liveweave также работает с некоторыми библиотеками JavaScript.
Для еще недостаточно опытных сотрудников в сфере тестирования, будут полезными такие HTML-приложения: HTML Goodies, инструменты разработчика Chrome. Для работы со вторым, необходимо открыть HTML файл в Google Chrome и правой клавишей мыши выбрать деталь HTML, которую следует протестировать.
Кроме перечисленных плюсов всех вышеназванных сервисов, у них есть один общий минус: демонстрация вида кода лишь в одном браузере. Если нужно проверять во многих браузерах, необходимо устанавливать их все, а иногда это нереально. К примеру, работая в браузере Mac, вы не сможете напрямую проверять в IE.
Если вам нужно проверить сайт в разных средах, вам помогут онлайн-кроссбраузерные приложения тестирования, например LambdaTest. С его помощью, написанный код можно тестировать на кроссбраузерную совместимость. Результаты такого тестирования основываются на данных более 2000 браузеров.
Итог
Основная миссия HTML документа – «подсказать» браузеру, из каких элементов создана страница и какое содержание несут в себе эти элементы. HTML прост в понимании и структуре.
Для слаженной работы кода, тестируйте его, используя разные платформы, которые упростят процесс проверки и вы сможете обнаружить все ошибки без особого труда.
Оставить комментарий