Пример |
Код |
|
|
|
При наведении на картинку появляется Окошко-подсказка
TITLE - Определяет заголовок картинки, т.е. при наведении на картинку высветится надпись с текстом из атрибута title |
|
Картинка кликабельна и появляется Окошко-Подсказка
Что еще за border="0" спросите Вы, а дело в том, что когда делаешь изображение ссылкой, вокруг него появляется некрасивая рамка(border) и чтобы ее убрать пишут дополнительный атрибут border . |
|
|
HSPACE и VSPACE - отступы в пикселях по горизонтали и по вертикали от картинки до других обьектов документа. Легко запомнить название если взять и просто перевести с английского.
HSPACE - Horizontal Space - горизонтальный отступ и
VSPACE - Vertical Space - вертикальный отступ.
Эти значения можете изменять .
|
ВАШ ТЕКСТ
Картинка с отступами и выравниванием по левому краю
Атрибут align="left" - значит с лева
Атрибут align="justify" - значит выравнивать
|
|
|
HSPACE и VSPACE - отступы в пикселях по горизонтали и по вертикали от картинки до других обьектов документа. Легко запомнить название если взять и просто перевести с английского.
HSPACE - Horizontal Space - горизонтальный отступ и
VSPACE - Vertical Space - вертикальный отступ.
Эти значения можете изменять . |
ВАШ ТЕКСТ
Картинка с отступами и выравниванием по правому краю
Атрибут align="right" - значит с права
Атрибут align="justify" - значит выравнивать |
|
|
Жаль, что мы не рисуем прямо глазами. Как много пропадает на длинном пути от глаз через руку к кисти.
/Г. Лессинг/
Произведение, которое читают, имеет настоящее. Произведение, которое перечитывают, имеет будущее.
/А. Дюма-сын/
|
ВАШ ТЕКСТ
Картинка без отступов , с выравниванием по левому краю
Если поменять атрибут align="left" на align="right" - то получите Картинку без отступов , с выравниванием по правому краю . |
|
|
Обратите внимание , что ваш текст должен быть поделен на две части Первая часть пишется -- перед кодом , Вторая -- после . |
Первая часть текста Вторая часть текста
Картинка в середине Текста
Атрибут align="middle" - значит середина |
|
|
|
Стихи писать я не умею,
Но мысли изложить могу…
Я просто от тебя балдею
И не во сне, а наяву.
|
|
|
|
ТЕКСТ |
|
Текст между двух картинок |
|
|
… Десяток тополей качают стан,
чаруя городок провинциальный.
Осенний парк, с площадкой танцевальной,
роняет листья в выцветший фонтан.
На площади, какой то музыкант,
играл на скрипке полонез забытый,
Да так, что дождь холодный и сердитый,
Почти притих, признав его талант. |
|
Прохожие поднявшие зонты
толпились, подступали ближе робко.
Бросали пятаки ему в коробку,
благодаря за звуки красоты.
И таял город в свете фонарей,
Под звуками мелодии пьянящей
И плыл мотив по тишине звенящей,
И стали все от музыки добрей… |
|
ТЕКСТ |
|
ТЕКСТ |
Картинка между текстом |
|
|
|
Рамка с разрывом Картинки |
|
|
|
Рамка с разрывом Текста |
|
|
Таблица в 2 ряда и 2 столбца
| СМАЙЛИК |
| СМАЙЛИК |
TABLE - Элемент для создания html таблицы. Обязательно должен иметь начальный и конечный теги.
TR (Table Row) - Создает новый ряд таблицы. Закрывающий тег обязателен.
TD (Table Data) - Начинает и заканчивает каждую ячейку ряда html таблицы. Обязателен закрывающий тег.
Ряд 1 Ячейка1 | Ряд1 Ячейка2 |
Ряд 2 Ячейка 1 | Ряд 2 Ячейка 2 |
Т.е. таблица начинается с , затем идёт , указывающий на начало нового ряда. В ряду вставлены две ячейки: Ряд 1 Ячейка1 | и Ряд1 Ячейка2 | . Ряд закрывается , и сразу начинается новый ряд . В новом ряду также две ячейки. Таблица закрывается . Все довольно логично
Атрибут BORDER - задает толщину рамки таблицы в пикселах.
|
|
|
|
Объединяем верхнии ячейки
ШПАРГАЛОЧКИ |
|
|
Используя эту Формулу можно строить и другие таблицы |
Ряд 2 Ячейка 1 | Ряд 2 Ячейка 2 | Ряд 2 Ячейка 3 |
|
Ряд 1 Ячейки 1+2 |
Ряд 2 Ячейка 1 | Ряд 2 Ячейка 2 |
COLSPAN – определяет количество столбцов , на которые простирается данная ячейка. По умолчанию имеет значение 1. |
|
|
Объединяем ячейки слева
Ячейка 1, Ряд 1+2 |
Ряд1 Ячейка2 |
Ряд 2 Ячейка 2 |
Ячейка 1
Ряд 1+2+3+4 |
Ряд1 Ячейка2 |
Ряд 2 Ячейка 2 |
Ряд 3 Ячейка 2 |
Ряд 4 Ячейка 2 |
|
Ячейка 1, Ряд 1+2 |
Ряд1 Ячейка2 |
Ряд 2 Ячейка 2 |
ROWSPAN – определяет количество рядов , на которые простирается данная ячейка. По умолчанию имеет значение 1.
|
|
|
Добавляем атрибут cellpadding и выравниваем таблицу по центру
Ряд 1 Ячейка1 | Ряд1 Ячейка2 |
Ряд 2 Ячейка 1 | Ряд 2 Ячейка 2 |
CELLPADDING – определяет расстояние (в пикселах) между рамкой каждой ячейки html таблицы и содержащемся в ней материалом.
|
Ряд 1 Ячейка1 | Ряд1 Ячейка2 |
Ряд 2 Ячейка 1 | Ряд 2 Ячейка 2 |
ALIGN – определяет способ горизонтального выравнивания html таблицы или содержимого ячеек.
Возможные значения: left , center , right . Значение по умолчанию – left .
|
|
|
Добавляем атрибут cellspacing и так же таблица по центру
Ряд 1 Ячейка1 | Ряд1 Ячейка2 |
Ряд 2 Ячейка 1 | Ряд 2 Ячейка 2 |
CELLSPACING – определяет расстояние (в пикселах) между границами соседних ячеек таблицы html.
|
Ряд 1 Ячейка1 | Ряд1 Ячейка2 |
Ряд 2 Ячейка 1 | Ряд 2 Ячейка 2 |
|
|
|
Если необходимо , можно задать ширину и высоту таблицы
Так же таблица расположена по центру
Ряд 1 Ячейка1 | Ряд1 Ячейка2 |
Ряд 2 Ячейка 1 | Ряд 2 Ячейка 2 |
|
ряд 1 ячейка1 | ряд1 ячейка2 |
ряд 2 ячейка 1 | ряд 2 ячейка 2 |
WIDTH – определяет ширину таблицы html. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в таблице материала.
HEIGHT – определяет высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в html таблице материала.
|
|
|
Так же можно изменить цвет таблицы - Фон
Ряд 1 Ячейка 1 |
Ряд 1 Ячейка 2 |
Ряд 2 Ячейка 1 |
Ряд 2 Ячейка 2 |
Ряд 1 Ячейка 1 |
Ряд 1 Ячейка 2 |
Ряд 2 Ячейка 1 |
Ряд 2 Ячейка 2 |
Если картинка большая , то будет отображаться та её часть , которая влезет . Как вы могли уже заметить у меня фон таблицы просто белый . |
Ряд 1 Ячейка 1 |
Ряд 1 Ячейка 2 |
Ряд 2 Ячейка 1 |
Ряд 2 Ячейка 2 |
BACKGROUND – позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка.
|
|
|
Нумерованный список
НАЗВАНИЕ СПИСКА
- Строка
- Строка
- Строка
Цвет определяете сами
|
НАЗВАНИЕ СПИСКА
- Строка
- Строка
- Строка
Нумерованный список определяется - метками . Элементы списка отмечаются метками . В нумерованном списке элементы нумерует сам браузер.
Заметим, метка непарная - т.е. метки не существует.
|
|
|
Ненумерованный список
НАЗВАНИЕ СПИСКА
Строка 1
Строка 2
Строка 3
Строка 4
Ненумерованный список определяется метками
|
НАЗВАНИЕ СПИСКА
Строка 1
Строка 2
Строка 3
Строка 4
|
|
|
Вот пример ещё ненумерованного списка
НАЗВАНИЕ СПИСКА
Строка 1
Строка 2
Строка 3
Строка 4
|
НАЗВАНИЕ СПИСКА
Строка 1
Строка 2
Строка 3
Строка 4
|
|
|
Вот пример ещё ненумерованного списка
НАЗВАНИЕ СПИСКА
Строка 1
Строка 2
Строка 3
Строка 4
|
НАЗВАНИЕ СПИСКА
Строка 1
Строка 2
Строка 3
Строка 4
|
|
|
Вот пример ещё ненумерованного списка
НАЗВАНИЕ СПИСКА
Строка 1
Строка 2
Строка 3
Строка 4
|
НАЗВАНИЕ СПИСКА
Строка 1
Строка 2
Строка 3
Строка 4
|
|
|
Пример простого ненумерованного списка
Название Списка
- Строка 1
- Строка 2
- Строка 3
|
Название Списка
- Строка 1
- Строка 2
- Строка 3
Ненумерованный список определяется метками
|
|
|
| |
|
|