Как создать сайт в Блокноте
Простота – это крайняя степень изощренности.
Леонардо да Винчи
Обычно для создания сайтов используют специальные программы типа Macromedia Dreamweaver, или конструкторы сайтов, которые гораздо облегчают работу. Но можно обойтись без них и создать сайт в Блокноте от Windows. В этом случае понадобится знание языка html, а так же пригодятся таблицы стилей css.
Создадим первую web-страничку. Для этого заходим в меню / Пуск /, которое находится в левом нижнем углу монитора.
<!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 файлы.
2. 👍 👍 👍 Простые стратегии для бинарных опционов
3. 👍 Как купить домен для сайта
4. 👍 Как выбрать хостинг
5. Как загрузить сайт на хостинг
6. Купить готовый шаблон сайта
7. Как создать сайт на html
А почитав статью о том, как заработать на своём сайте, можно превратить свой сайт в мощный источник дохода.