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

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

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

Введение

Памятка призвана помочь начинающим web-разработчикам и блоггерам. Предлагаемые инструмены — это тэги HTML и параметры форматирования CSS . Параметры форматирования CSS страиваются в тэги HTML с помощью атрибута STYLE.


Форматирование шрифта

Базовые тэги для работы с текстом:

<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">

Текст без html, шириной в 55 символов и высотой в 5 строк.

Даже скроллить можно, круто, да!? <b>А html не работает.</b>

Но лучше используйте div из предыдущего примера, если нужна просто прокрутка…


</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://profwebsit.ru/pics/copyright-vi.gif) no-repeat top left;">
Старайтесь не злоупотреблять этим вариантом,
потому что данный способ часто затрудняет
читаемость текста, в зависимости от картинки.
</div>

Картинка в выделенной области, с прокруткой:

<div style="overflow: scroll; width:495px;"><img src="http://profwebsit.ru/pics/IMG_1734.jpg"></div>
Отображаемую ширину указываем внешнему div-контейнеру в атрибуте width в пикселях. Для вертикальной прокрутки, указываем высоту height. Ширина и высота должна быть меньше чем у картинки.


Ссылки на другие страницы

<a href="http://profwebsit.ru">Создаем сайт с нуля</a>

Открыть ссылку в новом окне:
<a href="http://profwebsit.ru" target="_blank">Создаем сайт с нуля </a>

Всплывающая подсказка, отображающаяся при наведении курсора на ссылку:
<a href="http://profwebsit.ru" title="HD Systems Worldwide"> Ссылка на сайт </a>

Картинка-ссылка (баннер):

<a href="http://profwebsit.ru" title="HD Systems Worldwide"><img src="http://profwebsit.ru/wp-content/uploads/hdsw_ban_88_31.png"></a>


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> — (тут ссылка является одновременно и якорем)

Таблицы

Пример простейшей таблицы:

Строка 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://profwebsit.ru, то можно написать следующим образом: http:/&#0047;www.profwebsit.ru
В этом случае ссылка на странице будет отображаться верно, но не будет активной.

css template

Не забывайте написать ваш комментарий, понравилась ли статья. От вас пару слов, а мне — признание поисковых систем, что пишу нормальные человеческий статьи. Заранее спасибо вам!