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

Блог содержит информацию для тех, кто хочет научиться самостоятельно создавать сайты

Создание сайта

Продвижение сайта

Заработок в интернете

Скрипты|Scripts

ТОП как заработать в интернете

Выбор дизайна для сайта

Файл robots.txt

Почему не растет ТиЦ?

Бесплатный обмен постовыми возможен!

Поисковый запрос должен быть не менее 4-х символов.




Гостевая


Заметок в базе: 41
Комментариев: 184
Человек на сайте: 1

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

Автор: Анатолий Матюхин

Дата: 2011-08-31

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"/>

Её можно использовать почти во всех создаваемых страницах. Подробнее об этом посвящена другая статья.
Следующим шагом в создании сайта должно быть открытие html код. Это делается просто, <html>.
После чего мы открываем некий контейнер данных, который используется для хранения информации предназначенной для поисковых систем. Это тег <head>. Эти данные так же называют мета-тегами.

<meta http-equiv="Content-Type" content="text/html;
charset="windows-1251"/>
<title>Моя первая страница на HTML</title>

Где поле meta это название шрифта отображаемого на странице и его кодировка. Поле title название страницы. После того как мы заложили в "контейнер" информацию, нам необходимо его закрыть. Это делается так </head>.
Данной информации заложенной в "контейнер" для начала хватит.
Все изложенное должно выглядеть вот так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset="windows-1251"/>
<title>Моя первая страница на HTML</title>
</head>

Следующим шагом нам необходимо открыть еще один "контейнер", необходимый для создания сайта. Это <body>. <body> это само тело сайта, которое видимо на экране. После открытия <body> нам нужно решить из скольких столбцов и рядов будет выглядеть наш каркас сайта. Допустим у нас будет сайт состоять из 3х рядов и 3х столбцов. Для этого нам необходимо создать таблицу

<table  width="100%" border="1" cellspacing="0"  cellpadding="0">
  <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>

  </tr>
  <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>

  <td>&nbsp;</td>

  </tr>
  <tr>
  <td>&nbsp;</td>

  <td>&nbsp;</td>
  <td>&nbsp;</td>

  </tr>
</table>

В языке html ряд (строка) определяется тегами <tr> ... </tr>, а столбцы <td> ... </td>. Далее мы объединим верхние три столбца в одну ячейку атрибутом colspan=3. Там будет шапка сайта. Необходимо проделать тоже самое и с нижней частью, с третьей строчкой таблицы. После проделанной работы с объединением столбцов, у нас должно получиться вот так:

<table width="100%"  border="1" cellspacing="0" cellpadding="0">
  <tr>
  <td colspan="3" align="center"> Шапка сайта-название сайта </td>

  </tr>

  <tr>
  <td width="20%">Левый блок с меню сайта</td>
  <td width="60%" align="center">Контент сайта</td>

  <td width="20%">Правый блок с рекламной  информацией</td>

  </tr>
  <tr>
  <td colspan="3" align="center"> Футер сайта</td>

  </tr>

  </table>
	

Теперь закрываем не закрытые контейнеры и смотрим получившийся результат в блокноте:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset="windows-1251"/>
<title>Моя первая страница на HTML</title>
</head>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0"> <tr> <td colspan="3" align="center"> Шапка сайта-название сайта </td> </tr> <tr> <td width="20%">Левый блок с меню сайта</td> <td width="60%" align="center">Контент сайта</td> <td width="20%">Правый блок с рекламной информацией</td> </tr> <tr> <td colspan="3" align="center"> Футер сайта</td> </tr> </table>
</body>
</html>

Если у Вас все так же, то сохраняем блокнот под любым названием на латыне, с расширением .html. например назовем её index.html
Поздравляю Вас, вы только-что создали самостоятельно в блокноте свой первый сайт. Не останавливайтесь на достигшем, изучайте все больше по темпе как создать сайт. И вы достигнете желаемого результата!

Скачать исходник можно здесь.

Просмотров: 19256

Вы можете получать материал первыми. Так же бесплатные видео уроки, которые рассылаются только подписчикам! Подпишитесь и узнайте первым! Подписка на рассылку видео уроков.
Ваше имя: *
Ваш e-mail: *

Не пропустите интересные темы >> Самое популярное Перейти Самостоятельное создание сайта
Вы можете подписаться на RSS - ленту


Понравилась статья? Поделитесь ею с другими! Спасибо :)

Оцените заметку: 1 2 3 4 5

Комментарии к этой заметке:

Комментарий добавил(а): Юлька
Ваш Сайт:
Дата: 2011-09-13

Большое спасибо Вам за статью. Хотелось бы увидеть все это в видео уроках.

Комментарий добавил(а): Ilya
Ваш Сайт: Туризм и отдых в Израиле
Дата: 2011-09-08

Может, лучше дрим заюзать? ))

Комментарий добавил(а): ку
Ваш Сайт: парилка
Дата: 2011-11-22

круто

Комментарий добавил(а): Супер чел
Ваш Сайт: GM
Дата: 2011-11-22

нормик

Комментарий добавил(а): Вячеслав
Ваш Сайт: uroknaslivs.hut2.ru
Дата: 2012-01-21

полезная информация, я тоже сделал сайт примерно так же, на моём сайте есть видео-уроки.

Комментарий добавил(а): Людмила1957
Ваш Сайт: nsportal/gromakova.ru
Дата: 2013-01-12

Спасибо.Завтра на уроке ученикам посоветую сделать свои первые веб-странички с помощью обычного редактора Блокнот.

Комментарий добавил(а): spd
Ваш Сайт: sp-detal.ru
Дата: 2013-02-19

Спасибо, пригодится для начала

Комментарий добавил(а): Юрист
Ваш Сайт: YuristIvanovo
Дата: 2013-09-25

Прекрасно подойдет для начинающего юзера. Все просто и понятно.

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


(Обязательный вид: http://www.ваш_сайт.ru)


(Без названия, сайт не будет отображон)


(Ваш E-mail не будет виден)

Введите сумму чисел с картинки

All right reserved. CopyrightВ©2011-2015.


Яндекс.Метрика
X