|
Учитывая пожелания посетителей моего сайта, да и своё давнее
желание написать данную статью, представляю вам это учебное пособие о том, как
создать свой сайт...
Сам я являюсь пропагандистом борьбы с шаблонами во всех областях, и пишу
эту статью, чтобы на Народе стало хоть на одну шаблонную пагу меньше :)))
Ладно, приступим...
Многие из вас думают, что для создания сайтов необходим специальный софт. Ан
нет. Для создания сайта абсолютно не обязательно иметь дорогостоящие (100р на
любом рынке) программы. А за примером далеко ходить не надо. Гляньте хоть на
мой сайт. Я принципиально пишу весь HTML-код в Блокноте, том
самом, который входит в состав любого Windows'а...
Картинки не в счёт. Для этого я, разумеется, использую очень здоровые проги...
Это я всё к чему? Да к тому, чтобы вы не смотрели на создание сайтов как на
что-то сверхестественное... Серьёзных проектов - да, а домашнюю страницу может
создать любой :))) (Хотел написать "Ламер", но это уже перебор :))))
Как всегда я заболтался :))) К делу...
Будем создавать сайт, и нам не нужно даже быть подключёнными к И-Нету. Нужно
иметь две вещи: Блокнот и Internet Explorer любой версии или любой
другой браузер, который нравится вам... А также графический редактор, если хотите создать
свои картинки. Но пока для пробы можете юзать картинки из этого урока...
Для начала маленький ликбез, чтобы вы понимали, о чём я глаголю в статье:
- Тэг-элемент форматирования, окружённый угольными скобками.
Например: <br>
- Тэг, содержимое которого начинается с восклицательного знака, и двух тире, и заканчивается
двумя тире - комментарий, а его наличие необязательно в коде. Если их не будет,
это никак не повлияет на работу :)))
Например: <!--Это комментарий :)))-->
- Параметры тегов пишите в кавычках, а сами параметры через пробел...
Например: <a href="http://www.antikpage.narod.ru" target="_new">
- Никогда не пишите угольные скобки в тексте. Юзайте их только для тэгов. Это
спецсимволы. Для их вставления в тексте используются спецконструкции, и их полно, но
на данном этапе нам не нужно это обсуждать...
- Файл должен иметь расширение .htm или .html. Имя любое. И не забывайте
обновлять страницу в Эксплорере, когда сохраняете изменения в блокноте :)))
Пока хватит. Остальное поймёте в процессе создания паги :)))
Дабы не писать целый учебник по языку HTML, ибо их по И-Нету полно, а мне гемором
заниматься тоже нет охоты, я просто разберу уже готовый пример. И
по аналогии, вы сможете создавать свои странички :)))
Я, разумеется, не буду вдаваться в мета-теги, XHTML, графику, JavaScript и т.д. Тогда урок
занял бы страниц 50 как минимум...
Вот самый простой пример. Он не блещет шедеврами веб-дизайнерского искусства, но
как пример не плох. (На том же Народе чуть-ли не половина подобных сайтов)...
Скачайте для удобства этот файл. В нём содержатся необходимые для изучения данного урока
файлы:
template.rar (21 кБ)
<!--Это комментарий. Вы не забыли, что они не на что не влияют, и вы можете их свободно удалять?
Тогда за дело!!!-->
<html><!--Это обязательный тэг, сообщающий о начале документа HTML-->
<head><!--Тэг головы документа. В нём размещают такую инфу, как таблицу стилей,
мета-теги, если они нужны, различные скрипты, которые должны начать работать ещё до загрузки
документа и т.д.-->
<title>Пробная страница</title><!--Заголовок документа, который вы можете видеть в
полосе заголовка браузера... Это парный тег, и он имеет закрывающую половину, которая
отличается только наличием правой косой черты спереди названия. Это закономерность для всех
парных тэгов (форматирования текста, встроенных фреймов и т.д.)-->
</head><!--Закрывающий тэг головы документа-->
<body background="fon.jpg"><!--Открывающий тэг начала тела документа. Это очень важная
часть, ибо тело документа - это всё, что вы можете увидеть, загрузив сайт браузером :) В этом тэге
есть такие параметры, как цвет фона, картинка фона (в нашем случае мы её используем с помощью
параметра background. У нас картинка находится в той же папке, что и HTML файл, но можно юзать
картинки и с сайтов в И-Нете. Для этого пишете background="http://www.domen.ru/image.gif"). Другие
параметры смотрите в справочниках, ибо всех и я не перечислю по памяти...-->
<center><!--Открывающий тэг центрирования содержимого. Если его убрать, то
всё содержимое будет в левой части окна. Иногда и это прикольно выглядит...-->
<img src="logo.gif"><br><!--Тэг вставки картинки. В параметре src указывается
её нахождение. У тэга также есть параметры Height и Width, которые изменяют размер картинки
в браузере. Кстати, это частая ошибка ламеров. Картинку они уменьшают, а весит-то она
столько же. А когда эта ошибка в фотоальбоме? Кстати, подобную ошибку я нашёл в одном
из шаблонов фотоальбомов на Народе... А бороться с этим надо, создавая мини-копии
фоток (Thumbnails). А при нажатии на них вызывать большое изображение... Ну, это так, на
будущее :))) А br - это тэг перевода на новую строку (как нажатие Enter'а в Word'е). Без него
содержимое выводилось бы в одну строку, несмотря на то, что в исходнике переносы есть.
Браузер автоматом заменяет любое их количество на один пробел...-->
<h2>Привет всем :)))</h2><!--Тэг заголовка 2 уровня. Бывают от 1 до 6. От этого
изменяется размер шрифта... Не используйте их в тексте. Для именения размера шрифта в тексте
используют тэг Font и Каскадные таблицы стилей CSS-->
<table width="100%" border="1"><!--Тэг начала таблицы. В ней есть отдельные ячейки, в
которых размещается меню и основная текстовая часть. Параметр Width="100%" значит, что таблица
будет растянута по горизонтали на весь экран. Border="1" - размер бордюра. Вы можете его совсем
убрать, поставив значение в ноль...-->
<tr><!--Открывающий тэг строки документа-->
<td width="200"><!--Открывающий тэг столбца (отдельной ячейки). У нас эта ячейка
отведена под меню со ссылками. Width - его ширина в
пикселях. Можно менять цвет фона ячейки параметром Color="#123ABC" После символа решётки
идёт шестнаднатиричный цвет (по две цифры на цвет Red, Green и Blue) Также можно просто
писать названия некоторых цветов. Например: Color="lime" - ярко салатовый...-->
<a href="about.htm">Обо мне</a><br><!--Гиперссылка на файл. Параметр
href - место назначения. Можно ссылаться и на файлы Rar, Zip и т.д. В нашем случае файл должен
находится в одной папке с этим...-->
<a href="http://www.antikpage.narod.ru">Страничка АнтиОриса :)))</a>
<!--Ещё одна ссылка, но на сайт в И-Нете (мой). В таких случаях всегда указывайте протокол (http://),
а иначе браузер начнёт искать файл с тем же именем в папке, а его, разумеется, нема :(((
Страничка АнтиОриса - название ссылки, если не поняли (может состоять хоть из одного символа,
но не нуля. Ведь нажимать не на что будет...).-->
</td><!--Закрывающий тэг ячейки. Никогда не забывайте про закрывающие тэги,
а то будет БигБяка...-->
<td><!--Открывающий тэг новой ячейки (основной текстовой части документа). Ширину
не указываем, т.к. из-за того, что таблица растянута на 100%, а первая ячейка имеет фиксированную
ширину 200 пикселей, то данная ячейка будет растянута до нужного размера...-->
<p>Типа привет всем, кто зашёл на мою домашнюю страницу :)</p>
<!--Тэг форматирования. В данном случае - параграф (абзац). Повышает удобочитаемость текста...
Разумеется - тэг парный, т.к. нужно указать, где начало параграфа, а где конец...-->
<p>Я Вася Пупкин, и на этом сайте вы узнаете обо мне :)))</p>
<!--Ещё один абзац...-->
<p>Я крутой чел, т.к. я создал свою пагу сам :))) Если я буду дальше тренироваться, то у меня
будет сайт круче Майкрософтовского :))) Не верите, как хотите, но это так :)))</p>
<!--То же самое...-->
<center><!--Для этой ячейки нужно отдельно центрировать содержимое (в нашем
случае для моего баннера)-->
<a href="http://www.antikpage.narod.ru"><img src="mybanner.jpg"
border="0"></a></center><br>
<!--Заметьте, что для ссылки я использую картинку. Это происходит потому, что картинка находится
в области действия тэга ссылки (до его закрытия) вместо названия ссылки... Параметр Border="0"
нужен затем, чтобы вокруг ссылки (картинки) не было синего или фиолетового (если сайт
посещён) бордюра... Кстати, не забудьте закрыть центрирование содержимого...-->
</td><!--Закроем ячейку с текстом... Не забывайте об этом!-->
</tr><!--Также закроем строку таблицы...-->
</table><!--Сама таблица тоже закончилась :)))-->
</center><!--Вы, наверно, уже забыли, что мы вводили центрирование не только ячейки,
но и всего документа. Нужно также закрыть его :)))-->
</body><!--Тело документа тоже закончилось. Осталось лишь закрыть весь документ
HTML, и радоваться результату :)))-->
</html><!--Сделаем это... Вот и всё :))))))-->
Как ни странно, но это действительно всё. Простенькая страничка готова. Скопируйте её, назовите
about.htm, и у вас заработает ссылка Обо мне... Подобным образом можно хоть интернет-портал создать
на радость себе и людям :)))
Ух, умаялся. Писать ликбезы - самое геморойное занятие. Но, если вы дочитали статью до конца,
то мой труд не пропадёт зря, и вы сможете стать сайтовладельцем. На Народе станет меньше
шаблонных паг и т.д. Экспериментируйте, и всё у вас получится :)))
Ради прикола зайдите на мою первую страницу, которую я создал всего чуть больше полгода
назад...
www.antioris.fromru.com...
Если же у вас ничего не получилось, пишите, отвечу или помогу в создании сайта :)))
Автор: АнтиОрис
|
