Готовый код сайта на html и css статика получить. Этап #2

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

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

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

Требуемое программное окружение

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

Редакторов существует множество, выбор большой, но не рекомендуется использовать «Блокнот» Windows. Популярен Notepad++. Его необходимо настроить на кодировку UTF-8 и обязательно без BOM. Сейчас эта кодировка фактически является стандартом. Кстати, Notepad++ работает со всеми актуальными в настоящее время языками.

Установка шаблона сайта на компьютер

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

Кликнув на ссылку Демо, можно познакомиться с реальным его представлением в сети, только нужно иметь в виду, этот лишь демонстрационный пример. И поэтому он пока закрыт от индексации поисковиками, но об этом тоже позднее. А ссылка Скачать позволит загрузить к себе на компьютер архив template1.zip (упакованный исходный текст рассматриваемого будущего веб-сайта).

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

Структура шаблона

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

Структура готового кода сайта на html и css может быть любой, главное чтобы она упорядочивала и систематизировала необходимый порядок нахождения своих компонентов. Файлы в корневой папке носят вспомогательное техническое значение, кроме index.html, если на него кликнуть, то откроется страница с заголовком «Создание WWW». Назовем ее главной. Современные браузеры выведут ее на экран полностью лишь после нажатия соответствующей кнопки о продолжении чтения. В устаревших такая возможность не работает, они всегда отображают сразу весь текст.

Технические файлы в корневой директории

Общие принципы описания

Результат верстки рассматривается лишь на примере Главной страницы, поскольку принцип создания един для всех. Он осуществляется с помощью написания кода на языке разметки HTML5 и кода на языке таблиц стилей CSS3. Тексты кодов снабжены необходимыми комментариями.

Как быстро посмотреть нужные коды

Первоначальные пояснения к языку разметки

Код разметки состоит из, так называемых, элементов HTML. Большинство из них начинаются открывающим тегом - <элемент>, а завершаются закрывающим - </элемент> (оформление абзаца - <p> ... </p> ). Некоторые теги не имеют закрывающих тегов (разрыв строки - <br>). Особым образом оформляются комментарии - <!-- ... --> .

В нашем случае используется, метод «блочной» верстки, который стал активно применяться с появлением языка CSS. При этом, элемент <div> , будучи универсальным, стал весьма популярным элементом. Хотя в данном шаблоне этот элемент именно в таком качестве присутствует в основном для придания структуре некоторой универсальности, а принциально важное блочное значение (с классом text) он имеет лишь в разделах «Технологии» и «Карта сайта».

Необходимо отметить, в последнее время появились и другие блочные элементы, которым придается еще и семантическое значение. В верстке данного сайта используется три подобных элемента: <nav> (блок навигации), <main> (основной блок), <footer> (блок подвала). На самом деле существует их гораздо больше.

Можно видеть, что весь документ html, кроме 1-й строки <!DOCTYPE html> , является системой вложенных друг в друга блоков кода. Внешним блоком является <html lang="ru"> … </html> , в который вложены блоки <head> … </head> (технический заголовок) и <body> … </body> (основная часть документа). В свою очередь в <body> вложены например блоки: <nav>, <main>, <footer>, <div>, <p> и др.

Основные понятия синтаксиса языка CSS

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

Хотя встречаются и строковые варианты оформления. А как селекторы выглядят в реальности можно видеть в style.css, где используется готовый код CSS в различных его вариантах.

Например:

Связь кодов CSS и HTML осуществляется благодаря селекторам, которые могут передавать требуемые свойства и значения в код HTML с помощью атрибутов class и id. Таким образом, вариации свойств и значений селекторов позволяют на сайт вносить изменения весьма значительные (на скриншоте они обозначены красными стрелками). А подключается style.css благодаря тегу: <link rel="stylesheet" type="text/css" href="style.css" media="screen"> (строка #9 в index.html).

Верстка колонок

Колонка слева представляет собой блок навигации с семантическим тегом <nav> и классом menu, а правая — блок с тегом <div> и классом text, как это можно видеть в файлах index.html (соответственно стр. 15-22 и стр. 23-53). В файле style.css стр. 40-48 и стр. 96-102. Особое внимание необходимо обратить на свойства width и float (width: 20%; - задает ширину левой колонки; width: 80%; - ширину правой; float: left; - правильно позиционирует обе колонки, без этого свойства колонки будут располагаться одна под другой).

Семантический дизайн

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

И хотя, правила применения этих тегов пока весьма противоречивы и в настоящее время их использование необязательно, но в будущем возможно все. По этой причине, я предпочитаю их вставлять в код, но в самой минимальной степени. Это теги: <header>, <nav>, <main> и <footer>. Кстати, тег <main> предназначен для представления главной и обязательно уникальной части контента. Поэтому на страницах «Технологии» и «Карта сайта» ссылки вынесены за пределы <main>.

Адаптивный дизайн

Для достижения такого результата необходимо в файлах index.html в <head> установить тег <meta name="viewport" content="width=device-width, initial-scale=1.0"> (стр. 5). В файле style.css должны быть указаны свойства width (ширина колонок) в процентах, а также должны быть прописаны правила для экрана мобильного устройства (стр. 224-228).

Статические сайты всем хороши, но ...

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

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

Заключение

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

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