Html css для начинающих свежие уроки. Основы CSS для начинающих. Основы HTML и CSS для начинающих

Ликбез

Резиновой вёрсткой называется вёрстка, при которой сайт масштабируется в зависимости от ширины браузера.

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

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

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

Есть две причины, почему не хотят делать «резину»: эстетическая и технологическая.

Ответ эстетам

Эстетическое «против» заключается в том, что некоторые разработчики считают фиксированную вёрстку более стабильной и потому кажущейся пользователю «родной», «уютной». Но «эмоциональное восприятие» сайта — это не то, на что должны ориентироваться разработчики интерфейсов, зачастую, оно очень субъективно.

Боремся со страхами технологов

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

Что делать с возникающими пустотами?

Существует достаточно много хорошо свёрстанных резиновых сайтов, на которых эта проблема решена. Интернет-издание «Время-н » растягивают картинки на больших разрешениях. Гугл-картинки используют блоки, перескакивающие со строки на строку при разной ширине браузера.

Как быть с широкими текстовыми блоками?

Можно использовать многоколоночную структуру. В этом случае блоки, растягиваясь, остаются читаемыми. Этот способ реализован на Ленте.ру . Но и в обычном трёхколоночном сайте можно добиться читаемости текста.

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

Схема сайта с тянущимся центральным и фиксированными боковыми столбцами.
На больших разрешения центральный столбец непропорционально растянут.

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

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

Что делать с изображениями?

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

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

Схема сайта с обрезающейся графической шапкой .

Исключения из правил

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

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

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

«Резиновая» верстка

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

Однако я не могу не рассмотреть «резиновую» верстку – создание страниц, меняющих размер в зависимости от области просмотра.

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

Можно сказать, что при большом размере экрана сайт должен занимать всю доступную область, а при маленьком размере – соответствующим образом уменьшаться. Было бы не совсем справедливо утверждать, что «резиновая» верстка пытается подстроится под всех пользователей, но у нее близкая к этому задача. Интернет представляет собой конгломерат множества систем, которые обслуживают широкие группы пользователей способами, максимально учитывающими их индивидуальные потребности. Согласитесь, что одинаковое восприятие содержания или функциональности одного и того же сайта невозможно. Почему же внешний вид должен быть одинаковым для всех? «Резиновая» верстка больше подходит для Интернета и лучше учитывает его сильные и слабые стороны, чем страницы фиксированных размеров. Как уже было отмечено ранее, чем естественнее решение, тем оно эффективнее.

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

Дизайнеры-новаторы теперь могут заниматься так называемым «отзывчивым» веб-дизайном. Итан Маркотт, его активный сторонник, утверждает, что такой подход открывает новые возможности:

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

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

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

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

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

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

Из книги Adobe InDesign CS3 автора Завгородний Владимир

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

Из книги 300 лучших программ на все случаи жизни автора Леонтьев Виталий Петрович

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

Из книги О чём не пишут в книгах по Delphi автора Григорьев А. Б.

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

Из книги HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов. автора Дронов Владимир

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

Из книги HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов автора Дронов Владимир

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

Из книги Сначала мобильные! автора Вроблевски Люк

Верстка и допечатная подготовка текста

Из книги автора

1.3.4.2. "Резиновая" линия и растровые операции Теперь нужно дать пользователю возможность рисовать линии. Для этого мы используем стандартную "резиновую" линию: пользователь нажимает левую кнопку мыши и, удерживая ее, передвигает мышь. До тех пор, пока кнопка удерживается,

Из книги автора Из книги автора

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

Из книги автора

7 Верстка ПРИНЦИПЫ ОРГАНИЗАЦИИ КОНТЕНТА и элементов интерфейса, применяемые при разработке дизайна обычных сайтов, несомненно, могут быть полезны и при проектировании мобильных веб-приложений. Но как быть уверенными в том, что эти принципы будут актуальны для любых

01.10.2013 01:04 73845

Резиновая верстка сайта (как впрочем и верстка фиксированная) начинается с создания так называемого скелета, или каркаса для дальнейшей разработка. Вообще, html верстка - конструктор. Сначала создается основной контейнер, основа которая в дальнейшем будет отвечать за минимальную и максимальную ширину всего сайта, границ. Если правильно все сделать, то изменив максимальный размер, вы практически без правок кода(а иногда вообще без них) можете увеличить максимальный размер сайта, например, с 1280px на 1360px или 1920px. Не стоит делать бесконечную резину, так как это нечитабельно на больших мониторах. Идеальным вариантом будет html верстка, включающая в себя все основные разрешения экрана, в том числе мобильные, например, резиновая верстка под разрешения экрана от 240px до 1920px.

Есть несколько видов html верстки , которая отличается визуально. Рассмотрим кратко эти виды верстки, прежде чем перейти к практическому построению каркаса:

Визуально отличающиеся виды верстки это: Резиновая верстка, фиксированная верстка, адаптивная верстка. Адаптивная верстка может сочетаться с резиновой версткой.

Особенности каждого вида верстки:
1) Фиксированная верстка - возможность основного контейнера сайта иметь одинаковую ширину независимо от разрешения монитора. Если экран меньше чем фиксированный размер основного контейнера, то появляется боковой скроллинг(прокрутка влево-вправо).

2) Резиновая верстка - возможность основного контейнера сайта растягиваться в ширину от и до указанных минимальных и максимальных размеров. Резиновая верстка может быть без указания минимального (будет не очень прилично смотреться на экранах меньше Npx, статичные объекты могут наплывать друг на друга, если не добавить адаптивности) или максимального размера, тогда она будет расширяться бесконечно (представьте себе, как будет выглядеть статья на разрешении 7000px, практически в одну строчку), поэтому хорошая html верстка всегда имеет разумные пределы. Поэтому, всегда нужно проверять результат верстки на разных разрешениях и в разных браузерах.

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

Поэтому, оптимальным вариантом на сегодняшний день будет html верстка, изначально построенная как резиновая верстка, например 980px-1920px, модернизированная до 240px с помощью адаптивной верстки. Нужно всегда помнить главное отличие:

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

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

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

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

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

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

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

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

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

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

В данном случае обращение к гражданке по ФИО и есть аналог идентификатора в html (еще говорят айди, айдишник, ID). А обращение типа уважаемые пассажиры, отправка поезда..
Будет сравнимо с классом, так как обращение идет ко всем пассажирам, без конкретного обращения.

Наличие идентификатора не запрещает использовать класс, причем одинаковое имя класса и идентификатора(ID) являются разными, и можно к такому блоку обратиться что по классу, что по id.
Например:

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

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

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

Сайдбары и футер должны находиться в исходном коде ниже чем основная часть, которую нужно выделить тегом article, указывающий поисковику основной контент. Помимо этого будем использовать теги:header, main, article, aside, footer, назначение которых, в первую очередь, показать семантическую значимость и приоритеты в структуре. Поэтому, верстка нашего пока что не резинового макета, после добавления этих тегов будет иметь такой вид:

Html код

Показать код

Верстка каркаса от сайт Шапка Каркас шаблона Для будущего сайта

контент

Левый сайдбар Правый сайдбар Футер

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

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

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

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

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

1) Если внимательно присмотреться, то футер находится за пределами основного контейнера. Это не случайно, так как такое расположение даст возможность прижать футер к низу. Думаю многие видели на сайтах футер который при любом масштабе остается внизу. И многие хотели узнать как это делается. Поэтому я по ходу объясню механизм, после чего все станет ясно.

2) Многие, увидев на сайте растягивающийся на 100% футер и хеадер, и резиновый центр, уже считают это адаптивным дизайном. Это не совсем так, адаптивность - это более широкое понятие и более совершенные трансформации, но в данном уроке это не рассматривается. Тем не менее, резиновая верстка может быть различных видов, в том числе и вышесказанного вида. Поэтому, давайте сразу модернизируем наш шаблон, чтобы в итоге шапка и футер были всегда 100%, но при этом видимая часть содержащегося в них контента была от 240px до 1920px и по центру.
Такой метод я использовал на этом сайте.

3) Поэтому, нужно добавить еще кое-что в нашу верстку, чтобы осуществить задумки, описанные во втором пункте. Итак, для того чтобы наш футер и хеадер были всегда 100% (обычно эти блоки заполняют фоном, изображениями и тд) и при этом их наполнение не выходило дальше 1920px, сделаем следующее:

1) Вынесем над обволакивающим контейнером, прямо перед body
2) Создадим несколько блоков с одинаковым классом, например, я обычно называю его.maxw, поэтому не буду отходить от своих правил. Добавим его в header и footer, и присвоим этот класс нашей основной секции с классом.section. Также добавим условие для старых версий IE, с вызовом набора правил при условии захода с IE < 9 (если такие пользователи еще есть), и специальный метатег meta name =" viewport " для корректного соотношения масштаба на устройствах типа планшет, смартфон, и тд (такие пользователи точно есть).
3) Для того чтобы управлять поведением наших блоков на разрешениях экрана ниже 980px, в самый низ файла стилей добавим правила @media, в которых и пропишем нужные изменения для определенных блоков, в нашем случае для сайдбаров. Заставим их при разрешении экрана ниже 980px перемещаться под контентную часть, и выравниваться по центру.
В результате наша html верстка будет выглядеть так:

Итоговый html код

Показать html код

Верстка каркаса от сайт Шапка Каркас шаблона Для будущего сайта

контент

Левый сайдбар Правый сайдбар Футер

Наш файл стилей будет выглядеть так:

Css код

Показать css код

* { margin: 0; padding: 0; } html { height: 100%; } header, nav, section, main, article, aside, footer { display: block; } body { height: 100%; width: 100%; background: #fefefe; } .maxw { margin: 0 auto; min-width: 240px; max-width: 1920px; } header { min-width: 240px; width: 100%; height: 220px; background: #74C9FF; } #wrapper { position: relative; margin: 0 auto; height: auto !important; height: 100%; /*min-height: 100%; - Нужно для прижатия футера к низу*/ padding: 5px 0; } .section { width: 100%; padding: 0 0 220px; position: relative; } .section:after { content: ""; clear: both; display: table; } .mainwrap { width: 100%; float: left; overflow: hidden; } main { padding: 0 240px 0 240px; min-height: 350px; margin: 0; } article { padding: 0 5px; margin: 0 5px; background: #EAF2F5; min-height: 350px; } #s_left { float: left; width: 240px; margin-left: -100%; left: 0; position: relative; background: #E88139; min-height: 350px; } #s_right { float: left; width: 240px; margin-left: -240px; right: 0; position: relative; background: #E86A3B; min-height: 350px; } footer { margin: -220px auto 0; width: 100%; min-width: 240px; height: 220px; background: #AFBFC6; position: relative; } /* Для отображения на устройствах меньше 980px*/ @media screen and (min-width:240px) and (max-width:479px) { main { padding:10px; } #s_left { padding: 0; margin: 0 auto; float: none; clear: both; left: 0; } #s_right { padding: 0; margin: 0 auto; float: none; clear: both; right: 0; } } @media screen and (min-width:480px) and (max-width:799px) { main { padding:10px; } #s_left { padding: 0; margin: 0 auto; float: none; clear: both; left: 0; } #s_right { padding: 0; margin: 0 auto; float: none; clear: both; right: 0; } } @media screen and (min-width:800px) and (max-width:979px) { main { padding:10px; } #s_left { padding: 0; margin: 0 auto; float: none; clear: both; left: 0; } #s_right { padding: 0; margin: 0 auto; float: none; clear: both; right: 0; } }

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

1) Мы вынесли header за пределы, так как в первом варианте он был внутри обволакивающего контейнера. А обволакивающий контейнер, в свою очередь, был максимум 1920px, как было сказано в самом начале. Это не дало бы возможности сделать header шириной 100%, он бы упирался в родительские 1920px. Поэтому мы убрали у обволакивающего максимальную ширину, и вынесли за его пределы, плюс создали класс.maxw , которому и назначили эти максимум 1920px и выравнивание по центру. Теперь у нас получилось, что 1920px будет у любого блока с классом.maxw. Поэтому, внутрь header и footer мы положили div контейнер с этим классом, благодаря чему все что внутри него будет находится, растянется от 240px до 1920px, и будет выравниваться по центру если разрешение больше чем 1920px. Это можно увидеть, меняя разрешение масштабом, например, ползунком в опере.

2) Футер, прижатый к низу. Это тоже важная особенность верстки. Здесь секрет заключается в следующем:
Сам футер находится за пределами обволакивающего контейнера, а тот, в свою очередь, имеет 100% высоты. Также section, который находится внутри обволакивающего, но сам обволакивает сайдбары и центральную часть, он дает отступ снизу на высоту футера с помощью padding. Это создает пустое место внизу под контентом. Так как высота 100%, а футер находится за пределами блока, он сдвинут за пределы видимости на расстояние равное его высоте. Создавая отступ снизу с помощью padding:0 0 100px мы готовим место для футера, чтобы его сдвинуть на высоту с отрицательным значением. Это даст отступ сверху в обратном порядке, а значит он сдвинется вверх на свою высоту. В итоге мы имеем отступ снизу 100px, футер сдвинутый на 100px ниже экрана, и это постоянная позиция. Когда мы даем футеру команду margin:-100px auto 0 , мы таким образом подымаем его из под низа экрана в созданную полость. В итоге имеем футер прижатый к низу экрана.

3) Резиновая верстка интересует многих, поэтому наш урок посвящен верстке сайта, точнее сказать верстке каркаса сайта, который должен иметь два сайдбара фиксированной ширины, в нашем случае это 240px, но при этом на любом экране от 240px до 1920px наш каркас должен произвольно растягиваться по ширине, причем html верстка должна понимать, что нам нужно только центральную часть растянуть, сайдбар не трогать!

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

Здесь все не так сложно как могло бы показаться на первый взгляд. Верстка css стилей, это тоже верстка, а значит подчиняется определенным правилам верстки стилей сайта.
Важную роль в этом играет отступ слева и справа, который мы прописали для тега article. Если посмотреть html код, то увидим, что есть некий контейнер с id=container, имеющий 100% ширины. Внутри него есть наш article, который имеет внутренние отступы слева и справа, padding:10px 270px. Но ширина для него не указана, а с учетом того, что он имеет display:block(мы указали для html5 элементов, чтобы они перестали быть инлайновыми), он будет на всю ширину, а не имея явной ширины, отступы внутрь будут в пределах контейнера, а не за ними. Благодаря такой комбинации мы имеем id=container, внутри которого article с отступами слева и справа по 270px. Сайдбары у нас по 240px, а по 20 на отступы от центрального article.

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

Закрывается перед левым и правым aside, таким образом они находятся под main, который уже сделал отступы слева и справа по 240px, то есть мы как и в случае с прижатым к низу футером имеем слева и справа пустое место по 240px, а сайдбары сразу под левым сайдбаром, оба. Им просто очень нравится правило по умолчанию находиться в левом верхнем углу. Учитывая что над ними находится , место слева под ним и будет являться следованию правилам. Вот такая она хитрая, эта верстка, а резиновая верстка еще хитрее. Но лекарство от этого есть, и мы как раз его и обсуждаем. Поэтому для нас это просто верстка..

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

Левый блок идет первый, поэтому дадим ему отрицательный отступ на margin-left:-100% , и он обхитрит сам себя, появившись ровно в пустом месте, которое нам приготовил article. Верстка это хорошо, резиновая верстка еще лучше, а готовая верстка, это еще лучше, особенно после долгих сражений. Поэтому контрольный выстрел в нашего оппонента под названием резиновая верстка - это сдвиг правого сайдбара на его же ширину влево. Почему влево?
Да потому что он был справа, не влез на 240px, и его сместило вниз, в левый угол, все по правилам, html тут не виноват, а css тоже с характером. Поэтому margin-left:-240px решит оставшуюся проблемку, сдвинув правый блок ровно в приготовленное пустое место справа от aside.

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

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

Резиновая верстка

Или же хорошо знакомы с HTML почерпнув необходимые знания из других источников, то настало время взяться за изучение CSS.

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

Ну и что? Спросите Вы.. Зачем мне этот пресловутый CSS? Я и HTML-ом в чистом виде неплохо обходился!

Приведу ряд доводов в пользу использования CSS:

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

Предположим, Вы написали сайт в нем 100 страниц.. хороший сайт, информативный, люди на него ходят.. И вдруг по каким либо причинам Вам понадобилось изменить его дизайн, ну не знаю, мода изменилась, Вы нашли более лучшее дизайнерское решение, заказчику пришлось не по душе.. да мало ли еще почему.. Сколько времени и сил у Вас уйдёт на то что бы полностью переделать все 100 страниц сайта? CSS предлагает разумное решение этой задачи. А что если один раз в отдельном файле полностью описать весь дизайн сайта? Допустим: все заголовки делать красным цветом, параграфы

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

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

Ну как? Заинтриговал? Если да то рекомендую перейти к непосредственному изучению CSS. В главах этого учебника Вы научитесь внедрять каскадные таблицы стилей на страницы Вашего сайта, познакомитесь с основными стилевыми свойствами элементов на примере создания сайта с использованием CSS, вникните в тонкости и хитрости дела. Если Вы уже знакомы c каскадными таблицами стилей и Вас интересует исключительно справочная информация, то предлагаю заглянуть в справочник CSS где собранны и кратко описаны свойства CSS и их возможные значения.

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

Для изучения урока, скачайте архив с необходимыми файлами .

HTML - это язык разметки документов . Правильное произношение - Эйч Ти Эм Эль .

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

Зачем, спросите вы, писать в статье, посвященной HTML о текстовых процессорах? А вот зачем. Если разобраться, что такое офисный редактор? Это приложение для редактирования и отображения документов.

Ключевое слово здесь - документ . То есть, мы создаем, редактируем и просматриваем документ в какой-то программе, в данном случае - в офисном редакторе. Если открыть такой документ в простом текстовом редакторе, например, в Блокноте, то мы увидим множество странных символов и знаков. Эта каша из символов непонятна человечеству, но понятна компьютерам. Благодаря этому внутреннему языку, документ Word приобретает определенную структуру и вид в самом редакторе, а документ предстает перед нами во всей своей красе с отформатированным текстом и картинками на своем месте.

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

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

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

Этакий Word для HTML. Такие визуальные редакторы называются:

WYSIWYG редакторы - W hat Y ou S ee I s W hat Y ou G et. То есть, если перевести на русский: что видим, то и получаем.

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

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

• Грамотный HTML код положительно влияет на поисковую оптимизацию, скорость сканирования поисковым роботом сайта. Сгенерированные вузивугой килобайты кода здесь не приемлемы и даже вредны;
• HTML код, сгенерированный WYSIWYG редактором имеет множество семантических ошибок. То есть, теги, генерируемые таким редактором используются не по назначению, там где нужно использовать, например, списки
  , редактор сгенерирует нам другой, ненужный нам тег. Зависит, конечно, от редактора, но здесь имеются ввиду комплексные решения для создания сайтов, а не простого редактирования текста в текстовой области средствами WYSIWYG.
  • Генерируется много лишних тегов и структура документа получается раздутой. Допустим, вы передвигаете элемент в такой программе сначала вправо, потом влево, потом по центру - от каждого действия остается след в исходном HTML коде. Редактор - это программа и он не может знать, что именно вы хотите получить в результате, он формирует тонны кода с учетом всех возможных вариантов поведения документа в браузере.
  • Как правило, редакторы для визуального оформления HTML кода, быстро устаревают. А ввиду отсутствия интереса со стороны профессионалов - вообще лишаются поддержки и останавливаются в развитии. А HTML развивается. Все развивается, кроме вузивуги. Соответственно, они не могут генерировать правильный и современный код, в котором были бы задействованы новые фишки и решения.
  • Поддерживать такие проекты и развивать - кара небесная. Об использовании паттернов и повторном использовании кода речи вообще быть не может.

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

  Повозившись немного с WYSIWYG редактором, юные HTML-гуру оставляют это бесперспективное занятие и двигаются дальше.

  Структура документа HTML

  Рекомендую для занятий скачать и установить редактор Sublime Text . Крайне не рекомендую использовать для HTML верстки встроенный в Windows "Блокнот", если вы не хотите сломать себе психику на ранних порах изучения HTML.

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

  Давайте создадим на компьютере первоначальный шаблон - файл index.html , откроем с помощью редактора и вставим в него следующий код:

  Заголовок Тело документа Обратите внимание, документы HTML имеют расширение .html .

  Итак, по порядку из примера.

  - тип документа (доктайп)

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

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

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

  - начало документа

  Первый тег, который мы встречаем после доктайпа, это .

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

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

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

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

  Тег

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

  содержание или другие теги

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

  Тег - заголовок документа Заголовок

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

  Метатег

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

  Фавиконка (favicon)

  Подключает к документу файл с изображением фавиконки. Фавиконка (favicon) - миниатюрный значок, отображаемый рядом с названием документа во вкладке браузера. Фавиконка - это графический файл, размером 16 x 16 (или 32 x 32) пикселей, который может иметь различные форматы, такие, как png, jpg, ico, gif. Традиционно используется формат ico. Анимированные фавиконки - это gif файлы, содержащие анимацию. Наблюдать анимированный фавикон можно, например, ВКонтакте, когда приходит новое сообщение.

  CSS стили документа

  Подключает к документу CSS файл со стилями оформления HTML.

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

  Примечание: свойство href конструкции указывает расположение внешнего файла. В нашем примере, файл style.css и favicon.ico , находятся в той-же папке, что и файл index.html . не имеет закрывающего тега.

  Тег

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

  В нашем примере подключается внешний файл script.js , который находится в той-же папке, что и основной файл index.html.

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

  Тело aka body

  Вот здесь то и начинается все самое интересное и визуально осязаемое в HTML верстке документа.

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

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

  Тег	Описание
  	Тег для создания ссылок в документе. Пример: текст ссылки Атрибут href указывает документ, на который будет вести данная ссылка.
  ,	Делает текст курсивом или жирным (акцентируемым). Пример: текст курсивом жирный (акцентируемый) текст
  , , , , ,	Заголовки документа. Всего существует 6 уровней заголовков, но на практике используются только от h1 до h4. В документе должен быть только один заголовок, выделенный тегом h1, как главный заголовок документа. Примеры: Заголовок первого уровня Заголовок второго уровня Заголовок третьего уровня ... и т. д.
  ,	Списки документа. Представляют собой нумерованный или маркированный список. Элементом такого списка является тег Примеры: Элемент маркированного списка 1 Элемент маркированного списка 2 Элемент нумерованного списка 1 Элемент нумерованного списка 2
  	Абзац. Данный тег определяет абзац текста, отбитый от остальных абзацев. Закрывать данный тег очень желательно. Пример: Внешний вид HTML разметки во многом определяется CSS стилями. Тем не менее, некоторые веб-мастера предпочитают не использовать стили на первых этапах проекта.
  	Картинка. С помощью данного тега в HTML разметку можно вставить картинку. Обязательно указывайте у всех изображений альтернативный текст - атрибут "alt". Данный тег "самозакрывающийся". Пример:
  + +	Формы и элементы ввода. Формы предназначены для ввода информации в систему на сервере. Этакая обратная связь пользователя и сайта. Например, формы используются, когда нужно отправить какое-то сообщение на сервер. Кроме того, формы могут выполнять и другие функции, но основная задача - отправка данных на сервер. Пример - простая форма отправки сообщения, в которой пользователь сайта указывает свое имя, E-mail и какой-то текст: Текст сообщения
  	Определяет подстроку в строке. Применяется для определения стиля части строки посредством CSS. Один из самых часто используемых тегов. Без оформления, ни как не проявляет себя в браузере. Пример: Изучение HTML, в большинстве случаев, не вызывает ни каких сложностей у новичков.
  ,	Теги предназначены для вставки видео и аудио в документ. Обязателен закрывающий тег. Примеры: Параметр controls говорит нам о том, что на странице должны отображаться элементы управления медиаконтентом, как в обычном аудио/видео плеере.
  	Во истину, королевский тег. Самый используемый и популярный тег в HTML разметке страницы. Это блочный элемент, предназначенн для управления блоками на сайте. Часто употребляется понятие "дивной" верстки - это значит, что все блоки на сайте сверстаны с использованием данных тегов. Может содержать другие теги . Пример: Текст во вложенном блоке Все элементы , в большинстве случаев, оформляются свойствами CSS стилей. Обязателен закрывающий тег .
  	Данный тег загружает внешнюю страницу в документ. Пример:

  Мы рассмотрели далеко не все теги, да это и не нужно на данном этапе. Главное - понять основную идею HTML, научиться использовать представленные выше теги, а потом двигаться дальше.

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

  Например, не:

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

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

  Практическое задание по HTML верстке

  Если вы еще не скачали архив с примерами, сделайте это . Для примера, можете подглядывать в файл example.html, который также находился в архиве.

• Распакуйте архив и в папке с распакованными файлами создайте файл index.html. Откройте созданный файл с помощью текстового редактора Sublime Text;
• Создайте первоначальную структуру документа с доктайпом, тегом , содержащим и и перейдите к редактированию содержимого тега ;
• Откройте файл readme.txt и выполните соответствующие задания в созданном вами файле index.html. Для проверки результата, откройте index.html в вашем любимом браузере.

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

До новых встреч, друзья!