Изучить готовый код сайта на html и css статического Этап #2

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

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

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

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

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

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

Примечание

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

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

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

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

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

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

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

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

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

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

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

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

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

Разметка документа состоит из, так называемых, элементов 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.