Как создать сайт (страницу) на HTML в Блокноте
О том, как заработать деньги в интернете, создать сайт и раскрутить его

Мир создавался 6 дней, чтобы создать html страницу в Блокноте нужно 26 минут

…на первый день Бог создал свет и отделил его от тьмы;

на второй день — создал твердь и воду, на третий — сушу и растения,

на четвёртый — небесные светила, на пятый — птиц, рыб и пресмыкающихся,

наконец, на шестой — животных и человека…

А человек подумал, и решил создать сайт в Блокноте Windows

Здравствуйте, уважаемые друзья! Вы, конечно же, прекрасно понимаете то, что создание сайта в Блокноте, у нас с вами займет чуть более, чем 26 минут. Но, именно небольшим сроком, мне хотелось вас подбодрить, и успокоить.

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

Поверьте мне. Ведь я не родился со Знанием. И первым моим словом, было отнюдь не слово «интернет». Но, я захотел и научился тому, что умею сейчас, и с удовольствием делюсь с вами своими знаниями.

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

Стоп! Нет. Хочу показать вам пример создания сайта по простейшей технологии использования языка HTML. Сайт создан на заре интернета в 1994 году и работает до сих пор. Просто работает. Сайт lib.ru – является ярким примером  создания сайта с использованием стандартных функций и возможностей языка HTML. без всей разноцветной мишуры.

Как просто и бесплатно создать сайт в Блокноте

Почему я применил слово «бесплатно»? Дело в том, что большинство программ для создания сайта, типа Dreamweaver, графических редакторов: Photoshop, являются платными. Более того, на их изучение у вас уйдет не один день. Потом, когда вы станете профессиональным верстальщиком сайтов, вам, естественно, понадобятся подобные программы.

Но, это потом, а сегодня   мы рассмотрим пример создания сайта html в Блокноте, который существует в вашем компьютере. Если вы еще об этом не знали. Это простейший инструмент, позволяющий создавать: элементарную страницу html для ваших нужд.

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

Почему именно создание сайта в Блокноте, а не в Notepad++, например, — спросит более менее продвинутый пользователь. Ведь NOTEPAD++  можно скачать бесплатно. Да и функционал у него боле расширен. Без сомненья – это так.

Но, вновь это «но»! Создание html страниц, равно как и создание сайтов, требует знания основ. Вот именно поэтому мы с вами и тренируемся «на котятах».  Урок по созданию сайта в Блокноте рассчитан на новичков. Всё, достаточно объяснений.

Где-то тут в компьютере был Блокнот?

Кстати, кроме Блокнота, у вас в компе ещё может заваляться такой текстовый редактор, как  Wordpad. Но, мы все же к Блокноту. Давайте его и найдем в дебрях нашего «железа».

Нажимаем в меню на 1. Пуск – 2. Все программы – 3. Папку Стандартные и 4 Блокнот. Вот вы его и нашли  — штатный Блокнот Windows 

Мир создавался 6 дней, чтобы создать html страницу в Блокноте нужно 26 минут

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

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

Пошаговое создание сайта в Блокноте

Итак, Блокнот открыт, урок создания страницы html, вы повторили. Теперь вы вновь набираете в Блокноте все эти атрибуты html документа, с которыми уже знакомы. Не нервничайте, ведь повторение – мать учения. Особенно в таком мероприятии, как создание сайта в Блокноте.

После набора нажимаете в Блокноте: Файл – Сохранить как. Я сохранил этот файл на рабочем столе, назвав его mysite.html (с расширением html обязательно).

А теперь, когда с созданием страницы html, все более менее ясно, приступим к рассмотрению вопроса, как создать сайт в Блокноте.

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

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

Как создать таблицу html для страницы сайта

В таблице, как и во всем html документе используются теги:

  • <table> и </table> — для описания таблицы используется парный тег. Соответственно первый – для открытия таблицы в браузере, второй для её закрытия.
  • <tr> </tr> — теги для создания (описания) строки таблицы.
  • <td> и </td>  - теги для создания столбца страницы.

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

Мир создавался 6 дней, чтобы создать html страницу в Блокноте нужно 26 минут

Наполняем ячейки таблицы – каркаса сайта содержимым

Теперь нужно заполнить ячейки нашей таблицы содержимым (контентом сайта). Важно, запомните раз и навсегда: содержимое таблицы записывается только(!) между тегами <td> и </td>, и никак иначе. Посмотрим наполнение таблицы на примере: 

Устанавливаем размеры таблицы и цвета

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

  • Для задания размеров в html документе используются атрибуты: width и height, соответственно ширина и высота объекта (в нашем случае – ячейки таблицы). Например: width=»450″ height=»250″
  • Кроме того, чтобы таблица была видна на странице, задается такой параметр, как border, например:  border=»1″
  • Для того, чтобы описать фон таблицы или отдельных ячеек, или страницы вашего сайта, созданного в Блокноте, используется такой атрибут html, как бэкграунд (bg). Например: bgcolor=»#CCCCCC» – цвет ячейки, либо цвет фона таблицы

На примере вы можете увидеть, и попробовать создать такой образец:

  • Таблица заданной высоты и ширины.
  • Ширина и цвет левого столбца таблицы.
  • Фон таблицы

Мир создавался 6 дней, чтобы создать html страницу в Блокноте нужно 26 минут

Практический пример создания html страницы сайта в Блокноте

Ну, а теперь, коллеги, приступим к практическому созданию сайта в Блокноте. Для этого вы открываете Блокнот – нажимаете Файл – Открыть и открывается созданный вами вначале занятия файл. Вносите в него самостоятельно вручную (да и сложно со скрина копировать), следующие теги HTML и материал. 

Мир создавался 6 дней, чтобы создать html страницу в Блокноте нужно 26 минут

Одновременно с размещением, мы с вами разберем по частям тот html доумент, который создаем в Блокноте. Для удобства использования я вам представлю скрины с Notepad++, чтобы можно было разъяснить некоторые шаги по пунктам.

  • 1 – 5 стандартное описание вида языка Html (доктэйп), заголовок сайта, который будет отражаться во вкладке браузера;
  • 6 этим параметром мы определили цвет страницы и цвет текста страницы;
  • 8 заданы размеры верхней горизонтальной части таблицы;
  • 9-13 – содержание верхней части сайта
  • 14 активная ссылка на мой сайт delaydengi.com
  • 15-17 – теги, закрывающие ячейку и таблицу

Идем далее, и рассмотрим нижнюю таблицу страницы html, вашего сайта созданного в Блокноте:

  • 18 размер нижней таблицы
  • 20-29 содержание левой ячейки таблицы, структурированное маркерным списком с применением парного тега <li></li>
  • 30 параметры правого блока нижней таблицы, аналогичные верхнему описанию

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

И, о чудо! Вы видите страницу сайта, созданного в Блокноте вашими натруженными руками. И радости вашей нет предела, так как вы сделали достаточно серьезный шаг в освоении и практическом применении языка HTML.

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

Удачи вам, друзья. До следующих уроков.

Подписаться по e-mail RSS