Верстка css: Введение в HTML | Основы современной верстки

24.09.2023 alexxlab

Содержание

Введение в 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>
<p>
  Узнаете о работе с CSS, препроцессорами, немного попрограммируете. Изучите
  Bootstrap и научитесь проверять свой код с помощью специальных утилит.
</p>

Как вы заметили, у нас может быть не один параграф. Почти все HTML-теги возможно использовать много раз на странице.

У тега параграфа есть открывающая часть

<p> и закрывающая </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> и текст внутри.

<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, не стесняйтесь поместить ее в элемент