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

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

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

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

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

Вёрстка сайта с нуля, т. е. без знания языка 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-документа — с чего начинается вёрстка сайта

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

Популярные html-теги

Если под заголовком, который задан тегом <h> необходимо разместить картинку, то в редакторе кода после этого заголовка опускаемся на следующую строку (клавиша Enter) и пишем: img + клавиша Tab.

Сразу с помощью плагина emmet автоматически подставляется конструкция элемента. Не забывайте пользоваться этой возможностью Bracketsа, когда вводите имя какого-либо тега. Получается конструкция, которая встраивает изображение в html-документ: <img src=«» alt=«»>. В кавычках проставляется значение для тега: путь к файлу, где расположена картинка и его альтернативное название.

Как только вы начнете вводить правильный путь, плагин еmmet будет показывать всплывающие подсказки. Но контролируйте в коде расширение изображения и папку, где оно находится.

Чтобы вставить фотографию в текст потребуется заполнить значения тега: <img src=«(здесь указывается путь к файлу, где хранится фото и его название с указанием формата  или полный url)». Src сокращение слова sors — источник. А затем пишется alt (от alternative) — название изображения, которое появится на странице, если фото не загрузится.

Полностью элемент будет выглядеть так:

<img src=«catalog/img1/egik.jpg» alt=«animal» width=«200» height=«200»> 

Аналогично создается и ссылка в тексте:

тег а+ Tab, и появляется конструкция элемента ссылки:

<a href=«»></a> — в кавычках указывается переход (адрес сайта или папки) по ссылке, а внутри между тегами открывающим и закрывающим вставляется текст, который будет служить ссылкой при нажатии на него. Например, визуализированный проект— сайт.

Чтобы браузер корректно отображал кавычки в записях на странице, их надо прописывать в коде html с помощью таких спецсимволов: &#171; и &#187; , а для других знаков препинания существуют свои спецсимволы.

<font> — тег позволяет задать сразу несколько значений шрифту и тексту. Все значения (они называются — атрибуты тега) указываются внутри открывающего тега через пробел. Этот тег вставляется в элемент первым, а после могут быть добавлены дополнительные теги: размер заголовка (h1), расположение на странице (center) и т. д. Закрывается элемент в обратном направлении: от последнего тега к первому.

Посмотрите пример: <font size=6 color=«red»> <h1><center>Здесь будет заголовок первого уровня, расположенный по центру страницы, размер шрифта 6, красного цвета</center></h1></font>;

Не только к заголовку, но и к параграфу тоже можно добавить тег <font>  с атрибутами (значениями), чтобы отличить его от других цветом, шрифтом, размером, регистром.

<ul> — с помощью этого тега оформляется маркированный список (или <ol> —нумерованный). Например, список характеристик товара, где каждая строчка списка начинается с тега  <li> и закрывается </li>. 

Так список оформляется в редакторе кода:

<ul >

 <li>Колючки у ёжика острые,но характер спокойный.</li>

 <li>Глазки маленькие, лапки шустрые.</li>

 <li>При касании сворачивается клубочком.</li>

</ul>

Вот что видит пользователь на странице сайта:

  • Колючки у ёжика острые,но характер спокойный.
  • Глазки маленькие, лапки шустрые.
  • При касании сворачивается клубочком.

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

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

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

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

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>

<meta charset=«UTF-8»> (указание кодировки)

<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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.