Как в блокноте с нуля создать простой html сайт: пошаговая инструкция с картинками

Многие начинающие веб-мастеры пытаются самостоятельно конструировать сайты, используя базовые знания HTML. Это самый трудный вариант, нежели чем воспользоваться готовыми CMS, предлагаемыми всевозможными сервисами и конструкторами. Поэтому сегодня мы хотим рассказать, как создать сайт на чистом HTML. Вам понадобится банальный блокнот или утилита NotePad++, с которой в случае с созданием сайтов работать проще. HTML – целый язык, на котором создаётся гипертекстовая разметка страниц. По своему устройству страница в HTML представляет собой большое количество тегов, которые и определяют, как будет компоноваться страница, и параметры расположения и отображения для отдельных ее элементов.

Оглавление:

Как сделать сайт с помощью текстового редактора или создание сайта html в блокноте за пару минут!

Здравствуйте,уважаемые друзья и гости блога Pribylwm.ru! Вы хотите узнать как легко и быстро делается создание сайта html в блокноте на своем компьютере или любом мобильном устройстве? В этом уроке Вы узнаете, как создать простой веб-сайт с нуля, используя Блокнот. Если Вы на Mac, Вам нужно использовать TextEdit.

Есть другие профессиональные редакторы кода, которые Вы можете использовать для редактирования кода, такие как HTML

Если у Вас Mac и Вы хотите что-то лучше, чем TextEdit, Вы можете загрузить Adobe Brackets, который работает как на Mac, так и на Windows. Я буду работать на Windows и, следовательно, используя базовую версию Блокнота. Код в этом руководстве работает в любом редакторе, поэтому просто выберите понравившийся вам редактор и начнем.

Создание сайта HTML в блокноте – Ваша первая страница в блокноте!

Windows

Чтобы открыть Блокнот в Windows 7 или более ранней версии, нажмите Пуск -> Все программы -> Стандартные -> Блокнот. Вы также можете нажать «Пуск» и выполнить поиск «Блокнот». Я буду делать это в Windows 10, которую не так давно приобрел и установил. Кстати, и Вам советую!

Mac

Откройте TextEdit и убедитесь, что для текстового редактора задан обычный текст, для этого выберите «Настройки»> «Новый документ»> «Выбрать обычный текст». Затем убедитесь, что отметили «Отображать HTML-файл как HTML-код» и «Отображать RTF-файл как RTF-код» в разделе «Открыть и сохранить».

Затем скопируйте и вставьте следующий код в редактор:

<!DOCTYPE html>

Мой первый абзац.

image

Сохранение файла HTML

Сохраните файл как «index.html» с расширением HTML. Это очень важно, если Вы не добавите .html в конец имени, это не сработает.

Примечание. Несмотря на то, что .html предпочтительнее, Вы также можете использовать .htm без буквы “L”.

Установите кодировку UTF-8, которая является предпочтительной для файлов HTML. Кодировка ANSI предназначена только для символов США и Западной Европы.

image

Открытие HTML-файла в браузере

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

ПРИМЕЧАНИЕ. Если у Вас возникли проблемы с открытием файла, убедитесь, что Вы сохранили его в формате .html.

Просмотр HTML-файла в браузере

После открытия файла в вашем браузере он будет выглядеть так:

Обратите внимание на путь к файлу в

файле панели URL : /// C: /Users/WebsitesDIY/Desktop/HTML/index.html

Это полный путь к файлу на вашем компьютере

Центрирование текста

Теперь, когда Вы понимаете основы создания HTML-файла, давайте узнаем, как центрировать текст

Удалите Мой первый абзац.

на данный момент.

Сохраните файл и снова откройте его в браузере. Если окно вашего браузера все еще открыто, Вы можете просто нажать кнопку «Обновить», чтобы перезагрузить страницу.

Текст заголовка должен теперь быть сосредоточен в середине веб – страницы.

Добавление видео с YouTube на Ваш сайт

Чтобы добавить видео YouTube на свой сайт: Перейдите на Youtube и найдите видео, которое хотите добавить на свой сайт.

«Щелкните правой кнопкой мыши» на видео и «Скопируйте код для вставки».

Вставка кода для вставки видео в блокнот

Вставьте код для вставки в Блокнот

Код для встраивания будет выглядеть примерно так:

Вы можете изменить ширину и высоту по своему усмотрению. Просто измените эти цифры в коде и оставьте все остальное без изменений. В этом примере мы будем использовать width = “427” и height = “240”. Вы можете установить для себя все, что Вы хотите.

Сосредоточьте видео, поместив тег вокруг кода вставки, скопированного с YouTube.

Кроме того, давайте изменим заголовок между тегами на «Мой первый сайт в блокноте».

Добавление ссылки на другую страницу

Теперь мы добавим ссылку, которая идет в Google, когда люди нажимают на нее.

Добавьте следующий код на свой веб-сайт прямо под видео:

Перейдите в Google.

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

Теперь Вы должны увидеть ссылку под видео, которая идет в Google, если Вы нажмете на нее.

Вы можете создавать ссылки, которые идут на любую страницу, которую Вы хотите. Просто измените то, что в атрибуте href.

Если Вы хотите открыть ссылку в новом окне, когда кто-то нажимает на нее, добавьте следующий атрибут в тег ссылки: target=”_blank”>Перейти к Google

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

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

Создайте новый HTML-файл и добавьте к нему приведенный ниже код. Сохраните это и назовите это page2.html

<!DOCTYPE html>

Это моя вторая страница.

В итоге должно получиться вот так:

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

Ссылки на Page2 с вашей главной страницы

Теперь, когда мы создали Page2, давайте изменим ссылку на первой странице, чтобы она ссылалась на page2.html.

Откройте «index.html» и измените URL, который ссылается на Google, чтобы вместо него перейти на страницу 2:

Страница 2

Вы находитесь на странице 2 вашего сайта

Если Вы успешно создали свою ссылку, Вы должны перейти на страницу page.html, нажав на ссылку под видео. Если по какой-то причине ваша ссылка не работает, вернитесь на несколько шагов назад и снова следуйте инструкциям. Знание того, как добавить ссылки / URL-адреса на Ваш сайт, очень полезно. Ведь в интернете это просто большая коллекция ссылок, проиндексированных Google.

Добавление классных стилей с помощью CSS

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

Скопируйте и вставьте следующий код в верхней части страницы index.html чуть ниже тега . При вставке не перезаписывайте другой код.

В основном этот фрагмент кода говорит браузеру добавить цвет фона и высоту к ссылке, которую мы сделали ранее. Мы также сделали углы немного округленными, добавив радиус границы 10px. Есть много бесплатных онлайн-учебников, где Вы можете узнать больше о CSS, чтобы Ваш сайт выглядел действительно красиво.

Добавление эффекта наведения на кнопку

Последнее, что мы собираемся сделать, это добавить эффект наведения на кнопку. Эффект при наведении заставит кнопку меняться в цвете, когда Вы наводите курсор мыши.

Добавьте следующий код чуть выше закрывающего тега :

И при наведении на кнопку ссылки ее цвет будет изменяться:

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

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

Создание сайта HTML в блокноте – Сделай свой сайт Живым!

Чтобы мир мог видеть Ваш сайт, его необходимо загрузить на веб-сервер, который постоянно подключен к Интернету 24/7. Теперь мы не рекомендуем настраивать собственный сервер. Гораздо проще платить 3 или 5 долларов в месяц профессиональному провайдеру веб-хостинга, который сделает это за Вас. Я рекомендую использовать McHost и подписаться на тарифный план на год или более для запуска вашего сайта и получения БЕСПЛАТНОГО доменного имени и множество дополнительных бонусов. Этот сайт размещен на McHost, и нам это нравится. Они быстрые, безопасные и имеют отличное обслуживание клиентов.

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

  • Смирнова Татьяна Михайловна, учитель информатики, методист

Разделы:Информатика

В примерной программе по информатике и ИКТ на тему “Коммуникационные технологии” отводится всего 12 часов и предлагается создать Web-страничку с использованием шаблонов. На тему “Мультимедийные технологии” выделяется 8 часов, но если в образовательном учреждении информатика изучается на пропедевтическом уровне уже в 5, 6 и 7 классах, то целесообразно перенести изучение мультимедийных технологий в пропедевтический курс и тогда можно увеличить время на изучение коммуникационных технологий, а точнее, можно добавить тему “Создание Web-сайтов на языке HTML” в 8 классе.

Освоение технологии создания сайтов рекомендуется начать с языка разметки гипертекста HTML в программе Блокнот, что является первоосновой в данном направлении. Конечно, за 8 часов невозможно изучить весь язык HTML, но можно показать назначение и применение основных тегов языка. Если ученик заинтересуется технологией создания сайтов, то сможет продолжить изучение материала самостоятельно или на соответствующих курсах, кружках или факультативах.

Представленное методическое пособие прошло неоднократную опрабацию в 8-х классах гимназии №441 Фрунзенского р-на Санкт-Петербурга и включает материал для проведения теоретических и практических занятий, выполнение которых сначала демонстрируется через проектор, а затем учащиеся выполняют самостоятельно на компьютере, используя раздаточный материал к уроку.

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

Эффективно осваивается материал, когда учащиеся вместе с учителем выполняют общий проект, например, по теме из истории Санк-Петербурга “Драматические театры Санкт-Петербурга”, а затем в качестве итоговой работы создают собственный небольшой проект, используя в качестве шаблона сайт, созданный совместно с учителем.

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

Основные цели обучения: формирование познавательного интереса, развитие интеллектуальных и творческих способностей в области Web-технологий.Задачи.Обучающие: сформировать систему знаний по технологии создания Web-сайтов;обучить языку разметки гипертекста HTML для создания сайтов;познакомить с этапами проектной деятельности. Развивающие: развить творческие способности к самовыражению, посредством создания сайтов;сформировать умение сопоставлять, искать аналог и осуществлять перенос знаний в новую предметную область Web-технологий;развить навыки работы на компьютереВоспитательные: воспитать добросовестное отношение к работе;воспитать чувства товарищества и личной ответственности за созданный сайт;воспитать художественный и эстетический вкус;воспитать грамотного и корректного пользователя сети Интернет. Урок 11. Общие сведения о Web-сайтах и языке HTMLHTML – Hyper Text Markup Language язык разметки гипертекста. HTML ни в коей мере не является языком программирования, он отвечает только за расположение элементов (текста, рисунков) в окне браузера. HTML является языком для создания Web-сайтов во Всемирной паутине. Язык HTML состоит из простых команд – тегов. Теги управляют представлением информации на экране при отображении HTML-документа. Теги заключаются в угловые скобки <>…</> и бывают парные и непарные (одиночные <>).Документ HTML – это текстовый файл с расширением .html или .htm, содержащий набор тегов. Браузер – (browser) – программа для просмотра Web-страниц. Широко используют бразеры Microsoft Internet Explorer, Opera и др. Браузер при получении документа HTML выполняет его анализ, строит объектную модель документа, затем результат отображает на мониторе.2. Структура HTML-документа

Секция заголовкаЗаписываются meta-теги, содержащие информацию о названии страницы, об авторе и др. Тело документаСодержит непосредственно информацию страницы: тексты, рисунки, таблицы

Содержание страницы:

Как создать сайт HTML? Думаете, как создать HTML-страницу? Для этого нужно потратить несколько часов, и вы будете знать основы HTML. А создать свою первую страницу сможете за 5 минут. HTML расшифровывается как HyperText Markup Language. В переводе это означает «язык гипертекстовой разметки». Важно понимать, что HTML — это не язык программирования, а именно разметки сайта.

Все современные браузеры умеют распознавать его. Затем они отображают информацию в удобном виде для пользователя, как заранее было задумано автором. В этом языке используются специальные теги. Каждый тег выполняет свою функцию. Их очень много. В идеале нужно выучить все. Но для начинающего базовых знаний вполне достаточно. Читайте еще: Как найти свое призвание в жизни.

Основные HTML теги для написания сайта

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

 — этот тег стоит в самом начале любой страницы, и объявляет кодировки и саму страницу.

 — этим тегом обязательно заканчиваются все страницы, точнее объявляют конец страницы.

<.title> — между этими тегами пишется название вашего сайта.

 — это таблица, одна из самых важных конструкций при построении сайта.

…  

 

Сайт в блокноте – сайтостроение для начинающих Здравствуйте, на страницах этого сайта я расскажу как сделать свой собственный сайт или блог, не зависимо от каких либо сервисов, конструкторов и систем управления контентом (CMS). Данный сайт написан в обычном текстовом редаккторе и не использует ни каких движков и баз данных, а обычные статистические страницы. Повторяющийся код (шапка, подвал, сайтбар) вынесен в отдельные файлы, что позволяет изменять информацию на сайте мгновенно. Так же отдельный фаил CSS при необходимости позволяет быстро менять дизайн сайта. Опубликовать статью так-же быстро, как используя движки для сайтов.

Читая эти строки для вас сразу становятся непонятными фразы, такие как движок, html, CSS, CMS, и другое, прочитайте до конца эту статью и многое прояснится, хотя появятся новые вопросы, ответы на которые вы найдете в следующих статьях в разделе “Делаем сайт“. В этом разделе я написал о создании сайта с самых основ, начиная с домена и хостинга, устройства страниц сайта и использования html и CSS. Ниже для примера я нарисовал структуру сайта, корневая папка www, в которой лежит главная страница сайта index.php, а далее в папках разделы, лежат страницы уже относящиеся к разделам.

Как самому написать, сделать свой сайт

Как вы наверное уже где то читали сайты в интернете состоят из множества страниц. На заре массовой доступности интернет сети все это дело только зарождалось. Тогда страницы сайтов писали вручную используя обычный текстовый редактор. Применяя специальные теги в станицах вебмастера указывали браузерам как показывать тот или иной элемент на странице. Без html разметки статья выглялит так же как и в редакторе, но выделив например заголовок тегом h1 затем открыв страницу в браузере мы увидим что заголовок теперь написан крупным шрифтом и выделяется. Так вот html язык верстки страниц предназначен для разметки текста и элементов на страницах, а так же для всех других элементов. CSS это тоже язык, который идет неразрывно с html, но эсли html размечает статью и весь сайт в целом, то СSS придает этим элементам внешний вид.

image</>
Примерная структура сайта

С развитием интернета массовую популярность приобрели системы управления контентом, или по просту CMS (движок сайта). Они упростили жизнь вебмастерам так как многие процессы стали автоматизированными. Теперь не надо писать статьи используя hfml верстку. Достаточно зайти в админку, нажать на “кнопочку” создать страницу, вам откроется редактор, заполняете заголовки и поля, пишите статью и готово. При этом движок сайта сам расставит нужный код в статье, а так же к ней применяются CSS стили, в общем он сделает очень много работы, о которой вы возможно и не догадываетесь. С развитием систем управления контентом создать свой сайт может любой человек не особо знающий о веб программировании и прочем. Сейчас можно запустить хоть целый портал, не говоря о маленьком блоге.

image</>
Некоторые популярные движки для сайтов, логотипы

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

Незная всего этого новички, впрочем как и я когдато, начинают с “бесплатных” сервисов, которые предлагают сделать сайт за “пять минут”. Но со временем, когда на сайте будет уже много статей и вы во многом сами разберетесь, то поймете что вы просто попались на удочку и на вас просто зарабатывают деньги. А самому, на своем, но по сути на чужом сайте заработать будет достаточно сложно, а забрать сайт не так просто в большинстве случаев так-как дают там ихний домен в пользование, а домен это и есть сайт, так как без своего уже раскрученного имени сайт ничего из себя не представляет, но тут сразу все не опишешь.

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

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

Так выглядит страница в текстовом редакторе, а ниже на скриншоте уже в браузере

<!doctype html> /> новый сайт Блог почтальона Печкина Всегда свежие газеты на завтрак Первая статья о новой газете Всем привет, я почтальон Печкин, я теперь добрый - у меня есть велосипед. Спешу вас обрадовать, скоро выйдет новый выпуск газеты "Деревенские страсти". Там будет специальный выпуск о нашей деревне, о наших жителях и о том как мы готовимся к Новому году! ®все права защищены Печкин 2000ххх год.

image</>
А так эта же страница выглядит в браузере

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

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

Надежность и сохранность сайта и всех статей (контента). Так как сайту не нужна админка и регистрация пользователей, то такой сайт практически невозможно взломать. Плюс к тому также что страницы статистические, и статьи (текст) хранятся на хостинге, а не на отдельном СУБД MySQL сервере. А так же локальная версия сайта всегда на вашем компьютере или планшете.

Принцип постройки такого сайта довольно прост. Установив программу – локальный веб сервер, чтобы можно было видеть через свой браузер сайт так, как его увидят после выгрузи на хостинг уже все пользователи интернета. В блокноте создаете шаблон страницы, шапка сайта, навигация, боковое миню, подвал и прочее. В файле стилей CSS придаете красивый дизайн всем элементам сайта и шаблон готов. Копируй страницу, пиши в нее статью и готово. Но сразу вопрос, а если я напишу 100 страниц и захочу потом что нибудь сменить или добавить, например новый пункт в меню, что для этого придется изменения делать во всех 100 страницах.

image</>
Вставка элементов страницы, сайт на инклудах

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

Получается очень просто, чтобы написать новую страницу на сайт просто берете шаблонную страницу, переименовываете ее, вставляете или пишете прямо в ней статью. Далее приписываете для поисковиков теги, в статье заголовки выделяете тегами, размечаете параграфы, вставляете фото или видео и готово. Странице через FTP клиент загружаете на сервер и она у вас на сайте и всем доступна. При этом если вы хотите сменить дизайн, то правку надо делать всего в одном файле style.css. Если хотите добавить новые пункт в меню или изменить ссылки, то тоже правка всего в одном файле, а так как он вставляется во все страницы во время выдачи в браузеры пользователей, то изменения произойдут на всех страницах сайта.

Конечно много из мной написанного возможно людям совсем без опыта не понятно. Но чтобы войти в курс дела надо начать по порядку. Сначала нужно узнать что такое домен и хостинг, потом дальше разобраться с принципом устройства сайтов. А далее дело пойдёт, подробнее и более развернуто читайте в разделе “Делаем сайт”.

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
А как считаете Вы?
Напишите в комментариях, что вы думаете – согласны
ли со статьей или есть что добавить?
Добавить комментарий