Готовые сайты на html – Скачать бесплатные HTML шаблоны сайтов

Содержание

50 Бесплатных Шаблонов Сайтов на HTML5 и CSS3

Свежие бесплатные шаблоны сайтов 2017 г. на HTML5 и CSS3. Любой шаблон html5 css3 можно скачать как для личного пользования, так и для коммерческих проектов. Тематика шаблонов самая разная. Здесь и шаблоны портфолио, шаблоны корпоративных сайтов, лендинги (целевые страницы), шаблоны сайтов услуг, шаблоны блогов и фотогалерей. См. также HTML шаблоны на русском.

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

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

Стильные шаблоны сайтов html5 — это то, что вам нужно!

Обновлено 12.03.2019: Так как статья была написана 2 года назад, то многие ссылки стали битыми. Либо владельцы шаблонов слились, либо поменяли статус шаблонов с бесплатных на платные, либо инопланетяне все похерили. Просьба к вам, уважаемые читатели, если нашли такую ссылку, киньте в комментах, я поправлю.

1. Snow — бесплатный шаблон лендинга на HTML5 и CSS3

Шаблон html5 css3 целевой страницы Snow построен на фреймворке Bootstrap. Шаблон очень стильный и классный! Фиксированный фон и громадный Jumbotron — штука, которая показывает главное содержимое сайта. А что на лендинге самое главное? Правильно, призыв к действию. Естественно, шаблон полностью адаптирован под мобильные устройства. Вы можете использовать его даже в качестве основы для собственных шаблонов.

2. Sima — шикарный коммерческий шаблон сайта

Этот шаблон html5 css3 также построен на фреймворке Bootstrap. Вы можете создать на этом шаблоне уникальный сайт с портфолио, вашей командой, ценами, отзывами и всем другим, что будет необходимо. Например, отлично подойдет этот шаблон для сайта клининговых услуг. Анимация в этом шаблоне плавная и эффектная, чистые и хорошо читаемые шрифты. Просто идеальный шаблон!

3. White — прекрасный шаблон одностраничника!

Отличительная особенность шаблона сайта White — два варианта фона в верхней части. На ваш выбор либо слайдер с картинками, либо видео фон. Очень качественный и эффектный шаблон для сайта!

4. Platz — бесплатный HTML5 шаблон сайта на основе сетки

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

5. Mart eCommerce — прекрасный HTML5 и CSS3 шаблон сайта для электронной коммерции

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

6. Nava — эффектный HTML5 и CSS3 шаблон для творческих сайтов

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

7. Box Portfolio — уникальный творческий шаблон сайта на HTML5 и CSS3

Шаблон сайта Box Portfolio обладает чистым и современным минималистичным дизайном. Отлично подойдет для профессионалов, желающих эффектно показать свои работы в сети. Как следует из названия, шаблон сайта идеально заточен под портфолио.

8. Mountain King — популярный и функциональный HTML5 и CSS3 шаблон сайта

Горная тема в дизайне сайтов очень популярна в последнее время. Шаблон сайта Mountain King не исключение. Включает 336 векторных иконок от Typicons. Плюс великолепная анимация на CSS3. Шаблон отлично подойдет для сайтов о путешествиях и портфолио.

9. Beauty Spa — классный шаблон сайта на HTML5 и CSS3 для спа-салонов

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

10. Bent – стильный и эффектный лендинг для сайтов на HTML5 и CSS3

Bent — великолепный бесплатный шаблон сайта на html5 и css3. Отзывчивый дизайн, CSS3 анимация, параллакс прокрутка, настраиваемая навигации и прочие вкусняшки. Это чистый дизайн шаблона для сайтов, которые хотят использовать сбалансированную конструкцию, чтобы гарантировать, что посетители будут наслаждаться внешним видом сайта, и в то же время четко видеть его основное содержание.

11. Triangle — бесплатный отзывчивый многоцелевой шаблон на HTML5 и CSS3

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

12. Future Imperfect — блестящий шаблон сайта для творческих людей!

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

13. Bodo — прекрасный шаблон для персонального сайта

Bodo — красивый шаблон сайта на HTML5 и CSS3, который идеально подходит для персонального сайта. Особенно для организации портфолио. Чистая и четкая типографика, карусельный слайдер, всплывающие popup окна для показа работ и многое другое.

14. Lens — идеальный HTML5 шаблон сайта для фотографов

Фотографы всегда ищут идеальный шаблон для своего сайта, чтобы показать работы во всей красе, эффектно и самое главное — крупно! Редкий шаблон сайта отвечает этим требованиям. Lens — один из таких шаблонов сайта фотографа.

15. Spectral — уникальный шаблон сайта ручной работы на HTML5 и CSS3

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

16. Oxygen — одностраничный HTML5 и CSS3 шаблон сайта

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

17. Mobirise Bootstrap — совершенный бесплатный шаблон сайта на HTML5 и CSS3

Если вы ищете бесплатный шаблон сайта, то Mobirise Bootstrap будет идеален, чтобы начать работу. Это многофункциональный шаблон с массой дополнений в комплекте. Три, предварительно сделанные, макета главной страницы и блога помогут вам в этом. Mobirise Bootstrap также SEO оптимизирован на 100% и адаптирован под любые размеры экранов.

18. La Casa — красивый и бесплатный HTML5 шаблон для сайта недвижимости

Шаблон Brandy прекрасно подойдет для организации коммерческого сайта о недвижимости. Отзывчивый и очень красивый дизайн понравится не только владельцу сайта, но и посетителям.

19. Drifolio — стильный HTML5 шаблон сайта для портфолио

Стильный и анимированный HTML5 и CSS3 шаблон сайта для организации портфолио. Чистый дизайн, отличная типографика, красивые иконки и многое другое.

20. Pluton — яркий и стильный шаблон для одностраничного сайта

Pluton – яркий и эффектный шаблон сайта на Bootstrap. Современный шаблон сайта, с его уникальным одностраничным макетом и адаптивным дизайном, который отлично подходит для студий, фотографов и творческих дизайнеров.

21. SquadFree — профессиональный шаблон одностраничного сайта на HTML5

Шаблон SquadFree отлично подойдет для создания коммерческого одностраничного сайта. Выглядит шаблон не только профессионально, но и адаптирован под все виды экранов. Шаблон собран на основе Bootstrap.

22. Sublime — завораживающий шаблон сайта на HTML5 и CSS3

Sublime — чистый и потрясающе красивый шаблон сайта на HTML5 и CSS3, идеально подходящий для стартапа, креативного агентства или сайта-портфолио. Отзывчивый дизайн и два варианта страниц на выбор.

23. Timber — необычный и красивый HTML5 и CSS3 шаблон сайта

Timber — свежая, стильная и необычная тема шаблона одностраничного сайта. Диагональ — главная фишка дизайна этого шаблона. Шаблон отлично подойдет для бизнес-сайта или портфолио. Есть встроенная галерея, карта и контактная информация, которые вы легко сможете адаптировать под себя.

24. E-Shopper — лучший шаблон сайта для электронной коммерции

E-Shopper — прекрасный вариант шаблона сайта для электронной коммерции. Построен на основе bootstrap с удивительным набором функций для полноценного и эффективного интернет-магазина.

25. Magnetic — бесплатный HTML5 и CSS3 шаблон для фотосайта

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

26. Mabur Portfolio — прекрасный шаблон сайта в стиле минимализма на HTML5 и CSS3

Плоский дизайн этого шаблона сайта в стиле минимализма отлично подойдет для создания портфолио. В шаблоне все детали выверены идеально!

27. Modern Bootstrap HTML5 — бесплатный одностраничный шаблон сайта

Этот бесплатный одностраничник на основе фреймворка Bootstrap прекрасно подойдет для корпоративных сайтов, как для малых компаний, так и для крупных. Плоский дизайн, адаптивная верстка, все элементы дизайна высокого качества. Шаблон представлен в 4 различных цветах.

28. Infusion — стильный одностраничный шаблон сайта на HTML5 и CSS3

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

29. Yebo — корпоративный шаблон сайта на HTML5 и CSS3

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

30. Twenty — эффектный HTML5 и CSS3 шаблон сайта с параллаксом

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

31. Urbanic – отличный HTML5 и CSS3 шаблон сайта на Bootstrap

Urbanic – свежий и классный HTML5 и CSS3 шаблон сайта, построенный на движке Bootstrap. Прекрасно подходит, чтобы сразу начать создавать свой сайт без особых проблем. Шаблон отлично адаптирован под любые размеры экранов.

32. Design Showcase — HTML5 шаблон сайта для портфолио

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

33. Mamba One — простой и стильный шаблон сайта на HTML5 и CSS3

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

34. KreativePixel — бесплатный шаблон сайта для фотографов

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

35. Retina Ready Responsive App — бесплатный шаблон лендинга на HTML5 и CSS3

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

36. Brushed — отзывчивый HTML5 и CSS3 шаблон сайта на движке Bootstrap

Brushed — отзывчивый, бесплатный HTML5 и CSS3 шаблон сайта на основе движка Bootstrap. Также оптимизирован для Retina дисплеев (iPhone, IPAD, IPod Touch и MacBook Pro Retina).

37. Big Picture HTML5 и CSS3 шаблон сайта

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

38. Tesselatte — бесплатный отзывчивый шаблон на HTML5 и CSS3

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

39. Overflow — уникальный шаблон сайта на HTML5 и CSS3

Этот уникальный шаблон сайта на чистом HTML5 и CSS3 прекрасно подойдет любому творческому человеку. Он полностью отзывчивый и совершенно бесплатный.

40. Runkeeper — отзывчивый и очень красивый шаблон сайта

Runkeeper — бесплатный, отзывчивый и очень красивый шаблон сайта. Его можно использовать для сайта любой тематики. Блестящий стиль и четкие шрифты, адаптивный дизайн и впечатляющие детали шаблона. Все работает на вас!

41. Pinball Responsive Grid Style — отличный шаблон сайта на основе сетки

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

42. Prologue — чистый шаблон одностраничного сайта на HTML5 и CSS3

Этот чистый, простой и четкий шаблон сайта на HTML5 и CSS3 прекрасно подойдет для постройки лендинга. Минималистический дизайн не отвлекает от главного. Эффектная боковая панель навигации с прокруткой и четкие линии страницы — просто идеальное сочетание!

43. Helios — современный шаблон сайта на чистом HTML5 и CSS3

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

44. Telephasic — бесплатный и отзывчивый шаблон сайта на HTML5

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

45. Strongly Typed — очень красивый шаблон сайта в стиле полу-ретро

Новый шаблон сайта с минималистичным полу-ретро стилем. Просто ретро уже не в моде, а вот легкий намек на него — очень даже кстати. Этот шаблон сайта полностью отзывчивый, построен на чистом HTML5 и CSS3 и включает все необходимые основные элементы страницы. Шаблон Strongly Typed идеально подойдет для сайтов творческой тематики. Например, для сайта о домашнем декоре.

46. Striped — чистый, красивый и функциональный шаблон сайта HTML5 и CSS3

Свежий и чистый, красивый и функциональный, новый шаблон сайта на HTML5 и CSS3. Имеет в своем арсенале все необходимые элементы страниц, в том числе оформленные цитаты, таблицы и списки, а также адаптированный сайдбар (справа или слева — по вашему желанию).

47. Parallelism — необычный и стильный шаблон сайта на HTML5 и CSS3

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

48. Miniport — полностью отзывчивый HTML5 шаблон сайта в стиле минимализма

Отличный шаблон сайта в стиле минимализма на HTML5. Прекрасно подойдет как для личного сайта/блога, так и для небольшого корпоративного сайта одностраничника или в качестве сайта-визитки.

49. Verti — просторный и свободный отзывчивый шаблон сайта на HTML5

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

50. ZeroFour — впечатляющий и стильный шаблон сайта на HTML5 и CSS3

И последний в списке, но не последний по качеству и внешней эффектности шаблон сайта — ZeroFour. Стильный дизайн, очень красивое меню, идеально выверенные формы и кнопки, красивые иконки и многое другое. И все это абсолютно бесплатно!

Надеюсь, вы нашли для себя что-то подходящее среди этих замечательных шаблонов сайтов на HTML5 и CSS3. Удачи!

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

ПС: Если никак не можете определиться с выбором, прочтите статью «Я не знаю, чего я хочу». Будет полезно.

Автор: Игорь Квентор
www.websovet.com

www.websovet.com

30 красивых и бесплатных HTML и CSS шаблонов для Ваших новых проектов и сайтов

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

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

Если Вы не найдёте в этой подборке подходящий шаблон, тогда обязательно посмотрите прошлые подборки:

Классный HTML и CSS шаблон для сайта — Beauty Class

Демо ι Скачать

Замечательны и минималистический CSS шаблон — Good-natured

Демо ι Скачать

Классный HTML и CSS шаблон с красивой шапкой сайта — Rock Castle

Демо ι Скачать

Тёмный шаблон на HTML — Wood Working

Демо ι Скачать

Очень красивый светлый шаблон на CSS — Designa

Демо ι Скачать

Классный HTML шаблон со слайдером — Folder

Демо ι Страница загрузки

Шаблон для ресторанов на HTML — BookStore

Демо ι Скачать

Бесплатный CSS шаблон с классной каруселью — Carousel

Демо ι Скачать

HTML и CSS шаблон для Вашего сайта в голубых тонах — Sailing

Демо ι Скачать

Замечательный шаблон с классным слайдером — Glossy Box

Демо ι Скачать

Клёвый тёмный HTML шаблон с классным слайдером картинок — Liquid

Демо ι Скачать

Музыкальный CSS шаблон для сайта — Musical Instruments

Демо ι Скачать

Не плохой шаблон для Вашего сайта в тёмных тонах — Darkside

Демо ι Скачать

Красивый CSS шаблон для сайта в голубых тонах — Medical Clinic

Демо ι Скачать

Красивый HTML шаблон в тёмных тонах — Erasure

Демо ι Скачать

Отличный шаблон на сайт с HTML и CSS — BeSmart

Демо ι Скачать

Замечательный блоговый шаблон на CSS — Free Software

Демо ι Скачать

Бесплатный тёмный CSS шаблон для сайта — Buzz

Демо ι Скачать

Мини шаблон для сайта — Mini Two

Демо ι Скачать

HTML шаблон с аккордеоном изображений — Accordion

Демо ι Скачать

Замечательный CSS блоговый шаблон для сайта — Briefcase

Демо ι Скачать

Минималистический CSS и HTML шаблон — Light Gray

Демо ι Скачать

Шаблон для зоопарков — Zoo

Демо ι Скачать

Классный и тёмный CSS шаблон — Dark Pro

Демо ι Скачать

Замечательный CSS шаблон в серых тонах — Calliope

Демо ι Скачать

Классный шаблон для блогов — Xtreme

Демо ι Скачать

Шаблон с классной шапкой сайта — Halcyonic

Демо ι Скачать

CSS шаблон для сайта в голубом оформлении — Indication

Демо ι Скачать

Ещё один блоговый шаблон — Elegant Blue

Демо ι Скачать

HTML шаблон с красивым меню — Design Company

Демо ι Скачать

Красивый шаблон-визитка — Cardex

Демо ι Скачать

beloweb.ru

Создание сайта html в блокноте с нуля

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

Для этого понадобится готовый дизайн сайта собственного производства или скачанный из сети psd исходник. Его нужно раскроить для верстки html.
Блокнот, а именно NotePad++. Его можно скачать с официально сайта.
Файл index.html. Его можно создать в любой удобной папке на компьютере. Но лучше выдели отдельную папку для своего сайта и размести его там. У меня это папка c:\site\index.html
Файл c:\site\style.css. Это файл стилей, зачем он нужен станет понятно позже.
Папка c:\site\images. В эту папку нужно поместить все изображения нужные для будущего сайта.
Купить хостинг и домен если нужно сайт выложить в интернете

Для удобства я сделал архив с изображениями и уже готовыми пустыми файлами index.html и style.css. Скачай и распакуй архив в нужную тебе папку.

Для работы сайта в сети необходим веб-сервер. Сервер при обращении к домену или папке сайта без указания конкретного файла будет искать в ней index.html или index.php если не найдет отобразит список файлов папки.

Так как у нас простая html страничка нам не потребуется установка сервера на нашем компьютере, так как язык разметки понимает любой браузер. Однако если потребуется использование php, то просто браузером уже не обойтись.

Теперь нужно открыть файл index и style в NotePad++

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

Скопируй код в файл index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Заголовок страницы для браузера</title>
  <link rel="stylesheet" href="/style.css" type="text/css" />
 </head>
 <body>
  <h2>Заголовок страницы</h2>
  <!-- Комментарий -->
  <p>Абзац.</p>
  
 </body>
</html>

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

В кратце опишу что значат эти теги. Если хочешь подробнее разобраться то по googl-и как говорится информации на эту тему море.

Указываем браузеру по какому стандарту нужно отображать страницу:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Тег html говорит о том где начинается и заканчивается html документ

<html>...</html>

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

<head>...</head>

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

<body>...</body>

Верстка или создание сайта на html

В процессе верстки сайта будут встречаться теги и атрибуты описать которые в данной статье невозможно. Поэтому рекомендую пользоваться сайтом htmlbook.ru. Кроме того советую внимательно изучать каждый тег и стиль css, который тебе встречается.

Итак что будем верстать:

Фон и основной каркас сайта

Замени содержимое своего файла index.html на следующее:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Мой первый сайт на html</title>
  <link rel="stylesheet" href="/style.css" type="text/css" />
</head>
<body>
	<!-- Основной блок сайта -->
	<div>
	
	</div>
</body>
</html>

И добавь в style.css такой код:

/*Каркас сайта*/
body {padding:0px; margin:0; background:#4c281e; font-size:14px; font-family:Arial, Sans-serif;}
#basic {width:960px; min-height:950px; margin:0 auto; padding:20px 20px 20px 20px; background:#fff;}
img {border:0;}
a {color:#ff9c00;}
a:hover {text-decoration:none;}

Обнови страницу с сайтом в браузере (F5), должно получится так:

Шапка сайта

Добавьте в тег div с идентификатором basic следующий код:

 <!-- Шапка сайта -->
	<div>
	<a href="/"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>
	<img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" />
</div>

Что бы получилось следующее:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Мой первый сайт на html</title>
  <link rel="stylesheet" href="/style.css" type="text/css" />
</head>
<body>
	<!-- Основной блок сайта -->
	<div>
	
		<!-- Шапка сайта -->
		<div>
			<a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>
			<img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" />
		</div>
		
	</div>
</body>
</html>

И добавляем в файл css строки:

/*Шапка сайта*/
li.none-bg {background:none!important;}
.telefon {float:right;}

Верхнее меню сайта

Что бы на нашем html сайте появилось навигационное меню, которое изображено в макете добавить в index.html после:

<!-- Шапка сайта -->
			<div>
			<a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>
			<img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" />
		</div>

Этот код:

<!-- Верхнее меню сайта -->
	<div>
        <div>
            <ul>
            <li><a href="#">О нас</a></li>
            <li><a href="#">Ассортимент</a></li>
            <li><a href="#">Отзывы</a></li>
            <li><a href="#">Забронировать столик</a></li>
            <li><a href="#">Наши клиенты</a></li>
            <li><a href="#">Контакты</a></li>
            </ul>
        </div>
        <div></div>
	</div>

Что бы получилось так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Мой первый сайт на html</title>
  <link rel="stylesheet" href="/style.css" type="text/css" />
</head>
<body>
    <!-- Основной блок сайта -->
    <div>
    
    	<!-- Шапка сайта -->
        <div>
            <a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>
            <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" />
        </div>
        
        <!-- Верхнее меню сайта -->
        <div>
        <div>
            <ul>
            <li><a href="#">О нас</a></li>
            <li><a href="#">Ассортимент</a></li>
            <li><a href="#">Отзывы</a></li>
            <li><a href="#">Забронировать столик</a></li>
            <li><a href="#">Наши клиенты</a></li>
            <li><a href="#">Контакты</a></li>
            </ul>
        </div>
        <div></div>
        </div>
        
    </div>
</body>
</html>

А в файл style.css:

/*Верхнее меню сайта*/
#top-menu {width:960px; height:74px; }
.bg-1 {width:950px; height:64px; background:#4c281e url(images/m1.png) repeat-x; padding:0 0 0 10px;}
.bg-2 {width:940px; height:8px; background:#ff9c00; margin:0 auto;}
.bg-1 ul {margin:0; padding:0; list-style:none;}
.bg-1 ul li {float:left; background:url(images/m2.png) no-repeat right center; padding:0 2px 0 0;}
.bg-1 ul li a {display:block; height:40px; padding:24px 27px 0 27px; color:#ff9c00; text-decoration:none; text-transform:uppercase;}
.bg-1 ul li a:hover {color:#fff; background:#ff9c00;}

Теперь сайт имеет логотип телефон и меню при наведении на которое меняется фон:

Левое меню и контент

Пришло время сделать левое меню и блок с контентом. Для этого копируем код и тщательно изучаем, что к чему. После блока:

<!-- Верхнее меню сайта -->
<div>
......
</div>

Добавляем следующее:

<!-- Левое меню и Контент -->
			<div>
			
			<!-- Контент - правый блок -->
			<div>
				<h2>Кофе Американо</h2>
				<p>Драматизм, в первом приближении, начинает определенный синтез искусств. Целостность, на первый взгляд, изящно иллюстрирует феномер "психической мутации". Герменевтика, как бы это ни казалось парадоксальным, изящно продолжает онтогенез, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. </p>

				<p>Согласно теории "вчувствования", разработанной Теодором Липпсом, флегматик дает эйдос. Художественное восприятие образует социально-психологический фактор, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. Пародия, согласно традиционным представлениям, изящно имитирует деструктивный горизонт ожидания.</p>
				
				<img src="/images/img1.png" alt="" title="" />
				<img src="/images/img2.png" alt="" title="" />
				<img src="/images/img3.png" alt="" title="" />

				<p>Художественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>

				<p>Диалогичность готично образует художественный ритуал. Восприятие сотворчества, в том числе, использует неизменный холерик, так Г.Корф формулирует собственную антитезу. Беллетристика иллюстрирует принцип артистизма. </p>

				<p>Горизонт ожидания аккумулирует фактографический эдипов комплекс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Игровое начало, так или иначе, выстраивает конструктивный этикет, так Г.Корф формулирует собственную антитезу.</p>

				<p>Удожественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>
			</div>
			
			<!-- Левое меню - левый блок блок -->
			<div>
				<div>
					<div></div>
					<div>
					<ul>
					<li><a href="#">Кофе Айриш</a></li>
					<li><a href="#">Кофе Американо</a></li>
					<li><a href="#">Кофе Глясе</a></li>
					<li><a href="#">Кофе Диппио</a></li>
					<li><a href="#">Кофе Капучино</a></li>
					<li><a href="#">Кофе Кон Панна</a></li>
					<li><a href="#">Кофе Коретто</a></li>
					<li><a href="#">Кофе Латте</a></li>
					<li><a href="#">Кофе Лунго</a></li>
					</ul>
					</div>
					<div></div>
				</div>
			
			</div>
		
		</div>

Файл index.html будет выглядеть вот так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Мой первый сайт на html</title>
  <link rel="stylesheet" href="/style.css" type="text/css" />
</head>
<body>
    <!-- Основной блок сайта -->
    <div>
    
    	<!-- Шапка сайта -->
        <div>
            <a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>
            <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" />
        </div>
        
        <!-- Верхнее меню сайта -->
        <div>
        <div>
            <ul>
            <li><a href="#">О нас</a></li>
            <li><a href="#">Ассортимент</a></li>
            <li><a href="#">Отзывы</a></li>
            <li><a href="#">Забронировать столик</a></li>
            <li><a href="#">Наши клиенты</a></li>
            <li><a href="#">Контакты</a></li>
            </ul>
        </div>
        <div></div>
        </div>
        
        <!-- Левое меню и Контент -->
        <div>
        
        	<!-- Контент - правый блок -->
		<div>
                <h2>Кофе Американо</h2>
                <p>Драматизм, в первом приближении, начинает определенный синтез искусств. Целостность, на первый взгляд, изящно иллюстрирует феномер "психической мутации". Герменевтика, как бы это ни казалось парадоксальным, изящно продолжает онтогенез, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. </p>
 
                <p>Согласно теории "вчувствования", разработанной Теодором Липпсом, флегматик дает эйдос. Художественное восприятие образует социально-психологический фактор, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. Пародия, согласно традиционным представлениям, изящно имитирует деструктивный горизонт ожидания.</p>
                 
                <img src="/images/img1.png" alt="" title="" />
                <img src="/images/img2.png" alt="" title="" />
                <img src="/images/img3.png" alt="" title="" />
 
                <p>Художественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>
 
                <p>Диалогичность готично образует художественный ритуал. Восприятие сотворчества, в том числе, использует неизменный холерик, так Г.Корф формулирует собственную антитезу. Беллетристика иллюстрирует принцип артистизма. </p>
 
                <p>Горизонт ожидания аккумулирует фактографический эдипов комплекс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Игровое начало, так или иначе, выстраивает конструктивный этикет, так Г.Корф формулирует собственную антитезу.</p>
 
                <p>Удожественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>
          
		</div>
		    
		<!-- Левое меню - левый блок блок -->
		<div>
			<div>
				<div></div>
				<div>
				<ul>
				<li><a href="#">Кофе Айриш</a></li>
				<li><a href="#">Кофе Американо</a></li>
				<li><a href="#">Кофе Глясе</a></li>
				<li><a href="#">Кофе Диппио</a></li>
				<li><a href="#">Кофе Капучино</a></li>
				<li><a href="#">Кофе Кон Панна</a></li>
				<li><a href="#">Кофе Коретто</a></li>
				<li><a href="#">Кофе Латте</a></li>
				<li><a href="#">Кофе Лунго</a></li>
				</ul>
				</div>
			<div></div>
			</div>
             
		</div>
         
        </div>
         
    </div>
</body>
</html>

И в конец файла css копируем:

/*Левое меню и Контент*/
#content {width:960px; padding:20px 0 0 0; }
.right { float:right; width:690px; padding:0 0 0 20px; text-align:justify;}
.right h2 {text-transform:uppercase; color:#4c281e; font-weight:normal; margin-top:0;}
.left {width:250px; float:left;}
.block-nad-menu {width:240px; height:10px; background:#ff9c00;}
.block-pod-menu {width:240px; margin:0 0 0 10px; height:10px; background:#4c281e;}
.block-menu {width:240px; border-left:10px solid #ff9c00; background:#4c281e;}
.left ul {margin:0; padding:10px 0 0 0; list-style:none;}
.left ul li {background:url(images/m3.png) no-repeat bottom left;}
.left ul li a {display:block; width:195px; color:#fff; text-decoration:none; padding:10px 5px 10px 40px; background: url(images/marker.png) no-repeat 10px 8px;}
.left ul li a:hover {background:#ff9c00 url(images/marker.png) no-repeat 10px 8px;}
li.none-bg {background:none!important;}

Если все сделано правильно получится сайт как на картинке ниже:

Подвал сайта

После блока:

<!-- Левое меню - левый блок блок -->
<div>
...
</div>

Вставляем:

<div></div>
		
		<!-- Подвал -->
		<div>
			<div></div>
			<div>ООО “Кофейня” 2015г.<br/>
			г. Москва, ул Революционная 1а</div>
			<div><img src="/images/stat.png" alt="" title="" /></div>
			<div>Создание сайтов веб-студия <a href="#">«Парампампам»</a></div>
			
		</div>
		<div></div>

Теперь весь файл index.html выглядит вот так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Мой первый сайт на html</title>
  <link rel="stylesheet" href="/style.css" type="text/css" />
</head>
<body>
	<!-- Основной блок сайта -->
	<div>
	
		<!-- Шапка сайта -->
		<div>
			<a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>
			<img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" />
		</div>
		
		<!-- Верхнее меню сайта -->
		<div>
		<div>
			<ul>
			<li><a href="#">О нас</a></li>
			<li><a href="#">Ассортимент</a></li>
			<li><a href="#">Отзывы</a></li>
			<li><a href="#">Забронировать столик</a></li>
			<li><a href="#">Наши клиенты</a></li>
			<li><a href="#">Контакты</a></li>
			</ul>
		</div>
		<div></div>
		</div>
		
		<!-- Левое меню и Контент -->
		<div>
		
			<!-- Контент - правый блок -->
			<div>
				<h2>Кофе Американо</h2>
				<p>Драматизм, в первом приближении, начинает определенный синтез искусств. Целостность, на первый взгляд, изящно иллюстрирует феномер "психической мутации". Герменевтика, как бы это ни казалось парадоксальным, изящно продолжает онтогенез, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. </p>

				<p>Согласно теории "вчувствования", разработанной Теодором Липпсом, флегматик дает эйдос. Художественное восприятие образует социально-психологический фактор, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. Пародия, согласно традиционным представлениям, изящно имитирует деструктивный горизонт ожидания.</p>
				
				<img src="/images/img1.png" alt="" title="" />
				<img src="/images/img2.png" alt="" title="" />
				<img src="/images/img3.png" alt="" title="" />

				<p>Художественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>

				<p>Диалогичность готично образует художественный ритуал. Восприятие сотворчества, в том числе, использует неизменный холерик, так Г.Корф формулирует собственную антитезу. Беллетристика иллюстрирует принцип артистизма. </p>

				<p>Горизонт ожидания аккумулирует фактографический эдипов комплекс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Игровое начало, так или иначе, выстраивает конструктивный этикет, так Г.Корф формулирует собственную антитезу.</p>

				<p>Удожественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>
			
			</div>
			
			<!-- Левое меню - левый блок блок -->
			<div>
				<div>
					<div></div>
					<div>
					<ul>
					<li><a href="#">Кофе Айриш</a></li>
					<li><a href="#">Кофе Американо</a></li>
					<li><a href="#">Кофе Глясе</a></li>
					<li><a href="#">Кофе Диппио</a></li>
					<li><a href="#">Кофе Капучино</a></li>
					<li><a href="#">Кофе Кон Панна</a></li>
					<li><a href="#">Кофе Коретто</a></li>
					<li><a href="#">Кофе Латте</a></li>
					<li><a href="#">Кофе Лунго</a></li>
					</ul>
					</div>
					<div></div>
				</div>
			
			</div>
		
		</div>
		
		<div></div>
		
		<!-- Подвал -->
		<div>
			<div></div>
			<div>ООО “Кофейня” 2015г.<br/>
			г. Москва, ул Революционная 1а</div>
			<div><img src="/images/stat.png" alt="" title="" /></div>
			<div>Создание сайтов веб-студия <a href="#">«Парампампам»</a></div>
		</div>
		<div></div>
		
	</div>
</body>
</html>

В файл css добавляем код в самый низ:

/*Подвал*/
.myclr {clear:both; float:none; width:100%; height:1px;}
#podval {border-top:10px solid #4c281e; margin-top:20px;}
.yellow {width:940px; height:5px; margin:0 auto; background:#ff9c00;}
.p1 {float:left; width:300px; padding:15px 0 0 0;}
.p2 {float:right; width:200px; text-align:right; padding:15px 20px 0 0;}
.p3 {float:right; width:30px; padding:15px 0 0 0;}

Теперь весь файл style.css выглядит следующим образом:

/*Каркас сайта*/
body {padding:0px; margin:0; background:#4c281e; font-size:14px; font-family:Arial, Sans-serif;}
#basic {width:960px; min-height:500px; margin:0 auto; padding:20px 20px 20px 20px; background:#fff;}
img {border:0;}
a {color:#ff9c00;}
a:hover {text-decoration:none;}

/*Шапка сайта*/
#head-site {height:70px;}
li.none-bg {background:none!important;}
.telefon {float:right;}

/*Верхнее меню сайта*/
#top-menu {width:960px; height:74px; }
.bg-1 {width:950px; height:64px; background:#4c281e url(images/m1.png) repeat-x; padding:0 0 0 10px;}
.bg-2 {width:940px; height:8px; background:#ff9c00; margin:0 auto;}
.bg-1 ul {margin:0; padding:0; list-style:none;}
.bg-1 ul li {float:left; background:url(images/m2.png) no-repeat right center; padding:0 2px 0 0;}
.bg-1 ul li a {display:block; height:40px; padding:24px 27px 0 27px; color:#ff9c00; text-decoration:none; text-transform:uppercase;}
.bg-1 ul li a:hover {color:#fff; background:#ff9c00;}

/*Левое меню и Контент*/
#content {width:960px; padding:20px 0 0 0; }

/*Контент - правый блок*/
.right { float:right; width:690px; padding:0 0 0 20px; text-align:justify;}
.right h2 {text-transform:uppercase; color:#4c281e; font-weight:normal; margin-top:0;}

/*Левое меню - левый блок*/
.left {width:250px; float:left;}
.block-nad-menu {width:240px; height:10px; background:#ff9c00;}
.block-pod-menu {width:240px; margin:0 0 0 10px; height:10px; background:#4c281e;}
.block-menu {width:240px; border-left:10px solid #ff9c00; background:#4c281e;}
.left ul {margin:0; padding:10px 0 0 0; list-style:none;}
.left ul li {background:url(images/m3.png) no-repeat bottom left;}
.left ul li a {display:block; width:195px; color:#fff; text-decoration:none; padding:10px 5px 10px 40px; background: url(images/marker.png) no-repeat 10px 8px;}
.left ul li a:hover {background:#ff9c00 url(images/marker.png) no-repeat 10px 8px;}


/*Подвал*/
.myclr {clear:both; float:none; width:100%; height:1px;}
#podval {border-top:10px solid #4c281e; margin-top:20px;}
.yellow {width:940px; height:5px; margin:0 auto; background:#ff9c00;}
.p1 {float:left; width:300px; padding:15px 0 0 0;}
.p2 {float:right; width:200px; text-align:right; padding:15px 20px 0 0;}
.p3 {float:right; width:30px; padding:15px 0 0 0;}

А сам сайт вот так:

Другие страницы сайта и ссылки меню

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

Названия страниц должны быть уникальными и состоять из латинских символв. Я просто перевел названия пунктов меню на транслит.

o-nas.html — О нас
assortiment.html — Ассортимент
otzivi.html — Отзывы
zabronirovat-stolik.html — Забронировать столик
nashi-klienty.html — Наши клиенты
kontakty.html — Контакты

То же самое нужно сделать и с левым меню.

kofe-ayrish.html — Кофе Айриш
kofe-amerikano.html — Кофе Американо
kofe-glyase.html — Кофе Глясе
kofe-dippio.html — Кофе Диппио
kofe-kapuchino.html — Кофе Капучино
kofe-kon-panna.html — Кофе Кон Панна
kofe-koretto.html — Кофе Коретто
kofe-latte.html — Кофе Латте
kofe-lungo.html — Кофе Лунго

Теперь открываем index.html в NotePad++ и добавляем нужные ссылки соответствующему меню, что бы получилось так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Мой первый сайт на html</title>
  <link rel="stylesheet" href="/style.css" type="text/css" />
</head>
<body>
	<!-- Основной блок сайта -->
	<div>
	
		<!-- Шапка сайта -->
		<div>
			<a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>
			<img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" />
		</div>
		
		<!-- Верхнее меню сайта -->
		<div>
		<div>
			<ul>
			<li><a href="/o-nas.html">О нас</a></li>
			<li><a href="/assortiment.html">Ассортимент</a></li>
			<li><a href="/otzivi.html">otzivi.html</a></li>
			<li><a href="/zabronirovat-stolik.html">Забронировать столик</a></li>
			<li><a href="/nashi-klienty.html">Наши клиенты</a></li>
			<li><a href="/kontakty.html">Контакты</a></li>
			</ul>
		</div>
		<div></div>
		</div>
		
		<!-- Левое меню и Контент -->
		<div>
		
			<!-- Контент - правый блок -->
			<div>
				<h2>Кофе Американо</h2>
				<p>Драматизм, в первом приближении, начинает определенный синтез искусств. Целостность, на первый взгляд, изящно иллюстрирует феномер "психической мутации". Герменевтика, как бы это ни казалось парадоксальным, изящно продолжает онтогенез, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. </p>

				<p>Согласно теории "вчувствования", разработанной Теодором Липпсом, флегматик дает эйдос. Художественное восприятие образует социально-психологический фактор, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. Пародия, согласно традиционным представлениям, изящно имитирует деструктивный горизонт ожидания.</p>
				
				<img src="/images/img1.png" alt="" title="" />
				<img src="/images/img2.png" alt="" title="" />
				<img src="/images/img3.png" alt="" title="" />

				<p>Художественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>

				<p>Диалогичность готично образует художественный ритуал. Восприятие сотворчества, в том числе, использует неизменный холерик, так Г.Корф формулирует собственную антитезу. Беллетристика иллюстрирует принцип артистизма. </p>

				<p>Горизонт ожидания аккумулирует фактографический эдипов комплекс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Игровое начало, так или иначе, выстраивает конструктивный этикет, так Г.Корф формулирует собственную антитезу.</p>

				<p>Удожественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>
			
			</div>
			
			<!-- Левое меню - левый блок блок -->
			<div>
				<div>
					<div></div>
					<div>
					<ul>
					<li><a href="/kofe-ayrish.html">Кофе Айриш</a></li>
					<li><a href="/kofe-amerikano.html">Кофе Американо</a></li>
					<li><a href="/kofe-glyase.html">Кофе Глясе</a></li>
					<li><a href="/kofe-dippio.html">Кофе Диппио</a></li>
					<li><a href="/kofe-kapuchino.html">Кофе Капучино</a></li>
					<li><a href="/kofe-kon-panna.html">Кофе Кон Панна</a></li>
					<li><a href="/kofe-koretto.html">Кофе Коретто</a></li>
					<li><a href="/kofe-latte.html">Кофе Латте</a></li>
					<li><a href="/kofe-lungo.html">Кофе Лунго</a></li>
					</ul>
					</div>
					<div></div>
				</div>
			
			</div>
		
		</div>
		<div></div>
		
		<!-- Подвал -->
		<div>
			<div></div>
			<div>ООО “Кофейня” 2015г.<br/>
			г. Москва, ул Революционная 1а</div>
			<div><img src="/images/stat.png" alt="" title="" /></div>
			<div>Создание сайтов веб-студия <a href="#">«Парампампам»</a></div>
			
		</div>
		<div></div>
		
	</div>
</body>
</html>

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

Все сайт готов. Осталось только поменять в каждой странице контент.

У такого сайта не смотря на его простоту есть очень большой недостаток. Что бы поменять один пункт меню или элемент дизайна придется это делать это в каждом сайте. Когда страниц больше 10 начинается страшная путаница при его обслуживании. Так что создание сайта html в блокноте советую делать только для очень маленьких сайтов или одно-страничных LandingPage. А для полноценных сайтов осваивать CMS (они не так сложны как кажется).

www.opengs.ru

45 бесплатных адаптивных HTML5-шаблонов сайтов

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

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

1. Gumba – минималистический HTML5/CSS3 шаблон портфолио

Gumba – минималистический HTML5/CSS3 шаблон портфолио

2. La Casa – HTML шаблон сайта отеля

La Casa – HTML шаблон сайта отеля

3. Modex – шаблон портфолио на Bootstrap

Modex – шаблон портфолио на Bootstrap

4. Drifolio – бесплатный html-шаблон портфолио

Drifolio – бесплатный html-шаблон портфолио

5. SquadFree – бесплатный шаблон на Bootstrap HTML5

Squad Free — адаптивный шаблон на bootstrap

6. Pluton – бесплатный одностраничный шаблон на Bootstrap HTML5

Pluton — бесплатный одностраничный шаблон на Bootstrap HTML5

7. Sublime – прекрасный HTML5/CSS3 шаблон сайта

Sublime – прекрасный HTML5/CSS3 шаблон сайта

8. Timber – одностраничный шаблон на Bootstrap

Timber – одностраничный шаблон на Bootstrap

9. E-Shopper — бесплатный шаблон для интернет-магазина

E-Shopper — бесплатный шаблон для интернет-магазина

10. AdminLTE — шаблон панели управления администратора

AdminLTE — шаблон панели управления администратора

11. Magnetic — бесплатный шаблон для сайта фотографа

Magnetic — бесплатный шаблон для сайта фотографа

12. Mabur — адаптивный шаблон для портфолио

Mabur — адаптивный шаблон для портфолио

13. Moderna — адаптивный шаблон сайта на Bootstrap

Moderna — адаптивный шаблон сайта на Bootstrap

14. Sport Here — минималистичный шаблон сайта

Sport Here — минималистичный шаблон сайта

15. Crafty — адаптивный шаблон корпоративного сайта

Crafty — адаптивный шаблон корпоративного сайта

16. Infusion — одностраничный шаблон портфолио

Infusion — одностраничный шаблон портфолио

17. Yebo — HTML/CSS шаблон сайта в плоском стиле

Yebo — HTML/CSS шаблон сайта в плоском стиле

18. Twenty — шаблон на HTML5 с эффектом параллакса

Twenty — шаблон на HTML5 с эффектом параллакса

19. Urbanic — шаблон на Bootstrap

Urbanic — шаблон на Bootstrap

20. Calm — шаблон портфолио

Calm — шаблон портфолио

21. Mamba — одностраничный шаблон

Mamba — одностраничный шаблон

22. Шаблон портфолио в плоском стиле

Шаблон портфолио в плоском стиле

23. Brushed — одностраничный адаптивный шаблон сайта

Brushed — одностраничный адаптивный шаблон сайта

24. Big Picture — шаблон сайта на HTML5

Big Picture — шаблон сайта на HTML5

25. Tesselatte — бесплатный адаптивный шаблон сайта

Tesselatte — бесплатный адаптивный шаблон сайта

26. Overflow — адаптивный шаблон сайта на HTML5

Overflow — адаптивный шаблон сайта на HTML5

27. Runkeeper — шаблон сайта мобильного приложения

Runkeeper — шаблон сайта мобильного приложения

28. Pinball — адаптивный шаблон блога

Pinball — адаптивный шаблон блога

29. Bak One — одностраничный адаптивный шаблон сайта

design-secrets.ru

Простые HTML шаблоны сайтов на русском для красивых сайтов

Шаблоны сайтов HTML (HTML шаблоны) – эксклюзивный обзор лучших тем для различных целей от команды сайта InBenefit. Но перед тем как перейти непосредственно к обзору самых современных шаблонов сайта HTML, давайте немного разберемся в терминологии и понятиях.

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

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

История HTML

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

В октябре 2014 года была представлена совершенно новая версия всем известного языка – HTML5, а в декабре 2017 года – подверсия HTML 5.2 Основной целью для ее разработки было желание улучшить семантическое представление типовых страниц сайтов, в том числе форумов, аукционов, интернет-магазинов и поисковых систем. Также одной из задач была усовершенствованная поддержка мультимедиа-технологий и повышение удобства чтения кода.

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

Нововведения HTML5

Предыдущий стандарт HTML версии 4 был создан еще в далеком 97 году, и во многом он уже устарел, особенно в контексте повышения требований пользователей и повсеместного распространения огромного количества мобильных устройств. Так что такое масштабное обновление назревало очень давно. Вот лишь основные новшества, которые были добавлены в новый стандарт HTML5:

Обновление и упрощение структуры.
Использование новых и поддержка старых тегов.
Добавление новых функций форм.
Возможность рисования, проигрывания видео, создания оффлайн-приложений, работы с геолокацией – с помощью совершенно нового элемента <canvas> (без JavaScript и Flash).
Расширенные возможности аудио и видео.
Более чистый код на выходе.
Поддержка API.
Расширенные возможности локального хранилища.

Все эти особенности имеют и все без исключения сложные и простые HTML шаблоны. По крайней мере те, которые можно отнести к классу «Премиум» (о них поговорим чуть позже). В этой статье вам будут предложены исключительно шаблоны сайтов HTML5 – можете быть уверены!

Простые HTML шаблоны — Реальная альтернатива разработке на заказ

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

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

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

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

HTML шаблоны Joomla, WordPress или Drupal

Говоря об особенностях шаблонов, стоит отметить универсальность, которой обладают шаблоны сайтов HTML на русском языке. Дело в том, что кроме элементарности разработки простой HTML-шаблон премиум класса предоставляет определенную свободу выбора платформы.

В отличие от классических шаблонов под существующие платформы, такие как WordPress, Joomla и Drupal, при выборе HTML-темы вы сможете на свой выбор решить, под какую из систем управления контентом (CMS) создавать будущий сайт. Это преимущество хорошо работает как для обычных пользователей, так и для веб-разработчиков.

Крутые шаблоны сайтов HTML или премиум шаблоны WordPress

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

Русские шаблоны HTML – Преимущества

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

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

Русские шаблоны HTML – Недостатки

Необходимы хотя бы минимальные навыки веб-разработки.
Отсутствие возможности детальной настройки оформления в Photoshop (как это можно сделать в PSD-макетах).

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

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

Вывод: Тем, кто хочет сэкономить на разработке, получая взамен премиум дизайн и функции на том же уровне, что есть и в обычных WordPress-шаблонах, я советую выбирать шаблоны HTML. Конечно, при условии определенного опыта и навыков веб-разработки. Если вы можете немного переплатить (до 100$), получая взамен шаблон для простой беспроблемной разработки в два шага без написания ни единой строчки кода, ваш выбор – WordPress-шаблоны. Благо для вас на сайте InBenefit есть специальные разделы, где вы найдете сотни и тех, и тех шаблонов для своего будущего сайта. Окончательный выбор как всегда за вами!

Шаблоны сайтов HTML на русском

Если вы еще читаете эту статью, значит вас заинтересовали именно HTML шаблоны. Спешу вас обр

inbenefit.com

Готовый код сайта Html + CSS

Здравствуйте уважаемые начинающие веб-мастера.

Ранее мы уже рассмотрели Код сайта на чистом HTML, теперь же, познакомившись с основами CSS, мы уже можем сделать простенький сайт, применив HTML+CSS.

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

Итак, давайте посмотрим, как выглядит код (и что в нём можно менять), такого вот сайта.

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

Но Вы, прочитав статью, сможете сделать всё по своей тематике, и со своей конструкцией каркаса сайта.

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

Код:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Код блочного сайта</title>/* Стилевое оформление */
<style>
 body{
  background:#c0c0c0; /* Меняется фон экрана, выбирается здесь */
}
 #wrapper{ /* Оболочка страницы сайта */
  width: 900px; /* Меняется ширина страницы */
  margin: 0 auto;
  background:#f2e8c9; /* Меняется задний фон страницы */
}
 /* Шапка сайта */
 #header{
position:relative; /* Задаём блоку относительное позиционирование для того, чтобы затем размещать, в нём другие элементы и позиционировать относительно его границ поверх фоновой картинки и заголовка */
  height: 250px; /* Высота шапки */
  background-color: #ffffff; /* Фон шапки */
   margin-bottom: 5px; /* Нижний отступ шапки от остального контента */
  border-radius: 5px; /* Закругляются углы блока */
  box-shadow: rgba(0,0,0,0.5) 0px 1px 3px; /* Тень. Визуально приподнимает блок над оболочкой */
}
img{ /* Фоновая картинка в шапке */
float: left; /* Разрешаем наплывание других элементов на картинку */
  margin: -40px 0 0 0;} /* Размещаем картинку в блоке header. 1-я и 3-я цифры - двигаем вверх-вниз, 2-я и 4-я цифры - двигаем вправо-влево */
h2{ /* Заголовок сайта */
  margin:0 0 10px 40px; /* Заголовок двигается верх-вправо-вниз-влево. */
  color:#464451; /* Цвет заголовка */
}
.nomer{ /*Подзаголовок (номер телефона)*/
  position:absolute; /* Позиционируем абсолютно подзаголовок, относительно границ блока header. Также можно разместить в шапке сайта ещё другие картинки и абзацы поверх фоновой картинки и заголовка */
  top:5px; /* Двигается вверх-вниз */
  left:680px; /* Двигается вправо-влево */
  font-size: 25px; /* Размер букв подзаголовка */
  font-style:italic; /* Курсив */
  font-weight:bold; /* Жирный */
  color:#464451; /* Цвет букв подзаголовка */
}
 /* Сайдбар (колонка справа) */
 #sidebar{ /* Блок сайдбара */
  background-color: #ffffff; /* Фон блока */
  width: 180px; /* Ширина блока */
  padding: 10px; /* Отступ текста от краёв */
  float: right; /* Размещаем блок справа от других элементов, наплывание или обтекание справа). Если делать сайдбар слева, то значение right меняем на left */
  border-radius: 5px; /* Закругляем углы блока */
  box-shadow: rgba(0,0,0,0.5) 0px 1px 3px; /* Задаём блоку тень */
}
.marcer{ /* Галочки маркеры меню */
  float: left; /* Размещаем слева от текста */
  margin: 5px 5px 0 0; /* Двигаются вверх-вправо-вниз-влево */
}
 /* Контент (статья) */
 #content{ /* Блок контента */
  margin-bottom: 5px; /* Отступ блока статьи от блока подвала */
  width: 676px; /* Ширина статьи */
  padding: 10px; /* Отступ текста от краёв блока */
  background: #ffffff; /* Фон статьи */
  border-radius: 5px;
  box-shadow: rgba(0,0,0,0.5) 0px 1px 3px;
}
.left{ /* Картинка в тексте слева */
  float: left;
  margin: 30px 7px 7px 7px;
}
.right{ /* Картинка в тексте справа */
  float: right;
  margin: 7px 0 7px 7px;
}
/* Подвал */
 #footer{ /* Блок подвала */
  height:80px; /* Высота блока подвала */
  background-color: #ffffff; /* Фон блока подвала */
  margin-bottom: 10px; /* Отступ снизу */
  border-radius: 5px; /* Закруглённые углы */
  box-shadow: rgba(0,0,0,0.5) 0px 1px 3px; /* Тень блока */
}
.clear{ /* Запрет наплывания. Устанавливается для того, чтобы блок контента, при заполнении текстом и изображениями не наплывал на подвал */
  clear: both;
}
  .fon{ /* Номер телефона */
  float:left; /* Разрешаем другим элементам обтекать абзац справа */
  margin:20px 0 0 20px;
}
.fax{ /* Номер факса */
  float:left;
  margin:20px 0 0 60px;
}
.mail{ /* Адрес E-mail */
  float:left;
 margin:20px 0 0 60px;
}
</style>
</head>
<body>
  <div> <!--Оболочка страницы-->
<!--Шапка сайта-->
    <div>
<!--Заголовок сайта-->
      <h2>Грузоперевозки</h2>
<!--Описание (телефон)-->
        <p>234-49-50 <br> +7 900 650 33 45</p>
<!--Фоновая картинка в шапке сайта-->
      <img src="http://trueimages.ru/img/cf/26/9116df15.png">
    </div>
<!--Сайдбар-->
    <div>
<!--меню-->
      <h4>На нашем сайте</h4>
<!--Картинки маркеров меню (галочки)-->
        <p><img src="http://trueimages.ru/img/99/91/dea39f15.png">Наши сотрудники</p>
        <p><img src="http://trueimages.ru/img/99/91/dea39f15.png">Наша техника</p>
        <p><img src="http://trueimages.ru/img/99/91/dea39f15.png">Прайс</p>
<!--Прямая синяя линия-->
          <hr color="#037FFC" size="5">
<!--Общая информация в сайдбаре-->
      <h4>Другая информация</h4>
    </div>
<!--Основной контент (статья)-->
    <div>
<!--Картинка слева-->
      <img src="http://trueimages.ru/img/81/90/b1718f15.png">
<!--Заголовок статьи-->
        <h4>Наша работа</h4>
<!--Текст статьи-->
<p>Здравствуйте уважаемые будущие веб-мастера!</p>
<p>Мне 55 лет и я рад приветствовать Вас на своём сайте.
Этот сайт первый, который я разработал самостоятельно,
а до этого умел только входить в интернет.
Почему я решил его сделать?</p>
<p>За те 3 месяца, пока
разбирался в сайтостроении и создавал этот ресурс
обнаружилось, что авторы руководств по созданию
сайтов считают многие нюансы само собой разумеющимися
и не обращают на них внимание.</p>
<p>А мне, учитывая
возраст и «опыт», было не просто понять как раз эти
нюансы, они отнимали больше всего времени. И я решил
написать свой материал, так что-бы другим было легче
сориентироваться в потоке новой информации.</p>
<!--Картинка справа-->
      <img src="http://trueimages.ru/img/0d/64/07a18f15.png">
 <p>Здесь
«разжеваны» все мелочи сопровождающие создание сайта,
мимо которых обычно проскакивают другие авторы.
Если вам что-то будет непонятно, спрашивайте, для
меня нет «глупых» вопросов.
Читайе и создавайте свой сайт самостоятельно, каким
бы ни был Ваш возраст и стаж работы на компьютере.</p>
<p>Уверен, у Вас получится еще лучше и уж точно, в
несколько раз быстрее, чем у меня.</p>
    </div>
<!--Запрет наплывания-->
  <div></div>
<!--Подвал-->
    <div>
      <p><strong>Телефон:<br> 265-48-76</strong> </p>
      <p><strong>Факс:<br> 265-85-97</strong></p>
      <p><strong>E-mail<br>[email protected]</strong></p>
     </div>
  </div>
</body>
</html>

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

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

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

А теперь вернёмся к нашему коду.

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

Как создать директорию сайта смотрите в статье Создание директории сайта

Для редактирования этого кода, потребуется HTML редактор. У кого он есть, очень хорошо, у кого нет, предлагаю установить Notepad++.

Как начать в нём работу, то есть создать файл, прочитайте здесь.

Когда редактор будет установлен, откройте его, скопируйте из представленного выше кода строки 1 — 6, и вставьте в поле редактора, а затем строки 118 — 153, и так же вставьте в редактор.

Таким образом мы выбрали HTML часть кода, из которой создадим HTML файл. Удалите мою нумерацию строк, создайте файл, назовите его index.html, и сохраните в директорию сайта.

Директория должна приобрести такой вид:

Следующим шагом создаём файл style.css, в котором будет расположена таблица стилей.

Вот тут внимание! Файл style.css, в дальнейшем, будет подключаться ко всем страницам сайта, поэтому в нём нужно собрать стили, формирующие основу страницы.

А это все стили из выше приведённого кода, кроме селекторов .left и .right, относящихся непосредственно к тексту статьи.

В дальнейшем, если Вам захочется внести какие-то изменения в конструкцию сайта, достаточно будет внести их в файл style.css, и они отобразятся на всех страницах.

Итак, в директории сайта создаём ещё одну папку, и называем её css.

Затем возвращаемся в редактор, открываем новый документ (первая иконка панели), копируем и вставляем в него строки 8 — 80 и 90 — 116.

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

Убираем мою нумерацию, и сохраняем этот новый документ во вновь созданную папку css, под названием style.css.

Далее откроем файл index.html, и подключим к нему таблицу стилей, то есть файл style.css.

Делается это следующим образом: в теге <head>, можно между тегами <meta> и <title>, вставляется тег <link>, с атрибутами определяющими местоположение и назначение css.

<link href="css/style.css" type="text/css" rel="stylesheet">

После тега <link>, подключим стили, оформляющие картинки расположенные в тексте статьи. (строки 81 — 88). Убираем мою нумерацию и комментарии, так как в файле html комментарии css не работают, и даже наоборот, могут всё испортить.

<style"> .left{ float: left; margin: 30px 7px 7px 7px; } .right{ float: right; margin: 7px 0 7px 7px; } </style>

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

Вид в редакторе:

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

Следующим шагом разберёмся с изображениями. У меня картинки загружены через сервис trueimages, только для того, чтоб страница открылась у Вас в браузере.

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

Как сделать картинку для шапки сайта в Paint можно посмотреть в одноимённой статье. Если-же у Вас есть фотошоп, то все изображения лучше делать в нём.

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

Первым делом поменяем шапку сайта. Для этого в файле index.html удалим тег <img> c моей картинкой (строка 124)

Затем в файле style.css удалим селектор img.

Далее, в селекторе #header прописываем уже Вашу картинку

background-image: url(../images/schapka.png);

В редакторе это будет смотреться так

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

Обратите внимание, что размер картинки не должен превышать размер блока header. Определяется он так: щёлкните по файлу картинки правой клавишей, в появившемся меню выбираете «Свойства», и затем, «Подробно», там и будут показаны размеры.

Теперь, если пройти в меню «Запуск», и открыть index.html, то откроется страница с Вашим изображением в шапке сайта.

Меняем остальные картинки (строки 128,129,130,135,141) В отличие от предыдущей, в них нужно изменить только адреса. Удалить адреса моих изображений, и вставить адреса Ваших.

После чего они приобретут примерно такой вид. Название картинки у меня i2.png, а у Вас будет своё.

<p><img src="images/i2.png">Наши сотрудники</p>

Ну вот, осталось написать свои заголовки, оформить и подвинуть их туда куда Вам нужно(как это сделать сказано в комментариях к коду), написать свой текст, и главная страница Вашего сайта готова!

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

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

В директории сайта у нас есть папка content. Открываем её и создаём ещё одну папку — rubrica1(у Вас конечно будет своё название). В этой папке создаём ещё две папки — css и images.

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

Теперь можно создать страницу или статью. Открываем в Notepad++ файл index.html, копируем его, затем открываем «Новый документ», и вставляем в него скопированный файл.

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

Сохраняем её в папку rubrica1 под названием: «Заголовок статьи.html». Заголовок статьи в названии файла пишется английскими буквами.

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

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

Вот мы и подошли к самой, по моему, трудоемкой и нудной фазе создания сайта — навигации. Или меню.

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

Можно с каждой страницы на все остальные, можно меню «Рубрики», а уж из рубрик — меню по страницам. А если этих страниц несколько сотен?

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

Итак, меню делается в общем-то просто. Нужно, лишь, в строку меню, вставить ссылку на другую страницу

Так на каждой странице, после чего наше меню станет активным.

Ну вот вроде бы, в общем, всё. Осталось выложить наше детище в интернет. Как это сделать читайте в статье Шаблон сайта на чистом HTML.

В качестве хостинг провайдера очень рекомендую Бегет

Готовый код различных наворотов для вашего сайта вы можете найти на странице Бесплатные скрипты и CSS эффекты для сайта

Желаю творческих успехов.

Перемена

Учитель поймал в школе ученика, игравшего в карты, и отодрал его за уши.
— Ты знаешь, за что я тебя наказал? — спросил учитель.
— Знаю. Я неправильно пошёл королём.

Как разбить страницу на отдельные блоки < < < В раздел > > > Что такое PHP (пи-эйч-пи)

Рекомендую: Готовые HTML шаблоны на русском

starper55plys.ru

38 адаптивных html шаблонов / HTML шаблоны / Постовой

Идешь по улице и видишь у каждого в руках смартфон или планшет. Число посетителей с мобильных устройств уже приравнивается к числу посетителей со стационарными компьютерами. Для них всех нужно создать одинаково комфортные условия изучения веб-сайта. Для этого была придумана адаптивность. С адаптивной темой люди будут себя чувствовать так, как будто они находятся в приложении, которое изначально было заточено под их девайс. В эту подборку вошли только адаптивные html шаблоны и самое приятное — все бесплатно. Стоит отдать должное веб мастерам, которые думают не только о собственной наживе. Будем им благодарны, ведь Open Source — это прекрасно!
Три месяца назад я уже делал подборку адаптивных html шаблонов. За это время разработчики успели выпустить новые шаблоны и я также решил сделать новую подборку. Новенького оказалось не так много, как хотелось бы. В основном в открытый доступ выкладывают шаблоны одни и те же люди и компании, что и всегда.
Практически все шаблоны хорошего качества с отличным кодом. Выполнены на HTML, HTML5 и CSS. Они отлично послужат веб-мастерам в качестве отменного инструмента для создания блога или Landing Page.

См. также:
10 бесплатных шаблонов на HTML5 и CSS3
23 бесплатных адаптивных html шаблона
37 адаптивных HTML5 CSS3 шаблонов

HELIOS

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

Wee

Адаптивный HTML5 шаблон из классным слайдером для бизнес-сайта или портфолио. В архиве присутствует верстка таких страниц как:

Главная страница (с навороченным слайдером)
Главная страница (со слайдером попроще)
Главная страница (без слайдера, но с классно оформленным заголовком)
Услуги
О нас
Портфолио (3 колонки)
Портфолио (4 колонки)
Страница портфолио
Страница прайс-листа (2 и 3 столбика)
Страница 404
Страница FAQ
Текстовая страница
Блог

Демо | Скачать

OVERFLOW

Отличный адаптивный html шаблон в супер качестве. Он разбит на экраны, которые подстваиваются под высоту монитора. Это идеальное решение для создания Landing Page или портфолио. В шаблоне также присутствует галерея, которую можно использовать для демонстрации своих работы или продукта.
Демо | Скачать

PROLOGUE

Адаптивный html шаблон с боковой колонкой. Изначально заточен под портфолио, но можно адаптировать практически под любые задачи.
Демо | Скачать

FlatWEB

Шаблон на html5 выполнен в плоском, так сейчас популярном, стиле. Идеально подойдет для создания посадочной страницы.
Демо | Скачать

Шаблон Landing Page

Современный, чистый и легкий шаблон Landing Page со слайд-панелью навигации.
Демо | Скачать

Шаблон Landing Page для мобильного приложения

Бесплатный, адаптивный HTML шаблон для мобильного приложения оптимизирован под ретина дисплеи. Как заверяют разработчики, в нем также приведена SEO оптимизация.
Демо | Скачать

Страница-заглушка

Адаптивная страница заглушка на html. В шеблоне есть таймер обратного отсчета и интегрированная google карта.
Демо | Скачать

Atolo

Демо | Скачать

Адаптивный шаблон-галерея

Эффектный шаблон с сеткой в стиле Pinterest. Идеально подойдет для портфолио или просто галереи изображений.
Демо | Скачать

Адаптивный html мини-шаблон личной странички

Демо | Скачать

Halftone

Адаптивный HTML шаблон в ретро стиле. Хорошо подходит для личного блога.
Демо | Скачать | Скачать PSD

Pichichi

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