lostprophet, все правильно написал, отличные ноуты. Платформа clevo p150em, тут вам один из топовых процессоров(i7), одна из топовых видюх(7970), 16gb оперативки, full hd, отличная раздельная система охлаждения, да и гарантию ДНС на свои ноуты дает 2 года и все это за 40 тысяч.

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

Добрый день.
Хочу поделиться своими навыками в html верстке.

Оглавление:
1. Софт
2. Подготовка
3. Смотрим макет (определяемся со структурой)
4. Определяемся с <!DOCTYPE> документа
5. Начинаем (общие правила и фишки)
6. Заканчиваем


Софт
Для последующей работы нам потребуются html-редактор (поддерживающий разные кодировки (cp-1251, utf-8) ), графический редактор (понимающий формат .psd) и любимый браузер (только не IE6 ).
Из фришного можно использовать Notepad++ и GIMP, если есть деньги, то Dreamweawer и Photoshop.
Отличия первых от вторых очевидны - удобство, хотя тут на любителя. Например, в отличии от бесплатного Notepad++, у Dreamweawer есть функция автозаполнения тегов, что без сомнения, очень поможет начинающим верстальщикам, а Photoshop гораздо более удобен, логичен и дружествен к пользователю, нежели GIMP.
Также могу заметить, что у любого софта есть триальный (пробный) период, в течении которого можно опробовать тот или иной инструмент.
P.S. Хорошо это или нет, но замечу, что в нашей компании Photoshop и Dreamweawer лицензионные, хоть и покупались давно
P.S.P.S. Софт каждый желающий может использовать любой понравившийся, это не главное, не догма.

Подготовка
Итак, софт установлен, макет есть.
Включаем ненапряжную музыку, расслабляемся, курим, наливаем кофе (на выбор). Далее потребуется полная концентрация и понимание происходящего, желательно поменьше отвлекаться.
Создаем на винте папку mysite, в ней еще папку - images. Именно в папку images будем складывать наши нарезки изображений, которые будут использоваться нашей html-страничкой.
Далее переходим в html-редактор (далее показывать буду на примере Notepad++) и создаем новый документ Файл -> Новый или же просто Ctrl+N. Далее на подобных мелочах останавливаться не будем.
В Notepad++ есть хорошая функция подсветки синтаксиса для определенного языка, чем мы и воспользуемся Синтаксис -> H -> Html.
[attachment=12637:1.png]
Ничего не изменилось, но это пока.
Теперь нам нужно задать кодировку документа, выберем UTF-8(без BOM), дабы русские символы на нашей страничке отображались нормально (http://clip2net.com/s/1oskK).
Далее сохраняем документ, чтобы более об этом не задумываться Ctrl + Alt + S . Обязательно имя файла index (это имя файла, являющееся первым, открывающееся по умолчанию на сервере), обязательно выбор данных расширений файлов.
[attachment=12638:2.png]
Итак, начало положено.

Смотрим макет
Для примера я использую схематичное изображение макета, это был мой первый "экзамен" по верстке. В данной статье мы сверстаем только шапку для наглядного примера.
[attachment=12639:3.png]

, где
1 - логотип
2 - слоган
3 - контакты
4 - горизонтальное меню
5 - левый блок
6 - область контента
7 - правый блок
8 - футер, подвал
В данном макете специально не используется тест.
Для себя нужно изначально выявить группы блоков, чтобы легче было ориентироваться в струкуре кода и в самом макете. В данном примере можно увидеть, что 1,2 и 3 элементы будут относится к шапке документа, 4(меню) будет обособленным, 5,6 и 7 будут относиться к основному блоку и футер, также, как и меню будет сам по себе.
На этом пока все. Запомнили.

Определяемся с <!DOCTYPE> документа
Останавливаться на этом особо не буду, замечу только, что это очень важно. Если сказать простыми словами - это указание браузеру и валидатору как "понимать" наш код.
Использовать мы будем

Такой доктайп даст нам большую свободу действий при верстке и валидации документа.
Более подробно тут и тут .
С этим все, продолжаем далее.

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

Итого, внутри тегов <html></html> лежат 2 блока, о которых мы говорили выше, это <head></head> (служебный блок) и <body></body> (контентый блок).
Заметили, что первой строкой идет доктайп, который мы разбирали выше, а тег html обзавелся дополнительными буквами? Про буквы рассказывать особо не буду, посмотрите тут, замечу только то, что в HTML нет, в XHTML обязательны, а мы как раз верстаем xhtml.
Далее добавим в <head></head> название нашей странички (title), кодировку и метатеги keywords и description (ключи и описание)


В итоге должно получиться вот так

Отлично, с шапкой документа мы разобрались, переходим непостредственно к разметке нашего документа.
Как видно на макете, наша станичка имеет фиксированную ширину контента и он расположен посередине.
Также мы видим, что есть черный фон,
[attachment=12640:4.png]
который заполняет всю доступную ширину и высоту окна браузера (в будущем).
Далее верстать будем дивами и будем использовать такой термин как враперы (wrappers), оболочки.
Также будем использовать такие определения, как идентификаторы и классы (id и class). Они нужны чтобы задать определенное оформление тому или иному элементу на странице, будь это div, ссылка или ячейка таблицы. Основным отличием id от class является то, что одно имя id может быть ТОЛЬКО ОДНО на странице, в то время как class может повторяться несколько раз, а также свойства, указанные для id будут главнее, нежели для class.
Id и классы можно использовать вместе, что дает дополнительное удобство при верстке, например для id задаем ширину и высоту объекта, а для class - цвет и размер шрифта, который часто повторяется на странице.
Подробнее тут
Пример. Допустимая запись

Недопустимая запись

В id и class приветствуется использование понятных названий, например wrapper, left, footer, никак нельзя использовать русские символы, да и сами имена лучше называть логично, чтобы было легче разобраться потом самому или другому верстальщику, кто будет править Ваш код.

Создаем общую оболочку страницы и сразу присваиваем ей уникальный id wrapp, сразу же закрываем его (о парности и непарности тегов можно прочитать тут, о тегах вообще )
<!-- сразу комментируем окончание тега, чтоб самим видно было где и какой тег у нас закрылся -->
Этот div будет содержать всю страницу, являться оболочкой, задавать определенную ширину основному контенту сайта и выравнивать его по центру (об этом немного позже).
А далее, по логике

Все, структура нашего хедера готова, можно писать css
Два момента. Используйте табуляцию (отступы) для элементов, лежащих внутри других (родительских).
И появился <div class="clr"></div>, о котором расскажу немного позже.

Создаем наш файл css стилей. В Notepad++ Ctrl+N -> Синтаксис -> С -> CSS. Сохраняем его в ту же самую папку, где и index.html, даем название style и расширение .css
Теперь нужно указать нашему html-документу использовать этот лист стилей.
Так как он лежит в той же папке, что и сам index.html пишем в <head></head> следующую запись

Таким образом, получаем


В css для обозначения id используется символ #, для class - . (точка).
Итак, в css файле зададим черный фон для общего тега body, зададим фиксированную ширину и выравнивание по центру для id="wrapp".

где, margin: 0 auto; - выравнивание по центру для id="wrapp", а margin: 0 и padding: 0 для body - это изначальное обнуление всех отступов на странице. Попробуйте убрать эти строки и посмотрите, что получится.
Подробно на значении тегов останавливаться не буду, так как на это уйдет много времени и букв.
Далее обверстываем остальные блоки в хедере.

Остановимся на нескольких моментах.
1) #header {width: 100%; - ширина слоя с id="header" - 100%, то есть займет 100% ширины родителя (#wrapp {width: 980px;), то есть 980пикселей.
2) #logo, #slogan, #contacts { - тут я сгруппировал повторяющиеся свойства для нескольких id, такие как фон и обтекание (что такое обтекание/float читайте тут (http://htmlbook.ru/css/float))
3) margin: 20px 0 0 40px; - обозначение данной записи можно расшифровать так: начиная с вернего края div, по часовой стрелке. Верх (20px), право (0), низ (0), левый край (40px)
Возможны записи margin-left(right, top, bottom): Xpx;
4) .clr - выше я писал о появлении в html записи <div class="clr"></div>. Так вот эта запись в css как-бы обнуляет обтекание предыдущих div-ов


Заканчиваем
В итоге, у нас должна получится шапка на черном фоне, 3-мя дивами, лежащими внутри неё.

Данная статья призвана помочь новичкам влиться в верстку, понять, что не так все сложно, что немного усердия и все получится.
Для тех, кто решил заняться версткой после прочтения статьи рекомендую прочитать:
самоучитель html
самоучитель css
блочная модель

Статья написана в рамках конкурса "Новобранцы", прошу прощения за некую сумбурность, сложно систематизировать и упростить большой объем данных.

Добрый день, учусь верстке, возьмусь чтоб потренироваться, стучите 988-36ноль.

asustek,
Здравствуйте, я работаю с lostprophet'ом, делаем любые сайты, обращайтесь icq 988-360