HTML является жизненно важной частью сети, какой мы ее знаем. И хотя немногие веб-дизайнеры создают страницы, вручную набирая HTML, все же полезно немного об этом узнать.
Мы собираемся взглянуть на некоторые основы языка, включая то, что на самом деле представляет собой HTML, некоторые фундаментальные понятия и как он взаимодействует с другими языками. Думайте об этом как ускоренный курс «HTML для чайников».
Основы HTML: что такое HTML?
HTML обозначает язык разметки гипертекста . И хотя это иногда смешивается с языками программирования, это не совсем точно.
Как язык разметки , HTML позволяет только создавать макет отображения страниц. Настоящий язык программирования , такой как Java или C ++, содержит логику и выполняемые команды.
Несмотря на простоту, HTML является основой каждой страницы в Интернете. Он отвечает за то, какой текст выделен жирным шрифтом, добавление изображений и ссылки на другие страницы. У нас есть FAQ по HTML что объясняет больше.
Вы можете щелкнуть правой кнопкой мыши по большинству веб-страниц в вашем браузере и выбрать « Просмотр исходного кода» или аналогичный, чтобы увидеть HTML- код позади них. Скорее всего, он также содержит много кода, который не является HTML, но вы можете просмотреть его.
Даже если у вас нулевой опыт работы с языками разметки или программирования, изучение HTML немного сделает вас более информированным веб-пользователем. Давайте пройдемся по пяти основным шагам, чтобы помочь вам понять, как работает HTML. Мы приведем примеры по пути.
Шаг 1: Понимание концепции тегов
HTML использует систему тегов для классификации различных элементов документа.
Большинство тегов идут парами, чтобы обернуть затронутый текст внутри них. Вот простой пример (тэг <strong> делает текст жирным ; мы обсудим это чуть позже.)
<strong>This is some bold text</strong>.
Обратите внимание, как закрывающий тег начинается с косой черты (/). Это означает закрывающий тег, что важно. Если вы не закроете тег, все с самого начала будет иметь этот атрибут.
Однако не все теги имеют пару. Некоторые элементы HTML, называемые пустыми элементами , не имеют содержимого и существуют самостоятельно. Примером является тег <br> , который представляет собой разрыв строки. Вы можете «закрыть» такие теги, добавив косую черту (например, <br /> ), но это не является строго обязательным.
Шаг 2: Скелетный макет HTML
В правильном HTML-документе должны быть определены определенные теги, чтобы он правильно отображался. Это основные части:
- Каждый HTML-документ должен начинаться с
<!DOCTYPE html>чтобы объявить себя таковым. Таким образом, его закрывающий тег</html>является последним элементом в файле HTML. - Далее, раздел
<head>содержит информацию, такую как заголовок страницы, различные скрипты, которые запускаются на странице, и тому подобное. Как следует из названия, это обычно происходит сразу после начального<html>. Конечный пользователь не видит большую часть содержимого в этих тегах. - Наконец,
<body>содержит текст страницы, который видит читатель (и многое другое). Здесь вы найдете изображения, ссылки и многое другое.
Поскольку раздел <body> составляет основную часть HTML-документа, остальная часть нашего пошагового руководства рассматривает элементы, которые к нему относятся.
Шаг 3. Основные теги HTML для форматирования
Далее давайте рассмотрим некоторые распространенные теги, которые составляют HTML-документы. Конечно, невозможно охватить каждый элемент, поэтому мы рассмотрим некоторые из наиболее важных. Мы рассмотрели еще много примеров HTML примеров если они вас не удовлетворяют.
Если эти теги кажутся довольно простыми, помните, что HTML был создан еще в 1993 году. Тогда на ранних этапах развития Интернет был основан на тексте.
Простое форматирование текста
HTML поддерживает базовые стили текста, как в Microsoft Word:
- Теги
<strong>делают текст жирным . - Теги
<em>(что означает «выделение») выделят текст курсивом .
HTML также поддерживает более старый <b> для жирного шрифта и <i> для курсива. Однако предпочтительнее использовать те, что указаны выше.
Вкратце, <strong> и <em> показывают, как что-то следует понимать, а последние теги говорят только о том, как это должно выглядеть. Эти бывшие теги более доступны для программ чтения с экрана, используемых лицами с нарушениями зрения.
Параграф и другие подразделения
HTML- <div> позволяет вам определить раздел документа. Обычно это в паре с CSS (см. Ниже) для определенного форматирования раздела.
Тег <p> позволяет разделить текст на абзацы. Браузеры автоматически оставляют некоторое пространство до и после них, что позволяет вам естественным образом разбивать текст.
Вы можете добавить заголовки в ваш документ и упростить отслеживание с помощью тегов <h1> <h6> . H1 — самый важный заголовок, а H6 — наименее важный. Почти каждая статья использует заголовки H2 и H3 для организации информации.
Если нажать Enter, чтобы добавить разрывы строк в HTML-документе, они не будут отображаться. Вместо этого вы можете использовать <br> чтобы добавить разрыв строки.
Вот пример, который использует все это:
<div class="example"> <h2>Example Heading</h2> <p>This is one paragraph.</p> <p>This is a second<br>paragraph split between two lines.</p> </div>
Шаг 4: Вставка изображений
Изображения являются важной частью большинства веб-страниц. Вы можете легко добавлять их с помощью HTML и даже устанавливать для них различные свойства.
Вы вставляете изображение, используя <img> . Комбинируя это с атрибутом src вы можете указать, откуда вы хотите загрузить изображение.
Другим важным атрибутом тегов <img> является alt . Альтернативный текст позволяет описать изображение для программ чтения с экрана или в случае, если изображение загружается неправильно. Вы можете навести курсор мыши на изображение, чтобы увидеть его альтернативный текст.
Используйте элементы width и height чтобы указать количество пикселей, на которых отображается изображение.
Сложите все это вместе, и тег изображения будет выглядеть так:
<img src="https://img.drphil.com/wp-content/uploads/2016/04/DrPhil-1280x720px-Shareimage.jpg" alt="Dr. Phil" width="1280" height="720">
Шаг 5: Добавление ссылок
Всемирная паутина не была бы большой частью сети без ссылок на другие страницы. Используя тег <a> , вы можете ссылаться на другие страницы любого текста.
Внутри тега <a> атрибут href указывает, куда вы ссылаетесь. Просто вставьте URL-адрес будет работать нормально. Вы можете использовать элемент title чтобы добавить немного текста, который появляется, когда кто-то наводит курсор мыши на ссылку.
Базовая ссылка выглядит так:
<a href="https://www.google.com/" title="Click here to search the web">Visit Google</a>
У тега <a> есть много других возможных элементов, но мы не будем здесь углубляться в них.
Как HTML соединяется с CSS и JavaScript
Мы рассмотрели основы HTML и как он создает веб-страницу. Но, как вы можете себе представить, один HTML не подходит для современной сети. Простые HTML-страницы были обычным явлением в дни «Web 1.0», когда большинство веб-сайтов представляли собой не более чем статический текст.
Но сейчас у нас намного больше. CSS (каскадные таблицы стилей) — это язык, используемый для описания того, как должен выглядеть текст, подготовленный вами в HTML. Помните <div> мы обсуждали? Внутри этого (и других тегов) вы можете определить атрибут class . Затем в сопроводительном документе CSS вы можете написать инструкции о том, как должен выглядеть этот class .
Вы можете определить эти элементы стиля встроенными в ваш HTML-код, но это считается плохой практикой, так как его гораздо сложнее поддерживать. Также узнайте, как оптимизировать ваши CSS-файлы.
JavaScript
Мы видели, что HTML определяет контент, а CSS определяет внешний вид. JavaScript, последний член трио, жизненно важный для Интернета, позволяет веб-страницам реагировать на действия людей, не загружая новую страницу каждый раз.
Например, JavaScript позволяет веб-сайту предупреждать вас о том, что введенный вами пароль не соответствует его требованиям, прежде чем пытаться его отправить. Веб-дизайнер может использовать JavaScript для циклического просмотра изображений в слайд-шоу или запрашивать ввод данных пользователем.
Это всего лишь несколько элементарных примеров. JavaScript — это язык сценариев, который способен на многое и сравнительно более сложен, чем HTML и CSS. Посмотрите наш обзор JavaScript больше.
Рассмотрение всего объема веб-дизайна выходит за рамки данной статьи, но достаточно сказать, что HTML взаимодействует с другими языками для создания веб-страниц, которые мы знаем сегодня.
Эволюция HTML
Важно отметить, что HTML не является статичным. HTML прошел несколько ревизий, последняя из которых — HTML 5. Примечательно, что этот стандарт поддерживает встроенное видео, а не полагается на собственные форматы, такие как Adobe Flash.
Новые итерации HTML также объявляют определенные архаичные теги как устаревшие время от времени. К ним относятся ужасные теги, такие как <marquee> и <blink> (которые прокручивают и флэш-текст соответственно), обычно встречающиеся в дизайне веб-сайтов 1990-х годов. Так что имейте в виду, что стандарты меняются со временем.
Небольшое знание HTML проходит долгий путь
Мы вкратце ознакомились с работой HTML-документа. Теперь вы знаете основы структуры веб-страниц. Даже если вы не будете создавать веб-страницы, вы будете немного лучше осведомлены о сети, которую используете каждый день.
Чтобы узнать больше, улучшите свои навыки веб-разработки с необходимыми инструментами а затем ознакомьтесь с нашим руководством о том, как создать свой первый сайт.
Кредит изображения: Belyaevskiy / Depositphotos