пишем код в блокноте
Как написать и запустить HTML на компьютере?
Чтобы стать профессиональным разработчиком, нужно уметь пользоваться инструментами. В этом выпуске разберёмся, как и в чём написать и запустить HTML-код на своём компьютере.
Шаг 1. Качаем текстовый редактор
Для того, чтобы написать код, сгодится вообще любой текстовый редактор. Подойдёт даже «Блокнот» на вашем компьютере (но в нём очень неудобно всё делать). Мы скачаем и установим хороший редактор, заточенный под веб-разработку. Покажем всё на примере Visual Studio Code.
Зайдите на https://code.visualstudio.com/ и скачайте редактор. Если у вас Windows, то нажмите на любую из синих кнопок. Если OS X или Linux — нажмите Other platforms.
Установка пройдёт как обычно — нужно запустить файл VSCodeUserSetup, много раз нажать «Далее» и поставить пару галочек.
Шаг 2. Запускаем редактор и осматриваемся
Свежеустановленный VS Code встречает нас экраном с большим количеством ссылок. С ними можно познакомиться позже, а сейчас нужно настроить всё для работы.
Хорошо бы, чтобы во время работы все нужные файлы лежали в одной папке (пока проект маленький, так можно делать). Для этого добавим рабочую папку, чтобы VS Code показывал нам только её содержимое.
По шагам на скриншоте:
После этого слева появится панель Explorer с пустым рабочим пространством Untitled (Workspace). Мы создали папку, давайте её наполним.
Шаг 3. Добавляем файлы
После создания папка пустая. Щёлкнем правой кнопкой по заголовку personal_page и добавим три файла, которые понадобятся в работе — index.html, style.css и script.js. Для начала этого хватит.
Шаг 4. Делаем работу удобнее
Сейчас все три файла открыты во вкладках, и между ними не всегда удобно переключаться. Чтобы было удобнее, код со стилями можно перенести в другую часть окна, например, вниз. Для этого нажмите правой кнопкой по вкладке со style.css и выберите split down,чтобы увидеть результат.
Шаг 5. Добавляем код
Пока отредактируем только index.html (файл с разметкой) и style.css (файл со стилями), а script.js оставим на будущее. Если у вас уже есть какой-нибудь код, напишите его, или используйте готовый — мы, например, возьмём код из интерактивных курсов.
Скопируем код со стилями из файла https://htmlacademy.ru/assets/courses/299/outlines.css — откройте его в браузере, скопируйте все строки и вставьте в файл style.css в редакторе.
Шаг 6. Запускаем код и смотрим на результат
Самый простой способ — открыть папку с файлами через проводник и запустить файл index.html. Вы увидите результат вёрстки в браузере, но это не слишком удобно — при любых изменениях придётся переходить в браузер и обновлять страницу.
Давайте настроим всё так, чтобы наша страничка открывалась сама и обновлялась, если вы что-то изменили в разметке или стилях.
Для этого нам понадобится расширение Live Server. Найти его можно прямо в VS Code (пятая иконка в меню слева) — введите название и нажмите Install. Другой способ — скачать Live Server из магазина расширений, но это менее удобно.
После установки расширения Windows может попросить разрешение на доступ к сети. Это нужно, чтобы запускать локальный сервер, Разрешайте, это безопасно.
Чтобы запустить код, нажмите кнопку Go Live на нижней панели.
Результат выглядит так. Слева — редактор, справа — браузер. Теперь измените код в редакторе и сохраните его, а он автоматически изменится и в окне браузера.
Что мы сделали
В следующих частях — о добавлении и проверке кода на JavaScript, и о том, как сделать работу с кодом ещё удобнее. Подпишитесь на нашу рассылку, чтобы не пропустить следующие выпуски.
Не знаете, какой код написать?
Знакомство с HTML и CSS на интерактивных курсах — бесплатно.
Нажатие на кнопку — согласие на обработку персональных данных
Создание и раскрутка сайта
Сайтостроение, WEB-дизайн, SEO-оптимизация
Как создать файл html в блокноте
fЧтобы создать файл html совсем не обязательно покупать или скачивать из интернета для этого какие-либо приложения или программы. В любом компьютере есть уже готовая бесплатная программа «Блокнот», которая идет в комплекте с операционной cистемой windows.
В принципе создать такой документ можно в любом текстовом редакторе, даже в ворде.
Как создать html документ в блокноте
Находим программу на своем компьютере:
Наполняем документ содержимым, после чего в главном меню выбираем «Файл»—> Сохранить как…
Чтобы сохранить файл с расширением html, надо поменять *.txt на *.html, как здесь:
Таким образом, наш файл html создан.
На самом деле, существуют программы, которые помогают ускорить процесс наполнения файла содержимым.
Среди таких: Notepad++ и Dreamweaver. Первая является бесплатной и можно ее скачать на официальном сайте. Вторая – платная.
Преимущества программы Dreamweaver
После запуска программы надо будет выбрать: Создать HTML.
Файл будет создан автоматически с уже готовым обязательным кодом.
Сохраняем файл через выпадающее меню в программе.
Аналогичным образом можно создавать документы в других программах.
Структура html документа
А теперь поговорим о том, как должен выглядеть html файл, чтобы его мог правильно интерпретировать браузер.
Вообще, что такое html?
Это язык гипертекстовой разметки и его основные структурные элементы – теги. Благодаря им браузер «понимает», что должно отображаться на веб странице.
Для начала создадим структуру документа, прописав основные теги:
Фото: создадим структуру документа
Но, чтобы наша страница в интернете выглядела более привлекательно, нам понадобится еще один файл CSS.
Этим документом мы создадим стили: цвета, отступы, т.е. приукрасим нашу веб страницу.
Открываем блокнот, создаем таблицу стилей, сохраняем файл:
Можно также добавить текст. Например: дать заголовок странице, прописав его между тегами: Страница обо мне и Приветствую Вас!
Пишем программы (скрипты) в Блокноте Windows
С этой статьей вы не научитесь программировать и даже не напишите как таковую программу, но найдете здесь отличные VBS скрипты и BAT файлы, которые без проблем напишете в обычном блокноте Windows, сможете усовершенствовать по своему, потом похвастаться перед друзьями и близкими. Возможно это поднимет вам настроение и вы отлично проведете время.
Данных расширений (vbs, bat) файлы создаются во всеми известном Блокноте Windows (Notepad). Для большего удобства создания скриптов рекомендуется использовать усовершенствованный (скажем так) блокнот — Notepad++. Он удобен подсветкой синтаксиса большого количества языков программирования, если вам это мало о чем говорит, то скачайте и пишите в нем — ошибок сделаете меньше в коде, ну или будет их проще найти, чем в том же мало функциональном Блокноте Windows.
Для наглядности пример (слева — Блокнот Windows, справа — Notepad++):
Приступим
Если вы уже знакомы с VBS скриптами и батниками, то скорее всего нижеследующие примеры вам будут неинтересны, если же вы новичок, то для первоначального ознакомления — то, что нужно.
Научим компьютер здороваться
Set sapi=CreateObject(«sapi. spvoice»)
Один нюанс: если вы прописали в кавычках слова русскими буквами, а при запуске произносится непонятно что, то у вас просто не установлен русский голосовой движок. Подробная установка и настройка голосового движка выходит за рамки нашей статьи, поэтому более подробно ознакомьтесь здесь и вновь возвращайтесь сюда.
Теперь, сделаем следующее: пропишем данный скрипт в автозагрузку, а это означает то, что при запуске компьютера вам будет произнесено написанное в программе слово (слова), если как в примере, то будет говорить — «Hello» при каждом включении компьютера. Как это сделать?
Все просто, программу (скрипт) добавить в автозагрузку можно таким же образом, то есть через такой же VBS скрипт. Создаем файл в блокноте, копируем/вставляем (Ctrl+C/Ctrl+V) следующий код:
Dim vOrg, objArgs, root, key, WshShell
Set WshShell = WScript. CreateObject(«WScript. Shell»)
WshShell. RegWrite root+keyHP,»C:\Privet. vbs /autorun»
Изменяем путь до скрипта «говорилки», вот эту строчку — C:\Privet. vbs на свою. Прописываем где у вас лежит этот скрипт и как называется. Дальше сохраняем только что созданную мини программу в блокноте и запускаем. Все, теперь компьютер будет с вами здороваться пр каждом включении.
Открыть дисковод
Set a = CreateObject(«WMPlayer. OCX.7»)
Есть более интересная модификация данного скрипта:
Set WMPlayer = CreateObject(«WMPlayer. OCX.7»)
WMPlayer. CdRomCollection. Item(0).Eject()
В данном случае будет все время открываться-закрываться CD/DVD-привод, на ноутбуках в этом случае будет открываться после каждого его закрытия.
Внимание! Второй код (открытие-закрытие дисковода), некоторые антивирусы видят как вредоносную программу. Антивирус Касперского (в т. ч. и Kaspersky Free ) его видит именно так и уничтожает сразу же. В первом же случае (просто открытие дисковода) для антивирусных программ не является вредоносным скриптом.
Чтобы прекратить автоматически открывать-закрывать дисковод необходимо:
Интересная находка из Сети — игра на VBS. Необходимо угадать число от 0 до 100. Скрипт автоматически при запуске задает (разгадывает) число, которое вам необходимо угадать и ввести в специальном окошке, при неправильном ответе даются подсказки, например меньше или больше.
Ниже тот самый код который необходимо скопировать и вставить в блокнот, далее сохранить (расширение. vbs).
Вы также можете изменять сообщения по своему, все что написано кириллицей без проблем редактируется. Не бойтесь сломать код. Поэкспериментируйте. В случае чего заново скопируйте рабочий код отсюда.
Set y = CreateObject(«Scripting. FileSystemObject»)
MsgBox «Я загадал число от 1 до 100, попробуй отгадать»,64,»Угадайка»
If c = «!» Then CreateObject(«WScript. Shell»).Run «notepad C:\Windows\Result. dll»,3,True. Exit Do
If IsNumeric(c) = True Then
If CInt(c) Number Then MsgBox «Нет, это не » & c & «. Я загадал число меньше»,64,»Угадайка»
If CInt(c) = Number Then
Set y = CreateObject(«Scripting. FileSystemObject»)
MsgBox («Количество попыток: » & a)
If MsgBox («Правильно, это было число » & c & «. Начать заного?»,36,»Угадайка») = 6 Then Exit Do Else WScript. Quit
MsgBox «Это не число!»,16,»Угадайка»
If l = 6 Then WScript. Quit
Ну и перед тем как переходить к батникам (.BAT) воспользуемся самым полезным VBS скриптом из всех перечисленных в этой статье.
Скрипт закрывающий wscript. exe
Set TaskKill = CreateObject(«WScript. Shell»)
TaskKill. Run «TaskKill /f /im wscript. exe»
По сути он делает тоже самое, что чуть выше объяснялось в диспетчере задач, как например нельзя просто взять и закрыть надоедливый скрипт открывающий-закрывающий дисковод, а запустив данный скрипт все запущенные будут закрыты. Это как клин клином вышибают.
Немного познакомились с VBS скриптами и о том как их писать в блокноте, теперь рассмотрим несколько примеров использования BAT файлов (далее — батник).
Завершение работы /Перезагрузка компьютера
Совсем простой батник состоящий всего из одной строки.
shutdown — s — t 1 — c — f
Есть такой вариант кода:
shutdown — r — t 1 — c — f
Все также, прописываем в блокноте, сохраняем с расширением. bat и после запуска компьютер перезагрузится (обычная перезагрузка компьютера).
Удаление обновлений
Данный батник пригодится в том случае, если вы уже обновились до Windows 10. В чем суть? В этом батнике перечислены команды по удалению нескольких обновлений, как видно из названия — обновления телеметрии, или как раз одна из шпионских штучек системы, мы однажды уже говорили как отключить функции слежки Windows 10. в данном же случае вы просто создаете батник, в содержимое копируете код ниже и запускаете, после чего будут удалены перечисленные обновления.
echo Step 1: Delete Updates Telemetry
wusa /uninstall /kb:3068708 /quiet /norestart
wusa /uninstall /kb:3022345 /quiet /norestart
wusa /uninstall /kb:3075249 /quiet /norestart
wusa /uninstall /kb:3080149 /quiet /norestart
В Интернете встречается много различных скриптов, якобы безвредных, но будьте осторожны, прежде чем пробовать непонятно какой скрипт, некоторые из них могут навредить, например — вносить изменения в реестр, а в случае каких ошибок система будет выдавать ошибки, в таком случае придется или восстанавливать реестр Windows или сделать восстановление системы.
Как создать простой HTML сайт в блокноте
HTML – это основа всех современных сайтов. По сути, это язык разметки, который помогает браузеру правильно отображать те или иные элементы. Чтобы создать свои первые web-страницы будет достаточно даже простого текстового блокнота (имеется ввиду программа-редактор для работы с текстом, а не бумажная записная книжка).
Какие именно шаги нужно пройти и как сделать свой первый сайт «бесплатно», «без регистрации и SMS» — ниже.
Пара слов об HTML
С одной стороны, создание универсального синтаксиса для разметки интернет-страниц позволило этому самому интернету перерасти из технологии объединения сетей до современного WEB’а со всем его многообразием. С другой стороны, так можно сказать про любой язык программирования – он помогает преобразовывать логические структуры в машинный код. Но для того, чтобы получить более-менее внятный результат нужно проделать огромный пласт работы: изучить и досконально знать синтаксис, а на это может уйти много времени и сил, накопить опыт по созданию своих скриптов и т.п., а это ещё больше времени.
HTML был призван добавить интерактивности к скучным «простыням» документов, которые были практически единственным видом контента на заре зарождения глобальной паутины (из-за низких скоростей).
Фактически это язык разметки, который позволяет выделять определённые элементы страницы и задавать для них специфичные параметры (размер, шрифт, тип: картинка это, текст, ссылка, видеофайл и т.д.).
Немного о синтаксисе
Здесь текст позволяет выделить заголовок первого уровня, она состоит из открывающего и закрывающего (с косой чертой) тегов. Некоторые теги, могут использоваться самостоятельно – без закрывающих элементов.
Любой HTML-документ может быть представлен в текстовом виде и должен иметь определённую структуру.
Обязательными тегами для любых HTML-страниц являются следующие:
Внутри тега располагается вся разметка страницы.
Внутри тега HEAD описываются параметры заголовка страницы, включая так горячо любимые seo-атрибуты: title и description.
А внутри BODY располагается весь остальной контент.
В общей сложности в современной версии языка разметки HTML5 используется 125 основных элементов (тегов).
Простая web-страница в блокноте
Открываете любой доступный текстовый редактор (это может быть встроенное системное приложение, например, «Блокнот» в Windows, или сторонний софт, например, Notepad++, AkelPad и т.п.).
Алгоритм работы очень простой:
Обратите внимание, блокнот Windows в устаревших версиях системы сохраняет текст в кодировке ANSI (в новых версиях он работает с UTF-8), это не преступление, но вместо кириллических символов в браузере вы можете увидеть кракозябры. Поэтому с помощью специального атрибута нужно просто «подсказать» браузеру, что ему нужно работать с ANSI:
(тег вписывается внутри блока HEAD).
Хватит теории, пора переходить к делу. Давайте создадим в блокноте полноценную страницу. Просто скопируйте и вставьте следующий код в ваш блокнот.
Сохраните файл как index.html и откройте в браузере.
Вы получили типовой адаптивный шаблон, который можно наполнить своим контентом. Только править нужно наполнение, а не теги, нельзя их удалять или нарушать структуру (например, убирать закрывающие), так как в противном случае вся ваша «вёрстка» съедет и будет отображаться «криво».
Пошаговая инструкция для новичков по созданию сайта с нуля без навыков программирования.
Стили CSS, скрипты, картинки и другой контент
Как можно заметить, приведённый пример адаптируется под ширину окна браузера и может выстраиваться в одну вертикальную колонку на мобильных устройствах. Как так получилось? Всё дело в таблице каскадных стилей (они же CSS).
Вы можете задать для каждого HTML-тега свои параметры оформления: цвет заливки, текста, тип шрифта, его размер, отступы и многое другое. В нашем примере стили прописаны в блоке
Как создать простой HTML сайт в блокноте
HTML-сайты не обязательно имеют примитивный дизайн. Существует множество бесплатных HTML шаблонов, ничем не уступающих по привлекательности тем, что используются в конструкторах сайтов или CMS. Но большие проекты на них неудобно делать. Много страниц – много мороки, поскольку редактирование каждой требует копания в коде. У них нет панели управления, также все страницы будут статическими – никаких блогов, форумов и т. д.
HTML-сайты чаще всего имеют формат лендингов и сайтов-визиток. В этих сценариях они себя более-менее оправдывают – работают быстро, не грузят сервер, не требуют подключения базы данных. Весь контент содержится в самих страницах. HTML отвечает за вёрстку, структуру блоков, а при помощи каскадных таблиц стилей (CSS) этим элементам можно придать необходимый внешний вид и формат (шрифт, цвет, фон, форма, отступы и т д.).
Вёрстка в HTML бывает табличной (table – устаревший стандарт) и блочной (div – именно её сейчас используют). Язык использует обширный набор тегов, почти все из которых используются парой – открывающий и закрывающий теги (например,
— тег абзаца), внутри которых содержится контент. В CSS используются атрибуты, свойства и их значения, подключаемые к отдельным элементам HTML-каркаса страницы. То есть можно выборочно придавать желаемый вид каждому элементу на сайте по отдельности.
Мы не ставим своей целью обучить вас синтаксису языков – если нужно, то без труда сможете найти сотни уроков и справочников по ним в Сети. Покажем основу – как сделать простой сайт на HTML в блокноте, создать своими руками веб-страницу по тем же стандартам, что используют все посещаемые вами сайты. На примере вы сможете уловить суть процесса, оценить для себя, интересна ли вообще эта тема.
Шаг 1 – создание страницы формата HTML
