Как написать и запустить HTML на компьютере?
Чтобы стать профессиональным разработчиком, нужно уметь пользоваться инструментами. Сегодня попробуем разобраться, как и в чём написать и запустить HTML-код на своём компьютере.
Действуем по плану:
- устанавливаем и настраиваем редактор кода;
- создаем рабочую папку и добавляем туда файлы вашего проекта;
- редактируем и сохраняем файлы с кодом;
- устанавливаем расширение, чтобы сразу видеть результат верстки.
Подробно о каждом шаге читайте в статье от HTML Academy.
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные материалы
- Самоучитель HTML4
- Самоучитель CSS
- Как добавить картинку на веб-страницу?
- Спецсимволы
- Структура HTML-кода
- Введение в HTML
- Способы добавления стилей на страницу
- Выравнивание текста
- Якоря
- Позиционирование элементов
- Как добавить иконку сайта в адресную строку браузера?
- Ссылки
Работа с HTML-публикацией
HTML -публикацию можно использовать для публикации на внутреннем или внешнем Интернет-портале, передачи специалистам и сотрудникам компании, а также для проведения презентаций.
Для передачи HTML -публикации другим сотрудникам достаточно передать им папку, в которую была произведена публикация.
Внимание!
HTML -публикация является серверным решением. Это означает, что компьютер, на котором размещается HTML -публикация, выполняет роль сервера публикации. При этом к данной HTML -публикации можно получить доступ с других компьютеров через веб-браузер по ссылке, если открыть HTML -публикацию для общего доступа (подробнее об этом описано ниже в Таблице 1). Для запуска серверного решения необходимо на сервере публикации однократно запустить веб-сервер публикации — файл «HTML-publication.exe» (работа обеспечивается запускаемыми приложениями MySQL и Apache).
Для публикации в сети необходимо разместить папку со сформированной HTML -публикацией на компьютере, который будет выполнять роль веб-сервера, и запустить из нее файл » HTML -publication.exe». В результате в веб-браузере, установленном по умолчанию, откроется страница с HTML -публикацией со ссылкой вида http://localhost:/businessmodel.php?lang=ru-ru, по которой публикация будет доступна с данного компьютера, а в области уведомлений Windows появится ее иконка .
C помощью пунктов контекстного меню, вызванного от этой иконки, осуществляется управление доступом к публикации, открытие статьи справочной системы, закрытие HTML -публикации или ее открытие в браузере. Описание назначения пунктов этого контекстного меню приведено в Таблице 1.
| Пункт меню | Назначение |
|---|---|
| Открыть | Открывает HTML -публикацию в веб-браузере, установленном по умолчанию. |
| Опубликовать для общего доступа / Прекратить общий доступ | Пункт меню Опубликовать для общего доступа открывает публикацию для внешнего доступа. При этом в веб-браузере, установленном по умолчанию, открывается страница со ссылкой вида http://:/businessmodel.php?lang=ru-ru, по которой с других машин можно открыть HTML -публикацию в веб-браузере. Эта ссылка может быть передана сотрудникам компании для доступа к HTML -публикации. |
Таблица 1. Пункты меню управления HTML-публикацией
Внимание!
Для того чтобы пользователи имели доступ к HTML -публикации, на компьютере, где она запущена, должен быть открыт соответствующий порт (номер порта см. в адресной строке браузера после наименования компьютера, на котором запущена HTML -публикация). При выполнении для HTML -публикации пункта меню Опубликовать для общего доступа будет сделана попытка открыть доступ к этому порту. В случае если попытка не удастся, необходимо будет открыть порты самостоятельно.
На компьютере может одновременно быть запущено несколько HTML -публикаций из разных папок.
В случае если сформирована новая HTML -публикация и требуется запустить ее таким образом, чтобы ссылка на нее оказалась той же, что и для одной из запущенных в текущий момент HTML -публикаций, следует действовать так:
Закройте эту запущенную HTML -публикацию при помощи пункта меню Выход контекстного меню, вызванного от иконки этой HTML -публикации в области уведомлений Windows;
Откройте новую HTML -публикацию, запустив из нее файл » HTML -publication.exe»;
Опубликуйте новую HTML -публикацию для доступа по сети при помощи пункта меню Опубликовать для общего доступа контекстного меню, вызванного от иконки HTML -публикации в области уведомлений Windows.
Работа в окне HTML-публикации
Окно HTML -публикации (Рис. 1) разделено на 3 области:
В шапке (верхняя область) размещается логотип организации, управляющие элементы, а также главное меню, которое в данном случае содержит одну вкладку Бизнес-модель компании.
В Навигаторе (левая область) расположено дерево объектов, выбранных для выгрузки в HTML -публикацию (см. Формирование HTML-публикации).
В области отчета (правая область) находится панель с полем выбора отчета текущего объекта, кнопки для выгрузки отчета в форматах doc и pdf, отправления ссылки на отчет по почте, печати отчета, а также сам выбранный отчет.
Рисунок 1. Окно HTML -публикации
В случае если используется мобильная версия, на экране может быть показан или Навигатор, или область отчета. Переход из Навигатора к области отчета осуществляется выбором объекта в дереве. При этом панель Навигатора сворачивается. Переход от показа отчета к показу дерева Навигатора осуществляется нажатием на свёрнутую панель Навигатора.
Шапка окна HTML-публикации
Шапка окна HTML -публикации содержит:
логотип организации, который задается в параметре «Логотип компании» в Настройках для всех пользователей (Главное меню → Главная → Настройки для всех пользователей → вкладка Основные) (см. Настройка HTML-публикации).
главное меню, которое для HTML -публикации состоит из одной вкладки Бизнес-модель компании.
управляющие элементы, описание назначения которых приведено в Таблице 2.
| Элемент | Тип элемента | Назначение |
|---|---|---|
| Поиск | Гиперссылка | Открывает страницу расширенного поиска, на которой можно осуществлять поиск с дополнительными возможностями. |
 |
Кнопка | Запускает поиск строки, введенной в строке поиска. |
 /  |
Кнопка | Осуществляет переключение между мобильной и полной версией HTML -публикации. Каждая из версий адаптирована для удобной работы на соответствующем типе устройств. |
 |
Кнопка | Отправить письмо администратору. По нажатию на кнопку открывается окно настроенной почтовой программы для отправки по адресу, указанному в параметре «E-mail администратора» в Настройках для всех пользователей (Главное меню → Главная → Настройки для всех пользователей → вкладка HTML -публикация) (см. Настройка HTML-публикации). |
 |
Кнопка | Вызывает статью справочной системы с описанием HTML -публикации. |
Таблица 2. Элементы шапки окна HTML-публикации
Шапку окна HTML -публикации можно свернуть для увеличения области показа отчета, нажав на кнопку 
горизонтальной панели. Впоследствии эту область можно вернуть на экран, нажав на кнопку 
этой панели.
Навигатор
В Навигаторе отображается дерево объектов, выбранных для выгрузки в HTML -публикацию.
Выбор объекта в дереве Навигатора приводит к отображению отчета, сформированного для этого объекта, в области отчета.
Подвижная граница между областью отчета и Навигатором позволяет каждому пользователю настроить окно HTML -публикации в соответствии со своими предпочтениями.
Навигатор можно свернуть для увеличения области показа отчета, нажав на кнопку 
вертикальной панели. Впоследствии эту область можно вернуть на экран, нажав на кнопку 
этой панели.
Область отчета HTML-публикации
Основную часть области отчета занимает отчет, сформированный для текущего объекта дерева. Также в этой области над отчетом выводится панель инструментов для работы с ним. Выбор отчета, показываемого в данной области, осуществляется в поле выбора отчета из выпадающего списка (например, на Рис. 1 для объекта «Директор» выведен на показ отчет «Описание должности»), расположенного на этой панели. Назначение описания кнопок панели инструментов приведено в Таблице 3.
| Кнопка | Назначение |
|---|---|
 |
Выгрузка текущего отчета в формате MS Office (DOCX, XLSX). Формат выгрузки зависит от формата шаблона отчета. |
 |
Выгрузка текущего отчета в формате PDF . |
 |
Отправка ссылки на текущий отчет другому пользователю. По нажатию на кнопку открывается окно настроенной почтовой программы со ссылкой на текущий отчет HTML -публикации. |
 |
Открытие отчета в виде для печати. Отчет открывается на всю страницу и далее может быть распечатан средствами веб-браузера. |
Таблица 3. Кнопки области отчета окна HTML-публикации
В нижней части области отчета находится ссылка на текущую страницу HTML -публикации. Данную ссылку можно передать другому сотруднику. Также с помощью данной ссылки можно найти объект, по которому построен данный отчет, в Навигаторе Business Studio, воспользовавшись кнопкой на панели инструментов Навигатора (см. Панель инструментов и контекстное меню Навигатора).
Для представленных в области отчета диаграмм доступна функция масштабирования (при использовании браузеров Google Chrome, Mazilla Firefox, Opera): наведя курсор на область диаграммы, зажав клавишу Ctrl и используя вращение колёсика мыши, можно масштабировать именно саму диаграмму, без масштабирования остальных элементов области отчёта и всего окна HTML -публикации (Рис. 2).
Рисунок 2. Окно HTML -публикации с увеличенной диаграммой
Страница расширенного поиска
На странице расширенного поиска, вызываемой гиперссылкой Поиск с основной страницы HTML -публикации, задается:
строка, по которой производится поиск;
разделы HTML -публикации, в которых ведется поиск;
отчёты HTML -публикации, в которых ведётся поиск;
дополнительные параметры (Рис. 3).
Рисунок 3. Расширенный поиск в HTML -публикации
Поиск запускается нажатием на кнопку Искать. Результаты поиска отображаются в нижней части страницы.
Нажатие мышью по любому из найденных результатов переводит к соответствующему отчету, где была найдена искомая фраза.
В группе Слова расположены задается требуемое место расположения искомой фразы в отчетах HTML -публикации. Группа содержит следующие радиокнопки:
везде — поиск заданной фразы осуществляется как в названиях объектов дерева, так и в тексте отчетов;
в теле документа — поиск заданной фразы осуществляется только в тексте отчетов;
в названии элемента — поиск заданной фразы осуществляется только в названиях объектов дерева.
С помощью радиокнопок группы Искать задается «жесткость» поиска. Группа содержит следующие радиокнопки:
все слова в любом порядке — осуществляется поиск всех слов заданной фразы, причем порядок следования слов не важен;
любое из слов — осуществляется поиск каждого из слов заданной фразы;
точное совпадение фразы — осуществляется поиск заданной фразы, порядок следования слов должен совпадать с заданным.
Для каждой из групп Слова расположены и Искать обязательно должна быть выбрана одна из радиокнопок.
С помощью области Место поиска указывается перечень справочников, по которым требуется произвести поиск. Может быть выбрано любое число справочников. В случае, когда не выбран ни один из пунктов, поиск производится по всему содержимому HTML -публикации.
С помощью области Искать в отчётах указывается перечень отчётов, в которых требуется произвести поиск. Может быть выбрано любое число отчётов. В случае, когда не выбран ни один из пунктов, поиск производится по всем отчётам, выгруженным в HTML -публикацию.
Создание первой HTML-страницы
Всем привет! В данном коротком видео мы рассмотрим процесс создания первой HТML-страницы. Поговорим о редакторах кода для разных операционных систем, установим Notepad++ на Windows, создадим первый HТML-файл и сможем открыть его в браузере.
Зачем же нужен непонятный редактор кода, если на компе есть замечательные программы типа Microsoft Word или блокнота? Увы, но Word и прочие не подходят: эти программы коверкают код, а блокнот не обладает подсветкой синтаксиса, которая нам сейчас и нужно. Поэтому нужно установить один из редакторов кода (для Windows можно взять Notepad++ либо SublimeText, для Мас и Linux SublimeText тоже подходит, но на Windows лучше начать с Notepad++).
Установка Notepad++
Сейчас рассмотрим установку Notepad++. Заходим в Яндекс, пишем «Notepad++», открываем страничку, нажимаем «download», скачиваем -> появляется NotepadInstaller. [Чтобы создать первую HTML-страничку, нужно владеть компом настолько, чтобы установить себе Notepad++ (нажать 2 раза на installer 🙂 ).] Предупреждений не пугайтесь, программа проверенная, надежная. Язык выбирайте, какой вам удобно, просто нажимайте все время далее, и в итоге установите себе Notepad, который радостно появится у вас в меню «Пуск».
Теперь переходим к нашему первому HTML-документу. Создайте где-нибудь папку, которая будет являться воображаемым корнем нашего сайта, именно там сохраним документы. У кого на компьютере включено расширение для незарегистрированных типов, можно просто создать файл правой кнопкой. Мы же пойдем более топорным способом: просто-напросто откроем Notepad, нажмем «файл» -> «сохранить как» -> выбираем папку (к примеру, папка «сайт» на рабочем столе), а дальше нужно вставить расширение Hyper Text Markup Language. Предупреждение: если вы работаете в SublimeText, то там нет выбора типа файла, но решение просто – введите название этого файла, после него поставьте точку и напишите расширение html.
Таким образом, когда вы пишете «имя файла_точка_html», вы его сохраните хоть из Notepad, хоть из SublimeText, хоть из блокнота. Сохраняем, заходим в папку с файлом. Если у вас не было каких-либо перенастроек ассоциаций файлов в системе, то этот файлик должен отображаться значком браузера. Как проверить, что все прошло хорошо? Просто два раза кликнуть на этот файлик – если он у вас откроется в браузере, то значит на 99% все так, как нужно.
Первый HTML-код. Ура!
Возвращаемся в Notepad++, и пишем какой-нибудь кусочек HTML-кода. Например, тег Н1 – заголовок 1-го уровня – и какую-нибудь радостную фразу, типа «Ура, я сделал первый файл!». Заметьте, в Notepad++ есть дискета, которая никогда не должна быть красной. То есть, когда вы меняете код, сразу же нажимайте «сохранить» (кто не знает горячих клавиш («Ctrl+S»), то просто «файл» –> «сохранить»). После этого зайдите в браузер и обновите страницу. В итоге увидите там что-нибудь радостное и великолепное. Например, на экране может выйти какая-то абсолютная белиберда 🙂 Согласитесь, немного не похоже на то, что было написано.
Это так называемая проблема с кодировками. Чтобы ее не было, вы должны либо подобрать кодировку в Notepad (она, кстати, подобрана правильно, современная), либо сразу прописать тег для HTML. Если у вас возникла проблема с кодировками, то нужно прописать metacharset, название кодировки – и после этого все работает хорошо. Какую писать кодировку – зависит от кодировки, установленной в Notepad. Лучше писать UTF-8, и в Notepad ставить UTF-8. SublimeText тоже по умолчанию должен UTF-8 проставлять.
Для тех, кто более продвинутый и зачем-то смотрит это видео, возмущаясь, что в HTML-документе нет никакой структуры – она здесь и не нужна. Это видео для самых новичков – для тех, кто хочет сделать первый HTML-файл и увидеть какой-то начальный результат.
Итак, подведем итоги. Сделать нужно всего 3 действия: открыть Notepad, написать код, сохранить файл – все, после этого можно его просматривать. Теперь вы умеете делать HTML-файлы, поэтому приятного дальнейшего изучения HTML CSS!
Как запустить JS-код
JavaScript — популярный язык программирования с широким спектром применения. Раньше его использовали в основном для интерактивности веб-страницам: например, для анимации или валидации форм. Сейчас же JS используется еще и во многих других областях: разработка серверных, мобильных приложений и так далее.
Из-за широкого спектра применения JavaScript можно запустить несколькими способами:
- через вкладку «Консоль» в веб-браузере;
- с помощью Node.js
- с помощью веб-страницы.
Через вкладку «Консоль» в браузере
В большинстве современных браузеров уже есть встроенные механизмы JavaScript, поэтому запустить код на JS можно прямо в браузере. Вот, как это сделать:
Шаг 1. Откройте любой браузер (мы будем использовать Google Chrome).
Шаг 2. Откройте инструменты разработчика. Для этого щелкните правой кнопкой мыши на пустой области и выберите пункт «Просмотреть код» (Inspect). Горячая клавиша: F12.
Шаг 3. В инструментах разработчика перейдите на вкладку «Консоль» (Console). Здесь уже можно писать код на JavaScript. Попробуйте ввести console.log(«Hello, world!») и нажмите Enter, чтобы запустить код.
С помощью Node.js
Node — среда выполнения кода JavaScript вне браузера. Вот, как запустить JS с помощью Node.js:
Шаг 1. Установите последнюю версию Node.js.
Шаг 2. Установите IDE или текстовый редактор. Мы будем использовать Visual Studio Code.
Шаг 3. В VS Code перейдите в Файл > Новый файл и напишите код на JS. Сохраните файл с расширением .js. Мы написали программу, которая выводит на экран строку «Hello, world!», поэтому файл будет называться helloworld.js.
Шаг 4. Откройте терминал/командную строку, перейдите к расположению файла (используйте команду cd ). Введите node helloworld.js и нажмите Enter. Вывод появится в терминале.
Примечание. JavaScript-код можно написать и запустить непосредственно в терминале. Для этого просто введите node и нажмите Enter.
С помощью веб-страницы
JavaScript изначально создавали для того, чтобы сделать веб-страницы интерактивными, поэтому JavaScript и HTML идут рука об руку. Вот, как запустить код на JS с помощью веб-страницы:
Шаг 1. Откройте VS Code. Перейдите в Файл > Новый файл. Сохраните файл с расширением .html. У нас это будет main.html.
Шаг 2. Скопируйте doctype, расположенный ниже. Это необходимый для запуска HTML-страницы код. Сохраните скопированный текст в файле.
Codechick Шаг 3. Аналогично создайте файл с расширением .js. Напишите в файле следующий JS-код и сохраните его. У нас это будет helloworld.js.
console.log("Hello, world!");Шаг 4. Вернитесь к файлу main.html и на 11 строке впишите название JS-файла. В нашем случае это будет выглядеть так:
Шаг 5. Откройте main.html с помощью браузера.
Шаг 6. Чтобы проверить, запустился ли ваш JS-код, щелкните правой кнопкой мыши в свободной области, нажмите «Просмотреть код» и перейдите на вкладку «Консоль».
Теперь, когда вы знаете, как запустить JavaScript, приступим к изучению основ JS.
СodeСhick.io — простой и эффективный способ изучения программирования.
2023 © ООО «Алгоритмы и практика»