понедельник, 17 августа 2015 г.

Памятка по использованию HTML-тэгов и CSS

14:26 By , No comments


HTML & CSS
Содержание
  1. Введение
  2. Форматирование шрифта
  3. Выравнивание текста и форматирование параграфов
  4. Отступы объектов
  5. Форматирование списков
  6. Картинки
  7. Ссылки на другие страницы
  8. Cсылки для перехода к тексту внутри страницы
  9. Таблицы
  10. Специальные тэги
  11. Специальные символы
  12. Тэги и стили в LiveJournal.com


Введение
Памятка призвана помочь начинающим web-разработчикам и блоггерам. Предлагаемые инструмены — это тэги HTML (HyperText Markup Language или «язык гипертекстовой разметки», стандартный язык разметки документов в Интернет) и параметры форматирования CSS (каскадные таблицы стилей, формальный язык описания внешнего вида документа, написанного с использованием языка разметки). Параметры форматирования CSS страиваются в тэги HTML с помощью атрибута STYLE.
Если данной памятки для Вас не достаточно, рекомендуем воспользоваться справочниками HTML и CSS.
* В основу памятки легли материалы [info]alex_inside.
Форматирование шрифта
Базовые тэги для работы с текстом:
<p> Обычный абзац с отступом снизу. </p>
* С тэгами <p> </p> можно использовать другие тэги, такие как <b>, <i>, <s> и т.д.
* Внутри тэга <p> можно использовать атрибуты для изменения свойств, такие align, style и т.д.
<span> Текст, которому с помощью стиля можно менять свойства. </span>
<div> Ограниченная область, которой можно менять свойства (положение, границы, отступы, свойства содержимого и т.д.). </div>
* По умолчанию границы областей не видны. На одной странице может быть сразу несколько областей <div>.
Форматирование текста:
<b> Полужирный текст </b>
<i> Выделение текста курсивом </i>
<u> Подчёркнутый текст </u>
<s> Зачёркнутый текст </s>
<small> Маленький шрифт </small>
<big> Большой шрифт </big>
Знак сноски <sup> сверху </sup> или индекс <sub> снизу </sub> от текста
<acronym title="Всплывающая подсказка"> Текст c подсказкой </acronym>
Размеры шрифта:
<font style="font-size:13pt;"> Шрифт размером 13 пунктов </font>
<font style="font-size:15pt;"> Шрифт размером 15 пунктов </font>
<font style="font-size:9px;"> Шрифт размером 9 пикселей </font>
<font style="font-size:12px;"> Шрифт размером 12 пикселей </font>
<font style="font-size:15px;"> Шрифт размером 15 пикселей </font>
<font size="2"> Шрифт 2-го размера (может быть от 1-го до 7-го) </font>
<font size="4"> Шрифт 4-го размера </font>
<font size="+1"> Шрифт на 1 размер больше обычного </font>
Заголовки:
<h1> Заголовок 1-го уровня </h1>
<h2> Заголовок 2-го уровня </h2>
<h3> Заголовок 3-го уровня </h3>
<h4> Заголовок 4-го уровня </h4>
<h5> Заголовок 5-го уровня </h5>
<h6> Заголовок 6-го уровня </h6>
Возможные варианты размеров шрифтов (визуальная оценка) доступны здесь.
Оформление текста с помощью шрифтов:
<font style="font-family:Comic Sans Ms;"> Шрифт Comic Sans Ms </font>
<font style="font-family:Monotype Corsiva;"> Шрифт Monotype Corsiva </font>
<font style="font-family:Tahoma; font-size:13pt;"> Tahoma, 13 пикселей </font>
Возможные варианты типов шрифтов (наименования и визуальная оценка) доступны здесь.
Оформление текста с помощью цвета:
<font color="#0000ff"> Синий текст </font>
* Цифра #0000ff означает синий цвет в RGB палитре.
<font color="red"> Красный текст </font>
* Можно пользоваться стандартными словесными обозначениями цветов: Red, Green, Blue и т.д.
<div style="background-color:#eeeeff;"> Голубой фон </div>
* У фона тоже можно менять цвет. Обратите внимание, что аттрибут style использует синтаксис CSS.
<div style="background-color:lightgray; color:#0000ff;"> Синий текст, серый фон </div>
Некоторые предопределённые цвета:
Black White Red Green Blue Purple Firebrick Maroon OrangeRed MidnightBlue CornflowerBlue
Cyan Yellow Magenta DarkGreen DarkGoldenrod Gold Orchid BlueViolet Burlywood PeachPuff
Некоторые цвета в шестнадцатиричном коде — интенсивность красного, зелёного и синего (RRGGBB):
#000000 #FFFFFF #FF0000 #00FF00 #0000FF #FF00FF #FF4444 #FF9999 #FFCCCC #9999FF #FF99FF#DDDDDD #FFE4C4 #CCCC99 #FF8DC #FA8072 #990000 #FF3030 #000080 #000066 #0000CD#AFEEEE #006400 #66FF00 #00B800 #DAA520 #FFCC33 #FFA500 #C71585 #8B008B #CC33FF
Возможные варианты палитры цветов и их кодов/наименований доступны здесь.
Оформление текста с использованием тени/подсветки:
Свойство text-shadow имеет четыре параметра: X Y амплитуда цвет.
X — горизонтальное смещение тени/подсветки к тексту. Положительное значение — смещение вправо, отрицательное значение — смещение влево.
Y — вертикально смещение тени/подсветки к тексту. Положительное значение — смещение вниз, отрицательное значение — смещение вверх.
Амплитуда — чем выше значение, тем больше степень размытия.
Цвет — тёмные тона дадут тень, светлые тона — «подсветку».
Примеры использования:
<font style="text-shadow: black 0 0 10px; color:white;">
Только тень </font>
<font style="text-shadow: 1px 1px 1px #000; color: #f9f5ed;">
Tahoma с тенью </font>
<font style="text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; color: #ddcca3;">
Tahoma с контуром </font>
<font style="text-shadow: -1px -1px #666, 1px 1px #FFF; color: #ddcca3;">
Tahoma вдавленный </font>
<font style="text-shadow: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF; color:#ddcca3;">
Tahoma объёмный </font>
<font style="text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87; color:DarkGray;">
Tahoma неоновый </font>
<font style="text-shadow: 0 0 0.2em #8F7; color:DarkGray;">
Tahoma неоновый </font>
<font style="text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F; color:Black;">
Tahoma неоновый </font>
<font style="text-shadow:3px 3px 10px red,-3px -3px 10px yellow;color: #101921;">
Tahoma, много оттенков </font>
Выравнивание текста и форматирование параграфов
Выравнивание текста:
<p align="left"> Выравнивание текста по левой стороне </p>
<p align="center"> Выравнивание текста по центру </p>
<center> Отцентрированый текст </center>
<p align="right"> Выравнивание текста по правой стороне </p>
<p align="justify"> Выравнивание текстов по обеим сторонам — для текстов, имеющих длину более одной строки</p>
<p style="text-align:justify;"> Вариант выравнивания текстов по обеим сторонам с использованием параметра форматирования CSS </p>
Оформление сносок (комментариев) с отступом абзаца:
<blockquote>
Процитированый в отдельном блоке текст
у которого будет небольшой отступ слева.
</blockquote>
Форматирование параграфов и областей:
<p style="text-indent:40px;">
<div style="float:right; margin:8px;padding:6px; border:1px solid #bbbbbb; width:400px;">
Врезаный, обтекающий другим текстом, текст с правого краю с выравниванием слева, с серой рамкой и отступом от рамки снаружи в 8 пикселей
</div>
Этот блок вставлен в текст слева перед (!) словом «Привет!»
Привет! В этом абзаце первое предложение будет с "красной" строки, т.е. с отступом. Прямо как в книгопечати. Правда, в Интернете это редкая практика. Абзацы должны разделяться просто пустым промежутком.
</p>
<div style="width:200px;">
Этот абзац будет написан с фиксированой шириной в 200 пикселей. А если добавитьstyle="width: 200px; float:right;" тогда он ещё и будет висеть справа. Смотрите пример чуть ниже.
</div>
<pre>
   Преформатированый текст
   сохраняет отступы слева и   между   словами
             и устанавливает те отступы, что вы укажите пробелами.
     Предупреждение! Тэг не делает переноса строки автоматом!
</pre>
<div align="right">
Текст с правого краю в две строчки,
с выравниванием справа.
</div>
<div style="float:right;">
Текст с правого краю в две строчки,
с выравниванием слева.
</div><br clear="all">

<marquee> Бегущая влево строка. </marquee>
<marquee direction="right"> Бегущая вправо строка. </marquee>
<marquee behavior="alternate"> Бегущая от края к краю строка. </marquee>
<marquee direction="up" scrollamount="1" scrolldelay="0" height="32">

Скролящийся вверх
текст с полезной
информацией.</marquee>
<marquee direction="down" scrollamount="1" scrolldelay="0" height="32">

Скролящийся вниз
текст с полезной
информацией.</marquee>
Вертикальная перемотка большого текста:
<div style="overflow:auto; height:80px; width:450px; padding:8px; border:1px solid #ccc;">
Лорем ипсум долор сит амет, консектетур адиписицинг элит, сед до эиусмод темпор инцидидунт ут лаборе эт долоре магна аликуа. Ут эним админим вениам, кьюс ноструд эксерцитатьён ульламко лаборис ниси ут аликуип экс эа коммодо консекуат. Дьюс ауте ируре долор ин репрехендерит ин волуптате велит эссе киллум долоре эу фугиат нулла париатур. эксцептеур синт оккаекат купидатат нон пройдент, сунт ин кульпа куй оффициа десерунт моллит аним ид эст лаборум.
</div >
Вертикальная перемотка большого текста c HTML-кодом:
<textarea cols="55" rows="5">

</textarea>
Отступы объектов
Границы областей в разделе сделаны видимыми (пунктиром) для оценки отступов.
<div style="margin-top:10px;"> Область с отступом сверху в 10 пикселей </div>
<div style="margin-left:20px;"> Область с отступом слева в 20 пикселей </div>
<div style="margin-right:250px;"> Область с отступом справа в 250 пикселей </div>
<div style="margin-bottom:15px;"> Область с отступом снизу в 15 пикселей </div>
<div style="margin:10px 20px 150px 10px;"> Область с отступами по всем четырём сторонам </div>
* Оступы style="margin: сверху справа снизу слева;"
Форматирование списков
Используем тэг <ul> для маркированных списков:
  • Один из пунктов списка
  • Другой такой пункт
  • Ещё один пункт.
<ul>
      <li> Один из пунктов списка </li>
      <li> Другой такой пункт </li>
      <li> Ещё один пункт. </li>
</ul>
Заменяем тэг <ul> на <ol> и список становится пронумерованным, автоматически:
  1. Один из пунктов списка
  2. Другой такой пункт
  3. Ещё один пункт.
<ol>
      <li> Один из пунктов списка </li>
      <li> Другой такой пункт </li>
      <li> Ещё один пункт. </li>
</ol>
* Закрывающий тэг </li> не обязателен для использования.
Картинки
<img src="http://img.cx/img/primer.jpg"> — пример вставки картинки.
<img src="http://img.cx/img/primer.jpg" width="200px"> — размер картинки по ширине.
<img src="http://img.cx/img/primer.jpg" height="500px"> — размер картинки по высоте.
Изображение со всплывающим текстом при наведении на него курсора:
<img src="http://img.cx/img/primer.jpg" title="Этот текст появится при навелении курсора на картинку!" alt="А этот при её отсутсвии">
Изображаение слева, текст обтекает картинку справа и имеет горизонтальный отступ от неё в 6 пикселей:
<img src="http://img.cx/img/primer.jpg" style="float:left; margin:0 6px 6px 0">текст
Пишем текст поверх картинки:
<div style="background: url(http://www.hdsw.ru/pics/copyright-vi.gif) no-repeat top left;">
Старайтесь не злоупотреблять этим вариантом,
потому что данный способ часто затрудняет
читаемость текста, в зависимости от картинки.
</div>
Картинка в выделенной области, с прокруткой:
<div style="overflow: scroll; width:495px;"><img src="http://www.hdsw.ru/pics/IMG_1734.jpg"></div>
Отображаемую ширину указываем внешнему div-контейнеру в атрибуте width в пикселях. Для вертикальной прокрутки, указываем высоту height. Ширина и высота должна быть меньше чем у картинки.
Ссылки на другие страницы
<a href="http://www.hdsw.ru"> Линк на HD Systems Worldwide </a>
Открыть ссылку в новом окне:
<a href="http://www.hdsw.ru" target="_blank"> Линк на HD Systems Worldwide </a>
Всплывающая подсказка, отображающаяся при наведении курсора на ссылку:
<a href="http://www.hdsw.ru" title="HD Systems Worldwide"> Ссылка на сайт </a>
Картинка-ссылка (баннер):

<a href="http://www.hdsw.ru" title="HD Systems Worldwide"><img src="http://www.hdsw.ru/wp-content/uploads/hdsw_ban_88_31.png"></a>
Кнопка-ссылка (форма):
<form action="http://www.hdsw.ru/" target="_blank"><input type=submit value="Зайти на www.hdsw.ru"></form>
Cсылки для перехода к тексту внутри страницы
<a name="oglavlenie"></a> Демо-Оглавление
(Нажмите на название, чтобы проскроллить вниз к главе:)
↓ <a href="#vstuplenie">Вступление</a> — (тут мы ставим ссылку # на якорь «vstuplenie»)
↓ <a href="#interes">Интересная глава</a>
↓ <a href="#ssylki">Заключение и ссылки</a>
<a name="vstuplenie"></a> Наше клёвое вступление. — (тут якорь «vstuplenie» перед нужным текстом)
<a name="interes"></a> Текст интересной главы.
↑ <a name="ssylki" href="#oglavlenie">Перейти в оглавление</a>   — (тут ссылка является одновременно и якорем)
Если нужно дать ссылку на другой сайт, то # идёт в конце строки линка URL.Например, ссылка на якорь oglavlenie на данной странице: http://www.hdsw.ru/?p=33#oglavlenie
Таблицы
Пример простейшей таблицы:
Строка 1, колонка 1Строка 1, колонка 2
Строка 2, колонка 1Строка 2, колонка 2
<table border="1">
    <tr>
        <td>Строка 1, колонка 1</td>
        <td>Строка 1, колонка 2</td>
    </tr>
    <tr>
        <td>Строка 2, колонка 1</td>
        <td>Строка 2, колонка 2</td>
    </tr>
</table>
* При использовании параметра border="0" границы таблицы становятся невидимыми.
Другой пример таблицы:
#Заголовок в колонке 2Заголовок в колонке 3
1Строка 2, колонка 2Строка 2, колонка 3
2Строка 3, колонка 2Строка 3, колонка 3
<table width="100%" border="1" cellspacing="0" cellpadding="4">
   <tr align="center" style="background-color:#AFEEEE;">
        <td><b>#</b></td>
        <td><b>Заголовок в колонке 2</b></td>
        <td><b>Заголовок в колонке 3</b></td>
    </tr>
    <tr>
        <td align="center">1</td>
        <td>Строка 2, колонка 2</td>
        <td>Строка 2, колонка 3</td>
    </tr>
    <tr>
        <td align="center">2</td>
        <td>Строка 3, колонка 2</td>
        <td>Строка 3, колонка 3</td>
    </tr>
</table>
Специальные тэги
<nobr> Этот текст будет всегда в одну строку, без переносов. </nobr>
<blink> Мерцающий текст </blink>
<br> — тэг переноса строки.
<hr> — тэг вставки линии на всю ширину доступной области:
Специальные символы
КодСимволДля набора на клавиатуре нажмите*
&laquo;«ALT+0171
&raquo;»ALT+0187
&mdash;—ALT+0151
&copy;©ALT+0169
&reg;®ALT+0174
&trade;™ALT+0153
&#0047;/
&lt;<
&gt;>
&nbsp; ALT+0160 — неразрывный пробел**
* — Зажмите кнопку ALT, наберите код, отпустите ALT. Работает в Windows.
** — Вставьте подряд несколько таких пробелов чтобы они не сливались в один:
&nbsp; &nbsp; &nbsp; — теперь слева отступ в шесть пробелов!
Кстати, чтобы HTML код был как обычный текст, перед тем как писать, откройте Windows Notepad, вставьте ваш HTML-код, выберите автозамену (Ctrl+H) и замените все < на &lt;, а также все > на &gt;.
Получится  &lt;b&gt;полужирный&lt;/b&gt;  вместо <b>полужирный</b>.
Если нужно, чтобы ссылка на какую-то страницу не была активной, например http://www.hdsw.ru, то можно написать следующим образом: http:/&#0047;www.hdsw.ru
В этом случае ссылка на странице будет отображаться верно, но не будет активной.
Возможные варианты символов, их названий и кодов доступны здесь.
Тэги и стили в LiveJournal.com
ЖЖ-юзер [info]gonza03 <lj user=gonza03>
ЖЖ-общество [info]wp-pictures <lj comm=wp-pictures>
ЖЖ-кат. Этот текст увидят в френдленте. <lj-cut>А этот текст будет под катом</lj-cut>
<lj-cut text="Загляни под кат!">Этот текст будет под катом</lj-cut>
ЖЖ-спойлер <lj-spoiler title="Видимый текст ссылки на спойлер">Этот текст будет скрыт</lj-spoiler>
ЖЖ-карта <lj-map url="http://maps.yandex.ru/?ll=37.625207%2C55.699252&spn=0.022016%2C0.006677&z=16&l=map" width="425" height="350" /> — отображает карту нужного размера прямо в записи.
ЖЖ-лайки <lj-like buttons="repost,facebook,twitter,google,vkontakte,surfingbird,odnoklassniki,tumblr,livejournal" /> — позволяют установить кнопки репоста и лайков в социальных сетях. В ЖЖ есть следующие лайки:
 • репост в ЖЖ — repost
 • «Я рекомендую» для Facebook — facebook или fb
 • «Твитнуть» для Twitter — twitter или tw
 • «+1» для Google+ — google или go
 • лайк для ВКонтакте — vkontakte или vk
 • лайк для Surfingbird — surfingbird
 • лайк для Tumbrl — tumblr
 • «+10 жетонов» — livejournal или lj
<lj-raw>Этот текст не будет авт. форматироваться<br>А это уже новая строка.</lj-raw>
С помощью <a name="lj-embed"> можно вставлять видео, flash, разные онлайн-плееры и так далее:
<lj-embed> тут код на object и/или embed </lj-embed>
Для того, чтобы изменить стиль оформления блога, или сделать невидимыми блоки с рекламой, в разделе ЖЖ «Настроить стиль журнала» можно перейти в подменю «Custom CSS» и использовать стили. Это можно делать как применительно ко всему блогу, так и для каждой записи в отдельности (каждая запись имеет свой ID, который можно увидеть в исходном коде страницы).
Специфические разметки CSS для LiveJournal можно увидеть здесь.

0 коммент.:

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