Wiki-учебник по веб-технологиям: HTML/ПримерыКодаПоОсновнымЭлементамHTML ...

Главная | |

Примеры кода по основным элементам HTML

Структура документа HTML


<html>
<head>
<title>Здесь находится название документа</title>
</head>
<body>
Здесь находится выводимый текст
</body>
</html>

Элементы заголовка


<h1>Самый крупный заголовок</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>Самый мелкий заголовок</h6>

Элементы текста


<p>Это параграф</p>
<br> (перенос строки)
<hr> (горизонтальная линейка)
<pre>Этот текст заранее отформатирован</pre>

Логическое форматирование


<em>Этот текст выделен </em>
<strong>Этот текст акцентирован</strong>
<code>Это некоторый программный код</code>

Физическое форматирование


<b>Этот текст жирный</b>
<i>Этот текст наклонный</i>

Ссылки, анкоры


<a href="http://www.example.com/">Это ссылка</a>
<a href="http://www.example.com/"><img src="URL" alt="заменяющий текст"></a>
<a href="mailto:webmaster@example.com">Пошлите e-mail</a>
Именованный анкор:
<a name="tips">Раздел полезных советов</a>
<a href="#tips">Переход в Раздел полезных советов</a>

Изображения


<img src="img/image.jpg" alt="текст будет показан, если не загрузится картинка" title="текст при наведении" border="0" height="100" width="200">

Неупорядоченный список


<ul>
<li>Первый элемент</li>
<li>Следующий элемент</li>
</ul>

Упорядоченный список


<ol>
<li>Первый элемент</li>
<li>Следующий элемент</li>
</ol>

Список определений


<dl>
<dt>Первый термин</dt>
<dd>Определение</dd>
<dt>Следующий термин</dt>
<dd>Определение</dd>
</dl>

Таблицы


<table border="1">
<tr>
<th>какой-то заголовок</th>
<th>какой-то заголовок</th>
</tr>
<tr>
<td>какой-то текст</td>
<td>какой-то текст</td>
</tr>
</table>

Формы


<form action="http://www.example.com/test.asp" method="post/get">
<input type="text" name="lastname" value="Петров" size="30" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit">
<input type="reset">
<input type="hidden">
<select>
<option>Яблоки
<option selected>Бананы
<option>Вишня
</select>
<textarea name="Комментарии" rows="60" cols="20"></textarea>
</form>

Символьные объекты


&lt; то же самое что <
&gt; то же самое что >
&#169; то же самое что ©

Другие элементы


<!-- Это комментарий -->
<blockquote>
Текстовая цитата из некоторого источника.
</blockquote>
<address>
Город <br>
Адрес 1<br>
Адрес 2<br>
</address>