Уроки
  • Register

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

Наверное начнем с простого и в первую очередь скажем вам доброго времечка суток и добро пожаловать на бесплатный проект – если быть более точным и верным то блог, под названием ‘пушистик рулит’ в котором мы стараемся для вас по мере возможности добовлять статьи на различные темы которые будут вам интересны. Если в двух словах то сегодня я вновь решил написать для вас пошаговый самоучитель в котором вы узнаете как легко и просто можно создать простой сайт в текстовом редакторе (блокноте) который по умолчанию есть на любом компьютере. И да, для того что бы этот пошаговый самоучитель по бесплатному созданию сайтов в блокноте был полный я решил не много усложнить задачу, если писать в двух словах то в первой части я покажу вам как сделать его с помощью текстового документа, а во второй мы с вами нарисуем красивый дизайн и опубликуем его в интернете.

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

Как создать html сайт в блокноте с нуля

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

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

<html>
<head>
<title>
Моя первая интернет страница всего лишь за 5 минут</title>
</head>

<body>

Сегодня замечательный день. <br>Я сделал свою первую интернет страничку.

</body>

</html>

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

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

Далее вам нужно дать ему имя и схоронить, например ( page.html ) у вас должно быть все как у меня на рисунки ниже.

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

После сохранение убедитесь что файл который вы только что создали и сохранили называется page.html а не page.html.txt если так то просто переименуйте его в page.html иначе ваш первый сайт, вернее страничка не будет работать. Теперь запускаем его, для этого вам достаточно кликнуть по нему два раза левой кнопкой мыши, открытый файл должен выглядеть вот так.

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

  1. Если вы видите код странички целиком, иными словами файл запускается как текстовый документ то вы не правильно сохранили его, не в том формате, переименуйте его в page.html
  2. Если за место текста вы видите непонятные иероглифы то все нормально но вам нужно поменять кодировку страницы Cyrillic Win-1251, в браузере опера это можно сделать так как показано на картинки ниже.

сделать сайт в блокноте с нуля

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

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

Стоит добавить что за закрытие тега отвечает символ / иными словами тег head открывает команду а тег /head на против закрывает ее, и да пробелы между скобками ставить не нужно, для тех кто не понял смотрите на пример ниже.

<body> </head> - правильно

< body > < /head > - не правильно.

Теперь все по пунктам. Начнем с парного тега <html> он отвечает за страничку, иными словами этот тег передает компьютеру что начинается страничка а тег </html> говорит что она заканчивается. Так что если вы попробуете написать что то перед этим тегом или после то не чего у вас не получится! Так как все остальное нужно писать между этими тегами, запомните это.

По сути тут все как у людей есть голова, шея, тело, ноги и так далее. Например голова это <head> а тело <body>  на практике это выглядит вот так.

<html>

<head>

</head>

<body>

</body>

</html>

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

<html>

<head>

<title> </title>

</head>

 

<body>

</body>

</html>

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

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