Html примеры сайтов: Шаблон сайта на чистом HTML. Готовый код сайта

20 самых красивых и творческих сайтов на HTML5

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

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

Сегодня я представляю Вам несколько примеров таких сайтв, которые используют практически все возможности HTML5. Я уверен, что после просмотра вдохновение аж зашкалит 🙂 Наслаждайтесь.

Возможно Вам будут интересны вот эти подборки:

Интересный сайт сделанный с помощью HTML 5. Вам нужно добавить усы к видео на котором находятся разнообразные герои. Это как оказалось не очень и просто сделать 🙂

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

Наверное самые красивые иллюстрации на сайте Швейцарского часового. Очень красиво, просто сказочно. И естественно этот сайт сделан на самых новых технологиях HTML5 и JQuery.

Довольно необычный сайт с 3d графикой рок — певицы Бьёрк (Bjork). Красивые 3d элементы добавляют необыкновенную объёмность сайту, в общем нужно зайти и посмотреть.

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

Супер веб — сайт Джеймса Андерсона, который очень любит игру крикет, и таким образом сделал сайт — инфографику с красивой и «живой» статистикой игры.

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

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

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

www.the-bea.st

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

Классный сайт на котором можно посмотреть разнообразные видео со всей планеты. И конечно же этот сайт отчётливо подчёркивает огромные возможности HTML5.

Это стильный цифровой комикс, воплощённый в жизнь с помощью HTML5. Этот сайт доставит огромное удовольствие поклонникам книги.

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

beta.theexpressiveweb.com

Классный справочник, который был создан компанией Adobe, в котором представлены разные полезности, например как CSS3 анимация и т.д.

Сайт, который показывает использование видео на сайте с помощью HTML5. Создатель видео Крис Молоко, он же и создал этот сайт со своими друзьями из Гугл.

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

Супер пример использования параллакса, HTML5 и JQuery в веб дизайне.

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

Классный сайт на HTML5. Называется он Счастливый отпуск, я думаю, что тут не нужно подробностей.

Это популярный сайт радиостанции, который использует технологии HTML5, JQuery и плавные переходы с красивой анимацией на CSS3.

Огромное спасибо speckyboy.com

HTML Примеры

HTML Атрибуты форм
HTML Задачи

HTML Основы

HTML документ
HTML заголовки
HTML абзацы
HTML ссылки
HTML изображения

К теории HTML Основы

HTML Атрибуты

Атрибут title
Атрибут alt
Атрибут href
Атрибут без кавычек

К теории HTML Атрибуты

HTML Форматирование текста

Жирный (<b>) и важный (<strong>) текст
Акцент (<em>) и курсив (<i>)
Большой (<big>) и маленький (<small>) шрифт
Перевод строк (<hr>) и горизонтальная линия (<br>)
Подсветка текста (<mark>)
Выделение текста, который был удален (<del>)
Выделение текста, который был добавлен (<ins>)
Отображение текста в нижнем индексе (<sub>)
Отображение текста в верхнем индексе (<sup>)

К теории HTML Форматирование

HTML Цитаты

Длинные (<q>) и короткие (<blockquote>) цитаты
Аббревиатура (<abbr>)
Контактная информация (<address>)
Источники (<cite>) и определения (<dfn>)
Направление отображаемого текста (<bdo>)

К теории HTML Цитаты

HTML Программный код

Ввод текста с сохранением всех пробелов, табуляций и переносов строк
Ввод с клавиатуры (<kbd>) и компьютерный вывод(<samp>)
Выделение переменных (<var>) в программном коде

К теории HTML Программный код

HTML Комментарии

Комментарии в коде

К теории HTML Комментарии

HTML Стили

Применение стилей к элементу
Внешняя таблица стилей
Внутренняя таблица стилей
Приоритетность стилей

К теории HTML Стили

HTML Ссылки

Создание абсолютной ссылки
Ссылка на адрес электронной почты
Открытие ссылок в новом окне
Открытие ссылок в окне с нужным именем
Всплывающая подсказка для ссылки
Ссылка на закладку из другой веб-страницы
Изображения-ссылки

К теории HTML Ссылки

HTML Изображения

Как указать путь к изображению?
Альтернативный текст к изображению
Атрибуты «width» и «height»
Задание размеров изображения с помощью атрибута style
Задание размеров изображения с помощью max-width
Создание карты изображений

К теории HTML Изображения

HTML Цвета

Задание цвета по его названию
Задание цвета с помощью RGB
Цвет HEX

К теории HTML Цвета

HTML Таблицы

Простая HTML-таблица
Применение свойства border
Одинарная рамка для таблицы
Поля и интервалы таблицы
Ширина таблицы
Объединение столбцов
Объединение строк
Заголовок таблицы
Теги группирования элементов таблиц

К теории HTML Таблицы

HTML Списки

Нумерованный список
Применение атрибутов type и start
Применение атрибута value
Форматирование нумерованных списков с помощью CSS
Маркированный список
Вложенные списки
Форматирование маркированных списков
Графические маркеры
Списки определений (описаний)

К теории HTML Списки

Блочные и встроенные элементы

Блочные и встроенные элементы
Общие элементы <div> и <span>

К теории HTML Блочные и встроенные элементы

Идентификаторы и классы

Применение идентификатора
Применение атрибутов id и class

К теории HTML Идентификаторы и классы

HTML Фреймы

Структура HTML-документа с фреймами
Убираем границу между фреймами
Управление границей фреймов
Ссылки внутри фреймов
Плавающий фрейм
Удаление границы плавающего фрейма
Изменение размер, стиля и цвета границы встроенного фрейма
Открытие ссылки в окне встроенного фрейма

К теории HTML Фреймы

Макеты веб-страниц

Макет на основе таблицы
Макет на основе DIV-элементов
Макет на основе элементов HTML5

К теории HTML Макеты

HTML Раздел Head

Элемент <title> создает название документа
Элемент <link> служит для подключения внешнего файла CSS
Элемент <style> содержит правила CSS
Элемент <script> присоединяет к документу сценарии
Элемент <base> служит для указания полного базового URL-адреса документа

К теории HTML Раздел Head

HTML JavaScript

Встроенный скрипт
Запуск скрипта
Подключение внешнего скрипта
Использование тега <noscript>
JavaScript может менять HTML контент
JavaScript может менять значение HTML атрибута
JavaScript может менять стили
JavaScript может менять шрифты

К теории HTML скрипт

HTML Специальные символы

Использование кавычек
Дефис и тире
Спецситмвол €

К теории HTML Специальные символы

HTML Формы

Простая HTML-форма
Поле ввода пароля
Использование радио-переключателей
Флажки (checkbox)
Кнопки подтверждения (submit) и очистки (reset)
Группировка элементов формы

К теории HTML Формы

HTML Элементы формы

Текстовая область <textarea>
Раскрывающийся список (select)
Прокручиваемый список
Группировка пунктов списка (optgroup)
Использование кнопки <button>
Использование элемента <datalist>
Метки элементов формы (label)

К теории HTML Элементы формы

Значения атрибута type элемента <input>

Значение атрибута type: text
Значение атрибута type: password
Значение атрибута type: radio
Значение атрибута type: checkbox
Значение атрибута type: submit
Значение атрибута type: button
Значение атрибута type: date
Значение атрибута type: week
Значение атрибута type: month
Значение атрибута type: time
Значение атрибута type: datetime
Значение атрибута type: datetime-local
Значение атрибута type: number
Значение атрибута type: range
Значение атрибута type: color
Значение атрибута type: email
Значение атрибута type: url
Значение атрибута type: search
Значение атрибута type: tel

К теории HTML Aтрибут type элемента <input>

HTML Атрибуты элемента <input>

Атрибут value
Атрибут disabled
Атрибут readonly
Атрибут size
Атрибут maxlength
Атрибут placeholder
Атрибут autofocus
Атрибуты min и mах
Атрибут step
Атрибут autocomplete
Атрибут required
Атрибут novalidate
Атрибут pattern
Атрибут formnovalidate
Атрибут form
Атрибут formaction
Атрибут formenctype
Атрибут formmethod
Атрибут formtarget
Атрибут multiple
Атрибут multiple

К теории HTML Атрибуты элемента <input>

HTML Атрибуты форм
HTML Задачи

36 свежих HTML5 и CSS3 сайтов для вашего вдохновления

Главная » Дизайн

13 сентября 2013

16 комментариев

HTML5 и CSS3 технологии создания сайтов, вместе с адаптивным дизайном, позволяющим создавать один сайт для всех устройств (десктопы, планшеты, мобильные телефоны) выводят веб-дизайн на новый уровень. При этом, совсем не обязательно полностью переделывать существующий код или удалять контент. И сегодня уже многие профессиональные бизнес сайты, сайты портфолио имеют современный дизайн, созданный в соответствии со стандартами этих технологий.

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

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

1. Yep!

2. Trask Industries

3. Parallax

7. mediaBOOM

8. Jobs is free

10. Pixelis   

11. KathArt Interactive – take the tour

12. Friend

13. Lexus: Amazing In Motion

14. Andreas Smetana

15. Agence Interactive

16.  GTi is back! New Peugeot 208GTi   

17. Collector for Windows Phone

19.  The Pragmatic Lab

20. Abby Putinski – Illustration

24. Hotel Bourg Tibourg

26. Webplace Digital Agency

28.  Subsign

29    Nulab Inc.

30. Invictus Award by Paco Rabanne

33. Marmoset

34. ALEXSIGN

35. FCINQ 

36. BeoPlay H6

Готовый код сайта 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 шаблоны – примеры красивых сайтов на HTML5

HTML – это язык для структурирования и представления контента в Глобальной Сети, а также, по совместительству, основная используемая в Интернете технология. HTML шаблоны представляют собой своеобразную основу для сайтов, либо могут быть самостоятельными веб-страницами с незамысловатой структурой. Получается, что любой шаблон, исключая Flash-шаблоны, проходит стадию HTML шаблонов, лишь после приобретая иной вид и свойства.

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

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

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

Leadmotion

Mentally Friendly

Phive

Vertical Garden Design

AZ Trustee Sales

Birrificio Irpino

Slim Kiwi

Essen

Colette Brasserie Vertical Garden Design

Airfront

Stol’n

Nature’s Table

Wantist

Reebok Brazil

Crane Brothers

Наш каталог шаблонов насчитывает около 5000 готовых решений на HTML.

Поделитесь
в социальных сетях

Автор

Администрация

Веб-сайты любой сложности под ключ

Верстка сайта на HTML5 и CSS3

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

Вот изображение сайта, который мы будем верстать на HTML5 и CSS3:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Также скачайте исходники себе на компьютер!

Выше на изображении вы видите контент папки, содержащей финальную демоверсию страницы – как и обещано, ни одного изображения. У нас имеется страница HTML с «продвинутой» разметкой, файл CSS, содержащий стили, управляемые CSS3 и папка, содержащая несколько шрифтов, которые мы собираемся вставить, применив правило @font-face.

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

Верстка на HTML5 — разработка быстрее, а код гибче

Вдобавок к размещению новых семантических элементов HTML5 еще и сильно укорачивает код.

<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<title>Fictive Company Blog | a blog showcasing the übercoolness of HTML5 &amp; CSS3</title>
<!—[if lt IE 9]><script src=http://html5shiv.googlecode.com/svn/trunk/html5.js></script><![endif]—>
<link href=styles.css rel=stylesheet />
</head>

Заметно, что они вышли гораздо аккуратнее, чем то, что у вас получилось бы, если писать HTML4 или XHTML. Объявление doctype занимает всего четыре буквы.

А вот как это было раньше:

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>

Способ HTML5 гораздо лучше, правда? Далее мы открываем тэг html и устанавливаем язык документа. (Подтэг своего языка можно найти в IANA Language Subtag Registry). Еще одно заметное тут изменение – отсутствие кавычек, окружающих значение en. Вам приходилось для подтверждения правильности включать кавычки в XHTML, но исходя из того, что это HTML5, они больше не необходимы.

Может, это покажется совсем небольшим выигрышем: сколько (кило)байт вы сэкономите на нескольких кавычках? Но ведь страница грузится не единожды; со временем она вам за все отплатит. У вас в действительности может приключиться другая сложность — по привычке вы продолжите добавлять кавычки. Если в своем любимом текстовом редакторе вы пользуетесь великолепным плагином Zen Coding, то он добавляет кавычки автоматически. Единственное решение проблемы – найти и убрать их все после окончания работы над файлом.

В элементе head мы сначала определяем набор символов и добавляем заглавие. Весьма стандартно, без кавычек. Двигаясь дальше, вставляем условный комментарий, внутрь которого загружаем файл JavaScript, который поможет нам работать с Internet Explorer (IE) 8 и более ранними его версиями.

Условный комментарий – это вид HTML-комментария, который Microsoft использует в IE, по сути, для реализации отдельных (или всех) версий своего браузера.

Используемый нами здесь комментарий проверяет, является ли браузер, открывающий страницу, Internet Explorer’ом с номером версии менее 9. Другой комментарий, который мы бы использовали, это: ; он проверил бы, является ли открывающий страницу браузер IE версией ниже или равной 8. По существу, между этими двумя комментариями нет разницы; они оба направлены на один ряд версий IE, так что можете взять любой.

Причина включения скрипта HTML5Shiv Реми Шарпа (Remy Sharp) кроется в отсутствии у Internet Explorer’а поддержки элементов HTML5. Проблема IE в том, что он не применяет никаких стилей CSS к элементам, которые не распознает. Таким образом, чтобы заставить более старые версии IE правильно выполнять элементы HTML5, нам нужно при помощи JavaScript создать незнакомые элементы.

Продвигаясь к тэгу body, размечаем область заголовка своей страницы, где полно элементов HTML5:

<body>
<header>
<hgroup>
<h2>Fictive Company Blog</h2>
<h3>a blog showcasing the übercoolness of HTML5 &amp; CSS3</h3>
</hgroup>
<nav id=global>
<ul>
<li><a href=#>Home</a></li>
<li><a href=#>About</a></li>
<li id=services>
<a href=#>Services</a>
<ul id=subMenu>
<li><a href=#>Whatever</a></li>
<li><a href=#>Your Heart</a></li>
<li><a href=#>Desires</a></li>
</ul>
</li>
<li><a href=#>Portfolio</a></li>
<li><a href=#>Contact</a></li>
</ul>
</nav>
</header>

Элемент Header

Сразу же после открытия тэга body мы воспользуемся одним из новых элементов HTML5 – header. Вот какое определение дает элементу заголовка консорциум Word Wide Web (W3C):

Элемент заголовка (header) представляет вступительную группу или вспомогательные средства навигации.

Следуя их рекомендации, элемент header будет содержать наш логотип, подзаголовок и основную навигацию. При вводе элемента заголовка header у нас появляется деталь разметки, содержащая все те части страницы, которые мы интуитивно считаем заголовком. (Или все те детали страницы, которые будут вложены в элемент div с id заголовка.) На странице элемент header можно употребить не один раз, и мы снова будем пользоваться им внутри элементов article, в которых будут содержаться вступления к постам.

Элемент Hgroup

Первым внутри элемента заголовка идет другой новый тэг – hgroup. Мы воспользуемся им для показа соответственно логотипа нашего сайта и подзаголовка в тэгах h2 и h3.

Элемент hgroup используется для группирования набора элементов h2-h6, когда у заголовка имеются множественные уровни, такие как субименования, альтернативные названия или подзаголовки.

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

Теперь у нас возникла проблема: алгоритм схемы не безупречен и не завершен. Например, следующий элемент, который мы обсудим – это элемент nav, и разметка помечает его как «Untitled Section» (область без названия). К разработчикам разметки поступали просьбы об изменении алгоритма схемы для того, чтобы тот представлял элемент nav как «Navigation» (навигация). В любом случае, элемент hgroup обеспечивает вас способом группирования своих заголовков и, таким образом, организует их как структурно, так и семантически.

Элемент Nav

Мы переходим к следующему элементу HTML5 – nav. В nav мы включим основную навигацию сайта, обернутую в неупорядоченный список.

Элемент nav представляет сектор страницы, который ссылается на другие страницы или области внутри страницы: область со ссылками навигации.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Таблица содержания (TOC) в длинном документе;

Навигация «ссылки-цепочки»;

Нумерованные ссылки типа «предыдущий/следующий» и

Связанные посты.

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

Элемент Article

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

<article>
<header>
<div class=time>
<div class=year>2010</div>
<div class=date>16<span>apr</span></div>
</div>
<h2>Sample Post 1</h2>
<div class=comments>38</div>
</header>
<p>Curabitur ut congue hac, diam turpis[…]</p>
<footer>
<em>Written by:</em> <strong>Author Name</strong>
<span class=newLine><em>Tags:</em> <a class=tags href=#>cool</a><a class=tags href=#>modern</a><a class=tags href=#>hype-friendly</a></span>
<a class=button href=#>Continue Reading</a>
</footer>
</article>

Вот определение W3C для элемента article:

Элемент article представляет в документе модульную композицию […], таким образом, он предназначен стать автономно распределяемым или многократно используемым, например, при синдикации (одновременном опубликовании контента на нескольких веб-узлах).

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

Вы, несомненно, заметили, что внутри article мы разместили элементы заголовка и нижнего колонтитула. Как header, так и footer могут быть использованы более одного раза на отдельной HTML-странице. Так как header – это «вступительная группа или вспомогательный элемент навигации», то мы включили в него дату, название и количество комментариев. Далее, у нас имеется параграф с отрывком из поста, за которым следует footer (нижний колонтитул).

Элемент Footer

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

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

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

Общий нижний колонтитул содержит три элемента секций и извещение об авторском праве. Оба варианта использования элемента footer правомерны и соответствуют рекомендации W3C.

Элемент Section

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

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

Элемент section довольно хитрый, потому что в определении по спецификации кажется очень похожим на элемент div. Я попался в эту ловушку, когда начал писать код для демо-страницы; я разместил внутри элемента section три элемента article. Вскоре я понял ошибочность своих методов. Единственный способ решить, употреблять ли section – это посмотреть, нужно ли той области, которую вы хотите обернуть элементом section, название (заголовок). Из определения видно, что у элемента section обычно есть заголовок.

Другой вопрос, который полезно задавать для установления обоснованности использования элемента section, это: добавляете ли вы его исключительно для стилей? Вы добавляете его просто потому, что нужно выделить эту секцию с помощью JavaScript, или потому что нужно применить к ней обычный стиль, и вы вместо того должны использовать элемент div.

Обертывание в тэг section трех элементов article нашей демо-страницы было бы оправдано, если бы section включал заголовок типа «Последние посты в блогах». Это имело бы смысл; иначе тэг, внутри которого расположены элементы article – это просто поддержка стилей – нечто, помогающее нам нацелиться на него при помощи JavaScript или CSS.

Элемент Aside

Последний используемый для демо-страницы элемент HTML5 – aside; мы использовали его как контейнер боковой колонки.

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

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

Мы разместили два section и один nav. Первый элемент section содержит ссылки на Twitter и RSS, а второй представляет последний твит (запись пользователя в Twitter’е). Второй элемент section, кроме того — один из редких случаев, когда у него отсутствует заголовок. У него могло бы быть название, что-нибудь типа: «Последний твит», но, я думаю, это необязательно, потому что читатели привыкли видеть блоки вроде этого, а метка Twitter’а под цитатой очень узнаваема. Элемент nav нашей боковой колонки используется для отражения списка блогов и, в отличие от основной навигации, у него есть заголовок.

Последнее слово

Итак, вот и подошла к завершению первая часть нашей статьи посвящённой верстке сайта на HTML5 и CSS3. Я старался сделать ее настолько короткой, насколько можно, и не тратить слишком много времени на неопределенности в спецификации HTML5, потому что она еще не закончена. Тем временем нам придется полагаться на сообщество и труд «лекарей» HTML5, что станут нашими проводниками по внедрению новых элементов в сайты.

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

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

Автор: Marko Randjelovic

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

E-mail: [email protected]

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

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

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

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

Для удобства я сделал архив с изображениями и уже готовыми пустыми файлами 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 (они не так сложны как кажется).

8 лучших сайтов для качественного HTML-кодирования

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

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

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

Вот восемь сайтов, которые предлагают хорошие примеры кода HTML и помогут вам стать экспертом по HTML.

HTML Dog предлагает учебные пособия, методы, ссылки и примеры HTML-кода.Они также предлагают CSS и JavaScript, что является дополнительным бонусом для веб-разработчиков. HTML Dog использует HTML5, поэтому вы получаете актуальную информацию.

Их примеры HTML охватывают все виды синтаксиса с демонстрациями для каждого.

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

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

W3Schools широко известен как лучший ресурс для веб-разработчиков, предлагающий примеры кодирования, от PHP до JavaScript (что такое JavaScript?). Вы также найдете раздел с базовыми примерами кодирования HTML.

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

В Mozilla Developer Network (MDN) есть документация для веб-разработчиков.Существует полный список руководств по HTML и примеров кода, которые можно попробовать. Большинство примеров встроены в их учебные пособия, поэтому проработка их пути даст вам множество возможностей для обучения.

Разработчики высоко ценят MDN за детальность.Они очень подробно описывают веб-разработку, что дает вам преимущество, поскольку их разделы связаны друг с другом. Вы научитесь хорошему поведению, так что когда вы начнете кодировать CSS или JavaScript, все будет работать гладко.

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

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

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

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

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

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

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

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

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

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

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

Tutorials Point — это простой HTML-ресурс.Легко перемещаться и точно определять элементы HTML для примеров кодирования. Подобно остальным примерам, его можно добавить в закладки и иметь под рукой при написании кода.

Дополнительные примеры HTML-кода и ресурсы

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

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

Ознакомьтесь с нашим руководством по пониманию основ HTML-кода, оно идет рука об руку с множеством этих примеров.

Что делать со старым iPod: 6 отличных идей

Ваш старый iPod все еще пригодится! Вот несколько способов вдохнуть в него новую жизнь.

Об авторе

Энтони Грант
(41 опубликованных статей)

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

Ещё от Anthony Grant

Подпишитесь на нашу рассылку новостей

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

Еще один шаг…!

Подтвердите свой адрес электронной почты в только что отправленном вам электронном письме.

.

Образец веб-страницы в HTML

2. Веб-дизайн и разработка
3. Разработка сайта
4. Образец веб-страницы в HTML

Бад Э. Смит

Часть создания веб-страниц для чайников Шпаргалка

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

 






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

 Первый элемент в вашем списке 
 Второй элемент;  выделите курсивом  ключевые слова 

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

 Наконец, сделайте ссылку на  другую страницу  на своем собственном веб-сайте. 

 & # 169; Wiley Publishing, 2011 г. 
 
 

Весь этот HTML-код переводится на веб-страницу, которая выглядит примерно так:

.

HTML Базовый

В этой главе мы покажем несколько основных примеров HTML.

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

Документы HTML

Все документы HTML должны начинаться с объявления типа документа: .

Сам документ HTML начинается с и заканчивается .

Видимая часть HTML-документа находится между и .

Пример

Мой первый заголовок

Мой первый абзац.

Попробуй сам »

Декларация

Объявление представляет тип документа и помогает браузерам правильно отображать веб-страницы.

Он должен появляться только один раз вверху страницы (перед любыми HTML-тегами).

В объявлении регистр не учитывается.

Объявление для HTML5:

HTML-заголовки

Заголовки

HTML определяются тегами

–

.

определяет наиболее важный заголовок.

определяет наименее важные
заголовок:

Пример

Это заголовок 1

Это заголовок 2

Это заголовок 3

Попробуй сам »

---

---

HTML абзацы

абзацев HTML определяются тегом

:

---

HTML-ссылки

HTML-ссылки определяются тегом :

Назначение ссылки указано в атрибуте href .

Атрибуты используются для предоставления дополнительной информации об элементах HTML.

Вы узнаете больше об атрибутах в следующей главе.

---

Изображения HTML

изображений HTML определяются тегом .

Исходный файл ( src ), альтернативный текст ( alt ),
ширина и высота предоставляются как атрибуты:

Пример

Попробуй сам »

---

Как просмотреть исходный код HTML?

Вы когда-нибудь видели веб-страницу и задавались вопросом: «Эй! Как они это сделали?»

Просмотреть исходный код HTML:

Щелкните правой кнопкой мыши страницу HTML и выберите «Просмотр исходного кода страницы» (в
Chrome) или «Просмотр исходного кода» (в Edge) или аналогичное в других браузерах. Это откроет окно
содержащий исходный HTML-код страницы.

Проверить элемент HTML:

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

.

Шаблон HTML5: базовый шаблон для любого проекта

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

В этой статье мы рассмотрим, с чего начать. Давайте начнем с простой страницы HTML5:

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

Доктип

Во-первых, у нас есть декларация типа документа или doctype . Это просто способ сообщить браузеру или любому другому парсеру, какой тип документа он просматривает.В случае файлов HTML это означает конкретную версию и разновидность HTML. Тип документа всегда должен быть первым элементом в начале любого файла HTML. Много лет назад объявление doctype было уродливым и трудно запоминающимся беспорядком. Для XHTML 1.0 Strict:

И для переходного HTML4:

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

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

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

Элемент html

Следующим шагом в любом HTML-документе является элемент html , который существенно не изменился в HTML5. В нашем примере мы включили атрибут lang со значением en , которое указывает, что документ составлен на английском языке. В синтаксисе на основе XHTML вам потребуется включить атрибут xmlns .В HTML5 это больше не нужно, и даже атрибут lang не нужен для проверки или правильной работы документа.

Итак, вот что у нас есть, включая закрывающий тег :

Головка Элемент

Следующая часть нашей страницы — это раздел . Первая строка внутри заголовка — это строка, которая определяет кодировку символов для документа.Это еще один элемент, который был упрощен со времен XHTML и HTML4, и является необязательной функцией, но рекомендуется. Раньше вы могли писать так:

HTML5 улучшает это, сокращая кодировку символов тега до минимума:

Почти во всех случаях utf-8 — это значение, которое вы будете использовать в своих документах.Полное объяснение кодировки символов выходит за рамки этой статьи, и, вероятно, вам это тоже не будет интересно. Тем не менее, если вы хотите погрузиться немного глубже, вы можете прочитать эту тему на W3C или WHATWG.

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

В этих строках HTML5 практически не отличается от предыдущего синтаксиса.Заголовок страницы (единственный обязательный элемент внутри заголовка ) объявлен таким же, как и всегда, а включенные нами метатеги являются просто необязательными примерами, указывающими, где они будут размещены; вы можете поместить сюда столько действительных мета элементов, сколько захотите.

Ключевой частью этого фрагмента разметки является таблица стилей, которая включается с помощью обычного элемента link . Для link нет обязательных атрибутов, кроме href и rel .Атрибут типа (который был обычным в старых версиях HTML) не является обязательным, и он никогда не нужен для указания типа содержимого таблицы стилей.

Выравнивание игрового поля

Когда был представлен HTML5, он включал ряд новых элементов, таких как статья и раздел . Вы могли подумать, что это серьезная проблема для поддержки нераспознанных элементов старым браузером, но ошиблись. Это потому, что большинство браузеров не заботятся о том, какие теги вы используете.Если бы у вас был HTML-документ с тегом recipe (или даже тегом ziggy ), и ваш CSS прикрепил к этому элементу некоторые стили, почти каждый браузер продолжал бы работать так, как если бы это было совершенно нормально, применяя ваш стиль без жалоба.

Конечно, такой гипотетический документ не сможет пройти проверку и может иметь проблемы с доступностью, но он будет правильно отображаться почти во всех браузерах, за исключением старых версий Internet Explorer (IE). До версии 9 IE предотвращал получение стиля нераспознанными элементами.Эти загадочные элементы воспринимались механизмом визуализации как «неизвестные элементы», поэтому вы не могли изменить их внешний вид или поведение. Сюда входят не только наши воображаемые элементы, но и любые элементы, которые еще не были определены на момент разработки этих версий браузеров. Это означает (как вы уже догадались) новые элементы HTML5.

Хорошая новость заключается в том, что в наши дни использование IE резко упало, при этом глобальное использование IE11 упало примерно до 2,7% (по состоянию на 2018 год), а версии до этого практически исчезли с рынка.(Вы можете просмотреть статистику использования браузера и поддержки функций HTML5 в целом на сайте Могу ли я использовать.)

Если вам действительно нужна поддержка старых браузеров, вы все равно можете использовать надежный HTML5 Shiv, очень простой фрагмент JavaScript, первоначально разработанный Джоном Ресигом. Вдохновленный идеей Шорда Вишера, он сделал новые элементы HTML5 стилизованными в более старых версиях IE. На самом деле, сейчас в этом не должно быть необходимости. Как указано в разделе «Могу ли я использовать», элементы HTML5 поддерживаются всеми современными браузерами и даже их самыми последними более старыми версиями.(Нажмите «Показать все», чтобы увидеть все версии браузеров.) Единственное исключение - некоторые браузеры не распознают новый основной элемент . Однако для этих браузеров вы все равно можете использовать этот элемент, если добавите подходящий стиль (например, установите его как блочный элемент).

Остальное - это история

Если посмотреть на остальную часть нашего начального шаблона, у нас есть обычный элемент body вместе с его закрывающим тегом и закрывающим тегом html .У нас также есть ссылка на файл JavaScript внутри элемента script .

Подобно тегу link , обсуждавшемуся ранее, тег

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

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

Однако в некоторых случаях (например, с HTML5 shiv) сценарию может потребоваться размещение в заголовке документа, потому что вы хотите, чтобы он вступил в силу до того, как браузер начнет визуализацию страницы.

Следующие шаги

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

Чтобы отточить свои знания CSS, наша учебная программа по современным проектам CSS поможет вам освоить новейшие, расширенные версии CSS3.

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

.