Изучить готовый код сайта на html и css статического Этап #2
Этот материал для тех, кто не имея никакого опыта, хочет освоить процесс построения статических Интернет ресурсов с нуля, используя базовые веб-технологии. Проще и быстрее всего этого добиться изучая на практике реальный пример простейшего обучающего шаблона готового кода сайта на html и css с минимальным текстовым наполнением, адаптивного под любые размеры экрана и даже с некоторыми элементами SEO (оптимизация для поисковиков).
Остается лишь понять, как это все работает, затем наполнить шаблон (каркас) своим контентом (содержанием), а после завершения оптимизации SEO (тема другого рассмотрения) новый законченный веб-ресурс будет готов к размещению в Интернете. Если появится потребность скорректировать его дизайн под свой вкус, то это легко проделать, предварительно разобравшись в предложенном исходном тексте.
Необходимо отметить, здесь рассматриваются логическая структура и концепция создания статического сайта. В нем страницы отображаются в браузерах именно в том виде, в котором они хранятся. Еще существуют технологии их динамического формирования (тема предназначена для последующего рассмотрения).
Требуемое программное окружение
Статический простой сайт тем хорош, что для его создания, отладки и получения готового результата требуется самое минимальное количество программных средств. Необходим лишь браузер, в среде которого создаваемый продукт будет отображаться и редактор для написания исходного кода или его корректировки.
Редакторов существует множество, выбор большой, но не рекомендуется использовать «Блокнот» Windows. Популярен Notepad++. Его необходимо настроить на кодировку UTF-8 и обязательно без BOM. Сейчас это фактически является стандартом. Кстати, Notepad++ работает со всеми актуальными в настоящее время языками.
Примечание
Если уважаемому посетителю моего блога все вышесказанное уже знакомо, то разумно пропустить дальнейшее описание. И просто скачав предлагаемый каркас кода, сразу приступить к реализации своего собственного проекта. Только необходимо помнить об открытии доступа поисковикам к размещаемому в сети ресурсу. В противном случае поисковики никогда не узнают, что Вы создали.
Установка шаблона сайта на компьютер

Кликнув на ссылку Демо, можно познакомиться с реальным его представлением в сети, только нужно иметь в виду, этот лишь демонстрационный пример. И поэтому он пока закрыт от индексации поисковиками, но об этом тоже позднее. А ссылка Скачать позволит загрузить к себе на компьютер архив template1.zip (упакованный исходник рассматриваемого будущего веб-приложения).
Следующий этап - создание папки с любым именем (даже - template1) и распаковка уже имеющего архива в эту новую папку. В результате в папке появится готовая структура, состоящая из шести папок и семи файлов. Назовем ее корнем сайта. Еще ее называют корневой директорией или корневым каталогом, зависит от личных предпочтений.
Структура готового шаблона
Все папки являются его разделами (визуально отображаемыми), кроме images, в которой находятся лишь используемые изображения. В списке каждого раздела имеется, как минимум один файл index.html (страница самого раздела). Остальные, если они там находятся, являются статьями каждого конкретного раздела. Кликнув на любой пункт этого списка с расширением html можно будет в браузере увидеть ожидаемый результат, а также, используя гиперссылки, переходить в другие места.
Структура готового кода сайта на html и css может быть разной, главное чтобы она упорядочивала и систематизировала необходимый порядок нахождения своих компонентов. Файл index в корневой папке - основной компонент (шесть остальных носят вспомогательное техническое значение). Если кликнуть на него, то откроется экран с заголовком «Создание WWW». Назовем этот экран главной страницей. Современные браузеры выведут ее полностью лишь после нажатия предложенной кнопки о продолжении чтения. В устаревших такая возможность не работает, они всегда отображают сразу весь информационный материал.
Технические файлы в корневой директории
- .htaccess - настройки на хостинге конфигурации веб-сервера (доступные пользователям);
- errors.php - скрипт на языке php, обрабатывающий случаи возникновения ошибочных запросов HTTP;
- favicon.png и favicon.ico - символическое изображение данного проекта, отображаемое в выдаче Яндекса и во вкладках интернет обозревателей;
- robots.txt - используется при обходе ресурсов поисковыми программными продуктами (назовем их ботами) и содержит лишь рекомендации, не являющиеся обязательными к выполнению (например для Google);
- style.css - необходим для отображения стилей CSS3 создаваемого приложения в связке с его разметкой.
Общие принципы описания
Результат верстки рассматривается лишь на примере главной страницы, поскольку принцип создания един для всех. Он осуществляется с помощью написания исходных текстов на языках разметки HTML5 и таблиц стилей CSS3. Все тексты снабжены необходимыми комментариями.
Как быстро посмотреть нужные исходные тексты
- самый простой - нажать клавиши Ctrl и U синхронно;
- щелкнуть по контенту (текст, изображение и т.д.) кнопкой, что справа на «мыши», и в возникшем меню выбрать пункт обозначающий исходный код;
- инструменты браузера для разработчика (весьма полезный вариант) - можно поизучать исходники и много чего еще интересного и полезного.
Первоначальные пояснения к языку разметки
Разметка документа состоит из, так называемых, элементов HTML. Большинство из них начинаются открывающим тегом - <эл- т>, а завершаются закрывающим - </эл- т> (оформление абзаца - <p> ... </p> ). Некоторые бывают одиночными (разрыв строки - <br> или изображение - <img> ). Особым образом оформляются комментарии - <!-- ... --> .
В нашем случае используется, метод «блочной» верстки, который стал активно применяться с появлением языка таблиц стилей. При этом, элемент <div>, являясь универсальным, стал весьма популярным элементом. Хотя в данном каркасе он именно в таком качестве присутствует в основном для придания структуре некоторой универсальности, а принципиально важное блочное значение (с классом text) он имеет лишь в разделах «Технологии» и «Карта ...».
Необходимо отметить, в последнее время появились и другие блочные элементы, которым придается еще и семантическое значение. В верстке данного продукта используется три подобных элемента: <nav> (навигация), <main> (основная часть), <footer> (подвал). На самом деле существует их гораздо больше.
Можно видеть, что весь код любой страницы, кроме ее 1-й строки <!DOCTYPE html>, является системой вложенных друг в друга блоков. Одним из них является внешним конструкция <html lang="ru"> … </html>, в которую вложены блоки <head> … </head> (технический заголовок) и <body> … </body> (тело документа). В свою очередь в <body> вложены например блоки: <nav>, <main>, <footer>, <div>, <p> и др.
Основные понятия синтаксиса языка таблиц стилей
Его синтаксис весьма прост, поскольку основу составляет единственное понятие, называемое селектором, а его структура часто выглядит, как на изображении ниже.

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

Связь CSS и 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 (соответственно стр. 16-23 и стр. 24-54).
В 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 (ширина колонок) в процентах, а также должны быть прописаны правила для экрана мобильного устройства (стр. 223-227).
Готовые статические сайты всем хороши, но ...
Да, они хороши своей простотой, скоростью и безопасностью. При этом, им свойственен весьма минималистичный функционал и значительная трудоемкость редактирования общих частей (шапки, меню и подвала), поскольку за этим всегда следует необходимость внесения множества однообразных изменений на все страницы. Для небольших ресурсов (типа визитки), состоящих лишь из нескольких страниц, это не представляет труда, а если их сотни, тогда — проблема.
Существует пока лишь два пути ее решения, каждый не без своих плюсов и минусов, но в основе обоих лежит необходимость отделения общих частей от контента. Первый путь - генераторы статических сайтов. Второй - динамическое формирование страниц, с применением различных веб-технологий. Все это планируется рассмотреть позднее.
Заключение
В настоящей статье представлен лишь самый минимальный объем информации на тему создания виртуальной продукции. Раскрыть ее в полной мере лишь в одной короткой статье очень затруднительно. С другой стороны, она дает возможность познакомиться с основой структуры будущего приложения и базовыми языками реализации. После внесения небольших, но важных изменений в исходный код можно легко превратить шаблон в настоящий сайт, полностью готовый к размещению в сети, но об этом позже. А после применения дополнительных технологий, он постепенно и последовательно будет совершенствоваться, обретая все большее количество технических и функциональных возможностей.
В этой связи, следуя методике MYsiteD, серия публикаций на данную тему будет продолжена. И следующий информационный материал, как было заявлено, будет посвящен тоже готовому коду сайта на html и css, но уже динамическому с применением директив ssi.