Верстка сайта html: Как сверстать веб-страницу. Часть 1 / Хабр

Сайт 

Содержание

Верстка сайта для новичков

Какие только сайты и проекты не встречаются в поисковой выдаче: информационные ресурсы, интернет-магазины, промо страницы, лендинги. Но если вы хоть раз задумывались о веб-разработке, то наверняка знаете: для создания сайта нужны навыки и знания нескольких специалистов.

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

В современном контексте веб-разработки принято использовать два термина: 

  • Back-end – это работа с функционалом веб-ресурса.
  • Front-end – его внешнее отображение. 

Верстка сайта с нуля относится ко второму виду разработки.  

Что такое верстка сайта HTML

Как мы рассказывали выше, верстальщик получает от дизайнера картинку макет будущего сайта. Как правило, это файл в формате PSD, где каждый элемент содержится в отдельном слое. Такой формат делается в Figma или Photoshop.

JPG и GIF форматы для верстальщика не подходят, так как с упрощенными непослойными изображениями очень трудно работать. Их можно поставить на сайт, но трудно адаптировать под различные размеры экрана. 

HTML-код

Как сделать верстку сайта

  • HTML специалист “разрезает” шаблон для верстки сайта, полученный от дизайнера, на отдельные элементы.
  • Окружает каждый элемент HTML-кодом.
  • Выносит стили, подобные типы отображения элементов, в отдельные файлы.
  • Получает из файла PSD веб-страницу HTML.

Что такое HTML

Это язык разметки гипертекста. Без него невозможно представить ни один сайт, ведь браузер “понимает” только HTML-коды. Каждый оператор языка называется тегом.

Самые популярные HTML-теги, которые должны присутствовать на любом сайте

<html> – указывает на тип страницы.

<head> – ее заголовки.

<body> – показывает начало и конец контентной части страницы.

<title> – заголовок страницы, очень важный тег для SEO.

<description> – описание страницы, для SEO.

<h2>, <h3>…<h6> – заголовки в теле текста.

<img> – изображение.

<a> – ссылка.

<div> – блок.

Виды верстки

Еще несколько лет назад была популярной табличная верстка. Сейчас работа с ней считается устаревшей и неудобной. Страница сайта представлялась в виде таблицы, в которой каждая ячейка была заполнена отдельным элементом.

В настоящее время кодеры используют блочную верстку сайта на DIV. Она позволяет получить более гибкую HTML-страницу, которая может подстраиваться под любое разрешение экрана.

Блочная и табличная верстки

Что такое адаптивная верстка

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

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

В этом же контексте можно сказать о кроссбраузерности. Посетитель сайта может предпочесть один из браузеров – Google, Яндекс Браузер, FireFox, Internet Explorer и т.д. И сайты могут отображаться некорректно, так как браузеры часто по-разному видят использованные при верстке теги. Для того, чтобы этого не происходило, верстальщик проверяет отображение страницы в разных браузерах.

Валидность – что это за слово?

Валидная верстка. В ней нет ни одной ошибки, она соответствует стандарту W3C, и сайт корректно отображается на любых устройствах.

Правила валидной верстки сайта для начинающих

  • Минимальный код, никаких лишних тегов.
  • Безошибочность. Нет незакрытых тегов, лишних символов и т.п.
  • Кроссбраузерность и адаптивность.
  • Все стили вынесены в отдельный файл CSS.
  • Готовая веб-страница не отличается от файла, представленного дизайнером.
  • Минимум изображений. Все, что можно необходимо прописывать текстом.

Какими программами для верстки пользуется HTML-кодер

  • Графический редактор Photoshop – для того, чтобы “разрезать” PSD-макет.
  • Простой редактор кода Notepad++.
  • Специальные редакторы DreamWeaver, Atom, Brackets, Sublime Text, PHPStorm.
  • Цветовая пипетка ColorZilla когда необходимо определить цветовой код элемента.
  • Валидаторы для проверки верстки: validator.w3.org, jigsaw.w3.org/css-validator.
  • Сервисы для анализа адаптивности – Window Raizer, расширения для браузеров Perfect Pixel.
  • Проверка страницы на соответствие исходному макету Welldone code.

Что такое CSS 

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

Пример кода CSS. Для абзаца

предопределяются стили: зеленый цвет текста и размер шрифта 20px.

Вывод

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

Вы уже поняли, что хотите профессионально заниматься версткой? Желаем удачи в этом нелегком, но безумно интересном творческом процессе!

Табличная HTML верстка сайта: пример и применение

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

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

Вёрстка этого типа делается просто: в теле документа создаётся таблица (и ничего, кроме неё), в ячейки которой добавляется весь контент. Вёрстка потому и называется табличной, что вся страница состоит из таблиц, а вся выводимая информация находится внутри их ячеек. Даже область с основным содержимым страницы (например, со статьёй) — это всего лишь ячейка, текст из которой отображается на экране.

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

Теги для создания таблиц были рассмотрены в соответствующей статье. Ниже приведён пример их использования.

Итак, пример табличной вёрстки:

<!DOCTYPE html>
<html>
<head>
    <title>Табличная вёрстка</title>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<th colspan=2>шапка сайта (логотип, слоган, телефон)</th>
</tr>
<tr>
<th>навигация</th>
<th>заголовок</th>
</tr>
<tr>
<td>
<ul>
<li><a href="index.html" title="Ссылка 1">Ссылка 1</a></li>
<li><a href="index.html" title="Ссылка 2">Ссылка 2</a></li>
<li><a href="index.

  
 html" title="Ссылка 3">Ссылка 3</a></li>
</ul>
</td>
<td>контент</td>
</tr>
<tr>
<td colspan=2>Низ сайта (баннеры, счетчики, информация)</td>
</tr>
</table>
</body>
</html>

Если поместить этот код в тело HTML-документа и открыть получившийся файл в браузере, то страница будет выглядеть так:

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

Но взглянем на код с пояснениями.

<table border="1" cellpadding="0" cellspacing="0">
  • Тег <table> открывает таблицу.
  • Атрибут border задаёт толщину табличных рамок.
  • Cellspacing устанавливает расстояние между ячейками. В данном случае оно сделано нулевым, чтобы таблица не расползалась.
<th colspan=2>шапка сайта (логотип, слоган, телефон)</th>
  • <th> — открывающий тег ячейки заголовка таблицы. В отличие от других, текст в этой ячейке будет выровнен по центру и выделен полужирным.
  • Colspan — атрибут, значение которого определяет, сколько ячеек по горизонтали относительно других строк текущий элемент будет занимать.
  • </th> закрывает ячейку.
  • Текст между тегами <th> и </th> — это и есть содержимое ячейки, ради него всё и делалось.

</tr> — конец строки.

<th>навигация</th> <th>заголовок</th>

Я разделил 100% ширины страницы на две части: 20% отдал под блок навигации, 80% — под основной контент.

<td>
<ul>
<li><a href="index.html" title="Ссылка 1">Ссылка 1</a></li>
<li><a href="index. html" title="Ссылка 2">Ссылка 2</a></li>
<li><a href="index.html" title="Ссылка 3">Ссылка 3</a></li>
</ul>

Вёрстка блока навигации. Создаю ячейку, занимающую 20% ширины таблицы. Внутри тегов <ul>

</ul> расположен список ссылок. На его основе можно сделать меню сайта.

<tr><td colspan=2>Низ сайта (баннеры, счетчики, информация)</td></tr>

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

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

На современных сайтах практикуется блочная верстка, а таблицы уже вчерашний день.

Полезные ссылки:

  • Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
  • Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
  • Вёрстка сайта с нуля 2.0 — полноценный платный курс;
  • Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).

Научитесь создавать правильный дизайн макета страницы

TL;DR — HTML-макет представляет расположение всех элементов в документе. Это важная часть базового дизайна страницы.

Содержание
  • 1. Основные элементы макетов веб-сайтов
  • 2. Теги для использования в макете HTML
  • 3. Макет HTML: полезные советы

Основные элементы макетов веб-сайтов Хорошо сделанный HTML-макет улучшает взаимодействие с пользователем двумя важными способами:

  • Упрощает навигацию за счет разъяснения структуры
  • Делает дизайн более привлекательным

Есть четыре основных элемента, которые вы найдете практически в каждом макете страницы:

Часть Определение Метки
Заголовок Самая верхняя часть страницы (обычно вводный контент, например, логотипы) <заголовок>
Панель навигации HTML-контейнер для гиперссылок на разные части сайта <навигация>
Содержимое Основное содержание веб-страницы <артикул>, <раздел> и др.
Нижний колонтитул Самый низ страницы (обычно данные авторизации, например, информация об авторских правах) <нижний колонтитул>

Здесь вы можете увидеть простой пример дизайна макета страницы, который включает в себя различные HTML-контейнеры, простые стили и изображение:

Pros

  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features

Main Features

  • Nanodegree programs
  • Suitable for enterprises
  • Платные сертификаты об окончании

ЭКСКЛЮЗИВ: СКИДКА 75%

Pros

  • Удобная навигация
  • Никаких технических проблем
  • Seems to care about its users

Main Features

  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

AS LOW AS 12.

99$

Pros

  • Отличный пользовательский опыт
  • Предлагает качественный контент
  • Очень прозрачные цены

Основные характеристики

  • Бесплатные сертификаты об окончании
  • Ориентирован на навыки работы с данными
  • Гибкий график обучения

75% СКИДКА

Теги для использования в макете HTML


В этом разделе мы более подробно рассмотрим элементы HTML, необходимые для макета HTML примеры кода для их иллюстрации. Чтобы понять, как они используются для создания структуры страницы, обратитесь к таблице выше или просмотрите иллюстрацию справа.

Чтобы определить контейнер HTML для заголовка в верхней части макета используйте элемент

:

Пример 

 

  
Я заголовок

Попробуйте вживую. Учитесь на Udacity

Функция

может показаться похожей на функцию заголовков. Однако
определяет заголовок всего сайта , а не отдельной статьи. Он также может включать другую вводную информацию, например логотип.

Элемент

Размер экрана

Каждый класс столбца Bootstrap содержит указание размера экрана. Существует четыре размера экрана:

  • col — Столбец для очень маленьких устройств (смартфоны, менее 576 пикселей)
  • col-sm — Колонка для небольших устройств (смартфоны, 576px и выше)
  • col-md — Колонка для средних устройств (планшеты, 768px и выше)
  • col-lg — Колонка для больших устройств (настольные компьютеры, 992px и выше)
  • col-xl — Колонка для очень больших устройств (большие рабочие столы, 1200 пикселей и выше)

Указание col-sm-4 в нашем примере выше означает, что столбец шириной 4 будет отображаться на экранах размером не менее планшета.

На всех экранах меньшего размера столбцы автоматически располагаются вертикально.

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

Пример трехколоночного макета

В этом примере мы определяем три столбца.

В HTML-коде этот макет будет выглядеть так:

<дел>
  <дел>
    <дел>
      Содержимое левой колонки.
<дел> Содержимое среднего столбца.
<дел> Содержимое правой колонки.

Применение его к нашему блогу портфолио

В учебнике по HTML и CSS мы разработали портфолио со страницей блога. Следующий пример показывает двухколоночный макет для страницы блога. Левая колонка содержит список записей блога. В правом столбце теперь есть место для таких вещей, как список ссылок.

блог/index.html 
<дел>
   
Блог
 
  
Я пишу о вещах, с которыми сталкиваюсь, изучая веб-программирование.

  <дел>
    <дел>
       
Записи в блоге
 
      <ул>
        
  • Последуют другие записи...
    • 
        
  • Вторая запись
    • 
        
  • Первая запись
    • 
      
    
    <дел>
       
    Ссылки
     
        <р>
          Взгляните на следующие блоги моих друзей:
        
    
        <ул>
          
  • Блог 1
    • 
          
  • Блог 2
    • 
          
  • Блог 3
    • 
          
  • Блог 4
    •
    Пояснения