Курс лекций по Информатике 2 (стр. 1 из 7)

1. ПОСТРОЕНИЕ

<HTML>

<HEAD>

<TITLE>Название страницы</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

2. Выделение текста - физические и логические стили.

Физические стили.(единые)

<B> - жирный шрифт;

<I> - курсив;

<TT> - шрифт фиксированной ширины (как на пишущей машинке);

<U> - подчеркнутый текст;

<STRIKE> - перечеркнутый шрифт;

<S> - тоже перечеркнутый шрифт;

<BIG> - шрифт большего размера;

<SMALL> - шрифт меньшего размера.

Логические стили.(каждый браузер по-разному)

<DFN> - служит для описания определений (это определение);

<EM> - служит для выделения текста (это выделенное слово);

<CITE> - служит для выделения цитат (это цитата);

<CODE> - служит для выделения программных кодов. Обычно выделяется шрифтом фиксированной ширины (это текст программы);

<KBD> - используется для ввода с клавиатуры пользователя (Введите password );

<SAMP> - используется для вывода машинных сообщений (Segmentation fault: core dumped);

<STRONG> - служит для особого выделения текста, обычно выделяется жирным текстом (это очень важный текст);

<VAR> - используется для символьных переменных (это переменная);

<ABBR> - используется для аббревиатур (СНГ, КПСС, WWW);

<ACRONYM> - используется для сокращений (стр., англ.).

3. Форматирование текста.

Отличаются заголовки от текста и между собой толщиной и высотой букв, в заголовке <H1> самые крупные символы. Тэги <H1>..</H1>, <H2>..</H2>, ... , <H6>..</H6>.

<P>Абзатц. При просмотре браузером абзацы отделяются друг от друга пустой строкой.

<P>Этот абзац расположен слева<P>

<P ALIGN=CENTER>Этот абзац по центру</P>

<P ALIGN=RIGHT>А вот этот абзац справа</P>

Аналогично форматируются и заголовки: <H1 ALIGN=RIGHT>..</H1> и т.д.

<BR>пропуск строки

<HR> описывает горизонтальную линию. Может включать аттрибуты:

SIZE - толщина линии в пикселах;

WIDTH - длина линии в пикселах или процентах от ширины экрана;

ALIGN - выравнивание линии, может принимать значения LEFT, CENTER, RIGHT;

COLOR - цвет линии;

NOSHADE - линия рисуется без тени.

Пример использования тэгов <BR> и <HR>:

----------------------------------------------------------------------------------------------

Метки <BLOCKQUOTE></BLOCKQUOTE> добавляют к выделенному ими тексту со всех четырех сторон поля (сверху и снизу - по пустой строке, слева и справа - шириной в 5 знаков). Пример - этот абзац.

Еще один способ форматирования текста - использование меток <PRE>..</PRE> (prefomatted text - предварительно форматированный текст). Обычно браузеры игнорируют множественные пробелы и символы конца строки. Однако с использованием тега <PRE> текст выводится в окне браузера точно в том виде, как он есть в исходном HTML-документе.

Пример. В тексте:

<PRE>

Чтобы стихотворение красиво

смотрелось в окне браузера,

вовсе необязательно использовать

тэг <BR>!

</PRE>

В окне браузера:

Чтобы стихотворение красиво

смотрелось в окне браузера,

вовсе необязательно использовать

тэг <BR>!

Урок 4

Тема: ссылки.

Ссылки - инструмент, позволяющий связывать между собой различные документы. Браузер обычно выделяет ссылку цветом и/или подчеркиванием. Описывается ссылка следующим образом:

<A HREF="путь/имя файла">Ссылка на документ</A>

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

Различают относительные и абсолютные ссылки. Примеры относительной ссылки:

<A HREF="filename.htm"> - на документ "filename.htm", находящийся в одном каталоге с текущим документом;

<A HREF="./filename.htm"> - в точности то же самое;

<A HREF="folder/filename.htm"> - переход на файл "filename.htm" в подкаталоге "folder" текущего каталога;

<A HREF="../folder/filename.htm"> - подняться вверх на один шаг по дереву каталогов, перейти в каталог "folder" и осуществить переход на "filename.htm".

В абсолютной ссылке указывается полный путь к файлу:

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

Можно делать ссылки внутри документа. Это удобно для перехода к разным главам одной большой статьи. Для этого необходимо создать некую опорную точку - анкер (anchor - якорь,англ.), на которую и будет происходить переход. Разберем это на примере. Допустим, нам надо перейти на начало этого урока. Для чего создадим такой анкер:

<A NAME=lesson4>Ссылки</A>

При этом слово "Ссылки" в тексте никак выделяться не будет. Теперь в тексте можем делать ссылку на анкер (и не один раз). Например, так:

Нажмите <A HREF="#lesson4">здесь</A> для возврата к началу урока

И получите:

Нажмите здесь для возврата к началу урока

Можете нажать - пример работает! К этому анкеру можно перейти и из другого файла (например, чтобы сделать ссылку к конкретному уроку 4, а не урокам HTML вообще). Тогда ссылка будет выглядеть так:

До сих пор мы рассматривали ссылки на HTML-документы. Однако возможны ссылки и на другие виды ресурсов:

Такая ссылка запустит протокол передачи файлов и произведет выгрузку файла "file.ext" из директории "directory" сервера "servername" на жесткий диск пользователя (download).

Еще один вид ссылки - ссылка на почтовый ящик. Выглядит в тексте:

Пишите письма <A HREF="mailto:Has5@mail.ru">автору</A>

В окне браузера:

Пишите письма автору

А это то же самое (ссылка на почтовый ящик), но с использованием аттрибута TITLE. В тексте:

Пишите письма <A HREF="mailto:Has5@mail.ru" TITLE="Ссылка на почтовый ящик Администратора сайта">автору</A>

В окне браузера:

Пишите письма автору

Попробуйте навести курсор на "автора".

Внимание! Браузеры чувствительны к регистру ссылок. Если вы вместо "http://webs.web.com" наберете "http://webs.Web.com", то получите нерабочую ссылку. Та же ситуация и с расширениями: если у вас ссылка на файл "index.htm", а там находится "index.html", то результат тот же - нерабочая ссылка.

Тема: рисунки.

В свою страничку можно вставить рисунок. Для этого нужен сам рисунок - обычно используют изображения в формате GIF (файлы с расширениями .gif) и JPEG (файлы с расширениями .jpg и .jpeg) и строчка HTML-тексте, указывающая браузеру, где этот рисунок находится:

<IMG SRC="picture.gif"> - рисунок "picture.gif" находится в том же каталоге, что и текущий документ;

<IMG SRC="images/picture.gif"> - перейти в подкаталог "images" текущего каталога и взять файл оттуда;

<IMG SRC="../images/picture.gif"> - подняться вверх на один шаг, перейти в каталог "images" и взять рисунок оттуда;

<IMG SRC="http://www.fortunecity.com/business/fax/339/artics/practic/myphoto.gif"> - указание полного пути к файлу. Обычно применяется, если рисунок находится на другом сервере, или используется картинка с другого сайта.

У данного тэга могут быть следующие аттрибуты:

ALT="какой-то текст" - альтернативный текст. Текст, который появляется вместо картинок при просмотре странички браузером с отключенной автоматической загрузкой изображений (отключают многие - для экономии времени на медленных линиях связи).

BORDER="n" - рамка вокруг рисунка, где n - ее толщина в пикселах. При n="0" рамка не рисуется.

WIDTH="n" - задается ширина изображения в пикселах или в процентах от ширины экрана браузера (тогда после n следует знак %).

HEIGHT="n" - высота изображения в пикселах или в процентах от высоты экрана.

HSPACE="n" - отступ слева и справа от картинки шириной в n пикселов (т.е. свободное пространство между рисунком и текстом или чем-то иным).

VSPACE="n" - вертикальный отступ от картинки в пикселах.

ALIGN=CENTER - по умолчанию сопровождающий текст выравнивается по нижнему краю рисунка. Применяя аттрибут ALIGN можно выравнивать текст по верхнему краю (TOP) или по центру рисунка ( CENTER или MIDDLE). Чтобы текст обтекал рисунок, используется значение аттрибута LEFT или RIGHT, рисунок прижимается соответственно к левому или правому краю экрана.

Значения n перечисленных выше аттрибутов по умолчанию равны нулю.

Рисунок может быть ссылкой. Для этого <IMG SRC="..."> разместите между тэгами <A HREF="..."> и </A>. Вокруг рисунка появится рамка, показывающая, что он является ссылкой. Если рамка портит внешний вид документа, то укажите в аттрибутах рисунка BORDER="0".

Урок 6

Тема: цвет фона и текста, шрифты.

Цвет фона определяется значением аттрибута BGCOLOR - шестнадцатиричным числом вида #hhhhhh, где первая пара символов является значением насыщенности для красного цвета, вторая - для зеленого, и третья пара - для синего цвета. #00 - минимальная насыщенность, #FF - максимальная насыщенность цвета. Можно использовать текстовое определение цвета: BLUE, RED, FUCHSIA и т.п - одно из шестнадцати допустимых значений.

BLACK #000000 GREEN #008000

SILVER #C0C0C0 LIME #00FF00

GRAY #808080 OLIVE #808000

WHITE #FFFFFF YELLOW #FFFF00

MAROON #800000 NAVY #000080

RED #FF0000 BLUE #0000FF

PURPLE #800080 TEAL #008080

FUCHSIA #FF00FF AQUA #00FFFF

Например, чтобы сделать цвет фона страницы фиолетовым, можно написать

<BODY BGCOLOR="#FF00FF">, а можно и так:

<BODY BGCOLOR="PURPLE">.

Строго говоря, текстовых значений цвета значительно больше (SCARLET, VIOLET, BROWN и т.д. и т.п.), но не все браузеры их "знают". Применимы также значения LIGHTGREEN (светлозеленый), LIGHTYELLOW (светложелтый) и LIGHTBLUE (светлосиний).

Фоном может служить и какое-то изображение. При этом заданная область заполняется множественными копиями этого изображения (как кафельной плиткой). Для этого используется аттрибут BACKGROUND с указанием пути к рисунку. Например

Аттрибуты BGCOLOR и BACKGROUND могут находиться внутри метки <BODY>, тогда цвет фона устанавливается для всей страницы, либо в метках <TABLE>, <TR> и <TD> - устанавливается цвет фона во всей таблице, ее строке и ее ячейке соответсвенно (таблицы - тема следующего урока).