Проще простого
Добро пожаловать в наш прекрасный виртуальный мир! Здесь хватит места для каждого, а поэтому, приглашаются все. Каждый, кто захочет, может обустроить свое место в сети, сделать его внешний вид приятным для обозрения, и рассказать о нем всем подряд. Для этого необходимо создать свой дом, называемый домашней страничкой, или проще - хоумпейдж. Домашняя страничка - это место, где вы можете поведать о себе, своих интересах и увлечениях, да и обо всем том,что сможете придумать. Здесь вы принадлежите сами себе, и можете сказать абсолютно всё что угодно. Но, для создания своей странички требуется не только желание ее завести, а также и некоторые навыки работы в качестве дизайнера, оформителя, художника... кем только не приедтся побывать, создавая свою страничку!
Перво-наперво, вы должны определить, как все ЭТО будет выглядеть, при этом полезно активно использовать бумагу и карандаш. Придумайте привлекательный внешний вид, продумайте систему навигации по страничке. Сделанные в карандаше наброски рисунков можно отсканировать и раскрасить в каком-нибудь
грфическом редакторе, а для создания текста можно использовать обычный MS Word. Причем, если вы будете использовать MS Word 97, то сразу можете сохранить результат как HTML страничку, сто существенно облегчает ее создание. Если же у вас 97-го Word'а нет, то вы можете использовать для создании странички встроенный в Netscape Communicator редактор Netscape Composer.
После того, как вы создали текст в редакторе, запустите Composer, создайте новый HTML документ, и вставьте в него через буфер обмена то, что было создано вам в редакторе. Далее, пользуясь аналогичным Word'у меню, отфармотируйте текст, измените размеры , цвет и другие свойства шрифта, вставьте картинки, сделайте ссылки, и страничка уже стала не чем-то неопнятным на бумаге, а достаточно реальным файлом. Осталось положить ее на сервер в Web, и можете зазывать посетителей!
Вот так, собственно, и выглядит создание homepage. Как видите - ничего сложного, этот процесс по плечу даже младенцу. Правда, вы сотворили ее используя подручные средства верхнего уровня, такие как Word, Netscape или какой-либо другой редактор. И, скорее всего, вы по-порежнему пребываете в неведении касательновнутреннего устройства (а ведь любопытно?). А знаете ли вы вообще, что такое HTML, и с чем его кушить?
Ручная работа
Многие создатели страничек не используют редактор верхнего уровня, предпочитая творить HTML код вручную. Для этого они используют либо специализированные редакторы для редактирования HTML файлов, либо самые простые текстовые редакторы вроде Notepad (Блокнот). Но, чтобы писать текст HTML файла вручную необходимо знать основные правила языка.
HTML- это язык гипертекстовых ссылок, проще говоря, это набор некоторых управляющих команд, которые позволяют вставлять в текст графику, создавать ссылки, использовать внешние объекты, и многое-многое другое. Язык HTML был создан для облегчения передачи информации в читабельном и хорошо оформленном виде через Интернет, и стал повсеместным стандартом не только для сети, но и для обычных несетевых приложений, где его применяют в качестве подручного средства для создания справочников, файлов помощи и т.п.
HTML был придуман в 1992-м году, и в настоящее время имеется несколько его версий, самая последняя из которых - 4.0 Из-за того, что ее поддерживают не все браузеры, мы с вами остановимся на более универсальной версии 3.2. Итак, вернемся к нашим барашкам.
Язык HTML являеться структурированным, то есть, все HTML файлы создаются по одной и той же схеме. Приблиительная схема стандартного HTML документа приведена в Приложении 1, взгляните, как появится свободная минутка.
Как любой театр начинаеться с вешалки, так и любой HTML документ начинается с заголовка в виде тэга (tag). Тэг- это обозначенное скобками ключевое слово с параметрами или без оных, который имеет свойство открываться и закрыватсья. Последнее происходит, когда вы откроете скобку, впечатаете ключевое слово второй раз, поставив перед ним обратный слэш (/), и закроете скобку, не вписывая никаких параметров. В принципе, весь HTML документ состоит из перемешанных с текстом тэгов. А посему- исследуем некоторые часто используемые тэги на предмет ознакомления с ними. Дабы не пугаться их ужасного вида при просмотре внутренностей какой либо странички.
Тэг тэга тэгом погоняет
Итак, в любом HTML'е вы можете встретить:
<HTML> - основа основ HTML файла, указывает,
что "от меня до следующего столба" идет сплошной
HTML - код.
<HEAD> - тэг "всему голова" - этот полезный тэг
содержит в себе информацию про HTML файл, его кодировку,
автора, программы, в которой он был создан, а также сведения
о загаловке, который будет отображаться на окне браузера
<TITLE> - тэг, собственно, определяющий текст заголовка окна
брауера.
<BODY> - тэг, который открывает часть фала, где находиться код самой страницы.
"Ближе к телу". Этот тэг не только открывает текст документа,
но и влияет на некоторые параметры отображения самого текста. Это, например,
цвет, которым будут отображаться ссылки, или же цвет заднего плана,
именуемого в народе фоном или бэкграундом. Параметры тэга <BODY> таковы:
bgcolor- определяет цвет заднего плана для всего
документа.
text- опеределяет цвет, которым будет выводиться
текст переднего плана.
link- определяет цвет, которым будут краситься не-
посещённые ссылки.
vlink- определяет цвет, которым будут краситься
посещенные ссылки.
alink- определяет цвет, которым будут краситься
ссылки в момент нажатия на них мышкой.
background- определяет рисунок для заднего плана.
Пример данного тэга:
<body bgcolor=white text=black link=red
vlink=maroon alink=fuchsia>
Хочется обратить особое внимание на необходимость закрывать тэги, потому как очень часто, незакрытый тэг становиться причиной лишней головной боли, влияя на содержимое самым ненужным образом. Теперь перейдем к тэгам, которые обычно живут в "теле" HTML документа.
Чего обычно больше всего на страничке? Парвильно, текста, поэтому существует огромное количество тэгов, связанных с изменением внешнего вида текста. Если вы работали с MS Word, то вам должно быть знакомо понятие "заголовок", означающее степень важности. Чем больше заголовок - тем он важнее. В HTML встроено 6 видов заголовка в виде тэга <h?>, которые наыинаются с <h1> и заканчиваются <h6>. Где <h1> означает самый крупный заголовок, <h6> - самый мелкий. Так как по поределению тэга, у него могут быть параметры (а могут и не быть), обратим внимание на параметр данного тэга, который имеется у него в единственном числе. Параметр, называеться align, он непосредственно влияет на расположение текста в окне браузера, и может принимать значения равные left, right, center, что соответственно означает, что текст, находящийся внутри этого тэга будет выровнен по левому/правому краю, либо по центру. Приведем пример:
<h3 align=center> этот текст будет напечатан в размером заголовка №3...</h3>
С уже существующим текстом на экране можно проделать следующи операции: сделать жирным, наклонным, подчеркнутым, перевести в верхние и нижние индексы, заставить мигать... делаеться это с помощью соответствующих тэгов:
<B> - ужирнение
<I> - наклон (италик)
<SUB> - перевод в нижние индексы
<SUP> - перевод в верхние индексы
<BLINK> - мигание
Для того, чтобы эти тэги сработали, просто поместите текст внутрь них, и "почувствуйте разницу". Не забывайте закрывать тэги, иначе оставшийся текст будет жирным или мигающим.
Пример:
а. Правильное использование
<blink>Этот текст будет мигать</blink>
<b>Это будет жирный текст</b>
б. Неправильное использование
<blink>Этот текст будет мигать</b>
<b>Этобудет жирный текст</blink>
Опираясь на данный пример: если ваш код написан правильно (пример а), то внешне все будет выглядеть прекрасно, если же код написан с ошибкой (пример б), то текст будет мигать, но останеться жирным до следующего закрывающего тэга.
Вам наверняка хотелось бы придать вашей страничке оригинальности путем использования "хитрых" шривтов. Такое возможно при помощи тэга <font>. Этот тэг позволяет имзменить сам шрифт, а также его размер и цвет.
Параметры тэга таковы:
face- указывет имя используемого шрифта. Имя определяеться установленными именами шрифтов.
size- указывает размер шрифта.
color- указывает цвет шрфита
Пример:
<font face="Reznor" size=+3 color=blue>Этот текст будет выведен синим цветом, крупным шрифтом Reznor, рамер шрифта +3 относительно основного шрифта.</font>
Далее на очереди идет тэг <center>, влияющий только на положение текста на экране, а именно, выравнивающий его относительно центра окна браузера.
Пример:
<center> Данный текст будет выведен посередине окна браузера.</center>
Для перевода строки, пользуются тэгом <br>, его действие равнозначно нажатию клавиши Enter в текстовом редакторе. Он не имеет никаких дополнительных параметров, просто вставляеться в текст нужном месте (обычно - в конце строки), и не нуждаеться в закрытии.
Тэг <hr> вставляет разделительную линию на экране, в том месте, где вы укажите. Параметры у <hr> позволяют установить толщину, ширину, размещение и затемненность лини. Параметры выглядят так:
align- определяет вырвнивание линии. Значение по умолчанию - выравниванию по центру. Значение см. выше, в разделе заголовках.
noshade- указывает, что линия будет нарисована без тени.
size- указывает толщину линии.
width- указывает ширину линии относительно окна брауера. Может быть полная (width=:"%100"), может быть и половинная, и любая другая. (width="%37"). Размер также может быть указан в пикселях (width=130).
Пример:
<h3 align=center noshade size=3>
Для вставки в текст изображений (всяческих картинок, например) используется тэг <img>. Параметры у этого тэга следующие:
src- указывает на собственно название файла с картинкой.
alt- определяет описание картинки для текстовых браузеров.
align- выравнивание картинки.
align=top- текст будет находиться как бы над картинкой.
align=middle- текст будет находиться по центру картинки.
align=bottom- текст будет находиться внизу картинки.
align=left- картинка будет находиться слева относительно окна браузера.
align=right- картинка будет находиться справа относительно окна браузера.
width- указывает ширину картинки в пикселях.
Height- указывает на высоту картинки.
border- если картинка являеться частью ссылки, укаывает, использовать ли бордюр для указания ссылки. Значение может равнятся нулю, для обозначения отстутсвие бордюра.
Пример:
<img src="file.jpg" alt="kartinka" widht=104 height=59 border=0>
Для создания ссылок используется тэг <A>. Он указывает куда линкуется определенный элемент данного документа.Параметры:
name- испольуется для обозначения закладки в тексте, и последующего обращения к ней.
href- определяет адрес, куда мы переходим по нажатию на ссылку. Может быть другим документом либо адресом Интернет.
Пример:
<a href="index.html">Возврат домой</a>
Если вы оставите этот тэг открытым, то элементом ссылки будет весь текст вплоть до следующего тэга, что может весьма некрасиво выглядеть на экране. Не забывайте закрывать тэги сразу после описания их действия и параметров.
В качестве нелохой "добавки к пенсии" можно использовать звук на страничке для создания "уникальной домашней атмосфреы". Звук или музыку можно встроить в страничку путем добавления тэгов <embed> и <bgsound>.
Тэг <bgsound> - Exlorer'овский тэг, который позволяет играть музыку в MS Internet Exlorer'е. <embed> - унивверсальный тэг для Netscape'а и Exlorer'а, позволяющий вставлять не только музыку, но и все что имеет возможность вставляться. Например, рисунок Paintbrush, доступный для редактирования, или же анимацию shockwave.
Параметры у <bgsound> таковы:
src- путь к источнику, который является звуковым файлом, стандартным для Windows.
loop- количесвто повторений, если равно "INFINITE", то повторяеться бесконечно.
Тэг <embed> имеет следующие параметры:
autostart- указывает на то, что встраиваемый обьект запустится автоматически.
hidden- указывает, что панель управления (в данном случае музыкальная) будет видна/не видна.
loop- количесвто повторений, если равно "0", то повторяеться бесконечно.
height- определяет размер вставляемого объекта по вертикали (где это возможно).
width- определяет размер вставляемого объекта по горизонтали (где это возможно).
Пример:
<embed src="music.mid" autostart="true" hidden="true" loop="0">
<bgsound src="music.mid" loop="INFINITE">
Примечание: приведенные в примере тэги не стоит применять вмете, поскольку это может вызвать неприятный эффект в Internet Exlorer. Следует использовать тэг <embed>, чтобы музыка играла не только в Internet Exlorer, но и в Netscape.
Личным примером
Вот, вроде бы, и все основные тэги для того, чтобы приступить к созданию своей "ручной" (или руководительной) странички. Но, перде тем как мы займемся ее созданием, хотелось бы сказать несколько слов по поводу визуального оформления. Так уж сложилось, что многие странички часто забиты полезной информацией, лежащей таким образом, что черт ногу сломит. Когда вы будете создавать свою страничку, позаботьтесь об удобной линейке навигации, чтобы передвижение по вашему "дому" было простым и удобным. Очень часто про это забываеться, и о страничке создаеться не очень хорошее впечатление. Так же важно правильно подбирать изображение, которе грузится одновременно с документом, больше 30kb, то это уже не есть хорошо, так как скорость свзяи не у всех хорошая,и кто-то может из-за этого не увидеть что-нибудь важное вовремя. Исходя из этих же соображений стои подбирать и музыкальное сопровождение. Руководствуйтесь, в первую очередь, размеров файла, а потом уже его "классностью".
Итак, ваша "ручная" страничка для начала выглядеть должна примерно так:
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 3.2
Final//EN">
<HTML>
<Head>
<meta http-equiv="Content-type" Content="Text/html;
charset=windows-1251">
<!---это информация о кодовой странице--->
<title>Моя страничка</title>
</head>
<body bgcolor="#ffffff">
<h2 align=center>
<U>
<img src="hdr.jpg" alt="загаловок">
<br>
Моя домашняя страничка
</U>
</h2>
<center>Добро пожаловать на мою страничку!
</center>
<p>
<!---сведения обо мне и моих интересах--->
<hr>
<img src="intr.jpg" alt="мои интересы">
<ul>
<li>Музыка
<li>Ролики
</ul>
<hr>
<img src="links.jpg" alt="ссылки">
<ul>
<li><a href=http://www.yandex.ru>
Русская поисковая машина.</a>
</ul>
<hr>
<center><font size=-2>
Пишите мне:
<a href="mailto:myname@mailhost.org">
<b>Почтовый адрес</b>
</a>.<font>
</center>
</BODY>
</HTML>
Место под солнцем
Хорошо, если страничка у вас получилась небольшого размера, а провайдер выделил вам под нее достаточно места на свое сервере. а если это места не хватает или же его в помине нет? Тогда стоит обратить внимание на бесплатные сервера для размещения homepage'й. Бесплатные сервера дают вам место на жестком диске, и, обычно, имеют быстрый канал для доступа в сеть. Если вам это подходит, и вы решили разместить страничку на одном из них, остаётся найти сервер с наибольши количеством "халявных" мегабайт и хорошим каналом. На мой взгляд, таким сервером является сервер http://www.xoom.com, который выдает 11 мегабайт, странички вида
http://members.xoom.com/ваше_имя/ и располагает достаточно быстрым каналом. Если же вам приспичит выглядеть более солидно, то можно завести свой собственны сервер, что бужет уже совсем не на халяву, поскольку придеться платить за имя и место на винчестере хост-компьютера, чо может влететь в "копеечку".
Также важно помнить, что хоть сервер и халявный, цензура не дремлет. Если на наших серверах она почти не заметна, то на заокеанских серверах из-за этого может затянуться процесс активации странички.
В принципе, лучше таких серверов избегать - они, как правило, тормознутые и жадные, и места дают не больше 3-5 мегов. А вообще-то, постарайтесь не размещать на своей страничке, крайности по отношению к релии, сексу и политике, или же заведите себе, в конце концов, свой сервер, где "будет всё как ты захочеш".
Что делать дальше?
Тот пример домашней страничке, что вы имели удовольствие наблюдать чуть выше в виде исходного кода, вы можете взять за основу полезную информацию, новые ссылки... ксего не перечислишь!
Чтобы дать толчок развитию вашей странички, скажу несколько слов о возможных улучшениях.
Конечно же, нельзя не упомянуть о Java и JavaScript. Java - платформонезависимый язык, а его переделка, JavaScript, была создана специально для использования в HTML - документах, для повышения интерактивности и добавления простейшей анимации, улучшении внешнего вид в целом. Обычно при помощи Java делают анимированные кнопки, реагируещие на курсор мышки, многоступеньчатые меню и удобные навигационные линейки. Язык Java и JavaScript встроен практически во все современные браузеры, поэтому приминение Java на домашней страничке не должно вызывыть каких-либо неудобств у смотрящего. Если речь заходит про анимацию, то нельзя не вспомнить о ShockWave Flash - мировом стандарте web-анимации. Это специально создаваемые файлы, которые интерактивно работают вместе с вашей страничкой, делая ее красивее и удобнее. Благодаря не большому обьему файлов и прекрасному качеству изображения, ShockWave Flash появляется на все большем и большем количестве страниц. Выбор за вами.
Напоследок, полезно заметить, что многие халявные сервера предлагают специальные возможности, как, например, Easy Home Builder. Это специальная программа-помошник, которая позволяет вам в он-лайне, "не вставая с дивана", создать свою страничку, выбирая цветаЮ картинки, звуки, фотографии, вписывая текст, не копаясь при это в исходном тексте, но как правило, такие редакторы не очень и полезны, разве что, для создания основы будущей страницы.
Теперь, когда все пути известны, мне остаеться лишь пожелать удачи 
Дерзайте.
