Введение в HTML | Основы современной верстки
Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером
Видео может быть заблокировано из-за расширений браузера. В статье вы найдете решение этой проблемы.
Что такое HTML
HTML (HyperText Markup Language) — язык для разметки гипертекста, он является набором правил, по которым браузер отличает заголовки от списков, таблицы от картинок и так далее. HTML появился в 1993 году и был призван стандартизировать правила для вывода текста внутри веб-страниц.
Взгляните внимательно на страницу, на которой вы сейчас находитесь. Вся она вне зависимости от внешнего вида описана с помощью HTML. Это хорошо показывает, что какой бы сложной ни была страница, вся суть остается неизменной на протяжении более 20 лет.
Слово «язык» в HTML стоит воспринимать как правила.
Сам по себе HTML только
Вы можете попробовать открыть разметку этой страницы с помощью комбинации Ctrl + U (Cmd + Option + U на macOS).
Не пугайтесь всего того, что здесь есть. Со временем для вас это перестанет быть «магией», и вы с легкостью будете ориентироваться в HTML-разметке.
Давайте взглянем на небольшой пример HTML:
<section>
<h2>Основы верстки на Hexlet</h2>
<p>
В профессии «Верстальщик» вы изучите множество популярных технологий,
которые используют при создании верстки.
</p>
<p>
Узнаете о работе с CSS, препроцессорами, немного попрограммируете. Изучите
Bootstrap и научитесь проверять свой код с помощью специальных утилит.
</p>
</section>
Прямо сейчас может показаться непонятным, что такое <section>, <h2>, <p>.
Но сейчас самое важное то, что за всеми этими конструкциями скрывается самое главное — текстовое содержание.
Всегда ставьте контентную часть главнее визуального вида. Курсы дадут вам множество различных приемов стилизации блоков, но не увлекайтесь. Если текст на странице трудно читать, то ценность страницы стремится к нулю.
Теги в HTML
Но что же означали эти загадочные <section>, <h2> и <p>? На языке разметки они называются тегами. Именно теги оборачивают наш контент и в конечном итоге обрабатываются браузерами.
Один из таких тегов, о котором важно узнать, — параграф. Параграф, как и в реальной жизни, позволяет отделить по смыслу участки текста. Визуально это обычно делается с помощью отступов. На этой странице много параграфов, и вы можете их легко отличить друг от друга по отступам между ними.
Чтобы вставить параграф на страницу, необходимо указать специальную конструкцию </p>, между которыми вставить абзац текста.
<p> В профессии «Верстальщик» вы изучите множество популярных технологий, которые используют при создании верстки. </p> <p> Узнаете о работе с CSS, препроцессорами, немного попрограммируете. Изучите Bootstrap и научитесь проверять свой код с помощью специальных утилит. </p>
Как вы заметили, у нас может быть не один параграф. Почти все HTML-теги возможно использовать много раз на странице.
У тега параграфа есть открывающая часть </p>. Именно благодаря этому браузер понимает, где начинается параграф и где заканчивается. Такие теги называются парными.
Как можно догадаться, если есть парные теги, то есть и непарные теги. И вы не ошиблись! В процессе работы с версткой вы узнаете и о таких тегах, и об их применении. Не торопитесь 🙂
Другой ключевой концепцией, помимо тегов, является вложенность. Посмотрите еще раз на пример разметки:
<section>
<h2>Основы верстки на Hexlet</h2>
<p>
В профессии «Верстальщик» вы изучите множество популярных технологий,
которые используют при создании верстки.
</p>
<p>
Узнаете о работе с CSS, препроцессорами, немного попрограммируете. Изучите
Bootstrap и научитесь проверять свой код с помощью специальных утилит.
</p>
</section>
В этом примере есть парный тег section, и внутри него располагаются остальные теги и текст внутри них. Эта концепция является одной из основных, которая позволяет строить большие системы.
Иногда вложенность — это обязательная часть разметки текста. Например, списки невозможно построить без использования вложенности.
<ul> <li>Первый элемент списка</li> <li>Второй элемент списка</li> </ul>
Браузер выведет эту HTML-разметку следующим образом:
- Первый элемент списка
- Второй элемент списка
Без тегов <li> браузер не сможет отличить простой текст от элементов списка.
Атрибуты
Еще одна важная концепция HTML — атрибуты и их значение. Атрибуты — это просто дополнительная информация для браузера.
В HTML вы можете использовать ссылки, чтобы перемещаться по интернету. Недостаточно просто указать тег ссылки
<a>Пойти изучать программирование</a>
Браузер, к сожалению, не умеет читать наши мысли и перенаправлять пользователя туда, куда мы хотели 🙁
Чтобы перенаправить пользователя, мы должны помочь браузеру и указать, куда пользователь переместится после клика на ссылку. Для этого используется атрибут href, значением которого является нужная ссылка.
<a href="https://ru.hexlet.io">Пойти изучать программирование</a>
Теперь при клике на ссылку пользователя успешно перенаправит по тому адресу, который мы указали внутри атрибута href.
Общая схема тегов HTML
Дополнительное задание
Воспользуйтесь любым онлайн-сервисом, который умеет преобразовывать HTML разметку. Например, https://htmlcodeeditor.com/.
Вставьте в левую область следующую разметку:
<h2>Хорошие книги</h2> <p>Советую прочитать эти книги:</p> <ol> <li><b>Код.
Тайный язык информатики</b> <i>(Чарльз Петцольд)</i></li>
<li>
<b>Не заставляйте меня думать</b>
<i>(<a href="https://en.wikipedia.org/wiki/Steve_Krug">Steve Krug</a>)</i>
</li>
<li><b>Дизайн привычных вещей</b> <i>(Donald Norman)</i></li>
</ol>
Посмотрите на итоговый результат. Попробуйте удалять различные теги и менять их. Экспериментируйте, никто за это не наругает 🙂
Дополнительные материалы
- HTML Теги — HTML Basics: Урок 1
- HTML Атрибуты — HTML Basics: Урок 2
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты
Об обучении на Хекслете
Вёрстка | WebReference
Использование псевдоэлементов ::after и ::before является одним из самых популярных приёмов при вёрстке фрагментов веб-страниц и их стилизации. С их помощью можно выводить произвольный текст, добавлять тени, треугольники, линии и др.
Практически любая веб-страница содержит множество похожих компонентов, которые встречаются и на других сайтах. Это меню, навигация, элементы форм, заголовки и колонки. Чтобы меньше писать кода и по максимуму задействовать уже готовые решения применяются специализированные библиотеки, их часто называют фреймворками. Одним из таких фреймворков для вёрстки является Bootstrap.
Font Awesome — это шрифт с иконками, которые могут добавляться к любым элементам веб-страницы, чтобы повысить их наглядность и улучшить дизайн. Разработчик Дэйв Ганди собрал впечатляющую коллекцию из несколько сотен иконок подходящих под любые задачи.
HTML (HyperText Markup Language, язык разметки гипертекста) — это прежде всего система вёрстки, которая определяет, как и какие элементы должны располагаться на веб-странице. Информация на сайте, способ её представления и оформления зависят исключительно от разработчика и тех целей, которые он перед собой ставит.
Less — это препроцессор CSS, позволяющий использовать переменные, функции, циклы и другие технологии для упрощения работы со стилями.
Препроцессор в данном случае означает, что мы имеем дело с динамическим языком стилей, который преобразуется в CSS. Таким образом, на выходе получаем стандартный стилевой файл.
В CSS нет функций, нет повторяющихся фрагментов кода, в общем, нет ничего, что характерно для любого языка программирования и облегчения работы. На помощь приходят препроцессоры CSS, одним из них как раз и является Sass (Syntactically Awesome Stylesheets). Sass это особый метаязык, похожий на CSS, который поддерживает множество возможностей необходимых для работы со стилями.
Вёрстка с помощью flexbox, официально называемая CSS Flexible Box Layout Module, представляет собой новый модуль компоновки в CSS3, предназначенный для улучшения выравнивания, направления и порядка элементов в контейнере, даже если они имеют динамический или неизвестный размер. Главной характеристикой flex-контейнера является способность менять ширину или высоту дочерних элементов, чтобы наиболее оптимально заполнить доступное пространство при разных размерах экрана.
Это книга о создании сайтов на HTML5 и CSS для самых новичков. Цель этой книги — рассказать об искусстве создания сайтов простым языком, полным практических аналогий. После прочтения свыше 100 печатных страниц вы освоите основные понятия и методы веб-разработки и будете в состоянии сделать свой первый сайт!
CSS запутан. Мы все любим его, но он запутанный. Я сравниваю его с английским языком: есть куча правил и вы можете узнать их. Но иногда гораздо лучше просто попробовать всякую гадость и увидеть, что работает, а что нет. Магия — это упорядочивание того, что я узнал из этого сумасшедшего процесса.
Погружение в HTML5 основано на фишках, вручную отобранных из спецификации HTML5 и других замечательных стандартов.
Продвинутые уроки по HTML и CSS — это более глубокий взгляд на фронтенд-разработку, уроки, которые расширяют знания, полученные в руководстве для начинающих. Посвящённое современной фронтенд-разработке, это руководство учит последним веб-технологиям и совершенствует ваши профессиональные навыки.
Псевдокласс :checked определяет, помечен флажок (<input type=»checkbox»>), переключатель (<input type=»radio»>) или пункт списка (<option>), соответственно, применяет стиль только к помеченному элементу формы. С помощью :checked можно стилизовать поля формы, создавать вкладки, меню, галерею изображений и др.
Псевдокласс :focus определяет стиль элемента, когда он получает фокус, иными словами, становится активным для взаимодействия. К примеру, при получении фокуса в текстовом поле можно набирать текст, на мобильных устройствах включается экранная клавиатура.
Фокус могут получить не все элементы, а только ссылки, кнопки, поля формы. Именно к ним в стилях и следует добавлять :focus, для остальных элементов это не даст видимого результата.
Псевдокласс :hover определяет стиль элемента при наведении на него курсора мыши. Это один из самых самых популярных псевдоклассов, поскольку простыми методами позволяет создать разные эффекты и привлечь внимание к элементам интерфейса.
К примеру, с помощью :hover можно менять цвет ссылок, создавать всплывающие подсказки, меню, увеличивать изображения и др.
Bootstrap 4 капитально переработал Bootstrap 3 и многое поменял в его функционировании. Множество изменений было внесено в компоненты, таких как таблицы, формы, сетки, выпадающие списки, панели навигации и многое другое.
Флексбоксы (Flexbox, от flexible box — гибкие блоки) дают веб-разработчикам контроль над расположением элементов, их выравниванием и размерами внутри контейнера.
Стилевое свойство clip-path — это способ отказаться от однообразных прямоугольных макетов, традиционно ассоциируемых с плоским, адаптивным дизайном. Вы станете думать не только о прямоугольниках, на ваших страницах они буквально начнут принимать форму шестиугольников, звёзд и восьмиугольников.
Структурные псевдоклассы позволяют выбрать элементы, основываясь на их положении в дереве документа и отношении к другим элементам. К примеру, :first-child выбирает первый элемент в группе братских элементов, т.
е., имеющих одного родителя.
«Уроки по HTML и CSS» являются простым и полным руководством, целью которого служит помощь начинающим при обучении HTML и CSS. Излагая основы, это руководство проходит через все основные этапы проектирования и разработки.
Основы понимания макета — Изучите веб-разработку
- Предыдущий
- Обзор: макет CSS
Если вы работали с этим модулем, значит, вы уже ознакомились с основами того, что вам нужно знать для создания макета CSS сегодня, а также для работы с более старыми CSS. Это задание проверит ваши знания путем разработки простого макета веб-страницы с использованием различных методов.
| Предпосылки: | Прежде чем приступать к этой оценке, вы должны были уже проработать все статьи этого модуля. |
|---|---|
| Цель: | Для проверки понимания методов компоновки CSS с использованием Flexbox, Grid, Floating и Positioning. |
Вы можете скачать HTML, CSS и набор из шести изображений здесь.
Сохраните документ HTML и таблицу стилей в каталоге на вашем компьютере и добавьте изображения в папку с именем изображений . При открытии файла index.html в браузере вы должны увидеть страницу с базовым стилем, но без макета, которая должна выглядеть примерно так, как показано на рисунке ниже.
Эта начальная точка содержит все содержимое макета, отображаемое браузером в обычном режиме.
В качестве альтернативы вы можете использовать такой сайт, как Glitch, чтобы провести оценку, вставив HTML и CSS. Обратите внимание, что если вы используете онлайн-редактор, вам нужно будет загрузить изображения и заменить значения в src атрибуты, чтобы указать на новые местоположения изображений. Если в используемом вами онлайн-редакторе нет отдельной панели CSS, не стесняйтесь поместить ее в элемент