Вёрстка сайта: инструкция для начинающих с нуля

создание сайта — вёрстка сайта — творчество

Вёрстка сайта: что это

Если говорить простым языком, то вёрстка сайта — это написание терминов, так называемого кода (шифра), на специальном языке для всем известной программы — браузера. Именно через браузер происходит выход во всемирную паутину — интернет. Можно сказать, что эта программа является нашим проводником во всемирную сеть. А для того, чтобы заготовленную идею какого-либо проекта (например, интернет-магазина или блога) с рисунками, текстом, фотографиями и т. п. опубликовать в интернете для всеобщего обозрения надо эту идею прописать на понятном для программы языке.

Вёрстка сайта с нуля, т. е. без знания языка html и css, невозможна. Но! Это знание можно получить самостоятельно максимум за два месяца, выделяя на занятия в день по 2-3 часа. Например, я прошла вполне бюджетный интенсивный курс в онлайн-университете ГикБреинс за два месяца, слушая по вечерам короткие лекции.

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

Что такое html и css

В детстве все играли в шпионов. И дети придумывали свой секретный язык, чтобы передавать сообщения друг другу понятные только им. Три звёздочки могли означать опасность. А четыре чёрточки – всё спокойно и т. п. Вот наподобие такого языка люди придумали и для общения с машинами (компьютерами). Например, для того чтобы вставить фотографию на страницу или чтобы цвет перевести в цифровой формат. Иначе как объяснить программе, что такое красный шрифт или бежевый фон страницы.

вёрстка сайта — визуализированный проект— сайт

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

Начинать изучение этих языков следует с HTML, поскольку некоторые функции оформления текста можно прописывать и на этом языке — просто вставляя определенные значения (код) непосредственно в сам текст. Изучив эти возможности, легче будет перейти к освоению CSS.

Из чего состоит язык html

Основные слова этого языка — теги и элементы.

Теги — это команды языка, его основная конструкция. Они показывают смысл элемента для браузера — заголовок это или таблица, или что-то другое. Например: здесь будет заголовок, а здесь будет таблица, а это ячейка для параметров.

Элементы — это логически завершенное предложение на языке html для вёрстки сайта. Т. е. совокупность команды (имени тега) и содержимого (например, url-адрес ссылки, текст, цифры и т. п.):

<имя тэга>Содержимое</имя тэга>.

Каждый тег заключается в скобки: <название тега (его имя)>, он открывает и закрывает элемент. В закрывающем теге перед его именем ставится слэш: </имя тега>.

Все теги в основном парные, но бывают и одиночные, которые отвечают за одиночный элемент документа. Для них не требуется закрывающей части. Они дают только команду браузеру, это пустые теги.

Например:

<meta> — мета-данные размещаются в разделе <head>: указывают браузеру какая кодировка используется для веб-страницы;
<img> — встраивает изображение в html-документ;
<hr> — горизонтальная черта: применяется при желании визуально отделить один блок на странице от другого;
<br> — перенос строки.

Но об этом ещё рано говорить. Запомните то, что одиночный тег не требует закрытия, т. е. </…>.

По каким правилам производится вёрстка сайта

Рассмотрим пример создания таблицы на языке html:

вёрстка таблицы — рис. 1: пример таблицы из 3-х строк и 3-х ячеек

Между открывающим и закрывающим тегами прописывается текст — то, что должно содержаться в заголовке или ячейках таблицы — content. Скобки и имя тега пользователь не увидит, он увидит только содержимое таблицы и рамку, если для её отображения задана соответствующая команда. Рамка, размеры и цвет прописываются на языке css.

Начнём с названия таблицы. Вот так оно пишется на языке html: <h3>Характеристики товара:</h3>

(Здесь <h3>— этот тег определяет размер заголовка, а вся конструкция — <h3>Характеристики товара:</h3> — это и есть элемент.)

На веб-странице отобразится вот такой заголовок —

Характеристики товара:

<table> — тег для создания таблицы, с него начинаем писать её код и заканчиваем этим же закрывающим тегом.

<tr> — тег создает строку таблицы (первая строка).

<td>content</td>— открывающий и закрывающий тег ячейки.

</tr> — закрывающий тег первой строки.

Если в таблице две или три ячейки, то будем прописывать два или три элемента с тегом td. И сколько в таблице строк, столько же будет раз открываться и закрываться тег tr , внутри которого располагаются теги ячеек.

Итак, начинаем кодить таблицу :

<table> — открывающий тег таблицы.

таблица на языке html — так выглядит таблица прописанная на языке html

</table> — закрывающий тег всей таблицы.

В окне браузера на веб-странице таблица отобразится без названия тегов (рис. 2).

таблица на веб-странице — рис.2 — визуализированная таблица «Характеристики товара»

Чтобы уверенно пользоваться языком html, необходимо разобраться, где и какие теги надо использовать. Их довольно много, но для создания сайта того же интернет-магазина вполне будет достаточно знать несколько десятков самых часто употребляемых элементов. Их легко найти на просторах интернета. И вёрстка сайта увлечёт с головой! Так что начинаем изучать значения тегов.

справочник тегов — пример справочника тегов html для верстки сайта с нуля

Теория процесса — вёрстка сайта

Сначала немного теории. Когда вы заходите на какой-либо сайт, вашему взору открывается единый стандарт отображения, шаблон. Что же он из себя представляет?

Он состоит из следующих блоков:

Вверху располагается шапка (header) с логотипом и меню. Здесь может быть добавлен и календарь, и фотография на всю ширину с изображением темы сайта, и заголовок.
Основное содержимое сайта (content) находится под шапкой, а по обе стороны обычно располагаются дополнительные модули и рекламные баннеры.
Нижний колонтитул (подвал или footer) — показывает обычно дополнительную информацию об авторе, счетчик посещаемости, навигацию по сайту и т. п. — то, что посчитает нужным владелец сайта.

Каждая страница сайта – это отдельный документ, написанный на языке HTML. И этот документ тоже имеет свою обязательную структуру.

Шаблон html-документа — с чего начинается вёрстка сайта

Новый документ обязательно открывается с объявления его типа — <DOСTYPE html>. Что означает — на этой странице располагается не какой-нибудь произвольный текст, а используется html-код. Это инструкция для браузера. Все термины html-документа называются тегами. DOСTYPE является первым тегом и должен находиться в первой строке каждой страницы.
Во второй строке указывается название файла и язык (english — английский): <html lang=«en»>. В конце содержимое веб-страницы закрывается, как будто оборачивается этим же тегом </html>. Все элементы, что находятся внутри этого тега являются деревом документа, а сам <html> — корневым элементом. Потому что он является своеобразным родителем для всех элементов, а они, соответственно, дочерние по отношению к нему.
Следующим идет раздел <head>, в котором содержится техническая информация о странице: тип кодировки, заголовок и подключенные файлы для оформления. Тег <head> тоже является парным , поэтому он сначала открывается, а потом закрывается — </head>. И внутри него вставляется информация о кодировке текста и title (название страницы, которое будет отображаться на вкладке в строке браузера).
Далее следует раздел <body>, где мы можем размещать всё, что захотим: текст, картинки, таблицы и др. Вот в этом разделе и ведется вся основная работа.
Закрывается документ обязательными закрывающими тегами </body> и </html>.

вёрстка сайта шаблон — Структура html-документа для вёрстки сайта

Практика вёрстки сайта на языке html

Чтобы быстро набрать данный шаблон и начать «кодить» (верстать сайт), удобно воспользоваться текстовым редактором. Например — Notepad Вrackets или VS Code. Это бесплатные редакторы кода на русском языке, интуитивно понятны и их можно скачать на соответствующих сайтах. Скажем так, текстовые документы удобно оформлять в Word, а кодить удобно в редакторе.

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

Перед началом работы в редакторе, надо создать папку, где будет находиться создаваемый проект (файл html). Можно создать её прямо на рабочем столе и назвать соответствующе. Хотя бы так: «настройка html-документа». Теперь открываем эту папку в нашем редакторе кода: через контекстное меню, щёлкнув по правой кнопке мыши и выбрав пункт “open as (название выбранного редактора, например — Brackets project)” или открыть с помощью… (название редактора).

В открывшемся окне редактора заходим в меню: Файл, Новый. Появляется в левой колонке строчка подсвеченная синим «Без названия-1». Это и будет наш документ. Сохраняем (через Файл, Сохранить как), обязательно даем имя файлу — index.html, т. к. самый первый файл, который откроет поисковая система будет index с расширением html.

Работа в редакторе кода Вrackets

Для комфортной работы в Brackets нужно установить дополнительные расширения(плагины) через «менеджер расширений» (на правой панельке редактора кода, вверху значок в виде папки).

Первым делом в поисковой строке вводим название emmet. Появляется новая строка с описанием и свойствами данного расширения, нажимаем кнопку «Установить».

Второй плагин необходим для автоматического сохранения набранного кода. Называется Auvtosave. С ним не надо беспокоиться о постоянном сохранении созданных элементов и настроек.

Третий — beautify.io — автоматически выстроит написанный код максимально эффективно и красиво для улучшения его читабельности.

Теперь вы легко и быстро напишите шаблон документа.

Создание первой страницы сайта

После установки всех плагинов и создания файла index.html, на чистом поле в любом редакторе вводим восклицательный знак и нажимаем клавишу Tab. И вуаля —всё получилось! Появилась необходимая структура-заготовка документа для дальнейшей работы. Внутри тега <title> можете задать название, которое будет отображаться на вкладке браузера. Например, название магазина. Теперь внутри тега <body> напишите любой текст (Привет, мир!) и проверьте всё ли вы правильно подключили.

Для этого зайдите в папку, которую вы создали в самом начале, кликните по значку файла index.html (обычно он отображается как иконка браузера, в котором вы работаете). Откроется новая вкладка в браузере, и вы увидите тот текст, который только что написали в редакторе: Привет, мир!

Поздравляю! Вы создали первую страницу своего сайта. Осталось наполнить её контентом — содержимым.

Не забудьте перед любой проверкой (например, как отображается картинка на странице) обновить страницу.

Теги-родители и теги-дети

Выше я упоминала, что функции оформления текста можно прописывать непосредственно в самом html-документе, не подключая язык css, но расширяя и дополняя функции тегов.

—Для создания параграфа текста используют тег <p> Этот тег парный, внутри прописывается необходимая информация, после которой ставится закрывающий тег. </p> (данное предложение написано, как пример применения такого тега).

—Для заголовков используют тег <h> (от h1 до h6 — цифра показывает заголовок какого уровня будет применён).

Текст можно приготовить заранее и потом только копировать и вставлять в редактор кода. А необходимые картинки или фотографии поместить в ту же директорию, где находится ваш файл index.html. Для них создайте новую папку внутри «настройка html-документа» — вставьте в папку проекта. Можно назвать её «catalog». Открываете её таким же образом, как и файл index.html: через контекстное меню, щёлкнув по правой кнопке мыши и выбрав пункт “open as Brackets project”.

Для стилизации (оформления) текста на языке html применяются также дополнительные теги, которые ставятся рядом с начальным тегом:

<i> — курсивный текст: <p><i>в этом параграфе текст написан курсивом</i></p>;

<b> — жирный шрифт: <p><i><b>а в этом параграфе текст написан курсивом и жирным шрифтом</b></i></p>.

К сведению:
Вложенные теги (такие, как <i> и <b>) называются дочерними, а те, в которые они вложены (например, <p>) — родителями. Элемент html — не имеет родителей и поэтому называется корневым. Он словно контейнер — в нём содержатся все остальные html-элементы. Понимание вложенности важно при изучении css.

Атрибуты тегов

Таким образом, мы подошли к определению: атрибут тега.

Это дополнительные, уточняющие параметры и их может быть несколько. Все дополнения (атрибуты) к тегу имеют значения в виде размеров, адреса, названия и т. п.

В примере с фотографией атрибутами являются:

— width и height — размеры фотографии для сайта;

— src (сокращенное sors, в переводе с английского — источник): помогает браузеру найти картинку.

— alt — альтернативный текст, будет пояснять, какое изображение должно быть на странице, если браузер не загрузит его.

Оформление страницы только на языке html

вёрстка сайта без css — Верстка сайта без применения языка css:

На этой странице присутствуют ссылки, фотография, цветной шрифт текста у заголовка и у приветствия. Это результат применения тегов и атрибутов к ним:

<a href=«»>Главная</a> — ссылки в меню на страницы Главная и Контакты (эти страницы создаются таким же образом, как и первый файл index.html);

<ul><li>Главная</li </ul> — список меню отмечен маркерами в виде точек (устанавливает это свойство тег ul), а для перехода на «Главную» страницу рядом с тегом <li> указывается ссылка с адресом этой страницы— <li><a href=«……………»></a></li>;

Заголовок Зоомаг Каталог обрёл размер, цвет и расположение по центру благодаря вложенному тегу <center> и атрибутам тега <font>: <font size=6 color=«red»> <h1><center>Зоомаг Каталог</center></h1></font>.

Текст-заголовок h2 оформлен шрифтом зеленого цвета, курсивом, по центру : <h2><color=«green»><i><center>Зоомаг Каталог</center></i></h2>

Ниже расположено фото ёжика, которое с помощью ссылки <a> и атрибута target будет открываться, при клике на него, в новом окне браузера :

Есть ещё способ добавления стилей: через присвоение класса элементу.

<p class=”text”>Текст</p>.

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

Для этого существует тег <style></style> и используется он внутри контейнера <head> (см. структуру html-документа). Но в этом способе уже используются основы языка css, поэтому плавно переходим к постижению языка css.

Синтаксис css

Что же из себя представляет синтаксис css, как верстальщик работает при создании сайта на языке css? Читаем о верстке сайта далее.

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

Пример (слева: оформление селектора — общее понятие, справа — конкретное):

Селектор { р {

Cвойство: значение; color(цвет): red;

Cвойство: значение; font-size(размер): 15px;

} }

В этом примере форматируется параграф (тег <р>), к нему, как к селектору, и применяются перечисленные в скобках параметры. Это означает, что во всех параграфах на веб-странице шрифт будет красный и размер его 15 пикселей. Цвет(color) — это свойство, а red— его значение.

Стиль может быть указан непосредственно в коде html с помощью тега <style></style> внутри тега <head> . Вот как это выглядит:

<head>

<style>

р {

color: red;

font-size(размер шрифта): 15px;

}

</style>

</head>

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

Это изображение имеет пустой атрибут alt; его имя файла - banber-1-728h90.png

Внешний файл css

Самый удобный способ — подключение внешнего файла стилей. В таком случае, все записанные стили будут применяться ко всем страницам сайта, потому что он подключается с помощью специального тега к каждой странице сайта. Этот тег — <link>, он дополняется атрибутами и помещается в разделе <head>:

Для этого в нашей директории надо создать файл css. Точно так же, как в редакторе кода мы создавали файл index.html, сontacts.html, catalog.html: через Файл, Новый, Сохранить как. Но теперь имя файла записываем с расширением css. Например, style.сss.

Подключение файла стилей в html-документ будет выглядеть примерно так:

<!DOCTYPE html>

<html>

<head>

<title>Зоомаг</title>

<link rel=«stylesheet» type=«text/css» href=«style.css»>

</head>

Где link — это ссылка на файл стилей(stylesheet), а href — это атрибут ссылки, как вы уже знаете, и в кавычках указывается полный путь к созданному файлу сss.

Для вёрстки сайта удобно видеть в редакторе кода оба файла (index.html и style.сss) одновременно. Поэтому разделим рабочее поле на две части. Заходим в Вид (на верхней панели инструментов Brackets), выбираем Horizontal Split. Теперь перед глазами и документ, и элементы, которым начинаем придавать стили.

Вёрстка сайта на языке сss и html в Brackets

скриншот интерфейса Brackets — вид интерфейса Brackets с горизонтальным разделением на веб-страницы html и css

Придадим бежевый фон всей странице:

body {

background-color: beige;

}

Оформим размеры и цвет фона шапки (header). И для логотипа(logo) зададим рамку(outline) и отступы (margin-top и margin-left).

Теперь можно стили заголовка h1 перенести в файл сss и на других страницах все заголовки этого уровня будут одинаковыми.

Обратите внимание, что обращение к селектору начинается с точки перед названием тега:

. logo или . header.

Выше оговаривалось, что тегу может присваиваться класс для группирования элементов в блоки. Например, <a class=«link» href=«….»> , <ul class=«list» > , <div class=«header»>.

Так эффективно можно ими управлять для придания стилей. Так вот, при обращении к классу элемента и ставится точка вначале. А если селектор — это имя тега (h1 или body), то обходимся без точки.

Для дальнейшего оформления веб-страницы справочники css вам в помощь, стоит только набрать соответствующий запрос в поисковике.

Вот веб-страница, уже оформленная с помощью сss. Теперь видна рамка (border) таблицы (она указана для ячеек td):

table {

width: 500px;

height: 200px;

border-collapse: collapse;

}

td {

border: 1px solid #000;

padding-left: 10px;

text-align: center;

color: green;

}

добавлен css к html — стилизованная на языке CSS веб-страница

Безусловно, рассказать в одной статье что такое вёрстка сайта невозможно. Для этого целесообразно написать полноценную книгу. Но я постаралась доходчиво объяснить для новичков с нуля про html и css простым языком.

А также мы и посмотрели вёрстку сайта на конкретном примере, и узнали, как создать сайт с нуля. Понравилась пошаговая инструкция для новичков? Я вместе с вами закрепляю материал и исправляю ошибки в оформлении своего первого пробного сайта. Продолжение готовится.

Эта статья написана мной после прохождения курса «HTML/CSS. Интерактивный курс» от GeekBrains

Благодарю эксперта Алексея Кадочникова за полученные знания и помощь в усвоении материала.

Вёрстка сайта: пошаговая инструкция для начинающих