Создать сайт в html в блокноте

Обновлено: 04.07.2024

Для написания веб-страницы вам не нужно дорогое программное обеспечение

Калифорнийский университет
Вашингтонский университет

Дженнифер Кирнин — профессиональный веб-разработчик, помогающий другим в изучении веб-дизайна, HTML, CSS и XML.

Блокнот Windows – это простая программа для обработки текстов, которую можно использовать для написания веб-страниц. Веб-страницы — это просто текст, и для написания HTML можно использовать любую программу обработки текстов.

Сохранить страницу как HTML

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

В Блокноте нажмите «Файл», а затем «Сохранить как».
Перейдите в папку, в которой вы сохранили файлы своего веб-сайта.
Измените раскрывающееся меню "Тип файла" на "Все файлы" (*.*).
Назовите файл, используя расширение .htm или .html.

Начать писать веб-страницу

Начните документ Notepad HTML5 с DOCTYPE. Эта строка сообщает браузерам, какой тип HTML следует ожидать.

Объявление doctype не является тегом. Он сообщает компьютеру, что поступает документ HTML5. Он находится в верхней части каждой страницы HTML5 и имеет следующую форму:

После того как вы укажете тип документа, начните свой HTML. Введите начальный и конечный теги и оставьте место для содержимого тела веб-страницы. Ваш документ Блокнота должен выглядеть следующим образом:

Создайте заголовок для своей веб-страницы

Заголовок HTML-документа — это место, где хранится основная информация о вашей веб-странице, например заголовок страницы и, возможно, метатеги для поисковой оптимизации. Чтобы создать раздел заголовка, добавьте теги заголовка в текстовый документ Notepad HTML между тегами html.

Как и в случае с тегами html, оставьте между ними некоторое пространство, чтобы у вас было место для добавления информации о заголовке.

Добавить заголовок страницы в заголовок

Заголовок вашей веб-страницы – это текст, отображаемый в окне браузера. Это также то, что пишется в закладках и избранном, когда кто-то сохраняет ваш сайт. Сохраните текст заголовка между тегами заголовка. Он не будет отображаться на самой веб-странице, только в верхней части браузера.

Этот пример страницы называется "МакКинли, Шаста и другие домашние животные".

Неважно, насколько длинным является ваш заголовок или занимает ли он несколько строк в HTML-коде, но более короткие заголовки легче читать, а некоторые браузеры обрезают длинные заголовки в окне браузера.

Основная часть вашей веб-страницы

Тело вашей веб-страницы хранится в тегах body. Он должен идти после тегов заголовка, но до конечного тега html. В этой области вы размещаете текст, заголовки, подзаголовки, изображения и графику, ссылки и весь другой контент. Это может быть сколь угодно долго.

Оставляйте дополнительное пространство между начальным и конечным тегами body.

Этот же формат можно использовать для написания веб-страницы в Блокноте.

Создание папки изображений

Прежде чем добавлять содержимое в тело HTML-документа, настройте каталоги так, чтобы у вас была папка для изображений.

Откройте окно "Мои документы".
Откройте папку, в которой хранятся ваши веб-файлы.
Нажмите «Файл» > «Создать» > «Папка».
Назовите папки images.

Сохраните все изображения для своего веб-сайта в папке изображений, чтобы их можно было найти позже. Это упрощает их загрузку при необходимости.

Использование Блокнота для HTML

На заре Интернета такие инструменты, как Блокнот, были стандартным инструментом для написания новых веб-страниц. Однако, учитывая сложность большинства современных страниц, а также взаимодействие HTML и CSS, почти никто больше не использует Блокнот — либо они используют графические инструменты, такие как Adobe Dreamweaver, либо полагаются на платформы кодирования, такие как Visual Studio Code. Текстовая среда, предлагающая линтинг и исправление кода, предпочтительнее пустого и недифференцированного холста, поэтому, хотя Блокнот работает в крайнем случае, он гораздо менее оптимален для редактирования HTML, чем редакторы кода. или графические приложения для веб-дизайна.

Веб-сайт — это просто набор веб-страниц. Веб-страница или веб-документы, написанные на языке HTML (язык гипертекстовой разметки). Эти веб-страницы можно просматривать с помощью любого веб-браузера и Интернета.

Язык HTML используется для написания кода и программ для создания веб-страницы. Создать веб-страницу легко, и вы можете научиться этому, выполнив несколько основных шагов, указанных ниже:

HTML-программу или страницу можно создать во многих HTML-редакторах или текстовых редакторах. Эти редакторы представляют собой программное обеспечение, которое помогает нам писать наш код с помощью простого пользовательского интерфейса. Сегодня мы увидим, как создать HTML-страницу или веб-страницу с помощью редактора Блокнота.

Редактор Блокнота — это встроенный текстовый редактор в Windows Computers. Вы также можете найти похожие редакторы в операционных системах Mac и Linux.

Также доступно множество расширенных редакторов HTML или программного обеспечения.Тем не менее, мы рекомендуем использовать стандартный и простой редактор, такой как блокнот, для начинающих. Это всегда хороший способ начать изучение HTML.

Создание простой HTML-страницы с помощью редактора Блокнота

Следуйте четырем шагам ниже, чтобы создать свою первую веб-страницу с помощью Блокнота.

Шаг 1. Откройте Блокнот (Windows)

Windows 8 или более поздняя версия:
Откройте начальный экран и выполните поиск (введите Блокнот)

Windows 7 или предыдущая версия Windows:
Откройте "Пуск" > "Программы" > "Стандартные" > "Блокнот"

Шаг 2. Создайте новый документ

Перейдите в меню Блокнота: Файл > Создать

Откроется новый пустой документ, и здесь вы сможете начать писать свою первую HTML-программу.

Шаг 3. Напишите HTML-код или программу

Напишите HTML-код. Если вы еще ничего не знаете об HTML, прочтите несколько глав в разделе «Учебники по HTML».

Напишите свой собственный код HTML или просто скопируйте следующую простую программу HTML в блокнот.

Шаг 4. Сохраните HTML-страницу

Перейдите в меню Блокнота: Файл > Сохранить (или используйте сочетание клавиш CTRL + S)

Он попросит вас сохранить файл на вашем компьютере. Дайте ему имя с расширением .html и сохраните его (например, program.html)

Примечание. HTML-страницу следует сохранять с расширением .html с осторожностью.

Шаг 5. Просмотр HTML-страницы в браузере

Веб-браузеры — это программы или программное обеспечение, которые используются для просмотра веб-страниц/веб-сайтов. Вы можете найти Internet Explorer по умолчанию, если используете компьютер с Windows. Вы также можете загрузить другие популярные веб-браузеры, такие как Google Chrome или Firefox. Используйте любой из них.

Теперь просто откройте сохраненный HTML-файл в любом браузере:
Дважды щелкните файл или щелкните файл правой кнопкой мыши и выберите «Открыть с помощью», чтобы выбрать другой браузер.

Ваш HTML-файл будет открыт в веб-браузере, и он покажет вывод на основе вашей HTML-программы.

Поздравляем, если вы смогли запустить свою первую HTML-программу.

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

В этом уроке мы создадим полноценный веб-сайт с помощью блокнота.

Шаг 1. Получите лучший блокнот

Во-первых, для написания кода вам нужен хороший текстовый редактор. простого блокнота недостаточно.
В этом уроке я буду использовать Notepad ++.

< img class="lazyload" data-src="http://fastwebstart.com/wp-content/plugins/cool-image-share/img/roundsimple/twitter.jpg" />

В качестве альтернативы вы можете использовать текстовый редактор Atom или Sublime Text. Оба очень хороши.

Atom и notepad++ бесплатны.

Шаг 2. Создайте целевую страницу для своего веб-сайта

Если вы еще не знакомы с HTML, я бы порекомендовал пройти здесь быстрое руководство по HTML.

Давайте создадим нашу целевую страницу на основе популярного CSS-фреймворка Bootstrap.

Мы используем фреймворк, потому что:

Вам не нужно изобретать велосипед! Фреймворки CSS содержат много конструкций, которые можно использовать повторно
Ваш веб-сайт работает во всех браузерах и на любых устройствах.
Вам не нужно писать много кода

Если вы хотите изучить современный HTML с нуля, добавьте в закладки и прочитайте это руководство:
учебное пособие по современному HTML.

Вот исходный код нашей целевой HTML-страницы (index.html):
veggso_com.zip

В исходном коде вы можете видеть, что мы добавили пользовательский файл CSS ниже CSS Bootstrap:

Основной HTML-код обновлен: добавлено меню навигации, заголовок и три небольших столбца.

Шаг 3. Получите домен и хостинг для сайта

Следующий шаг — разместить наш веб-сайт в Интернете, чтобы его мог увидеть весь мир.

Мы разместим наш веб-сайт на веб-хостинге SiteGround.

Выбрав этот параметр, вы можете добавить больше веб-сайтов в один и тот же аккаунт.

Введите выбранное доменное имя и убедитесь, что в нем нет орфографической ошибки!

Также не забывайте использовать длинный и надежный пароль. Храните пароль в надежном месте.

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

Получив электронное письмо, войдите в свою клиентскую зону:

Добавьте эту страницу в закладки, чтобы в следующий раз можно было быстро войти в панель управления хостингом.

Перейдите на вкладку "Мои учетные записи":

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

На данный момент мы просто хотим загрузить файлы HTML/CSS на наш веб-сайт. Мы можем загрузить файлы, используя простой FTP.

Шаг 4. Загрузите файлы на свой веб-сайт

Мы будем использовать бесплатный FTP-клиент Filezilla для загрузки наших веб-страниц на новый веб-сайт.
Сначала загрузите и установите FTP-клиент FileZilla.

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

< img class="lazyload" data-src="http://fastwebstart.com/wp-content/plugins/cool-image-share/img/roundsimple/twitter.jpg" />

После того как вы вошли в FTP, на левой панели отобразятся ваши локальные папки, а на правой панели — папки вашей учетной записи веб-сервера.

Выберите папку public_html на своем веб-сервере.
Выберите локальную папку, в которой находятся ваши веб-страницы, на левой панели.

< img class="lazyload" data-src="http://fastwebstart.com/wp-content/plugins/cool-image-share/img/roundsimple/twitter.jpg" />

< /p>

Щелкните правой кнопкой мыши файл index.html и выберите "Загрузить". После завершения загрузки посетите веб-сайт в браузере.

Поздравляем! у вас есть веб-сайт на чистом HTML!

< img class="lazyload" data-src="http://fastwebstart.com/wp-content/plugins/cool-image-share/img/roundsimple/twitter.jpg" />

Улучшение вашего веб-сайта

На данный момент ваш веб-сайт очень прост и содержит мало контента. Следующий шаг — добавить больше контента в ваш HTML-файл и продолжать улучшать CSS.
Перейдите в раздел примеров на сайте начальной загрузки.Там у нас есть образцы макетов веб-сайтов. Например, вот этот:
justified-nav. Щелкните правой кнопкой мыши и выберите «Просмотреть исходный код» или нажмите Ctrl+U (⌥ ⌘ U на Mac), чтобы просмотреть исходный HTML-код страницы. Изучите пример, чтобы создать собственный макет.

После внесения обновлений повторно загрузите HTML и CSS на свой веб-сайт.

Читайте также: