Простой готовый код сайта html css скачать изучить. Этап #2

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

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

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

Оглавление:

• Из прошлого опыта
• Необходимые азы ИТ
• Какой инструментарий нужен
• Макет качаем и ставим
• Изучаем его основы
• Как изнутри устроено
• Что в корне
• Принципы описания везде едины
• Как это увидеть
• Основы html разметки макета
• Разбираемся с технологией
• Меняем внешность через стили
• Задаем главные правила центра макета
• Обеспечиваем мобильную доступность
• Специальные возможности
• Все замечательно, но есть нюансы
• Подводим итоги

Синонимы

Для удобства идентификации они сгруппированы в соответствии с текстом статьи.

Показать / скрыть

Собственный опыт начала познания сайтостроения

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

Настоящий обучающий рабочий каркас статического веб-приложения - итог начального периода того пройденного пути.

Знание ПК

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

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

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

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

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

Редакторов разработано достаточно, выбор большой. Только не советую использовать стандартный «Блокнот» Windows. В этой операционной среде популярен Notepad++, сам пользуюсь. Получить последний официальный релиз по адресу - notepad-plus-plus.org/downloads/ .

Он русифицирован и способен поддерживать все актуальные в настоящее время языки. После установки потребуется настроить кодировку UTF-8 и обязательно без BOM. Сейчас это фактически стандарт.

Желательно поинтересоваться роликом про Notepad++ тоже, на забывая о паузах.

На всякий случай, несколько слов про Linux. В среде Ubuntu предпочитаю использовать редактор gedit, за его простоту. Хотя имеется множество других разных редакторов, включая тот же Notepad++, работающий в качестве snap-пакета. Другие: Geany, Atom, Cuda Text, … . Некоторые из них доступны в стандартном Центре приложений.

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

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

Кликнув на ссылку Демо, можно познакомиться с реальным отображением его в сети. Только нужно иметь в виду, это демонстрационный пример. Поэтому он закрыт от индексации поисковиками, но об этом тоже позднее. Ссылка Скачать позволит загрузить себе на ПК архив template1.zip, упакованный исходник рассматриваемого будущего приложения.

Следующий этап - создание папки с любым придуманным именем и распаковка полученного архива в эту новую папку. Предполагается владение этим навыком.

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

Изучаем готовый код сайта html css

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

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

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

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

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

Файл index в корневой директории - основной компонент. Шесть остальных носят вспомогательное, но важное техническое значение.

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

Предоставление следующих возможностей:

• .htaccess – доступные пользователям настройки конфигурации web-сервера;
• errors.php - скрипт php, корректная обработка результатов возможных ошибочных запросов HTTP;
• favicon.png и favicon.ico - символическое изображение настоящего проекта в сети: в выдаче Яндекса и Google, во вкладках интернет обозревателей, ...;
• robots.txt – рекомендации обхода ресурса, включая индексацию, поисковыми программными продуктами, называемые «ботами»; не являются обязательными к выполнению, особенно касается Google;
• style.css - определение каскадных табличных стилей CSS3 в связке с разметкой документов, создаваемого приложения.

Общие принципы описания исходных текстов готового кода

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

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

Любой исходный веб-документ возможно увидеть после отображения в браузере ожидаемого контента, совершив один из вариантов действий:

• самый простой - нажать клавиши Ctrl и U синхронно;
• щелкнуть на свободное пространство кнопкой, что справа на «мыши», в возникшем меню выбрать пункт обозначающий исходный код;
• в меню браузера найти пункт обозначающий подобное «Инструменты разработчика»; очень полезный вариант, можно поизучать исходники и много чего еще интересного.

Основы понятий языка разметки HTML

Разметка документа осуществляется благодаря, так называемым, элементам HTML с их атрибутами. Их более 100, по мере развития технологий количество эпизодически меняется.

На изобр. 1 выше и 2 ниже можно видеть, что большинство элементов начинаются с открывающего углового тега (1), завершаются закрывающим (2). Пример оформления фрагмента секции заголовка - head.

Таким же образом выглядят большинство других составляющих: блоки - div, абзацы - p, ссылки - «якоря» - a, иерархия текстовых заголовков - h1-h6, … .

Внутренние компоненты открывающего тега могут иметь атрибуты различного предназначения (5).

Другой тип - одиночные составляющие (3): описание контента метаданных - link и meta, перевод строки - br, изображение - img, компонент формы - input, … .

Особым образом оформляются комментарии (4). В первом случае, благодаря комментарию, решается проблема с ошибками валидации элемента Яндекса - noindex, который закрывает от индексации стр. 12-58. Во втором - просто комментарий стр. 54.

Метод блочной верстки

Такой метод применен в рассматриваемом каркасе и с некоторыми особенностями в правой колонке. Там он используется, главным образом, для придания структуре некоторой универсальности, конструкция - main лишь обернута в div и ничего более. Исключения - разделы «Технологии» и «Карта ...», где div с классом text имеет действительно блочное значение, а его контент разделен на общий и уникальный находящийся внутри main.

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

Если внимательно приглядеться заметно, что во всех исходниках, кроме 1-й строки, присутствует система блоков, включенных друг в друга: стр. 2-60 внешний, в который вложены head - технический заголовок стр. 3-10 и body - тело документа стр. 11-59. В свою очередь, в body вложены: nav, header, footer, div и другие.

Немного истории. В 90-е годы прошлого века и в начале нынешнего, существовал более 10 лет табличный метод, ныне почти отживший. С появлением языка таблиц стилей в комбинации с элементом div зародился блочный и вытеснил предыдущий.

Основные понятия синтаксиса языка таблиц стилей

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

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

Например:

Связь между CSS и HTML осуществляется благодаря селекторам и атрибутам - class и id, которые могут передавать требуемые свойства и значения web-документу. Таким образом, вариации свойств и значений селекторов позволяют во внешний вид проекта вносить изменения, часто весьма значимые. На скриншоте слева они обозначены красными стрелками. Подключается style.css благодаря строке 9 на изобр.1.

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

Его левая колонка представляет собой блок навигации nav с классом menu, а правая - блок div с классом text. Как это можно видеть на изобр. 1 и 2 в стр. 16-23 и стр. 24-54 и в style.css изобр. 3. стр. 38-48 и стр. 95-102, соответственно.

Особое внимание хочется обратить на свойства width: 20%; - задает ширину левой колонки; width: 80%; - ширину правой; float: left; - правильно позиционирует обе. Наглядно представлены в разделе ниже. Если свойства заданы с ошибками в центральной части произойдут смещения. Например, конструкции расположатся одна под другой по вертикали, а не по горизонтали, как задумано.

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

Наличие адаптивного web-дизайна давно стало одним из обязательных требований к веб-проектам. Иначе продвинуть его в сети не представляется возможным. Для достижения желаемого реализовано следующее:

• во всех html файлах в конструкцию head вписана стр. 5 изобр. 1;
• в style.css размеры основных компонентов на большом экране стр. 43, 98 и в правилах для экранов мобильных устройств стр. 222-227 указаны в процентах, как наблюдается на изобр. 3.

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

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

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

Статические сайты - достоинства, недостатки, решения

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

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

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

Решение имеется - отделение частного от общего и совместное их отображение лишь после предварительной необходимой обработки.

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

1) Средства генерации подобных ресурсов:

• Jekyll - предназначено для ведения блога в Github;
• Hugo - обладает высокой производительностью, реализовано на Go;
• Gridsome - использует Vue.js;
• Eleventy - предназначено для любителей JavaScript и Node.js;
• Pelican - решение на базе Python;
• ... .

2) Динамическое формирование страниц с помощью различных серверных web-языков, директив - вставок SSI и возможностей JavaScript, … .

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

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

Только должно помнить об открытии доступа поисковикам к размещаемому в сети ресурсу. В противном случае поисковые системы никогда не узнают о разработанном.

Заключение

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

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

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

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

Спасибо за прочитанную статью. Не люблю длинные, так получилось.

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

С уважение, Михаил Ярошевич.