HTML и CSS 29

Как сделать сайт в блокноте html и css-технологиями


Сайт на самом деле представляет собой набор файлов из кода на нескольких языков. А код можно писать в любом нормальном текстовом редакторе, даже в блокноте. Конечно, лучше использовать более продвинутый софт, вроде Notepad++. Ну да ладно, давайте посмотрим, как сделать сайт в блокноте html и css-средствами.

Как создать сайт с нуля на html в блокноте — пошаговая инструкция

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

Шаг 1. Создание файлов

Создание html сайта в блокноте нужно начать с того, что создать два текстовых документа в какой-нибудь пустой папке. Один должен получить расширение .html, а второй .css. Имена могут быть любыми. Заметьте, не site.html.txt, а именно site.html.

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

Шаг 2. Закладываем структуру

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

Давайте и мы вставим что-то в наш документ, а то совсем пусто.

<!DOCTYPE html>
<html>
<head>
<title>Hello, world!</title>
<meta charset = "utf-8">
<link rel = "stylesheet" href = "style.css">
</head>
<body>
Привет, мир!
</body>
</html>

Итак, мы вставили сразу кучу тегов и может быть вы ничего не понимаете. Попробуйте открыть страничку в браузере. Там вы увидите слова “Привет, мир” если все сделано правильно. Это и есть, по сути, простейшая веб-страничка.1

Но мы пойдем дальше. Нам нужно что-то похожее на web-страничку и именно этим мы и будем заниматься дальше. А пока я вкратце я объясню те теги, которые уже написаны:
html – контейнер для всех остальных тегов. В нем содержится вся веб-страница.
В самом верху мы указали тип документа. Тег head – это служебная информация о странице. Тут мы с помощью тега <title> задали название страницы, которое будет выводиться в строке браузера вверху. Далее задали кодировку и подключили css-файл с помощью тега <link>.

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

Шаг 3. Планирование

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

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

Шаг 4. Начинаем!

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

Итак, вернемся к коду. Писать мы его будем в теге body, так как он и являет собой будущую страницу. Можете смело удалить надпись привет, мир, и напишем вот что:

<div id = "main">
	<div id = "header">Это наша шапка</div>
	<div id = "sidebar">Это боковая колонка</div>
	<div id = "content">Это - контент</div>
	<div id = "footer">Подвал</div>
</div>

Таким образом мы создали один большой блок, в которой поместили остальные 4. Блок в html создается парным тегом div, который не имеет обязательных атрибутов, но я сразу добавил каждому из них уникальный id (идентификатор), чтобы позднее оформить внешний вид через CSS.

Скопируйте этот код себе и обновите страничку в браузере. Пока вы видите перед собой просто 4 строчки текста, но ничего, щас мы их превратим в сайт!2

Шаг 5. Нам поможет CSS

Теперь начнем оформлять наши блоки. Конечно же, нужно начать с самого большого контейнера. Мы создали css-файл в самом начале, но так и не написали в него ничего. Самое время это исправить. Добавим туда такой код:

*{
box-sizing: border-box
}
#main{
width: 810px;
margin: 0 auto;
border: 5px solid black
}

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

Мы установили общему контейнеру ширину в 810 пикселей, правило margin: 0 auto устанавливает блок по центру, то есть наш сайт будет отображаться красиво по центру, а не прижат к левому краю. Последнее свойство border добавляет черную сплошную рамку с каждой стороны блока.
3
Что ж, стили для главного контейнера мы сделали. На веб-страничке у нас по-прежнему отображается 4 строчки с текстом, но уже в черной рамке. Идем дальше.

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

#header{
height: 100px;
border-bottom: 5px solid black
}
#sidebar{
width: 200px;
height: 500px;
float: left;
border-right: 5px solid black
}
#content{
width: 600px;
float: right;
height: 500px
}
#footer{
height: 75px;
clear: both;
border-top: 5px solid black;
}

Как вы понимаете, я просто обращаюсь к элементам с разными идентификаторами, описывая их сверху вниз. Сначала стили задаются для шапки – я поставил высоту в 100 пикселей и рамку снизу, чтобы она была отделена от остальных блоков.

А вот дальше все становится интересней. Дело в том, что по умолчанию блоки отображаются сверху вниз, если их просто написать в html-коде и никаких дополнительных правил не задавать. Но ведь боковая колонка на то и боковая, чтобы отображаться сбоку от основной части страницы. А как это сделать? Смотрите, мы сайдбару задаем высоту, ширину, рамку и еще одно свойство (float: left).

Это правило означает, что элемент будет прижат к левому краю родителя (то есть родительского элемента – блока #main). Отлично, теперь такое же свойство зададим блоку с контентом и он тоже прижмется к левому краю, но уже вслед за боковой колонкой.

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

Наконец, осталось описать последний блок – footer. Он получает небольшую высоту, рамку с высоту и еще одно новое для нас свойство. Это свойство clear со значением both. Зачем его писать? Мы с вами прижали два предыдущих блока к левому краю. Они стали так называемыми плавающими блоками, но по умолчанию обычные блоки могут не замечать плавающие и наезжать на них.

Чтобы этого не происходило наш подвал получил вот такую команду – мол, смотри, обычный блок, выше тебя располагаются два плавающих. Заметь их и расположись ниже, чем они. Вот такую команду, по сути, дает свойство clear: both, которое заставляет обычный блок расположиться ниже всех плавающих.

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

Шаг 6. Разукрашиваем сайт

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

  • Общий фон сразу всему сайту, прописав его общему контейнеру #main
    • Если каждый из основных блоков должен иметь свой отеннок цвета, то тогда нужно каждому задать цвет отдельно. Но лучше сильно не увлекаться – красная шапка, зеленый контент и желтый подвал будут смотреться не очень, сразу скажу

Предлагаю сделать по первому методу. Я тут нашел в онлайн-сервисе приятный светло-синий оттенок, который и предлагаю сделать фоном сайта. Добавьте к стилям общего контейнера такое свойство

#main{
background: #B3C1E6
}

фон
Обновляем страничку и убеждаемся в том, что наш сайт получил приятную светло-синюю гамму. Теперь предлагаю немного продвинуть уровень дизайна – пусть фон шапки и подвала будет потемнее, чем у остальных блоков. Можно добавить такие строчечки кода:

#header, #footer{
background: #9091DA
}

4
Тут мы применили новую технику – через запятую записали два блока и новый фон применится к им обоим.

Шаг 7. Работаем над шапкой

Дальнейшая работа будет заключаться в оформлении отдельных блоков до более привлекательного состояния. Начнем с шапки. Что у нас обычно в шапке? Правильно, красивое название сайта и логотип. Вот это мы и добавим.

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

Его нужно скачать и положить в ту же папку, где хранится html-документ.
Теперь смотрим:

#header{
background: #9091DA url(html.jpeg) no-repeat 5% center
}

Картинку я назвал html, а ее формат – jpeg, поэтому такая запись. Дальше мы также указали такие команды: картинка-фон не должна повторяться, а разместиться должна со смещением с 5% по горизонтали от начала блока и по центру по вертикали. Сначала всегда записывается горизонтальная позиция, а потом вертикальная.

Естественно, если у вас картинка называется по-другому или имеет другой формат, то вы должны немного изменить приведенный код. Отлично, логотип у нас есть. Пора убрать надпись – это шапка сайта и поставить вместо нее красивый заголовок. Удалим из шапки текст и вставим туда новый элемент

<div id = "header">
	<div id = "title">Название сайта</div>
</div>

Теперь его нужно оформить:

#title{
font-size: 32px;
float: left;
margin-left: 200px;
font-family: Tahoma;
color: yellow;
padding-top: 20px;
text-shadow: 0 0 5px orange;
}

Мы задали приличное количество стилей: размер шрифта, семейство шрифта, прижатие заголовка к левому краю, левый отступ, цвет, верхний внутренний отступ и тень текста. Объяснять работу каждого свойства сейчас нет смысла, поэтому просто скопируйте код и вставьте в таблицу стилей (css-файл).

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

<ul id = "about">
	<li><a href = "#">О нас</a></li>
	<li><a href = "#">Блог</a></li>
	<li><a href = "#">Обратная связь</a></li>
</ul>

Он формирует список их трех ссылок. В действительности они должны куда-то вести, но у нас это просто пустые ссылки. Муляж smile Также оформим список и ссылки в нем.

#about{
float: right;
list-style: none;
margin-right: 50px
}
#about a{
color: yellow;
}

шапка

Шаг 8. Делаем меню в боковой колонке

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

<ul class = "menu">
	<li><a href = "#">Пункт меню1</a></li>
	<li><a href = "#">Пункт меню2</a></li>
	<li><a href = "#">Пункт меню3</a></li>
	<li><a href = "#">Пункт меню4</a></li>
	<li><a href = "#">Пункт меню5</a></li>
	<li><a href = "#">Пункт меню6</a></li>
</ul>

Оформим:

.menu{
list-style: none;
}

Собственно, тут я прописал только одно правило – убрал маркеры у пунктов списка, все остальное и так устраивает. Также перед меню можно добавить заголовок и как-нибудь его оформить. Можете этим сами заняться. Заголовки пишутся в парных тегах <h1> - <h6>, где первый – самый большой (заголовок статьи), а последний – самый маленький, часто он вообще не применяется. Для заголовка меню в боковой колонке оптимально брать <h3>.

Шаг 9. Оформляем контентный блок

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

<h1>Заголовок статьи</h1>
			<p>А здесь будет какая-нибудь статья. Она должна быть объемной, чтобы было что читать. И желательно писать что-то, что может быть полезно людям.</p>
<p>Содержимое в статье разбивается на абзацы и подзаголовки, чтобы ее было легче читать и воспринимать. Например, вот подзаголовок.</p>
<h2>Подзаголовок статьи</h2>
<p>Также по ходу статьи важные слова можно выделять жирным шрифтом или другим цветом, чтобы привлекать к ним внимание.</p>

Вот такое содержимое можно вставить в блок с контентом. Абзацы в нем формируют основное содержимое, а теги h1-h2 – заголовки и подзаголовки. Тег h1 должен быть единственным на странице.

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

Шаг 10. Оформляем подвал

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

#footer{
text-align: center
}

Шаг 11. А нет, нет больше шагов

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

А что с ним дальше делать?

Любоваться, конечно smile Целью этой статьи было просто показать вам, как создается простейший сайт с помощью html и css. Можно еще долго работать над его дизайном и в результате может получиться что-то привлекательное. Но все же нужно помнить, что это статический сайт. Если на него и добавлять новые страницы, то это делается вручную, с помощью создания новых html-документов.

Такой способ управления сайтом давно в прошлом, хотя и имеет свои плюсы. Чтобы выложить сайт в сеть, вы должны все html-файлы, таблицу стилей и необходимые картинки забросить на какой-нибудь хостинг, платный или бесплатный. Также нужно зарегистрировать имя сайта, чтобы он как-то назывался. Домен третьего уровня можно получить бесплатно у многих компаний, а вот за домен второго уровня придется заплатить (.ru, .com, .ua и т.д.) Читайте здесь статью о выборе хостинга и домена, если интересно.

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

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

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

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

Надеюсь, у вас сложилось хотя бы минимальное представление о том, как сделать сайт html в блокноте или любом другом текстовом редакторе. Я рад буду ответить на все ваши вопросы в комментариях. Благодарю, что уделили внимание laugh

Кстати, если вас интересует подробное изучение по HTML5 и CSS3 с нуля до результата, то советую вам прочитать эту статью. Там я говорю о других курсах и сайтах, которые могут помочь вам в изучении. По ходу вы сверстаете 3-4 реальных макета, что даст вам необходимую практику для реального трудоустройства или разработки сайтов под свои нужды. В итоге создать сайт через html не будет для вас чрезмерно сложной задачей, да и верстать вы сможете шаблоны во много раз сложнее, чем тот, что мы с вами сделали в рамках этого урока.
Скачать исходник

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

Еще материалы по HTML

Бесплатный курс по HTML

Премиум уроки по HTML

Полный курс по HTML5

  • Пётр

    Здравствуйте! Я правильно вас понял если скопировать например исходный код страницы какого-нибудь страницы сайта в интернете , потом вставить его в блокнот, сохранить в формате html, то получим изображение этой страницы в блокноте( страница только таблицы и текст)?

    2017-05-10 в 4:19 | Ответить
    • Михаил

      Да, если есть доступ к интернету то стили просто подгрузятся с того сайта, исходный код которой смотрели. И получится ее копия.

      2017-05-10 в 7:27 | Ответить
  • Ксения

    Здравствуйте, не могли бы вы помочь сделать мой личный простенький сайт в блокноте?

    2017-04-07 в 6:14 | Ответить
    • Михаил

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

      2017-04-10 в 10:30 | Ответить
  • Сергей

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

    2017-03-21 в 6:50 | Ответить
  • Марина

    Здравствуйте. Я всё делала по вашей инструкции, но моё оформление и текст всё ещё находятся в (разных мирах) может быть я что-то не дочитала, подскажите пожалуйста, как документ css внести в документ html, чтобы и оформление и текст было одним целым.

    2017-03-16 в 4:23 | Ответить
    • Михаил

      Смотрите тут как подключить css к html

      2017-03-16 в 4:58 | Ответить
  • Евгений

    Добрый день Михаил, у меня к вам такой вопрос — может быть я что-то делаю неправильно, но у меня пункты меню отобразились не в боковой колонке, а в контенте. Подскажите, как исправить? «Это боковая колонка

    Пункт меню1
    Пункт меню2
    Пункт меню3
    Пункт меню4
    Пункт меню5
    Пункт меню6

    Это — контент «

    2017-03-15 в 4:47 | Ответить
    • Михаил

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

      2017-03-16 в 1:53 | Ответить
      • Родион

        А как, собственно, копировать, если Вы не говорите что куда копировать, а в конце не оставили итог работы?

        2017-04-06 в 3:45 | Ответить
    • Дарья

      вы вставили код в контент, а нужно в боковую колонку, вот: smile
      Это боковая колонка

      Пункт меню1
      Пункт меню2
      Пункт меню3
      Пункт меню4
      Пункт меню5
      Пункт меню6

      2017-05-08 в 11:39 | Ответить
  • Михаил

    Шаг 1.файл создаем: style.css не site.css только начал осваивать, пол дня соображал, почемы не открывается в браузере css. dash

    2017-03-14 в 9:34 | Ответить
  • Сергей

    Вопрос такой, потом мы делаем соответственно страницы куда ссылаются ссыки (пункт меню1-6 (html) я правильно понимаю?

    2017-01-31 в 10:29 | Ответить
    • Михаил

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

      2017-01-31 в 11:46 | Ответить
  • Диас

    Здравствуйте, я понял ваш урок только до 5 шага.
    Потом когда вы работали над css вот тут у меня были проблемы.
    Как работать с css файлом.

    2017-01-29 в 3:11 | Ответить
  • Роза

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

    2016-12-04 в 3:32 | Ответить
  • Дима

    вставил всё и ничего не работает, на экране ромбы с вопросит знаками

    2016-10-08 в 8:28 | Ответить
    • Михаил

      Значит у вас проблема с кодировкой, перекодировке код в utf-8

      2016-10-09 в 6:08 | Ответить
  • Ирина

    Вопрос! Как сделать чтоб текст меню открывался в блоке контент????

    2016-10-05 в 4:59 | Ответить
    • Михаил

      Я не понял вашего вопроса

      2016-10-05 в 7:32 | Ответить
  • Дмитрий

    Извините, но у вас код не валидный. Ошибочный. Я подзабыл HTML4 и плохо знаю 5. Но в CSS приходилось проставлять символ «;» А когда перешел к вставке логотипа, то код вами предложенный просто не работает, там нет знаков препинания, разделителей, завершающихкоманду.

    2016-07-16 в 6:21 | Ответить
    • Михаил

      Здравствуйте. Насколько я знаю, в css действует такое правило: если в фигурных скобках пишется одно свойство, то точку с запятой можно не ставить. Я так делаю постоянно и все работает. Я не знаю, почему у вас возникла такая проблема.

      2016-07-25 в 5:41 | Ответить
  • bryntka

    Оогромное спасибо! Именно после прочтения вашей статьи у меня все получилось! ура!

    2016-06-19 в 9:53 | Ответить
    • Михаил

      Это же отлично!)

      2016-06-30 в 3:12 | Ответить
  • Миша

    Не так уж и сложно все это сделать, но какой толк с этой страницы?

    2016-04-01 в 5:27 | Ответить
    • Михаил

      Толк? В основном я писал эту статью, чтобы познакомить новичков в сайтостроении с азами работы с html и css, а также сделать очень простую страницу. Понятное дело, что толку от нее немного, но цель статьи — не сверстать крутой шаблон, да и я сомневаюсь, что это можно было бы в одну статью вместить. Самое главная цель этого материала — объяснить суть того, как создаются сайты.

      2016-04-01 в 5:30 | Ответить
  • Мартин

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

    2016-03-20 в 4:17 | Ответить
    • Михаил

      Весь приведенный код идет в файле сверху вниз. Сначала html-код для шапки, потом для боковой колонки, для контента (или наоборот, если контент слева), в самом конце низ сайта. Я в конец статьи добавил ссылки на архив с исходными файлами, можете скачать и посмотреть, как оно все выглядит вместе.

      2016-03-20 в 6:04 | Ответить