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