Приведу пример Bash скрипта, автоматизирующего создание структуры и содержания простого HTML-проекта в заданной директории.
Скрипт принимает один необязательный параметр, задающий корневую директорию создаваемого проекта. Если параметр не задан, используется текущая директория. В результе выполнения скрипта будет создан HTML-проект, состоящий из:
- трёх стандартных для HTML-проекта директорий: css, img, js;
- корневого индексного файла index.html, содержащего базовую HTML разметку;
- подключаемого файла каскадной таблицы стилей css/style.css;
- подключаемого файла JavaScript js/script.js.
Одна команда в консоли и будет получен скелет готового к дальнейшей работе HTML-проекта.
./create-html-project.sh /home/dmitry/www/my-html-project
Использование собственных Bash скриптов — решение, способное упростить работу веб-разработчика. При этом, это решение универсально, так как Bash работает в современных операционных системах для рабочих станций: Microsoft Windows, Apple MacOS и многочисленных операционных системах на основе ядра Linux. А зная принципы написания Bash скриптов и функциональные возможности доступных утилит, можно гибко управлять результатом, с легкостью автоматизируя рутинные задачи веб-разработки, полагаясь исключительно на встроенные инструменты.
HTML5 #1 Базовая структура HTML документа (Base HTML Document Structure)
Другие заметки
Резервное копирование данных одной командой Shell
Полное осознание значения резервного копирования данных, как правило, приходит слишком поздно. Часто это случается уже после полной утраты данных. Эта заметка посвящена клиенту и коллеге, веб-разработчику, чьи проекты, к счастью, удалось восстановить после сбоя в работе накопителя информации рабочего компьютера. Не испытывайте судьбу, уделите внимание вопросу резервного копирования, тем более, что это может быть не так сложно, как кажется на первый взгляд.
Автоматическая настройка Live-USB Ubuntu
В течение последнего месяца часто приходится работать, загружая операционную систему Ubuntu 17.10 с USB-флешки в режиме Live-USB, что делает возможным использование рабочей станции, без установленной операционной системы. Такой вариант подходит для работы с необходимым набором программ: текстовый редактор gedit, веб-браузер FireFox, клиент удалённого доступа к рабочему столу Remmina, файловый менеджер GNOME Files для работы с файлами, включая файлы на удалённых серверах, доступных по протоколам FTP, FTPS и WebDAV. Главный минус такого решения — рутинная настройка после каждой загрузки. Здесь поможет автоматизация.
Сайт создан и поддерживается мною с целью сохранения и распространения в свободном доступе опубликованных на нём материалов. Авторство разработок, текстов и изображений, принадлежит мне, если иное не указано отдельно.
При копировании материалов с сайта, не забывайте о важности обратных ссылок.
Размещение обратной индексируемой ссылки показывает интерес к содержанию сайта, что мотивирует к работе над новыми материалами.
Источник: dimayakovlev.ru
Как быстро создать структуру html
Продолжаем курс « Как создать сайт в блокноте ». В прошлом уроке, мы с Вами научились создавать html файлы. Мы отметили, что html файлы имеют определенную структуру.
Хочу Вам напомнить, что в самом начале курса «Как создать сайт в блокноте», мы договорились, что html страница, html файл и html документ, являются равноценными понятиями.
В этом уроке мы рассмотрим структуру html документа.
Какие бы файлы и документы, мы с Вами не использовали при работе на компьютере, все они имеют вполне определенную структуру. То же самое относится и к html документам и html файлам.
Что касается структуры html документа, то она определяется несколькими специальными, обязательными тегами, которые формируют основу, костяк любого html документа.
Эти обязательные теги должны присутствовать в теле любого html документа, они не отображаются на странице браузера, но именно они формируют структуру html документа.
Итак, вот теги, формирующие структуру html документа:
Структура html документа
Первый тег !DOCTYPE объявляет тип и версию html документа. Данный тег указывает браузеру, как интерпретировать данную веб страницу, или данный html документ.
После указания типа документа, тегом , объявляется начало html кода. Сразу отметим, что завершается html код тегом , который устанавливается в конце html документа и указывает браузеру на окончание html документа.
Нам осталось рассмотреть два важных блока, формирующих структуру html документа.
В частности, заголовок html документа содержит тег , который передает информацию поисковым системам о содержимом текущего html документа или данной web страницы.
Содержимое тега title имеет большое значение при продвижении Ваших сайтов в поисковых системах Интернета. И еще, содержимое тега title при открытии html документа, выводится в верхнюю панель браузера.
Теперь, еще один пример, обратите внимание на строку:
Данной строкой браузеру передается, что настоящий html документ имеет русскую кодировку windows-1251.
Итак, давайте отметим, что заголовок head html документа, содержит важную служебную информацию для браузера и поисковых систем.
Эта информация прописывается с помощью различных мета тегов и тега title. Содержимое заголовка не отображается на странице, но содержимое тега title, выводится в верхней части браузера.
Ну а теперь мы перейдем к блоку .
Блок body содержит всю информацию, которая выводится в окно браузера. Как правило, содержимое веб страницы называют – контент (content).
То есть, всю информацию, которую мы с Вами хотим вывести на страницу, или другими словами все элементы, которые мы с Вами хотим разметить на странице, должны находиться между тегами .
Итак, мы с Вами рассмотрели основные элементы структуры html документа.
Теперь откроем с помощью блокнота Notepad++ файл index.html, который мы создали в прошлом уроке. Добавим в него код структуры, расположенный в начале данной статьи. Сохраним файл index.html.
Следующим шагом, откроем файл index.html, с помощью браузера. Мы с Вами увидим, что страница пустая, хотя она и содержит обязательные html теги.