Меню

Как сделать отличный html сайт при помощи блокнота?

2523

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

Html: что это такое, для чего предназначено? 

Да, сегодня можно создать полноценный сайт html в блокноте, более того, скажу прямо: раньше большинство сайтов писали именно в таких вот текстовых редакторах, так как ничего другого не было. Вы скажете, что сегодня сделать сайт можно и в конструкторе и будете правы, но дело в том, что знание html – это важный и полезный навык. С его помощью можно менять целый блоки даже в том же Ucoz-конструкторе, добавлять html виджеты на свой сайт. Зная html, можно создать сайт-лэндинг в простом блокноте. Многие современные компании (заказчики) ищут front-end программистов, а без знания html, скажу я вам, там делать просто нечего.

Html – это язык гипертекстовой разметки, который понимается всеми браузерами и является основной структурой сайта. То, что вы видите на экране монитора: все эти красивые элементы, навигацию, кнопки – это все результат css, но можно смело заявить, что сегодня можно создать красивый сайт в блокноте при помощи html и css. Именно этим мы сейчас и займемся.

Html сайт в блокноте: с чего начинается обучение?

Ваше обучение начинается с главного, а именно – с тегов. Тег – это неотъемлемая часть языка, именно благодаря тегам и получается создавать html сайты в блокноте и других редакторах.

На самом деле, весь ваш html код – это всего лишь документ, но благодаря единому стандарту и формату, можно данный документ по-всякому редактировать, делается все это при помощи вышеупомянутых тегов.

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

Пример: вам нужно сделать текст жирным, для этого дела используют тег - <b>. Чтобы сделать текст жирным, помещаем его в такую схему: «<b>здесь пишем свой текст</b>». Как видите, все начинается с открытия (<b>), после чего тег нужно закрывать (</b>).

Открою секрет: мало кто знает все теги наизусть, но это и не обязательно, ведь для создания сайта html в блокноте можно использовать сайт - http://htmlbook.ru/, где указаны все теги, а также их краткое описание. 

Я же дам основной список тегов, которые и являются фундаментом для нашего сайта:

1. <!DOCTYPE html>. Это не обязательный элемент, но крайне полезный. Создавая свой html сайт в блокноте, мы задаем формат документу, но при этом браузер может не правильно прочитать информацию, и в итоге он откроет не сам сайт, а просто документ. Данный тег помогает браузеру понять, что перед ним html код.

2. <html>. Собственно, html. Так все элементы, все теги, все тексты – все помещено под этот тег, именно он показывает браузеру язык текстовой разметки.

3. Тег <title>. Данный тег показывает заголовок, т.е. название сайта в браузере. Когда вы открываете вкладку в браузере, а затем сайт, вверху вкладки ней представлен не адрес сайта, а именно его название. 

4. Тег <head>. Сам сайт строится довольно интересно: из элементов head и body (голова и тело). Когда мы создаем сайт html в блокноте, да и не важно где, мы всегда начинаем с «головы», в этом теге помещается вся главная информация: название сайта, отсюда подключаются скрипты и т.д. 

5. <body>. Как уже было сказано, тег body – это тело, в тело нашего сайта мы помещаем все элементы, т.е. все то, что будет отображать браузер. 

6. Теги <a> и <p>. Первый обозначает ссылки, т.е. вы в своем html документе ссылаетесь на другой портал в интернете, в этом и есть суть гипертекста. Однако, тег <a> несколько иного рода. Чтобы вам сделать ссылку на другой сайт, нужно поместить ее в такой формат: «<a href=””></a>», в кавычки пишем адрес сайта. Второй (<p>) предназначен для абзацев. Да, делая html сайт в блокноте, вы можете подумать, что этот тег бессмысленный, но когда у вас много текста, и при этом он весь выровнен по ширине документа, вы поймете, что текст нужно разделять на абзацы. 

7. <h1>, <h2> и т.д. H – это заголовок, только не тот, что был ранее, а именно текстовый. Ведь, создавая сайт html с нуля, вам же нужно будете обозначать заголовки статей. Именно для этого и придуман данный тег.

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

Как создать сайт в блокноте html с картинками и прочей красотой? Супер Лайфхак

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

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

При помощи комбинации ctrl + f, ищите название сайта, логотип, основной текст и заменяйте его своим. Вот так просто можно сделать html сайт в блокноте, просто меняя информацию, заключенную в теги.

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

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

Текущая оценка Общий бал: 5 Проголосовало Проголосовало: 2

help_share

Данная публикация была вам полезна?

Помоги автору сайта, расскажи друзьям...

Комментариев: 4
  •  Андрей 13 июня 2016 в 14:42:31
    img

    У Вас отличный блог! Жаль что давно нет новых постов.

    •  Денис Скрипник | 14 июня 2016 в 09:30:34
      img

      Здравствуйте. Благодарю за оценку. Скоро будут - сейчас кризис идей.

      Подписывайтесь на RSS.

  •  Елена | 21 октября 2016 в 12:03:37
    img

    А реально написать сайт в html, если не владеть этим языком? Мне лень его изучать, а сайт писать нужно.

    •  Денис Скрипник | 21 октября 2016 в 21:26:33
      img
      А реально написать сайт в html, если не владеть этим языком? Мне лень его изучать, а сайт писать нужно.

      Реально. Есть 3 варианта:

      1. Используйте программу для создания сайтов, например, Adobe Dreamweaver или "Компоновщик" браузера Simonkey.

      2. Используйте CMS (Движок сайта, с помощью которого можно создавать и наполнять сайт через браузер). Правда нужны знания о хостинге (Месте размещения), регистрации домена (Адреса сайта).

      Смотрите план создания сайта

      3. Создать сайт можно в конструкторе Ucoz или Jimdo. Есть также vix.com, но о нём я не писал.

Буду благодарен за каждый оставленный вами комментарий

Добавить Комментарий

grin LOL cheese smile wink smirk rolleyes confused surprised big surprise tongue laugh tongue rolleye tongue wink raspberry blank stare long face ohh grrr gulp oh oh downer red face sick shut eye hmmm mad angry zipper kiss shock cool smile cool smirk cool grin cool hmm cool mad cool cheese vampire snake excaim question