Партнерка на США и Канаду по недвижимости, выплаты в крипто
- 30% recurring commission
- Выплаты в USDT
- Вывод каждую неделю
- Комиссия до 5 лет за каждого referral
Справочник по HTML
HTML - это специальный язык, на котором описывается, как должен быть показан документ на экране компьютера.
Команды языка (теги) заключаются в угловые скобки. Как правило, теги парные. Первый тег открывает описание команды, определяет ее начало, второй, отличающийся от первого наличием косой черты “/” перед ключевым словом (именем тега), закрывает его.
Структура HTML-программы
Команды языка HTML | Комментарии |
<HTML> | Начало HTML-документа |
<head> | Начало заголовка |
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> | Метатег задает браузеру информацию о кодировке, в которой написан текст HTML-документа. В данном случае задана стандартная кодировка Windows. |
<title>имя HTML-документа</title> | Имя HTML-документа браузер использует в заголовке окна Windows, в котором показывает документ. |
</head> | Конец заголовка |
<body bgcolor="#FFFFFF" text="#000000"> | Начало тела. Цвета для фона и шрифта на всем протяжении документа можно задать при помощи атрибутов bgcolor и text в теге <BODY> |
Содержание и оформление страницы. | Между тегами <BODY> и </BODY> располагаются команды, следуя которым браузер выводит информацию в окно документа. |
</body> | Конец тела |
</html> | Конец HTML-документа |
Основные теги, предназначенные для оформления страницы.
Открывающие теги могут содержать атрибуты, то есть дополнительную информацию о свойствах отображаемого на экране элемента. Атрибуты записываются внутри открывающего тега после его имени в виде отдельного ключевого слова или ключевого слова, знака “=” и параметра (значения атрибута). Порядок следования атрибутов в теге не важен.
Пример | Команды языка HTML | Комментарии | |
Абзац Еще один абзац | <p> | Браузер использует не красную, а пустую строку для отделения одного абзаца от другого или абзаца от других элементов документа. Задается абзац тегами <P> и </P>, между которыми помещается текст. | |
Полужирный текст | <strong>Полужирный текст</strong> | Выделение текста полужирным шрифтом | |
Наклонный текст | <em>Наклонный текст</em> | Выделяет текст курсивом | |
Подчеркнутый текст | <u>Подчеркнутый текст</u> | Выделяет текст подчёркиванием | |
Текст увеличенного размера | <big>Текст увеличенного размера</big> | Команда увеличивает размер шрифта. Команды могут быть вложенными, что позволяет увеличивать размер в несколько раз. | |
Текст уменьшенного размера | <small>Текст уменьшенного размера</small> | Команда уменьшает размер шрифта. Команды могут быть вложенными, что позволяет уменьшать размер в несколько раз. | |
Верблюд 180 р. Баран 30 р. Кумыс 1 р. 75 к. итого - 211 р. 75 к. | <PRE> Верблюд 180 р. Баран 30 р. Кумыс 1 р. 75 к. итого - 211 р. 75 к. </PRE> | Команда <PRE>...</PRE> заставляет браузер выводить текст на экран так, как он записан в программе — со всеми пробелами и концами строк. Это удобно при показе сложных страниц. | |
Текст другого цвета | <font color="#FF0000"> | Используя команду <FONT>...</FONT>, можно не только переопределить цвет шрифта, но также его размер и внешний вид. | |
Текст с другим шрифтом | <font face="Courier"> | Атрибут face определяет список разделенных запятыми названий шрифтов, поиск которых агент пользователя должен выполнить в порядке приоритета. Courier - Имя шрифта | |
Левое выравнивание текстового параграфа | <p align="left"> | <P align=left> — выравнивает абзац по левому краю | |
Правое выравнивание текстового параграфа | <p align="right"> | <P align=right> — выравнивает абзац по правому краю | |
Выравнивание текстового параграфа по центру | <p align="center"> | <P align=center> — выравнивает абзац по центру | |
Увеличенный отступ текста от края страницы | <blockquote> | Большие цитаты можно выделять из основного текста при помощи команды <BLOCKQUOTE>...</BLOCKQUOTE>. Браузер отображает цитату с большим, чем у обычного текста, левым и правым отступом от края страницы. | |
1. Список из 2. Нумерованных 3. Строчек | <OL> <LI>первый элемент</LI> <LI>второй элемент</LI> ... <LI>последний элемент</LI> </OL> | В нумерованных списках каждый элемент снабжен номером, вид и начальное значение которого настраивается специальным атрибутом. Нумерованный список задается при помощи команды <OL>. | |
· Список · Строк · Начинающихся с · Точек | <UL> <LI>первый элемент</LI> <LI>второй элемент</LI> ... <LI>последний элемент</LI> </UL> | Каждый элемент маркированного списка браузер предваряет меткой в начале строки, а сами строки смещает вправо. | |
Гиперссылка на Microsoft | <a href=http://www. ***** Гиперссылка на Microsoft> </a> | Переход к другому документу осуществляется при помощи команды <A> с атрибутом href=имя_файла. Между тегами <a...> и </a> может быть любой текст и картинки, все это будет гиперссылкой. | |
Задание перехода по метке На экран выводится ссылка: текст Метка. Сюда браузер приходит по ссылке. На экране ничего не отображается. | <A href=#метка>текст</A> ... ... <A name=метка></A> | Для задания гипертекстового перехода внутри документа используют две команды <A>. Первая команда с атрибутом href является источником перехода, вторая с атрибутом name — приемником. | |
Переход на | Переход на<br> | Принудительный переход на новую строку | |
Горизонтальная линия
для разделения | <p>Горизонтальная линия </p> <hr size=1> <p>для разделения </p> | Горизонтальная линия задается непарным тегом <HR>, который может содержать атрибут size, изменяющий толщину линии | |
Много пробелов подряд | Много пробелов | Так кодируются символы в HTML, если символы с таким кодом нельзя вставить напрямую. (Много идущих пробелов и переводы строки в HTML игнорируются) | |
| <img src="picture. gif" width="262" height="100" alt="Это подпись к картинке"> | Картинку в документ можно поместить при помощи непарного тега <img>. Атрибут src задает файл с картинкой. Атрибуты width и height - задают ширину и высоту картинки, если реальный размер картинки другой, то она будет выведена отмасштабированной. Если width и height не задавать, то браузер сам определит размер. Атрибут alt - задает текст, который будет выведен, если картинка еще не загрузилась | |
Ячейка 1 | Ячейка 2 | <table border="1" width="100%"> | Таблица задается командой <TABLE> ... </TABLE>. Внутри этих тэгов задаются строки командами <TR> ... </TR>. Внутри строк задаются клетки (ячейки) командами <TD> ... </TD>. Таким образом, по строкам, описывается вся структура таблицы. |
Ячейка 3 | Ячейка 4 | ||
Ячейка 1 | Ячейка 2 | <table border="1" width="100%"> <tr> | Атрибуты colspan и rowspan - указывают на то что ячейка занимает не одно место. colspan указывает ширину большой ячейки (в столбцах) rowspan указывает высоту большой ячейки (в строках) |
Ячейка 3 | Ячейка 4 | Ячейка 5 | |
Ячейка 6 | Ячейка 7 | ||
Ячейка 1 | Ячейка 2 | <table border="4" width="70%" cellpadding="3"> | Здесь задано еще несколько параметров для ячеек и всей таблицы в целом |
Ячейка 3 | Ячейка 4 | ||
И еще несколько комментариев:
Размеры таблиц и некоторых других вещей могут быть указаны либо в абсолютных величинах (т. е. в пикселях), либо в относительных (т. е. в процентах). Запись "50" указывает размер в 50 пикселей, а запись "50%" размера - 50% от максимально возможного в данных условиях.
Атрибуты команды TABLE
Атрибут | Значение | Описание |
align | left, right | Выравнивание по горизонтали |
width | число или процент | Ширина таблицы |
cellpadding | число | Расстояние между содержимым ячейки и рамкой |
cellspacing | число | Расстояние между ячейками таблицы |
bgcolor | цвет | Цвет фона таблицы |
background | файл | Фоновая картинка |
border | число | Ширина линий рамки |
bordercolor | цвет | Цвет линий рамки |
bordercolordark | цвет | Цвет рамки (снизу и справа) |
bordercolorlight | цвет | Светлый цвет рамки (сверху и слева) |
Варьируя атрибутами команды TR, можно установить те или иные свойства одновременно для всех ячеек строки.
Атрибут | Значения | Описание |
align | left, center, right | Выравнивание по горизонтали |
valign | top, center, bottom, baseline | Выравнивание по вертикали |
bgcolor | цвет | Цвет фона |
bordercolor | цвет | Цвет линий рамки |
bordercolordark | цвет | Цвет рамки (снизу и справа) |
bordercolorlight | цвет | Светлый цвет рамки (сверху и слева) |
Команды TD и TH имеют следующие атрибуты:
Атрибут | Значения | Описание |
align | left, center, right | Выравнивание по горизонтали |
valign | top, center, bottom, baseline | Выравнивание по вертикали |
width | число или процент | Ширина ячейки |
bgcolor | цвет | Цвет фона |
background | файл | Фоновая картинка |
bordercolor | цвет | Цвет линий рамки |
bordercolordark | цвет | Цвет рамки (снизу и справа) |
bordercolorlight | цвет | Светлый цвет рамки (сверху и слева) |
nowrap | Выключение автоматического разрыва строк | |
colspan | число | Ширина большой ячейки (в столбцах) |
rowspan | число | Высота большой ячейки (в строках) |
Цвета, обычно кодируются в формате RGB (Красный/Зеленый/Синий). Записывается это как "#RRGGBB", где RR - шестнадцатеричное значение красной составляющей, GG - зеленой, а BB - синей. 00 - обозначает отсутствие свечения, а FF - максимальное свечение.
Шестнадцатеричная кодировка - это почти, то же, что и обычная десятичная, только цифр там не 10, а 16, т. е. 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Таким образом, число FF соответствует десятичному числу 256. |
Вот примеры цветов, закодированных таким образом:
000000 | #FFFFFF | #FF0000 | #FFFF00 | #408080 |
Чёрный | Белый | Красный | Жёлтый | Зелёный |
Цвета ссылок
В браузерах цвета ссылок по умолчанию такие:
синий — цвет неотработанной ссылки
красный — цвет активной ссылки
пурпурный — цвет отработанной ссылки
! Всегда записывайте в теге BODY атрибуты, явно задающие цвета ссылок.
<BODY bgcolor=white text=black link=blue alink=red vlink=purple>
