Разработка сайта HTML-5

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

Разработка ведется в редакторе кода Brackets, разработанный Adobe. Редактор можно настроить под себя. Задать темную или светлую тему, удобный размер шрифта. Требует хорошего знания верстки и тегов. По началу проще в работе notepad++. Зная как устроен HTML документ можно вносить правки, например в содержание страницы.

Преимущества сайта HTML-5, написанного с нуля

Высокая скорость загрузки.

Загружается значительно быстрее сайтов на конструкторах: WordPress, Opencart.

HTML всегда быстрее в браузерах чем сайт написанный на языке программирования php.

Нет привязки к конкретной теме или шаблону.

Структура страницы делается после анализа рынка и ниши под конкретные задачи.

Расположение блоков и элементов может быть любым.

Можно подключить любые шрифты.

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

Рассмотрим структуру html  страницы 

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

В description задается краткое описание страницы для поисковой выдачи длиной около 140 символов с пробелами.

В keywords прописываются ключевые слова через запятую как показано на скриншоте.

Между тегами H1 прописывается заголовок страницы, который должен отличаться от title.

Между тегами H2 прописывается подзаголовок второго уровня.

Меду тегами p прописывается текст страницы. Для каждого параграфа будут открывающий и закрывающий теги p. Тег всегда парный.

Тег img предназначен для отображения картинок. После двойных кавычек прописывается путь к картинке абсолютный или относительный. В атрибуте alt текст для картинки, или о чем картинка, на случай если картинка не подгрузится при медленном интернете. Также сюда можно вставить ключевые слова для поиска по картинкам. Не более 5-7 для одной страницы. В данном случае на скриншоте видно что картинки находятся в папке img, далее указывается название картинки и после точки формат изображения jpg, PNG. Формат PNG чаще применяется для иконок.

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

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