Ассаламу алейкум, извиняюсь что пропал немного, дела были дела). Сегодня этот урок посвящу основным тегам html, или назовем ее html шпаргалка... Некоторые вещи отсюда нужно знать веб разработчику... Я сам иногда прибегаю к таким шпорам))
HTML – это язык разметки гипертекста, он состоит из тегов.
ТЕГ – это символы, заключённые в угловые скобки и по своей сути является командой браузеру к отображению информации в заданном виде.
Основные теги
<HTML> - Это пожалуй самый главный тег, так как указывает принадлежность документа к HTML языку, заключает в себе всё содержимое веб – страницы, ставится в самом начале и соответственно в конце закрывает документ.
<html>…</html>
<HEAD> - Этот тег не менее важен, в нём размещается не видимая информация о вашем сайте предназначенная для поисковых машин.
<head>…</head>
<TITLE> - Название, оглавление страницы, предназначен для поисковых машин, этот
тег всегда помещается внутри - <head>…</head>
<title>…</title>
<BODY> - В этот тег помещается информация, которая должна отображаться в окне браузера.
<body>…</body>
Пример простого веб – документа:
<HTML>
<HEAD>
<TITLE> Название страницы </TITLE>
</HEAD>
<BODY> Содержимое страницы</BODY>
</HTML>
Атрибуты тега <BODY> - "телo документа".
<body bgcolor="…"> - Цвет фона документа, используя значение цвета в виде RRGGBB - пример: “FF0000” - красный цвет.
<body text="…"> - Цвет текста документа, используя значение цвета в виде RRGGBB - пример: “000000” - черный цвет.
<body link="…"> - Цвет гиперссылок, используя значение цвета в виде RRGGBB - пример: “00FF00” - зеленый цвет.
<body vlink="…"> - Цвет гиперссылок, на которых вы уже побывали, используя значение цвета в виде RRGGBB - пример: “333333” - серый цвет.
<body alink="…"> - Цвет гиперссылок при нажатии.
Текст документа.
<H1>.....<H6> - Определяет величину заголовка по их степени важности.
<h1>.....</h1> - Самый большой заголовок.
<h6>.....</h6> - Самый маленький заголовок.
<B> - Определяет текст жирным шрифтом.
<b>…..</b>
<I> - Определяет текст наклонным (курсив) шрифтом.
<i>…..</i>
<TT> - Имитирует стиль печатной машинки.
<tt>…..</tt>
<FONT COLOR=”…”> - Задаёт колор (цвет) текста, шестнадцатеричным кодом в виде “RRGGBB”.
<font color=”…”>…..</font>
<FONT SIZE=”…”> - Задаёт величину шрифта в пределах от “1” до “7”.
<font size="...">…..</font>
<BIG> - Увеличивает размер текст на условную 1-цу от заданного.
<big>…..</big>
<STRONG> - Этот тег, браузер определяет как жирное начертание текста.
<strong>…..</strong>
<EM> - Этот тег, браузер определяет как наклонное (курсив) начертание текста.
<em>…..</em>
Форматирование текста документа.
<P> - Определяет новый параграф текста с предварительным пропуском одной строки.
<p>…..</p>
< P ALIGN=”…”> - Выравнивает текст относительно одной из сторон документа. Значения: “left”, “right”, “justify”, “ center”.
Пример: <p align="center">текст</p> Текст по центру.
<PRE> - Этот тег позволяет отобразить текст, так как есть без предварительного форматирования.
<pre>…..</pre>
<BLOCKQUOTE> - Задаёт тексту особую форму отображения в виде отступа с обоих сторон края документа.
<blockquote>…..</blockquote>
<BR> - Тег предназначен для разрыва строки с последующим её продолжением на новой (Перенос).
<NOBR> - Определяется запрет перехода на новую строку.
<nobr>…..</nobr>
<WBR> - Этот тег при необходимости выполняет функцию отмены действия <NOBR>
<nobr>Текст<wbr> текст</nobr>
<DL> - Служит контейнером для:
<DT> - Определяет термин.
<DD> - Задаёт описание этого термина.
Пример:
<dl>
<dt>Термин </dt>
<dd>Описание термина </dd>
<dt>Термин </dt>
<dd>Описание термина </dd>
</dl>
<OL> - Определяет нумерованный список.
<LI> - Объекту, заключённому в этот тег присваивается номер.
Также применяется атребут:
start - Указывает стартовый номер.
Пример:
type - Определяет характер обозначение, буквенный “Ж”, ”ж”, “J”, ”j” или цифровой – “10”, “Х”.
<ol type="… ">...</ol>
Пример:
<ol start="число">
<ol type="… ">Объект списка</li>
<ol type="… "> Объект списка</li>
</ol>
<DIV> - Является контейнером для параметров: align и title.
аlign - Выравнивает какой либо элемент информации.
Значения:
left - по левому краю.
right - по правому краю.
center - по центру.
justify - по ширине.
Пример:
<div align="center"> элемент информации</div>Выровнен по центру.
title - Задаёт всплывающую подсказку для необходимой информации.
Пример:
<div title="подсказка">объект</div>
Подсказка отобразится, как только курсор окажется над заданным объектом.
Отображение графических элементов.
<IMG SRC=”Имя файла”> - Отображение изображения на странице HTML документа.
АТРИБУТЫ:
width - Ширина изображения в пикселях “…рх” или в процентах “…%”
Пример:
<img src=" Имя файла" width=”…”>
height - Высота изображения в пикселях “…рх” или в процентах “…%”
Пример:
<img src=" Имя файла" height=”…”>
border - Толщину рамки в пикселях “…рх”.
Пример:
<img src=" Имя файла" border=”…”>
hspace - Отступ от изображения по горизонту в пикселях “…рх”.
Пример:
<img src=" Имя файла" hspace=”…”>
vspace - Отступ от изображения по вертикале в пикселях “…рх”.
Пример:
<img src=" Имя файла" vspace=”…”>
align - Выравнивает графический элемент.
<img src=" Имя файла" align=”…”> Предполагает несколько значений:
bottom - Нижняя часть изображения выравнивается по строке.
top - Верхушка изображения выравнивается по текущей строке.
left - Изображение выравнивается по левому краю документа.
middle - Центр изображения выравнивается на текущей строке.
right - Изображение выравнивается по правому краю документа.
Пример аналогичен для всех: <img src=" Имя файла" align=” left”>
<HR> - Создаёт горизонтальную линию и определяет свои параметры:
<hr color=”…”> - Цвет линии.
<hr noshade> - Отменяет трехмерных эффектов.
<hr size=”…”> - Толщина линии.
<hr width=”…”> - Ширина линии.
<hr align=”…”> - Bыравнивает линию задавая значения: center - по центру, left - по левому краю, right - по правому краю.
Таблицы
<TABLE> - основной контейнер таблицы.
<TR> - строка таблицы.
<TD>- ячейка таблицы.
<CAPTION> Заголовок, описание. Не обязательный элемент таблицы.
Пример:
<table>
<caption>Заголовок.</caption>
<tr>
<td>...</td>
</tr>
</table>
<table width="…"> - Ширина таблицы в пикселах “px” или процентах “%”.
<table height="…"> - Высота таблицы в пикселах “px” или процентах “%”.
<table border="…"> - Толщина рамки таблицы.
<table cellspacing="…"> - Расстояние между ячейками таблицы.
<table cellpadding="…"> - Расстояние между содержимым ячейки и ее рамкой.
<tr align="…"> - Содержимое ячеек в строке таблицы выравнивается по горизонту. Значения: “left”, “center”, “right”.
<td align="…"> - Содержимое ячейки выравнивается по горизонту. Значения: “left”, “center”, “right”.
<tr valign="…"> - Содержимое ячеек в строке таблицы выравнивается по вертикали. Значения: “top”, “middle”, “bottom”.
<td valign="…"> - Содержимое ячейки выравнивается по вертикали. Значения: “top”, “middle”, “bottom”.
<td colspan="…"> - Количество ячеек строки объединенных в одну ячейке.
<td rowspan="…"> - Количество ячеек объединенных по вертикали, в одну ячейке.
<td width="…"> - Ширина ячейки в пикселах “px” или процентах “%”.
<td height="…"> - Высота ячейки в пикселах “px” или процентах “%”.
Гиперссылки
<a href="Адрес ресурса - URL"></a> - Задаёт переход на другие ресурсы.
<a href="Имя файла содержащего информацию">Название страницы</a> - Задаёт переход на другие страницы сайта.
<a href="Имя файла содержащего информацию" target="_blank">Название страницы</a> - Задаёт переход на другую страницу сайта в новом окне.
