-Цитатник

Японская гимнастика макко-хо: секрет неувядающей красоты, всего 4 упражнения - (0)

Японская гимнастика макко-хо: секрет неувядающей красоты, всего 4 упражнения Наверняка вы заду...

Надавите на эту точку и вы избавитесь от волнения за минуту! - (3)

Надавите на эту точку и вы избавитесь от волнения за минуту! В вашем теле ес...

НЕ РАБОТАЕТ ЮТУБ. ЧТО ДЕЛАТЬ? ПОДСКАЗКИ ЗДЕСЬ - (8)

НЕ работает Ютуб Если у вас не работает (не воспроизводится) видео на YOUTUBE ( Ютубе ) наприм...

Поиск по фамилии. Подвиг народа. Память народа - (1)

Поиск по фамилии. Подвиг народа. Память народа ПОИСК УЧАСТНИКОВ ВЕЛИКОЙ ОТЕЧЕСТВЕННОЙ ВОЙНЫ ...

6 сайтов с бесплатными уроками по компьютерной грамматике - (2)

6 сайтов с бесплатными уроками по компьютерной грамматике . Это цитата сообщения Schamada 6 са...

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

 

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

Поиск сообщений в vipstart


Огромная HTML-шпаргалка - просто о важном

Понедельник, 05 Марта 2012 г. 23:26 + в цитатник
Цитата сообщения Елена-рыбка

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

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

Огромная HTML-Шпаргалочка
Спасибо
 
Пример Код
   

При наведении на картинку появляется Окошко-подсказка
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. Строка

Цвет определяете сами
    НАЗВАНИЕ СПИСКА
  1. Строка
  2. Строка
  3. Строка


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

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

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


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

 


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









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

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

 

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









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

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

 

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









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

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

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









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

    Название Списка
  • Строка 1
  • Строка 2
  • Строка 3

 
    Название Списка
  • Строка 1
  • Строка 2
  • Строка 3


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

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





 
   

Елена-рыбка

 

Серия сообщений "HTML начинающим и не только":
Часть 1 - Html для начинающих ( часть 2-ая)
Часть 2 - Всё о HTML...начинающим и не только...
...
Часть 12 - Учебник по Html для чайников
Часть 13 - Как поменять код флеш-картинки(на Ли.ру) на html-код для других сайтов.Урок.
Часть 14 - Огромная HTML-шпаргалка из блога Натальи
Часть 15 - Классная шпаргалка HTML!!!! Спасибо Ларисе!
Часть 16 - ТОП 10 HTML ошибок новичков
...
Часть 20 - Шпаргалочка по тегам
Часть 21 - Кладезь для всех начинающих...
Часть 22 - Еще HTML-ШПАРГАЛКА
Рубрики:  ПОЛЕЗНО И ИНТЕРЕСНО
Метки:  
Понравилось: 2 пользователям

lorine   обратиться по имени Воскресенье, 18 Марта 2012 г. 23:29 (ссылка)
Спасибо! Главное теперь все это изучить!
Ответить С цитатой В цитатник
 

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

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

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

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