|
Читайте также: |
Чтобы создать сайт с помощью Блокнота можно выбрать 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”> — 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> |
Где,
· <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> |
Где,
· <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 созданная исключительно в программе Блокнот:
Конечно, при создании сайта через блокнот от вас потребуются определенные знания языка HTML. Но даже если вы только начинаете изучение сайтостроения, использовать программу Блокнот вам следует в первую очередь. Именно прописывая код ручками вы сможете значительно быстрее выучить основные теги, запомнить их и спокойно ориентироваться коде.
Так же существенным преимуществом создания сайта в Блокноте, является более чистый код. Как утверждают некоторые сторонники этого метода, код написанный ручками, максимально чистый и свободный от ненужных тегов, которые пачками прописывают другие редакторы. Поэтому если вы хотите научиться разбираться в сайтостроении без Блокнота вам просто не обойтись!
А здесь можете скачать сайт, который мы только что с вами создали в Блокноте.
Дата добавления: 2015-07-18; просмотров: 151 | Нарушение авторских прав
| <== предыдущая страница | | | следующая страница ==> |
| Как создать сайт на UKOZ | | | Регистрация почтового ящика на сервисе Yandex.ru |