Navigation:Главная | Книги разные | Статьи | Блог | Контакты

Как создать html-страницу в блокноте. Урок 1

Чтобы создать сайт самостоятельно, попробуем на практике создать простую html- страничку в блокноте WordPad.

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

Страничку простенького сайта-визитки можно сделать в любом текстовом редакторе, при помощи HTML - языка разметки документа . А так же при помощи простенького блокнотика WordPad.

Сначала создайте в папке, например, Мои документы, папочку с названием вашего будущего творения, например, Saitomanka. Это нужно для того, чтобы у вас был порядочек. То есть чтобы все все части вашего сайта лежали в одном месте, а не валялись по столу, тьфу, по всему компьютеру. Потому что чем больше хлама у вас в компе, тем сложнее что-нибудь отыскать. Это аксиома всем знакомая...Не знаю, как у вас, а у меня комп просто завален всяким нужным и ненужным позапрошлогодним хламом...Все лень почистить. Ну я думаю, вирусы мне помогут...Хи.... Ой, что то я отвлеклась, извиняюсь.

Открываем блокнотик WordPad и пишем название
<html>saitomanka.com - сайт-визитка</html>

<html> </html> - это главные теги языка HTML, между ними будет еще очень много разных тегов, из которых и сложится наш будущий сайт-визитка. Эти теги как бы говорят броузеру, что внутри их содержится ваш сайт.

Теперь жмем кнопочку Файл-Сохранить как- и сохраняем файл под именем index.html в новой папке Saitomanka, которую вы создали специально для файлов своего сайта А теперь фокус-мокус, откроем файл index.html с помощью броузера (на пример, Microsoft Internet Explorer или моей любимой Оперой). Вот что у нас вышло!


Рис. 1. Наша первая страница.

В HTML есть множество других интересных (тэгов), некоторые мы рассмотрим.
Тэги бывают открывающие и закрывающие (с косой чертой "/"). На пример, тег <html>-открывающий, а </html> - закрывающий.
Для некоторых тегов наличие закрывающего тега не обязательно. Например для тега <br>с помощью которого можно текст переместить на новую строчку ниже.

Теги есть обязательные, которые есть во всех существующих html-страницах Например, <head> и закрывающий </head> для описания заголовка html-страницы. Все что располагается между этими тегами, называют головой документа. Название вашей страничку будет размещаться между тегами <title> и </title>. Например:

<title>Сайтоманка</title>

В любом броузерах заголовок будет показан в самом верху окна, смотрите на рисунке 2.

Дальше мы познакомимся с еще одной парочкой обязательных тэгов: <body> и </body>, между которыми располагается основной текст документа. то есть тело документа.
Вот что у нас получилось в блокнотике, или по серьезному, html-код страницы выглядит сейчас так:

<html>
<head>
<title>Сайтоманка</title>
</head>
<body>
saitomanka.com-сайт-визитка
</body>
</html>

уроки сайтоманки

Рис.2. Наша первая страница.

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

Еще о создании сайта:

Урок2 форматируем текст в блокноте
Урок3 Вставляем картинку в текст
Урок4 Перелинковка страниц

Скачать бесплатно
HTML-редакторы
Шаблоны блогов
Шаблоны сайтов
Учебники для создания сайта
Скрипты для сайта
Фоны для сайта
Иконки для сайта
Смайлы для сайта
Гифы для сайта

content