Готовый код сайта html css скачать применить Этап #2 MYsiteD

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

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

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

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

При просмотре видео отображаемые экраны рекомендуется ставить на паузу.

2) Внимательно прочитать в статье пункты 1-3, а пункт 3 еще и выполнить; т.е. установить предлагаемый макет себе на ПК.

3) Приступить к изучению полученного, используя остальные пункты.

4) Начать практическую реализацию своего проекта, задействуя изученный макет.

Применяемые синонимы.

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

Показать | Скрыть

1. Собственный прошлый опыт

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

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

1.1 Необходимые знания

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

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

Важно понимать:

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

Убеждался в этом не раз.

2. Программное окружение

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

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

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

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

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

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

С реальным отображением данного деморесурса можно познакомиться, скопировав доменное имя template1.itworldmy.ru в адресную строку браузера и отправив на выполнение. Только нужно иметь в виду, это демонстрационный пример, поэтому закрыт от индексации поисковиками, но об этом позднее.

Ссылка СКАЧАТЬ позволит загрузить себе на ПК упакованный исходник рассматриваемого демо, пока в виде архива template1.zip.

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

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

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

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

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

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

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

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

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

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

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

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

4.2 Общее описание готового кода

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

4.2.1 Посмотреть изменить исходные тексты

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

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

А для корректировки необходим редактор.

4.3 Основы разметки 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.

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

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

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

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

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

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

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

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

Например:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

⚬ ⚬ ⚬

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

С другой стороны дана возможность:

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

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

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

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