Автоматическое формирование HTML кода при помощи редактора Sublime Text. Скачать пример адаптивной страницы сайта


html код страницы

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

Использование готовых шаблонов кода

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

Все продвинутые текстовые редакторы, типа: Sublime Text, Visual Studio Code, имеют встроенные функции или расширения для мгновенного добавления необходимого шаблона кода.
Пример команд для текстового редактора Sublime:
b4:template:html5 -- Формирует базисный HTML5 шаблон;
b4:template:starter -- Создает заполненный стартовый шаблон Starter Template;
b4:template:grids -- Создает сетки шаблона с разметкой на разное количество колонок и столбцов;
и подобных вариантов сотни.

Набрав подобную команду в редакторе и кликнув клавишу "Tab", вы сразу получите готовую, адаптивную к просмотру на мобильных устройствах, страницу сайта.
Примеры выше приведены для формирования шаблонов с использование фреймворка Bootstrap 4 и подключением Bootstrap CDN (онлайн подключение файлов .css и .js).

Так выглядит страница созданная автоматически в текстовом блокноте Sublime Text.

шаблон страницы bootstrap 4

Достаточно заполнить получившуюся страницу своим контентом и можно размещать в интернете.

Ниже можете скачать готовый шаблон html страницы построенной с применением сетки Bootstrap 4.
Для просмотра на компьютере необходимо подключение к интернету, т.к. необходимые для её формирования файлы подключены через CDN.

Внутри кода, между тегами <style>....</style>, подключен дополнительный стиль, для визуального восприятия секции, контейнера, рядов и колонок.
Так удобнее наблюдать за адаптивным поведением блоков при уменьшении экрана просмотра.

Скачать автоматически сформированную редактором Sublime Text адаптивную страницу сайта: index-ex.zip [2,56 Kb] (cкачиваний: 2)

Однообразие и повторение структуры кода

Современные документы, построенные на HTML5 и CSS3 с элементами div практически однообразны в своей структуре.
Кардинально отличается лишь css файл, отвечающий за дизайн и расположение блоков в теле страницы.
Задавая стиль секциям и блокам, заголовкам и тексту, картинкам и слайдерам - вы создаёте оригинальный по своему дизайну сайт.
Один или несколько файлов расширением .css отвечают за всю структуру и дизайн сайта, портала, CMS.

Пример кода упрощённого стандартного шаблона сайта, построенного на HTML5


структура страницы html

Стандартный код HTML страницы

<!DOCTYPE HTML>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Название страницы сайта</title>
<meta name="description" content="Описание"> 
 
<link href="style.css" rel="stylesheet">
</head>
  
<body>
    <header>
      Шапка сайта
      <nav>
        Меню сайта
      </nav>
    </header>

    <main>
      <section>
        <div class="">
		<h1>Название страницы</h1>
        Основная часть
		</div>
      </section>
    </main>

    <aside>
	  <div class="">
      Правая колонка (sidebar)
	  </div>
    </aside>

    <footer>
      Подвал
    </footer>

<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>

</body>
</html>


Расшифровка кода:

<!DOCTYPE HTML> – принадлежность документа к HTML5.
<html lang=”ru”> – главный контейнер, язык.
<head> – информационный контейнер + подключение стилей.
<meta charset=”UTF-8″> – кодировка документа.
<title> – название страницы или сайта.
<meta name=”description” content=””> – описание страницы или сайта.
<link type="text/css" href="style.css" rel="stylesheet"> – подключение CSS, путь к файлу.
<body> – начало тела страницы.
<header> – шапка сайта.
<nav> – меню сайта.
<main> – основная информация документа.
<section> – одна из секций страницы.
<h1> – заголовок страницы.
<aside> – правая (левая) колонка.
<footer> – подвал сайта.
<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script> – подключение библиотеки JQuery версия 2020 года, путь к файлу.

Автор: Saah | Просмотров: 66 | 14-02-2020,Пт, 16:02  

Добавить свой комментарий:

@
Похожие публикации