Главная » Мастерская » Статьи » УЧЕБНИК (HTML Уроки)

Учебник по HTML (HTML Уроки) - Урок 3

Начнем изучение способов работы браузера.
Сначала примеры ...

<BODY BGCOLOR="#FFFFFF">
Something really cool
like an icecube!
<BODY>

Something really cool like an icecube!

<BODY BGCOLOR="#FFFFFF">
Hey!
What's
going
on
here??
<BODY>

Hey! What's going on here??

Браузер не распознает форматирование. Если Вы не сообщаете ему иначе, он только отображает символы в устойчивом потоке. Если Вы хотите начать новую строку, Вы должны использовать прерывание строки.

<BODY BGCOLOR="#FFFFFF">
Hey!<BR>
What's<BR>
going<BR>
on<BR>
here??
<BODY>

Hey!
What's
going
on
here??


Метка <BR> просто говорит начни новую строку. Метка <BR> подобна <P>. Она делает точно то же самое, но она разрывает строку.

<BODY BGCOLOR="#FFFFFF">
Hey!<P>
What's<P>
going<P>
on<P>
here??
<BODY>

Hey!

What's

going

on

here??


Это примеры автономных меток. Не требуется конечная метка. Вы не можете использовать их больше чем одну раз подряд. Другими словами, определение <P><P><P> не даст Вам 3 пустых строки, а даст Вам только одну. Как можно добавить несколько пустых строк? Мы сообщим Вам через минуту.

Просмотрите это во первых...

<BODY BGCOLOR="#FFFFFF">
Something        really        cool
<BODY>

Something really cool

Браузер не распознает больше чем 1 пробел. Сначала это могло бы все казаться довольно глупым, чтобы быть способом, но действительно, лучше иметь такой способ. Это дает Вам абсолютный контроль над видом документа.

Имеется изящный небольшой код, который означает для браузера <пробел> -> &nbsp;

Испытайте его...

<BODY BGCOLOR="#FFFFFF">
Something&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
really&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
cool
<BODY>

Something        really        cool

Символ & означает, что мы начинаем специальный символ, ; означает конец специального символа и литеры между ними составляют абревиатуру предназначения. Имеются шесть таких специальных символов. (Обратите внимание: они должны быть всегда строчными буквами)

  • &nbsp; ( неразрывающийся пробел)
  • &lt; (< символ меньше чем)
  • &gt; (> символ больше чем)
  • &amp; (& амперсанд)
  • &quot; (" маркер кавычек)
  • &shy; (- мягкий дефис)

Вы не должны использовать их все время, только когда набор реального символа может запутать браузер. Как узнать, когда это необходимо делать? Нет твердого и быстрого 'правила'. Это придет только с практикой и повторениями.

Между прочим, несколько мыслей об ошибках и повторах. Есть люди, которые считают, что ошибки это плохо. Они боятся пробовать что - нибудь новое из за опасения неприятностей. Повторение одной и той же ошибки может немного расстроить, но во время обучения они полезны. Ошибки - наши друзья.

Есть другие специальные символы . Едва ли Вы будете когда-либо использовать их, но Вы должны их знать.

Браузер будет отображать ваш текст в устойчивом потоке, если Вы не сообщите ему другое о прерываниях строки и т.д. Он уменьшит любые пустые области до 1 пробела. Если Вы хотите большее количество пробелов, Вы должны использовать код пробела (&nbsp;). Если Вы нажимаете Return (или Enter) во время набора, браузер интерпретирует это как пробел ..., если там уже нет пробела.

Еще один быстрый пример.

<BODY BGCOLOR="#FFFFFF">
Something<BR>really<BR>cool<BR>
like<BR>an<BR>icecube!
<BODY>

Something
really
cool
like
an
icecube!

Довольно чисто?

Затем очень полезная небольшая метка. Она сама довольно хорошо объясняет.

<BODY BGCOLOR="#FFFFFF">
<CENTER>Something really cool</CENTER>
<BODY>

Something really cool

Вы можете центрировать одно слово или страницу полностью. Все что расположено между метками <CENTER> центрируется.

Как сделать многократные пустые строки? Это действительно просто. Делайте прерывание строки для каждой пустой строки.

<BODY BGCOLOR="#FFFFFF">
Something really<BR>
&nbsp;<BR>
&nbsp;<BR>
&nbsp;<BR>
&nbsp;<BR>
&nbsp;<BR>
cool
<BODY>

Something really
 
 
 
 
 
cool

Давайте введем изображение в web страницу. Мы собираемся использовать рисунок приведенный ниже. Еще раз, щелкните правой кнопкой мыши, чтобы сохранить его с этой страницы или копировать его из папки pics..

copper

Вы определяете изображение меткой <IMG> (image).

<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.doxx.tr.dn.ua/manuals/html/pics/copper.gif

Вы cпросите, почему использование относительного URL имеет намного больше смысла, чем абсолютного (полного) URL? Потому что Вы можете формировать ваш узел локально и все связи будут работать. Когда ваши страницы завершены, Вы передаете целый набор на ваш сервер и все прекрасно будет работать. Кроме того, это проще для браузера, чтобы получить изображения, и ваша страница загрузится быстрее. Имеется ли какая-либо причина использовать абсолютный URL? Несомненно, если изображение постоянно сохраняется на другом сервере.

Кое-что Вы должны знать об изображениях и их размерах.

Испытайте это...

<BODY BGCOLOR="#FFFFFF">
<IMG SRC="copper.gif">
<BODY>

Как Вы можете видеть, браузер выясняет насколько большое изображение сам. Почему тогда нужно беспокоиться о размерах? Без вхождения в детали, это заставляет вашу страницу загружаться быстрее, потому что это проще для браузера..

Отметьте размеры снаружи...

<BODY BGCOLOR="#FFFFFF">
<IMG SRC="copper.gif" WIDTH=200 HEIGHT=68>
<BODY>

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

Вы можете определять любые размеры, которые Вы хотите и отменять соответствующие размеры. Рассмотрите эту небольшую красную точку -> <-. Это квадрат 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>

Здорово?

[назад] [дальше]


Copyright ByWeb©
Hosted by uCoz