Добро пожаловать!

Как сделать презентацию
для ловади HTML.

Доброе время суток!
Меня зовут Олег. Я опишу как самостоятельно можно сделать HTML код для своей презентации в ловади без установки дополнительных программ на свой компьютер!

Делаем презентацию для ловади HTML.

Для начала нужно выбрать изображение, которое будет основным фоном презентации. Можно выбрать изображение здесь, или здесь. Отредактировать в фотошопе (Делаем презентацию в фотошопе.), или в другом графическом редакторе и сохранить в нужном (размер вашей презентации) размере.
Наведите курсор на пример ниже.

пример:

Затем загрузить на радикал, или любой подобный хостинг. Это делается для того, что бы получить ссылку на изображение. Затем создаём таблицу и делаем изображение основным фоном. Главное помните, что ссылка на изображение будет действовать до тех пор - пока изображение находится на том месте, с какого взята ссылка на него. Другими словами если удалить изображение, ссылка останется пустой и ничего не покажет!

Что бы размещать текст, или дополнительные картинки на презентации в нужном месте, нужного размера и стиля - надо написать HTML код (в данном случае это будет таблица) и сделать изображение презентации основным фоном.

Пример таблицы с фоновым изображением:

<table border="1" cellpadding="2" cellspacing="2" width="869" height="518" background="http://vob.webservis.ru/images/two/7.png">
<tr>
<td align="center"><font size="7" color="red">любой текст</font></td>
</tr>
</table>
Можно воспользоваться онлайн HTML - редактором(он тоже есть в онлайне на главной странице), для просмотра и редактирования кода.
Для этого надо скопировать код, открыть HTML редактор и вставить код в место текста.

Так же можно воспользоваться Визуальным редактором онлайн. Эта программа похожа на FrontPage от microsoft.

С помощью HTML можно так же изменить указатель курсора на любую свою картинку .

Подробнее здесь: Как изменить курсор на презентации.

Как создать правильно таблицу?

Для создания таблиц используются 3 базовых тэга:
<table> - начало и </table> - конец таблицы.
<tr> - (table row - ряд таблицы), начинает и заканчивает горизонтальный ряд ячеек.
<td> - сокращение от (table data - табличные данные). Этот тэг начинает и заканчивает каждую ячейку ряда таблицы.
Ряды (<tr>) это горизонтальные строки ячеек, а столбцы (<td>) - вертикальные столбцы ячеек.
В таблице может быть неограниченное число рядов и столбцов.

Пример А:

<table>
<tr>
<td>ячейка 1</td>
</tr>
<tr>
<td>ячейка 2</td>
</tr>
</table>
будет выглядеть в браузере:

ячейка 1

ячейка 2

Сам контур ячеек для вас видим не будет. Как сделать его видимым, написано ниже.

Пример Б:

<table>
<tr>
<td>ячейка 1</td>
<td>ячейка 2</td>
<td>ячейка 3</td>
<td>ячейка 4</td>
</tr>
<tr>
<td>ячейка 5</td>
<td>ячейка 6</td>
<td>ячейка 7</td>
<td>ячейка 8</td>
</tr>
<tr>
<td>ячейка 9</td>
<td>ячейка 10</td>
<td>ячейка 11</td>
<td>ячейка 12</td>
</tr>
</table>
будет выглядеть в браузере:

ячейка 1	ячейка 2	ячейка 3	ячейка 4
ячейка 5	ячейка 6	ячейка 7	ячейка 8
ячейка 9	ячейка 10	ячейка 11	ячейка 12

Атрибут border используется для специфицирования толщины рамки вокруг таблицы.

Пример:

<table border="1" width="30%">
<tr>
<td>ячейка 1</td>
</tr>
<tr>
<td>ячейка 2</td>
</tr>
</table>

таблица шириной(width) в 30% экрана.

Что бы задать таблице ширину(width) и длинну(height)

Пример:

<table border="1" width="200" height="200">
<tr>
<td>ячейка 1</td>
</tr>
<tr>
<td>ячейка 2</td>
</tr>
</table>

Аналогично и с ячейками

Пример:

<table height="150" width="300" border="1">
<tr>
<td height="100" width="100">ячейка 1</td>
<td>ячейка 2</td>
</tr>
<tr>
<td>ячейка 3</td>
<td>ячейка 4</td>
</tr>


Атрибуты align и valign.

align: специфицирует выравнивание содержимого всей таблицы по горизонтали, в ряду или в отдельной ячейке. Например, left(лево), center(центр) или right(право).

valign: специфицирует выравнивание по вертикали в ячейке. Например, top, middle или bottom.

Пример:

<table border="1" width="30%">
<tr>
<td align="right" valign="top">ячейка 1</td>
</tr>
<tr>
<td align="center" valign="middle">ячейка 2</td>
</tr>
</table>

При создании таблиц используются два атрибута: colspan и rowspan.

Colspan (сокращение от "column span/охват столбцов").

Colspan используется в тэге <td> для специфицирования того, сколько столбцов охватывает данная ячейка.

Пример:

<table border="1" width="40%" height="150">
<tr>
<td colspan="3" height="75">ячейка 1</td>
</tr>
<tr>
<td>ячейка 2</td>
<td>ячейка 3</td>
<td>ячейка 4</td>
</tr>
</table>

в браузере:

ячейка 1
ячейка 2	ячейка 3	ячейка 4

Установка colspan "3", заставляет ячейку в первом ряду охватывать три столбца. Если установим colspan "2", ячейка охватит только два столбца, и понадобится вставить дополнительную ячейку в первый ряд, чтобы ячейки ровно распределились на два ряда.

Пример:

<table border="1" width="40%" height="100">
<tr>
<td colspan="2">ячейка 1</td>
<td>ячейка 2</td>
</tr>
<tr>
<td>ячейка 3</td>
<td>ячейка 4</td>
<td>ячейка 5</td>
</tr>
</table>

будет выглядеть в браузере:

ячейка 1		ячейка 2
ячейка 3	ячейка 4		ячейка 5

rowspan специфицирует, сколько рядов охватывает данная ячейка.

Пример :

<table border="1" width="40%" height="100">
<tr>
<td rowspan="3">ячейка 1</td>
<td>ячейка 2</td>
</tr>
<tr>
<td>ячейка 3</td>
</tr>
<tr>
<td>ячейка 4</td>
</tr>
</table>

будет выглядеть в браузере:

ячейка 1	ячейка 2
	ячейка 3
	ячейка 4

rowspan имеет значение "3" в ячейке 1. Это указывает, что ячейка должна охватывать три ряда (свой собственный ряд плюс ещё два). ячейка 1 и ячейка 2 при этом остаются в одном ряду, а ячейка 3 и ячейка 4 образуют отдельные ряды.

Контейнер(div) с полосой прокрутки:

<div style="width: 100px; height: 100px; overflow: auto"><p>Текст
текст текст текст текст текст текст<br /></p></div>
где (width: 100px) обозначает ширину контейнера в пикселах, а (height: 100px) - высоту.Текст - обозначает написанный текст.

Тег <br> обозначает перенос на новую строку.

Можно вставить дополнительные картинки на свою презентацию. Вставка картинки в презентацию для Ловади.
Коды и примеры готовой презентации можно посмотреть здесь: Готовые презентации для Ловади. Все примеры работают, проверено в Ловади!

Если возникли какие вопросы - обращайтесь.