Блог Дмитрия Костина
Помогу вам найти общий язык с компьютером,
даже если вы впервые слышите это слово



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



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

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

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



style="display:block"
data-ad-client="ca-pub-4066320629007052"
data-ad-slot="5193769527"
data-ad-format="auto">

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

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

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

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

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

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

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


Живой пример

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

 



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

    Надежда
    09 июня 2016 в 16:23
    • Вот как у нас с вами мысли сошлись)))

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

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

    Миша
    09 июня 2016 в 18:12
    • Курс действительно хороший, очень интересный. Правда я его еще не весь изучил) Но верстать мне очень понравилось.

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

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

      Дмитрий
      10 июня 2016 в 16:18
  • Да да спасибо, вы меня правильно поняли.

    Елена
    12 июня 2016 в 10:19
  • Хорошая статья, но все таки если вы решили создать сайт, то лучше поручить это профессионалам, для того что бы избежать проблем в будущем!

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

      Дмитрий
      18 августа 2016 в 15:04
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o:


Блог Дмитрия Костина
© 2015-2017 Блог Дмитрия Костина
Помогу вам найти общий язык с компьютером, даже если вы впервые слышите это слово
Политика конфиденциальности