HTML является основой каждой веб-страницы. Если вы новичок, давайте пройдемся по основным шагам к пониманию HTML
Image Credit: Belyaevskiy/Depositphotos.
HTML является жизненно важной частью Интернета, каким мы его знаем. И хотя немногие веб-дизайнеры создают страницы, вручную набирая HTML, все же полезно знать о нем немного
Мы рассмотрим некоторые основы языка, включая то, что такое HTML, некоторые фундаментальные понятия и то, как он взаимодействует с другими языками. Считайте, что это краткий курс ‘HTML для чайников’
Основы HTML: Что такое HTML?
HTML расшифровывается как язык гипертекстовой разметки. И хотя иногда его объединяют с языками программирования, это не совсем точно
Как язык разметки , HTML позволяет создавать только макет страниц. Настоящий язык программирования , например Java или C++, содержит логику и команды, которые выполняются
Несмотря на свою простоту, HTML является основой каждой страницы в Интернете. Он отвечает за выделение текста жирным шрифтом, добавление изображений и ссылки на другие страницы. У нас есть FAQ по HTML, который объясняет больше
Вы можете щелкнуть правой кнопкой мыши на большинстве веб-страниц в браузере и выбрать View page source или аналогичный пункт, чтобы увидеть 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’s
<div>
тег позволяет определить раздел документа. Обычно он используется в паре с CSS (см. ниже) для форматирования раздела определенным образом
Тег
<p>
позволяет разделить текст на абзацы. Браузеры автоматически ставят пробелы до и после них, позволяя вам естественным образом разбить текст
Вы можете добавить заголовки в документ и сделать его более удобным для восприятия, используя тег
<h1>
через
<h6>
теги.H1 – самый важный заголовок, а H6 – наименее важный. Почти в каждой статье ПК используются заголовки H2 и H3 для организации информации
Нажатие Enter для добавления переносов строк в HTML-документ на самом деле не отображает их. Вместо этого можно использовать
<br>
добавить перенос строки
Вот пример, в котором используются все эти функции:
<div class='example'>
<h2>Example Heading</h2>
<>This is one paragraph.</p>
<>This is a second<br>paragraph split between two lines.</p>
</div>
Шаг 4: Вставка изображений
Изображения являются неотъемлемой частью большинства веб-страниц. Вы можете легко добавлять их с помощью HTML и даже задавать для них различные свойства
Вы вставляете изображение с помощью
<img>
метка. Комбинируя это с тегом
src
Атрибут позволяет указать, откуда должно загружаться изображение
Еще один важный атрибут
<img>
теги
alt
Alt-текст позволяет описать изображение для программ чтения с экрана или в случае, если изображение не загружается должным образом. Вы можете навести курсор мыши на изображение, чтобы увидеть его alt-текст
Используйте для обозначения изображения
width
height
элементы для указания количества пикселей, на которые выводится изображение
Соедините все это вместе, и тег изображения будет выглядеть следующим образом:
<img src='https://img.drphil.com/wp-content/uploads/2016/04/DrPhil-1280x720px-Shareimage.jpg' 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>
The
<a>
тег имеет множество других возможных элементов, но здесь мы не будем их рассматривать
Как HTML связан с CSS и JavaScript
Мы рассмотрели основы HTML и то, как он создает веб-страницу. Но, как вы можете себе представить, один HTML не подходит для современного Интернета. Простые веб-страницы на HTML были обычным делом во времена ‘Web 1. 0’, когда большинство веб-сайтов представляли собой не более чем статичный текст
Но теперь у нас есть гораздо больше.CSS (Cascading Style Sheets) – это язык, используемый для описания того, как должен выглядеть текст, подготовленный вами в HTML. Вспомните
<div>
тег, который мы обсуждали? Внутри этого (и других тегов) вы можете определить
class
атрибут. Затем в сопроводительном документе CSS вы можете написать инструкции о том, как этот
class
должно выглядеть
Вы можете определить эти элементы стиля в HTML-коде, но это считается плохой практикой, так как это гораздо сложнее поддерживать. Узнайте больше на этих простых примерах CSS. Также узнайте, как оптимизировать ваши 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-документ. Теперь вы знаете основы структуры веб-страниц. Даже если вы не станете создавать веб-страницы, вы будете немного лучше осведомлены о веб-страницах, которыми пользуетесь каждый день
Чтобы узнать больше, улучшите свои навыки веб-разработки с помощью основных инструментов, а затем ознакомьтесь с нашим руководством о том, как создать свой первый веб-сайт
Image Credit: Belyaevskiy/Depositphotos
Комментировать