Итак, вы хотите создать Web-страничку!

Итак, вы хотите создать Web-страничку!
Урок 3

Мы начнем с того, что рассмотрим, как именно работает браузер.
Для начала - пример.
<BODY BGCOLOR="#FFFFFF"> Что-нибудь очень забавное! </BODY>

Что-нибудь очень забавное!
<BODY BGCOLOR="#FFFFFF"> Эй! Что здесь происходит??? </BODY>

Эй! Что здесь происходит???
Браузер не понимает форматирование. Пока вы ему не дадите прямого указания, он будет выводить символы в одну строку. Если вы хотите начать новую строку - вы должны поставить разрыв строки.
<BODY BGCOLOR="#FFFFFF"> Эй! Что здесь происходит??? </BODY>

Эй!
Что
здесь
происходит??

Тег   означает переход на новую строку. Подобную to   работу выполняет и тег . Он делает тоже самое, но после разрыва он пропускает еще одну строчку.
<BODY BGCOLOR="#FFFFFF"> Эй! Что здесь происходит??? </BODY>

Эй!
Что
здесь
происходит???

Это - примеры одиночных тегов. Они не требуют закрывающего тега. У этих тегов есть еще одна особенность - вы не можете использовать их более одного раза. Другими словами, использование  даст вам не 3 пустых строчки, а всего лишь 1. Тогда как же получить несколько пустых строчек?
Во-первых, посмотрите на это:
<BODY BGCOLOR="#FFFFFF"> Что-нибудь очень забавное! </BODY>

Что-нибудь очень забавное!
Браузер не распознает более 1 пробела. Наверное, это может показаться довольно глупым, но на самом деле лучше, чтобы это было так. Это дает вам абсолютный контроль над видом документа.
Существует специальное обозначение, которое обозначает "пробел" для браузера ->  
Попробуйте это:
<BODY BGCOLOR="#FFFFFF"> Что-нибудь         очень         забавное </BODY>

Что-нибудь очень забавное
Амперсент & означает, что мы печатаем специальный символ, точка с запятой ; означает окончание специального символа, а буквы между ними - это обозначение этого специального символа. Всего специальных символов 6. (Обратите внимание, все они пишутся только прописными буквами.)

  ( пробел)
< (< меньше)
> (> больше)
& (& амперсент)
" (" кавычка)
 ( мягкий перенос)
Вам не нужно использовать их постоянно, а только в том случае, когда вы печатаете символ, который может не понять браузер. Как вы об этом узнаете? Твердого абсолютного правила на этот счет, пожалуй, не существует. Понимание приходит с опытом. И не бойтесь делать ошибки - вы ничего не испортите; просто браузер вас может не понять, или понять неправильно. Ну и что? Это же легко исправить!
Здесь можно посмотреть другие специальные символы. Возможно, вы никогда не будете ими пользоватья, но даже просто знать о том, что они есть - само по себе не плохо.
Давайте обратим внимание еще на несколько моментов. Браузер отображает текст последовательно и непрерывно, если не оговорена разбивка текста на абзацы. Вместо нескольких подряд идущих пробулов будет отображен только один. Если необходимо напечатать несколько пробелов - необходимо использовать их коды: ( ). Если вы нажмете Return (или Enter), когда будете печатать текст, браузер будет интерпретировать его как пробел... Но только в случае, если там нет настоящего пробела.
Рассмотрим еще один пример.
<BODY BGCOLOR="#FFFFFF"> Что- нибудь очень забавное! </BODY>

Что-
нибудь
очень
забавное!
Достаточно красноречиво?? Пожалуй, да.

Еще один очень полезный тег. Здесь тоже все довольно ясно.
<BODY BGCOLOR="#FFFFFF"> <CENTER>Что-нибудь очень забавное</CENTER> </BODY>

Что-нибудь очень забавное
Можно выроврять по центру странице как одно слово, так и всю страницу целиком - все, что находится между тегами <CENTER> будет располагаться по центру.

Давайте научимся делать несколько пустых строчек подряд. Это действительно просто. Можно сделать любое необходимое количество пустых строчек, идущих подряд.
<BODY BGCOLOR="#FFFFFF"> Что-нибудь           очень забавное </BODY>

Что-нибудь

очень забавное

Давайте теперь научимся вставлять картинки в нашу страничку. Нам будет достаточно одной картинки. Скопируйте ее из папки, либо сохраните на локальном диске непосредственно из браузера.

Картинка определяется с помощью тега <IMG>.
<BODY BGCOLOR="#FFFFFF"> <IMG> </BODY>

Необходимо указать саму картинку и ее размер.
<BODY BGCOLOR="#FFFFFF"> <IMG SRC="copper.gif" WIDTH=82 HEIGHT=68> </BODY>

Обратите внимание на то, что мы не только указываем саму картинку, мы также указываем, где она находится. Запись "copper.gif", означает, чт обраузер будет искать рисунок под названием copper.gif в той же самой директории (или папке), где расположен html-документ.

SRC="copper.gif" означает, что картинка расположена в той же директории, что и использующий ее html-документ.

SRC="images/copper.gif" означает, что картинка расположена в поддиректории относительно директории использующего ее html-документа. Возможно использование любого числа вложенных директорий.

SRC="../copper.gif" означает, что картинка расположена в той же директории, что и поддиректория использующего ее html-документа.

SRC="../../copper.gif" означает, что картинка расположена на две директории выше использующего ее html-документа.

SRC="../images/copper.gif" означает, что картинка расположена поддиректории той же директории, что и поддиректория использующего ее html-документа.

SRC="../../../other/images/copper.gif" ...возможно очень большое число вариантов.

Существует еще один способ задать путь к рисунку - при помощи полного пути (все рисунки имеют свой собственный URL). Например: http://www.hair.net/~squiggie/LottzaStuff/other/images/copper.gif
Возникает вопрос - почему гораздо удобнее и правильнее использовать относительные адреса вместо абсолютных адресов?? Потому что ваша страничка расположена локально, а все ссылки должны работать. Когда создание страничек завершено, необходимо всего лишь скопировать все файлы на сервер ,и все будет замечательно работать. К тому же, в этом случае загрузка страничек будет происходить быстрее. Если же рисунки расположены на другом сервере, имеет смысл использовать абсолютные адреса.
Необходимо знать еще одну вещь о рисунках и их размере.
Рассмотрим пример:
<BODY BGCOLOR="#FFFFFF"> <IMG SRC="copper.gif"> </BODY>

Как вы видитеe, браузер может и сам определить размеры картинки. Но если задать их явно, загрузка картинки будет осуществляться быстрее.
<BODY BGCOLOR="#FFFFFF"> <IMG SRC="copper.gif" WIDTH=200 HEIGHT=68> </BODY>

<BODY BGCOLOR="#FFFFFF"> <IMG SRC="copper.gif" WIDTH=20 HEIGHT=100> </BODY>

Можно указать любые размеры, и картинка будет масштабирована браузером. Но не нужно этим злоупотреблять. Изменение размера картинки даже на 1 пиксел делает загрузку рисунка дольше. Поэтому лучше измените размер картинки в графическом редакторе, если в этом есть необходимость. Еще один "фокус": посмотрите на маленький красный квадратик-> <-. Он имеет размер 2x2. Посмотрите, что с ним можно сделать:
<BODY BGCOLOR="#FFFFFF"> <IMG SRC="red_dot.gif" WIDTH=510 HEIGHT=1> <IMG SRC="red_dot.gif" WIDTH=510 HEIGHT=2> <IMG SRC="red_dot.gif" WIDTH=510 HEIGHT=5> <CENTER><IMG SRC="red_dot.gif" WIDTH=2 HEIGHT=200></CENTER> </BODY>

<--Назад Дальше-->

Урок 3