-Рубрики

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

Поиск сообщений в Елена-рыбка

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

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 28.01.2011
Записей: 8002
Комментариев: 13718
Написано: 36325


Огромная HTML-шпаргалка из блога Натальи

Понедельник, 26 Сентября 2011 г. 14:10 + в цитатник

Взяла из блога Натальи: http://blogs.mail.ru/mail/garkina-natali/

Огромная 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>
   
Если необходимо , можно задать ширину и высоту таблицы
Так же таблица расположена по центру




Ряд 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 рисунка.
   
Нумерованный список

    НАЗВАНИЕ СПИСКА
  1. Строка
  2. Строка
  3. Строка

Цвет определяете сами
<OL>НАЗВАНИЕ СПИСКА
<LI>Строка
<LI>Строка
<LI>Строка
</OL>


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

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

    НАЗВАНИЕ СПИСКА
    Строка 1
    Строка 2
    Строка 3
    Строка 4


Ненумерованный список определяется метками <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>
   
Вот пример ещё ненумерованного списка

    НАЗВАНИЕ СПИСКА
    Строка 1
    Строка 2
    Строка 3
    Строка 4

 
<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>
   
Вот пример ещё ненумерованного списка

    НАЗВАНИЕ СПИСКА
    Строка 1
    Строка 2
    Строка 3
    Строка 4

 
<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>
   
Вот пример ещё ненумерованного списка

    НАЗВАНИЕ СПИСКА
    Строка 1
    Строка 2
    Строка 3
    Строка 4
<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>
   

Елена-рыбка

Серия сообщений "HTML начинающим и не только":
Часть 1 - Html для начинающих ( часть 2-ая)
Часть 2 - Всё о HTML...начинающим и не только...
...
Часть 12 - Учебник по Html для чайников
Часть 13 - Как поменять код флеш-картинки(на Ли.ру) на html-код для других сайтов.Урок.
Часть 14 - Огромная HTML-шпаргалка из блога Натальи
Часть 15 - Классная шпаргалка HTML!!!! Спасибо Ларисе!
Часть 16 - ТОП 10 HTML ошибок новичков
...
Часть 29 - Коды HTML для оформления постов, блогов
Часть 30 - Моя личнличная шпаргалка для оформления- файл
Часть 31 - Всё под рукой/Всё, что нужно начинающему блогеру(обновленный материал)

Метки:  

Процитировано 268 раз
Понравилось: 24 пользователям

switlanka   обратиться по имени Понедельник, 26 Сентября 2011 г. 15:03 (ссылка)
Ответить С цитатой В цитатник
Перейти к дневнику

Понедельник, 26 Сентября 2011 г. 15:06ссылка
Привет.Светуль,на работу убегаю...пока..до вечера(или ночи)
Radeia   обратиться по имени Понедельник, 26 Сентября 2011 г. 16:31 (ссылка)
Спасибо, нужная информация!
Ответить С цитатой В цитатник
Перейти к дневнику

Понедельник, 26 Сентября 2011 г. 22:51ссылка
Пожалуйста,дорогая!Успехов!!!
VerAGRI   обратиться по имени Понедельник, 26 Сентября 2011 г. 16:46 (ссылка)
Леночка, спасибо огромное за шпаргалку! Надеюсь, придёт время, и я начну что-нибудь создавать, а не только цитировать...
Ответить С цитатой В цитатник
Перейти к дневнику

Понедельник, 26 Сентября 2011 г. 22:57ссылка
Конечно,Верочка,главное начать))) И,конечно,наличие времени,которого постоянно нет:))
elenaalex961   обратиться по имени Понедельник, 26 Сентября 2011 г. 20:29 (ссылка)
Ленчик, спасибо!!! Возьму на всякий случай!
Ответить С цитатой В цитатник
Перейти к дневнику

Понедельник, 26 Сентября 2011 г. 22:58ссылка
Бери,дорогая,в хозяйстве все пригодится:))
Novichok56   обратиться по имени Понедельник, 26 Сентября 2011 г. 21:05 (ссылка)
Леночка, приветик птичка моя! Как ты там поживаешь? Что-то я тебя потеряла из виду. Отличную шпаргалочку ты нашла. Спасибо тебе.
Ответить С цитатой В цитатник
Перейти к дневнику

Понедельник, 26 Сентября 2011 г. 23:00ссылка
Привет,Ирусь,да,ты что-то совсем меня забыла,вся в творчестве -по гостям ходить некогда)))
Перейти к дневнику

Вторник, 27 Сентября 2011 г. 00:59ссылка
Нет, Ленок, я практически ничего на этой неделе не делала. Ко мне приезжали мой младший и муж, оба гриппозные, вот и лечила их, кормила, обслуживала и развлекала.
Перейти к дневнику

Вторник, 27 Сентября 2011 г. 01:09ссылка
Вылечила? А у меня дочка болела всю неделю,да и сейчас еще не выздоровела,но ее выписали.горло стало получше и температура уже небольшая.37.2-это для Оли не страшно,от физры ее освободили пока.ну а за это время может и все нормализуется. А я пока музыку готовлю,много накачала,теперь на сайт заливаю,отбираю,все ведь прослушать надо,много времени занимает это,больше особо ничем и не занимаюсь,разве что по блогам немного прогуливаюсь))))
Пани_Галина   обратиться по имени Понедельник, 26 Сентября 2011 г. 23:20 (ссылка)
Елена-рыбка, большое спасибо!
Ответить С цитатой В цитатник
Перейти к дневнику

Понедельник, 26 Сентября 2011 г. 23:24ссылка
Пожалуйста))
Lyu-ba   обратиться по имени Вторник, 27 Сентября 2011 г. 08:45 (ссылка)
Ответить С цитатой В цитатник
Перейти к дневнику
santa3   обратиться по имени Вторник, 27 Сентября 2011 г. 08:57 (ссылка)
очень полезно Молодчина) спасибо
Ответить С цитатой В цитатник
Перейти к дневнику

Вторник, 27 Сентября 2011 г. 10:41ссылка
Очень рада тебе,Любаша!!!!
Наталья_Сараева   обратиться по имени Вторник, 27 Сентября 2011 г. 08:58 (ссылка)
Благодарю!!!
Ответить С цитатой В цитатник
Перейти к дневнику

Вторник, 27 Сентября 2011 г. 10:45ссылка
Пожалуйста,надеюсь- пригодится)))
ТАБТ   обратиться по имени Вторник, 27 Сентября 2011 г. 14:26 (ссылка)
СПАСИБО БОЛЬШОЕ!!!
Ответить С цитатой В цитатник
Перейти к дневнику

Вторник, 27 Сентября 2011 г. 15:31ссылка
Пожалуйста,дорогая!:air_kiss:
I_go_on_life   обратиться по имени Вторник, 27 Сентября 2011 г. 16:16 (ссылка)
спасибо!
Ответить С цитатой В цитатник
Перейти к дневнику
Sveta_Savyhska   обратиться по имени Вторник, 27 Сентября 2011 г. 17:51 (ссылка)
Елена-рыбка, спасибо за полезность .
Ответить С цитатой В цитатник
Перейти к дневнику

Вторник, 27 Сентября 2011 г. 17:55ссылка
Пожалуйста,милая,рада быть полезной)))
Галина_Викторова   обратиться по имени Вторник, 27 Сентября 2011 г. 18:24 (ссылка)
Спасибо огромное за шпаргалку!
Ответить С цитатой В цитатник
Перейти к дневнику

Вторник, 27 Сентября 2011 г. 18:28ссылка
Спасибо,что зашли на огонек и за комментарий))))Рада быть полезной)))
ДЖЕК14   обратиться по имени Вторник, 27 Сентября 2011 г. 18:53 (ссылка)
Огромное спасибо!
Ответить С цитатой В цитатник
Перейти к дневнику
be-ll   обратиться по имени Вторник, 27 Сентября 2011 г. 18:55 (ссылка)
Спасибо большое,процитирую.
Ответить С цитатой В цитатник
Перейти к дневнику
аштемелка   обратиться по имени Вторник, 27 Сентября 2011 г. 18:59 (ссылка)
Елена-рыбка, спасибо!!!Просто,доступно,красиво!
Ответить С цитатой В цитатник
Перейти к дневнику

Вторник, 27 Сентября 2011 г. 23:03ссылка
Мне это тоже понравилось)) Благодарю за комментарий)))Всегда Вам рада)))
Галина_Кукушкина   обратиться по имени Вторник, 27 Сентября 2011 г. 20:07 (ссылка)
Спасибо!
Ответить С цитатой В цитатник
Перейти к дневнику

Вторник, 27 Сентября 2011 г. 23:06ссылка
Пожалуйста,дорогая)))
Emiliaa   обратиться по имени Среда, 28 Сентября 2011 г. 09:21 (ссылка)
Ответить С цитатой В цитатник
Перейти к дневнику

Среда, 28 Сентября 2011 г. 12:43ссылка
Милюшка,солнце мое ненаглядное,как я рада тебе!!!!!
Datiana-ya   обратиться по имени Понедельник, 03 Октября 2011 г. 12:13 (ссылка)
спасибо!
Ответить С цитатой В цитатник
Перейти к дневнику

Понедельник, 03 Октября 2011 г. 16:02ссылка
Пожалуйста!:give_hear
LediLudmila   обратиться по имени Суббота, 29 Октября 2011 г. 16:45 (ссылка)
Благодарю за полезный и нужный пост.
Ответить С цитатой В цитатник
Перейти к дневнику
Tamreko   обратиться по имени Суббота, 02 Февраля 2013 г. 21:54 (ссылка)
Ответить С цитатой В цитатник
Елена-рыбка   обратиться по имени Суббота, 02 Февраля 2013 г. 23:37 (ссылка)
Добрый вечер! Успехов!!!
Ответить С цитатой В цитатник
Милаграс   обратиться по имени Понедельник, 06 Октября 2014 г. 10:57 (ссылка)
ОХ,какая нужность. СПАСИБО!!!
Ответить С цитатой В цитатник
Комментировать К дневнику Страницы: [1] [Новые]
 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку