Zvezdar - Пособие по HTML

●●●●●

Меню сайта

Поиск

Translate

Пособие по HTML

HTML теги бывают двух видов парные и одиночные. Парные состоят из открывающего тега и закрывающего тега. Так, например, когда браузер компьютера доходит до открывающего тега <i>, то дальше он выводит текст на монитор курсивом. Когда же браузер доходит до закрывающего тега </i>, то он перестает выводить текст курсивом. Парные теги должны располагаться один внутри другого как контейнер в контейнере: правильное расположение тегов <b><i>Правильно</i></b>, неправильное расположение тегов <b><i>Ошибка</b></i>. Среди одиночных тегов чаще чем другие используется тег <br>. Когда браузер доходит до тега <br>, то тогда все, что находится за этим тегом, переносится на начало следующей строки. Ниже приведены примеры использования HTML тегов. При наборе тегов соблюдение пробелов обязательно. HTML документ можно набирать в одну строку или несколько строк. Разбивка HTML документа на строки осуществляется для удобства его чтения. При наборе HTML кодов можно использовать как заглавные буквы, так и прописные. Для дальнейшего ознакомления с HTML тегами или же в случае возникновения каких нибудь вопросов рекомендуется сайты html.manual.ru, htmlbook.ru.

Существуют программы, которые значительно упрощают процесс набора HTML документа. Ниже находится онлайн HTML редактор, который вы можете использовать для создания электронных писем, страниц блогов, сайтов. В визуальной панели редактора осуществляется набор текста и черновое форматирование. В HTML панели редактора (кнопка "HTML") выполняется чистовое форматирование путем ручного добавления HTML кодов. Следует отметить, что визуальный редактор не является конвертером. Если документ уже набран в другом формате, например, в текстовом редакторе Microsoft Word, то вставлять его в визуальную панель редактора необходимо с удалением форматирования - вначале скопировать в Блокнот, и лишь потом в визуальный редактор. Блокнот можно использовать для сохранения HTML кодов.

HTML редактор Примеры использования HTML тегов

Пример использования Результат использования

<i>Выделить текст курсивом</i> Выделить текст курсивом

<b>Выделить текст жирным</b> Выделить текст жирным

<i><b>Текст жирный курсив</b></i> Текст жирный курсив

<u>Подчеркнуть текст</u> Подчеркнуть текст

<s>Зачеркнуть текст</s> ~~Зачеркнуть текст~~

<tt>Моноширинный текст</tt> Моноширинный текст

<center>Поместить текст или рисунок посреди строки</center> Поместить текст или рисунок посреди строки

<div align="center">Поместить текст или рисунок посреди строки</div>

Примечание: Этот тег работает в любом браузере, но не работает в визуальном редакторе uCoz.

Поместить текст или рисунок посреди строки

<marquee scrollamount="3">Бегущая строка</marquee>

Примечание: Этот тег работает в любом браузере, но не работает в визуальном редакторе.

Бегущая строка

<small>Уменьшить текст</small> Уменьшить текст

<big>Увеличить текст</big> Увеличить текст

<big><big>Еще больше увеличить текст</big></big> Еще больше увеличить текст

<span style="color: green;">Выделить текст зеленым цветом</span> Выделить текст зеленым цветом

<span style="color: #000FFF; font-family: Times New Roman; font-size: 12pt;">Выделить текст синим цветом, шрифт Times New Roman, размер 12pt</span> Выделить текст синим цветом, шрифт Times New Roman, размер 12pt

Текст как <sub>нижний регистр</sub> Текст как _{нижний регистр}

Текст как <sup>верхний регистр</sup> Текст как ^{верхний регистр}

Текст как <span style="font-size: 6pt; vertical-align: bottom;">нижний регистр</span> без увеличения высоты строки Текст как нижний регистр без увеличения высоты строки

Текст как <span style="font-size: 6pt; vertical-align: top;">верхний регистр</span> без увеличения высоты строки Текст как верхний регистр без увеличения высоты строки

<p>Самый простой способ выделить абзац</p>

Самый простой способ выделить абзац

<div style="font-family: Georgia;">Выделить абзац шрифтом Georgia</div>

Выделить абзац шрифтом Georgia

<div style="font-size: 12pt;">Выделить абзац шрифтом размер 12pt</div>

Выделить абзац шрифтом размер 12pt

<div style="font-family: Georgia; font-size: 12pt;">Выделить абзац шрифтом Georgia, размер 12pt</div>

Выделить абзац шрифтом Georgia, размер 12pt

<div style="color: red;">Выделить абзац красным шрифтом</div>

Выделить абзац красным шрифтом

<div style="text-align: center;">Выравнивание абзаца посредине</div>

Выравнивание абзаца посредине

<div style="text-align: right;">Выравнивание абзаца справа</div>

Выравнивание абзаца справа

<div style="text-align: left;">Выравнивание абзаца слева</div>

Выравнивание абзаца слева

<div style="text-align: justify;">Таким способом при помощи тега div осуществляется выравнивание абзаца с обеих сторон</div>

Таким способом при помощи тега div осуществляется выравнивание абзаца с обеих сторон

<div style="text-indent: 10px; text-align: justify;">Таким способом осуществляется выравнивание абзаца с обеих сторон с отступом в первой строке 10px. Выравнивание абзацев с обеих сторон с отступом в первой стоке широко распространено в книгах и во многих документах.</div>

Таким способом осуществляется выравнивание абзаца с обеих сторон с отступом в первой строке 10px. Выравнивание абзацев с обеих сторон с отступом в первой стоке широко распространено в книгах и во многих документах.

<div style="text-indent: 10px; text-align: justify; color: #FF00CC;">Таким способом осуществляется выравнивание абзаца с обеих сторон с отступом в первой строке 10px, цвет текста #FF00CC. Выделение текста цветом делает сайт более привлекательным.</div>

Таким способом осуществляется выравнивание абзаца с обеих сторон с отступом в первой строке 10px, цвет текста #FF00CC. Выделение текста цветом делает сайт более привлекательным.

<div style="margin-top: 15px;">Отступ над абзацем сверху 15px</div>

Отступ над абзацем сверху 15px

<div style="margin-bottom: 15px;">Отступ под абзацем снизу 15px</div>

Отступ под абзацем снизу 15px

<div style="margin-left: 40px;">Отступ всего абзаца слева 40px</div>

Отступ всего абзаца слева 40px

<div style="text-align: right; margin-right: 40px;">Отступ всего абзаца справа 40px</div>

Отступ всего абзаца справа 40px

<div style="text-indent: 15px; margin: 3px 4px 5px 6px; text-align: justify; padding: 6px 0.5em; background-color: #FFF2BF; color: black; border: 2px solid #FFD747;">Таким способом осуществляется выделение одного (нескольких) абзацев (блока) рамкой: отступ в первой строке 15px; отступ сверху 3px, справа - 4px, снизу - 5px, слева - 6px; выравнивание абзаца с обеих сторон; пробел между текстом и рамкой 6px 0.5em; цвет фона #FFF2BF; цвет текста black; размер рамки 2px, цвет рамки #FFD747.</div>

Таким способом осуществляется выделение одного (нескольких) абзацев (блока) рамкой: отступ в первой строке 15px; отступ сверху 3px, справа - 4px, снизу - 5px, слева - 6px; выравнивание абзаца с обеих сторон; пробел между текстом и рамкой 6px 0.5em; цвет фона #FFF2BF; цвет текста black; размер рамки 2px, цвет рамки #FFD747.

<fieldset><legend>Группирование элементов</legend>Элемент 1<br>Элемент 2<br>Элемент 3</fieldset>

Группирование элементовЭлемент 1
Элемент 2
Элемент 3

<acronym style="cursor:help; border-bottom: 1px dotted red;" title="Всплывет подсказка">Наведи курсор</acronym> Наведи курсор

Открыть <a href="http://zvezdar.net">zvezdar.net</a> в этой вкладке Открыть zvezdar.net в этой вкладке

Открыть <a href="http://zvezdar.net/" target="_blank">zvezdar.net</a> в новой вкладке Открыть zvezdar.net в новой вкладке

Цветная ссылка с подсказкой <a style="text-decoration: none; padding: 2px 0.5em; background-color: #821616; color: #FF3232; border: 2px solid #CC0016; margin-left: 2px;" href="http://zvezdar.net/" title="http://zvezdar.net/" target="_blank"><b>Zvezdar.Net</ b></a> Цветная ссылка с подсказкой Zvezdar.Net

Показать изображение <img src="http://zvezdar.net/a/8_1.jpg">

Примечание: Необходимо указывать адрес картинки в Интернете. Если указан адрес картинки в компьютере, то тогда другие пользователи Интернета эту картинку не увидят.

Показать изображение

<center>Показать изображение посредине следующей строки<br><img src="http://zvezdar.net/a/8_2.jpg" vspace="2"></center>

Примечание: vspace="2" - протсранство над и под картинкой.

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

Изображение может быть ссылкой <a target="_blank" href="http://zvezdar.net"><img src="http://zvezdar.net/a/8_3.jpg" border="0"></a>

Примечание: Если не указать border="0", то тогда некоторые браузеры дорисуют рамку.

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

Таблица 2×2, ширина таблицы 100% (задается в % или в px), цвет таблицы #DBE8FF, цвет ячеек таблицы #EDF3FF, толщина рамки таблицы 1 пиксель, расстояние между ячейками 2 пикселя, внутри ячейки расстояние между рамкой и содержимым 3 пикселя, размер второй колонки 30%
<table style="background-color: #DBE8FF;" cellpadding="3" cellspacing="2" width="100%" border="1">
<tbody style="background-color: #EDF3FF;">
<tr><td>Ячейка 1:1</td><td width="30%">Ячейка 1:2</td></tr>
<tr><td>Ячейка 2:1</td><td>Ячейка 2:2</td></tr>
</tbody>
</table>

Примечание: При помощи таблиц можно создавать колонки.

Таблица 2×2, ширина таблицы 100% (задается в % или в px), цвет таблицы #DBE8FF, цвет ячеек таблицы #EDF3FF, толщина рамка 1 пиксель, расстояние между ячейками 2 пикселя, внутри ячейки расстояние между рамкой и содержимым 3 пикселя, размер второй колонки 30%

Ячейка 1:1	Ячейка 1:2
Ячейка 2:1	Ячейка 2:2

Объединение двух горизонтальных ячеек
<table style="background-color: #DBE8FF;" cellpadding="3" cellspacing="2" width="100%" border="1">
<tbody style="background-color: #EDF3FF;">
<tr><td colspan=2>Ячейка 1:1</td></tr>
<tr><td>Ячейка 2:1</td><td>Ячейка 2:2</td></tr>
</tbody>
</table>

Объединение двух горизонтальных ячеек

Ячейка 1:1
Ячейка 2:1	Ячейка 2:2

Объединение двух вертикальных ячеек
<table style="background-color: #DBE8FF;" cellpadding="3" cellspacing="2" width="100%" border="1">
<tbody style="background-color: #EDF3FF;">
<tr><td rowspan=2>Ячейка 1:1</td><td>Ячейка 1:2</td></tr>
<tr><td>Ячейка 2:2</td></tr>
</tbody>
</table>

Объединение двух вертикальных ячеек

Ячейка 1:1	Ячейка 1:2
	Ячейка 2:2

<table align="center" style="background-color: #DBE8FF;" cellpadding="3" cellspacing="2" width="70%" border="1">
<tbody> style="background-color: #EDF3FF;"
<tr><td>Колонка посреди окна<br>Следующая строка</td></tr>
</tbody>
</table>
Текст колонку не обтекает

Колонка посреди окна
Следующая строка

Текст колонку не обтекает

<table align="left" style="background-color: #DBE8FF; width: 50%; margin-right: 4px;" cellpadding="3" cellspacing="2" border="1">
<tbody style="background-color: #EDF3FF;">
<tr><td>Колонка слева<br>Следующая строка</td></tr>
</tbody>
</table>
Текст обтекает колонку справа

Колонка слева
Следующая строка

Текст обтекает колонку справа

<table align="right" style="background-color: #DBE8FF; width: 50%; margin-left: 4px;" cellpadding="3" cellspacing="2" border="1">
<tbody style="background-color: #EDF3FF;">
<tr><td>Колонка справа<br>Следующая строка</td></tr>
</tbody>
</table>
Текст обтекает колонку слева

Колонка справа
Следующая строка

Текст обтекает колонку слева

^ Наверх ^ Базовые цвета (Сверху название цвета, снизу его HEX-код)

Black `#000000`	Gray `#808080`	Silver `#C0C0C0`	White `#FFFFFF`
Red `#FF0000`	Fuchsia `#FF00FF`	Maroon `#800000`	Purple `#800080`
Navy `#000080`	Blue `#0000FF`	Aqua `#00FFFF`	Green `#008000`
Lime `#00FF00`	Teal `#008080`	Yellow `#FFFF00`	Olive `#808000`

Больше цветов

Спецсимволы HTML

Описание спецсимвола	HTML код	Вид	Описание спецсимвола	HTML код	Вид
неразрывный пробел			прописная дельта	Δ	Δ
короткий пробел	&ensp;		прописная ламбда	Λ	Λ
длинный пробел	&emsp;		прописная сигма	Σ	Σ
узкий пробел			прописная омега	Ω	Ω
параграф	§	§	строчная альфа	α	α
знак авторского права	©	©	строчная бета	β	β
торговая марка	™	™	строчная гамма	γ	γ
охраняемый знак	®	®	строчная дельта	δ	δ
амперсант	&	&	строчная эпсилон	ε	ε
надчеркивание	¯	¯	строчная дзета	ζ	ζ
короткое тире	–	–	строчная эта	η	η
длинное тире	—	—	строчная тета	θ	θ
средняя точка	·	•	строчная ламбда	λ	λ
градус	°	°	строчная мю	μ	μ
единица в верхнем индексе	¹	¹	строчная ню	ν	ν
вторая степень	²	²	строчная кси	ξ	ξ
третья степень	³	³	строчный омикрон	ο	ο
одна четвертая	¼	¼	строчная пи	π	π
одна вторая	½	½	строчная ро	ρ	ρ
три четверти	¾	¾	строчная сигма конечная	&sigmaf;	ς
левая угловая скобка	<	<	строчная сигма	σ	σ
правая угловая скобка	>	>	строчная тау	τ	τ
левая угловая скобка	&lang;	⟨	строчная ипсилон	υ	υ
правая угловая скобка	&rang;	⟩	строчная фи	φ	φ
открывающая угловая кавычка	&lsaquo;	‹	строчная хи	χ	χ
закрывающая угловая кавычка	&rsaquo;	›	строчная пси	ψ	ψ
открывающая двойная угловая кавычка	«	«	строчная омега	ω	ω
закрывающая двойная угловая кавычка	»	»	символ строчная тета	&thetasym;	ϑ
кавычка	"	"	стрелка влево	←	←
открывающая одинарная кавычка	‘	‘	стрелка вверх	↑	↑
закрывающая одинарная кавычка	’	’	стрелка вправо	→	→
нижняя одинарная кавычка	&sbquo;	‚	стрелка вниз	↓	↓
открывающая двойная кавычка	“	“	стрелка влево-вправо	↔	↔
закрывающая двойная кавычка	”	”	возврат каретки	&crarr;	↵
нижняя двойная кавычка	&bdquo;	„	двойная стрелка влево	←	←
знак промилле	&permil;	‰	двойная стрелка вверх	↑	↑
евро	€	€	двойная стрелка вправо	→	→
курсивное f	&fnof;	ƒ	двойная стрелка вниз	↓	↓
многоточие	…	…	двойная стрелка влево-вправо	↔	↔
знак прим	′	′	квантор всеобщности	∀	∀
знак двойной прим	″	″	знак дифференциала	∂	∂
надчеркивание	&oline;	‾	квантор существования	∃	∃
дробная черта	&frasl;	⁄	пустое множество	∅	∅
перпендикулярно	&perp;	⊥	набла	∇	∇
оператор точка	·	·	принадлежит множеству	∈	∈
маркер списка	•	•	не принадлежит множеству	∉	∉
ромб	&loz;	◊	является членом	&ni;	∋
круг	○	○	произведение	∏	∏
закрашенный круг	●	●	сумма	∑	∑
треугольник налево	◄	◄	плюс-минус	±	±
треугольник вниз	▼	▼	знак минус	−	−
треугольник направо	►	►	знак умножения	×	×
треугольник вверх	▲	▲	оператор звездочка	&lowast;	∗
закрашенный квадрат	■	■	радикал	√	√
закрашенный малый квадрат	▪	▪	пропорционально	&prop;	∝
пики	&spades;	♠	бесконечность	∞	∞
трефы	&clubs;	♣	угол	&ang;	∠
червы	&hearts;	♥	логическое И	&and;	∧
бубны	&diams;	♦	логическое ИЛИ	&or;	∨
знак деления	÷	÷	пересечение	∩	∩
перевернутый вопросительный знак	¿	¿	объединение	∪	∪
циркумфлекс	&circ;	ˆ	интеграл	∫	∫
малая тильда	&tilde;	˜	оператор тильда	&sim;	∼
кинжал	&dagger;	†	приблизительно равно	&cong;	≅
двойной кинжал	&Dagger;	‡	асимптотически равно	≈	≈
рукописная P	&weierp;	℘	не равно	≠	≠
мнимая часть числа	&image;	ℑ	тождественно равно	&equiv;	≡
действительная часть числа	&real;	ℜ	меньше или равно	≤	≤
алеф	&alefsym;	ℵ	больше или равно	≥	≥

^ Наверх ^

Понедельник, 29.04.2024, 06:02	Приветствую Вас Гость
Zvezdar
	Главная \| Регистрация \| Вход