Основные элементы документа 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>
Списки
Неупорядоченный список <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>
Фреймы
<frameset cols="25%,75%"> <frame src="page1.htm" /> <frame src="page2.htm" /> </frameset>
Формы
<form action="http://www.example.com/test.asp" method="post/get"> <input type="text" name="email" value="someone@example.com" size="40" 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> <option selected="selected">Бананы</option> <option>Вишни</option> </select> <textarea name="comment" rows="60" cols="20"></textarea> </form>
Специальные символы
< то же, что и < > то же, что и > © то же, что и ©
Другие элементы
<!-- Здесь должен быть комментарий--> <blockquote> А это цитата. </blockquote> <address> Взято с W3Schools.com<br /> <a href="mailto:us@example.org">Напишите нам</a><br /> Адрес: Box 564, Disneyland<br /> Телефон: +12 34 56 78 </address>
Часто в интернете можно встретить документы, которые оформлены как газетные полосы с использованием колонок.
Html разметка - использование таблиц
Одним из приемов разметки документов в HTML является использование таблиц. Часть этой страницы отформатирована в виде двух колонок как газетная страница. Вы видите, что текст расположен в двух колонках. Этот текст отображается в левой колонке. |
HTML-тег <table> используется для разделения текста на две колонки. Уловка в том, что используется таблица без рамок и, возможно, с увеличенным отступом между ячейками (cell-padding). Не имеет значения, какое количество текста будет добавлено — он останется в пределах этой колонки. |
Та же разметка, но с добавлением фонового цвета
Одним из приемов разметки документов в HTML является использование таблиц. Часть этой страницы отформатирована в виде двух колонок как газетная страница. Вы видите, что текст расположен в двух колонках. Этот текст отображается в левой колонке. |
HTML-тег <table> используется для разделения текста на две колонки. Уловка в том, что используется таблица без рамок и, возможно, с увеличенным отступом между ячейками (cell-padding). Не имеет значения, какое количество текста будет добавлено — он останется в пределах этой колонки. |
Используя фреймы, можно отображать несколько веб-страниц в одном окне браузера.
Примеры
Вертикальный фрейм Пример демонстрирует создание вертикального фрейма из трех различных документов.
Горизонтальный фрейм
Пример демонстрирует создание горизонтального фрейма из трех различных документов.
Фреймы
Использование фреймов позволяет отображать несколько html-документов в одном окне браузера. Каждый отображаемый документ можно представить как «форточку» (субокно). Он называется фреймом и независим от других фреймов.
Недостатки фреймов:
Разработчик должен следить за большим количеством веб-страниц
Трудно распечатать всю страницу
Нельзя добавить страницу в закладки
Тег frameset
Тег <frameset> указывает способ вставки фреймов в окно браузера и переводится как набор фреймов
Каждый фреймсет определяет количество столбцов/строк, т.е. указывает какое количество фреймов должно быть по горизонтали и по вертикали. Проще говоря, он нужен для разметки окна браузера под фреймы
Значения rows/columns (в пикселях или процентах) определяют какую часть окна будут занимать строки/столбцы
Тег frame
Тег <frame> указывает какой html-документ должен быть загружен в окно браузера
В примере ниже у нас есть набор фреймов, состоящий из двух колонок. Первая колонка занимает 25% ширины окна браузера. Вторая колонка занимает 75% ширины окна браузера. HTML-документ "frame_a.htm" отображается в первой колонке, а html-документ "frame_b.htm" — во второй:
<frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset>
Заметка: Ширина колонки/столбца фреймсета может быть указана в пикселях (cols="200,500"), либо может быть указано одно значение, а другое будет вычислено автоматически (cols="25%,*").