Как создать сайт на языке html через блокнот с полного нуля?

Всем привет, дорогие друзья и гости моего блога! Ой. Я только что заметил, что Яндекс наградил меня ТИЦ 20, хотя еще вчера был 0. Я понимаю, что ТИЦ уже ничего толком не значит, но всё равно очень приятно и радостно. Ну а вообще я хотел продолжить недавно начатый цикл статей по сайтостроению. И первое, с чего я бы хотел начать — это с основ языка гипертекстовой разметки (не программирования!) HTML.

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

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

Как создать сайт на языке html через блокнот с полного нуля?

Для начала создайте обычный текстовый документ или откройте блокнот. Для открытия блокнота можете вызвать строку «Выполнить» и вписать туда notepad. Открыли? Молодцы!

Структура любого сайта

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

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

Как создать сайт на языке html через блокнот с полного нуля?

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

  • <html></html> — это главный тэг, благодаря которому мы говорим сайту, что сейчас будем писать тут на языке HTML, так что пусть не беспокоится. С него должен начинаться сайт и им же закрываться.
  • <head></head> — сюда заносится служебная информация, например название документа, описание и многие другие. Ставится сразу после открытого тэга <html>.
  • <title></title> — Между этими значениями мы пишем заголовок страницы, то есть это название будет отображаться не в самом содержимом сайта, а во вкладке браузера. Данный тип ставится между <header> и </header>.
  • <body></body> — этот тэг отвечает за отображение содержимого на сайте. То есть всё, что вы напишите между этими тэгами будет отображаться на веб-странице.

Я так чувствую, что не все всё поняли, и у некоторых осталась каша в голове, поэтому я всё покажу вам на живом примере.

Живой пример

Итак создаем текстовый документ и пишем там следующее содержимое:

Как создать сайт на языке html через блокнот с полного нуля?

 

Написали? Молодцы! Тут я дал вам информацию специально в виде картинки, а не в виде текста, так что вы ее не скопируете. Вот я негодяй, да?)) Обратили внимание, что тэги вкладываются друг в друга как матрешки? Так и должно быть.

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

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

Как создать сайт на языке html через блокнот с полного нуля?

Смотрите, сколько мы всего написали, а в итоговом документе остался только наш приветственный текст. Почему? Да потому что сами по себе тэги не отображаются в итоговом варианте, а показываемая информация отображается только между тэгами body. Поэтому всё так и получилось. Зато смотрите, то что мы писали в head, точнее в title, теперь отображается во вкладке браузера.

Как создать сайт на языке html через блокнот с полного нуля?

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

Но попробуйте поставить несколько пробелов и написать еще текст, либо просто напишите несколько строчек текста и сохраните это в том же документе.

Как создать сайт на языке html через блокнот с полного нуля?

Теперь войдите в этот документ с помощью браузера. Что мы видим? А то, что ваши пробелы и переносы строк не повлияли на документ и все идет одной строкой. Некрасиво, да? А всё потому, что html сам по себе не понимает ваши пробелы (кроме одного) или переносы. Для того, чтобы переносить строки всё нужно размечать другими тэгами, о которых мы будем говорить в других статьях.

Как создать сайт на языке html через блокнот с полного нуля?

Многие наверное подумают что-то типа: «И это по твоему сайт? Да ты с дубу рухнул». Да, дорогие мои. Эту примитивную веб-страницу также можно назвать сайтом. И я еще раз повторюсь, что смысл данной статьи был не создать мегакрутой сайтище, а показать вам основу любого сайта, как это выглядит, как всё происходит.

Но вы не волнуйтесь. Это всё вводные уроки. Далее мы всё глубже и глубже погрузимся в html разметку, и сможем всё правильно форматировать, расставлять. В общем всё будет круто и мы сделаем полноценный веб-ресурс. Просто в одну статью всё это не уместится, а комкать и сокращать я тоже не буду, иначе фигня получится.

Специальный блокнот для веб-разработчика

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

В дальнейшем я буду работать именно через редактор Notepad++. Установите его и вы поймете, почему это удобно. Настроек там премудрых нет, но если вдруг вы установили английскую версию, то зайдите в меню «Preference» и в графе «Localization» выберите Русский.

Да, и еще зайдите в меню «Кодировка» и выберите «UTF-8». Ну и сразу сохраните этот файл в формат html. Для этого выберите меню «Файл» — «Сохранить как» и обзовите документ index, выбрав из из выпадающего списка формат «html». Это делается для того, чтобы программа поняла, что мы делаем и подсвечивала нам нужные теги и команды.

Как создать сайт на языке html через блокнот с полного нуля?

 

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

Конечно, если вы хотите всё изучить побыстрее, то рекомендую вам посмотреть недавно вышедший курс по HTML5 и CSS3. Там все подробно рассказывается и показывается на живом примере, кроме того вы научитесь делать несколько видов сайтов. В общем очень интересные и информативные уроки.

Ну а вам я рекомендую подписаться на обновления моего блога, чтобы не пропустить следующих уроков, а также других интересностей. Кроме того обязательно посмотрите и другие статьи моего блога. Я уверен, что многие из них окажутся для вас полезными. В общем желаю вам удачи. Увидимся в других статьях. Пока-пока!

С уважением, Дмитрий Костин.

 

Оцените статью
Блог Дмитрия Костина
Добавить комментарий

  1. Надежда Суптеля

    Дмитрий, у нас с Вами мысли одинаковые: я сейчас готовлю тоже статью про HTML документ. Ну и Яша снял с меня 10-ку, теперь ТИЦ 10. Переживу, это не страшно, просто нужно двигаться. За что снял 10-ку, догадываюсь. Вчера мне блог чистили и отключили плагин перелинковки еще позавчера. Вот результат — зато блог чистый. Хотя там, в файлах ребята написали мне, что нашли *орнушки. Может из — за этого. Яша ведь у нас вездесущий и долго терпеливый. Но в индексацию добавил еще статьи. Короче, не поймешь этого Яшу — двигаюсь дальше.

    Ответить
    1. Дмитрий Костин автор

      Вот как у нас с вами мысли сошлись)))

      А насчет ТИЦ да. Яша может. У меня на одном из сайтов было ТИЦ 40, два месяца назад согнал до 30) Правда тут даже не знаю из-за чего. Ну сейчас эти цифры всё равно больше для красоты и на посещаемость или заработок никак не влияют.

      Ответить
  2. Миша

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

    Ответить
    1. Дмитрий Костин автор

      Курс действительно хороший, очень интересный. Правда я его еще не весь изучил) Но верстать мне очень понравилось.

      Ответить
  3. Елена

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

    Ответить
    1. Дмитрий Костин автор

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

      Ответить
  4. Елена

    Да да спасибо, вы меня правильно поняли.

    Ответить
  5. Александр Валентинович

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

    Ответить
    1. Дмитрий Костин автор

      Спасибо. Это точно. Но некоторые могут захотеть научиться создавать сайты самим. Но скорее всего статьи про создание сайтов я больше писать не буду. Для этого наверное лучше отдельный сайт создавать.

      Ответить
  6. Компьютерный мудрец

    HTML5-полное гавно, страницы не грузятся вообще. :o: :o: :o: :o: :o: :o: :o: :o: :o:

    Обычный HTML гораздо лучше, а страницы грузятся моментально! :p :- ( Он гораздо проще и понятнее для человека и в этом одно из самых главных преимуществ языка HTML. :p :8 :-p 😉

    Ответить
    1. Дима

      АХХААХХАХАХАА

      Ответить
Следи за нами в FaceBook.
Все новые статьи и много уникального!
Спасибо, не показывайте мне эту штуку больше!
Друг, ты хочешь уйти? Тогда подпишись на мой блог в ВК, чтобы не пропустить следующие статьи!
Дорогой друг, хотел бы ты всегда быть в курсе всех новостей блога? Тогда подпишись на блог в ВК