закрыть ВНИМАНИЕ! 13 ФЕВРАЛЯ СОСТОИТСЯ НАБОР НА КУРСЫ МЕДИТАЦИИ МЕДИТАЦИЯ - основное средство развития психики и самопознания. Познать метод, дающий внутреннюю гармонию и раскрывающий внутренние глубины предлагают данные курсы.

Подробности на странице: http://untaware.blogspot.ru/p/0021_30.html

Основные элементы HTML

Типы Doctype

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">- строгий

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> - переходный

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> - для фреймов

 

Подробный список атрибутов тегов

на этой странице

 

 

Рисунки

  1. атрибуты

    (1) - <img src="pr1.png" vspace="10">
    (2) - <img src="pr1.png" hspace="30">
    (3) - <img src="pr1.png" alt="моя фотография">
    (4) - <img src="pr1.png" width="100">
    (5) - <img src="pr1.png" height="200">
    (6) - <img src="pr1.png" border="5">

    (1) - атрибут vspace - задает расстояние между текстом и рисунком (по вертикали)
    (2) - атрибут hspace - тоже задает расстояние между текстом и рисунком, но по горизонтали
    (3) - атрибут alt - краткое описание картинки.
    (4) - атрибут width - ширина самой картинки
    (5) - атрибут height - высота самой картинки
    (6) – атрибут border - рамка вокруг самой картинки

  2. выравнивание

    1. горизонтальное:

      <img src="pr1.png" align="left">
      <img src="pr1.png" align="right">

    2. вертикальное:

      <img src="pr1.png" align="bottom">
      <img src="pr1.png" align="middle">
      <img src="pr1.png" align="top">

Ссылки и адреса

  1. Абсолютные

    <a href="http://www.xxx.ru/">Это ссылка</a>

  2. Относительные

    <a href="page2.htm">Щёлкните здесь для перехода на страницу 2</a>

    В подпапке:

    <a href="book/page2.htm">Щёлкните здесь для перехода на страницу 2</a>

  3. От корня

    <a href="/page2.htm">Щёлкните здесь для перехода на страницу 2</a>

    В подпапке:

    <a href="/book/page2.htm">Щёлкните здесь для перехода на страницу 2</a>

  4. В папках выше

    <a href="../page1.htm">Ссылка на page 1</a>

    На две папки выше:

    <a href="../../page2.htm">Щёлкните здесь для перехода на страницу 2</a>

    На две папки выше от корня:

    <a href="/../../page2.htm">Щёлкните здесь для перехода на страницу 2</a>

  5. Закладки

      <html>
      <head>
      </head>  
          <body>
    
          
              <p><a href="#heading1">Ссылка на heading 1</a></p>
              <p><a href="#heading2">Ссылка на heading 2</a></p>
            
              <a name="heading1"></a>
    
              <h1>heading 1</h1>
              
              <p>Text text text text</p>
              
              <a name="heading2"></a>
              <h1>heading 2</h1>
    
              
              <p>Text text text text</p>
      
          </body>
      </html>
      
      

     

  6. Почтовые

    <a href="mailto:nobody@mail.ru">Отправить e-mail для nobody на mail.ru</a>

  7. Атрибут target - открытие ссылк в новом окне

    <a href="http://www.my_site.com/" target="_blank">Посетите мой сайт!</a>

Фомы

тег <input>

  1. атрибут type="text"

    <form>
    Ваше имя:
    <input type="text" name="firstname" />
    <br />
    Ваша фамилия:
    <input type="text" name="lastname" />
    </form>

  2. атрибут type="radio"

    <form>
    <input type="radio" name="sex" value="male" /> Мужской
    <br />
    <input type="radio" name="sex" value="female" /> Женский
    </form>

  3. атрибут type="checkbox"

    <form>
    У меня есть велосипед
    <input type="checkbox" name="vehicle" value="Bike" />
    <br />
    У меня есть машина:
    <input type="checkbox" name="vehicle" value="Car" />
    <br />
    У меня есть самолет:
    <input type="checkbox" name="vehicle" value="Airplane" />
    </form>

  4. атрибут type="radio"

    <form name="input" action="html_form_submit.asp" method="get">
    Ваше имя:
    <input type="text" name="user" />
    <input type="submit" value="Submit" />
    </form>

  5. Пример формы с fieldset

    <form id="example_form">
    <fieldset>
    <legend>Пожалуйста, введите данные</legend>
    <label for="example_email">Адрес электронной почты</label>
    <input type="text" size="20" name="example_email" id="example_email" />
    <br>
    <label for="example_password">Пароль</label>
    <input type="password" size="20" name="example_password" id="example_password" />
    <input type="submit" value="подтвердить" />
    </fieldset>
    </form>


 

Таблицы

  1. Простая таблица

    <table>
    <tr>
    <td>
    Содержание первой ячейки на первой строке
    </td>
    <td>
    Содержание второй ячейки на первой строке
    </td>
    </tr>
    <tr>
    <td>
    Содержание первой ячейки на второй строке
    </td>
    <td>
    Содержание второй ячейки на второй строке
    </td>
    </tr>
    </table>

     

  2. Таблица с заголовками столбцов

    <table>
    <tr>
    <th>
    Содержание первой ячейки шапки
    </th>
    <th>
    Содержание второй ячейки шапки
    </th>
    </tr>
    <tr>
    <td>
    Содержание первой ячейки на первой строке
    </td>
    <td>
    Содержание второй ячейки на первой строке
    </td>
    </tr>
    <tr>
    <td>
    Содержание первой ячейки на второй строке
    </td>
    <td>
    Содержание второй ячейки на второй строке
    </td>
    </tr>
    </table>

     

  3. Таблица с общим заглавием и заголовками столбцов

    <table>
    <caption>Текст заголовка таблицы</caption>
    <tr>
    <th>
    Содержание первой ячейки шапки
    </th>
    <th>
    Содержание второй ячейки шапки
    </th>
    </tr>
    <tr>
    <td>
    Содержание первой ячейки на первой строке
    </td>
    <td>
    Содержание второй ячейки на первой строке
    </td>
    </tr>
    <tr>
    <td>
    Содержание первой ячейки на второй строке
    </td>
    <td>
    Содержание второй ячейки на второй строке
    </td>
    </tr>
    </table>

     

  4. Таблица с атрибутами cellpadding и cellpadding:


    <table border="1" cellpadding="3" cellpadding="10">
    <tr>
    <td>First</td>
    <td>Row</td>
    </tr>
    <tr>
    <td>Second</td>
    <td>Row</td>
    </tr>
    </table>
    </body>
    </html>

     

  5. Таблица с тегами thead, tfoot и tbody:


    <table border="1">
    <thead>
    <tr>
    <th>Month</th>
    <th>Savings</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
    <td>Sum</td>
    <td>$180</td>
    </tr>
    </tfoot>
    <tbody>
    <tr>
    <td>January</td>
    <td>$100</td>
    </tr>
    <tr>
    <td>February</td>
    <td>$80</td>
    </tr>
    </tbody>
    </table>

     

  6. Атрибуты элементов table, tr, td, th, caption

    Атрибут Элемент Описание
    ALIGN table, tr, td, th left / center / right / justify - определяет способ горизонтального выравнивания абзаца (Прижать влево / Расположить по центру / Прижать вправо / Растянуть по ширине)
    ALIGN caption top / bottom - помещает заголовок над / под таблицей
    VALIGN table, tr, td, th top / middle / bottom - определяет способ вертикального выравнивания (Прижать вверх / Расположить по центру / Прижать вниз)
    WIDTH table, td, th Устанавливает ширину в пикселах или процентах
    HEIGHT table, td, th Устанавливает высоту в пикселах или процентах
    BORDER table Определяет ширину окружающей рамки в пикселах
    CELLSPACING table Расстояние в пикселах между соседними ячейками
    CELLPADDING table Расстояние в пикселах между границей ячейки и ее содержимым
    BACKGROUND table, td, th Заполняет фон таблицы рисунком. В качестве значения нужно указать URL рисунка.
    BGCOLOR table, tr, td, th Цвет фона таблицы
    BORDERCOLOR table Цвет рамки
    COLSPAN td, th Определяет количество столбцов, на которые простирается данная ячейка
    ROWSPAN td, th Определяет количество рядов, на которые простирается данная ячейка

     

  7. еще примеры таблиц

Пустые теги - могут не отображаться

<p></p>

<td></td>

 

Цвета

Таблица html кодов цветов

старый способ задания параметров страницы и текста, применяемый в HTML

<body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">
text="#336699" – цвет текста
bgcolor="#000000" - фон страницы
link="#339999" – цвет ссылок на странице
alink="#339999" – цвет активной ссылки
vlink="#339999" – цвет посещенной ссылки

Тег <font>

deprecated
<font color="#CC0000" size="+4" face="arial, verdana, courier"> Не рекомендованный и устаревший способ определения свойств шрифта
</font>

Единицы измерения

  1. Относительные единицы

    Единица Описание
    em Высота шрифта текущего элемента
    ex Высота символа x в нижнем регистре
    px Пиксел
    % Процент

     

  2. Относительные единицы

    Единица Описание
    in Дюйм (1 дюйм равен 2,54 см)
    cm Сантиметр
    mm Миллиметр
    pt Пункт (1 пункт равен 1/72 дюйма)
    pc Пика (1 пика равна 12 пунктам)

 

Шрифты

  1. безопасные

  2. типы шрифтов

    1. Семейства шрифтов
      • serif (например, Times) - Шрифты с засечками : Georgia, Times New Roman;

      • sans-serif (например, Helvetica) - Шрифты без засечек : Arial, Impact, Tahoma, Verdana;

      • monospace (например, Courier) - Моноширинные шрифты (или машинописные) : Courier New, Lucida Console;

      • fantasy (например, Western) - Декоративные шрифты : Comic Sans MS;

      • cursive (например, Zapf-Chancery) - Курсивные шрифты

       

    2. Основные характеристики шрифтов
      • гарнитура: объединение разных по кеглю и начертанию, но одинаковых по характеру рисунка шрифтов;
      • начертание: прямой, курсивный
      • насыщенность: светлый, полужирный, жирный (отношение толщины штриха к ширине внутрибуквенного просвета);
      • ширина: нормальный, узкий, широкий;
      • размер (кегль) в пунктах (1 пункт = 1/72 дюйма);
      • чёткость;
      • форма засечек.
      • пропорции: Пропорциональные и непропорциональные, или моноширинные

     

  3. задание шрифтов группами

  4. размеры шрифтов в HTML


    Шрифт размера 1

    Шрифт размера 2

    Шрифт размера 3

    Шрифт размера 4

    Шрифт 5

    Шрифт 6

    Шрифт 7

    Утро красит нежным светом

    Стены старого Кремля

    <p><font size="1">Шрифт размера 1</font></p>

    <p><font size="2">Шрифт размера 2</font></p>

    <p><font size="3">Шрифт размера 3</font></p>

    <p><font size="4">Шрифт размера 4</font></p>

    <p><font size="5">Шрифт 5</font></p>

    <p><font size="6">Шрифт 6</font></p>

    <p><font size="7">Шрифт 7</font></p>

    <p><font size="6">У</font>тро красит нежным светом</p>

    <p><font size="+2">С</font>тены <small>старого</small> <big>Кремля</big></p>

     

  5. Название шрифта, состоящее из нескольких слов берется в кавычки

Выравнивание

<p align="center"> текст </p>
<p align="left"> текст </p>
<p align="right"> текст </p>
<p align="justify"> текст </p>

Нельзя:

<p align="right">
<p>текст</p>
<p>текст</p>
<p>текст</p>
</p>

первый абзац будет автоматически закрыт вторым

Тег <div>

блочный

можно:

  <div align="right">
<p>текст первого абзаца</p>
<p>текст второго абзаца</p>
<p>текст третьего абзаца</p>
</div>

Нельзя:

<p align="right">
<div>текст</div>
<p>текст</p>
<div>текст</div>
</p>

(Здесь: в текстовый контейнер вставляется блочный)

спецсимволы HTML

На этой странице

Фреймы

<!-- Файл фреймовой структуры frame.htm -->

  <HTML>  
  <FRAMESET COLS="25%,75%" FRAMEBORDER="yes"  BORDER="5" >
  <FRAME src="left.htm"  NAME="toc_window">

  <FRAME src="right.htm"  NAME="main_window">
  </FRAMESET>
  </HTML>
<!-- Файл оглавления left.htm -->
<HTML>
<H3>Оглавление</H3>
<UL>
<LI> Товары
<UL>
<LI><A href="cosm.htm" TARGET="main_window"> Косметика</A>   
<LI><A href="eat.htm" TARGET="main_window">Пищевые добавки</A>   
<LI><A href="perf.htm" TARGET="main_window">Парфюмерия</A>   
</UL></LI>
<LI>Услуги
<UL>
<LI><A href="massage.htm" TARGET="main_window">Массаж</A>   
<LI><A href="manic.htm" TARGET="main_window">Маникюр</A>   
</UL></LI>
</UL>
</BODY>
</HTML>
<!-- Файл заставки основного окна right.htm -->
<HTML>
<BODY>
<H1>Здравствуйте!</H1>
</BODY>
</HTML>
Подробно

Не забудьте выставить специальный DOCTYPE для фреймов!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

 

Image map

<html>
<body>

 

<object data="planets.gif" alt="Planets" type="image/gif" usemap="#Map1">
<map name="Map1">
<a href="sun.htm" shape="rect" coords="0,0,82,126">The Sun</a>
<a href="mercur.htm"shape="circle" coords="90,58,3">Mercury</a>
<a href="venus.htm" shape="circle" coords="124,58,8">Venus</a>
</map>
</object>

<p><b>Note:</b> The coords attribute is only supported in Firefox and Opera.</p> </body>
</html>  

<html>
<body>

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" />
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
</map>

</body>
</html>

 

Определение атрибутов для AREA

shape = default|rect|circle|poly
Этот атрибут определяет форму района. Возможные значения:
  • default: Весь район.
  • rect: Определяет прямоугольный район.
  • circle: Определяет круглый район.
  • poly: Определяет многоугольный район.
coords = coordinates
Этот атрибут определяет положение и форму на экране. Количество и порядок значений зависит от определенной формы. Возможные комбинации:
  • rect: левый-x, верхний-y, правый-x, нижний-y.
  • circle: центральный-x, центральный-y, радиус. Обратите внимание. Когда значение радиуса является процентным значением, устройствам вывода следует рассчитывать окончательное значение радиуса на основе связанной ширины и высоты объекта. Радиус должен быть меньше обеих величин.
  • poly: x1, y1, x2, y2, ..., xN, yN. Первые x и y координатные пары и последние должны быть одними и теми же, чтобы закрыть многоугольник. Когда эти координатные значения не одинаковы, то устройство вывода должны заключить дополнительные координатные пары для закрытия многоугольника.
Координаты берутся относительно верхнего левого угла объекта. Все значения – длины. Все значения разделены запятыми.