Web-страница, демонстрирующая возможности вставки и форматирования текста и, вставки в текст изображений

 

Вставить в начале страницы картинку. 

 

<P ALIGN="center"><IMG SRC=" путь к вашей папке \ имя файла рисунка .jpg"

HEIGHT="240" ALT=" название "></P>

 

Атрибут ALIGN выравнивает текст по верхнему краю, середине или нижнему краю изображения, справа или слева от него с помощью значений:

top, bottom, middle, left или right

 

Для того, чтобы текст располагался весь рядом с картинкой используем тэги с параметрами. У некоторых тэгов есть параметры (атрибуты), параметр может задаваться один, а может их быть несколько. Например у тэга <p> -

 

<p align="justify">.

 

Параметр align есть и у картинок: 

 

< img src="pr1.png" align="left">

 

Это означает, что картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа. 

Чтобы сделать наоборот (картинка справа, текст слева) надо прописать right:  

 

<img src="pr1.png" align="right">  

 

Но это не все.

Текст может располагаться 

- внизу картинки (это по умолчанию) - (1),

- посередине - (2), 

- вверху - (3): 

 

(1) - <img src="pr1.png" align="bottom">

(2) - <img src="pr1.png" align="middle">

(3) - <img src="pr1.png" align="top">

 

Кроме параметра align существует еще несколько параметров: 

(1) - <img src="pr1.png" Vspace="10">

(2) - <img src="pr1.png" Hspace="30">

(3) - <img src="pr1.png" alt=" моя фотография ">

(4) - <img src="pr1.png" width="100">

(5) - <img src="pr1.png" height="200">

(6) (6) - <img src="pr1.png" border="5">  

где:

(1) - параметр vspace - задает расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях (pixel - минимальная единица изображения, точка. Например, разрешение экрана 800х600 - 800 на 600 точек). В нашем примере расстояние равно 10 пикселям. 

(2) - параметр hspace - тоже задает расстояние между текстом и рисунком, но по горизонтали. Расстояние задается в пикселях. В нашем примере оно равно 30 пикселям (точкам). 

(3) - параметр alt - краткое описание картинки. Если навести курсором мыши на рисунок, и так подержать его (курсор) несколько секунд выскочит описание картинки. В нашем случае это будет фраза - "моя фотография". Если параметр alt не задавать, описания не будет. Но умные люди говорят, что описание картинкам задавать следует (особенно, если это кнопки), т.к. есть особенные люди, которые бродят по интернету с отключенной графикой. Без alt им не будет видно на что жать, т.к. картинка не отображается, а при заданном alt, можно увидеть надпись, для чего она (картинка) предназначалась. 

 

(4) - параметр width - ширина самой картинки (в пикселях). Если ширину не задавать специально, то по умолчанию она будет равна реальной ширине картинки (а так вы можете ее сделать или уже или шире). 

 

(5) - параметр height - высота самой картинки (тоже в пикселях). Так же как в случае с width высоту (height) картинки можно и не задавать. Правда, умные люди говорят, что размеры картинок следует задавать, для тех же особенных людей с отключенной графикой... 

 

(6) - параметр border - рамка вокруг самой картинки (в пикселях). Можно не задавать. Все параметры могут употребляться одновременно друг с другом, чтобы избежать путаницы продемонстрирую наглядно на нашей страничке. Введем следущие параметр для нашей картинки: 

 

<img src="pr1.png" align="left" HSPACE=30 VSPACE=5 alt="персональный компьютер">

Наша картинка будет прижата к левому краю экрана, текст будет обтекать ее справа, расстояние до текста по горизонтали - 30 пикселей, по вертикали - 5 пикселей (чтобы красиво все смотрелось), и если вы наведете на картинку курсор, то выскочит надпись – «персональный компьютер».

 

Создание и форматирование таблиц

При создании сайтов таблицы используются очень часто. Таблица задается тэгом: <table></table>

 

Основные тэги таблицы

 

Таблица: <TABLE>...</TABLE>

Это основные тэги, описывающие таблицу. Все элементы таблицы должны находиться внутри этих двух тэгов. По умолчанию таблица не имеет обрамления и разделителей. Обрамление добавляется атрибутом BORDER. 

     

Строка таблицы: <TR>...</TR>

Количество строк таблицы определяется количеством встречающихся пар тэгов <TR>..</TR>. Строки могут иметь атрибуты ALIGN и VALIGN, которые описывают визуальное положение содержимого строк в таблице. 

 

 

Ячейка таблицы: <TD>...</TD>

Описывает стандартную ячейку таблицы. Ячейка таблицы может быть описана только внутри строки таблицы. Каждая ячейка должна быть пронумерована номером колонки, для которой она описывается. Если в строке отсутствует одна или несколько ячеек для некоторых колонок, то браузер отображает пустую ячейку.

 

Расположение данных в ячейке по умолчанию определяется атрибутами ALIGN=left и Данное расположение может быть исправлено как на уровне описания строки, так и на уровне описания ячейки. 

 

Заголовок таблицы: <TH>...</TH>

Ячейка заголовка таблицы имеет ширину всей таблицы; текст в данной ячейке имеет атрибут BOLD и ALIGN=center.  

 

Подпись: <CAPTION>...</CAPTION>

Данный тэг описывает название таблицы (подпись). Тэг <CAPTION> должен присутствовать внутри <TABLE>...</TABLE>, но снаружи описания какой-либо строки или ячейки. По умолчанию <CAPTION> имеет атрибут ALIGN=top, но может быть явно установлен в ALIGN=bottom. ALIGN определяет, где - сверху или снизу таблицы - будет поставлена подпись. Подпись всегда центрирована в рамках ширины таблицы. 

 

Основные атрибуты таблицы

 

BORDER

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

 

ALIGN

Если атрибут ALIGN присутствует внутри тэгов < CAPTION> и </CAPTION >, то он определяет положение подписи для таблицы (сверху или снизу). По умолчанию ALIGN=top.  

Если атрибут ALIGN встречается внутри <TR>, <TH> или <TD>, он управляет положением данных в ячейках по горизонтали. Может принимать значения left (слева), right (справа) или center (по центру).

 

VALIGN

Данный атрибут встречается внутри тэгов <TR>, <TH> и <TD>. Он определяет вертикальное размещение данных в ячейках. Может принимать значения 

top (вверху), bottom (внизу), middle (по середине) и baseline (все ячейки строки

прижаты кверху).

 

COLSPAN

Указывает, какое количество ячеек будет объединено по горизонтали для указанной ячейки. По умолчанию - 1. 

 

ROWSPAN 

Указывает, какое количество ячеек будет объединено по вертикали для указанной ячейки. По умолчанию - 1. 

 

COLSPEC

Данный параметр позволяет задавать фиксированную ширину колонок либо в символах, либо в процентах, например COLSPEC="20%".  

 

Таблица создается с помощью тега <Table>.