Как подключить файл css к html golang templates

Обновлено: 15.01.2025

Пакеты text/template , html/template являются частью стандартной библиотеки GO. Шаблоны GO используются во многих решениях на базе языка, таких как docker , kubernetes , helm . С ними интегрированы также многие web-библиотеки, например echo. Понимание синтаксиса встроенного шаблонизатора GO полезно в очень многих задачах.

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

Шаблоны GO являются активными, что позволяет использовать в них управляющие конструкции, такие как if , else , циклы range .

Не смотря на четкую типизацию языка GO, шаблонизатор работает с любыми данными, достигается это использованием пакета reflect .

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

Для запуска шаблона со стороны GO-кода у нас есть функции Execute и ExecuteTemplate . В них обоих есть параметр data interface<> .

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

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

Далее рассмотрим синтаксические компоненты шаблонизатора GO.

Если condition будет равен 0 , "" , nil , или пустым массивом, срезом, это будет воспринято как false . В остальных случаях — инструкция T1 выполнится.

Допустимы вариации с else , else if :

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

Также возможна вариация с else , который выполнится если somelist пуст:

Можно получить ключи и значения каждого элемента в переменные:

В данном случае к pipeline применяется проверка, будто бы мы используем if . Если значение pipeline будет эквивалентно true (cм описание if ), инструкция T1 выполнится. При этом текущий контекст этой инструкции изменится на pipeline.

Шаблон задать можно следующими двумя конструкциями:

Запустить шаблон c данными context:

Элементы карт, поля структур, вызовы методов

Шаблоны GO могут выводить различные значения.
Наример, поля структуры или значения их мапы. Поля структуры для использования в шаблоне должны быть экспотируемы (начинаться с большой буквы).
Ключи мапы могут начинаться с буквы любого регистра.
Можно выстраивать цепочки их получения:

Можно использовать вызовы методов. Функция или метод для использования в шаблоне должны удовлетворять одному из условий:

возвращаемое значение функции или метода должно быть одно;
возвращаемых значений два, но второе — error ;

В исходниках пакета text/template присуствует код проверки вызываемых функций/методов на соответствие этим условиям.

Следующий код на GO подготавливает метод для вызова в шаблоне:

Код шаблона вызывает метод:

В шаблонизаторе GO два типа функций — встроенные и пользовательские.

Вызов функции любого типа выглядит так:

Список стандартных функций:

call funcLocation arg1 arg2 — встроенная функция call позволяет вызывать другие функции, например функции, хранящиеся в переменных или чье имя находится в переменной;
index x 1 2 3 — получение элемента среза/массива/мапы;
slice x 1 2 — получение нового среза из среза, аналогично s[1:2] ;
len x — получение длины среза/массива/мапы;
print , printf , println — явный вывод данных;

Булевы операторы в шаблонах также реализованы как функции:

eq arg1 arg2 — arg1 == arg2
ne arg1 arg2 — arg1 != arg2
lt arg1 arg2 — arg1
le arg1 arg2 — arg1
gt arg1 arg2 — arg1 > arg2
ge arg1 arg2 — arg1 >= arg2

Значения могут быть переданы в функцию с помощью оператора | . Такие значения становятся последними аргументами в вызове функции:

Можно определить функцию в коде на GO и затем использовать ее в шаблонах.

Ниже приведен GO-код функции last , которая помогает определить, является ли элемент последним в списке:

Использование функции last в шаблоне:

Шаблоны GO используют пакет reflect . Например, конструкция range релизована следующим образом в text/template :

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

html/template во многом использует text/template . Особенностью html/template является то, что шаблонизатор понимает, какой именно html-контент в данный момент выводится шаблоном (html-тэг, атрибут, тело тэга, css-контент, URL) и исходя из этого применяет разные способы экранирования, не ломая при этом внешнюю структуру html, что является хорошим преимуществом данного шаблонизатора.

Привет, Хабр! Представляю вашему вниманию перевод статьи "How to build your first web application with Go" автора Ayooluwa Isaiah.

Это руководство к вашему первому веб-приложению на Go. Мы создадим новостное приложение, которое использует News API для получения новостных статей по определенной теме, и развернём его на продакшн сервере в конце.

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

Требования

Единственное требование для этого задания — чтобы на вашем компьютере был установлен Go, и вы немного знакомы с его синтаксисом и конструкциями. Версия Go, которую я использовал при создании приложения, также является самой последней на момент написания: 1.12.9. Чтобы просмотреть установленную версию Go, используйте команду go version .

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

Итак, начнем!

Клонируем репозиторий стартовых файлов на GitHub и cd в созданный каталог. У нас есть три основных файла: В файле main.go мы напишем весь код Go для этого задания. Файл index.html — это шаблон, который будет отправлен в браузер, а стили для приложения находятся в assets/styles.css .

Создадим базовый веб-сервер

Давайте начнем с создания базового сервера, который отправляет текст «Hello World!» в браузер при выполнении запроса GET к корню сервера. Измените ваш файл main.go так, чтобы он выглядел следующим образом:

Затем скомпилируйте и выполните код, который вы только что написали:

Шаблоны в Go

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

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

Go предоставляет две библиотеки шаблонов в своей стандартной библиотеке: text/template и html/template . Оба предоставляют один и тот же интерфейс, однако пакет html/template используется для генерации HTML-вывода, который защищен от инъекций кода, поэтому мы будем использовать его здесь.

Импортируйте этот пакет в ваш файл main.go и используйте его следующим образом:

tpl — переменная уровня пакета, которая указывает на определение шаблона из предоставленных файлов. Вызов template.ParseFiles анализирует файл index.html в корне каталога нашего проекта и проверяет его на валидность.

Мы оборачиваем вызов template.ParseFiles в template.Must , чтобы код вызывал панику при возникновении ошибки. Причина, по которой мы паникуем здесь вместо того, чтобы пытаться обработать ошибку, заключается в том, что нет смысла продолжать выполнение кода, если у нас невалидный шаблон. Это проблема, которая должна быть устранена перед попыткой перезапустить сервер.

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

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

Остановите запущенный процесс в вашем терминале с помощью Ctrl-C и запустите его снова с помощью go run main.go , затем обновите ваш браузер. Вы должны увидеть текст «News App Demo» на странице, как показано ниже:

Добавляем панель навигации на страницу

Замените содержимое тега <body> в вашем файле index.html, как показано ниже:

Затем перезагрузите сервер и обновите ваш браузер. Вы должны увидеть что-то похожее на это:

Работа со статическими файлами

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

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

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

Далее нам нужно указать нашему маршрутизатору использовать этот объект файлового сервера для всех путей, начинающихся с префикса /assets/ :

Теперь всё вместе:

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

Создаем роут /search

Давайте создадим роут, который обрабатывает поисковые запросы для новостных статей. Мы будем использовать News API для обработки запросов, поэтому вам нужно зарегистрироваться для получения бесплатного ключа API здесь.

Этот маршрут ожидает два параметра запроса: q представляет запрос пользователя, а page используется для пролистывания результатов. Этот параметр page является необязательным. Если он не включен в URL, мы просто предположим, что номер страницы результатов имеет значение «1».

Добавьте следующий обработчик под indexHandler в ваш файл main.go :

Приведенный выше код извлекает параметры q и page из URL-адреса запроса и выводит их оба в терминал.

Затем зарегистрируйте функцию searchHandler в качестве обработчика пути /search , как показано ниже:

Не забудьте импортировать пакеты fmt и net/url сверху:

Теперь перезапустите сервер, введите запрос в поле поиска и проверьте терминал. Вы должны увидеть ваш запрос в терминале, как показано ниже:

Создаём модель данных

Когда мы делаем запрос к конечной точке News API/everything , мы ожидаем ответ json в следующем формате:

Чтобы работать с этими данными в Go, нам нужно сгенерировать структуру, которая отражает данные при декодировании тела ответа. Конечно, вы можете сделать это вручную, но я предпочитаю использовать веб-сайт JSON-to-Go, который делает этот процесс действительно простым. Он генерирует структуру Go (с тегами), которая будет работать для этого JSON.

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

Я сделал несколько изменений в структуре AutoGenerated , отделив фрагмент Articles в его собственную структуру и обновив имя структуры. Вставьте следующее ниже объявление переменной tpl в main.go и добавьте пакет time в ваш импорт:

Как вы, возможно, знаете, Go требует, чтобы все экспортируемые поля в структуре начинались с заглавной буквы. Однако принято представлять поля JSON с помощью camelCase или snake_case, которые не начинаются с заглавной буквы.

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

Наконец, давайте создадим другой тип структуры для каждого поискового запроса. Добавьте это ниже структуры Results в main.go :

Эта структура представляет собой каждый поисковый запрос, сделанный пользователем. SearchKey — это сам запрос, поле NextPage позволяет пролистывать результаты, TotalPages — общее количество страниц результатов запроса, а Results — текущая страница результатов запроса.

Отправляем запрос по News API и рендерим результаты

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

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

Сначала объявите новую переменную apiKey под переменной tpl :

Затем используйте её в функции main следующим образом:

Здесь мы вызываем метод flag.String() , который позволяет нам определять строковый флаг. Первый аргумент этого метода — имя флага, второй — значение по умолчанию, а третий — описание использования.

После определения всех флагов вам нужно вызвать flag.Parse() , чтобы фактически проанализировать их. Наконец, так как apikey является обязательным компонентом для этого приложения, мы обеспечиваем аварийное завершение программы, если этот флаг не установлен при выполнении программы.

Убедитесь, что вы добавили пакет flag в свой импорт, затем перезапустите сервер и передайте требуемый флаг apikey , как показано ниже:

Замените два вызова метода fmt.Println() в конце функции searchHandler следующим кодом:

После этого мы конвертируем переменную page в целое число и присваиваем результат полю NextPage переменной search . Затем мы создаем переменную pageSize и устанавливаем ее значение равным 20. Эта переменная pageSize представляет количество результатов, которые API новостей будет возвращать в своем ответе. Это значение может находиться в диапазоне от 0 до 100.

Затем мы создаем конечную точку с помощью fmt.Sprintf() и делаем запрос GET к ней. Если ответ от News API не 200 OK, мы вернем клиенту общую ошибку сервера. В противном случае тело ответа парсится в search.Results .

Затем мы вычисляем общее количество страниц путем деления поля TotalResults на pageSize . Например, если запрос возвращает 100 результатов, а мы одновременно просматриваем только 20, нам нужно будет пролистать пять страниц, чтобы просмотреть все 100 результатов по этому запросу.

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

Прежде чем перейти к index.html , обязательно обновите ваши импорты, как показано ниже:

Давайте продолжим и отобразим результаты на странице, изменив файл index.html следующим образом. Добавьте это под тегом <header> :

Чтобы получить доступ к полю структуры в шаблоне, мы используем оператор точки. Этот оператор ссылается на объект структуры (в данном случае search ), а затем внутри шаблона мы просто указываем имя поля (как > ).

Блок range позволяет нам перебирать слайс в Go и выводить некоторый HTML для каждого элемента в слайсе. Здесь мы перебираем слайс структур Article , содержащихся в поле Articles , и выводим HTML на каждой итерации.

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

Сохраняем поисковый запрос в инпуте

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

Перезапустите браузер и выполните новый поиск. Поисковый запрос будет сохранен, как показано ниже:

Форматируем дату публикации

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

Давайте добавим следующий код чуть ниже структуры Article в main.go :

Здесь новый метод FormatPublishedDate создан в структуре Article , и этот метод форматирует поле PublishedAt в Article и возвращает строку в следующем формате: 10 января 2009 .

Чтобы использовать этот новый метод в вашем шаблоне, замените .PublishedAt на .FormatPublishedDate в вашем файле index.html . Затем перезагрузите сервер и повторите предыдущий поисковый запрос. Это выведет результаты с правильно отформатированным временем, как показано ниже:

Выводим общее количество результатов

Все, что вам нужно сделать, это добавить следующий код как дочерний элемент .container , чуть выше элемента .search-results в вашем файле index.html :

Шаблоны Go поддерживают несколько функций сравнения, некоторые из которых используются выше. Мы используем функцию gt , чтобы проверить, что поле TotalResults структуры Results больше нуля. Если это так, общее количество результатов будет напечатано в верхней части страницы.

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

Пагинация

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

Сначала добавим кнопку Next внизу результатов, если последняя страница результатов еще не достигнута. Чтобы определить, была ли достигнута последняя страница результатов, создайте этот новый метод ниже объявления структуры Search в main.go :

Этот метод проверяет, больше ли поле NextPage , чем поле TotalPages в экземпляре Search . Чтобы это работало, нам нужно увеличивать NextPage каждый раз, когда отображается новая страница результатов. Вот как это сделать:

Наконец, давайте добавим кнопку, которая позволит пользователю перейти на следующую страницу результатов. Этот код должен быть помещен ниже .search-results в вашем файле index.html .

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

Как видите, href ссылки указывает на маршрут /search и сохраняет текущий поисковый запрос в параметре q , используя значение NextPage в параметре page .

Давайте добавим кнопку Previous. Эту кнопку следует отображать только в том случае, если текущая страница больше 1. Чтобы сделать это, нам нужно создать новый метод CurrentPage() в Search , чтобы реализовать это. Добавьте это ниже метода IsLastPage :

Текущая страница просто NextPage - 1 , за исключением случаев, когда NextPage равен 1. Чтобы получить предыдущую страницу, просто вычтите 1 из текущей страницы. Следующий метод делает именно это:

Таким образом, мы можем добавить следующий код для отображения кнопки Previous, только если текущая страница больше 1. Измените элемент .pagination в вашем файле index.html следующим образом:

Теперь перезагрузите сервер и сделайте новый поисковый запрос. У вас должно получиться пролистать результаты, как показано ниже:

Показываем текущую страницу

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

Для этого нам нужно всего лишь изменить наш файл index.html следующим образом:

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

Деплоим на Heroku

Теперь, когда наше приложение полнофункционально, давайте продолжим и развернем его в Heroku. Зарегистрируйте бесплатную учетную запись, затем перейдите по этой ссылке, чтобы создать новое приложение. Укажите для приложения уникальное имя. Я назвал приложение freshman-news.

Затем следуйте инструкциям здесь, чтобы установить интерфейс командной строки Heroku на свой компьютер. Затем выполните команду heroku login в терминале, чтобы войти в свою учетную запись Heroku.

Убедитесь, что вы инициализировали git-репозиторий для своего проекта. Если нет, запустите команду git init в корне каталога вашего проекта, а затем выполните команду ниже, чтобы установить heroku в качестве удаленного git-репозитория. Замените freshman-news названием вашего приложения.

Затем создайте Procfile в корневом каталоге вашего проекта ( touch Procfile ) и вставьте следующее содержимое:

После этого укажите репозиторий GitHub для своего проекта и версию Go, которую вы используете, в своем файле go.mod , как показано ниже. Создайте этот файл, если он еще не существует, в корне проекта.

Перед развертыванием приложения перейдите на вкладку Settings на панели инструментов Heroku и нажмите Reveal Config Vars. Нам нужно установить переменную среды NEWS_API_KEY, чтобы она могла быть передана в бинарный файл при запуске сервера.

Наконец, сделайте коммит своего кода и сделайте пуш в Heroku с помощью следующих команд:

Заключение

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

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

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

Для тех, кто любит смотреть в формате видео.

Для тех, кто любит читать, инструкция ниже.

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

Задача стилей CSS, которые будут подключаться, сделать элемент абзаца <p> красным цветом.

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

1 вариант. Внутри открывающего тега с помощью атрибута style.

Элементам на странице, которые располагаются внутри элемента body, можно добавить атрибут style. Значением этого атрибута могут быть свойства и значения CSS, которые должны будут применены к этому элементу.

Давайте посмотрим, как это работает на конкретном примере. Атрибут style добавлен для элемента <p>.

Обратите внимание, что в этом случае не нужно использовать селектор, т.к. элемент, к которому добавлены стили уже определен.

2 вариант. Внутри элемента style.

Еще один способ подключения стилей CSS, это воспользоваться элементом <style> с атрибутом type="text/css". Указание этого атрибута обязательно.

Давайте посмотрим, как это выглядит на конкретном примере.

3 вариант. Подключение внешнего файла стилей.

И последний вариант подключения стилей CSS является использование элемента link, который позволяет подключать к HTML странице внешние файлы.

Обратите внимание на атрибуты, которые указываются у этого элемента.

Они тоже являются обязательными. В атрибуте href указывается путь к css файлу, который нужно подключить.

Файл style.css содержит следующих код:

Эти 3 способа подключения стилей CSS очень часто используются на практике. Советую вам поэкспериментировать с этими примерами на своем компьютере. В будущем, это вам очень сильно пригодиться.

Внешние таблицы стилей

Создаем обычную html-страницу, с таким кодом:

<html>
<head>
<title>Подключение CSS к HTML</title>
</head>
<body>
<h1>Заголовок первого уровня</h1>
Здесь просто текст
<h2>Заголовок второго уровня</h2>
Здесь просто текст
</body>
</html>

Теперь в блокноте создаем пустой документ style.css и сохраняем его в ту же папку, где лежит html-страница:

Это наша страница стилей. Давайте подключим стили (style.css) к html-странице. В html существует тег <link>, который отвечает за подключение внешних файлов. Добавляем <link> в html-страницу:

<html>
<head>
<title>Подключение CSS к HTML</title>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
<h1>Заголовок первого уровня</h1>
Здесь просто текст
<h2>Заголовок второго уровня</h2>
Здесь просто текст
</body>
</html>

Далее мы будем подключения css именно этим способом так, как он самый удобный. Есть и другие способы, сейчас давайте их рассмотрим.

Внутренние таблицы стилей

Эту таблицу стилей задают внутри элемента HTML, с помощью атрибута style. Вот пример:

<h1 style="color:red">Это заголовок красного цвета</h1>

Минус этого способа очевиден: параметр style приходится задавать каждому заголовку и поэтому теряется преимущество CSS.

Встроенные таблицы стилей

В этом случае таблица стилей встраивается в заголовок html-страницы. В HTML есть теги <style></style>, с параметром type, он указывает, что подключается таблица стилей CSS. Вот пример:

<html>
<head>
<title>Подключение CSS к HTML</title>

</head>
<body>
<h1>Этот заголовок будет красного цвета</h1>
<h1>Этот заголовок будет красного цвета</h1>
<h1>Этот заголовок будет красного цвета</h1>
</body>
</html>

Все заголовки h1 у нас на странице красного цвета. При желании можно один из них перекрасить в синий цвет, для этого нужно воспользоваться внутренней таблицей стилей:

<html>
<head>
<title>Подключение CSS к HTML</title>

</head>
<body>
<h1>Этот заголовок будет красного цвета</h1>
<h1 style="color:blue">Этот заголовок будет синего цвета</h1>
<h1>Этот заголовок будет красного цвета</h1>
</body>
</html>

В данной ситуации применяется принцип каскадирования, он разрешит конфликт. В нашем примере внутренняя таблица имеет выше приоритет и поэтому заголовок станет синим.

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

Сейчас мы рассмотрели способы подключения CSS к HTML, далее рассмотрим синтаксис CSS.

HTML шаблоны сайтов

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

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

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

Скачивайте бесплатные HTML шаблоны сайта и создавайте свои проекты в кратчайшие сроки.

Читайте также: