Привет, Хабр! Если вы давно хотели «потрогать» IT своими руками, но боялись утонуть в сложных терминах, математике или непонятных алгоритмах — вы по адресу.
Давайте начнем с самого простого и понятного. Сегодня мы разберем HTML.
Официально это расшифровывается как HyperText Markup Language (язык гипертекстовой разметки). Звучит грозно, но давайте забудем эту скучную фразу и объясним всё на пальцах.
Представьте, что вы строите дом:
HTML — это кирпичи, фундамент, несущие стены и голый каркас. С помощью HTML вы говорите: «Здесь будет окно, тут входная дверь, а вот тут — крыша».
CSS — это краска, обои, ламинат и красивые шторы. То, что делает дом уютным и визуально приятным.
JavaScript — это проводка, водопровод и система «Умный дом». То, что заставляет лампочку загораться, когда вы щелкаете выключателем.
Без кирпичей (HTML) клеить обои (CSS) просто не на что. Любой сайт в интернете, от простенького блога до самого Хабра или YouTube, держится на этом HTML-каркасе. И именно с него начинает свой путь абсолютно любой веб-разработчик.
Разрушаем главный миф
И тут кроется отличная новость для новичков: HTML — это НЕ язык программирования.
Это язык разметки. В чем разница? В программировании вы описываете сложную логику («если пользователь нажал эту кнопку, умножь число Х на Y и выдай результат»). В HTML никакой логики нет. Вы просто берете обычный текст и приклеиваете к нему ярлычки: «вот это предложение должно быть большим заголовком», а «вот это слово сделай ссылкой».
Из этого вытекает главный плюс HTML: здесь невозможно ничего сломать.
Если в настоящем языке программирования вы забудете поставить запятую, программа просто не запустится и выдаст страшную красную ошибку. В HTML всё иначе. Если вы ошибетесь, компьютер не взорвется, синий экран смерти не вылезет. Браузер (ваш Chrome или Safari) просто пожмет плечами и всё равно постарается показать вашу страничку, пусть она и будет выглядеть немного кривовато. Это идеальная песочница для экспериментов!
Что мы сделаем сегодня?
Никакой долгой теории ради теории — мы сразу перейдем к практике.
К концу этой статьи (а займет это у вас не больше 20 минут) вы своими руками, с абсолютного нуля, напишете самую настоящую веб-страницу. Мы создадим сайт-визитку «О себе», которую в будущем можно будет превратить в свое полноценное онлайн-резюме.
Кстати! Если вам понравится этот урок и вы захотите полноценно погрузиться в тему, закрепить всё на практике и выполнить интерактивные задания — приглашаю вас на мой бесплатный курс «HTML5: Фундамент веб-разработки» на Stepik. Он идеально подойдет для старта.
Ну что, готовы? Тогда открываем редактор и поехали!
2. Подготовка к работе: собираем чемоданчик инструментов
Чтобы начать писать код, вам не нужен супермощный компьютер за полмиллиона или сложные платные программы. Сайты можно собирать хоть на стареньком бабушкином ноутбуке. Всё, что нам понадобится — это две абсолютно бесплатные вещи:
Браузер (Google Chrome, Safari, Firefox, Edge — подойдет любой, которым вы пользуетесь каждый день). В нем мы будем смотреть на результат.
Текстовый редактор. В нем мы будем писать сам код.
В чем писать код?
Часто новички спрашивают: «А можно писать код в стандартном "Блокноте" (Windows) или TextEdit (macOS)?»
Технически — да, можно. Раньше суровые программисты так и делали. Но сегодня писать код в Блокноте — это как копать траншею чайной ложкой. Текст будет сливаться в одну черно-белую кашу, вы быстро устанете и пропустите кучу опечаток.
Поэтому настоящие разработчики используют специальные редакторы. Безусловный лидер и любимец индустрии сегодня — это Visual Studio Code (или просто VS Code). Он бесплатный, легкий, а главное — он раскрашивает код в разные цвета, делая его понятным.
Давайте его настроим (это займет 2 минуты):
Зайдите на официальный сайт code.visualstudio.com и скачайте программу.
Установите ее, просто нажимая «Далее».
Создайте на рабочем столе вашего компьютера обычную пустую папку. Назовите её, например,
my-first-site.Откройте VS Code и просто перетащите эту папку мышкой прямо в окно программы (или нажмите в меню File → Open Folder и выберите вашу папку).
В левой панели редактора появится ваша папка. Наведите на нее мышку, нажмите иконку «New File» (Создать файл) и назовите его
index.html.
Маленький секрет: почему именно index? В мире веб-разработки так исторически сложилось, что файл с именем index — это «главная дверь» вашего сайта. Когда вы заходите на любой сайт, браузер первым делом ищет там именно файл index.html.
Знакомство с Emmet
Мы вплотную подошли к написанию кода. В пустом файле index.html нам по-хорошему нужно написать базовый каркас страницы — те самые служебные команды для браузера.
Но мы же в современном мире! Программисты — люди ленивые, поэтому в VS Code уже встроен гениальный помощник под названием Emmet. Он умеет дописывать рутинный код за вас.
Давайте проверим его в деле. Прямо в первой строчке вашего пустого файла index.html (обязательно на английской раскладке клавиатуры) введите восклицательный знак ! и нажмите клавишу Tab (или Enter).
БАМ! 💥
Вместо одного восклицательного знака редактор мгновенно развернет для вас 11 строк непонятного, но очень важного стартового кода:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
Круто, правда? Новички обычно приходят от этой фишки в восторг.
3. Анатомия HTML: как это вообще работает?
Прежде чем мы начнем разбирать ту простыню кода, которую нам сгенерировал редактор, давайте поймем базовое правило HTML. Оно настолько простое, что вы усвоите его ровно за одну минуту.
Вся разметка в HTML строится на тегах.
Что такое тег? Грубо говоря, это команда для браузера, обернутая в угловые скобки (или, как их иногда называют, «птички»): < и >.
Представьте, что вы собираете вещи для переезда. Вы кладете книги в коробку и маркером пишете на ней: «КНИГИ». В HTML происходит то же самое: мы берем обычный текст, кладем его в невидимую коробку и лепим ярлык. Например, говорим браузеру: «Эй, вот этот текст — это жирный заголовок!».
Теги бывают двух видов:
1. Парные теги (Коробки с крышкой)
Их абсолютное большинство. Они работают как матрешка или коробка, в которую мы что-то кладем. Чтобы браузер понял, где начинается наш текст и где он заканчивается, нам нужны два тега: открывающий и закрывающий.
Выглядит ��то так:
<tag>какой-то текст</tag>
Заметили разницу? В закрывающем теге перед названием всегда стоит косая черта — слэш /. Это сигнал для браузера: «Всё, коробка закрыта, этот элемент закончился».
Пример из жизни: Если мы хотим сделать слово «Хабр» жирным, мы обернем его в специальный тег
<strong>.Получится вот так:
Я читаю <strong>Хабр</strong> каждый день.Браузер увидит это и покажет: Я читаю Хабр каждый день.
И да, теги можно (и нужно!) вкладывать друг в друга, прямо как матрешки. Вы можете положить маленькую коробку в коробку побольше.
2. Одиночные теги (Вещи в себе)
Но не всё в этом мире можно положить в коробку. Есть элементы, внутрь которых просто невозможно вставить какой-то дополнительный текст.
Например, перенос строки или картинка. Картинка — это просто картинка, у нее нет начала текста и конца текста. Для таких вещей придумали одиночные теги, которые не нужно закрывать слэшем.
<br>— (от слова break) просто переносит текст на новую строку.<img>— (от слова image) вставляет картинку.Им не нужна пара вроде
</br>или</img>. Написали один раз — и готово.
Атрибуты: настраиваем наши теги
С коробками мы разобрались. Но что, если нам нужно дать коробке дополнительные инструкции? Например, наклеить стикер «Осторожно, стекло!» или «Доставить на пятый этаж».
Для этого в HTML существуют атрибуты. Это дополнительные настройки для тегов.
Правило атрибутов: они всегда пишутся только внутри открывающего тега (в первой коробке).
Схема выглядит так:
<tag имя_атрибута="значение">текст</tag>
Давайте представим абстрактный (выдуманный) тег <tag>, который красит текст. Если мы хотим сказать ему, чтобы цвет был красным, мы напишем атрибут так:
<tag color="red">Этот текст будет красным</tag>
Или возьмем реальный пример из жизни. Мы помним, что картинка вставляется одиночным тегом <img>. Но как браузер поймет, какую именно картинку показывать — милого котика или вашу фотографию с паспорта?
Правильно, с помощью атрибута! Мы добавляем к тегу атрибут src (от слова source — источник), внутри которого пишем путь к картинке:
<img src="cat.jpg">
Вот и вся теория! Вы только что выучили 90% логики языка HTML: мы открываем теги, пишем внутри них атрибуты (если нужно), кладем внутрь текст и закрываем теги.
Теперь вы полностью готовы к тому, чтобы расшифровать тот самый стартовый код из 11 строчек. Переходим к каркасу нашей страницы!
4. Каркас страницы: расшифровываем заклинание
Давайте вернемся к тем самым 11 строчкам кода, которые любезно сгенерировал для нас Emmet. Сейчас они кажутся абракадаброй, но давайте переведем их с машинного языка на человеческий.
Вот наш код:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
Если присмотреться, вся структура строится на принципе матрешки (или коробок в коробке). Разберем каждую деталь:
1. <!DOCTYPE html> — Паспорт страницы
Строго говоря, это даже не тег. Это громкое заявление для браузера. Этой строчкой мы кричим ему: «Эй, браузер! Этот код написан на самом современном и свежем стандарте — HTML5. Читай его по новым правилам!». Раньше, в нулевых, эта строчка занимала три абзаца страшного текста, а сейчас всё просто и элегантно.
2. <html> — Самая главная коробка
Это контейнер для абсолютно всего, что есть на странице. За пределами тега <html> не может быть ничего. Обратите внимание: у открывающего тега есть атрибут lang="en". Он подсказывает браузеру язык сайта. Давайте сразу поменяем его на lang="ru", чтобы браузер понял, что мы пишем на русском, и не предлагал назойливо перевести страницу.
А дальше внутри <html> наша страница строго делится на две большие зоны: невидимую (<head>) и видимую (<body>). Это как ресторан: есть кухня для персонала, а есть красивый зал для гостей.
3. <head> — «Служебное помещение» (Кухня)
Всё, что лежит между <head> и </head>, обычный посетитель сайта не видит. Это техническая зона. Здесь лежат настройки для поисковиков (Яндекса и Google) и инструкции для самого браузера.
Например, те страшные одиночные теги <meta>, которые вы видите внутри:
charset="UTF-8"— спасает наши русские буквы. Без этой строчки вместо красивого русского текста на экране могли бы появиться кракозябры ``.name="viewport"— делает так, чтобы сайт адекватно смотрелся на экранах мобильных телефонов, а не сжимался в микроскопическую точку.
4. <title> — Название вкладки
Единственная вещь из блока <head>, которую заметит пользователь. Текст внутри этого тега — это то, что написано на вкладке браузера наверху. Сейчас там скучное слово Document. Давайте сотрем его и напишем туда, например, Моя визитка.
5. <body> — Витрина (Зал ресторана)
А вот это — наше главное рабочее место. Всё, что вы когда-либо видели на любых сайтах: тексты, смешные картинки, кнопки лайков, видео с котиками — абсолютно всё это пишется строго между открывающим <body> и закрывающим </body>.
Прямо сейчас между ними пустота. И если мы сохраним файл и дважды кликнем по нашему index.html, чтобы открыть его в браузере — мы увидим абсолютно белый, чистый экран. Лишь на вкладке будет гордо красоваться надпись «Моя визитка».
5. Наполняем страницу: Базовые теги (Практика)
Напоминаю главное правило: всё, что мы пишем дальше, должно находиться строго между открывающим <body> и закрывающим </body>.
Открывайте свой редактор, мы начинаем собирать вашу личную страницу!
Заголовки: от главного к второстепенному
Любой хороший текст начинается с заголовка. В HTML для этого есть целое семейство тегов: от <h1> до <h6> (буква h означает heading — заголовок).
<h1>— это самый главный и самый большой заголовок страницы. По негласному правил�� хорошего тона, он должен быть на странице только один (как название книги).<h2>— подзаголовок (как название главы).<h3>и так далее — заголовки поменьше.
Давайте представимся! Пишем внутри <body>:
<h1>Привет, я Алекс!</h1> <h2>Начинающий веб-разработчик</h2>
Текст и абзацы: тег
Просто так писать текст в <body> можно, но это плохая идея — он сольется в одну бесконечную строку. Чтобы разбить текст на красивые абзацы, используется тег <p> (от слова paragraph). А если мы хотим выделить важные слова, нам помогут теги <strong> (делает текст жирным) и <em> (делает текст курсивом).
Добавим немного информации о себе:
<p>Добро пожаловать на мою первую страницу. Я еще только учусь, но уже могу написать свой <strong>первый настоящий сайт</strong>.</p> <p>Моя цель — освоить IT и найти классную работу. И я уверен, что это <em>абсолютно реально</em>!</p>
Изображения: добавляем красоты
Какая визитка без фотографии (или хотя бы фото любимого кота)? Для картинок используется одиночный тег <img> (image). Помните, мы говорили, что одиночные теги не нужно закрывать?
Но чтобы браузер понял, какую именно картинку показывать, нам нужны атрибуты:
src(source) — путь к картинке.alt(alternative text) — запасной текст. Если у пользователя медленный интернет и картинка не загрузилась, он увидит этот текст. А еще этот текст читают программы для слабовидящих людей. Не игнорируйте его!
Как доба��ить картинку: Найдите в интернете любое фото кота, скачайте его, назовите cat.jpg и положите в ту же папку, где лежит ваш index.html.
Затем напишите в коде:
<img src="cat.jpg" alt="Моя фотография (на самом деле тут пушистый кот)">
(Также в src можно вставить прямую ссылку на картинку из интернета, например src="https://.../cat.jpg", и она тоже загрузится!)
Списки: раскладываем по полочкам
Давайте перечислим наши навыки или хобби. Списки в HTML бывают двух видов: маркированные (с точечками) и нумерованные (1, 2, 3...).
Они состоят из двух тегов (снова принцип матрешки!). Сначала мы создаем «коробку» для списка, а потом кладем в нее пункты <li> (list item).
Маркированный список — <ul> (unordered list):
Подойдет для списка того, что мы умеем.
<h3>Что я уже умею:</h3> <ul> <li>Создавать HTML-страницы</li> <li>Пользоваться редактором VS Code</li> <li>Отличать парные теги от одиночных</li> </ul>
Нумерованный список — <ol> (ordered list):
Подойдет, если важен порядок. Например, топ-3 любимых фильмов:
<h3>Мои любимые фильмы:</h3> <ol> <li>Матрица</li> <li>Интерстеллар</li> <li>Властелин колец</li> </ol>
Замените <ul> на <ol>, и браузер сам проставит цифры вместо точек! Магия.
Ссылки: как интернет стал интернетом
Интернет не был бы «паутиной» без ссылок, связывающих страницы друг с другом. Чтобы сделать кусок текста кликабельным, нужен тег <a> (от слова anchor — якорь).
Сам по себе он ничего не делает, ему обязательно нужен атрибут href, в котором мы указываем, куда должна вести ссылка.
Давайте добавим кнопку связи в самом низу:
<h3>Как со мной связаться:</h3> <p>Вы можете написать мне в <a href="https://t.me/durov">Telegram</a>.</p>
(Только не забудьте поменять ссылку Павла Дурова на свой юзернейм!)
Промежуточный итог: Сохраните ваш файл (нажмите Ctrl+S или Cmd+S) и откройте его в браузере. Вы увидите настоящую, структурированную страницу с заголовками, списками, картинкой и рабочей ссылкой. Выглядит как магия, которую вы сотворили своими руками!
6. Структурируем как профи: Блоки и Семантика
Пока что наша страница выглядит как длинный список из заголовков, текстов и картинок, идущих друг за другом. Это нормально для маленькой визитки. Но настоящие сайты состоят из десятков блоков: меню, боковые панели, ленты новостей, рекламные баннеры. Чтобы всё это не превратилось в хаос, код нужно как-то группировать.
Для этого в HTML придумали блочные теги. Представьте, что это большие картонные коробки, в которые мы складываем коробки поменьше (наши абзацы и картинки).
Эпоха <div> (Универсальная коробка)
Долгие годы главным инструментом любого разработчика был тег <div> (от слова division — раздел). Это просто пустой блок, универсальная коробка, у которой нет абсолютно никакого смысла.
Раньше сайты верстали исключительно на «дивах». Открываешь чужой код, а там сотни <div>, вложенных в другие <div>. Это напоминало огромный склад с одинаковыми серыми коробками без надписей. Понять, где тут главное меню, а где текст статьи, было решительно невозможно.
Семантика: Даем коробкам имена (HTML5)
Чтобы решить эту проблему, в современном стандарте HTML5 придумали семантические теги. Звучит как термин из учебника по лингвистике, но на деле всё просто: это те же самые большие коробки, но с четкими и понятными надписями.
Вместо того чтобы делать безликий <div>, мы используем теги, которые сами говорят за себя.
Давайте разобьем нашу страницу на три логические части:
<header>(Шапка) — верхняя часть сайта. Обычно тут логотип, название и главное меню.<main>(Основной контент) — сердце вашей страницы. Уникальная информация, ради которой человек сюда пришел (наш текст о себе).<footer>(Подвал) — самый низ сайта. Контакты, ссылки на соцсети, копирайт.
Если мы применим это к нашей визитке, структура внутри <body> будет выглядеть примерно так:
<header> <h1>Привет, я Алекс!</h1> <h2>Начинающий веб-разработчик</h2> </header> <main> <p>Добро пожаловать на мою первую страницу...</p> <!-- Тут наша картинка и списки хобби --> </main> <footer> <h3>Как со мной связаться:</h3> <p>Напишите мне в <a href="https://t.me/durov">Telegram</a>.</p> </footer>
В чем подвох?
Если вы сейчас сохраните этот код и обновите браузер, вы, скорее всего, воскликните: «Эй, ничего же не поменялось!»
И будете абсолютно правы. Внешне на экране не изменится вообще ничего. Никаких рамочек, отступов или новых цветов не появится.
Так зачем тогда мы это пишем?
Дело в том, что мы пишем код не только для людей, которые смотрят в монитор, но и для машин:
Поисковые роботы (Яндекс и Google) скажут вам спасибо. Когда робот зайдет на ваш сайт, он сразу поймет: «Ага, самое важное лежит в теге
<main>. Проиндексирую-ка я это в первую очередь, а подвал (<footer>) проигнорирую, там просто ссылки».Программы для чтения с экрана (скринридеры), которыми пользуются незрячие и слабовидящие люди, тоже опираются на эти теги. Человек сможет нажать одну кнопку и мгновенно перепрыгнуть к блоку
<main>, не прослушивая каждый раз шапку сайта.
Используя <header>, <main> и <footer>, вы с первой же статьи начинаете писать код не как любитель, а как профессионал, который заботится о доступности и качестве своего продукта.
Ну что, наш каркас готов, текст написан, картинка на месте. Чего-то не хватает... Точно! Нам нужно добавить интерактива, чтобы пользователи могли нам написать. Переходим к формам!
7. Форма обратной связи: добавляем интерактив
До сих пор наша страница была похожа на телевизор — она только транслировала информацию, но никак не реагировала на зрителя. Давайте это исправим и добавим в самый низ нашей визитки форму обратной связи, чтобы гости могли оставить нам сообщение.
⚠️ Сразу сделаем важную оговорку (спойлер):
Наша форма будет выглядеть, нажиматься и вести себя как абсолютно настоящая. Но если вы нажмете кнопку «Отправить», письмо вам на почту пока не придет.
Помните, мы говорили, что HTML — это только кирпичи? В HTML нет встроенного почтового голубя. Чтобы данные реально улетели на сервер, к нашей форме потом нужно будет подключить «проводку» — язык JavaScript или серверный код (например, на Python или PHP). Но прямо сейчас наша задача — красиво и правильно этот интерфейс нарисовать.
Тег <form> — главная коробка для данных
Как и в случае со списками, для формы нам нужна обертка. Это парный тег <form>. Внутри него мы будем складывать поля для ввода.
Тег <input> — поле-хамелеон
Чтобы пользователь мог что-то напечатать, используется одиночный тег <input> (от слова ввод). И тут начинается настоящая магия HTML5!
Сам по себе <input> — это просто пустая прямоугольная рамка. Но у него есть суперважный атрибут type (тип), который меняет поведение этого поля до неузнаваемости.
Давайте посмотрим на три самых популярных типа:
type="text"— обычное текстовое поле. Отлично подойдет для имени.type="email"— поле для электронной почты. Самое крутое, что браузер сам поймет, что это email. Если пользователь забудет написать собачку@, браузер сам выдаст ему ошибку и не даст отправить форму! И для этого нам не пришлось писать ни строчки сложного кода.type="password"— поле для паролей. Всё, что вы сюда впишете, браузер автоматически превратит в черные точки или звездочки, чтобы никто не подсмотрел из-за плеча.
А чтобы пользователь понял, куда и что писать, мы добавим еще один полезный атрибут — placeholder (текст-подсказка, который исчезает, как только вы начинаете печатать).
Тег <button> — кнопка отправки
Ну и какая форма без кнопки? Для неё есть понятный парный тег <button>.
Давайте соберем нашу форму вместе. Вставьте этот код где-нибудь внутри тега <main>, сразу после списков:
<h3>Напишите мне:</h3> <form> <!-- Поле для имени --> <p>Как вас зовут?</p> <input type="text" placeholder="Иван Иванов"> <!-- Поле для почты --> <p>Ваш Email для связи:</p> <input type="email" placeholder="example@mail.com"> <!-- Поле для секретного слова (просто чтобы показать, как работают пароли!) --> <p>Секретное слово (никто не увидит):</p> <input type="password" placeholder="Тссс..."> <!-- Кнопка --> <br><br> <button type="submit">Отправить сообщение</button> </form>
Обратите внимание: перед кнопкой я добавил два одиночных тега <br>, чтобы сделать небольшой отступ вниз и кнопка не прилипала к полям ввода. В будущем мы будем делать отступы красиво, с помощью CSS, но пока сойдет и так!
Сохраняем код, обновляем страницу в браузере... Барабанная дробь! У вас на странице появилась настоящая форма с полями, в которые можно кликнуть и что-нибудь напечатать. Попробуйте ввести текст в поле для пароля и посмотрите, как буквы превращаются в точки.
Ну что, наш проект-визитка практически готов. Пора окинуть взглядом проделанную работу и по��мотреть на всё, что мы сегодня написали, целиком.
8. Финал: Итоговый код нашей страницы
Фух! Мы проделали отличную работу. Если вы повторяли всё шаг за шагом, то в вашем редакторе VS Code сейчас должен быть собран полноценный каркас сайта.
Давайте сведем все наши кусочки пазла воедино. Если вы где-то запутались или пропустили закрывающий тег — не переживайте. Вот полный листинг того, что у нас получилось в файле index.html.
(Совет: на Хабре большие куски кода принято прятать под спойлер, чтобы поберечь колесико мышки читателей. Так и сделаем!)
Посмотреть итоговый код index.html
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Моя визитка</title> </head> <body> <header> <h1>Привет, я Алекс!</h1> <h2>Начинающий веб-разработчик</h2> </header> <main> <p>Добро пожаловать на мою первую страницу. Я еще только учусь, но уже могу написать свой <strong>первый настоящий сайт</strong>.</p> <p>Моя цель — освоить IT и найти классную работу. И я уверен, что это <em>абсолютно реально</em>!</p> <!-- Не забудьте положить картинку cat.jpg в папку с проектом! --> <img src="cat.jpg" alt="Моя фотография (на самом деле тут пушистый кот)"> <h3>Что я уже умею:</h3> <ul> <li>Создавать HTML-страницы</li> <li>Пользоваться редактором VS Code</li> <li>Отличать парные теги от одиночных</li> </ul> <h3>Мои любимые фильмы:</h3> <ol> <li>Матрица</li> <li>Интерстеллар</li> <li>Властелин колец</li> </ol> <h3>Напишите мне:</h3> <form> <p>Как вас зовут?</p> <input type="text" placeholder="Иван Иванов"> <p>Ваш Email для связи:</p> <input type="email" placeholder="example@mail.com"> <p>Секретное слово (никто не увидит):</p> <input type="password" placeholder="Тссс..."> <br><br> <button type="submit">Отправить сообщение</button> </form> </main> <footer> <hr> <!-- Тег <hr> рисует горизонтальную линию, чтобы отделить подвал --> <h3>Как со мной связаться:</h3> <p>Вы можете написать мне в <a href="">Telegram</a>.</p> </footer> </body> </html>
Сохраняем этот код, кликаем по файлу index.html два раза и смотрим на результат в браузере.
Ожидание vs Реальность
Давайте будем честны. Вы смотрите на экран и, возможно, думаете: "Эм... И это всё? Выглядит как реферат школьника из 1998 года. Где красивые шрифты? Где скругленные углы у кнопки? Почему фотка кота на пол-экрана, а текст прилип к левому краю?!"
Да, выглядит страшненько. Черный стандартный текст (скорее всего, Times New Roman) на ослепительно белом фоне, синие дефолтные ссылки и угловатые серые формы.
Но знаете что? Вы должны этим гордиться!
Потому что это — ВАШ код. Вы не скачали готовый шаблон, не использовали конструкторы вроде Tilda или Wix, где всё делается мышкой. Вы своими руками написали сырой, чистый фундамент интернета.
9. Что дальше? (Заключение)
Поздравляю! Если вы дошли до этого момента и ваш index.html работает в браузере, значит, вы только что перешли черту. Вы больше не просто потребитель контента в интернете — вы стали его создателем. Вы сделали свой первый реальный шаг в IT, и это круто!
Да, сейчас ваша страница выглядит так, будто она прилетела прямиком из 1995 года. Черный текст на белом фоне — это абсолютная норма. Как мы уже говорили в начале, HTML — это только голые бетонные стены и несущие конструкции.
Как сделать красиво? Нам нужен CSS!
Чтобы добавить на сайт современные шрифты, мягкие тени, скругленные кнопки, красивые фоны и анимации, используется CSS (Cascading Style Sheets) — каскадные таблицы стилей. Это те самые «обои и краска» для нашего дома.
С помощью CSS мы сможем сказать браузеру: «Эй, сделай так, чтобы тег <main> был шириной 800 пикселей, стоял ровно по центру экрана, текст внутри был шрифтом Roboto, а кнопка стала ярко-синей и немного увеличивалась при наведении мышки».
Анонсы новых статей, полезные материалы, а так же если в процессе у вас возникнут сложности, обсудить их или задать вопрос по этой статье можно в моём Telegram-сообществе. Смело заходите, если что-то пойдет не так, — постараемся разобраться вместе.
Удачи вам в начале этого увлекательного пути, и до встречи в мире веб-разработки!
