Как создать сайт в Блокноте

Простота – это крайняя степень изощренности.
Леонардо да Винчи

Обычно для создания сайтов используют специальные программы типа Macromedia Dreamweaver, или конструкторы сайтов, которые гораздо облегчают работу. Но можно обойтись без них и создать сайт в Блокноте от Windows. В этом случае понадобится знание языка html, а так же пригодятся таблицы стилей css.

Создадим первую web-страничку. Для этого заходим в меню / Пуск /, которое находится в левом нижнем углу монитора.

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

<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

Разберём всё по порядку. Элементы, заключенные в угловые скобки, называются тегами они и задают внешний вид web-страницы. Браузер, считывая информацию со страниц размещенных в Интернете, отображает ее на экране монитора в том виде, в котором четко указывают ему эти самые теги. Сами теги на экране не отображаются.

DOCTYPE – этот элемент объявляет тип html документа, он размещается самым первым и позволяет браузеру определить, какая версия html используется. Теги html, head, title – являются служебными и несут определённую информацию о странице. Внутри тега body размещается всё то, что и отображается на странице.

Как видите, создание сайта в Блокноте не такое уж и сложное занятие. Идем дальше…

<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Как создать сайт в Блокноте</title>
</head>
<body>
Моя первая web-страница
</body>
</html>

Ну вот теперь web-страничка уже не безымянная и на ней появилась первая строчка текста. Чтобы посмотреть результат необходимо сохранить набранное (Файл – Сохранить как). Присвоим получившемуся файлу имя index с расширением html. Запускаем сохранённый файл index.html и любуемся своей первой web-страничкой.

Идём дальше, попробуем добавить некоторые css стили, а то она у нас какая-то неброская.

<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Как создать сайт в Блокноте</title>
</head>
<body>
<style>
body {background:#FAF0E6;}
</style>
Моя первая web-страница
</body>
</html>

Что получилось? Изменился фон страницы, так как мы задали цвет фона свойством background. Подобрать другой цвет можно с помощью web-палитры.

Внесём ещё некоторые изменения, зададим стили для заголовкаизменим шрифтзададим цвет, выровняем его по центру.

<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Как создать сайт в Блокноте</title>
</head>
<body>
<style>
body {background:#FAF0E6}
h1 {color:FF0000; font:normal 25pt/20pt arial;}
</style>
<center><h1>Моя первая web-страница</h1><center>
</body>
</html>

Не забываем сохранять изменения в файле index.html.

Добавим некоторый текст на web-страницу.

<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Как создать сайт в Блокноте</title>
</head>
<body>
<style>
body {background:#FAF0E6}
h1 {color:FF0000; font:normal 25pt/20pt arial;}
</style>
<center><h1>Моя первая web-страница</h1><center>
<p>Это мой первый сайт, который очень скоро будет самым популярным сайтом в Интернете.</p>
<hr size="1" color="#800000" width="75%">
<p>С сегодняшнего дня я супер-, мега-, web-мастер, seo-гуру и т.д. и т.п. Читайте мои советы по созданию и продвижению сайтов. </p>
<p>Василий Пупкин - главный web-мастер Интернета</p> </body>
</html>

А теперь при помощи css стилей, придадим web-странице более привлекательный вид.

<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<html>
<head>
<title>Как создать сайт в Блокноте</title>
</head>
<body>
<style>
body {background:#FAF0E6}
h1 {color:#FF0000; font:normal 25pt/20pt arial;}
p:first-letter {color:#FF0000; margin-left:25px; font:normal 18pt italic;}
.maket {width:700px;height:850px; margin:0 auto; padding:10px; border:solid 1px #800000; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px;}
.epigraf, .autor {color:#800000; font:italic 12pt verdana; text-align:right;}
.content {color:#000000; font:normal 14pt verdana; text-align:justify; }
.footer {text-align:center; position:relative; top:25px; font:bold 14px verdana;}
</style>
<div class="maket">
<center><h1>Моя первая web-страница</h1><center>
<p class="epigraf">Это мой первый сайт, который очень скоро<br> будет самым популярным сайтом в Интернете.</p>
<hr size="1" color="#800000" width="75%">
<p class="content">С сегодняшнего дня я супер-, мега-, web-мастер, seo-гуру и т.д. и т.п. Читайте мои советы по созданию, оптимизации, продвижению сайтов и о том <a href="https://www.smartincom.ru/sarabotok/">как заработать деньги в интернете</a>.</p>
<center><img src="https://www.smartincom.ru/image/seo-guru.jpg"></center>
<p class="content">Буквально некоторое время назад, я вряд ли смог бы назвать себя web-мастером. Но сегодня, не имея специального образования программиста, не заканчивая какой либо компьютерный или инженерный университет, а имея свой сайт, я с гордостью могу заявить, что я web-мастер.</p>
<p class="content">Теперь, когда мне будут задавать вопрос «Чем ты занимаешься?», я с улыбкой и, не стесняясь, отвечу – «Я web-мастер, а ты?»</p>
<hr size="1" color="#800000" width="75%">
<div class="autor">Василий Пупкин</div>
<div class="footer">© www.smartincom.ru</div>
</div>
</body>
</html>

Копируем код и смотрим, что получилось.

Вот так, освоив основы html, и применяя его на практике путём различных экспериментов, можно создать html сайт и в Блокноте. Кроме текста на страницы можно добавлять изображенияaudio и video файлы.

А почитав статью о том, как заработать на своём сайте, можно превратить свой сайт в мощный источник дохода.

Читайте также:

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *