Использование графики
Вряд ли найдется хоть один сайт, в котором не было бы хотя бы одного графического изображения. Для задания графики используется тег <IMG SRC=" ">, внутри которого указывается высота (HEIGHT=) и ширина (WIDTH=) изображения в пикселах или процентах. Чем меньше изображение, тем быстрее загрузится сайт. Но это не означает, что графика должна быть размерами 1х1 мм. Внутри атрибута SRC указывается имя и путь графического файла, т.е. откуда он берется.
Т.к. зачастую HTML-документы долго загружаются, а графика, содержащаяся в них еще дольше, то применяют атрибут <ALT=" ">, который описывает изображение в процессе закачки.
Браузеры отображают обычные изображения без рамок, а графические ссылки в рамках. Однако и в том и в другом случае можно управлять толщиной рамки при помощи атрибута BORDER=""
<HTML> <HEAD> <TITLE>моя первая страничка</TITLE> </HEAD> <BODY> <P><DIV ALIGN=CENTER> Открытка</DIV> <P><DIV ALIGN=CENTER><IMG SRC="img/mini.gif" WIDTH="120" HEIGHT="171" BORDER="1" ALT="Скучаю без тебя"></DIV> <BODY> <HTML>
Обтекание графики текстом
Обтекание графики текстом задается тегом <IMG ALIGN=>. Текст обтекает графику, пока не достигнет нижнего края изображения. Аргументами служат:
LEFT - обтекание по левому краю
RIGHT - обтекание по правому краю
CENTER - обтекание по центру
Для отмены обтекания и перехода на новую строку служит тег <BR CLEAR=>. В качестве аргумента применяют:
LEFT - начинают новую строку там, где свободно левое поле
RIGHT - начинают новую строку там, где свободно правое поле
ALL - начинают новую строку там, где свободны оба поля
<HTML> <HEAD> <TITLE>моя первая страничка</TITLE> </HEAD> <BODY> <P><IMG SRC="img/mini.gif" WIDTH="60" HEIGHT="60" ALIGN=LEFT> <P>Этот текст обтекает изображение и прерывается здесь..... <BR CLEAR=LEFT>а здесь продолжается </BODY> </HTML>
№19, №20
ССЫЛКИ
В качестве ссылки может служить фрагмент из текста или графическое изображение. Ссылки позволяют перейти от одного документа HTML к другому.
Обычно текстовые ссылки выделяются другим цветом. Тегом ссылки служит тег <A HREF=" ">, в котором указывается путь документа, к которому следует перейти.
<HTML> <HEAD> <TITLE>моя первая страничка</TITLE> </HEAD> <BODY> <P><A HREF="index.html">щелкни здесь</A> </BODY> </HTML>
|
Пример |
|
щелкни здесь |
В данном примере был рассмотрен случай использования ссылки в пределах одного сайта. Если вам необходимо сделать ссылку на другой сайт, то в этом случае в атрибуте HREF=" " укажите полный адрес того документа, на который вы ссылаетесь. Например:
Любая информация на<A HREF="http://www.poisk.ru">POISK.RU</A>
Чтобы сделать графическую ссылку, следует набрать тот же код, что и для текстовой ссылки, за исключением того, что вместо текста указыватся графическое изображение.
<HTML> <HEAD> <TITLE>моя первая страничка</TITLE> </HEAD> <BODY> <P><A HREF="index.html"><IMG SRC="img/mini.gif" WIDTH="88" HEIGHT="31"></A> </BODY> </HTML>
Текстовые и графические ссылки могут указывать и на другие разделы в пределах одного документа. Такие ссылки требуют наличия двух частей: якоря и самой ссылки. Якорь определяет место, к которому происходит переход по ссылке. Ссылка использует имя якоря вместо имени файла.
Ссылка: <A HREF="# "> </A> Якорь: <A NAME=" "> </A>
<HTML> <HEAD> <TITLE>моя первая страничка</TITLE> </HEAD> <BODY> <P><A HREF="#first.htm">в начало документа</A> </BODY> </HTML>
|
Пример |
|
в начало документа |
для проверки работы ссылки нажмитесюда
Не забудьте указать и якорь, в данном примере он расположен в начале документа: <A HREF="first.htm">ОСНОВЫ HTML</A>
Формат записи адреса, с которым вы хотитие связаться, использует URL-адрес и выглядит следующим образом: <A HREF="mailto: olga@ic.ac.kharkov.ua">напишите мне</A>
чтобы проверитьнапишите мне.
№ 16
Тег <TABLE>
Тег <TABLE>создает таблицу. Все прочие элементы таблицы должны быть вложенными в него. Допускается также вложение таблиц одна в другую, т.е. содержимым ячейки может быть другая таблица. Закрывающий тег обязателен
Атрибуты
align
Выравнивание таблицы относительно документа. Возможные значения: center, left, right
background
Строка, определяющая рисунок для заднего фона
bgcolor
Определяет задний фон таблицы
border
Толщина рамки в пикселах. Если атрибут не указан, то таблица выводится без видимой рамки
bordercolor
Цвет рамки
cellspacing
Задает расстояние между ячейками таблицы
cellpadding
Задает расстояние между содержимым ячейки и ее рамкой
rules
Описывает рамки вокруг таблицы. Может принимать следующие значения
-
all
Отображает все части рамки внутри таблицы
cols
Отображает все вертикальные рамки внутри таблицы
groups
Отображает горизонтальные части рамки между группами таблицы THEAD, TBODY, TFOOT
none
Удаляет все рамки вокруг таблицы
rows
Отображает все горизонтальные рамки внутри таблицы
summary
Описание таблицы для удобства людей, использующих браузеры, поддерживающие азбуку Бройля или речевой вывод
title
Всплывающая подсказка
width
Ширина таблицы в процентах или пикселах
Пример
Пример простой таблицы
-
Заголовок столбца 1
Заголовок столбца 2
Ячейка столбца 1, ряд 1
йка столбца 2, ряд 1
Ячейка столбца 1, ряд 2
Ячейка столбца 2, ряд 2
Код для таблицы
<TABLE BORDER=2 COLS=2 BGCOLOR=yellow align=center>
<TR>
<TH>Заголовок столбца 1</TH><TH>Заголовок столбца 2</TH>
</TR>
<TR>
<TD>Ячейка столбца 1, ряд 1</TD><TD>Ячейка столбца 2, ряд 1</TD>
</TR>
<TR>
<TD>Ячейка столбца 1, ряд 2</TD><TD>Ячейка столбца 2, ряд 2</TD>
</TR>
</TABLE>
№10
Тег BODY
Тег <BODY>определяет видимую часть документа.В этом разделе располагается вся содержательная часть документа (текст статьи, фотографии, формы для заполнения, другие объекты).Тег имеет ряд необязательных атрибутов. Рекомендуется вместо нежелательных атрибутов использовать каскадные таблицы стилей. Начальный и конечный теги необязательны
Атрибуты
bgcolor
Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет, либо используя константы цвета, например для желтого цвета, используемой на данной странице<body bgcolor= "yellow">
background
Нежелательный. Указывает на url-адрес изображения - фона документа
contentEditable
Возможность редактирования
innerText
Текст между начальным и закрывающим тегом
offsetWidth
Размер объекта
text
Нежелательный. Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB - пример: 000000 - черный цвет, либо используя константы цвета, например для зеленого цвета, используемой на данной странице <body text= "green">
link
Нежелательный. Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB - пример: 00FF00 - зеленый цвет,либо используя константы цвета,например для красного цвета,используемой на данной странице <body link= "red">
vlink=
Нежелательный. Устанавливает цвет гиперссылок на которых вы уже побывали, используя значение цвета в виде RRGGBB - пример: 333333 - серый цвет
alink=
Нежелательный. Устанавливает цвет гиперссылок при нажатии. Например, на этой странице ссылки становятся синими при нажатии мышкой
bgproperties=fixed
Фоновое изображение прокручиваться не будет. Т.е. текст будет двигаться при нажатии PageDown, а фон - нет. Данный параметр поддерживается только Internet Explorer
Эти параметры можно объединять, например <BODY bgcolor="yellow" text="green" link="red" alink="blue">
№12