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

Содержание

Вёрстка на HTML5 | htmlbook.ru

XHTML хорошо подходит для обучения и вырабатывания правильной манеры вёрстки благодаря своим формальным правилам и более жёсткому, по сравнению с HTML синтаксису. Однако за десять лет прошедших со дня выпуска XHTML морально устарел и уже не соответствует современным условиям. В частности, нет штатных средств для проигрывания аудио и видеороликов, нет поддержки геолокации, возможности рисовать непосредственно в браузере, не хватает некоторых элементов форм и много другого. Конечно, часть этих проблем давно решается через сторонние плагины к браузеру, например, Adobe Flash воспроизводит видео, Google Gears реализует локальные базы данных и запуск скриптов в фоновом режиме. Язык программирования JavaScript позволяет реализовать недостающий функционал форм и различные эффекты на странице. Но все эти технологии имеют определённые ограничения — плагины нужно устанавливать дополнительно, при этом они могут не работать, как Flash на iPhone и iPad, далеко не всё умеет и JavaScript.

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

W3 Consortium, разработчик спецификаций HTML и XHTML, начал работать над XHTML 2.0, в котором указанные недостатки предыдущей версии бы обходились. В результате этот проект оказался замороженным и не завершён. Обеспокоенные медленным ходом работ разработчики браузеров Safari, Firefox и Opera основали свою собственную организацию WHATWG (Web Hypertext Application Technology Working Group, Рабочая группа по разработке гипертекстовых приложений Интернета), которая подхватила упавшее знамя. Идеи W3C, современные потребности пользователей и мнения веб-разработчиков воплотились в новом языке разметки названном HTML5.

Следует понимать, что, несмотря на схожесть названий, HTML5 не является продолжением HTML4 или XHTML. Скорее речь идёт о новом языке Web Applications 1.

0, который в маркетинговых целях назван знакомой аббревиатурой и построен на базе HTML.

Официально стандарт HTML5 ещё не завершён, но современные браузеры уже умеют частично с ним работать. Итак, что же интересного нам даёт HTML5? Вот некоторые его возможности.

Поддержка геолокации — определение местоположения пользователя на карте и использование этой информации для вычисления маршрута его движения, вывода близлежащих магазинов, кинотеатров, кафе и других данных.
Воспроизведение видеороликов.
Воспроизведение аудиофайлов.
Локальное хранилище — позволяет сайтам сохранять информацию на локальном компьютере и обращаться к ней позже.
Фоновые вычисления — стандартный способ запуска JavaScript в браузере в фоновом режиме.
Оффлайновые приложения — страницы, которые могут работать при отключении Интернета.
Рисование — внутри тега <canvas> с помощью JavaScript можно рисовать фигуры, линии, создавать градиенты и трансформировать объекты на лету.
Новые элементы форм: для даты, времени, поиска, чисел, выбора цвета и др.

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

Вёрстка веб-страниц — Википедия

Информация в этой статье или некоторых её разделах устарела.

Вы можете помочь проекту, обновив её и убрав после этого данный шаблон.

Вёрстка веб-страниц – создание структуры гипертекстового документа на основе HTML-разметки, как правило, при использовании таблиц стилей и клиентских сценариев, таким образом, чтобы элементы дизайна выглядели аналогично макету

[1].

Вёрстка веб-страниц отличается от полиграфической тем, что необходимо учитывать разницу отображения элементов в различных браузерах и разницу в размерах рабочего пространства устройств^[2].

Процесс сложен и имеет творческую основу, ни один из способов не является каноничным и принятым как основа^[2]. Все подходы к вёрстке имеют как преимущества, так и недостатки.

Работы по вёрстке сайта могут быть включены в этап сборки сайта.

Тим Бернерс-Ли, работая в Европейском институте физики частиц придумал язык, который концентрировался не на средствах оформления, а на логике разметки текста. Некоторое время страницы оформлялись в так называемом «академическом дизайне», например, lib.ru

[3].

С появлением браузера Netscape ситуация изменилась. Разработчики браузера внедряли нестандартные для HTML теги, призванные улучшить внешний вид документа^[3]. Браузер был настолько распространённым, что нестандартные теги не вызывали беспокойств: нет смысла беспокоиться о том, что другие браузеры не поддерживают эти теги, когда только 10% посетителей пользуется другими браузерами^[3]. Сайты перестали разрабатываться в «академическом» стиле^[3]. Над дизайном стали задумываться, а значит, потребовалась более сложная вёрстка^[3].

С середины 1990-х MS Internet Explorer захватывал всё большую часть потребителей^[3]. Подходы разработчиков браузеров различались, отличался и набор поддерживаемых технологий^[3]. Всё это лишь добавляло неудобств для разработчиков сайтов, увеличивая время разработки сайта^[3].

Во время борьбы за рынок на смену устаревающим и плохо поддерживающим стандарты Netscape 4 и Internet Explorer 4 (IE 4) пришли пятые версии браузеров^[4]. IE 5 должна была не просто исправить ошибки предшественника, а улучшить поддержку стандартов CSS^[4]. На этот шаг Microsoft была обречена хотя бы потому, что вошла в группу W3C^[4]. В процессе разработки разница в отображении сайтов стала настолько значительной (а часть сайтов вовсе не работала), что разработчикам пришлось создать специальный «режим совместимости»^[4]. В таком режиме браузер работал «по старинке»

Верстка сайта с нуля. Верстка портфолио. Часть 3

Вы здесь: Главная — HTML — HTML 5 — Верстка сайта с нуля. Верстка портфолио. Часть 3

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

Выше галереи находится заголовок и текст, помещенные в контейнер.


<div>

<h3>Портфолио></h3>

<p>Много сплю и ем, но я гарантирую, что вы полюбите меня таким, какой я есть.</p>

</div>

со следующими стилевыми свойствами:


.container-well { 
  position: relative;

  -webkit-transition: all 1s ease; /*плавный переход между экшенами Chrome/Safari */

  -moz-transition: all 1s ease;/*переход между экшенами Firefox */

  -o-transition: all 1s ease; /*медленный переход между экшенами Opera */

  transition: all 1s ease;

}

. container-well h3{
  color:#4d4d4d; /*цвет заголовка */

  font-size: 2em; /*размер заголовка */
 
  padding-bottom: 0.5em; /*поля под заголовком */

  text-align: center; /*выравнивание заголовка по центру */

}

.container-well p{
  color:#444444; /*цвет текста */

  font-size: 1em; /*размер шрифта */

  padding-bottom: 1em; /*поле под абзацем */

  text-align: center; /*выравнивание текста по центру */

}

Под контейнером расположено меню, которое по умолчанию должно быть вертикальным:


<ul>

<li><span>Питание</span></li>

<li><span>Уход</span></li>

<li><span>Выгул</span></li>

<li><span>Здоровье/Страховка</span></li>

</ul>

Однако в макете дизайнер нарисовал горизонтальное меню, а не вертикальное, с помощью float, поставим ему свойство left и это переопределит выстраивание списков по горизонтали.


#valantin {

  width: 60%; /* ширина контейнера для всего блока меню */

  list-style: none; /* немаркированные списки  */

  margin: 2% auto;

  padding: 0;

}

#valantin li {

  float:left;

  margin-left: 17px;

}

#valantin li span {

  background:#d0a5a5;

  padding: 15px 30px; /* поля обрамляющие текст */

  text-decoration: none; /* нет подчеркивания у названий меню */

  color: #fff; /*цвет текста меню */

  text-transform:uppercase; /*трансформация букв текста в заглавные  */

  font-weight: 600; /*жирность текста */

  cursor: pointer; /*вид курсора */

}

#valantin li span:hover

{

  background:#a97b7b; /*фон при наведении меняет цвет */
 
}

#valantin li span.active {

  background:#a97b7b; /*цвет активного фона */

}

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

Как это работает, вы можете увидеть на jsfiddle.

Ниже я приведу фрагмент кода только для одной иконки.


<div>

 <div data-cat="logo">

  <div>
   <a href="#">

    <ul>

    <li>

    <div>

    <div>

    <img src="web/images/zoom-white.png"/>

    <h4>Позирую</h4>

    <p><a href="#">перед камерой</a></p>

    </div>

    </div>
 
    </li>

    </ul>

   </a>

  </div>

 </div>

</div>

Далее стилевое оформление:


#portfoliolist .portfolio {

  -webkit-box-sizing: border-box; /* контейнер для галереи с иконками */

  -moz-box-sizing: border-box;

  -o-box-sizing: border-box;

  width: 19%;

  margin: 0% 3%;

  display: none;

  float: left;

}

. portfolio-wrapper {

  overflow:hidden;

  position: relative;

  cursor:pointer;

}

.portfolio img {

  max-width:100%;

  position: relative; /* позиционирование картинки с лупой */

  opacity: 5;

  transition: all 300ms;

  -webkit-transition: all 300ms;

  -moz-transition: all 300ms;

}

Теперь разберем, как происходит собственно анимация. Содержимое блока ниже, должно вывестись на экран только после наведения курсора. До этого, его не должно быть видно. Как же достичь такого эффекта?


<div>

<img src="web/images/zoom-white.png"/>

<h4>Позирую</h4>

<p><a href="#">перед камерой</a></p>

</div>

В стилях для класса ch-info, прописываем нулевую прозрачность, то есть делаем содержимое блока с данным классом – полностью невидимым.


.ch-info {

  opacity: 0; /* Полная прозрачность элемента */

}

Зато при наведении курсора на иконку невидимые элементы становятся видимыми и имеют те свойства, которые указаны в коде для псевдокласса :hover.

Посмотреть код целиком и проверить как работает данный эффект можно на jsfiddle

Продолжение следует..

Создано 26.10.2017 12:12:02
Михаил Русаков

Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Кнопка:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>
Она выглядит вот так:
Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>
Она выглядит вот так: Как создать свой сайт
BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Способы HTML верстки | Провёрстка

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

В настоящее время можно выделить 4 способа верстки веб-страниц:

Прямая верстка
Фреймовая верстка
Табличная верстка
Блочная верстка

Прямая верстка

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

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

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

Пример:

1 – показана обычная таблица с ячейками

2 – структурный вид макета, основанного на таблице

3 – с использованием структуры 2 сделана страничка сайта (границы таблицы являются невидимыми, что позволяет использовать таблицу как фундамент страницы)

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

Чтобы проще управлять внешним видом документа (жирность слов, подчеркивание, курсив, выравнивание) были разработаны визуальные редакторы – WYSISYG инструменты (What You See Is What You Get, «что видишь, то и получишь»). К сожалению, вместо того, чтобы упростисть ситуацию визуальные редакторы, наоборот, ее усложнили – в документе появилось огромное количество избыточного кода, который стало понять еще труднее. И web-страница стала настолько сложной в понимании, что вручную ее редактировать стало практически невозможно, чтобы не разрушить код WYSISYG. Ситуацию спасла появившаяся на свет технология css (Cascading Style Sheets – каскадные таблицы стилей), при которой все визуальное оформление(жирность и цвет шрифтов и пр.) теперь находится во внешнем файле и который подключается к html странице, т.е. структура(фундамент) страницы находится в одном html файле, а визуальное оформление в другом – css файле. С появлением css появился новый блочный способ html-верстки.

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

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

При табличном подходе блок текста опишется так:

При блочной верстке тот же самый блок описывается так:

Код страницы читается легко и понятно (+ использование css позволяет вынести все оформление во внешний файл, что приводит к сокращению и легкой понимаемости самого html-кода).

Программистам работать с таким кодом очень приятно.

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

Таким образом, настоящее и ближайшее будущее за блочной версткой.

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

Фреймовая верстка

Фрейм (от англ. frame — рамка) — это отдельный, законченный HTML-документ, который вместе с другими HTML-документами может быть отображён в окне браузера.

Фреймы напоминают ячейки таблицы. В каждой такой ячейке может быть выведен отдельный html документ и они являются независимыми друг от друга. Фреймы совершенно по разному могут отображаться в разных браузерах, т.е. присутствует момент несовместимости. Использовать фреймы в современной сети можно, но не рекомендуется. Некоторые поисковые системы и каталоги отказывают в регистрации таким сайтам, где используются фреймы.

Резюме:

– Прямая верстка – использовалась в начале начал.

– Табличная верстка – громоздкая и неудобная, но простая в реализации.

– Блочная верстка – простая по структуре кода, но нуждается в определенных правилах исполнения, требует определенных навыков и является самым современным способом верстки веб-страниц.

– Фреймовая верстка – не реккомендуемый к использованию способ.

proverstka.local предлагает услуги по верстке сайта. Мы умеем делать любую из вышеописанных версток, но предпочитаем работать только с блочной.

Виды вёрстки HTML

Любому сайту, который выглядит сложнее листа формата А4 с текстом, необходим каркас. Разметка, только уже не гипертекста, а элементов страницы. Нечто вроде полок и стеллажей, на которых вы разложите всю свою информацию, текст, картинки и прочие объекты.

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

Вёрстка – процесс формирования страниц (макета) путём компоновки текстовых, графических и прочих элементов.

В сети можно встретить несколько прилагательных, употребляющихся со словом верстка:

Дивная.
Блочная.
Табличная.
Вёрстка фреймами.
Семантическая.

Стоит обратить внимание на блочную (она же дивная — от названия контейнера <div>) и табличную (<table>) верстку. Вёрстка фреймами — это атавизм. В ряде случаев его можно и стоит применять, но в современном сайтостроении этому способу отводят место в музее. Семантическая (по моему скромному разумению) — это извращенная философия, а никак не практическая реализация вёрстки. Поэтому расскажу я о табличной и блочной верстке исключительно.

У таблицы есть следующие основные конструктивные элементы (есть и второстепенные):

<THEAD> — группа рядов в шапке таблицы.
<TFOOT> — группа рядов в подвале таблицы.
<TBODY> — группы рядов, составляющих тело таблицы.
<CAPTION> — заголовок таблицы.
<COL> — столбец таблицы.
<COLGROUP> — группа столбцов.
<TR> — ряд ячеек таблицы.
<TH> — ячейка заголовка столбца.
<TD> — ячейка таблицы.

Каркас из таблицы можно построить, например, следующий:

t h e a d
t f o o t
t b o d y сайдбар	t b o d y контент

Код этого примера:

<table>
  <thead>
    <tr>
      <td colspan="2">
        <b>t h e a d</b>
      </td>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="2">
        <b>t f o o t</b>
      </td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td valign="top">
        t b o d y<br>сайдбар
      </td>
      <td valign="top">
        t b o d y<br>контент
      </td>
    </tr>
  </tbody>
</table>

<tfoot> должен следовать за <thead> и лишь потом идет <tbody>, потому что обозреватель сначала рассчитывает размер верхнего и нижнего блока сайта, а все оставшееся пространство идет под контейнер <tbody>. Шапка и подвал присутствуют в таблице в единственном экземпляре, тел может быть сколько угодно. Подробности по атрибутам и значениям смотрите в спецификации.

Блочная (div’ная) вёрстка

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

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

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

Элементы div и span в сочетании с атрибутами id и class предоставляют общий механизм для добавления структуры к документу. Эти элементы определяют содержимое как инлайн (span) или уровня блока (div), но не навязывают других идиом представления содержимого.
Спецификация HTML 4.01 в переводе Пирамидина A.

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

h e a d e r

div
сайдбар

div
контент

f o o t e r

Код этого примера:

<div>
  <div>
    <b>h e a d e r</b>
  </div>
  <div>
    div<br>сайдбар
  </div>
  <div>
    div<br>контент
  </div>
  <div>
    <b>f o o t e r</b>
  </div>
</div>

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

div { display:table; }

Ознакомьтесь с этим разделом спецификации CSS:

В заключение отмечу, что собственных атрибутов в спецификации 4-ой версии (кроме id и class) блоки не имеют. Всё управление блоками осуществляется через css-свойства. Посмотреть их можно опять же в спецификации:

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

Шаблонов макетов

Эти шаблоны макета HTML обеспечивают базовый макет, который позволяет создавать веб-сайт, «заполняя пробелы». Шаблоны совместимы с HTML5 и используют элементы, представленные в HTML5, такие как

и т.