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

Поиск сообщений в Как_заработать_в_сети

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

 

 -Статистика

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

Шпаргалка по HTML № 2

Дневник

Суббота, 15 Мая 2010 г. 22:28 + в цитатник
Advayta (Как_заработать_в_сети) все записи автора

Оформление текста
(рекомендую спец. страничку TEXT):

Перечёркнутый текст: ТЕКСТ

Подчёркнутый текст: ТЕКСТ

Полужирный текст: ТЕКСТ

Полужирный крупный: ТЕКСТ

Курсивный текст: ТЕКСТ

Маленький текст: текст

Неразрывный пробел:

Центрирование:

текст (картинка) по центру


Выравнивание текста по правому краю поста:

Равномерное выравнивание текста по всей ширине поста:

Отступ (для цитат и определений, текст отделен пустой строкой и отступ слева 8 пробелов):

Бегущая строка (рекомендую Бегущая строка):
бегущая, как олень, строка

Вместо текста можно вставить картинку:

Код этой картинки:

Сноска вверху: ТЕКСТсноска

Сноска внизу: ТЕКСТсноска

Линия:


ее код:
Ударение:
Cтавим после нужной буквы:

“Закрепитель” (фиксирует текст так, как и расположите его в поле поста):
Я
  Пешу
       Лесинкой!!!

РАЗМЕР ШРИФТА:
Уменьшить текст: текст - 2

Увеличить текст на 1 пункт: текст

Увеличить текст на 2 пункта: текст

Увеличить текст на 3 пункта: текст

Увеличить текст на 4 пункта: текст

ЦВЕТ ШРИФТА:

КРАСНЫЙ: красный текст

ЖЕЛТЫЙ: желтый текст

ФИОЛЕТОВЫЙ: фиолетовый текст

ЗЕЛЕНЫЙ: зеленый текст

СИНИЙ: синий текст

ФУКСИЯ: фуксия текст

Таблица “базовых” цветов (вводим “Имя” или “Код”):


ИмяКодИмяКодИмяКодИмяКод
aqua#00FFFF green#008000 navy#000080 silver#C0C0C0
black#000000 gray#808080 olive#808000 teal#008080
blue#0000FF lime#00FF00 purple#800080 white#FFFFFF
fuchsia#FF00FF maroon#800000red#FF0000 yellow#FFFF00
  • Посмотреть сочетаемость цветов
  • Таблица безопасных цветов
  • Все цвета Интернета

    ВИД ШРИФТА:
    Шрифт этого текста “Monotype Corsiva”

    Все вышеперечисленные атрибуты тега font можно объединять в одном теге:
    Шрифт этого текста “Monotype Corsiva”
    код этого текста:

    Оформление ссылок (рекомендую спец. страницу Ссылки):

    Как вставить ссылку на веб-страницу:

    Как сделать, чтобы картинка была ссылкой на веб-страницу:

    Как вставить ссылку на веб-страницу, чтоб она открылась в новом окне:


    Спец. теги ЖЖ:

    Элементарный жж-кат (с “Read more”):

    жж-кат с ВАШИМ ПОДЗАГОЛОВКОМ:

    Работу ката не видно в режиме “ПРОСМОТР”
    Как в сообщение вставить жж-пользователя чтобы это выглядело, например, так: wildmale

    Сссылка на сообщество, например: aforism
    делается точно так же:

    Если надо так:wildmale
    или так: comm - идем СЮДА

    Вместо wildmale пишем Дикий самец:

    Ежели надо с “человечком”: Дикий самец:

    Скопировав код, не забудьте поменять реквизиты.
    Вставка МЕДИА-файлов:
    Видео, флеш и проч. в ЖЖ вставляются так:


    Публикация картинок:

    Код любой картинки в сети в простом варианте выглядит так:
    <img src="http://.../...jpg">
    Уникальный URL (http://.../...jpg) выдает картинке хостинг, куда ее необходимо закачать с компа.
    Совсем “чайникам” рекомендую (для ЖЖ):
    1.Открываешь ljplus.ru
    2. Регистрируешься
    3. Жмешь: КАРТИНКИ-ЗАГРУЗИТЬ-ОБЗОР-ЖМИ УЖЕ!
    4.Смотришь на HTML-коды и копируешь нужный в поле поста или каммента
    5. Постишь. Становишься знаменитым.
    В каменты картинки ставятся аналогично, кат не работает.

    Как сделать, чтобы текст «обтекал» картинку?
    Легко - картинка слева, текст справа:
    добавляем в код картинки:
    align=left hspace=20
    Код картинки примет вид:
    <img src="http:…" align=left hspace=20>
    Помни:
    align=left – картинка слева, текст справа
    align=right - картинка справа, текст слева
    hspace=20 - расстояние между текстом и картинкой 20 пиксел по горизонтали
    vspace=20 - расстояние между текстом и картинкой 20 пиксел по вертикали
    Код картинки с плавным обтеканием текстом справа и снизу (или сверху):
    <img src="http:…" align=left hspace=20 vspace=15>

    Прекратить обтекание и вернуть текст под картинку можно тэгом <br>
    Закрывать не надо, он работает один. <br> выполняет перенос на следующую строку. В блогсервисах и редакторах текста его заменяет нажатие Enter.
    <br><br><br> - три пустые строки.

    Вставить две и более картинки горизонтально:
    - все, заключенное в этот контейнер будет находиться на одной строке. Применять с осторожностью, можно деформировать пост.

    Регулируем расстояние меж картинками по-горизонтали:
    С помощью “неразрывного пробела”:  &nbsp;
    Расстояние, равное 8 пробелам будет выглядеть так:

    Вставляется меж кодов картинок, есс-но

    Если надо всплывающую подсказку при наведении курсора на картинку, как здесь: - введите в код картинки title="ТЕКСТ"

    Если надо цветную рамку , добавьте в код картинки: - задана красная рамка толщиной 5 пикселей

    Чтоб быстро вставить картинку с другого сайта, вставьте в пост:

    затем войдите в “Свойства” картинки на этом сайте, скопируйте ее URL и вставьте в код меж кавычек

    Изменить размер картинки можно с помощью атрибутов width (ширина) и height (высота). Вставьте в код картинки, например, width=300 и ваша картинка будет шириной 300 пикселов, высота подгонится пропорционально. Браузер при этом все равно подгружает изначальную картинку, и если та весила 3МБ, то меньше не станет:)

    Как запостить галерею? Узнай ЗДЕСЬ
    Как запостить слайдшоу? Узнай ЗДЕСЬ


    Окошечко для вставки кода, типа:

    получаем так:

    где rows и cols определяют площадь окна

    Можно сделать покрасивше:

    Кнопка-ссылка на веб-страничку
    Например, на эту:

  • Рубрики:  Заработок на сайте, блоге
    Полезные программы и сервисы
    Вебмастерам

    Метки:  

    Краткий справочник по HTML

    Дневник

    Вторник, 02 Марта 2010 г. 02:39 + в цитатник
    Advayta (Как_заработать_в_сети) все записи автора

    Краткий справочник по HTML

    1. Элементы WEB-страницы

    Таблица 1.1. Организующие страницу элементы:
    Элемент Назначение
    <html> ... </html> Начальный и заключительный тег HTML-документа
    <head> ... </head> Объявление заголовка WEB-страницы, содержит описание страницы
    <title> ... </title> Элемент определяет название страницы, которое выводится в строке заголовка окна браузера. Располагается внутри заголовка <html> WEB-страницы, учитывается при индексации страницы поисковыми машинами
    <body> ... </body> Между этими тегами находится основное содержание страницы

    Атрибуты:
    Атрибут Назначение
    bgcolor="значение" Задает фоновый цвет страницы. Переменная "значение" представлена в виде текстовой величины (принятые в WEB названия цветов), либо в виде шестнадцатиричного числа, обозначающего цвет - "#ddf112"
    background="адрес" Задает фоновый рисунок страницы. "значение" - адрес файла изображения, которое станет фоновым рисунком страницы. При этом рисунок не растягивается, а заполняет всю страницу путем клонирования


    <base href="адрес"> Определение "базового" URL каталога сайта. Все относительные ссылки на странице, содержащей этот элемент будут определяться относительно него. Располагается внутри элемента <head>
    <!-- ..... --> Комментарий. Может располагаться в любом месте страницы. На экран браузера не выводится. Надежное средство для борьбы со склерозом..

    2. Элементы форматирования текста

    Таблица 2.1. Элементы стилей абзаца и списков:
    Элемент Назначение
    <h1> ... </h1> Заголовки первого уровня
    <h2>... </h2> Заголовки второго уровня
    <h3> ... </h3> Заголовки третьего уровня
    <p> ... </p> Заголовки четвертого уровня
    <h5> ... </h5> Заголовки пятого уровня
    <h6> ... </h6> Заголовки шестого уровня
    <p> ... </p> Простой абзац. Приведенные атрибуты могут быть использованы со всеми элементами, определяющими стиль абзаца, в том числе и с заголовками.

    Атрибуты:
    Атрибут Назначение
    align="значение" Расположение текста абзаца относительно границ окна (выравнивание текста). Может принимать значения: "left" - выравнивание по левому краю, "right" - выравнивание по правому краю, "justify" - выравникание по ширине и "center" - выравнивание по центру
    <blockquote> ... </blockquote> Виртуальное выделение абзаца путем добавления отступа слева
    <pre> ... </pre> Преформатированный абзац. Выводится в окне браузера точно также, как был набран в редакторе. Учитывает пробелы и переводы строки при вводе. Результат выводится на экран моноширинным шрифтом
    <br> или, <br> Разрыв строки. Браузером распознается и выполняется как перевод строки. Может быть использован внутри элементов, определяющих абзац
    <hr> или <hr> Рисует горизонтальную линию

    Атрибуты:
    Атрибут Назначение
    width="значение" Длина линии, указанная либо в относительных единицах (процентах) либо в абсолютных - пикселях
    size="значение" Ширина линии в пикселах
    align="значение" Расположение: выравнивание по левому, правому краю либо по центру
    noshade="noshade" Изменяет внешний вид линии, убирая тень линии
    <ol>
    <li>..</li>
    <li>..</li>
    </ol>
    Нумерованный список

    Атрибуты:
    Атрибут Назначение
    type="значение" Значение определяет вид нумерации:
    "A" - Прописные буквы
    "a" - Строчные буквы
    "I" - Большие римские цифры
    "i" - Малые римские цифры
    "1" - Арабские цифры (по умолчанию)
    start="значение" Указывает, какое значение для данного списка будет являться стартовым
    <ul>
    <li>..</li>
    <li>..</li>
    </ul>
    Маркированный список.

    Атрибуты:
    Атрибут Назначение
    type="значение" Значение определяет вид маркера:
    "disc" - Кружок (по умолчанию)
    "square" - Квадратик
    "circle" - Кольцо
    Списки различных типов могут быть вложены один в другой. В этом случае отдельная строка списка должна содержать полностью оформленный список нижнего подуровня
    Таблица 2.2. Логические стили форматирования текста WEB-страницы:
    Элемент Назначение
    <em> ... </em> Выделение
    <strong> ... </strong> Усиленное выделение
    <cite> ... </cite> Цитата или ссылка на внешний источник
    <dfn> ... </dfn> Исходный код программы
    <samp> ... </samp> Пример работы программы, часто отображается так же, как и предыдущий
    <kbd> ... </kbd> Текст, вводимый с клавиатуры
    <var> ... </var> Переменная или значение
    <q> ... </q> Цитируемый текст
    <abbr> ... </abbr> Аббревиатура
    <acronym> ... </acronym> Акроним
    Таблица 2.3. Физические стили форматирования текста WEB-страницы:
    Элемент Назначение
    <b> ... </b> Жирный
    <i> ... </i> Курсив
    <tt> ... </tt> Моноширинный
    <u> ... </u> Подчеркнутый
    <big> ... </big> Увеличенный размер
    <small> ... </small> Уменьшенный размер
    <sub> ... </sub> Нижний индекс
    <sup> ... </sup> Верхний индекс

    3. Добавление объектов

    Таблица 3.1. Добавление объектов на страницу:
    Элемент Назначение
    <img> Вставка изображения на страницу

    Атрибуты:
    Атрибут Назначение
    src="адрес" указывает URL-адрес, по которому находится файл изображения. Может быть как относительным, так и абсолютным
    alt="значение" Содержит текст, который выводится на экран браузера при невозможности вывести изображение
    align="значение" Определяет поряддок вывода текста относительно боковых сторон изображения:
  • "top" - текст располагается рядом с верхней границей изображения;
  • "middle" - текст располагается рядом с серединой изображения;
  • "bottom" - текст располагается рядом с нижней границей изображения (по умолчанию)


  • Еще два параметра, делающие изображения "плавающими", при этом текст обтекает изображение:
  • "right" - помещает изображение к правой границе WEB-страницы;
  • "left" - помещает изображение к левой границе WEB-страницы
  • width="значение" Ширина рисунка (резервируется место под изображение, создавая рамку)
    height="значение" Высота рисунка (резервируется место под изображение, создавая рамку)
    <a> ... </a> Вставка гиперссылки на страницу. Между начальным и закрывающим тегами должен находиться текст или картинка, которые отображают гиперссылку на экране браузера

    Атрибуты:
    Атрибут Назначение
    href="адрес" указывает URL-адрес, по которому находится документ, который должна открывать ссылка. Может быть как относительным, так и абсолютным
    title="значение" Содержит поясняющий текст, который выводится на экран браузера при наведении курсора мыши на гиперссылку
    name="значение" Устанавливает закладку на странице, используемую для переходов внутри страницы
    target="_blank" Позволяет автоматически открывать гиперссылку в новом окне
    Пример: <a href="Адрес" title="Заголовок" target="_blank">Текст ссылки или картнка</a>
    Таблица 3.2. Добавление таблиц на страницу:
    Элемент Назначение
    <table> ... </table> Вставка таблицы на страницу

    Атрибуты:
    Атрибут Назначение
    bgcolor="значение" Фоновый цвет таблицы. Значение - WEB-название цвета или его шестнадцатиричный код

    * - может применяться с элементами <td> и <tr>
    width="значение" ширина таблицы. Задается либо в пикселях (абсолютный размер), либо в процентах от ширины страницы (относительный размер)

    * - может применяться с элементом <td>
    align="значение" Определяет порядок вывода таблицы относительно границ WEB-страницы:
  • "left" - таблица располагается слева у границы страницы, обтекается текстом;
  • "right" - таблица располагается справа у границы страницы, обтекается текстом;
  • "center" - таблица расположена по центру страницы.
  • cellpadding="значение" определяет расстояние между границами ячеек и их содержимым (в пикселах)
    cellspacing="значение" задает расстояние в пикселах между ячейками таблицы
    border="значение" задает ширину внутренних и внешних границ таблицы в пикселах
    <tr> ... </tr> Определяет строку таблицы

    Атрибуты:
    Атрибут Назначение
    align="значение" Определяет порядок вывода данных в ячейках:
  • "left" - с выравниванием по левому краю ячеек;
  • "right" - с выравниванием по правому краю ячеек;
  • "center" - с выравниванием по центру ячеек

  • * может использоваться с элементом <td>
    valign="значение" Определяет порядок вывода данных в ячейках:
  • "top" - вверху ячеек;
  • "bottom" - внизу ячеек
  • "center" - по центру ячеек
    * может использоваться с элементом <td>
  • * См. атрибуты элемента <table>
    <td> ... </td> Определяет ячейки таблицы

    Атрибуты:
    Атрибут Назначение
    colspan="значение" задает количество ячеек для объединения в строке таблицы
    rowspan="значение" задает количество ячеек для объединения в столбце таблицы


    * См. атрибуты элемента <tr> и <table>
    <caption> ... </caption> Вставка описания таблицы

    Атрибуты:
    Атрибут Назначение
    align="значение" определяет размещение названия таблицы:
  • "top" - над таблицей;
  • "bottom" - под таблицей.



  • Пример HTML-кода страницы


    <html>
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">   <!-- Задание русской кодировки "Windows-1251" -->
         <meta http-equiv="content-language" content="ru, russian">    <!-- Задание русского языка "ru, russian" -->
         <title>Заголовок страницы</title>
         <meta name="keywords" content="Здесь пишутся ключевые слова страницы">
         <meta name="description" content="Здесь кратко описывается страница">
    </head>
    <body>

    <h1>Заголовок страницы</h1>
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr><td width="200">
         <a href="page1.html" title="Страница 1">Страница 1</a><br>
         <a href="page2.html" title="Страница 2">Страница 1</a><br>
         <a href="page3.html" title="Страница 3">Страница 1</a><br>
         <a href="page4.html" title="Страница 4">Страница 1</a><br>
         <a href="page5.html" title="Страница 5">Страница 1</a><br>
         <a href="page6.html" title="Страница 6">Страница 1</a><br>

         <a href="http://www.mail.ru/" target="_blank">Внешняя ссылка</a><br>
    </td><td width="100%">
         <h2 align="center">Подзаголовок страницы</h2>    <!-- Заголовок второго уровня выравнен по центру -->
         <p>Первый тестовый абзац страницы</p>
         <p>Второй тестовый абзац страницы</p>
         <p>Третий тестовый абзац страницы</p>
    </td></tr>
    </table>

    </body>
    </html>

    Рубрики:  Заработок на сайте, блоге
    Теория
    Вебмастерам

    Метки:  

     Страницы: [1]