Лабораторные работы МИРЭА JavaScript (1017114), страница 2
Текст из файла (страница 2)
face — гарнитура шрифта;
size — размер текста шрифта. Может быть задан абсолютным (от 1 до 6) либо относительным значением (от +1 до +6 и от -1 до -6). По умолчанию, размер текста 3. Если указать <font size="+1"></font>, то текст, размещенный между тегами <font> и </font>, будет отображаться увеличенным на 1 по сравнению с другим текстом. Аналогично и с -1.
Пример
<html>
<head>
<title>Тег FONT</title>
</head>
<body>
<p><font size="5" color="red" face="Arial">П</font>ервая буква этого предложения
написана шрифтом Arial, выделена красным цветом и увеличена в размерах.</p>
</body>
</html>
Создание списков в HTML
В HTML списки создаются с помощью тегов <OL></OL> и <UL></UL>. В первом случае создается упорядоченный (нумерованный), во втором неупорядоченный (маркированный) списки. Каждый элемент списка выделяется тегом <LI></LI>. Браузер отображает элементы списка с новой строки в виде столбца с отступом и маркерами. Вид маркера определяется атрибутом type.
В нумерованном списке маркеры (значения атрибута type) такие:
1 — нумерация арабскими цифрами (по умолчанию);
A — большими латинскими буквами по алфавиту;
a — маленькими латинскими буквами;
I — большими римскими цифрами;
i — маленькими римскими цифрами.
Например, HTML-код
<ol type="a">
<li>Первый элемент.</li>
<li>Второй элемент.</li>
<li>Третий элемент.</li>
</ol>
браузер покажет так
a.Первый элемент.
b.Второй элемент.
c.Третий элемент.
В маркированном списке значения атрибута type такие:
disc - закрашенный кружок (по-умолчанию);
circle - незакрашенный кружок;
square - закрашенный квадратик.
Например, HTML-код
<ul type="square">
<li>Первый элемент.</li>
<li>Второй элемент.</li>
<li>Третий элемент.</li>
</ul>
в браузере выглядит так
Первый элемент.
Второй элемент.
Третий элемент.
Как и остальные теги HTML, списки можно вкладывать друг в друга. Получаются многоуровневые вложенные списки. Например, код:
<ol type="a">
<li>Первый элемент.</li>
<li><ul type="square">
<li>Второй элемент.</li>
<li>Третий элемент.</li>
<li>Четвёртый элемент.</li>
</ul>
</li>
<li>Пятый элемент.</li>
</ol>
браузер покажет так
-
Первый элемент.
-
-
Второй элемент.
-
Третий элемент.
-
Четвёртый элемент.
-
-
Пятый элемент.
Гиперссылки
Тэг <a> определяет гиперссылку в Web-странице. Если добавить тэг <а> с ключевым словом «mailto:» в атрибуте href, то пользователям будет представлена возможность связаться с автором Web-страницы по электронной почте:
<a href=«mailto: username@internetprovider.com»>
username@internetprovider.com </a>
После того как пользователь активизирует эту гиперссылку, запустится программа электронной почты, и пользователю будет предоставлена возможность отправить сообщение по адресу, указанному в гиперссылке.
Изображение внедряется в Web-страницу с помощью тэга <img>, который может иметь следующие атрибуты: hspace, id, ismap, lang, langvage, loop, lowsrc, name, src, style, title, usemap, vspace, width, событие-сценарий, onabort, onerror, onload,supress.
Тэг <br> вставляет для браузера, символ перевода строки, и используется для пропусков между строками.
Таблицы предназначены для упорядоченного размещения информации на Web-страницы. В ячейки таблицы можно помещать любую информацию – текст, изображения, гиперссылки и т.п. Для формирования таблицы предназанчен тэг <table>, которые имеют следующие аттрибуты:
align, background, bgcolor, border, bordercolor, bordercolordark, bordercolorlight, cellpadding, cellspacing, class, cols, datapagesize, datasrc, frame, heigth, id, lang, language, rules, style, title, width, событие = сценарий, hsapce, vspace.
формировании таблицы использутся тэг строки таблицы <tr>, тэг заголовка таблицы <th> и тэг данных таблицы <th>.
Рассказ о том, что нужно для форматирования текста в HTML, был бы не полным без упоминания о спецсимволах. Спецсимволы — это символы, которых либо нет на клавиатуре, либо те, которые браузер принимает за управляющий символ и преобразует в код. Полный список этих символов можно найти здесь.
Создание таблицы
Сама таблица в HTML создаётся тегами <TABLE> и </TABLE>, строки таблицы (помещаются между тегами <TABLE> и </TABLE>) тегами <TR> и </TR>, а столбцы таблицы (помещаются между тегами <TR> и </TR>) тегами <TD> и </TD>.
Например, создадим таблицу, состоящую из одной строки и двух столбцов. HTML-код будет выглядеть так:
<table> — начало таблицы
<tr> — начало строки
<td>Первая ячейка</td> — первый столбец
<td>Вторая ячейка</td> — второй столбец
</tr> — конец строки
</table> — конец таблицы
По умолчанию, таблица в браузерах представляется без рамки. Чтобы рамка таблицы была видна, используется атрибут border:
<table border="1">
<tr>
<td>Первая ячейка</td>
<td>Вторая ячейка</td>
</tr>
</table>
Значение атрибута border влияет только на внешнюю рамку, границы между ячейками изменять нельзя. Их можно либо показывать, либо нет. Например, изменить значение атрибута border с 1 на 5:
<table border="5">
<tr>
<td>Первая ячейка</td>
<td>Вторая ячейка</td>
</tr>
</table>
Можно поменять цвет рамки таблицы с помощью атрибута bordercolor. Например:
<table border="5" bordercolor="#FF0000">
<tr>
<td>Первая ячейка</td>
<td>Вторая ячейка</td>
</tr>
</table>
Чтобы изменить отступы между соседними ячейками таблицы, в HTML используется атрибут cellspacing. Давай для наглядности усложним таблицу: сделаем две строки по три столбца и применим атрибут cellspacing:
<table border="1" cellspacing="10">
<tr>
<td>Первая ячейка</td><td>Вторая ячейка</td><td>Третья ячейка</td>
</tr>
<tr>
<td>Четвертая ячейка</td><td>Пятая ячейка</td><td>Шестая ячейка</td>
</tr>
</table>
Для того, чтобы задать отступы внутри ячеек применяется атрибут cellpadding. Если в нашем HTML-коде поменять первую строку:
<table border="1" cellpadding="10">
<tr>
<td>Первая ячейка</td><td>Вторая ячейка</td><td>Третья ячейка</td>
</tr>
<tr>
<td>Четвертая ячейка</td><td>Пятая ячейка</td><td>Шестая ячейка</td>
</tr>
</table>
Чтобы объединить ячейки таблицы по горизонтали (столбцам) или по вертикали (строкам), в HTML применяются следующие атрибуты:
colspan — объединение ячеек по горизонтали (столбцам);
rowspan — объединение ячеек по вертикали (строкам).
Например, изменим наш HTML-код так:
<table border="1" cellpadding="10">
<tr>
<td colspan="2">Первая и вторая ячейки</td><td>Третья ячейка</td>
</tr>
<tr>
<td>Четвертая ячейка</td><td>Пятая ячейка</td><td>Шестая ячейка</td>
</tr>
</table>
Тогда в браузере мы увидим:
В случае использования таблицы для упорядочивания данных (а не для разметки страницы), может понадобиться использование заголовка. Заголовок таблицы задаётся тегом <caption></caption>. Например:
<table border="1" cellpadding="10">
<caption>Заголовок таблицы</caption>
<tr>
<td>Первая ячейка</td><td>Вторая ячейка</td><td>Третья ячейка</td>
</tr>
<tr>
<td>Четвертая ячейка</td><td>Пятая ячейка</td><td>Шестая ячейка</td>
</tr>
</table>
К заголовку таблицы можно применить атрибут align. Для выравнивания относительно таблицы.
Примечание. Значения атрибута align разными браузерами могут интерпретироваться по разному!
У атрибута «align» бывают следующие значения:
left — выравнивает заголовок по левому краю таблицы;
right — выравнивает заголовок по правому краю таблицы;
center — выравнивает заголовок по центру таблицы (значение по умолчанию);
top — то же, что и «center», только работает во всех браузерах;
bottom — заголовок размещается под таблицей по центру.
Пример:
<table border="1" cellpadding="10">
<caption align="bottom">Заголовок таблицы</caption>
<tr>
<td>Первая ячейка</td><td>Вторая ячейка</td><td>Третья ячейка</td>
</tr>
<tr>
<td>Четвертая ячейка</td><td>Пятая ячейка</td><td>Шестая ячейка</td>
</tr>
</table>
Изменить размеры таблицы и ячеек можно с помощью следующих атрибутов:
width — ширина таблицы, столбца, ячейки;
height — высота таблицы, строки, ячейки.
Их значения задаются в пикселах или процентах. Например:
<table border="1" cellpadding="10" height="50px">
<tr>
<td>Первая ячейка</td><td width="75%">Вторая ячейка</td><td>Третья ячейка</td>
</tr>
<tr>
<td>Четвертая ячейка</td><td>Пятая ячейка</td><td>Шестая ячейка</td>
</tr>
</table>
В HTML горизонтальное выравнивание таблицы относительно страницы производится с помощью уже известного тебе атрибута align.
center — выравнивание таблицы по центру;
![](https://s.studizba.com/z.php?f=/templates/si/i/noavatar.png&w=100&h=100&t=1"){kind=avatar}
