Большая HTML-шпаргалочка

Пятница, 09 Сентября 2011 г. 21:09 + в цитатник

Цитата сообщения MANGIANA

Прочитать целиком В свой цитатник или сообщество!

Большая HTML-шпаргалочка

Пример

Код

Добро пожаловать в нашу большую и дружную семью . Надеюсь, Вам у нас понравится ! У нас есть три бродилки , в которых вы сможете найти все темы сообщества . А это наш Баннер , разместите его у себя в Блоге и будете всегда с нами рядом .

При наведении на картинку появляется Окошко-подсказка
TITLE - Определяет заголовок картинки, т.е. при наведении на картинку высветится надпись с текстом из атрибута title

Картинка кликабельна и появляется Окошко-Подсказка

Что еще за border="0" спросите
Вы, а дело в том, что когда делаешь изображение ссылкой, вокруг него
появляется некрасивая рамка(border) и чтобы ее убрать пишут
дополнительный атрибут border .

HSPACE и VSPACE -
отступы в пикселях по горизонтали и по вертикали от картинки до других
обьектов документа. Легко запомнить название если взять и просто
перевести с английского.
HSPACE - Horizontal Space - горизонтальный отступ и
VSPACE - Vertical Space - вертикальный отступ.
Эти значения можете изменять .

<p
align="justify"> <img src="АДРЕС КАРТИНКИ С РАДИКАЛА СТРОКА
№1"hspace="15" vspace="15" align="left">ВАШ ТЕКСТ</p>

Картинка с отступами и выравниванием по левому краю
Атрибут align="left" - значит с лева
Атрибут align="justify" - значит выравнивать

<p
align="justify"> <img src="АДРЕС КАРТИНКИ С РАДИКАЛА СТРОКА №1"
hspace="15" vspace="15" align="right">ВАШ ТЕКСТ</p>

Картинка с отступами и выравниванием по правому краю
Атрибут align="right" - значит с права
Атрибут align="justify" - значит выравнивать

Жаль, что мы не рисуем прямо глазами. Как много пропадает на длинном пути от глаз через руку к кисти.
/Г. Лессинг/
Произведение, которое читают, имеет настоящее. Произведение, которое перечитывают, имеет будущее.
/А. Дюма-сын/

<p align="justify"><img src="АДРЕС КАРТИНКИ С РАДИКАЛА СТРОКА №1" align="left">ВАШ ТЕКСТ</p>

Картинка без отступов , с выравниванием по левому краю
Если поменять атрибут align="left" на align="right" - то получите Картинку без отступов , с выравниванием по правому краю .

Обратите внимание , что ваш текст должен быть поделен на две части

Первая часть пишется -- перед кодом , Вторая -- после .

Первая часть текста <img src="АДРЕС КАРТИНКИ СТРОКА С РАДИКАЛА №1" align="middle" border="0"> Вторая часть текста

Картинка в середине Текста
Атрибут align="middle" - значит середина

Стихи писать я не умею,
Но мысли изложить могу…
Я просто от тебя балдею
И не во сне, а наяву.

<table align=center border=0>
<tr>
<td><img src="АДРЕС КАРТИНКИ СТРОКА С РАДИКАЛА №1"></td>
<td>ТЕКСТ</td>
<td><img src="АДРЕС КАРТИНКИ СТРОКА С РАДИКАЛА №1"></td>
</tr>
</table>

Текст между двух картинок

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

Прохожие поднявшие зонты
толпились, подступали ближе робко.
Бросали пятаки ему в коробку,
благодаря за звуки красоты.
И таял город в свете фонарей,
Под звуками мелодии пьянящей
И плыл мотив по тишине звенящей,
И стали все от музыки добрей…

<table align=center border=0>
<tr>
<td>ТЕКСТ</td>
<td><img src="АДРЕС КАРТИНКИ СТРОКА С РАДИКАЛА №1"></td>
<td>ТЕКСТ</td>
</tr>
</table>

Картинка между текстом

Рамка растягивается на всю ширину записи .

<fieldset><legend><img src="АДРЕС КАРТИНКИ СТРОКА С РАДИКАЛА №1"></legend>ВАША КАРТИНКА</fieldset>

Рамка с разрывом Картинки

Добро ПожаловатьРада Вас приветствовать у себя в Блоге

<fieldset><legend>Запись в разрыве</legend>Основная запись</fieldset>

Рамка с разрывом Текста

Таблица в 2 ряда и 2 столбца

	СМАЙЛИК
	СМАЙЛИК

TABLE - Элемент для создания html таблицы. Обязательно должен иметь начальный и конечный теги.
TR (Table Row) - Создает новый ряд таблицы. Закрывающий тег обязателен.
TD (Table Data) - Начинает и заканчивает каждую ячейку ряда html таблицы. Обязателен закрывающий тег.

<table border="1">
<tr>
<td>Ряд 1 Ячейка1</td> <td>Ряд1 Ячейка2</td>
</tr>
<tr>
<td>Ряд 2 Ячейка 1</td> <td>Ряд 2 Ячейка 2</td>
</tr>
</table>

Т.е.
таблица начинается с <table>, затем идёт <tr>, указывающий
на начало нового ряда. В ряду вставлены две ячейки: <td>Ряд 1
Ячейка1</td> и <td>Ряд1 Ячейка2</td>. Ряд закрывается
</tr>, и сразу начинается новый ряд <tr>. В новом ряду также
две ячейки. Таблица закрывается </table>. Все довольно логично

Атрибут BORDER - задает толщину рамки таблицы в пикселах.

Объединяем верхнии ячейки

ШПАРГАЛОЧКИ

Используя эту Формулу можно строить и другие таблицы
Ряд 2 Ячейка 1	Ряд 2 Ячейка 2	Ряд 2 Ячейка 3

<table border="1">
<tr>
<td colspan="2">Ряд 1 Ячейки 1+2</td>
</tr>
<tr>
<td>Ряд 2 Ячейка 1</td> <td>Ряд 2 Ячейка 2</td>
</tr>
</table>

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

Объединяем ячейки слева

Ячейка 1, Ряд 1+2	Ряд1 Ячейка2
	Ряд 2 Ячейка 2

Ячейка 1 Ряд 1+2+3+4	Ряд1 Ячейка2
	Ряд 2 Ячейка 2
	Ряд 3 Ячейка 2
	Ряд 4 Ячейка 2

<table border="1">
<tr>
<td rowspan="2">Ячейка 1, Ряд 1+2</td>
<td>Ряд1 Ячейка2</td>
</tr>
<tr>
<td>Ряд 2 Ячейка 2</td>
</tr>
</table>

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

Добавляем атрибут cellpadding и выравниваем таблицу по центру

Ряд 1 Ячейка1	Ряд1 Ячейка2
Ряд 2 Ячейка 1	Ряд 2 Ячейка 2

CELLPADDING – определяет расстояние (в пикселах) между рамкой каждой ячейки html таблицы и содержащемся в ней материалом.

<table border="4" align="center" cellpadding="10">
<tr>
<td>Ряд 1 Ячейка1</td><td>Ряд1 Ячейка2</td>
</tr>
<tr>
<td>Ряд 2 Ячейка 1</td> <td>Ряд 2 Ячейка 2</td>
</tr>
</table>

ALIGN – определяет способ горизонтального выравнивания html таблицы или содержимого ячеек.
Возможные значения: left , center , right . Значение по умолчанию – left .

Добавляем атрибут cellspacing и так же таблица по центру

Ряд 1 Ячейка1	Ряд1 Ячейка2
Ряд 2 Ячейка 1	Ряд 2 Ячейка 2

CELLSPACING – определяет расстояние (в пикселах) между границами соседних ячеек таблицы html.

<table border="1" align="center" cellspacing="10">
<tr>
<td>Ряд 1 Ячейка1</td><td>Ряд1 Ячейка2</td>
</tr>
<tr>
<td>Ряд 2 Ячейка 1</td> <td>Ряд 2 Ячейка 2</td>
</tr>
</table>

Если необходимо , можно задать ширину и высоту таблицы
Так же таблица расположена по центру

Ряд 1 Ячейка1	Ряд1 Ячейка2
Ряд 2 Ячейка 1	Ряд 2 Ячейка 2

<table border="1" align="center" width="400" height="100">
<tr>
<td>ряд 1 ячейка1</td><td>ряд1 ячейка2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>
</tr>
</table>

WIDTH –
определяет ширину таблицы html. Ширина задается либо в пикселах, либо в
процентном отношении к ширине окна браузера. По умолчанию этот атрибут
определяется автоматически в зависимости от объема содержащегося в
таблице материала.

HEIGHT –
определяет высоту таблицы. Высота задается либо в пикселах, либо в
процентном отношении к высоте окна браузера. По умолчанию этот атрибут
определяется автоматически в зависимости от объема содержащегося в html
таблице материала.

Так же можно изменить цвет таблицы - Фон

Ряд 1 Ячейка 1	Ряд 1 Ячейка 2
Ряд 2 Ячейка 1	Ряд 2 Ячейка 2

Ряд 1 Ячейка 1	Ряд 1 Ячейка 2
Ряд 2 Ячейка 1	Ряд 2 Ячейка 2

Если
картинка большая , то будет отображаться та её часть , которая влезет .
Как вы могли уже заметить у меня фон таблицы просто белый .

<table background="АДРЕС ФОНА СТРОКА С РАДИКАЛА №1" border=2 align="center" >
<tr>
<td>Ряд 1 Ячейка 1</td>
<td>Ряд 1 Ячейка 2</td>
</tr>
<tr>
<td>Ряд 2 Ячейка 1</td>
<td>Ряд 2 Ячейка 2</td>
</tr>
</table>

BACKGROUND – позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка.

Нумерованный список

НАЗВАНИЕ СПИСКА

Строка

Цвет определяете сами

<OL>НАЗВАНИЕ СПИСКА
<LI>Строка
<LI>Строка
<LI>Строка
</OL>

Нумерованный список определяется - метками <OL></OL>. Элементы списка отмечаются метками <LI>. В нумерованном списке элементы нумерует сам браузер.

Заметим, метка <LI> непарная - т.е. метки </LI> не существует.

Ненумерованный список

НАЗВАНИЕ СПИСКА

Ненумерованный список определяется метками <UL></UL>

<UL>
<B>НАЗВАНИЕ СПИСКА</B><BR>

<IMG SRC="http://img90.imageshack.us/img90/6603/33609040px4.gif">Строка 1<BR>

<IMG SRC="http://img90.imageshack.us/img90/6603/33609040px4.gif">Строка 2<BR>

<IMG SRC="http://img90.imageshack.us/img90/6603/33609040px4.gif">Строка 3<BR>

<IMG SRC="http://img90.imageshack.us/img90/6603/33609040px4.gif">Строка 4<BR>
</UL>

Вот пример ещё ненумерованного списка

НАЗВАНИЕ СПИСКА

<UL>
<B>НАЗВАНИЕ СПИСКА</B><BR>

<IMG SRC="http://www.liveinternet.ru/images/brandnewsmilies/heart.gif">Строка 1<BR>

<IMG SRC="http://www.liveinternet.ru/images/brandnewsmilies/heart.gif">Строка 2<BR>

<IMG SRC="http://www.liveinternet.ru/images/brandnewsmilies/heart.gif">Строка 3<BR>

<IMG SRC="http://www.liveinternet.ru/images/brandnewsmilies/heart.gif">Строка 4<BR>
</UL>

Вот пример ещё ненумерованного списка

НАЗВАНИЕ СПИСКА

<UL>
<B>НАЗВАНИЕ СПИСКА</B><BR>

<IMG SRC="http://img.mail.ru/r/blogs/ico_friends.png">Строка 1<BR>

<IMG SRC="http://img.mail.ru/r/blogs/ico_friends.png">Строка 2<BR>

<IMG SRC="http://img.mail.ru/r/blogs/ico_friends.png">Строка 3<BR>

<IMG SRC="http://img.mail.ru/r/blogs/ico_friends.png">Строка 4<BR>
</UL>

Вот пример ещё ненумерованного списка

НАЗВАНИЕ СПИСКА

<UL>
<B>НАЗВАНИЕ СПИСКА</B><BR>

<IMG SRC="http://img15.imageshack.us/img15/7746/star0000.gif">Строка 1<BR>

<IMG SRC="http://img15.imageshack.us/img15/7746/star0000.gif">Строка 2<BR>

<IMG SRC="http://img15.imageshack.us/img15/7746/star0000.gif">Строка 3<BR>

<IMG SRC="http://img15.imageshack.us/img15/7746/star0000.gif">Строка 4<BR>
</UL>

Пример простого ненумерованного списка

Название Списка

Строка 1

Строка 2

Строка 3

<UL>Название Списка
<LI>Строка 1
<LI>Строка 2
<LI>Строка 3
</UL>

Ненумерованный список определяется метками <UL></UL>

Делаем сами Кнопочку

<form
action="АДРЕС ССЫЛКИ" target="_blank" method="get"><button
type="submit"><img src="АДРЕС КАРТИНКИ СТРОКА С РАДИКАЛА №1"
align=absMiddle> ВАШ ТЕКСТ</button></form>

Шпаргалочку для Вас подготовила

Елена

Источники : Здесь и Здесь и Здесь

из блога IRINI

Серия сообщений "Уроки":

Часть 1 - Как сделать "именные" часики на свою страничку
Часть 2 - Сделать блестящую надпись на картинке без Фотошопа
...
Часть 98 - Что же такое Paint?
Часть 99 - Создаем демотиватор в Gimp
Часть 100 - Меняем размер и цвет плеера с Привет.ру

Серия сообщений "Шаблоны":

Часть 1 - Меняем цвет под определённым участком текста
Часть 2 - Урок по изготовлению рамочки + готовый шаблон
...
Часть 36 - Шаблоны для вставки плеера и ссылок в картинку от ~lulu~
Часть 37 - Делаем окошко для кода
Часть 38 - Большая HTML-шпаргалочка

Рубрики:

Всё для блогов, дневников

<a href="https://www.liveinternet.ru/users/yahabibi/post183752151/">Р‘РѕР»СЊС€Р°СЏ HTML-С€РїР°СЂРіР°Р»РѕС‡РєР°</a><br/>Р‘РѕР»СЊС€Р°СЏ HTML-С€РїР°СЂРіР°Р»РѕС‡РєР°

РџСЂРёРјРµСЂРљРѕРґ 
&lt;img src="РђР”Р Р•РЎ РљРђР РўРРќРљР РЎ Р РђР”РРљРђР›Рђ РЎРўР РћРљРђ в„–1"title="Р’РђРЁ РўР•РљРЎРў"&gt; 
РџСЂРё РЅР°РІРµРґРµРЅРёРё РЅР° РєР°СЂС‚РёРЅРєСѓ РїРѕСЏРІР»СЏРµС‚СЃСЏ РћРєРѕС€РєРѕ-РїРѕРґСЃРєР°Р·РєР°
TITLE - РћРїСЂРµРґРµР»СЏРµС‚ Р·Р°РіРѕР»РѕРІРѕРє РєР°СЂС‚РёРЅРєРё, С‚.Рµ. РїСЂРё РЅР°РІРµРґРµРЅРёРё РЅР° РєР°СЂС‚РёРЅРєСѓ РІС‹СЃРІРµС‚РёС‚СЃСЏ РЅР°РґРїРёСЃСЊ СЃ С‚РµРєСЃС‚РѕРј РёР· Р°С‚СЂРёР±СѓС‚Р° title

&lt;a href="Р’РђРЁРђ РЎРЎР«Р›РљРђ"&gt;
&lt;img src="РђР”Р Р•РЎ РљРђР РўРРќРљР РЎРўР РћРљРђ РЎ Р РђР”РРљРђР›Рђ в„–1"title="Р’РђРЁ РўР•РљРЎРў" border="0" &gt;&lt;/a&gt;
РљР°СЂС‚РёРЅРєР° РєР»РёРєР°Р±РµР»СЊРЅР° Рё РїРѕСЏРІР»СЏРµС‚СЃСЏ РћРєРѕС€РєРѕ-РџРѕРґСЃРєР°Р·РєР°

Р§С‚Рѕ РµС‰Рµ Р·Р°&nbsp; border="0" СЃРїСЂРѕСЃРёС‚Рµ
 Р’С‹, Р° РґРµР»Рѕ РІ С‚РѕРј, С‡С‚Рѕ РєРѕРіРґР° РґРµР»Р°РµС€СЊ РёР·РѕР±СЂР°Р¶РµРЅРёРµ СЃСЃС‹Р»РєРѕР№, РІРѕРєСЂСѓРі РЅРµРіРѕ 
РїРѕСЏРІР»СЏРµС‚СЃСЏ РЅРµРєСЂР°СЃРёРІР°СЏ СЂ... <a href="https://www.liveinternet.ru/users/yahabibi/post183752151/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

Комментировать

« Пред. запись — К дневнику — След. запись »

Страницы: [1] [Новые]

LiveInternetLiveInternet

-Метки

-Рубрики

-Цитатник

-Ссылки

-Кнопки рейтинга «Яндекс.блоги»

-Фотоальбом

-Поиск по дневнику

-Подписка по e-mail

-Интересы

-Друзья

-Постоянные читатели

-Статистика

Большая HTML-шпаргалочка