Создание сайта похоже на конструктор лего. А HTML — его инструкция, по которой все элементы сайта собирают в нужный вид.
Что это такое, как на практике работает HTML, за сколько и где можно научиться его использовать новичку в веб-дизайне, узнаете в нашей статье.
Из чего состоит HTML-код
HTML (Hypertext Markup Language) — код, который структурирует веб-страницу и ее содержимое.
С помощью HTML разработчик создает документ с гиперссылками, списками, заголовками и подзаголовками, разными шрифтами. Так получается неоформленный каркас сайта, с текстом, таблицами и иллюстрациями. Привычный нам дизайн оформляют каскадными таблицами CSS, о них читайте в нашей другой статье.
HTML-код состоит из тегов — команд, которые сообщают браузеру, как располагаются элементы на странице.
Для всех примеров мы писали код HTML в приложении Notepad ++.
Такая команда состоит из названия, заключенного в боковые скобки < >. Теги бывают парные, которые состоят из открывающего и закрывающего, и непарные, состоящие из одного тега.
Парные теги всегда идут вместе. Если вы пропустите закрывающий тег, команда будет незавершенной и браузер не сможет ее исполнить, а элементы на странице отобразятся неверно.
Пример парных тегов:
<p>…</p>, где <p> это открывающий тег, а </p> — закрывающий. В него помещают основной текст, например:
Парные теги используются, чтобы разметить блоки на странице: заголовки, абзацы, списки и таблицы.
Теперь наша надпись «Здравствуйте, это проект “Содействие занятости”» расположена на веб-странице.
Добавим к ней картинку при помощи непарного тега <img>.
Важно запомнить и про атрибуты тега. Благодаря им к элементу страницы добавляют дополнительные характеристики: размер, id элемента, ссылку на изображение.
Тег <img> включает два основных атрибута — src и alt. Первый добавляет ссылку на файл, а второй — подпись к картинке, которая отобразится, если картинка не загрузится.
Добавим <img> и атрибут src в наш html-код:
Браузер отобразит это так:
ВАЖНО: Чтобы картинка отображалась верно, скачайте нужную на компьютер, найдите ее свойства и скопируйте содержимое строки «Путь к файлу» внутрь тега <img>.
Чтобы наш текст на фоне логотипы выглядел больше и ярче, сделаем его через тег <hN>…</hN> — заголовок конкретного уровня: от 1 до 6. Мы выбрали заголовок уровня 2 — <h2>...</h2> и поставили этот тег вместо <p>…</p>.
На простых примерах вы увидели, как работает код html. Если планируете изучать разметку сайтов вам понадобятся следующие теги:
<html>...</html> — контейнер гипертекста;
<head>...</head> — контейнер заголовка документа;
<title>...</title> — название, которое отображается в заголовке окна браузера;
<body>...</body> — контейнер тела документа;
<div>...</div> — структурный блок;
<a>...</a> — гиперссылка;
<ol>...</ol> — нумерованный список;
<ul>...</ul> — маркированный список;
<li>...</li> — элемент списка;
<table>...</table> — контейнер таблицы;
<tr>...</tr> — строка таблицы;
<td>...</td> — ячейка таблицы;
<form>...</form> — форма;
<i>...</i> — отображение текста курсивом;
<b>...</b> — отображение текста полужирным шрифтом;
<em>...</em> — выделение (курсивом);
<strong>...</strong> — усиление (полужирным шрифтом);
<br> — принудительный разрыв строки.
Как же происходит процесс разметки сайта на деле, давайте разбираться.
Сначала вы вводите в адресную строку название сайта или страницы. Браузер отправляет запрос и получает HTML-файл с кодом. Именно этот код и преобразуется в объекты и элементы на странице.
У каждого браузера есть собственные правила отображения. Чтобы облегчить работу и не подстраивать код под каждый браузер, разработчики W3C создали веб-стандарты, благодаря которым код в любом браузере отображается одинаково.
HTML — язык программирования
Нет, HTML — язык разметки. Он сообщает браузеру, на каком устройстве вы открыли веб-страницу, с какой ориентацией экрана, и подсказывает, как браузеру показать сайт, чтобы вам было комфортно его смотреть.
На языках программирования пишут программы и приложения, а вот HTML как язык разметки через теги — команды — указывает браузеру, где и какой элемент должен находиться на странице.
Сколько времени нужно, чтобы освоить HTML
Основы HTML, важные теги и теорию вы сможете изучить за пару часов. Здесь важнее практика и насмотренность. Их вы получите на бесплатном курсе «Web-программист: с нуля до первых проектов». Вы за 2 месяца изучите и html, и другие основы веб-дизайна. Обучение проходит в рамках федерального проекта «Содействие занятости».
На курсе вы научитесь:
- Выстраивать элементы сайта так, чтобы он был удобным и понятным;
- Понимать все внутренние процессы, которые происходят на сайте;
- Писать код и использовать инструменты разработки;
- Верстать сайты для всех типов устройств.
Обучение проходит в онлайн-формате на образовательной платформе Odin. Обучаться можно по гибкому графику: после работы или на выходных. После окончания программы вы получите документ установленного образца и возможность пройти оплачиваемую стажировку в компаниях-партнерах проекта.
Как только закончите обучение, вы получите доступ в закрытый канал с 4500+ актуальными вакансиями «с опытом» и «без» от проверенных работодателей России.
Чтобы вам было легче и комфортнее найти работу после обучения, чувствовать поддержку и получать помощь и ответы на вопросы, обращайтесь в Центр карьеры.
Специалисты помогут:
- Сориентироваться в сферах, где вам стоит искать работу по своей специальности.
- Понять, на какую зарплату можно претендовать (подготовят статистику по вашей позиции).
- Определиться с чего начать, если планировали менять работу.
- Узнать, как действовать при угрозе увольнения или сокращения.
- Составить план поиска работы.
- Правильно коммуницировать с работодателем на всех этапах работы.
Записывайтесь на бесплатное обучение «Web-программист: с нуля до первых проектов», чтобы получить новую профессию и изменить свою карьеру.