Всё о веб-дизайне - главная
Как создать сайт в блокноте
     
сузить
Все статьи
Все только обзорные статьи
Главная
Как создать сайт (страницу) в блокноте (10.11.2008)

Мой сайт всё время находят по запросам типа "как создать сайт или страницу в блокноте", "как написать страницу в блокноте" и т. п., поэтому я решил написать специальную статью на эту тему.

Сначала о плюсах и минусах создания сайта в блокноте. Создать сайт в блокноте, конечно же, можно. Правда для этого потребуется, во-первых, очень хорошее знания языка html и принципов вёрстки веб-страниц, а во-вторых, достаточно большое количество времени, если только вы не делаете какую-то совсем уж простую страничку. Преимущества создания сайта в блокноте, на которые указывают обычно сторонники подобного метода создания сайтов, это - более оптимальный и чистый код, свободный от лишних и ненужных тегов и параметров в них, которые так любят автоматически вставлять визуальные редакторы. Рекомендовал бы я создавать сайт в блокноте? В большинстве случаев вряд ли. Уж слишком это занятие муторное и в большинстве случаев себя не оправдывает. Хотя я согласен, безусловно, с тем, что, как минимум, базовое знание языка html и навыки чтения и ручной правки кода необходимы каждому, кто берётся за создание веб-сайта, и никакое чисто визуальное редактирование в визуальном редакторе эти навыки не заменит, редактирование кода вручную следует рассматривать скорее как дополнительный приём при создании страницы. Тем более, что режим работы с кодом присутствует практически во всех визуальных редакторах, и работать с кодом в ручном режиме там удобнее, чем в блокноте - есть и подсветка синтаксиса, и различные возможности автоматизации по правке/добавлению html-кода.

Вот как, например, выглядит данная страница в визуальном режиме редактора Macromedia Dreamweaver:

эта страница в dreamweaver - визуальный режим

А вот так она выглядит в режиме редактирования кода:

эта страница в dreamweaver - режим редактирования кода

Таким образом, вы в любое время можете переключиться из визуального режима в режим ручного редактирования кода и оптимизировать и чистить его до такой степени, до какой вам захочется.

Но вернёмся всё же к тому, как создать сайт в блокноте. Сначала рассмотрим простейшие html-теги и структуру простейшей html-страницы.

Что такое тег (или html-тег)? Тег - это основная конструкция в языке html. Записываются теги с использованием угловых скобок, вот так:

<тэг>

Впрочем, большинство тегов - парные, и они всегда должны иметь"открывающую" и "закрывающую" часть, вот так:

<тэг> между открывающей и закрывающей частью обычно что-то написано </тэг>

Ещё иногда теги имеют параметры, выглядеть это будет примерно вот так:

<тэг параметр="значение"> между открывающей и закрывающей частью обычно что-то написано </тэг>

Тэги имеют различные функции, одни дают указание сделать на веб-странице таблицу, другие - перейти на новую строку, третьи - изменить начертание текста и т. п. Соответственно, для того, чтобы делать страницу в блокноте, т. е. вручную писать html-код, нужно знать нужные html-теги и их параметры.

Практически любая html-страница состоит из двух частей:

1) "заголовок" (или "голова")
2) "тело"

Для того, чтобы обозначить эти части веб-страницы, существуют следующие теги:

Теги <head> и </head> ограничивают "заголовок" страницы, теги <body> и </body> ограничивают её "тело". В заголовок обычно помещается всякая служебная информация, а в "тело" - информация, которую вы будете видеть в основной части окна. Кроме того, весь html-код страницы принято помещать внутрь тегов <html> и </html>.

Ещё практически любая страница имеет некое название, это название записывается между тегами <title> и </title>. И кроме этого, желательно в начале страницы указать кодировку текста, который на ней содержится. Конечно, браузер может попробовать определить кодировку страницы и сам, но лучше всё же дать ему специальное указание. Для большинства страниц, содержащих русский текст, используется кодировка win-1251, и тег, который даёт указание браузеру воспинимать текст страницы именно в этой кодировке, будет таким: <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

Таким образом, код простейшей html-страницы будет примерно таким:

<html>
<head>
<title>Название страницы </title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>

<body>
Текст, содержащийся на странице
</body>
</html>

Набрав код страницы в блокноте, нужно сохранить его в файле с расширением htm или html (например, если эта страница должна быть главной страницей вашего сайта, в файле с названием index.htm):

сохранение страницы в блокноте

Всё, страница готова. Теперь можно открыть её в браузере и посмотреть, что получится.

Что ещё почитать на эту тему? Подробную информацию и учебники по языку html и вёрстке сайтов можно найти в этом разделе.

Ещё можно прочитать обзорную статью по html и вёрстке.

Ну, и можно прочитать обзорную статью о том, как создать свой сайт.

Остались вопросы? Задайте их на форуме.

Все материалы по языку html и вёрстке сайтов (назад в раздел)