HTML (HyperText Markup Language) — язык гипертекстовой разметки. Этот стандарт применяют, когда разрабатывают веб-страницы. Он не относится к языкам программирования, на которых пишут программы и приложения. В нём есть только теги — они говорят браузеру, как отображать сайт. HTML — это старт в профессиях верстальщика и веб-программиста.
Зачем нужен HTML
Когда пользователь открывает сайт в браузере, в ответ он получает HTML-страницу, файлы стилей CSS и скрипты JS, если они есть на странице. Браузер обрабатывает полученные данные и отрисовывает страницу по заданным правилам.
С помощью HTML определяют структуру: блоки с контентом и их порядок. Блок содержит текст и различные атрибуты. Например, так создают заголовок:
<h2>Это заголовок второго уровня</h2>
А так делают параграф:
<wp-p>Абзацы начинаются с новой строки и отделяются отступами сверху и снизу</wp-p>
Такие парные теги применяют, чтобы сделать разметку блоков: контейнеров, заголовков, абзацев, таблиц и не только.
Основные теги
Любая современная HTML-страница начинается с тега. Это указывает браузеру на последнюю версию HTML5. Без этого тега страница отобразится некорректно.
Структура HTML довольно проста: весь код находится внутри тега . В блоке подключают стили, указывают метатеги и метаописание. Устанавливают тайтл — название, которое отобразится на вкладке в браузере. В блоке располагают контент страницы, ее видимую часть: текст, картинки, видео, ссылки.
Пример простой страницы:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Это название страницы</title>
</head>
<body>
<h1>Это заголовок первого уровня</h1>
<wp-p>Размещаем текст, а далее изображение</wp-p>
<img src="/media/image.png">
<wp-p>Таких тегов может быть сколько угодно</wp-p>
</body>
</html>
К основным тегам, с помощью которых структурируют документ, относят теги для отображения медиа, работы с текстом, гиперссылками. А еще теги, чтобы создавать списки, заголовки, кнопки, формы и пользовательские блоки — div-контейнеры.
🚀 Для текста
Кроме тега параграфа
чаще используют . Это специальный строчный тег, с помощью которого у части текста меняют форматирование. То есть выделяют часть информации внутри других тегов и устанавливают стиль. Внутри абзаца меняют цвет и размер первой буквы: добавляют начальный и конечный тег и определяют для него стиль текста. Например, делают его жирным, курсивным или цветным.
<wp-p><b>Этот текст будет написан жирным</b></wp-p> — благодаря тегу форматирования </b>. <wp-p>Часть текста <i>будет курсивной</i></wp-p> — этого добиваемся с помощью тега <i>. <wp-p>Пример с <span style="color: red;"><i>красным курсивом</i></span><wp-br>и переносом строки</wp-p>.
🚀 Для изображений
Тег используют, чтобы добавить картинку. Его атрибуту src устанавливают значение, в котором — путь до нужного файла. Например, чтобы отобразить изображение 200 на 200 пикселей, напишите:
<img src="путь_к_картинке.png" width=200 height=200> — width и height — атрибуты тега <img>.
🚀 Для сложной структуры данных
К такой структуре относят маркированные и нумерованные списки. Для каждого есть свой тег: <ul> — для маркированного, <ol> — для нумерованного. А чтобы обозначить элемент списка, используют тег <li>. Для таких списков есть правило: внутри <ul> и <ol> не должно находиться ничего, кроме <li>.
<h2>Маркированный список</h2>
<ul>
<li>Элемент 1</li>
<li>Элемент 2</li>
<li>Элемент 3</li>
</ul>
<h2>Нумерованный список</h2>
<ol>
<li>Элемент 1</li>
<li>Элемент 2</li>
<li>Элемент 3</li>
</ol>
Результат
Еще более сложная структура — таблица. Ее описывают внутри тега <table>. Чтобы определить названия столбцов, создайте элемент <tr> и поместите теги табличного заголовка <th> с названием столбцов. Значения добавляйте с тегом табличных данных <td>.
<!-- Здесь описывают столбцы таблицы --> <table border="1"> <caption>Теги html</caption> <tr> <th>ТЕГ</th> <th>ДЛЯ ЧЕГО НУЖЕН</th> <th>ОПИСАНИЕ</th> </tr> <!-- Далее идут значения --> <tr> <td>caption</td> <td>Таблицы</td> <td>Создает заголовок таблицы</td> </tr> <tr> <td>a</td> <td>Гиперссылки</td> <td>Создают ссылки на другие документы</td> </tr> <tr> <td>br</td> <td>Перенос</td> <td>Переносит текст на новую строку</td> </tr> <tr> <td>img</td> <td>Изображение</td> <td>Содержит ссылку на изображение</td> </tr> </table>
Результат кода
HTML и другие технологии
HTML — фундаментальная технология, но для разработки сайтов используют не только ее. С помощью CSS описывают внешний вид элементов страницы, адаптируют сайт под просмотр с компьютера и смартфона. А с JavaScript делают страницу динамической: то есть оживляют кнопки, изображения, карточки товаров.
Так выглядит страница яндекса, если из нее убрать CSS
Изучите HTML, CSS и JavaScript на курсе «Веб-разработчик» онлайн-университета профессий Skypro. Познакомитесь и поработаете с GIT, GitHub, линтерами, форматтерами, пакетными менеджерами, фреймворком React, backend-разработкой.
Осваивать теорию будете по видеоурокам, вебинарам и конспектам. Отрабатывать — с помощью домашек: проверяют их только практикующие разработчики. Сложные темы разберете онлайн, за 12 месяцев учебы сделаете 7 проектов в портфолио.
Главное об HTML
-
-
- HTML — это язык гипертекстовой разметки страницы. Он состоит из тегов — команд браузеру, как отображать страницу.
- С помощью HTML делают текст жирным, курсивным, подчеркнутым, меняют его цвет. Ставят абзацы, обозначают заголовки, таблицы, списки. Размещают не только текст, но и ссылки или изображения.
- Полный список тегов — на сайте HTML5Book. А закрепить навыки можно в онлайн-редакторе Сodesandbox.
- HTML отвечает за структуру и контент — не за форматирование элементов страницы или динамику сайта. Поэтому разработчику нужно знать и другие технологии: CSS и JavaScript.
-
Добавить комментарий