«Как написать и запустить HTML на компьютере?» — Яндекс Кью
Чтобы стать профессиональным разработчиком, нужно уметь пользоваться инструментами. В этом выпуске разберёмся, как и в чём написать и запустить HTML-код на своём компьютере.
Шаг 1. Качаем текстовый редактор
Для того, чтобы написать код, сгодится вообще любой текстовый редактор. Подойдёт даже «Блокнот» на вашем компьютере (но в нём очень неудобно всё делать). Мы скачаем и установим хороший редактор, заточенный под веб-разработку. Покажем всё на примере Visual Studio Code.
Зайдите на https://code.visualstudio.com/ и скачайте редактор. Если у вас Windows, то нажмите на любую из синих кнопок. Если OS X или Linux — нажмите Other platforms.
Установка пройдёт как обычно — нужно запустить файл VSCodeUserSetup, много раз нажать «Далее» и поставить пару галочек.
Шаг 2. Запускаем редактор и осматриваемся
Свежеустановленный VS Code встречает нас экраном с большим количеством ссылок.
С ними можно познакомиться позже, а сейчас нужно настроить всё для работы.
Хорошо бы, чтобы во время работы все нужные файлы лежали в одной папке (пока проект маленький, так можно делать). Для этого добавим рабочую папку, чтобы VS Code показывал нам только её содержимое.
По шагам на скриншоте:
- Add workspace folder — открывает меню выбора папки.
- Создадим новую папку personal_page в любом удобном месте и зайдём в неё.
- Нажмём Add.
После этого слева появится панель Explorer с пустым рабочим пространством Untitled (Workspace). Мы создали папку, давайте её наполним.
Шаг 3. Добавляем файлы
После создания папка пустая. Щёлкнем правой кнопкой по заголовку personal_page и добавим три файла, которые понадобятся в работе — index.html, style.css и script.js. Для начала этого хватит.
https://assets.htmlacademy.ru/img/blog/909/[email protected]
Шаг 4. Делаем работу удобнее
Сейчас все три файла открыты во вкладках, и между ними не всегда удобно переключаться.
Чтобы было удобнее, код со стилями можно перенести в другую часть окна, например, вниз. Для этого нажмите правой кнопкой по вкладке со style.css и выберите split down,чтобы увидеть результат.
Шаг 5. Добавляем код
Пока отредактируем только index.html (файл с разметкой) и style.css (файл со стилями), а script.js оставим на будущее. Если у вас уже есть какой-нибудь код, напишите его, или используйте готовый — мы, например, возьмём код из интерактивных курсов.
index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Сайт начинающего верстальщика</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
На главную
</nav>
</header>
<main>
<article>
День первый. Как я забыл покормить кота
Кто бы мог подумать, что семантика это так важно, мне срочно нужно было об этом поговорить.
Взгляд упал на кота. Кот издал настойчивое «Мяу». И я понял — пришло время для первой записи в блог. И покормить кота.
</article>
<aside>
Здесь могла быть ваша реклама.
</aside>
</main>
<footer>
Подвал сайта
</footer>
</body>
</html>
style.css
Скопируем код со стилями из файла 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 на тренажёрах — бесплатно.
HTML — ikt1367.ru
Практическая работа «Разработка сайта с использованием языка разметки гипертекстовых документов
HTML»Цель работы: формирование навыков использования основных тэгов языка HTML при создании Web-сайта в текстовом редакторе Блокнот.
Описание сайта
Web-сайт состоит из 5 связанных гиперссылками страниц:
- Титульная страница «Времена года» — файл index.htm;
- «Зима» – файл winter.htm;
- «Весна» – файл spring.htm;
- «Лето» – файл summer.htm;
- «Осень» – файл autumn.htm.
Описание работы
Часть 1
Создание страницы «Зима»
- Скопировать папку «Времена года» в личную папку.
- Запустить приложение Блокнот. Создать html-код страницы «Зима», опираясь на изученный ранее материал (конспект, текст параграфа).
- Введите заголовок первого уровня «Времена года» и заголовок второго уровня «Зима». Отцентрируйте заголовки.
- Выполните отбивку заголовков прямыми линиями. Цвет первого заголовка – черный, цвет второго – синий.
- Сохранить файл в папке «Времена года»: установите тип файлов – «Все файлы», укажите имя файла – winter.htm.
- Просмотрите страницу в браузере.
- Установите фоновый цвет страницы (голубой, bgcolor=»ccccff»).
- Поместите рисунок, выравнивая его по правому краю документа.
- Поместите стихотворение, выравнивая его по левому краю страницы. Каждую строку оформите отдельным абзацем, строфы отделите пустой строкой.
- Создайте панель навигации по сайту.
- Сохраните файл. Просмотрите страницу в браузере. Она должна иметь вид, соответствующий образцу.
Код страницы:
Код страницы:
<HTML>
<HEAD>
<TITLE > Времена года </TITLE>
</HEAD>
<body bgcolor=»ccccff»>
<h2 ALIGN= «center «> Времена года </h2>
<HR>
<FONT COLOR=»blue»>
<h3 ALIGN=»center»> Зима </h3>
</FONT>
<HR>
<IMG SRC=»zima.jpg» ALT=»Зима» ALIGN=»right»>
<P ALIGN=»left»> Чудная картина, </P>
<P> Как ты мне родна: </P>
<P> Белая равнина, </P>
<P> Полная луна, </P>
<BR>
<P> Свет небес высоких, </P>
<P> И блестящий снег, </P>
<P> И саней далеких </P>
<P> Одинокий бег. </P>
<BR>
<P ALIGN=»center»>
[<A href=»winter.htm»> Зима</A>]  
[<A href=»spring.htm»> Весна </A>]  
[<A href=»summer.htm»> Лето </A>]  
[<A href=»autumn.htm»> Осень </A>]  
</P>
</body>
</HTML>
Часть 2
Создание страницы «Весна»
- Запустить приложение Блокнот. Создать html-код страницы «Весна».
- Заголовки и их отбивку выполнить аналогично странице «Зима», цвет второго заголовка – зеленый.
- Цвет фона – бирюзовый (bgcolor=»00ffcc»).
- Стихи разместить аналогично странице «Зима», начертание символов определить как полужирный курсив.
- Рисунок разместить аналогично странице «Зима», установив размеры изображения по вертикали и горизонтали: 450 на 600 пикселей.
- Сохранить файл в папке «Времена года». Указать тип файлов – «Все файлы». Указать имя файла – spring.htm
- Открыть файл spring.htm с помощью браузера Internet Explorer. Вид окна должен соответствовать образцу.
Код страницы:
<HTML>
<HEAD>
<TITLE> Времена года </TITLE>
</HEAD>
<body bgcolor=»00ffcc»>
<h2 ALIGN=»center»> Времена года </h2>
<HR>
<FONT COLOR=»green»>
<h3 ALIGN=»center»> Весна </h3>
</FONT>
<HR>
<IMG SRC=»vesna.
<P ALIGN=»left»>
<P><B><I>Зеленым бисером на ветках </P></B></I>
<P><B><I>Явились первые листочки</P></B></I>
<P><B><I>И в небе облаков виньетки,</P></B></I>
<P><B><I>И певчих птиц большие точки.</P></B></I><BR>
<P><B><I>И заиграло ярким светом</P></B></I>
<P><B><I>Весной разбуженное небо…</P></B></I>
<P><B><I>И закружилась над планетой</P></B></I>
<P><B><I>Весна, но канет вскоре в небыль</P></B></I>
<BR>
<P ALIGN=»center»>
[<A href=»winter.htm»> Зима</A>]  
[<A href=»spring.htm»> Весна </A>]  
[<A href=»summer.htm»> Лето </A>]  
[<A href=»autumn.
</P>
</body>
</HTML>
jpg» haight=»450″
ALT=»Весна» ALIGN=»right»>
htm»> Осень </A>]  Часть 3
Создание страницы «Лето»
- Запустить приложение Блокнот. Создать html-код страницы «Лето».
- Заголовки и их отбивку выполнить аналогично, цвет заголовков – черный.
- Разместить объекты на странице, согласно образцу. Цвет фона – зеленый (bgcolor=»00cc66″).
- Сохранить файл в папке «Времена года». Указать тип файлов – «Все файлы». Указать имя файла – summer.htm.
- Открыть файл summer.htm с помощью браузера Internet Explorer. Вид окна должен соответствовать образцу.
Код страницы:
<HTML>
<HEAD>
<TITLE> Времена года </TITLE>
</HEAD>
<body bgcolor=»00cc66″>
<h2 ALIGN=»center»> Времена года </h2>
<HR>
<FONT COLOR=»black»>
<h3 ALIGN=»center»> Лето </h3>
</FONT>
<HR>
<IMG SRC=»leto.
<P ALIGN=»left»>
<P>Лениво дышит полдень мглистый, </P>
<P>Лениво катится река, </P>
<P>И в тверди пламенной и чистой </P>
<P>Лениво тают облака.</P>
<BR>
<P>И всю природу, как туман, </P>
<P>Дремота жаркая объемлет, </P>
<P>И сам теперь великий Пан </P>
<P>В пещере нимф покойно дремлет.</P>
<BR>
<P ALIGN=»center»>
[<A href=»winter.htm»> Зима</A>]  
[<A href=»spring.htm»> Весна </A>]  
[<A href=»summer.htm»> Лето </A>]  
[<A href=»autumn.htm»> Осень </A>]  
</P>
</body>
</HTML>
jpg» haight=»450″
ALT=»Лето» ALIGN=»right»>Часть 4
Создание страницы «Осень»
Запустить приложение Блокнот. Создать html-код страницы «Осень».
- Заголовки и их отбивку выполнить аналогично, цвет первого заголовка – черный, второго – коричневый оттенок #993300.
- Разместить объекты на странице, согласно образцу. Цвет фона – желтый (bgcolor=»ffcc66″).
- Сохранить файл в папке «Времена года». Указать тип файлов – «Все файлы». Указать имя файла – autumn.htm.
- Открыть файл autumn.htm с помощью браузера Internet Explorer. Вид окна должен соответствовать образцу.
Код страницы:
<HTML>
<HEAD>
<TITLE> Времена года </TITLE>
</HEAD>
<body bgcolor=»ffcc66″>
<h2 ALIGN=»center»> Времена года </h2>
<HR>
<FONT COLOR=»993300″>
<h3 ALIGN=»center»> Осень </h3>
</FONT>
<HR>
<IMG SRC=»osen.jpg» ALT=»Осень» ALIGN=»right»>
<P ALIGN=»left»>
<P> Унылая пора! Очей очарованье! </P>
<P>Приятна мне твоя прощальная краса – </P>
<P>Люблю я пышное природы увяданье, </P>
<P>В багрец и золото одетые леса, </P>
<P>В их сенях ветра шум и свежее дыханье, </P>
<P>И мглой волнистою покрыты небеса,</P>
<P>И редкий солнца луч, и первые морозы, </P>
<P>И отдалённые седой зимы угрозы.
<BR>
<P ALIGN=»center»>
[<A href=»winter.htm»> Зима</A>]  
[<A href=»spring.htm»> Весна </A>]  
[<A href=»summer.htm»> Лето </A>]  
[<A href=»autumn.htm»> Осень </A>]  
</P>
</body>
</HTML>
</P>Часть 5
Создание титульной страницы
Запустить приложение Блокнот. Создать html-код титульной страницы.
- Поместить заголовок первого уровня «Времена года», выравнивание – по центру, цвет заголовка – синий.
- Выполнить отбивку заголовка прямой линией.
- Поместить таблицу из 2 строк и двух столбцов. Задать ширину границ – 3 пункта, размер ячеек 300 на 200 пикселей.
- Поместить в ячейки иллюстрации.
- Добавить панель навигации.
- Сохранить файл в папке «Времена года». Указать тип файлов – «Все файлы». Указать имя файла – index. htm.
- Открыть файл index.htm с помощью браузера Internet Explorer. Вид окна должен соответствовать образцу.
htm.<HTML>
<HEAD>
<TITLE> Времена года </TITLE>
</HEAD>
<body>
<FONT COLOR=»blue»>
<h2 ALIGN=»center»> Времена года </h2>
</FONT>
<HR>
<table align=»center»>
<tr>
<td Haight=»200″ border=»3″ >
<IMG SRC=»zima.jpg» Haight=»200″ ALT=»Зима» ALIGN=»center»> </td>
<td Haight=»200″ border=»3″ >
<IMG SRC=»vesna.jpg» Haight=»200″ ALT=»Весна» ALIGN=»center»> </td>
</tr>
<tr>
<td Haight=»200″ border=»3″ >
<IMG SRC=»leto.jpg» Haight=»200″ ALT=»Лето» ALIGN=»center»> </td>
<td Haight=»200″ border=»3″ >
<IMG SRC=»osen.jpg» Haight=»200″ ALT=»Осень» ALIGN=»center»> </td>
</tr>
</table>
<P ALIGN=»center»>
[<A href=»winter.
[<A href=»spring.htm»> Весна </A>]  
[<A href=»summer.htm»> Лето </A>]  
[<A href=»autumn.htm»> Осень </A>]  
</P>
</body>
</HTML>
htm»> Зима</A>]  Приложение 1
Приложение 2
Приложение 3
Источник: https://urok.1sept.ru/articles/602296
Hello World в HTML | Tek Eye
В этом простом учебном пособии «Hello World» представляет собой код HTML в качестве отправной точки для веб-страницы. Получение системы для отображения сообщения Hello World считается основной отправной точкой при написании кода. Он используется для подтверждения работоспособности системы. С отправной точки Hello World можно написать более полезный код. При ручном кодировании веб-страницы пишите ее с учетом последнего стандарта HTML, широко известного как HTML5. Приведенный здесь пример веб-страницы Hello World предназначен для HTML5 и более поздних версий.
Пример HTML Hello World, основная веб-страница HTML
Базовая веб-страница Hello World — это шаблон, с которого начинается любая HTML-страница. Поскольку этот пример настолько прост, показана полная HTML-страница Hello World, а затем объяснена каждая ее часть.
С помощью текстового редактора (например, Блокнота в Windows) добавьте в файл следующее и сохраните его, присвоив ему имя hello-world.html . Некоторые текстовые редакторы, например Notepad++ для Windows, кодируют текст цветом, чтобы его было легче читать.
<голова>
Основная веб-страница
<тело>
Привет, мир!
Откройте новый файл HTML в веб-браузере.
Понимание HTML-кода Hello World
Что означает первая строка?
Это сообщает браузеру или другому программному обеспечению или системе, обрабатывающей веб-страницу, что это стандартная веб-страница HTML5.
Использование другой настройки для !DOCTYPE , отличный от html сообщает браузерам или системе, что веб-страница должна обрабатываться так, как это было бы в старых браузерах, это называется режимом Quirks. Для простоты обслуживания в будущем напишите веб-страницы для поддержки стандартного режима HTML5, поэтому используйте !DOCTYPE html .
Все, что находится между второй строкой, стартовым тегом html :
И последняя строка, конечный тег для начального тега:
Фактическая веб-страница. Веб-страница состоит из содержимого и тегов. Теги сообщают браузеру, как обрабатывать содержимое веб-страницы. Тег начинается с < (символ меньше) и заканчивается > (символ больше) и обычно идет парой. Пара html — это теги, которые обертывают всю веб-страницу. Вы можете определить конечный тег, потому что он начинается с .
Существует много типов тегов HTML. Сколько существует HTML-тегов? Существует более 100 тегов HTML для управления тем, что отображается на веб-странице, некоторые из них используются намного больше, чем другие.
Внутри тегов html веб-страница состоит из двух основных частей: заголовка и тела . Головная часть содержит элементы, которые поддерживают способ обработки контента, в то время как основная часть будет содержать фактическую информацию, которая будет отображаться на веб-странице.
На базовой веб-странице в этом руководстве головка имеет только заголовок , который отображается в верхней части браузера (обычно на вкладке, отображающей страницу). Другие вещи, которые могут появиться в заголовок включает ссылки на другие файлы, теги данных, называемые метаданными (добавлены с метатегами ) и теги сценария (для кода JavaScript, который запускается браузером при отображении веб-страницы).
Весь контент веб-страницы помещается между тегами body , здесь просто слова Hello World! . Затем они отображаются в браузере. Могут отображаться другие типы контента, такие как изображения, видео и списки.
Обработка пробелов
При создании веб-страницы HTML5 стоит узнать, как работает интервал в HTML. Это не то же самое, что написание документа в текстовом редакторе или текстовом процессоре. Например этот контент:
<тело>
Привет, мир!
И снова здравствуйте!
Отображается так:
Это связано с тем, что все пробелы до и после содержимого удаляются, а несколько пробелов между содержимым сокращаются до одиночных пробелов, поэтому все символы новой строки и табуляции удаляются. Чтобы получить этот эффект:
Вы можете разделить содержимое с помощью тегов p (абзац), а затем расположить абзацы, используя стиль . Вот так (возможны и другие способы достижения того же эффекта):
<голова>
Основная веб-страница
<тело>
Привет, мир!
И снова здравствуйте!
Спецификации HTML5
Веб-страницы HTML5 хорошо работают во всех современных браузерах и системах, но по-прежнему отображают содержимое в старых веб-браузерах (где последние функции HTML5 игнорируются).
Спецификация HTML доступна в виде постоянно развивающегося документа, стандарта жизни , разработанного Рабочей группой по технологиям веб-гипертекстовых приложений (WHATWG). В качестве альтернативы, спецификация HTML от Консорциума World Wide Web (W3C) представляет собой точечный выпуск, в настоящее время в версии 5 (отсюда HTML5), со следующей версией HTML5, HTML версии 5.1, в конвейере. Версия WHATWG призвана отражать то, что происходит или должно происходить в последних версиях браузеров. В то время как спецификация W3C делает ставку на базовую версию HTML. Существуют различия между спецификациями, но можно использовать любой из них. Вот логотип HTML5:
Резюме
В этой статье показаны самые основные веб-страницы. Скопируйте пример кода, когда вам нужно создать новую веб-страницу. Есть много вещей, которые можно узнать о кодировании HTML, и множество ресурсов, доступных для обучения, попробуйте веб-разработку в сети разработчиков Mozilla или на w3schools.
com. Пример HTML-кода Hello World, в котором отображается изображение и список, см. в файле hello-world.html. Используйте контекстное меню браузера (обычно щелкните правой кнопкой мыши) и выберите параметр для просмотра исходного кода.
Автор: Дэниел С. Фаулер Опубликовано: Обновлено: