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.