Введение. Что такое HTML

Мы будем учиться верстать сайты. Для этого нужно лишь желание, поскольку всё остальное у тебя уже есть. А именно: обычный браузер, желательно последней версии (Chrome или Firefox вполне подойдут) и любой текстовый редактор, хоть стандартный Блокнот.

Интернет-сайты состоят из HTML. HTML — это язык разметки и является не чем иным, как обычным текстом. Да, тот самый, который можно отредактировать текстовым редактором. Прямо сейчас нажми в браузере Ctrl+U и ты увидишь html-код этой страницы:

Наша задача научиться создавать html-код.

Как проходит обучение

Современная вёрстка может быть достаточно сложной, поскольку во многом направлена на построение красивого дизайна. Ты и сам видишь по современным сайтам, что многие из них используют красивое оформление, цвета, шрифты и расположение элементов. Чтобы научиться делать также нужно хорошо усвоить базовые вещи. Именно поэтому обучение построено от простого к сложному.

Я мог бы тебя «удивить» на первом же уроке, рассказав как можно раскрасить текст или блок любым цветом, или как располагать блоки во flex-сетке, но это даст только поверхностные знания.

Поэтому курс начинается с изучения основ HTML, где ты узнаешь что такое тэги и как создаётся каркас любого html-документа. Потом мы поговорим о семантике тэгов, потому что сейчас, когда сайтов миллионы, нужно не только следовать дизайну, но и грамотно размещать части документа, чтобы поисковик выдавал страницу выше в поисковой выдаче. Уже после этого мы приступим к тем самым «красотам» и будем рассматривать их принципы и практическое применение.

Если какой-то урок тебе покажется знакомым, то можешь его пролистать. Ты сам планируешь порядок прохождения курса.

Автор котика: Val Wroblewski

Что такое HTML

Полностью аббревиатура HTML переводится так: HyperText Markup Language — язык гипертекстовой разметки. Гипертекст — это система перекрёстных ссылок, наподобие энциклопедий. С помощью ссылок можно переходить с одной страницы на другую. Точно также работают и веб-сайты.

Изначально HTML создавался (автор Тим Бернерс-Ли) как язык разметки для научных статей и технической документации и в силу своей простоты, мог использоваться неподготовленными пользователями. Потом появились первые браузеры: стоит отметить Netscape, который использовал HTML для отображения Интернет страниц. Дальше пошло-поехало: язык стал развиваться и появились другие технологии, без которых сейчас немыслим ни один сайт (CSS, JavaScript и т.д.).

То есть изначально HTML создавался только для того, чтобы красиво оформить текст, а сам процесс называется вёрсткой. Это типографский термин, который точно отображает суть процесса: создание рабочей версии html-страницы согласно дизайн-макета. Поэтому тех, кто работает с HTML называют верстальщиками.

Первый html-код

Давай посмотрим как работает HTML. Для начала открой Berry Builder. Это специальный сервис, с помощью которого можно в режиме реального времени создавать html-код. Любые изменения автоматически будут отображаться в браузере.

Вставь этот текст и посмотри что получится.

<p><b>Солнечная система</b> — планетная система, включает в себя центральную звезду — <i>Солнце</i> — и все естественные космические объекты, вращающиеся вокруг Солнца. Она сформировалась путём гравитационного сжатия газопылевого облака примерно 4,57 млрд лет назад.</p>
<hr>
<p>Источник: <a href="https://ru.wikipedia.org/wiki/Солнечная_система">Википедия</a></p>

Текст содержит HTML-тэги — они заключаются в угловые скобки. Здесь мы видим несколько тэгов.

  • <p></p>
  • <b></b>
  • <i></i>
  • <a></a>
  • <hr>

Тэги бывают парные и одиночные. Тэг P — парный, поэтому он указывается два раза: начало его действия (<p>), а потом его завершение (</p>) — добавляется символ слэша /. Так устроены все парные тэги.

Тэг HR одиночный, а значит для него не нужно указывать закрывающий код.

Далее по тексту я буду указывать тэги в верхнем регистре и без угловых скобок.

Тэги имеют разное назначение. Наверное ты уже догадался, то тэг B делает текст полужирным (от слова bold), а тэг I — курсивом (от слова italic). Тэги, которые задают начертание текста часто называют тэгами форматирования — их используют ровно для того, чтобы отформатировать текст, как и в любом визуальном редакторе наподобие Word.

Есть ещё блочные тэги — в нашем примере это P — тэг абзаца (от слова paragraph). В HTML все переносы, двойные пробелы, табуляторы игнорируются, поэтому для того, чтобы вывести элемент с новой строки, нужно разместить его в блочном тэге.

Тэг A используется для создания ссылки (от слова anchor). Текст ссылки указывается между тэгами, а для URL-адреса (куда будет переход по клику) задаётся в атрибуте тэга href. Атрибутов у тэгов может быть много и как правило они указываются в виде имя="значение".

<тэг атрибут="значение" атрибут="значение" атрибут="значение">текст</тэг>

Последний тэг HR создаёт горизонтальную линию. Это одиночный тэг.

Изображение

Для изображения используется тэг IMG (от слова image). Это одиночный тэг, где атрибут src указывает на адрес изображения.

<img src="адрес изображения">

Для примера размести вот этого котика (автор wenliang chen). 

<img src="https://live.staticflickr.com/1327/560380352_5353d7b089_w.jpg">

Для изображений часто нужно указывать несколько параметров. Например так:

<img src="адрес" width="800" height="600" alt="Описание" title="Подсказка">

Ширина и высота задаются с помощью width и height — размеры указываются в пикселях. Делается это из-за того, что браузер может загрузить картинку уже после того, как будет отображен текст. Если он будет знать размеры, то сразу же зарезервирует место на странице и текст не будет «прыгать».

Атрибут alt используется для случаев, если картинка по каким-то причинам не доступна. Тогда выводится этот текст. Можно сказать, что alt фактически является обязательным атрибутом, поскольку используется в скринридерах для людей с ограниченными возможностями.

Всплывающая подсказка указывается в title — она появляется, если навести курсор мышки на изображение. Очень часто этот атрибут используется именно с изображениями, поскольку выдаёт краткое описание — подсказку. Стоит отметить, что title можно указывать у любого другого html-тэга. Например для ссылок.

Ссылки

Без ссылок не обходится ни одна html-страница, поэтому сразу узнаем как с ними работать. Адрес ссылки может быть полным, то есть начинаться с https://, либо относительным: в этом случае браузер будет использовать текущий адрес страницы и подставлять адрес ссылки.

Если адрес начинается с /, то браузер будет строить адрес относительно корня сайта. Например, пусть у нас текущая страница https://site.com/subdir/home.html. Тогда ссылка

<a href="/contact.html">Ссылка</a>

Будет указывать на адрес https://site.com/contact.html

Путь относительно текущего адреса указывается без начального слэша.

<a href="contact.html">Ссылка</a>

Она будет указывать на адрес https://site.com/subdir/contact.html.

Если нужно сослаться на адрес выше, то используется ../, что говорит браузеру использовать адрес выше текущего.

<a href="../contact.html">Ссылка</a>
Подобная схема адресации может использоваться не только с тегами ссылок, но и изображениями, стилями и т.д.

Если адрес ссылки начинается с символа #, то он указывает на (локальную) ссылку на текущей странице.

Задания

Даже если тебе кажется, что всё понятно и просто, лучше не пропускай выполнение заданий. Дело в том, что прочитать теорию глазами это не тоже самое, что и выполнить его ручками. То есть смысл заданий в том, чтобы у тебя выработался навык написания собственного кода. Только так можно научиться верстать сайты.

Практика, практика и ещё раз практика!
  • Возьми любой текст из википедии на тему космоса. Объём 3..5 абзацев.
  • Сверстай его в Berry Builder с помощью тегов P, B, I, HR.
  • Укажи ссылку на источник.
  • Размести парочку изображений с помощью IMG: адреса можно взять прямо в википедии.
  • Проверь, что удаление блочного тэга P удаляет и перенос текста.
  • Проверь, что двойные пробелы, табуляторы и многочисленные Enter в тексте будут игнорироваться браузером.
← Бесплатный HTML-курс
Устроимся поудобней →