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

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

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

 

 -Статистика

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


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

Среда, 03 Марта 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>

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

    Процитировано 75 раз
    Понравилось: 4 пользователям

    Natalism   обратиться по имени Re: Краткий справочник по HTML Среда, 03 Марта 2010 г. 02:42 (ссылка)
    полезный пост. спасибо

    LI 7.05.22 beta
    Ответить С цитатой В цитатник
    Advayta   обратиться по имени Среда, 03 Марта 2010 г. 02:58 (ссылка)
    Natalism, не за что. Всё порываюсь изучить HTML, поэтому сохраняю у себя инфу.)) Может и Вам пригодится.
    Ответить С цитатой В цитатник
    alla_sumeny   обратиться по имени Среда, 03 Марта 2010 г. 05:07 (ссылка)
    Спасибо! Буду изучать.
    Ответить С цитатой В цитатник
    Ират   обратиться по имени Четверг, 04 Марта 2010 г. 11:00 (ссылка)
    Спасибо!Пригодится!
    Ответить С цитатой В цитатник
    ТаМаРа_ТАРАНЬжина   обратиться по имени Четверг, 04 Марта 2010 г. 15:45 (ссылка)

     (423x430, 89Kb)
    Ответить С цитатой В цитатник
    Prudent   обратиться по имени Четверг, 19 Июля 2012 г. 19:15 (ссылка)
    Спасибо большое!
    Ответить С цитатой В цитатник
    solnisko67   обратиться по имени Четверг, 16 Апреля 2015 г. 01:22 (ссылка)
    Спасибо за интересный пост.
    Ответить С цитатой В цитатник
    Mono-Liza   обратиться по имени Четверг, 10 Сентября 2015 г. 05:03 (ссылка)
    Большое спасибо!
    Ответить С цитатой В цитатник
    Смородинка_1946   обратиться по имени Суббота, 07 Ноября 2015 г. 13:45 (ссылка)
    С БЛАГОДАРНОСТЬЮ ЦИТИРУЮ!
    Ответить С цитатой В цитатник
    ЗИТТА   обратиться по имени Вторник, 27 Августа 2019 г. 17:49 (ссылка)
    Спасибо большое!
    Ответить С цитатой В цитатник
    Комментировать К дневнику Страницы: [1] [Новые]
     

    Добавить комментарий:
    Текст комментария: смайлики

    Проверка орфографии: (найти ошибки)

    Прикрепить картинку:

     Переводить URL в ссылку
     Подписаться на комментарии
     Подписать картинку