HTML.Основы
https://t.me/HotCheatSheetСамую малость поговорим о HTML, "языке гипертекстовой разметки".
Основная структура HTML
<html> </html>
— определяет документ как веб-страницу, начало и конец HTML-документа.
<head> </head>
— содержит информацию о документе.
<title> </title>
— отображает заголовок веб-страницы, помещается между тэгом head.
<body> </body>
— содержит видимую информацию HTML-документа.
Пример:
<html> <head> <title>заголовок веб-сайта</title> </head> <body> содержимое веб-страницы ... </body> </html>
Общие тэги для блоков
<h?>
заголовок
</h?>
— заголовок (h1 для наибольшего значения, h6 для наименьшего).
<p>
параграф
</p>
— отдельный абзац текста.
<b>
жирный
</b>
— сделать текст между тегами полужирным шрифтом.
<i>
курсив
</i>
— сделать текст между тегами курсивом.
<a href="URL">
название ссылки
</a>
— создать ссылку на другую страницу или веб-сайт.
<div>
...
</div>
— разделить содержимое страницы на разделы и применить стили.
<img src="filename.jpg">
— вставить изображение.
<ul> <li>
список
</li> </ul>
— неупорядоченный список маркеров
<br>
— разрыв строки.
<span style="color:red">
красный текст
</span>
— использует стиль CSS для изменения цвета текста.
Пример:
<html> <head> <title>заголовок веб-страницы</title> </head> <body> <h1>Мой заголовок</h1> <p>Это первый параграф.</p> <p>Это второй параграф.</p> <p>Картинка: <img src="photo.jpg"> </p> <p>ССылка: <a href="https://t.me/HotCheatSheet"> HotCheatSheet </a></p> </body> </html>
Тэги форматирования текста
<h?> ... </h?>
— заголовок.
<b> ... </b>
— полужирный текст.
<i> ... </i>
— курсивный текст.
<u> ... </u>
— подчеркнутый текст.
<strike> ... </strike>
— вычернутый текст.
<sup> ... </sup>
— верхний индекс - меньший текст, помещенный над обычным текстом.
<sub> ... </sub>
— подстрочный текст - меньший текст, помещенный под обычным текстом.
<small> ... </small>
— уменьшенный размер шрифта.
<code> ... </code>
— предназначен для отображения одной или нескольких строк текста, который представляет собой программный код.
<tt> ... </tt>
— шрифт пишущей машинки.
<pre> ... </pre>
— предварительно отформатированный текст.
<blockquote> ... </blockquote>
— текстовый блок.
<strong> ... </strong>
— в большинстве браузеров отображается как жирный текст.
<em> ... </em>
— в большинстве браузеров отображается как курсив.
<center> ... </center>
— выравнивает содержимое контейнера по центру.
<font> ... </font>
— тег шрифта, устарел. Управление в CSS. Атрибуты тега:
color="#??????"
— устанавливает цвет текста.
size="?"
— задает размер шрифта в условных единицах.
face="?"
— определяет гарнитуру шрифта.
Блочные тэги
<div> ... </div>
— отдел или раздел содержимого страницы.
<span> ... </span>
— используется для изменения стилей тэгов.
<p> ... </p>
— абзац текста.
<br>
— перенос строки.
<hr>
— вставляет горизонтальную линию. Атрибуты тега:
size="?"
— толщина линии в пикселях.
width="?"
— ширина линии в пикселях.
width="??%"
— ширина линии в процентах.
color="#??????"
— цвет линии. Управление в CSS.
align="?"
— горизонтальное выравнивание: left, center, right. Управление в CSS.
noshade
— отменяет трехмерные эффекты.
<nobr> ... </nobr>
— отображает текст без переносов.
Пример:
<html> <body> <p align="right">Первый абзац текста, выровненный по правому краю.</p> <p>Текст второго абзаца. <br>Новая строка, но ещё второго абзаца.</p> <p>Третий абзац текста, после горизонтальная линия.</p> <hr> <p>Немного изменённая горизонтальная линия</p> <hr width="50%" size="8" align="center"> <hr noshade> </body> </html>
Работа с изображениями
<img src="url" alt="
текст
">
— вставить изображение
<img>
Атрибуты тега:
src="url"
— URL или имя файла.
alt="
текст
"
— альтернативный текст(при направлении мыши)
align="?"
— ориентация изображения внутри окружающего текста. Управление в CSS.
width="??"
— ширина изображения (в пикселях или %)
height="??"
— высота изображения (в пикселях или %)
border="??"
— толщина границы (в пикселях). Управление в CSS.
vspace="??"
— пространство выше и ниже изображения (в пикселях). Управление в CSS.
hspace="??"
— пространство по обе стороны изображения (в пикселях). Управление в CSS.
Пример:
<html> <body> <p><img src="photo.jpg" alt="картинка"></p> </body> </html>
Создание ссылок
<a href="url">
текст ссылки
</a>
— основная ссылка
<a>
Атрибуты тега:
href="url"
— URL страницы для ссылки.
name="??"
— название ссылки
target="?"
— укажите целевое местоположение: _self, _blank, _top, _parent
.
href="url#
закладка
"
— ссылка на закладку (определяется атрибутом name).
href="mailto:
email
"
— ссылка, которая инициирует электронную почту.
Пример:
<html> <body> <a href="https://t.me/HotCheatSheet">Обалденный канал</a> <a href="https://t.me/bzd_channel">Ещё один канал</a> </body> </html>
Списки
<ol>
...
</ol>
— упорядоченный список
<ul>
...
</ul>
— неупорядоченный список
<li>
...
</li>
— элемент списка (в пределах упорядоченного или неупорядоченного)
<ol type="?">
— тип упорядоченного списка: A, a, I, i, 1
<ol start="??">
— начальное значение списка
<ul type="?">
— тип неуправляемого списка: disc, circle, square
<li value="??">
— значение списка (изменяется текущий и последующие элементы)
<li type="??">
— тип элемента списка (изменяет только текущий элемент)
<dl>
...
</dl>
— предназначенный для создания списка определений
<dt>
...
</dt>
— тэг создающий термин
<dd>
...
</dd>
— тэг задающий определение этого термина.
Пример:
<html> <body> <ul> <li>Элемент списка</li> <li>Другой элемент</li> </ul> </body> </html> <html> <body> <h3> Упорядоченный список </h3> <ol> <li>Первый элемент</li> <li>Второй элемент</li> </ol> <h3> Изменённый упорядоченный список </h3> <ol type="A" start="6"> <li>1 элемент списка</li> <li>2 элемент списка</li> <li value="12">3 элемент списка</li> <li>4 элемент списка</li> </ol> </body> </html> <html> <body> <dl> <dt>1 термин</dt> <dd>Определение к 1 термину</dd> <dt>2 термин</dt> <dd>Определение к 2 термину</dd> </dl> </body> </html>
Таблицы
<table> ... </table>
— определить таблицу. Атрибуты тега:
border="?"
— толщина внешней границы
bordercolor="#??????"
— цвет границы
cellspacing="?"
— расстояние между ячейками. (в пикселях)
cellpadding="?"
— отступ от рамки до содержимого ячейки.
align="??"
— горизонтальное выравнивание: left, center, right
(*)
bgcolor="#??????"
— цвет фона. Управление в CSS.
width="??"
— ширина таблицы (пиксели или %). Управление в CSS.
height="??"
— высота стола (пиксели или %). Управление в CSS.
<tr> ... </tr>
— служит контейнером для создания строки таблицы.
<th> ... </th>
— заголовочная ячейка в строке таблицы
<td> ... </td>
— создаёт одну ячейку таблицы. Атрибуты тега:
colspan="?"
— объединяет горизонтальные ячейки.
rowspan="?"
— объединяет вертикальные ячейки.
width="??"
— ширина ячейки (в пикселях или %). Управление в CSS.
height="??"
— высота ячейки (пикселей или %). Управление в CSS.
bgcolor="#??????"
— цвет фона. Управление в CSS.
align="??"
— горизонтальное выравнивание: left, center, right
. Управление в CSS.
valign="??"
— вертикальное выравнивание: top, middle, bottom
. Управление в CSS.
nowrap
— запрещает перенос строк.
Пример:
<html> <body> <table border="1"> <tr> <th>Первый заголовок</th> <th>Второй заголовок</th> </tr> <tr> <td>Ячейка A1</td> <td>Ячейка B1</td> </tr> <tr> <td>Ячейка A2</td> <td>Ячейка B2</td> </tr> </table> </body> </html>
Фреймы
<frameset>
...
</frameset>
— определить набор фреймов. Атрибуты тега:
rows="??,??, ..."
— задает размер или пропорции фреймов в виде строк.
cols="??,??, ..."
— устанавливает ширину или пропорции фреймов в виде колонок.
noresize="noresize"
— определяет, можно изменять размер фрейма во frameset пользователю или нет.
<frame> ... </frame>
— определяет свойства отдельного фрейма. Атрибуты тега:
src="url"
— путь к файлу, предназначенному для загрузки во фрейме.
name="***"
— задает уникальное имя фрейма.
marginwidth="?"
— расстояние между горизонтальными границами внутри рамки (в пикселях)
marginheight="?"
— расстояние по вертикали в рамке (в пикселях)
noresize="noresize"
— определяет, можно изменять размер фрейма пользователю или нет.
scrolling="***"
— способ отображения полосы прокрутки во фрейме. Опции: yes, no, auto
frameborder="?"
— граница рамки: (1 = да, 2 = нет)
bordercolor="#??????"
— цвет рамки. Управление в CSS.
<noframes> ... </noframes>
— задать информацию для браузеров, не поддерживающих фреймы.
Пример:
<html> <head> <title>Примеры фреймов</title> </head> <frameset rows="100,*"> <frame name="top" src="frames_top.html"> <frameset cols="50,*,50"> <frame name="left" src="frames_left.html"> <frame name="mid" src="frames_middle.html"> <frame name="right" src="frames_right.html"> </frameset> <noframes> <i>ошибка отображения фрейма</i> </noframes> </frameset> </html>
Создание форм
<form> ... </form>
— устанавливает форму на веб-странице. Атрибуты тега:
action="url"
— адрес программы или документа, который обрабатывает данные формы.
method="***"
— метод протокола HTTP: get, post
.
enctype="***"
— способ кодирования данных формы.
<input> ... </input>
— предназначен для создания текстовых полей. Атрибуты тега:
type="***"
— тип поля ввода: text, password, checkbox, submit
и т. д.
name="***"
— имя поля формы (для скрипта обработки формы)
value="***"
— значение элемента.
size="***"
— ширина текстового поля.
maxlength="?"
— максимальная длина данных входного поля
checked
— предварительно активированный переключатель или флажок.
<select> ... </select>
— создаёт элемент интерфейса в виде раскрывающегося списка. Атрибуты тега:
name="***"
— имя элемента для отправки на сервер или обращения через скрипты.
size="?"
— количество отображаемых строк списка.
multiple
— разрешить множественный выбор
<option> ... </option>
— определяет отдельные пункты списка. Атрибуты тега:
value="***"
— значение опции
selected
— заранее устанавливает определенный пункт списка выделенным.
<textarea> ... </textarea>
— элемент формы для создания области ввода текста. Атрибуты тега:
name="***"
— название текстовой области
rows="?"
— количество строк в тексте
cols="?"
— количество столбцов (символов в строках)
wrap="***"
— параметры переноса строк: off, hard, soft
.
Пример:
<html><body> <h3>Оставьте комментарий:</h3> <form name="formExample1" action="formaction.php" method="post"> Имя: <br> <input type="text" name="name" value="Вася Пупкин"> <br> Оценка: <br> <input type="radio" name="rating" value="1"> 1 <input type="radio" name="rating" value="2"> 2 <input type="radio" name="rating" value="3"> 3 <br> Комментарий: <br> <textarea name="comment">введите комментарий...</textarea> <br><br> <input type="submit" value="Submit Comment"> </form> </body></html> <html><body> <form name="formExample2"> <select name="selectorName" onchange="window.location=document.formExample2.selectorName.value"> <option selected>[выбирете один]</option> <option value="/index.php">домой</option> <option value="/cheatsheet.php">шпаргалка</option> <option value="/examplesheet.php">примеры</option> <option value="/contact.php">обратная связь</option> </select> </form> </body></html>
Специальные символы
<
— <
- символ меньше,чем
>
— >
- символ больше,чем
&
— &
- амперсанд, или знак «и»
"
— "
- кавычка
©
— ©
- символ авторства
™
— ™
- символ товарного знака
— ' ' пробел (неразрывный пробел)
&#??;
— символ ISO 8859-1, заменить ?? iso кодом
Разное
<!-- ... -->
— комментарий в исходном HTML-коде
<!DOCTYPE html ...>
— определение типа HTML-документа
<meta> ... </meta>
— информационный тег. Атрибуты тега:
name="***"
— имя метатэга: description, keywords, author
http-equiv="***"
— предназначен для конвертирования метатега в заголовок HTTP.
content="***"
— устанавливает значение атрибута, заданного с помощью name или http-equiv.
<link>
— связь с внешним документом стиля либо шрифтов. Атрибуты тега:
rel="***"
— тип прямого отношения
http="url"
— URL связанного объекта или файла
type="***"
— тип объекта или файла, например: text/css
title="***"
— название ссылки
Пример:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta name="description" content="Примеры метатэгов"> <meta name="keywords" content="html, meta, tags, example"> <meta name="author" content="Robert Duncan"> <meta http-equiv="Content-Language" content="en"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <!-- страница будет пустой --> </body> </html>
Цвета и фон в <body>
<body>
— Атрибуты тегов:
background="url"
— фоновое изображение. Управление в CSS.
bgcolor="#??????"
— цвет фона. Управление в CSS.
text="#??????"
— цвет текста документа. Управление в CSS.
link="#??????"
— цвет ссылки. Управление в CSS.
vlink="#??????"
— посещаемый цвет ссылок. Управление в CSS.
alink="#??????"
— активный цвет ссылки. Управление в CSS.
bgproperties="fixed"
— определяет, прокручивать фон совместно с текстом или нет. Управление в CSS.
leftmargin="?"
— отступ по горизонтали от левого края окна браузера до контента. Управление в CSS.
topmargin="?"
— отступ от верхнего края окна браузера до контента. Управление в CSS.