Приветствую Вас Гость | RSS
Моя копилочка
Главная | Регистрация | Вход
 
Главная » 2012 » Июнь » 11 » Огромная HTML-Шпаргалочка
00:25
Огромная HTML-Шпаргалочка

ПримерКод

<img src="АДРЕС КАРТИНКИ С РАДИКАЛА СТРОКА №1"title="ВАШ ТЕКСТ"> 
При наведении на картинку появляется Окошко-подсказка
TITLE - Определяет заголовок картинки, т.е. при наведении на картинку высветится надпись с текстом из атрибута title


<a href="ВАША ССЫЛКА">
<img src="АДРЕС КАРТИНКИ СТРОКА С РАДИКАЛА №1"title="ВАШ ТЕКСТ" border="0" ></a>
Картинка кликабельна и появляется Окошко-Подсказка

Что еще за 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" - значит выравнивать

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

<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>

Шпаргалочку для Вас подготовила  ЕленаПост из Блога  ЕленыИсточники : Здесь и Здесь и Здесь

Просмотров: 438 | Добавил: galina | Теги: HTML-Шпаргалка | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
[ Форма входа ]

[ Календарь ]
«  Июнь 2012  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
252627282930

[ Блог ]
[30.04.2013][Стихи]
Моей любви тягучий мёд .. (1)
[30.04.2013][Стихи]
В любой душе есть тайный уголок... (1)
[09.09.2012][Стихи]
Дарите добрые слова! (0)

[ Счетчик ]
Счетчик тИЦ и PR

[ Категории раздела ]
Новости сайта

[ Теги ]
стихи религия Картинки Ссылки Полезное интересно ОСЕНЬ друзьям вязание крючком Притча для блога Вечер Огонь фоны клипарт анимация обучающие фильмы изучаем комп фильмы Художники кулинария психология юмор Музыка игры Картинка любовь медицина салаты рукоделие Журналы война цитаты возраст ФШ генераторы книги афоризмы Программы уроки Видео шитье вязание крючок Мудрость Интернет защита компа МК по вязанию уроки ФШ Разное Жизнь мама Женщина Коврики Одиночество Работа с фото радио бродилка по вязанию Ликбез купальники кофты здоровье бродилка торт мотивы НГ мужчины для школы полезные сайты рассказ картинки со стихами интересные сайты официально Формулы полезные ссылки Узоры схемы вязаная обувь спицы поисковики ирландское кружево туники выпечка разделители Торты прозрачные фоны о маме о женщине молитвы салфетки комп притчи о жизни цветы уроки вязания Компьютер народная медицина для детей народные рецепты сад

[ Интересные сайты ]
Фотошопинг Photoshop for You! <text size=
Giveaway of the Day
 Kubines - Оформление системы
Мир рукоделия от А до Я

[ Наш опрос ]
Оцените мой сайт
Всего ответов: 47

[ Block title ]

[ Партнеры ]
бесплатные программы для раскрутки сайта бесплатные программы для раскрутки сайта

[ Друзья сайта ]
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz

  • [ Статистика ]

    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0

    Copyright MyCorp © 2017