Html верстка что это – Как сверстать веб-страницу. Часть 1 / Habr

Содержание

HTML что такое, CSS что такое, верстка определение. Уроки верстки с нуля.

Профессия веб-программист включает в себя навыки из разных областей создания сайтов.

Настоящий профессионал всегда идет ОТ ПРОСТОГО К СЛОЖНОМУ. Не существует единого правильного стандарта, и каждый человек выбирает и адаптирует свой собственный подход в обучении программированию.

Однако есть набор практик-шагов, помогающих создать ПРОЧНЫЙ БАЗОВЫЙ ФУНДАМЕНТ, и помогает в подавляющем большинстве случаев.

НАША ПРОГРАММА ИЗ 6 ШАГОВ — КАК СТАТЬ ВЕБ-ПРОГРАММИСТОМ

1. HTML/CSS верстка

Основные HTML-теги, CSS-стили. Работа в редакторе кода SublimeText. Адаптивная верстка сайтов под мобильные устройства. Создание верстки сайта и правильной HTML-разметки для SEO.

2. Верстка на HTML/CSS-фреймворке Bootstrap

Фреймворк — это по сути конструктор, с помощью которого, вы сможете создавать верстку любого веб-сайта в разы быстрее, чем в с помощью классического HTML/CSS. Навыки работы с Bootstrap — частое требование работодателей. Подробнее

3. Язык программирования PHP и база данных MySQL

Базовый фундамент для профессионального программиста. Понимание Объектно-Ориентированного Программирования. Построение архитектуры базы данных. Безопасность сайта. Подробнее

4. Терминал Linux /контроль версий кода GIT

Работа с терминалом Linux для настройки серверов ваших сайтов. Система контроля версий кода GIT для командной работы над проектами. Синхронизация кода вашего сайта с GIT-репозиторием.

5. Создание сайта на PHP-фреймворке CodeIgniter

Аккумулируете все полученные знания и сделаете код веб-сайта масштабируемым и понятным, используя архитектуру MVC (model — view — controller). MVC даёт дополнительную гибкость в терминах повторного использования кода и разделения дизайна и реализации.

6. Язык программирования Javascript и библиотека jQuery

Как сделать сайт более оживленным и быстрым. Интеграция кода JS для живости сайта. Работа с плагинами jQuery.

Ждать не нужно когда наберется группа или наступит дата начала курса — на beONmax.com вы приступаете к обучению сразу!

Научитесь верстать — шаг 1

Азы веб-разработчика начинаются с верстки, чтобы научиться верстать вам необходимо освоить HTML и CSS.

Что такое HTML

HTML — это стандартизированный язык разметки (от англ. HyperText Markup Language), применяется для создания веб-страниц. Он обрабатывается браузером и отображается в виде документа в привычной для человека форме на экране монитора. Большинство веб-страниц содержит описание разметки на языке HTML.

Другими словами в начале работы, используя язык HTML вы РАЗМЕЧАЕТЕ, ГДЕ будут размещены элементы: заголовок, картинки, меню, текст и т.д. Эту работу можно сравнить с созданием макета-чертежа, который понятен вашему компьютеру.

Проведем аналогию.

Если вам нужно создать плакат-визитку о себе НА ЛИСТЕ БУМАГИ, то сначала, вы представите — КАК это будет выглядеть в виде составляющих элементов:

будет ли это только текст с заголовком
или вы еще разместите свою фотографию
или это будет только набор ваших фотографий
или фотографий с надписями
ваше фото будет в центре или в правом верхнем углу
будет ли текст написан в 1, 2 или 3 колонки и т.д.

Для разметки бумаги вы используете — ручку, карандаш, для веб-версии вы используете язык разметки HTML.

Что такое CSS

CSS — каскадные таблицы стилей (от англ Cascading Style Sheets). Это язык описания внешнего вида документа, написанного с помощью HTML. CSS используется для задания шрифтов, цветов, отдельных блоков и т.д.

Когда вы разметили страницу — вам хочется УВИДЕТЬ в красках свой макет на экране монитора, именно здесь используется CSS. В ней уже собраны шрифты, цвета, отдельные блоки, которыми вы наполняете свою размеченную страницу. Внося изменения в код, вы подбираете подходящие цвета, шрифты, оформление блоков.

Продолжим наш пример-аналогию с плакатом-визиткой о себе.
Наметив расположение элементов, вы переходите к ДЕТАЛЯМ: оформлением цветом, подбор шрифтов, рамочек, выбор фона и т.д.

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

Что же такое верстка?

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

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

Подведем итоги

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

Для тех, кто уже сегодня задумывается о подработке или работе на себя — узнайте об особенности этого вида заработка:

Фрилансер — кто это и как им стать? Фриланс для программиста

Умный старт в удаленной работе. Обзор бирж фриланса

Пройти полный курс HTML/CSS и освоить базовый фундамент по верстке вы можете на нашем сайте он-лайн в удобном для себя графике.

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

Мир открывает двери перед тем, кто знает, куда идет.

Ральф Эмерсон

Включайтесь и открывайте свои возможности!

С верой в ваш потенциал, команда beONmax

beonmax.com

Что такое верстка сайтов. Методы и программы

Верстка сайта — это один из этапов веб-разработки (создания сайта), в котором верстальщик превращает все необходимые будущие элементы сайта (заголовки, картинки, текст, видео) в HTML теги и сверху покрывает все CSS стилями.

HTML — это язык разметки документов в интернете. Любой сайт или Email письмо написаны с помощью него.

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

Профессия: верстальщик сайтов

Последнее десятилетие наполнено самыми разными событиями, особенно в связи с развитием информационных технологий появляются новые слова, их значения и профессии.

Если в 90-ых услышав слово «верстальщик», можно было подумать про бородатого дяденьку, который стоит за станком, то сейчас забивая в Google это слово, всплывают совсем другие значения.

Верстальщик — это специалист в области web-разработки. Его главная задача перенос макета (нарисованного дизайнером) из картинки в HTML формат. Т.е превратить картинку в код.

Верстальщик обладает знанием HTML, CSS, а также полноценным языком программирования JavaScript. Последнее не столь важно, ведь многие начинают работать в сфере web-разработки только с первыми двумя навыками, а JS учат попутно.

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

Методы верстки сайта

Существует несколько методов верстки, но здесь опишем только самые популярные.

1. Блочная верстка. Это основной метод в среде веб — разработчиков. В блочной верстке основа документа состоит из тега DIV. Большое преимущество этого метода в концепции семантической верстки.

Объясняем: в HTML существует множество тегов, и каждый предназначен для какой-то определенной цели. Например, тег NAV нужен для блока с навигацией, а тег ARTICLE отвечает за содержание новости.

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

2. Табличная верстка или пережиток прошлого. В 2000 была основным методом.

Преимущество табличной верстки в простоте исполнения. В свое время много ребят программистов учились создавать web-страницы с помощью этого метода.

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

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

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

Программы для верстки сайтов

Программ для верстки существует сотни, но внимания достойны всего лишь пара штук. При разработке сайтов мы перепробовали сотни программ, поэтому здесь составим ТОП-3 наших фаворитов. Просто название и небольшое описание. Ах да, все программы из этого списка бесплатны.

Atom

Одна из лучших программ для работы с чистым HTML и CSS. Единственный недостаток, она на английском (как и все программы в этом списке). Но он здесь такой элементарный, что Вы за 5 минут разберетесь как и что нужно нажимать. А в правом нижнем углу находится удобный переключатель между вариантами просматриваемого кода.

Смотрите CSS? переключитесь на CSS режим. И так по порядку. Когда наберетесь опыта, можете почитать про макросы и начать их устанавливать в программу. Удобная вещь, если занимаетесь версткой более одного года!

Xcode

Только для владельцев операционной системы iOS. Рекомендую ознакомиться с ней всем, у кого данная операционная система. Существуют целые видео и текстовые статьи со скрытыми возможностями данной программы.

Sublime text

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

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

vverh.studio

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

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

Книжная
Газетно-журнальная
Верстка веб-документов

Описание первых двух опустим и перейдем сразу к верстке веб-страниц. Чтобы лучше понять, что это такое рассмотрим процесс создания сайта. Сначала создают дизайн-макет: рисуют каждую страницу и все его элементы. В итоге получают изображение сайта, но это всего лишь «картинка».

Далее, полученный макет нужно отобразить в браузере, да так, чтобы все элементы «ожили» и откликались на действия пользователей. На этом этапе и вступает в работу верстальщик. Используя язык разметки html, он создает документы, которые понимает браузер и отображает их привычными всем веб-страницами.

Методы верстки

При верстке веб-страниц можно выделить два основных метода:

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

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

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

Блочная верстка является основной в среде веб-разработчиков. В блочной верстке каркас документа состоит из тегов <div>. Главным ее преимуществом является концепция семантической верстки, т. е. разделение содержимого и оформления.

Небольшой пример кода:

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

<table border=»0″ cellspacing=»0″ cellpadding=»0″>
<tr colspan=»2″>
<td colspan=»2″>Шапка</td>
</tr>
<tr>
<td>Контент</td>
<td>Меню</td>
</tr>
<tr colspan=»2″>
<td colspan=»2″>Подвал</td>
</tr>
</table>

Код блочной верстки

<div>Шапка</div>
<div>
<div>Контент</div>
<div>Меню</div>
</div>
<div>Подвал</div>

Результат получается одинаковый:

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

Программы для верстки

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

Notepad++
Macromedia Dreamweaver
Microsoft FrontPage
CoffeeCup HTML Editor
NetBeans
Coda

Редакторы html-страниц разделяют на обычные и визуальные. Используя визуальный редактор, сверстать страницу сможет даже неопытный пользователь. Но стоит понимать, что визуальный редактор дописывает много лишнего кода ( мусора) и лишает верстальщика возможности использовать гибкость языка html на 100%.

Какие проблемы возникают при верстке?

Основная проблема при верстке сайтов – не одинаковое отображение одного и того же документа в разных браузерах. Сверстав качественно страницу для Firefox, она может отображаться немного по-другому в Opera, и полностью разъехаться в Internet Explorer.

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

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

ac-u.ru

Блочная верстка или основы анатомии скелета сайтов

58.9K

Сайты тоже имеют свой скелет. Но о его особенностях спрашивать врачей бесполезно. Да и ветеринары тоже не в курсе строения сайта. Об этом ведомо лишь верстальщикам. Именно от них зависит строение скелета будущего ресурса. А главным способом создания костей его скелета является блочная верстка.

Есть в верстке сайта что-то таинственное. Но это до тех пор, пока не познакомишься с этим ремеслом поближе. Начинаем наше посвящение:

Следующим этапом разработки сайта после создания его макета является верстка. Задача верстальщика перенести с помощью html кода и таблиц css скелет будущего сайта в виртуальный мир. Проще говоря, перенести размеры и пропорции ресурса в форму, понятную для браузера.

В процессе верстки кодом html происходит разбивка «скелета» сайта на части. А с помощью css (каскадных таблиц стилей) задаются размеры его «костей», цвет и расположение.

Различают несколько видов верстки:

I. Табличная – ранее была основным способом верстки. В табличной верстке для задания структуры сайта используется тег <table> и его дочерние теги. Верстка с помощью таблиц позволяет наиболее пропорционально расположить все элементы дизайна относительно друг друга. Но в тоже время такой код получается слишком объемным:

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

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

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

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

II. Блочная – в данный момент является основным способом верстки. В отличие от табличной блочная верстка обладает рядом преимуществ:

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

Основным недостатком блочной верстки является некая «двусмысленность» понимания ее кода различными браузерами. Поэтому часто html страницы приходится «доводить» путем использования специальных хаков.

С появлением блочной верстки родилось такое понятие, как «кроссбраузерность». Из-за различия отображения одного и того же элемента в разных браузерах верстальщикам приходится вставлять в основной html целые куски кода (хаки).

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

Основным элементом, применяемым в блочной верстке, является тег <div>. Участок кода, отделенный этим тегом, называется слоем. Все стилевые решения вынесены за границы кода html в каскадные таблицы стилей. Доступ к ним осуществляется через идентификаторы или классы css:

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

Для примера возьмем вот такой макет сайта, созданный в Photoshop. Сначала в текстовом редакторе с помощью div задаем структуру будущего ресурса и присваиваем каждому слою свой селектор id. Получается такая структура:

Затем к готовой структуре сайта на html строкой <link rel=»stylesheet» type=»text/css» href=»style.css» /> прикрепляем файл css. После чего добавляем в него стилевое описание каждого слоя, позиционирование относительно других элементов и его размеры.

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

Полный код примера index.html:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Пример блочной верстки</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
 
<body>
 
<div>
	<div>
	<h3>Шапка</h3>
	</div>
		 
	<div>
	<h3>Блок навигации</h3>
	</div>
		 
	<div>
	<h3>Меню</h3>
	</div>
		 
	<div>
	<h3>Контент</h3>
	</div>
		 
	<div>
		 
	</div>
							   
	<div>
	<h3>Подвал сайта</h3>
	</div>
</div>
		 
</body>
</html>

Содержимое файла style.css:

body {
            background: #f3f2f3;
            color: #000000;
            font-family: Trebuchet MS, Arial, Times New Roman;
            font-size: 12px;
}
 
#container {
            background:#99CC99;
            margin: 30px auto;
            width: 900px;
            height: 600px;
}
 
#header {
            background: #66CCCC;
            height: 100px;
            width: 900px;
}
 
#navigation {
            background: #FF9999;
            width: 900px;
            height: 20px;
}
 
#menu {
            background: #99CC99;
            float: left;
            width: 200px;
            height: 400px;
}
 
#content {
            background: #d2d0d2;
            float: right;
 
            width: 700px;
            height: 400px;
}
 
#clear {
            clear:both;
}
 
#footer {
            background: #0066FF;
            height: 80px;
            width: 900px;
}

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

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

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

С помощью рассмотренных здесь основ блочной верстки можно легко сверстать свой сайт самостоятельно. Тогда будущий ресурс будет более родным и знакомым. Ведь в его скелете все косточки вы «перемоете» собственными руками.

www.internet-technologies.ru

Как стать верстальщиком, или Почему азы верстки должны знать все

В комментариях к одной из наших статей читатель попросил сделать подборку курсов верстки веб-страниц. Простой список ссылок на сайты реальных и виртуальных учебных заведений был бы полезным для части аудитории блога. А чтобы публикация заинтересовала всех читателей, ее тему пришлось расширить. Эта статья будет полезной:

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

Что такое HTML-верстка и зачем она нужна

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

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

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

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

В популярных CMS есть визуальные редакторы, с помощью которых можно отформатировать контент и сделать его читабельным. Обратите внимание на возможности штатного WYSIWIG-редактора WordPress.

Вы можете набирать текст непосредственно в редакторе CMS, форматировать его, добавлять фотографии. Функциональность CMS обеспечивает корректное отображение контента с небольшими оговорками.

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

В теории решить проблему можно без знаний HTML. Достаточно правильно отформатировать контент в текстовом процессоре и перенести его в визуальный редактор CMS.

Редактор CMS автоматически преобразовал визуальный формат контента в HTML-код. То есть администратору сайта для публикации контента достаточно уметь работать с текстовым процессором и WYSIWYG-редактором CMS.

Но иногда копирование содержимого из Word в CMS приводит к ошибкам. Обратите внимание на код страницы.

На практике хотя бы минимальные знания HTML контент-менеджеру нужны. Это подтверждает иллюстрация выше: в код страницы попали лишние теги подзаголовка. Такой мусор — частый побочный эффект при копировании контента из текстовых процессоров, например, Word. Подробности дальше.

«Верстальщиком можешь ты не быть, но HTML знать обязан»

Адаптированный отрывок из произведения Некрасова относится к владельцам, администраторам и контент-менеджерам сайтов. Еще раз обратите внимание на попавшие на страницу при копировании контента из MS Word лишние теги. В данном случае они прямо не влияют на пользовательский опыт: посетители страницы их не видят.

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

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

Простой пример: подзаголовки помогают поисковикам структурировать текст на смысловые блоки. Если в подзаголовке написано «Как составить файл robots.txt», поисковая система понимает, что в соответствующем разделе страницы речь пойдет о файле robots.txt.

Что случится, если подзаголовок не будет обозначен верными html-тегами? «Яндексу» и Google будет сложнее определить, о чем идет речь в соответствующем разделе страницы. Роботы могут посчитать страницу нерелевантной запросам о файле robots.txt. В результате сайт получит меньше посетителей.

Теперь понятно, почему блогеру, журналисту или сапожнику и по совместительству администратору сайта сапожной мастерской не помешает знать хотя бы основные HTML-теги? Например, эти знания могут помочь удалить «мусор» со страницы.

Большинство WYSIWIG-редакторов в CMS имеют два режима: визуальный и HTML. Чтобы найти и удалить лишние теги из кода страницы, достаточно переключить штатный редактор WordPress в режим «Текст».

Знание HTML на базовом уровне предупреждает появление на странице лишнего кода на этапе переноса контента из текстового процессора в редактор движка. Чтобы решить эту задачу, очистите созданный в Word контент от форматирования. Для этого воспользуйтесь функцией «Удалить форматирование» в текстовом редакторе или скопируйте контент и вставьте его в «Блокнот». Потом вставьте очищенный от форматирования контент в редактор CMS в формате HTML.

Разметьте контент с помощью тегов HTML и опубликуйте.

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

Что нужно знать администратору сайта, чтобы обойтись без верстальщика

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

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

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

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

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

Чтобы корректно использовать теги, вебмастер должен понимать их значение. Например, специалист должен знать разницу между заголовками второго и третьего порядка или визуально одинаковыми тегами i и em.

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

Тяжело ли научиться верстке? Где учат на верстальщика? Чем занимается данный специалист на практике? Об этом и не только читателям рассказал руководитель отдела верстки компании TexTerra Алексей Печенкин.

«Верстальщик реализует идеи дизайнера»

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

Дмитрий Дементий: Расскажите в двух словах о профессии верстальщика: чем занимаетесь вы и сотрудники вашего отдела, как организован рабочий процесс? Верстальщик — это кто: программист, технический специалист, дизайнер? Англичане и американцы называют типографских верстальщиков layout artist. Можно ли назвать HTML-верстальщика художником?

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

Д.Д.: Какие задачи решает HTML-верстка с точки зрения владельца сайта? Чем может помочь верстальщик владельцу интернет-магазина?

А.П.: Попросту говоря, верстка — воплощение идей дизайнера. На этапе разработки дизайнер прорисовывает общую структуру, внешний вид сайта, а после верстальщик все это реализует. Делается это с помощью HTML и других языков разметки, которые способен «понять» и преобразовать в привычные нам веб-страницы браузер.

Верстка новых элементов страниц, разделов, блоков, — все это тоже делают верстальщики. С помощью веб-верстки специалист создает статичную страницу, на которую при необходимости фронтэнд-программист может добавить интерактивные элементы.

Д.Д.: В большинстве популярных CMS есть визуальные редакторы публикаций. Значит ли это, что владельцы сайтов на WordPress, Drupal или Битрикс не нуждаются в услугах верстальщика?

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

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

Простой пример: штатный редактор самого популярного движка WordPress позволяет выделить отрывок текста с помощью полужирного начертания или курсива. В коде страницы можно увидеть, что выделение выполняется с помощью тегов strong и em соответственно. В некоторых случаях данную разметку предпочтительно делать с помощью тегов b и i. В визуальном редакторе WP нет таких инструментов, поэтому придется добавлять теги вручную. А это требует соответствующих знаний.

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

Д.Д.: Нужны ли с вашей точки зрения минимальные знания в области HTML-верстки маркетологам, копирайтерам, блогерам? Может ли журналист или копирайтер самостоятельно сверстать свой материал и опубликовать на сайте? Или каждый специалист должен заниматься своим делом?

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

Д.Д.: Как владелец сайта, не имеющий соответствующих знаний, может проверить качество работы верстальщика? Что для этого нужно сделать: проверить отображение страниц в разных браузерах, проверить URL или код в W3C-валидаторе, посмотреть данные об ошибках в кабинетах для вебмастеров? Как далекому от HTML-верстки человеку понять, что все сделано профессионально?

А.П.: Да, в первую очередь можно просмотреть страницы на различных разрешениях и устройствах, а также просканировать страницу в валидаторе. При плохой верстке будут сразу заметны все грубые недочеты, которые оставил верстальщик. Что касается самого кода, то тут человек без знаний никак не определит качество.

Проверить отображение страницы на экранах с разным разрешением можно с помощью сервиса Screenfly. Проверить страницу в разных браузерах можно с помощью Browsershot.

Д.Д.: Читатели интересуются возможностью обучения HTML-верстке. Каждому ли дано стать хорошим специалистом в этой области? Какие качества необходимы хорошему верстальщику?

А.П.: Да, я думаю любой может этому научиться. Главное, чтобы было желание и терпение. Если что-то не получается сразу, то нужно просто больше практиковаться. Все зависит только от вас.

Д.Д.: Где учат верстке? Это очные учебные заведения, онлайн-курсы? Можно ли научиться самостоятельно с помощью учебников и пособий?

А.П.: Есть очень много онлайн-курсов, а также различных каналов на YouTube, где люди делятся опытом, публикуют уроки и много полезной информации на эту тему. Также есть много книг по верстке. Правда, с книгами сложнее: найти действительно хорошую будет трудно.

Получить знания и научиться верстать не составит труда. Главное, больше интересоваться тематикой и практиковаться с полученными знаниями.

Д.Д.: Какой набор знаний нужен хорошему верстальщику?

А.П.: Хорошему верстальщику в первую очередь нужно следить за новостями в мире IT, за всеми новинками и технологиями, которые время от времени появляются в этой сфере, так как веб не стоит на месте. Поэтому верстальшикам приходится постоянно учиться и повышать свою квалификацию. Если говорить про базовый набор знаний, то это HTML и CSS, а также хотя бы базовые знания Javascript (Jquery).

Д.Д.: Спасибо за информацию.

А.П.: Пожалуйста. Читателям успехов в обучении.

Где можно научиться верстке

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

Обучиться веб-верстке помогут следующие ресурсы:

Онлайн-курсы для начинающих и продолжающих

Бесплатный курс «Основы HTML и CSS» от «Нетологии». Пять часовых занятий познакомят вас с азами HTML и CSS. Курс будет полезен не только для будущих верстальщиков, но и для всех специалистов, работающих в сфере интернет-маркетинга.
Бесплатный видеокурс по HTML и CSS от WebForMyself.com подойдет пользователям с любым уровнем подготовки. Его можно рассматривать в качестве первой ступени обучения для будущих верстальщиков или инструмента повышения квалификации для блогеров, журналистов или администраторов сайтов.
Онлайн-курс «Базовый HTML и CSS» от Html-academy.
Полугодовой курс «Профессиональная верстка сайтов по современным стандартам» от Geekbrains позволит вам удаленно обучиться профессии верстальщика.
Если верстка вас заинтересует, продолжить образование можно на курсе «Нетологии» «HTML-верстка: с нуля до первого макета». После получения диплома можете смело называть себя начинающим верстальщиком.

Полезные тематические сайты

Сайт htmlbook.ru. Этот информационный хаб будет полезен как для будущих и начинающих верстальщиков, так и для опытных специалистов. Данный ресурс для верстальщиков — то же самое, что «Серч» для сеошников и блог «Текстерры» для интернет-маркетологов. Обратите внимание на форум.
В блоге верстальщика Юлии Паниной вы найдете универсальные премудрости о верстке, поиске, работе с популярными CMS. К сожалению, журнал обновляется не очень часто. Но здесь опубликовано такое количество материалов по теме, которого хватит на целую книгу.
Освоили базовую информацию? Тогда развивайтесь и ищите полезную информацию на «Хабре». Куда же без этого ресурса, если вы решили стать технарем?
Css-live.ru. Этот ресурс будет полезным для дизайнеров, верстальщиков и веб-программистов.
Справочный хаб для верстальщиков от студии Артемия Лебедева.
Консорциум всемирной паутины. Эта организация занимается разработкой и валидацией интернет-стандартов. Будущим и состоявшимся верстальщикам будет полезен валидатор разметки.

Очные курсы по веб-верстке

Если вы хотите обучаться очно, запишитесь на месячный курс «Верстка для начинающих» от CubeComp Development. Занятия проходят в Москве.
Еще один очный бесплатный курс для начинающих верстальщиков предлагает учебный центр «Специалист» при МГТУ им. Н.Э. Баумана.

Найти очные курсы верстальщиков в своем городе вы сможете с помощью поисковых систем.

Книги по веб-верстке

«Изучаем HTML 5», Б.Лоусон, Р.Шарп. Вы можете приобрести эту книгу в электронном или бумажном формате.
«CSS. Каскадные таблицы стилей. Подробное руководство», Э.Мейер. Эта книга считается классикой, с которой должен ознакомиться каждый верстальщик.
«HTML и CSS. Путь к совершенству», Б.Хеник. Еще один учебник, обязательный для начинающих специалистов.
«Web-дизайн по стандартам», Д.Зельдман. Книга предназначена для специалистов, у которых есть базовые знания HTML и CSS. Она была издана более 10 лет назад, но остается актуальной.
«HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера», Николай Прохоренок.

Англоязычные ресурсы

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

W3School.com. Этот ресурс можно использовать в качестве справочника по верстке. Его можно назвать англоязычным аналогом htmlbook.ru. Зарубежные специалисты не рекомендуют использовать сайт для обучения верстке, хотя на нем есть уроки по HTML и CSS.
Learn to code HTML and CSS. Это полноценный онлайн-учебник, который поможет овладеть азами верстки.
Гайд по веб-верстке для начинающих. В этой огромной статье-руководстве от Айана Ллойда рассматриваются практически все вопросы, связанные с обучением профессии верстальщика. Вы узнаете, каким программным обеспечением лучше пользоваться, как размечать страницы, как работать с таблицами стилей и многое другое.
Activejump — сайт-тренер по HTML и CSS. Это не просто онлайн-учебник, а интерактивный курс, в рамках которого вы можете самостоятельно получить знания и сформировать умения в области верстки.
В видеоблоге Channel 9 вы найдете 21 видеоурок по HTML и CSS от разработчиков Microsoft. Курс предназначен для новичков, которые хотят стать профессионалами.
HTML5 Tutorial. Еще один сайт-учебник по верстке для начинающих.
Intro to HTML and CSS от Khan Academy. Еще один бесплатный интерактивный учебник для начинающих верстальщиков.

Вы можете выбрать один или несколько ресурсов, чтобы удаленно или очно обучиться верстке.

Стать верстальщиком может каждый

Обучиться HTML-верстке под силу каждому человеку. Если вы планируете овладеть новой профессией, придется погрузиться в мир HTML, CSS и JavaScript, следить за изменением стандартов и технологий и много практиковаться. Учиться можно очно и заочно, платно и бесплатно, с наставником или самостоятельно. Эти возможности можно реализовать с помощью предложенных выше учебных ресурсов.

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

kak-stat-verstalshchikom-ili-pochemu-azy-verstki-dolzhny-znat-vse

texterra.ru

Верстка сайта

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

Различают «резиновую» (изменяемую) и «жесткую» (фиксированную) верстку сайта. «Резиновая» верстка сайта позволяет изменять размеры элементов страницы, подстраиваясь под различные размеры и разрешения мониторов. При «жесткой» все элементы web-страницы имеют всегда одни и те же размеры, независимо от размера монитора пользователя и установленного разрешения экрана.

Этот процесс на сегодняшний день может быть выполнен множеством различных способов. Рассмотрим самые распространенные из них.

HTML-верстка сайта

Это процесс создания структуры сайта на основе языка гипертекстовой разметки HTML. В зависимости от основных элементов html выделяют табличную и блочную.

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

Блочная верстка сайта или как ее еще называют верстка div’ами – это процесс построения сайта на основе элементов divов. Данный вариант имеет ряд преимуществ: краткость кода, высокая скорость загрузки кода и т.д.

CSS-верстка сайта

Иногда выделяют в отдельный процесс, хотя в современном веб-дизайне каскадные таблицы стилей (css) используются практически при любой верстке. Каскадные таблицы стилей описывают внешний вид страниц сайта, написанных языком разметки: HTML, XHTML, XML.

Верстка с использованием css может использовать связанные стили, глобальные стили, внутренние стили. Связанные стили (таблицы связанных стилей) позволяют «отделить» код от внешнего оформления: все параметры форматирования тэгов размещаются в отдельном файле css. Достаточно лишь подключить этот файл в нужном месте web-страницы. Один и тот же файл css может быть использован для множества различных web-страниц.

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

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

Верстка должна соответствовать определенным стандартам, чтобы сайт корректно отображался в любом браузере, поддерживающем эти стандарты. Способность сайта корректно «работать» независимо от браузера, называется кроссбраузерностью. Кроссбраузерная верстка сайта – важное требование к качеству современных сайтов.

Рядом с понятием кроссбраузерности и верстки всегда стоит понятие ее валидности. Валидность – это соответствие кода всем стандартам качества, установленных для используемого на сайте языка разметки (HTML, XHTML, XML). В настоящее время множество специалистов по верстке сайтов ориентируются на стандарты w3c.

Теги:
верстка, верстка сайта, табличная верстка сайта, блочная верстка, html-верстка сайта, css-верстка сайта, резиновая верстка сайта, жесткая верстка сайта, кроссбраузерная верстка сайта

webstudio2u.net

Блочная вёрстка | htmlbook.ru

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

Первоначально слои ввела компания Netscape, включив в свой браузер поддержку тега <layer>. Этот тег позволял прятать/показывать текущее содержимое, устанавливать положение относительно окна браузера, накладывать один слой поверх других и загружать данные в содержимое слоя из файла. Все эти параметры легко менялись с помощью JavaScript и это расширяло возможности по созданию действительно динамического контента на странице. Несмотря на столь впечатляющий набор возможностей, тег <layer> не был включён в спецификацию HTML и остался лишь расширением браузера Netscape.

Однако необходимость в указанных возможностях уже назрела, и в конце 1996 года синтаксис для работы со слоями был разработан и одобрен в рабочем проекте консорциума «CSS Positioning (CSS-P)». Основная нагрузка ложилась на стили, с их помощью можно управлять видом любого элемента, в том числе менять значения динамически через JavaScript. К сожалению, объектные модели браузеров для доступа к элементам различались, поэтому приходилось писать достаточно сложный код, который бы учитывал эти особенности.

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

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

Хак — это набор приемов, когда определённому браузеру «подсовывают» код, который понимается только этим браузером, а остальными игнорируется.

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

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

Снова вернемся к слоям. Понятно, что они непосредственно связаны со стилями. Раз так, то не получается ли, что каждый элемент HTML-кода, к которому добавляются стили, является слоем? В каком-то смысле так и есть. Однако это внесло бы изрядную путаницу, если вместо «таблица» или «абзац» мы бы говорили «слой». Поэтому договоримся относить этот термин только к тегам <div>.

В HTML4 и XHTML слой — это элемент веб-страницы, созданный с помощью тега <div>, к которому применяется стилевое оформление.

Таким образом, выражение «блочная вёрстка» или вёрстка с помощью слоёв заключается в конструктивном использовании тегов <div> и стилей. При этом придерживаются следующих принципов.

Разделение содержимого и оформления

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

Активное применение тега <div>

При блочной вёрстке существенное значение уделяется универсальному тегу <div>, который выполняет множество функций. Фактически это основа, на которую «навешиваются» стили, превращая её то в игрушку, то в зверушку. Совершенно не значит, что применяется только один этот тег, нужно ведь и рисунки вставлять и оформлять текст. Но при вёрстке с помощью слоёв тег <div> является кирпичиком вёрстки, её базовым фундаментом.

Благодаря этому тегу HTML-код распадается на ряд чётких наглядных блоков, код при этом получается более компактным, чем при табличной вёрстке, к тому же поисковые системы его лучше индексируют.

Таблицы применяются только для представления табличных данных

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

Подведу итоги. В HTML4 и XHTML слой это базовый элемент вёрстки веб-страниц, при которой активно применяются стили и придерживаются спецификаций HTML и CSS. При таком подходе важная роль уделяется тегу <div>, с которым у большинства людей и ассоциируются слои. В каком-то смысле это является верным, поэтому договоримся в дальнейшем употреблять термин «слой» к тегу <div> для которого указан стилевой идентификатор или класс. Таким образом, выражение «слой с именем content» подразумевает, что используется тег <div> или <div >.

В HTML5 добавлено несколько новых тегов разметки для обозначения разных типовых блоков страницы. К примеру, <header> и <footer> используются для создания «шапки» и «подвала», <nav> для навигации, <aside> для боковой панели. Включение в спецификацию HTML подобных элементов призвано снизить доминирование тега <div> и придать больше смысла разметке. Поэтому в вёрстке на HTML5 активно применяется термин «элемент», под которым подразумевается соответствующий тег и элемент который он создаёт.

Изложенные выше принципы блочной вёрстки при этом сохраняются за исключением того момента, что <div> в некоторых случаях заменяется более осмысленными тегами.

htmlbook.ru