1stopwebsiteshop.us - Как сделать сайт html (создать) - в блокноте пошаговая инструкция

Закрыть ... [X]

Как сделать свой сайт с помощью блокнота html

Доброго времени суток. Как правило в современном мире сайты создаются либо на CMS либо в бесплатных или платных конструкторах. Но все же, в начале времен 1990-2000 годы сайты создавались преимущественно на HTML, без использования каких-либо обращений к базе данных. Различные программы, позволяющие редактировать HTML + CSS в реальном времени, например, Dreamweaver — появились только в самом конце 20-го века. Поэтому сайты создавались в блокноте и других подобных редакторов. Хоть сейчас и существует множество удобных способов сделать качественный ресурс, создание сайта при помощи блокнота позволяет выучить основы построения страницы и основы HTML в целом.

Итак, для того, как сделать свой сайт с помощью блокнота html чтобы создать сайт через блокнот вам нужно для начала создать HTML файл. Сделать это можно следующим образом:
Заходите в меню Пуск -> Все программы -> Стандартные -> Блокнот

Создание сайта в блокноте
И сразу же сохраним его в HTML формате:  В блокноте нажмите: Файл -> Сохранить как

Сохраняем файл в формате HTML
И напишите название файла, к примеру, index.html

Сохраняем файл в формате HTML

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

<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Мой самый прекрасный сайт</title> </head> <body> <h1>Мой первый сайт</h1> <p>Еще совсем чуть-чуть, и я научусь делать самые лучшие сайты на свете.</p> </body> </html>

По сути это основные элементы, из которых и состоит любой веб-ресурс. Все, что находится в скобках называется HTML-тегом или просто тегом. Все HTML теги открываются, содержат в себе какую-то информацию и затем закрываются. Есть и другие теги, которым не нужен закрывающий тег, но о них мы поговорим позже. Сейчас нам куда интересней ответ на вопрос «как же создать сайт в блокноте?».

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

  • DOCTYPE — позволяет браузеру определить, что за тип документа он открыл, поскольку у HTML-документа есть множество версий.
  • html — тег, которым открывается и закрывается вся веб-страница
  • head — хед (или голова) документа. Данный тег несет в себе информацию для браузера и не отображается на web-странице. В нем содержаться по большей части информация для браузера и поисковой системы, стили CSS, которые мы пропишем чуть позже и различные скрипты.
  • meta — указывает браузеру и поисковой системе определенную информацию. В данном случае тег мета указывает браузеру о необходимости использования кодировки UTF-8 (для того, чтобы правильно отображался русский язык). В других случаях этот тег может указывать какие-либо другие данные, например, автор статьи, описание страницы, ключевые слова.
  • body — боди (или тело) документа. В этом теге содержится все то, что мы в данный момент видим на странице, можно сказать, что он включает в себя скелет или каркас веб-страницы.
  • h1 — Главный заголовок на странице
  • p — параграф — текст, который мы видим на странице

Нажмем сохранить и теперь кликнем на получившийся файл. Откроется браузер и мы увидим наш сайт сделанный на блокноте

Пример создание сайта в блокноте

Получился у нас конечно, не самый лучший в мире веб-ресурс, но надо ведь с чего-то начинать?:)

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

Теперь давайте придадим ему «красивостей», напишем несколько стилей внутри тега <head>

body { background: #F2F2F2; max-width: 900px; margin: 0 auto; padding: 20px; } h1{ color: #4C4C4C; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #BEBEBE; } p{ font:italic; }

В итоге наш пример сайта сделанного в блокноте в коде выглядит так

<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Мой самый прекрасный сайт</title> <style> body { background: #F2F2F2; max-width: 900px; margin: 0 auto; padding: 20px; } h1{ color: #4C4C4C; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #BEBEBE; } p{ font:italic; } </style> </head> <body> <h1>Мой первый сайт</h1> <p>Еще совсем чуть-чуть, и я научусь делать самые лучшие сайты на свете.</p> </body> </html>

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

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

 


Источник: https://nz4.ru/sozdanie-sajta/sozdanie-sayta-v-bloknote/


Поделись с друзьями



Рекомендуем посмотреть ещё:



Создание сайта в блокноте Простой пример создание сайта в Исправленные брови до и после

Как сделать свой сайт с помощью блокнота html Как создать сайт в блокноте HTML пример и инструкция
Как сделать свой сайт с помощью блокнота html Как сделать сайт в блокноте. HTML и CSS нам помогут
Как сделать свой сайт с помощью блокнота html Как сделать сайт в блокноте: что нужно знать
Как сделать свой сайт с помощью блокнота html Как создать сайт с помощью блокнота
Как сделать свой сайт с помощью блокнота html Как создать сайт через блокнот?
Как сделать свой сайт? Ашхабад - столица Туркменистана Доставка товаров из США и Европы Как нарисовать губы карандашом поэтапно для начинающих - «Как Клубника в шоколаде: рецепты с фото, советы по украшению Коренные зубы у детей: смена молочных зубов на постоянные МК мухи, несколько паучков и фоторепортаж из жизни. Страна Мастеров Оформление инвалидности: подробная инструкция

ШОКИРУЮЩИЕ НОВОСТИ