Изучите основы Интернета с помощью этого простого объяснения.
HTML — это основа всего, что происходит внутри вашего браузера. Если вы понимаете HTML, вы можете создавать веб-сайты и работать с ними, публиковать документы с богатым содержанием в Интернете и даже устроиться на работу веб-разработчиком. Давайте копать.
Что это
HTML — это язык разметки для гипертекста (отсюда и название). Проще говоря, HTML — это набор команд, которые сообщают веб-браузерам, как отображать определенные части веб-сайтов. Например:
‹h1›Это заголовок‹/h1›
‹p›Это абзац текста с ‹a href="…"›гиперссылкой‹/a›.‹/p›
‹ul›‹li›Это элемент ненумерованного списка‹/li›‹li›Это другой‹/li›‹/ul›
Части в угловых скобках называются тегами. Тег — это команда, которая сообщает браузеру, что следующий текст должен отображаться определенным образом. Тег также может сообщить браузеру, что в определенном месте должно быть изображение или кнопка.
Вы помещаете эти теги в текстовый файл и показываете его браузеру. Браузер считывает эти теги и отображает веб-страницу без тегов, но с учетом их значения. Браузеры на компьютерах и смартфонах понимают эти команды более или менее одинаково, поэтому вы можете быть уверены, что ваша веб-страница будет работать одинаково в большинстве браузеров по всему миру.
Например, текст выше будет выглядеть так:
Это заголовок
Это абзац текста с гиперссылкой.
● Это элемент ненумерованного списка.
● Это еще один
В мире существует множество языков разметки. Например, Microsoft Word и Apple Pages используют собственные языки разметки для хранения информации о ваших текстовых документах. Когда вы пишете что-то в MS Word, в ваш документ встраивается множество проектных данных. Хотя вы можете этого не видеть, эти данные представлены в виде команд разметки.
Зачем нам всем это нужно
HTML — это основной язык, на котором написано большинство веб-страниц. Каждый абзац текста в Интернете, скорее всего, заключен в ‹p›…‹/p›, и каждая ссылка, по которой вы когда-либо переходили, определенно заключена в ‹a›…‹/a›. В мире без HTML нам пришлось бы придумывать какой-то другой формат для обмена документами в сети, так что в любом случае мы могли бы получить HTML.
Но я не так часто обмениваюсь документами, не так ли?
На самом деле, да. Каждый раз, когда вы используете Chrome или Safari, может показаться, что вы путешествуете с одного сайта на другой. Однако на самом деле вы загружаете документы. Вот как это работает:
1. Вы вводите google.com в адресную строку.
2. Какой-то удаленный компьютер, принадлежащий Google, создает для вас документ — страницу, содержащую домашнюю страницу google.com. Машина отправляет этот документ в ваш браузер.
3. Ваш браузер получает документ, написанный в формате HTML, считывает все теги и инструкции, а затем отображает документ в виде пикселей на вашем экране. Итак, вы видите домашнюю страницу Google.
4. Вы вводите поисковый запрос в Google. Опять же, удаленная машина, принадлежащая Google, создает для вас HTML-документ, страницу с результатами поиска и отправляет этот документ в ваш браузер.
5. У вас может возникнуть иллюзия, что вы пришли в Google посмотреть результаты поиска. Но на самом деле Google прислал вам документ, похожий на его результаты поиска.
6. Вы щелкаете ссылку в документе, чтобы изучить один из результатов поиска, и ваш браузер запрашивает документ с какого-то другого веб-сервера. Этот сервер отвечает HTML-документом.
7. Ваш браузер отображает этот новый документ в новой вкладке.
8. У вас может возникнуть иллюзия, что вы посетили этот веб-сайт. Но на самом деле вы скачали страницу с этого сайта. Веб-страница — это документ.
Что я могу сделать с HTML?
Если вы знаете основные элементы HTML, вы можете:
● Создавайте свои собственные веб-страницы и целые веб-сайты и редактируйте чужие.
● Настройка готовых веб-сайтов и шаблонов.
● Публикуйте свой контент в службах публикации, используя более высокий уровень контроля над дизайном и макетом.
Знакомство с основными тегами
Вот основные теги HTML, которые вам нужно знать:
‹head›…‹/head› — служебная область страницы, которая не отображается напрямую, но влияет на работу страницы.
‹title›…‹/title› — идет внутри ‹head›. Текст внутри этих тегов отображается на панели вкладок и в избранном.
‹body›…‹/body› — видимая часть вашей страницы.
‹h1›…‹/h1›, ‹h2›…‹/h2› и т. д. — заголовки разного уровня.
‹p›…‹/p› — абзац текста.
‹a href="…"›…‹/a› — гиперссылка. Href определяет, куда ведет ссылка.
‹img src="…"› — изображение. Src определяет адрес этого изображения, чтобы ваш браузер мог запросить его и загрузить для просмотра.
‹ul›‹li›…‹/li›‹/ul› — неупорядоченный список с одним элементом списка внутри. Чтобы получить больше элементов, просто добавьте больше ‹li› внутри ‹ul›…‹/ul›.
‹ol›‹li›…‹/li›‹/ol› — нумерованный список (в HTML он называется упорядоченным).
‹div›…‹/div› — универсальный блок внутри вашей страницы. Вы можете настроить блок так, чтобы он выглядел как угодно, от всплывающего окна с предупреждением до кнопки.
‹span›…‹/span› — часть текста, которую вы можете настроить так, как вам нравится. Например, вы можете использовать эти теги для выделения фрагментов текста, как маркер выделения.
‹table›‹tbody›‹tr›‹td›…‹/td›‹td›…‹/td›‹/tr›‹/tbody›‹/table› — набор тегов для визуализировать минимальную таблицу. TR означает «строка таблицы», а TD — «раздел таблицы» или «ячейка таблицы». Вы вкладываете одну в другую: ячейки живут внутри строк, строки живут внутри ‹tbody› или ‹th› («заголовок таблицы»). , и все это живет внутри ‹стола›.
Сейчас это может показаться ошеломляющим, но как только мы приступим к использованию HTML, вы увидите, что это действительно просто и интуитивно понятно.
Нужно ли мне этому учиться?
В Интернете есть множество справочных руководств по HTML-тегам, поэтому нет необходимости что-либо запоминать. Но потратьте достаточно времени на написание веб-страниц, и эти теги станут для вас второй натурой.
Тем не мение…
Если серьезно задуматься, традиционные способы публикации контента в сети, возможно, отмирают, а HTML постепенно теряет свою актуальность. Двадцать лет назад Интернет был единственным способом публиковаться в Интернете, поэтому для публикации своей работы обязательно нужно было знать HTML. Теперь у нас есть социальные сети и издательские платформы, которые не требуют от вас кодирования в HTML.
Сегодня даже для тех, кто умеет программировать в HTML, существуют редакторы WYSIWYG («Что видишь, то и получишь») — системы, которые позволяют разработчикам редактировать веб-страницы и веб-сайты на визуальной платформе. Так что, если подумать в долгосрочной перспективе, может появиться поколение интернет-пользователей, которые за всю свою жизнь ни разу не сталкивались с веб-страницей в формате HTML.
С другой стороны, HTML настолько прост в изучении и использовании, что вам не нужно беспокоиться о долгосрочной перспективе. Как я покажу вам в одной из своих следующих заметок, это действительно довольно просто.
Оставайтесь с нами и подпишитесь на более быстрые советы и идеи о будущем технологий.
Чтобы найти больше уроков, которые могут улучшить ваши технические навыки и развить вашу карьеру, посетите Практикум от Яндекса.
