- Что такое HTML
- Возможности HTML
- Наиболее используемые HTML-теги и HTML-элементы
- Общие атрибуты HTML
- Как использовать HTML
- Как создать HTML-файл
- Интеграции других инструментов в HTML
- Заключение
В этом руководстве мы расскажем, что такое HTML и для чего его используют. Затем мы научимся создавать базовый HTML-код и рассмотрим некоторые из его наиболее важных элементов и атрибутов.
Что такое HTML
HyperText Markup Language, или HTML – это язык разметки, который используется для создания и структурирования веб-страниц. Он помогает определять, как содержимое страницы должно отображаться в браузерах. Иными словами, HTML – это своеобразный каркас, на котором строится страницы, включая текст, изображения, ссылки и другие элементы.
Возможности HTML
• Форматирование текста. HTML позволяет выполнять форматирование текста: выделение курсивом, жирным шрифтом, подчеркивание, изменение размера шрифта и создание нумерованных или маркированных списков.
- Текстовые блоки. HTML предоставляет элементы для создания текстовых блоков – заголовков разных уровней (от H1 до H6), абзацев и переносов на новую строку.
- Таблицы. С помощью HTML можно создавать таблицы с разным количеством строк и столбцов, задавать фиксированную высоту и ширину таблицы, а также добавлять заголовки к столбцам.
- Вставка объектов. HTML позволяет встраивать различные объекты, такие как изображения, звуковые и видеофайлы, текстовые документы и другие мультимедийные элементы на веб-страницу.
- Гиперссылки. С HTML вы можете создавать гиперссылки, которые позволяют пользователям переходить к другим страницам или открывать файлы. Также можно указать атрибуты, которые укажут, должен ли документ открываться в текущем окне браузера или в новом.
- Создание простых форм. HTML позволяет создавать простые формы для ввода текстовой информации, выбора пунктов из списка и отправки данных на сервер. Более сложные и интерактивные формы часто создаются с использованием JavaScript или других языков программирования, так как HTML сам по себе ограничен в функциональности.
Наиболее используемые HTML-теги и HTML-элементы
Что такое теги
Теги в HTML – это части языка разметки, которая используется для обозначения начала и конца элемента HTML. Теги помогают браузерам преобразовывать HTML-документы в веб-страницы.
Блочные элементы
Блочный элемент занимает всю ширину страницы. Он всегда начинает новую строку в документе. Например, элемент заголовка будет расположен на отдельной строке от элемента абзаца.
На каждой HTML-странице используются три следующих тега:
- Тег <html> – корневой элемент, который определяет весь HTML-документ.
- Тег <head> содержит метаинформацию: заголовок страницы и кодировку.
- Тег <body> заключает в себе все, что отображается на странице.
Для наглядности:
<head>
<!—Здесь будет метаинформация. -->
</head>
<body>
<!—А здесь – содержимое страницы. -->
</body>
</html>
Основные теги:
- Теги заголовков могут быть разными – от <h1> до <h6>, где заголовок h1 самый крупный по размеру, а h6 – наоборот, самый маленький.
- Теги абзацев заключаются в тег <p>.
- Теги списков имеют разные вариации. Для упорядоченных списков используйте тег <ol>, а для неупорядоченных – <ul>. Затем заключите отдельные элементы списка в тег <li>.
Строчные элементы
Строчный элемент форматирует содержимое блочных элементов, такие как добавление ссылок и выделенных строк.
Например, тег <strong> выделит элемент жирным шрифтом, в то время как тег <em> выведет его курсивом.
Например:
<p><em>SpaceWeb is on the line.</em></p>
Гиперссылки тоже относятся к строчным элементам. Они используют тег якоря <a> и атрибут href для указания адреса ссылки.
Важно! Якорь (<a>) – это тег, который отмечает начало и конец гиперссылки.
Пример:
Общие атрибуты HTML
Атрибуты изменяют HTML-элементы различными способами. Они могут изменять внешний вид элемента, применять уникальные идентификаторы, чтобы выделить элементы с помощью CSS.
Атрибуты обычно указываются в нижнем регистре и представляют собой пары «имя-значение», при этом значения заключаются в кавычки.
Ниже мы рассмотрим наиболее распространенные атрибуты.
Атрибут стиля
Атрибуты стиля содержат встроенные стили CSS. Они предопределяют любые стили, заданные в секции <head> документа или во внешних таблицах стилей. Они применяются только к HTML-элементу, который имеет атрибут стиля в своем открывающемся теге.
Пример:
<p style="color: #800000">But this is not.</p>
Атрибут идентификатора
Атрибут идентификатора используется для идентификации отдельного элемента в HTML-документе. Это означает, что значение атрибута ID не должно повторяться в одном и том же файле. С помощью этого уникального значения можно настраивать стили для отдельных элементов с использованием внутренних или внешних таблиц стилей.
Пример:
Атрибут класса
Атрибут класса используется для идентификации группы элементов с одинаковым именем и настройки этой группы, что позволяет создать новую группу элементов.
Например, все кнопки сайта могут иметь класс «.btn», чтобы у них был одинаковый базовый стиль: 14px шрифт, средний размер, закругленные края и так далее.
Пример:
Атрибут языка
Атрибут языка сообщает программам чтения о языке страницы и о том, когда им нужно переключаться на другой язык. Он сделает ваш контент доступным для всех читателей, независимо от их региона или языка.
Хотя этот атрибут обычно встраивается в элемент HTML, его также можно использовать с абзацами, блоками и другими элементами.
Пример:
<p lang="en">This sentence is in English.</p>
Атрибут href
Атрибут href содержит адрес ссылки. Этот атрибут всегда должен присутствовать в элементе якоря.
Пример:
Атрибут src
Как и элемент якоря, изображение также должно иметь атрибут src, который содержит путь к файлу изображения или его URL.
Вот два примера атрибута в HTML:
<img src="https://s.sweb.ru/i/swebnew.png">
Атрибут alt
Атрибут alt предоставляет описательную информацию об элементе HTML. Это важно для читателей с нарушением зрения и для всех читателей в случае, если элемент не загрузился.
В этом случае читатели все равно смогут понять, что элемент должен был донести. Как и атрибут src, атрибут alt чаще всего встречается с элементом изображения.
Пример:
Итак, мы рассмотрели наиболее распространенные элементы и атрибуты в HTML. Теперь перейдем к практическим вопросам.
Как использовать HTML
Чтобы начать использовать HTML, вам понадобится текстовый редактор.
Текстовый редактор – это программное обеспечение для написания кода. Поскольку файл HTML имеет стандартный текстовый формат, для нашей задачи подойдет любой базовый текстовый редактор.
Вы можете скачать бесплатный текстовый редактор. Например:
- Notepad++ – это хороший бесплатный текстовый редактор для Windows.
- Sublime Text – популярный выбор для MacOS и Linux.
- CodeRunner – это текстовый редактор с открытым исходным кодом для MacOS.
Когда вы откроете программу после установки, то, увидите окно редактора. Здесь вы будете писать свой HTML-код:
С открытым окном редактора скопируйте следующий HTML-код и вставьте его в окно:
<html>
<body>
<h1>Hey!</h1>
<p>We are SpaceWeb.</p>
</body>
</html>
Затем сохраните файл и назовите его, например, «index.html». После сохранения вы сможете открыть его в браузере.
Для этого нужно или дважды щелкнуть по файлу, или перетащить ярлык файла в открытое окно браузера. Тогда в вашем браузере отобразится следующая страница:
Как создать HTML-файл
Для создания веб-сайта с использованием HTML вам сначала нужно создать HTML-файл. В этом файле будет содержаться весь HTML-код вашей страницы.
В предыдущем разделе мы показали вам очень простой HTML-файл. Здесь же будет описан процесс создания более сложного файла:
Шаг 1. Добавьте объявление <!DOCTYPE>
Сначала объявите тип документа – HTML. Для этого добавьте специальный код <!DOCTYPE html> в первой строке файла. Запомните: каждый HTML-файл начинается именно так:
Шаг 2. Добавьте элемент <html>
После объявления «!DOCTYPE» добавьте элемент <html>, который также называется «корневым» элементом документа, потому что он содержит все остальные элементы в документе.
На второй строке добавьте открывающий тег <html>, а под ним – закрывающий тег </html>
<html>
</html>
Все остальные элементы в документе будут размещены между этими тегами.
Шаг 3. Добавьте атрибут языка
Внутри открывающего тега элемента html пропишите атрибут языка «lang». Без него программы чтения будут использовать язык операционной системы по умолчанию, что может привести к неправильной выдаче заголовка и другого содержимого страницы.
Например, чтобы установить русский язык, нужно прописать значение <="ru">. Для установки английского языка поменяется значение на <="en">.
<html lang="en">
</html>
Шаг 4. Добавьте разделы head и body
HTML-документ состоит из двух частей: раздела head и раздела body.
Как мы уже говорили в самом начале, раздел head содержит метаинформацию о странице, а также любой внутренний CSS. Браузер не отображает эту информацию пользователям.
Раздел body содержит всю информацию, которая будет видна пользователям – абзацы, изображения и ссылки.
Для создания этих разделов мы добавим теги <head></head> и <body></body> внутри раздела <html> документа.
<html lang="en">
<head>
</head>
<body>
</body>
</html>
Вы также заметите, что теги <head> и <body> здесь сдвинуты немного вправо. Это визуально указывает нам, что они размещены внутри тегов <html>.
Несмотря на то, что сдвиг необязателен и никак не влияет на то, как браузер будет отображать файл, эта практика сильно улучшает читаемость кода.
Шаг 5. Добавьте заголовок в раздел head
В разделе head укажите, как хотите назвать документ. Напишите название и поставьте его между тегами <title></title>.
Пример:
<html lang=”en”>
<head>
<title>SpaceWeb is here.</title>
</head>
<body>
</body>
</html>
Шаг 6. Добавьте элементы HTML в раздел body
В разделе body добавьте заголовок, а затем оберните их в теги <h1></h1>. Вы также можете добавить абзац с помощью тегов <p></p>.
Пример:
<html lang=”en”>
<head>
<title> SpaceWeb is here.</title>
</head>
<body>
<h1>Good day!</h1>
<p> SpaceWeb is still here.</p>
</body>
</html>
Интеграции других инструментов в HTML
HTML значительно упрощает интеграцию внешних инструментов. Поэтому с ним вы можете использовать:
- PHP. В «тело» HTML-страницы включается ссылка на исполняемый файл.
- JavaScript. Скрипт может быть встроен непосредственно в код страницы или загружаться из внешнего файла.
- Ajax. Это комбинированный подход, который объединяет асинхронный JavaScript и обработку данных в формате XML.
- Iframes. Эта технология позволяет встраивать интерактивные элементы в веб-документ.
Подобные возможности интеграции иногда приводят к недоразумениям: некоторые начинают считать, что HTML – это уникальный язык программирования. Однако на самом деле HTML ограничивается отображением содержания сайта, а вся дополнительная функциональность зависит от подключаемых программных модулей.
Заключение
HTML – это основной язык разметки в интернете. Каждый файл HTML содержит ряд элементов, которые создают структуру контента страницы или веб-приложения.
HTML подходит для новичков и в основном применяется для создания статических веб-страниц. Вы можете использовать его в паре с CSS для стилизации и JavaScript для добавления разных функций. О том, как встраивать JavaScript в HTML, мы расскажем уже в другом руководстве.