Простота - это крайняя степень изощренности.
Леонардо да Винчи
Обычно для используют специальные программы типа Macromedia Dreamweaver, или , которые гораздо облегчают работу. Но можно обойтись без них и создать сайт в Блокноте от Windows. В этом случае понадобится знание , а так же пригодятся .
Создадим первую . Для этого заходим в меню / Пуск /, которое находится в левом нижнем углу монитора.
Пуск - Все программы - Стандартные - Блокнот
В открывшемся окне прописываем основные , а именно, то, что прописано ниже. В дальнейшем, при создании сайта в Блокноте, набор этих тегов можно просто копировать на новую страницу для облегчения работы.
<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Разберём всё по порядку. Элементы, заключенные в угловые скобки, называются тегами они и задают внешний вид web-страницы. Браузер, считывая информацию со страниц размещенных в Интернете, отображает ее на экране монитора в том виде, в котором четко указывают ему эти самые теги. Сами теги на экране не отображаются.
- этот элемент объявляет тип html документа, он размещается самым первым и позволяет браузеру определить, какая версия html используется. Теги - являются служебными и несут определённую иформацию о странице. Внутри тега размещается всё то, что и отображается на странице.
Как видите, создание сайта в Блокноте не такое уж и сложное занятие. Идем дальше…
<!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-страничкой.
Идём дальше, попробуем добавить некоторые , а то она у нас какая-то небросская.
<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Как создать сайт в Блокноте</title>
</head>
<body>
<style>
body {background:#FAF0E6;}
</style>
Моя первая web-страница
</body>
</html>
Что получилось? Изменился фон страницы, так как мы задали цвет фона свойством . Подобрать другой цвет можно с помощью .
Внесём ещё некоторые изменения, зададим стили для , , , выровняем его по центру.
<!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.
Добавим некоторый .
<!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>
А теперь при помощи , придадим web-странице более привлекательный вид.
<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta http-equiv="refresh" content="10; url=http://www.smartincom.ru/sarabotok/">
<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="http://www.smartincom.ru/sarabotok/">как заработать деньги в интернете</a>.</p>
<center><img src="http://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.pupkin.ru</div>
</div>
</body>
</html>
Копируем код и смотрим, что получилось.
Вот так, освоив , и применяя его на практике путём различных экспериментов, можно создать html сайт и в Блокноте. Кроме текста на страницы можно добавлять , и файлы.
А почитав статью о том, , можно превратить свой сайт в мощный источник дохода.
Помогите автору, поделитесь ссылкой на эту страницу со своими друзьями в социальных сетях.
Удачи!
Научился сам поделись с друзьями!Это интересно:
∼ ∼
Источник: http://smartincom.ru/svoy-site/site-notebook.html
Как в блокноте сделать фон сайта фото
