Таблица А1 – Структура HTML-страницы.
| HTML
| Комментарии
|
| <html>
| Начало HTML
|
| <head>
| Начало заголовка (Заголовок содержит описательную и служебную информацию)
|
| <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
| Метатеги. Метатеги определяют разную служебную информацию.
Здесь один метатег определяет кодировку текста, а другой говорит, кто делал этот HTML.
|
| <title>Заголовок</title>
| Заголовок для окна браузера
|
| </head>
| Конец заголовка
|
| <body bgcolor="#FFFFFF" text="#000000">
| Начало тела (Содержание страницы. Оформление.)
|
|
А здесь собственно все содержание и оформление страницы.
|
|
| </body>
| Конец тела
|
| </html>
| Конец HTML
|
Таблица А2 – Основные теги, предназначенные для оформления страницы.
| Пример
| HTML
|
| Параграф
Еще один параграф
| <p>Параграф</p>
<p>Еще один параграф</p>
|
| Жирный текст
| <strong>Жирный текст</strong> или <b>Жирный текст</b>
|
| Наклонный текст - курсив
| <em>Наклонный текст - курсив</em> или <i>Наклонный текст - курсив</i>
|
| Подчеркнутый текст
| <u>Подчеркнутый текст</u>
|
| Текст другого цвета
| <font color="#FF0000">
Текст другого цвета
</font>
|
| Текст с другим шрифтом
| <font face="Courier">
Текст с другим шрифтом
</font>
Courier - Имя шрифта
|
| Левое выравнивание текстового параграфа
| <p align="left">
Левое выравнивание текстового параграфа
</p>
|
| Правое выравнивание текстового параграфа
| <p align="right">
Правое выравнивание текстового параграфа
</p>
|
| Выравнивание текстового параграфа по центру
| <p align="center">
Выравнивание текстового параграфа по центру
</p>
|
| Увеличенный отступ текста у какого-то параграфа
| <blockquote>
<p>Увеличенный отступ</p>
</blockquote>
|
| 1. Список из
2. Нумерованных
3. Строчек
| <ol>
<li>Список из</li>
<li>Нумерованных</li>
<li>Строчек</li>
</ol>
|
| · Список
· Строк
· Начинающихся с
· Точек
| <ul>
<li>Список</li>
<li>Строк</li>
<li>Начинающихся с</li>
<li>Точек</li>
</ul>
|
| Гиперссылка на Microsoft
| <a href="https://www.microsoft.ru">
Гиперссылка на Microsoft
</a>
Между тегами <a...> и </a> может быть любой текст и картинки, все это будет гиперссылкой
|
| Перенос на
следующую строку
без начала
нового параграфа
| Перенос на<br>
следующую строку<br>
без начала<br>
нового параграфа
|
| Горизонтальная линия
для разделения
| <p>Горизонтальная линия </p>
<hr>
<p>для разделения </p>
|
| Много пробелов подряд
(больше, чем один пробел)
| Много пробелов
Так кодируются символы в HTML, если символы с таким кодом нельзя вставить напрямую. (Много идущих пробелов и переводы строки в HTML игнорируются)
|
| <img src="picture.gif" width="453" height="493" alt="Это подпись к картинке">
Параметр src задает файл с картинкой.
width и height - задают ширину и высоту картинки, если реальный размер картинки другой, то она будет выведена отмасштабированной. Если width и height не задавать, то браузер сам определит размер.
alt - задает текст, который будет выведен, если картинка еще не загрузилась
|
| Ячейка 1
| Ячейка 2
| | Ячейка 3
| Ячейка 4
|
| <table border="1" width="100%">
<tr>
<td width="50%">Ячейка 1</td>
<td width="50%">Ячейка 2</td>
</tr>
<tr>
<td width="50%">Ячейка 3</td>
<td width="50%">Ячейка 4</td>
</tr>
</table>
100% - это размер таблицы в процентах
50% - это относится к ширинам ячеек относительно таблицы
|
| Ячейка 1
| Ячейка 2
| | Ячейка 3
| Ячейка 4
| Ячейка 5
| | Ячейка 6
| Ячейка 7
|
| <table border="1" width="100%">
<tr>
<td width="66%" colspan="2">
Ячейка 1</td>
<td width="34%">Ячейка 2</td>
</tr>
<tr>
<td width="33%">Ячейка 3</td>
<td width="33%">Ячейка 4</td>
<td width="34%" rowspan="2">
Ячейка 5</td>
</tr>
<tr>
<td width="33%">Ячейка 6</td>
<td width="33%">Ячейка 7</td>
</tr>
</table>
colspan и rowspan - указывают на то что ячейка занимает не одно место
|
| Ячейка 1
| Ячейка 2
| | Ячейка 3
| Ячейка 4
|
| <table border="4" width="70%" cellpadding="3">
<tr>
<td width="50%" bgcolor="#FFFF80">
Ячейка 1</td>
<td width="50%">Ячейка 2</td>
</tr>
<tr>
<td width="50%">Ячейка 3</td>
<td width="50%">Ячейка 4</td>
</tr>
</table>
Здесь задано еще несколько параметров для ячеек и всей таблицы в целом
|
2015-03-22
381
