HTML (язык гипертекстовой разметки) — это веб-язык, который сообщает вашему браузеру, как отображать текст и изображения на веб-странице. Вы используете теги для обозначения различных элементов, определения размещения абзацев, заголовков, добавления изображений и видео. CSS или каскадные таблицы стилей добавляют на ваш сайт такие стили, как шрифты, цвета или макеты, делая сайт более эстетичным. Следовательно, HTML позволяет вам создавать структуру вашего веб-сайта, а CSS оживляет эту структуру.
HTML — это текстовый файл, содержащий определенный синтаксис, файлы и соглашения об именах, которые показывают компьютеру и веб-серверу, что он находится в формате HTML и должен быть прочитан как таковой.
Применяя эти соглашения HTML к текстовому файлу практически в любом текстовом редакторе, пользователь может написать и спроектировать простую веб-страницу, а затем загрузить ее в Интернет.
Самым основным из соглашений HTML является включение объявления типа документа в начало текстового файла. Это всегда идет первым в документе, потому что это часть, которая утвердительно сообщает компьютеру, что это файл HTML.
Заголовок документа обычно выглядит так: <! DOCTYPE html>. Он всегда должен быть написан таким образом, без какого-либо содержания внутри и без разбивки. Любой контент, предшествующий этому объявлению, не будет распознаваться компьютером как HTML.
Doctypes используются не только для HTML, они могут применяться для создания любого документа, использующего SGML (стандартный обобщенный язык разметки). SGML — это стандарт для указания конкретного используемого языка разметки. HTML — один из нескольких языков разметки, к которым применяются объявления SGML и doctype.
Другое важное требование для создания файла HTML — его сохранение с расширением файла .html. В то время как объявление doctype передает на компьютер HTML-код изнутри файла, расширение файла передает HTML-код компьютеру извне файла. Имея оба, компьютер может определить, что это HTML-файл, независимо от того, читает он файл или нет. Это становится особенно важным при загрузке файлов в Интернет, потому что веб-сервер должен знать, что делать с файлами, прежде чем он сможет отправить их на клиентский компьютер для чтения внутреннего содержимого.
После написания документа и сохранения в виде файла HTML пользователь может реализовать все другие синтаксические инструменты HTML для настройки веб-страницы. После завершения у них, вероятно, будет несколько файлов HTML, соответствующих различным страницам веб-сайта.
Важно, чтобы пользователь загружал эти файлы в той же иерархии, в которой они их сохранили, поскольку каждая страница ссылается на определенные пути к файлам на других страницах, позволяя устанавливать связи между ними. Их загрузка в другом порядке приведет к разрыву ссылок и потере страниц, поскольку указанные пути к файлам не будут соответствовать страницам.
Если вам все еще сложно разобраться с этим, рекомендуем поехать на буткемп по программированию, где вы сможете оказаться среди своих единомышленников, погрузиться в IT-среду и повыси
Основные элементы HTML
Используя HTML, текстовый файл дополнительно размечен дополнительным текстом, описывающим, как документ должен отображаться. Чтобы сохранить разметку отдельно от фактического содержимого HTML-файла, используется особый, отличительный синтаксис HTML.
Эти специальные компоненты известны как HTML-теги. Теги могут содержать пары имя-значение, известные как атрибуты, а часть содержимого, заключенная в тег, называется элементом HTML.
Элементы HTML всегда имеют открывающие теги, содержимое в середине и закрывающие теги. Атрибуты могут предоставить дополнительную информацию об элементе и включены в открывающий тег. Элементы можно описать одним из двух способов:
- Элементы уровня блока начинаются с новой строки в документе и занимают собственное пространство. Примеры этих элементов включают заголовки и теги абзацев.
- Встроенные элементы не начинаются с новой строки в документе и занимают только необходимое пространство. Эти элементы обычно форматируют содержимое блочных элементов.
Ничто из этого не означает, что абстрагирование некоторых частей веб-стека бесполезно для некоторых команд. Люди все время абстрагируются от HTML, CSS и JavaScript. Люди с радостью разделяют проблемы по-разному: не на уровне страницы, а на уровне компонентов пользовательского интерфейса.
Что касается разметки, есть такие решения, как Sanity’s Portable Text, который определяет контент в JSON, чтобы его можно было повторно использовать по разным «каналам». Это формат для хранения и передачи данных, а не для их отображения на сайте. Потому что, прежде чем отображать его где-либо, вы должны написать шаблон для этого в HTML.
Для CSS есть расширения, такие как Sass и Less, подходы, ориентированные на использование служебных программ, такие как Tailwind, и множество методов для определения CSS внутри компонента JavaScript. От JSSS (с 1997 г.) до CSS в JS сегодня есть много вариантов.
Что касается JavaScript: существует множество абстракций, которые упрощают часть синтаксиса JavaScript (jQuery в свое время), которые помогают разработчикам писать компоненты с меньшим количеством шаблонов (например, Svelte и Vue) и которые помогают командам делать меньше программных ошибок, которых можно избежать (TypeScript ).
Многие подходы популярны среди команд, создающих всевозможные веб-сайты. Выберите любые абстракции или не используйте их, что бы ни помогало вам предоставлять конечным пользователям лучший HTML, CSS и JS.
Нам очень повезло, что все эти абстрактные вещи, которые сами по себе являются простыми строительными камнями: HTML, CSS и (в разной степени) JavaScript. С помощью абстракций отдельные команды и организации могут разделять свои проблемы по-разному, как им заблагорассудится, без изменения строительных блоков, на которые полагаются веб-пользователи.
Могли бы вы принести пользу людям своими абстракциями? Может быть. В предложении упоминаются конкретные параметры нарушений зрения и контент, который может вызвать припадки. Но для пользователей (включая их конфиденциальность) лучше иметь такие вещи в основном HTML и CSS, независимо от того, было ли это написано вручную или выведено какой-то абстракцией.