Чтобы создать сайт с помощью Блокнота можно выбрать 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> |
Где,
Пока сильно вникать в создание сайта не надо, просто пропишите представленный код у себя в Блокноте и сохраните файл в формате .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> |
Где,
Получится у вас должно нечто подобное:
На самом деле, создание сайта с помощью Блокнота не сулит нам ничего сложного. Главное понять, какой столбец где и что куда вставлять.
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> |
Где,
Если вы сделали все, так как я описывал, создать простейший сайт через Блокнот у вас не составит труда. В итоге у вас должна получится вот такая страница на HTML созданная исключительно в программе Блокнот:
Конечно, при создании сайта через блокнот от вас потребуются определенные знания языка HTML. Но даже если вы только начинаете изучение сайтостроения, использовать программу Блокнот вам следует в первую очередь. Именно прописывая код ручками вы сможете значительно быстрее выучить основные теги, запомнить их и спокойно ориентироваться коде.
Так же существенным преимуществом создания сайта в Блокноте, является более чистый код. Как утверждают некоторые сторонники этого метода, код написанный ручками, максимально чистый и свободный от ненужных тегов, которые пачками прописывают другие редакторы. Поэтому если вы хотите научиться разбирать