HTML-Шпаргалочка.

топ 100 блогов Марго28.11.2010
Огромная HTML-Шпаргалочка
 
 


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

HTML-Шпаргалочка.

HTML-Шпаргалочка.

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

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

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

ВАШ ТЕКСТ



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

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

ВАШ ТЕКСТ



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

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

HTML-Шпаргалочка.ВАШ ТЕКСТ



Картинка без отступов , с выравниванием по левому краю
Если поменять атрибут align="left" на align="right" class="pad_right" - то получите Картинку без отступов , с выравниванием по правому краю .
   
Обратите внимание , что ваш текст должен быть поделен на две части HTML-Шпаргалочка. Первая часть пишется -- перед кодом , Вторая -- после .
Первая часть текста HTML-Шпаргалочка. Вторая часть текста

Картинка в середине Текста
Атрибут align="middle" - значит середина
   
HTML-Шпаргалочка.

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

 
HTML-Шпаргалочка.






HTML-Шпаргалочка. ТЕКСТ HTML-Шпаргалочка.


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

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






ТЕКСТ HTML-Шпаргалочка. ТЕКСТ


Картинка между текстом
   
HTML-Шпаргалочка. Рамка растягивается на всю ширину записи .
HTML-Шпаргалочка.ВАША КАРТИНКА


Рамка с разрывом Картинки
   
Добро ПожаловатьРада Вас приветствовать у себя в Блоге
Запись в разрывеОсновная запись


Рамка с разрывом Текста
   
Таблица в 2 ряда и 2 столбца

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







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


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

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

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

ШПАРГАЛОЧКИ
 HTML-Шпаргалочка.  
 HTML-Шпаргалочка.  
 


Используя эту Формулу можно строить и другие таблицы
Ряд 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. Строка


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

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

    НАЗВАНИЕ СПИСКА
    HTML-Шпаргалочка. Строка 1
    HTML-Шпаргалочка. Строка 2
    HTML-Шпаргалочка. Строка 3
    HTML-Шпаргалочка. Строка 4


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


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


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


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


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


    http://img90.imageshack.us/img90/6603/33609040px4.gif">Строка 4

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

    НАЗВАНИЕ СПИСКА
    HTML-Шпаргалочка. Строка 1
    HTML-Шпаргалочка. Строка 2
    HTML-Шпаргалочка. Строка 3
    HTML-Шпаргалочка. Строка 4

 

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


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


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


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


    http://www.liveinternet.ru/images/brandnewsmilies/heart.gif">Строка 4

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

    НАЗВАНИЕ СПИСКА
    HTML-Шпаргалочка. Строка 1
    HTML-Шпаргалочка. Строка 2
    HTML-Шпаргалочка. Строка 3
    HTML-Шпаргалочка. Строка 4

 

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


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


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


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


    http://img.mail.ru/r/blogs/ico_friends.png">Строка 4

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

    НАЗВАНИЕ СПИСКА
    HTML-Шпаргалочка. Строка 1
    HTML-Шпаргалочка. Строка 2
    HTML-Шпаргалочка. Строка 3
    HTML-Шпаргалочка. Строка 4

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


    http://img15.imageshack.us/img15/7746/star0000.gif">Строка 1


    http://img15.imageshack.us/img15/7746/star0000.gif">Строка 2


    http://img15.imageshack.us/img15/7746/star0000.gif">Строка 3


    http://img15.imageshack.us/img15/7746/star0000.gif">Строка 4

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

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

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


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





 
   

 

Шпаргалочку для Вас подготовила HTML-Шпаргалочка.  Елена

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

 

 

Серия сообщений "полезно знать":
Часть 1 - Как убрать рамку вокруг изображения-ссылки?
Часть 2 - Уроки GIF анимации
Часть 3 - Уже даже не смешно....
Часть 4 - ВСЁ О КОМПЬЮТЕРЕ И ЕГО ЗАЩИТЕ
Часть 5 - Чтобы было "под рукой"...
Часть 6 - Урок о том как убрать лишнее с надписей-блестелок..
Часть 7 - Уроки новичку для быстрого освоения компьютера!
Часть 8 - МК по созданию коллажа. 2 в 1
Часть 9 - КАК РАБОТАТЬ СО СКРИНШОТАМИ (ФОТО С ЭКРАНА)
Часть 10 - Что Такое Расширения Файлов И Как Их Увидеть
Часть 11 - Как публиковать сообщения из Word. Еще один способ размещения множества картинок
Часть 12 - Делаем прозрачный фон в Paint Net
Часть 13 - Урок о том как добавить анимацию на вашу картинку
Часть 14 - Как резать/редактировать видео-файл в WINDOWS MOVIE MAKER.
Часть 15 - Поисковики
Часть 16 - Одна кнопка для многих популярных сервисов
Часть 17 - Ненужный объект на фотографии?
Часть 18 - Ubuntu - операционная система, использующая ядро Linux
Часть 19 - Как работать с архиватором WinRar - видео уроки
Часть 20 - Учебник HTML
Часть 21 - Делаем кнопки
Часть 22 - Подробная инструкция для начинающих и чайников: как делать видеоролик
Часть 23 - Видео редактор Movie Maker. Звук
Часть 24 - Книга символов
Часть 25 - Как скачать с Rapidshare бесплатно без проблем и ожиданий?
Часть 26 - ЭТАПЫ СОЗДАНИЯ ВИДЕО
Часть 27 - УЧИМСЯ ДЕЛАТЬ ВИДЕОРОЛИКИ И СЛАЙД-ШОУ
Часть 28 - Nero Multimedia Suite 10.5.10500
Часть 29 - Видеокурсы Ulead Video
Часть 30 - Сегодня я получила анонимную антипатию. Но личности АНОНИМА была установлена!
Часть 31 - Подробная инструкция: как скачать фильм и сделать DVD
Часть 32 - СПАСИБО НАТАЛЬЕ ЗА ПОЛЕЗНОСТИ!
Часть 33 - Самая Лучшая Коллекция Анимационных Картинок и Уроки
Часть 34 - Дизайнерские ссылки, картинки в инете,Фотоклипарты,Шрифты,3Д-модели,Обои
Часть 35 - 20 бесплатных "альтернатив" Photoshop
Часть 36 - Как убрать ненужные процессы из автозагрузки
Часть 37 - Скорость интернета
Часть 38 - Сборник обучающих видеоуроков
Часть 39 - CCleaner - чистильщик жесткого диска
Часть 40 - Онлайн инструменты
Часть 41 - Самоучитель по устранению сбоев и неполадок домашнего компьютера
Часть 42 - Создаем мигающий текст
Часть 43 - Коллекция самоучителей на все случаи жизни.
Часть 44 - О Компьютере
Часть 45 - "Ветер". Вариоэффект, морфинг.
Часть 46 - это интересно
Часть 47 - Все полезности в одном посте!
Часть 48 - Куча полезных программ для вашего компьютера
Часть 49 - Пишем красиво.Генератор текста X-Lines.Ru.
Часть 50 - Смайлики на любой вкус и цвет
Часть 51 - Убираем раздел"Что нового".
Часть 52 - Ссылки на сайты с глиттерами
Часть 53 - Ссылки на сайты с глиттерами
Часть 54 - Таблица цветов
Часть 55 - Как перетащить изображение из браузера в папку (видео)
Часть 56 - Что такое эти кукис? (cookie) Как их чистить?
Часть 57 - Делаем кнопки
Часть 58 - Урок делаю плейлист
Часть 59 - Сервис для поиска качественных бесплатных фотографий
Часть 60 - А знаете ли вы?
Часть 61 - Hot Keyboard Pro пример использования
Часть 62 - Что такое кэш браузера? Как его чистить?
Часть 63 - Скрипты
Часть 64 - Сайт по созданию снега и дождя на картинках.
Часть 65 - Как восстановить корзину на рабочем столе
Часть 66 - Как бесплатно скачать с DepositFiles, LetitBit, FileFactory, YouTube?
Часть 67 - Текст для Ваших сообщений в (формат 3d)
Часть 68 - 5 способов изменения пароля пользователя в Windows XP
Часть 69 - 5 способов изменения пароля пользователя в Windows XP
Часть 70 - 5 способов изменения пароля пользователя в Windows XP
Часть 71 - Как бесплатно скачивать файлы с Turbobit.net
Часть 72 - Кнопки на любой вкус
Часть 73 - Полезные советы для пользователей Mozilla Firefox
Часть 74 - Как перемещать курсор кнопками клавиатуры
Часть 75 - Буквально всё для новичков и не только...
Часть 76 - Полезные советы для пользователей Mozilla Firefox
Часть 77 - Полезные символы.
Часть 78 - Браузеры. Что это такое? С чем их едят? Где их взять?
Часть 79 - Знакомимся с браузером - Mozilla Firefox (часть 1
Часть 80 - 30 советов По составлению Заголовков
Часть 81 - ПОЛЕЗНОСТИ ДЛЯ ДНЕВА...(от Аквилегия)
Часть 82 - БРОДИЛКА для - milana07
Часть 83 - Подбор цветов для сайта
Часть 84 - Огромная HTML-Шпаргалочка

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

 
 

Оставить комментарий

Предыдущие записи блогера :
Архив записей в блогах:
Один известный и убеждённый украинский националист согласился дать интервью в ЖЖ. Вы можете задать ему интересующие вас вопросы и он ответит на них в самое ближайшее время. Вопросы, в принципе, могут быть любыми, но желательно, чтобы на них было возможным дать содержательный и ...
Вчера решила избавиться-таки от старых, времен учебы в педагогическом училище, тетрадей. Я на это долго решалась, почему-то было жалко, все думала - а вдруг пригодятся... Теперь уверена на 100%, что не пригодятся. Листала, вспоминала учебу в училище, читала записки на полях и последних ...
Недостающее 8-е звено плана по свержению Лукашенко: о чём не сказал президент 16 сентября президент Белоруссии А. Лукашенко выступил перед политическим активом республики с детальным изложением плана смены режима в стране и отстранения его от власти. Назвав авторов этих замыслов ...
Законопроекты об ужесточении законодательства о вейпах могут быть внесены в Госдуму в ближайшее время, в том числе о запрете продавать вейпы в павильонах, а также о кратном увеличении штрафов за нарушение уже действующих запретов, рассказал РИА Новости их инициатор, глава комитета ГД по ...
Я поняла, что мне больше нет смысла покупать обычную одежду, потому что 80 процентов времени я ношу спортивную)). Помню времена, когда у меня были одни лосины, один топ и одни кроссовки. Я недоумевала, зачем нужно несколько комплектов? Теперь добрую половину моего шкафа занимают ряды ...