Компоненты веб-сайта. От WordPress до Jekyll 2

В предыдущая статья Я начал объяснять различия между тремя типами инструментов для создания блога и почему эти различия заставили меня отказаться от того варианта, который я использовал; WordPress в пользу конструктора статических сайтов, такого как Jekyll.

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

Компоненты веб-сайта

Три основных компонента веб-сайта:

• HTML: обеспечивает основную структуру сайта.
• CSS: обрабатывает представление содержимого.
• Javascript: управляет интерактивностью различных частей сайта.

HTML

HTML означает язык разметки гипертекста: он называется «языком разметки», потому что использует теги для идентификации различных типов контента и целей, которые каждый из них имеет для Интернета.. Вы уже можете сойти за эксперта, с презрением смотрящего на тех, кто говорит, что это язык программирования.

Например, в текущей спецификации HTML5 используются следующие теги

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

В нашем блоге о предполагаемом садоводстве у нас будет что-то вроде этого.

Я поместил это как изображение, потому что политика безопасности Linux Adictos Они не позволяют включать HTML-код.

Если вы скопируете этот текст в текстовый редактор и сохраните его как индекс.html, вы увидите текст Это мой блог о садоводстве.

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

В разделе тело мы видим, что фраза заключена в другую метку,

Это говорит браузеру, что он должен рассматривать его как абзац.

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

Например, параметр содержимого мета-имени автор идентифицирует автора страницы, а параметр содержимого описания мета-имени суммирует содержимое страницы для поисковых систем.

Внутри заголовка находятся еще два элемента: ссылки на таблицы стилей и код Javascript.

CSS

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

Таблицы стилей те, которые определяют, как будут отображаться различные элементы страницы.

Например, если мы хотим, чтобы наш текст отображался с черным фоном и желтыми буквами, мы создаем файл с именем my-style-css.ss и записываем эти строки

п {
цвет фона: черный;
цвет: желтый;
}

Мы меняем код страницы примера на:

Помните, что для работы оба файла должны находиться в одной папке.

Javascript

Хотя сегодня HTML5 и CSS могут придать сайту много анимации. Если нам нужна более сложная интерактивность, мы должны прибегнуть к Javascript.

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

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

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

В следующих статьях мы увидим, как справиться с этой сложностью с помощью WordPress, Джекил и рамки Начальная загрузка