-Цитатник

ВАРЕЖКИ С «АНАТОМИЧЕСКИМ» ПАЛЬЦЕМ - (0)

ВАРЕЖКИ С «АНАТОМИЧЕСКИМ» ПАЛЬЦЕМ Набрать 36 петель +1 для замыкания в круг и вязать резинку 2*...

Салат на Новый Год - (2)

Салат на 2020 Новый Год Во многих регионах настали холода, а значит приближается самый замеча...

РАСШИФРОВКА АНАЛИЗА КРОВИ - (0)

РАСШИФРОВКА АНАЛИЗА КРОВИ   Расшифровка общего...

Пуловер Purl soho - (0)

Пуловер Purl soho     Здесь

Удобная модель свитера от Purl Soho - (0)

Удобная модель свитера от Purl Soho 1. .1. Удобная модель свитера от Purl Soho вяжется скрещ...

 -Рубрики

 -ТоррНАДО - торрент-трекер для блогов

Делюсь моими файлами
    Скачал и помогаю скачать

      Показать все (1)

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

      Поиск сообщений в Элина_Чернышова

       -Статистика

      Статистика LiveInternet.ru: показано количество хитов и посетителей
      Создан: 26.08.2009
      Записей: 4193
      Комментариев: 819
      Написано: 5202


      HTML-шпаргалка

      Вторник, 27 Сентября 2011 г. 15:22 + в цитатник
      Цитата сообщения Елена-рыбка Огромная HTML-шпаргалка из блога Натальи

      Взяла из блога Натальи: 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...начинающим и не только...
      ...
      Часть 11 - Учебник по Html для чайников
      Часть 12 - Как поменять код флеш-картинки(на Ли.ру) на html-код для других сайтов.Урок.
      Часть 13 - Огромная HTML-шпаргалка из блога Натальи
      Рубрики:  Интернетное

       

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

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

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

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