HTML

Реклама
camelhostadv

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

Текстовые блоки

  • <BR> — новая строка. Этот тег не закрывается (то есть не существует тега </BR>)
  • <HR> — горизонтальная линия
  • <PRE> … </PRE> — режим preview. В этом режиме текст заключается в рамку и никак не форматируется (то есть теги, кроме </PRE>, игнорируются, и переводы строки ставятся там, и только там, где они есть в оригинальном документе)
 

Форматирование текста

  • <U> … </U> — подчёркивание текста
  • <S> … </S> (или <STRIKE> … </STRIKE> )— зачёркивание текста
  • <BIG> … </BIG> — увеличение шрифта
  • <SMALL> … </SMALL> — уменьшение шрифта
  • <BLINK> … </BLINK> — мигающий текст. Внимание! Этот тег не работает в браузере Internet Explorer версий 5 и ниже без применения JavaScript
  • <MARQUEE> … </MARQUEE> — сдвигающийся по экрану текст
  • <SUB> … </SUB> — подстрочный текст
  • <SUP> … </SUP> — надстрочный текст
  • <FONT параметры> … </FONT> — задание параметров шрифта. У этого тега есть следующие параметры:
    COLOR=color — задание цвета. Цвет может быть задан в шестнадцатеричной форме как #rrggbb (первые 2 шестнадцатеричные цифры задают красную компоненту, следующие 2 — зелёную, последние 2 — синюю) или названием
    FACE=шрифт задание гарнитуры шрифта
    SIZE=размер задание размера шрифта. Размер от 1 до 7: стандартный по умолчанию 3. Есть много способов изменить стандартный размер
    SIZE=+изменение или SIZE=-изменение — изменение размера шрифта от стандартного. Например, +2 означает размер на 2 больше стандартного
 

Списки

У этих тегов есть параметры: type = «тип», где тип — форма: в <UL> — символов

  • square — квадрат
  • round — окружность
  • disk — круг: по умолчанию
  • а в <OL> — цифр или букв
  • A или а (латинскими буквами) — буквенный список: соответственно заглавными или строчными буквами
  • I или i — римские цифры: соответственно заглавными или строчными буквами
  • 1 — арабские цифры: по умолчанию

пишется так:

<ol type="i">
<li> Первое </li>
<li> Второе </li>
<li> И т.д. </li>
</ol>
 

Параметр start = «начало» (только для <OL> ), определяющий начало нового отсчёта: например, если нужно не 1, 2, 3, а 24, 25, 26. Пишется так:

<ol start="24">
<li> Двадцать четыре </li>
<li> Двадцать пять </li>
<li> И т.д. </li>
 

и, наконец для тега <LI> параметр value = «следующий» — если необходимо перескочить с одной цифры на другую: например, не 1, 2, 3, 4, а 1, 2, 22, 23

<ol>
<li> Один </li>
<li> Два </li>
<li value="22"> Двадцать два </li>
<li> Двадцать три </li>
 

Наконец, третьим, и последним, списком является список определений:

<DL>
<DT> Кошка </DT> <DD> мяукающее домашнее животное </DD>
<DT> Кот </DT> <DD> муж кошки </DD>
<DT> Крокодил </DT> <DD> большой африканский зверь с острыми зубами </DD>
</DL>
 

Между прочим, теги <LI>, <DT>, <DD> можно и не закрывать.

Объекты

  • EMBED — вставка различных объектов: не-HTML документов и media-файлов
  • APPLET — вставка Java-апплетов
  • SCRIPT — вставка скриптов
 

Изображения

IMG — вставка изображения. Этот тег не закрывается.

  • SRC — имя или URL
  • ALT — альтернативное имя (отобразится, если в браузере запретить отображать картинки)
  • TITLE — краткое описание изображения (отобразится при наведении курсора на картинку)
  • WIDTH, HEIGHT — размеры (если не совпадают с истинными размерами картинки, то изображение «растянется» или «сожмется»)
  • ALIGN — задает параметры обтекания текстом (top, middle, bottom, left, right)
  • VSPACE, HSPACE — задают размеры вертикального и горизонтального пространства вокруг изображения
 

Пример:

<IMG SRC="url" ALT="текст" TITLE="текст" WIDTH="размер (пикс, %)" HEIGHT="размер (пикс, %)">
 

Изображение можно сделать ссылкой:

<A HREF="url" ><IMG SRC=url></A>
 

Карта изображений

<MAP>…</MAP> — создание карты изображений позволяющей хранить в одном изображении несколько ссылок.

Пример:

<IMG width="500" height="200" usemap="#somemap" src="url">
<MAP name="somemap">
<AREA shape="rect" coords="6, 7, 140, 196" href="url1">
<AREA shape="circle" coords="239, 98, 92" href="url2">
<AREA shape="polygon" coords="386,16, 344,56, 350,189, 385,132, 489,190, 496,74" href="url3">
</MAP>
 

Таблицы

TABLE — создание таблицы. Параметры тега:

  • ALIGN=LEFT Определяет расположение таблицы в документе. По умолчанию таблица прижата к левому краю страницы. Допустимые значения аттрибута: LEFT (слева), CENTER (по центру страницы) и RIGHT (справа)
  • BORDER — толщина разделительных линий в таблице. BORDER=»n» устанавливает толщину рамки. По умолчанию n=0 — таблица рисуется без рамки
  • CELLSPACING — расстояние между клетками CELLSPACING=»n» Определяет расстояние между рамками ячеек таблицы в пикселях
  • CELLPADDING – этот параметр указывает на отступ от содержимого в ячейке до рамки таблицы html. CELLPADDING=»n» Определяет расстояние в пикселях между рамкой ячейки и текстом
  • CAPTION — заголовок таблицы (этот тег необязателен) Таблица может включать заголовок, который распологается между тегами . Он должен быть непосредственно после тега <TITLE>. К заголовку возможно применение аттрибута ALIGN, определяющего его положение относительно таблицы: TOP — значение по умолчанию, заголовок над таблицей по центру. LEFT — заголовок над таблицей слева. RIGHT — заголовок над таблицей справа. BOTTOM — заголовок под таблицей по центру
  • TR — строка таблицы
  • TH — заголовок столбца таблицы (этот тег необязателен)
  • TD — ячейка таблицы
  • height — высота таблицы
  • width — ширина таблицы
  • Background — фоновый рисунок для html таблицы. BACKGROUND=»image.gif» Заполняет фон таблицы изображением
  • Bgcolor – задаётся в виде прямого имени или 16-ричного значения. Определяет цвет фона таблицы html. BGCOLOR=»#FFFFFF» устанавливает цвет фона для всей таблицы, где #FFFFFF — шестнадцатиричное число
  • Bordercolor – задаёт цвет рамки. BORDERCOLOR=»#FFFFFF» Устанавливает цвет окантовки, где #FFFFFF (белый) — шестнадцатиричное значение цвета
  • Cols – задаёт число столбцов в таблице html
  • Frame – указывает в каком стиле оформить границы вокруг html таблицы. FRAME=»значение» Управляет внешней окантовкой таблицы, может принимать следующие значения: VOID — окантовки нет (значение по умолчанию). ABOVE — только граница сверху. BELOW — только граница снизу. HSIDES — границы сверху и снизу. VSIDES — только границы слева и справа. LHS — только левая граница. RHS — только правая граница. BOX — рисуются все четыре стороны. BORDER — также все четыре стороны.
  • Rules — указывает в каком стиле оформить границы между ячейками таблицы
  • Summary – сюда заносится описание таблицы (может использоваться поисковыми роботами)
  • COLSPAN=»n» Растягивание ячейки по горизонтали. Например, означает, что ячейка будет растянута на 2 колонки
  • ROWSPAN=»n» Растягивание ячейки по строке. Например,
 

У тега TABLE есть ещё параметр CELLPADDING. Он определяет расстояние в пикселях между рамкой ячейки и её содержимым. Например, если заменить первую строку таблицы на:

<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="5">
 

Так, например,

<TABLE BORDER="1" CELLSPACING="0">
<CAPTION> Улов крокодилов в Мумбе-Юмбе </CAPTION>
<TH> Год </TH>
<TH> Улов </TH>
<TR>
<TD> 1997 </TD>
<TD> 214 </TD>
</TR>
<TR>
<TD> 1998 </TD>
<TD> 216 </TD>
</TR>
<TR>
<TD> 1999 </TD>
<TD> 207 </TD>
</TR>
</TABLE>
 

Другой пример:

lt;table align="left;" border="1" cellpadding="2"
cellspacing="2" height="100%" width="100%">
<tr align="center">
<td colspan="3" height="100"
width="100%">ШАПКА</td>
</tr>
<tr>
<td colspan="3" height="14"
width="100%">Область главного меню</td>
</tr>
<tr>
<td height="167" width="140">Левое меню</td>
<td height="167" width="691">Область контента</td>
<td height="167" width="140">Правое меню</td>
</tr>
<tr>
<td colspan="3" height="14"
width="100%">Область пользователя</td>
</tr>
<tr align="center"> <td colspan="3" height="100"
width="100%">ПОДВАЛ</td>
</tr>
</table>
 

Другой параметр тегов TABLE, TR, TH, TD — ALIGN. Он определяет выравнивание. Возможные значения — center (по центру), left (по левому краю), right (по правому краю).

Параметр ALIGN в TD или TH определяет выравнивание для содержимого внутри данной ячейки, в TR — для содержимого всех ячеек строки, TABLE — для самой таблицы на страничке. Для каждой ячейки берётся выравнивание из TD или TH, если оно не задано — из TR, если и оно не задано — по центру для TH или по левому краю для TD.

Например, если заменить первые строки таблицы на:

<TABLE BORDER="1" CELLSPACING="0" ALIGN="center">
<CAPTION> Улов крокодилов в Мумбе-Юмбе </CAPTION>
<TH> Год </TH>
<TH> Улов </TH>
<TR>
<TD> 1997 </TD> <TD ALIGN="CENTER"> 214 </TD>

Незакрытые теги TD, TR и TH приводят к некорректному отображению, особенно при работе с вложенными таблицами.

 

Формы

Основные теги

  • FORM — создание формы
  • INPUT — элемент ввода (может иметь разные функции — от ввода текста до отправки формы)
  • TEXTAREA — текстовая область (многострочное поле для ввода текста)
  • SELECT — список (обычно в виде выпадающего меню)
  • OPTION — пункт списка
 

Простая форма для ввода данных о новом пользователе:

<form action="http://example.com/app/profile.php" method="post">
<p>
<label for="username">
Имя:
</label>
<input type="text" name="username" />
<br />
<label for="nick">
Ник:
</label>
<input type="text" name="nick" />
<br />
<label for="email">
Адрес эл. почты:
</label>
<input type="text" name="email" />
<br />
<label for="sex">
Пол:
</label>
<input type="radio" name="sex" value="male" />
мужской
<br />
<input type="radio" name="sex" value="female" />
женский
<br />
<input type="radio" name="sex" value="secret" />
не хочу отвечать
<input type="submit" value="Отправить">
<input type="reset" value="Очистить">
</p>
</form>
 

В HTML определены следующие элементы управления:

  • кнопка: элемент <input> типов submit (отправка формы), image (картинка-кнопка), reset (очистка формы, приведение формы в начальное состояние), button (кнопка), а также элемент <button> (отправка формы);
  • чекбокс (флажок): тип checkbox;
  • радиокнопка: тип radio;
  • меню: элемент <select> с элементами <optgroup> и <option> внутри;
  • строка текста: тип text, а также элемент <textarea> (многострочное текстовое поле);
  • пароль: тип password;
  • скрытое поле: тип hidden;
  • файл: тип file.
 

Форма задаётся с помощью элемента

, внутри которого и располагаются элементы управления. Кроме общих для HTML атрибутов, в

могут присутствовать следующие:

  • action (действие) — обязательный атрибут (в HTML5 — нет), содержащий URI обработчика формы;
  • method (метод отправки формы) — атрибут, принимающий значения GET (по умолчанию) или POST;
  • enctype (тип кодирования для содержимого) — по умолчанию application/x-www-form-urlencoded (всегда для метода GET), но обычно употребляется multipart/form-data;
  • accept — список MIME-типов для загрузки файлов;
  • name — имя формы;
  • onsubmit — обработчик события «форма отправлена» (для скриптов);
  • onreset — обработчик события: «форма очищена» (тоже для скриптов);
  • accept-charset список поддерживаемых наборов символов
 

Рамки и границы

  • solid
  • double
  • dashed
  • dotted
  • outset
  • inset
  • groove
  • ridge
 

Пример 1

текст в рамке вариант1

Код

<span style=»border-style: dotted»>текст в рамке вариант1</span>

Пример 2

текст в рамке вариант2

Код

<span style=»border-style: dashed»>текст в рамке вариант2</span>

Пример 3

текст в рамке вариант3

Код

<span style=»border-style: solid»>текст в рамке вариант3</span>

Пример 4

текст в рамке вариант4

Код

<span style=»border-style: double»>текст в рамке вариант4</span>

Пример 5

текст в рамке вариант5

Код

<span style=»border-style: groove»>текст в рамке вариант5</span>

Пример 6

текст в рамке вариант6

Код

<span style=»border-style: ridge»>текст в рамке вариант6</span>

Пример 7

текст в рамке вариант7

Код

<span style=»border-style: inset»>текст в рамке вариант7</span>

Пример 8

текст в рамке вариант8

Код

<span style=»border-style: outset»>текст в рамке вариант8</span>

Пример 9

текст в рамке синего цвета

Код

<span style=»border-color: blue; border-style: dotted»>текст в рамке синего цвета</span>
 

Для обозначения внутреннего цвета используют: background-color:#HEX HERE;

Для размещения по центру:

<div align="center">
COMPLETE BORDER CODE HERE
</div>
 

Для окружения текста цветной границей с округленными углами используется следующий код:

<p style="border:4px solid #9fb6cd;border-radius:6px;-khtml-border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;padding:10px;">
TEXT HERE
</p>
 

TEXT HERE

Для окружения текста цветной границей с круглыми углами используется следующий код:

<p style="border:4px solid #9fb6cd;border-radius:15px;-khtml-border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;background-color:#f3e88e;padding:10px;">
TEXT HERE
</p>
 

TEXT HERE

Для выборочного определения углов с одной стороны используется следующий код:

<p style="border:solid 6px #9fb6cd;border-top-left-radius:12px;-khtml-border-top-left-radius:12px;-webkit-border-top-left-radius:12px;-moz-border-radius-topleft:12px;border-top-right-radius:33px;-khtml-border-top-right-radius:33px;-webkit-border-top-right-radius:33px;-moz-border-radius-topright:33px;padding:10px;">
TEXT HERE
</p>
 

TEXT HERE

Для изображения круга используется следующий код:

<div style="border:solid 15px #9fb6cd;border-radius:100px;-khtml-border-radius:100px;-moz-border-radius:100px;-webkit-border-radius:100px;width:140px;height:140px;text-align:center;font-size:400%;color:#cd3278;line-height:140px;padding:15px;">
TEXT HERE
</div>
 
TEXT
 

Вместе с этим читают:     HTML     Шрифты     RGB

Поделиться контентом в соцсетях: vkфейсбуктвиттерtelegramлинкединпинтерест
просмотрели просмотров: 356

Комментируя, Вы соглашаетесь с правилами пользования порталом.

Ваш адрес email не будет опубликован. Обязательные поля помечены *