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

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

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

 

 -—татистика

—татистика LiveInternet.ru: показано количество хитов и посетителей
—оздан: 24.11.2009
«аписей: 1006
 омментариев: 928
Ќаписано: 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>

    –убрики:  «аработок на сайте, блоге
    “еори€
    ¬ебмастерам

    ћетки:  

     ак создать свой сайт самому. »нструкци€ начинающим

    „етверг, 28 январ€ 2010 г. 02:21 + в цитатник
    Advayta ( ак_заработать_в_сети) все записи автора Ёто цитата сообщени€ BraveDefender [ѕрочитать целиком + ¬ свой цитатник или сообщество!]

     ак создать свой сайт самому. »нструкци€ начинающим

    http://zvirec.com/

    «а ссылку спасибо Ќаталь€_ѕетрова11.

    я планирую написать пост, о том, как вчера за 15-минут сделал простой сайт на яндексе (http://ebsite.narod.ru). Ёто, конечно, просто пример, без смыслового содержани€, но можно же сделать и нормально. ƒл€ этого не нужно знать ни HTML, ни CSS... Ќо если вы будете знать, хуже точно никому не будет :)

    —одержание сайта zvirec.com:

    Ўаг 1: —оздаем сайт

    •  раткий обзор
    • ”чебник HTML
    • ”чебник CSS
    • ”чебник ‘отошоп
    • —оздаем сайт вместе!
    • —ервисы в помощь
    • ”роки по теме

    Ўаг 2: –азмещаем в интернет

    •  раткий обзор
    • ƒомен
    • ’остинг
    • ”роки по теме

    Ўаг 3: –аскручиваем сайт

    •  раткий обзор
    • —емантическое €дро
    • ¬нутренн€€ оптимизаци€
    • ¬нешн€€ оптимизаци€
    • ƒальнейша€ поддержка и обновление
    • ”роки по теме

    Ўаг 4: «арабатываем

    •  раткий обзор
    •  онтекстна€ реклама
    • ѕродажа ссылок
    • «аработок в партнерских программах
    • ”роки по теме
       
    –убрики:  «аработок на сайте, блоге
    “еори€
    ¬ебмастерам

    ћетки:  

    ѕодробный учебник-справочник HTML, CSS и много другого

    „етверг, 28 январ€ 2010 г. 00:34 + в цитатник
    Advayta ( ак_заработать_в_сети) все записи автора Ёто цитата сообщени€ BraveDefender [ѕрочитать целиком + ¬ свой цитатник или сообщество!]

    ѕодробный учебник-справочник HTML, CSS и много другого

    http://www.htmlbook.ru/

    —айт htmlbook.ru посв€щен €зыку HTML, CSS, веб-дизайну, графике и процессу создани€ сайтов. “ут есть справочник, учебные статьи, форум, рецепты...

    ≈сли вы впервые попадете на этот сайт, рекомендую ознакомитьс€ с разделом Ўаг за шагом, где рассказываетс€, что такое HTML и CSS.

    P.S. я думал, что этот подробнейший и самый попул€рный онлайн-справочник HTML и т.д. известен всем. Ќо не устаю поражатьс€, как цитируютс€ посты, полностью содранные со страниц этого учебника.

    Update: мои-то ѕ„, конечно, про HTML всЄ знают.

    –убрики:  «аработок на сайте, блоге
    “еори€
    ¬ебмастерам

    ћетки:  

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