6. Создание WB (домашнего сервера): Создание веб-страничек.
Автор статьи:
ToshibaNT [aka Anton Rostovzev]
Статья взята с сайта: http://web-bbs.narod.ru
E-mail автора: toshibant@mail.ru
Создание простейшей веб-странички.
Сегодня я расскажу вам как самому создавать элементарные веб-странички, что и как можно поместить на свой WEB-сервер.
Для начала я приведу вам текст элементарной странички.
<HTML>
<HEAD>
<TITLE>Заголовок
странички</TITLE>
</HEAD>
<BODY>
Это моя главная страничка !!!
<BR>
<B>Добро пожаловать</B>
</BODY>
</HTML>
Напишите этот текст в Блокноте или любом другом текстовом редакторе и сохраните его под именем index.htm в папку htdocs в директории Апача .Или, если вы поменяли в конфиге Апача DocumentRoot в ту папку, которую вы установили главной.
Теперь, когда вы будете набирать свой локальный адрес http://127.0.0.1, на главной страничке вместо Апачевской тестовой странички будет отображаться заданная страничка.
Теги.
Теперь пора сделать небольшие пояснения, насчет того, что вы только что сделали. Для начала я вам объясню что такое теги.
1. Все, что находится между <
и > - называется тэг.
2. Текст, находящийся между скобками <> не виден для пользователя
3. Текст, не находящийся между такими скобками < > - весь виден при
просмотре в броузере.
4. Эти самые теги служат для разметки и форматирования текста, а так же много
еще для чего. Теги определяют то, как будет выглядеть текст.
Еще кое-что про теги – большинство тегов должны как открываться, так и закрываться.
Если знак открытия тега - <HTML>, то знак закрытия </HTML>. Не забывайте закрывать теги, причем в правильном порядке.
Закрываться теги должны в обратном порядке. К примеру сначала открывается <HTML>, затем открывается <BODY>. А закрывается сначала </BODY>, а потом уже </HTML>.
Некоторые теги, например <BR> - перенос строки не нужно закрывать. Большинство же других тегов необходимо закрывать.
Надо отличать обязательные теги от необязательных. Необязательных тегов достаточно много, а вот обязательных несколько и их вполне можно позволить себе запомнить.
Обязательные теги.
Эти теги являются обязательными и они должны присутствовать в каждом HTML файле.
<HTML> - тег, обозначающий, что это файл, написанный на языке HTML, а не на каком то другом (если вы поставите не <HTML>, а например <PASCAL>, то ничего работать не будет). (прим. А вот это я вам наврал: только что проверил – все прекрасно работает … воистину великий язык HTML).
<HEAD> - заголовок документа. То, что находится между открытием и закрытием тега заголовка передается сервером в самом начале загрузке страницы. Как правило это информация о заголовке окна, кодировке страницы, и.т.п.
<BODY> - тег тела документа. Здесь расположен сам текст документа. Этот тег введен, из-за тега заголовка. Имеется в виду, что если заголовок следует передавать в начале, то тело документа нужно передавать в конце. Кстати, в этом теге можно определять фоновый рисунок страницы, цвет фона, цвет ссылок цвет основного текста, и что-то еще …
Могу конечно сказать вам по секрету, что страничка будет открываться и работать даже при отсутствии этих «обязательных» тегов. Но, их использование - это по крайней мере знак хорошего тона. А вообще смысла особого в их использовании без параметров я не вижу. Параметром тега BODY, например является установка цвета фона:
<body bgcolor="#999999"> - задает цвет фона документа (999999 – код цвета).
Необязательные теги.
Как вы видите в языке HTML ничего сложного нет.
Попробуйте поэкспериментировать с тегами <CENTER> - (выравнивание по центру) , <B> - (жирный шрифт) и <BR> (перенос строки).
Могу вам дать небольшой список наиболее нужных тегов для экспериментов в Блокноте.
<title></title> - название документа. Правильно писать этот тег в заголовке (в теге HEAD)
Например: <HEAD><TITLE>Заголовок</TITLE></HEAD>
<a href="другой_документ.html">Текст ссылки</a> - ссылка на другой документ. Где стоит «Текст ссылки» может стоять например картинка. Тогда, чтобы перейти по заданной ссылки нужно будет нажать на картинку.
<img src="ваша_картинка.jpg"> - картинка
<hr> - горизонтальная линия
<marquee></marquee> - бегущая строка (текста)
Теги для форматирования текста (входят в необязательные).
<b>жирный текст</b> - жирный текст
<i>жирный текст</i> - курсивный текст
<big>крупный текст</big> - крупный текст
<p></p> - параграф. Этими тегами любит злоупотреблять Ворд. Тыкает их везде, где они не нужны.
<pre></pre> - форматированый текст
<s></s> - перечеркнутый текст
<small></small> - малый текст
<stike></strike> - перечеркнутый текст
<sub></sub> - нижний индекс
<sup></sup> - верхний индекс
<br> - перенос строки (принудительный)
<center>Этот текст будет написан посередине</center> - центрирование текста
<font>Текст, написанный другим шрифтом</font> - сам по себе ничего не делает, употребляется только с параметрами
<li></li> - cписки
Также есть теги таблиц, фрэймов, областей, но о них рассказывать долго, да и много создано учебников специально по HTML и я не хочу пересказывать то, что в них говорится. Естественно, весь язык HTML не перескажешь на 2-х страничках, однако
WYSIWYG редакторы.
WYSIWYG (Whats you see is whats you'se gets).Что видишь, то и получаешь. Принцип работы большинства современных текстовых и графических редакторов, когда на экране отображается тот внешний вид документа, который получится при его распечатке.
В нынешнее время мало кто пишет странички в Блокноте от руки – в основном все пользуются WYSIWYG – редакторами. Настоящие, продвинутые дизайнеры подправляют за таким редактором текст в Блокноте от руки.
Хотя бы для того чтобы узнать, что же это такое, вам нужен какой-нибудь HTML-редактор. Наиболее популярный редактор веб-страничек – это MacroMedia DreamWeaver. Скачать просто так его не получится – он весит 60 мегов (а может уже больше) – дешевле обойдется купить диск для веб-дизайнера, или попросить такой диск у своих знакомых.
Если у вас и ваших знакомых нет никакого специализированного редактора веб-страничек, как например MacroMedia DreaWeaver, а страничку создать очень хочется, причем прямо сейчас, вы можете набрать текст в Ворде, оформить его, даже вставить картинки и сохранить его как веб-страницу.
Пусть Ворд очень коряво делает веб-странички (пишет в них много лишнего текста), но для первого времени он вам вполне подойдет. К тому же, используя полученные знания об HTML, я надеюсь, вы сможете убрать лишние теги, которые вставит Ворд. Обычно он вставляет много лишних тегов <p> и <span>.
Наверное, когда-нибудь я соберусь написать такую прогу, которая удаляет всю эту срань из сохраненных Вордом страничек. А также прогу, которая удаляет вообще все теги из документа и оставляет только содержимое. Ведь когда вы сохраняете страничку из инета, большую часть ее занимают картинки, а зачем они будут занимать лишнее место на вашем жестком диске (особенно если он не слишком велик).
Пока это все про создание веб-страничек. Ждите следующую главу про установку PHP и Perl’a, а так же про использование готовых перловых и пхп-шных скриптов и про написание своих.
За другими статьями, посвященными WEB-BBS заходите на мой сайт: http://web-bbs.narod.ru.
CopyRight ToshibaNT 2004.