Главная | Обратная связь | Поможем написать вашу работу!

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

Чтобы создать сайт с помощью Блокнота можно выбрать 2 варианта. Мы можем воспользоваться при создании сайта стандартным Блокнотом для Windows, либо скачать более усовершенствованные Блокноты, такие как Notepad2, RapidPHP и др.

Лично я рекомендую скачать себе программу блокнот Notepad2, на мой взгляд он является самым оптимальным и легким для работы с файлами.php,.html. Но буду показывать, все таки, как создать сайт через стандартный Блокнот. Он есть у всех и с этим проблем думаю не возникнет.

Итак, открываем программу блокнот в Windows «Пуск» — «Все программы» — «Стандартные» — Блокнот.

Схема такая:

1. Прописываем структуру документа на HTML. Простейшая структура выглядит так:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”> <HTML> <HEAD> <TITLE>Заголовок документа</TITLE> </HEAD> <BODY>Основной текст документа</BODY> </HTML>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”>

<HTML>

<TITLE>Заголовок документа</TITLE>

</HEAD>

<BODY>Основной текст документа</BODY>

</HTML>

Где,

<!DOCTYPE HTML PUBLIC “- //W3C//DTD HTML 4.01//EN”> — 1-я строчка определяет версию языка HTML, оптимальная версия 4.01, поэтому эта строчка, как правило, у всех сайтов одинаковая.
<HTML></HTML> — 2-я и 7-я строчки, говорят браузеру об открытии и закрытии HTML документа.
<HEAD></HEAD>, <TITLE></TITLE> — с 3-я, 4-я, 5-я строчки определяют заголовок документа и тегами <TITLE></TITLE> указывается название сайта.
<BODY></BODY> — 6-я строчка это тело документа. Здесь прописывается весь текст сайта, меню и др.

Пока сильно вникать в создание сайта не надо, просто пропишите представленный код у себя в Блокноте и сохраните файл в формате.html. Для этого переходим в меню «Файл» — «Сохранить как». Тип файла выбираем «Все файлы» и имя файла прописываем, например index.html. Теперь открываем файл в браузере (Internet Explorer, Mozilla Firefox) и смотрим, что у нас получилось.

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

2. Создаем структуру страницы, где у нас будет находится шапка сайта, где меню, а где текст страницы.

Делается это с помощью блочной верстки, либо таблиц. Мы будем размещать компоненты сайта с помощью таблиц. Таблицы в HTML определяются тегом <TABLE></TABLE>, где строка прописывается тегом <tr></tr>, а столбец <td></td>. Давайте попробуем прописать нужную нам таблицу. Мы разобьем страницу на 3 части, первая будет отвечать за шапку сайта и будет находиться по центру, вторая за сайдбар (меню) и третья за основной текст на странице.

Код таблицы будет выглядеть, примерно, так:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”> <HTML> <HEAD> <TITLE>Заголовок документа</TITLE> </HEAD> <BODY> <table border="2" cellpadding="10"> <tr height="200"> <td colspan="2"></td> </tr> <tr> <td width="200" height="500" valign="top"></td> <td width="800" height="500" valign="top"></td> </tr> </table> </BODY> </HTML>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”>

<HTML>

<HEAD>

<TITLE>Заголовок документа</TITLE>

</HEAD>

<BODY>

</tr>

<tr>

</tr>

</table>

</BODY>

</HTML>

Где,

<table></table> — 8-я и 19-я строчка определяет открытие и закрытие таблицы;
<tr width="100%"> — 10-я строчка открывает первую строку и 11-я строчка <td colspan="2"></td> открывает первый столбец. Атрибут colspan говорит о том, что первая строчка будет растянута на 2 столбца.
<tr> — 14-я строчка открывает вторую строку в таблице и 15-я строка открывает первый столбец во второй сточке. Соответственно 16-я строка открывает второй столбец во второй сточке. Атрибуты width и height, отвечают за ширину и высоту столбцов.

Получится у вас должно нечто подобное:

На самом деле, создание сайта с помощью Блокнота не сулит нам ничего сложного. Главное понять, какой столбец где и что куда вставлять.

3. В ячейках, нам необходимо прописать меню, вставить картинку с шапкой и написать текст для главной страницы.

Создаем отдельную папку для нашего проекта, например «mysite» и копируем туда файл index.html. Здесь будут хранится все файлы вашего сайта. Создаем здесь папку с названием «i» и копируем туда любую картинку, которая будет отображаться в качестве шапки вашего сайта. Название картинки должно быть 1.png.

Окончательный код создания сайта в Блокноте, будет выглядеть примерно так:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”> <HTML> <HEAD> <TITLE>Заголовок документа</TITLE> </HEAD> <BODY> <table border="2" cellpadding="10"> <tr height="200"> <td colspan="2"><p align="center"><img src="i/1.png"></p></td> </tr> <tr> <td width="200" height="500"valign="top"> <li><a href="index.html">Главная</a></li> <li><a href="1.html">Об авторе</a></li> <li><a href="http://sitese.ru/zagolovok-html-dokumenta.html">Заголовки в HTML</a></li> <li><a href="http://sitese.ru/rabota-so-ssylkami-i-izobrazheniyami-v-html.html">Форматированите в HTML</a></li> <li><a href="http://sitese.ru/rabota-so-spiskami-v-html.html">Списки в HTML</a></li> <li><a href="http://sitese.ru/rabota-s-tablicami-v-html.html">Таблицы в HTML</a></li> <li><a href="http://sitese.ru/frejmy-v-html.html">фреймы в HTML</a></li> <li><a href="http://sitese.ru/rabota-s-formami-v-html.html">Формы в HTML</a></li> </td> <td width="800" height="500" valign="top"> <p><h2>Язык HTML</h2></p> <p>По данным Википедии язык HTML был разработан британским учёным Тимом Бернесом в 1989 г. Данный язык был придумал для обмена научной информацией (документацией) между людьми не являющимися специалистами в области верстки. С помощью простых “тегов” языка HTML стало возможным создание подобных документов. То есть, каждый научный сотрудник, при желании обладая простым набором “тегов” языка HTML, мог создавать собственные документы и форматировать их в удобном для чтения виде. Плюс появилась возможность использования “гипертекста” в документах, то есть ссылаться на другие страницы в сети и обмениваться опытом.</p> <p>HTML (от англ. Hyper Next Markup Language – язык разметки гипертекста) – это стандартный язык разметки документов в интернете. Большинство веб-страниц создаются при помощи языка HTML (XHTML). Язык HTML интерпретируется браузером и отображается в виде документа, удобного для чтения пользователей.</p> <p>На сегодняшний день язык НTML далеко шагнул от первоначального его использования. Было разработано порядка 5 версий языка HTML, множество дополнений, появилась возможность использования мультимедиа и др.</p> </td> </tr> </table> </BODY> </HTML>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”>

<HTML>

<HEAD>

<TITLE>Заголовок документа</TITLE>

</HEAD>

<BODY>

</tr>

<tr>

<li><a href="index.html">Главная</a></li>

<li><a href="1.html">Об авторе</a></li>

<li><a href="http://sitese.ru/zagolovok-html-dokumenta.html">Заголовки в HTML</a></li>

<li><a href="http://sitese.ru/rabota-so-ssylkami-i-izobrazheniyami-v-html.html">Форматированите в HTML</a></li>

<li><a href="http://sitese.ru/rabota-so-spiskami-v-html.html">Списки в HTML</a></li>

<li><a href="http://sitese.ru/rabota-s-tablicami-v-html.html">Таблицы в HTML</a></li>

<li><a href="http://sitese.ru/frejmy-v-html.html">фреймы в HTML</a></li>

<li><a href="http://sitese.ru/rabota-s-formami-v-html.html">Формы в HTML</a></li>

</td>

<p>По данным Википедии язык HTML был разработан британским учёным Тимом Бернесом в 1989 г. Данный язык был придумал для обмена научной информацией (документацией) между людьми не являющимися специалистами в области верстки. С помощью простых “тегов” языка HTML стало возможным создание подобных документов. То есть, каждый научный сотрудник, при желании обладая простым набором “тегов” языка HTML, мог создавать собственные документы и форматировать их в удобном для чтения виде. Плюс появилась возможность использования “гипертекста” в документах, то есть ссылаться на другие страницы в сети и обмениваться опытом.</p>

<p>HTML (от англ. Hyper Next Markup Language – язык разметки гипертекста) – это стандартный язык разметки документов в интернете. Большинство веб-страниц создаются при помощи языка HTML (XHTML). Язык HTML интерпретируется браузером и отображается в виде документа, удобного для чтения пользователей.</p>

<p>На сегодняшний день язык НTML далеко шагнул от первоначального его использования. Было разработано порядка 5 версий языка HTML, множество дополнений, появилась возможность использования мультимедиа и др.</p>

</td>

</tr>

</table>

</BODY>

</HTML>

Где,

<img src="i/1.png"> — 11-я строчка, тег <img> отвечает за отображение картинки в окне браузера. Соответственно в первой ячейки у нас отобразится картинка (шапка), которую мы заранее скопировали.
<li><a href="http://sitese.ru/zagolovok-html-dokumenta.html">Заголовки в HTML</a></li> - 18-я строчка, здесь мы прописываем пункты меню нашего сайта. Делается это в виде списка с помощью тегов <li></li> и тега ссылки <a></a> ведущего на саму страницу.
<p><h2>Язык HTML</h2></p> — 27-я строчка, где прописывается текст главной страницы. Этой строчкой мы прописали заголовок.
<p>На сегодняшний день язык НTML далеко шагнул от первоначального его использования. Было разработано порядка 5 версий языка HTML...</p> — 30-я строчка, прописывается непосредственно сам текст страницы. Тег <p> разделяет текст на абзацы.

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