Файл: Основы программирования на языке HTML (Язык HTML и его назначение)..pdf
Добавлен: 31.03.2023
Просмотров: 466
Скачиваний: 3
<body>
<table>
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td></tr>
</table>
</body>
HTML тег <th> (table header) применяется в таблицах внутри тегов <tr> для создания заголовочной ячейки. Текст введенный в заголовочную ячейку по умолчанию отображается жирным шрифтом и выравнивается по центру ячейки. [4,c.125]
Содержимым тега <th> может быть все, что можно поместить в тело HTML-документа, включая изображения, текст, формы, ссылки и тд. и даже другие таблицы. Браузер автоматически создаст таблицу нужного размера для корректного отображения содержимого всех ячеек.[30]
Например, запись <TH> Текст заголовка </TH> приведет к форматированию текста внутри тега полужирным шрифтом.
Листинг 1.39. Код простой HTML-таблицы, состоящей из трех строк и трех столбцов
<html>
<head>
<title>Простая HTML-таблица</title>
<head>
<body>
<table>
<caption>Это заголовок таблицы</caption>
<tr><th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th></tr>
<tr><td>Ячейка 2x1 </td><td>Ячейка
2x2 </td><td>Ячейка 2x3 </td></tr>
<tr><td>Ячейка 3x1 </td><td>Ячейка
3x2 </td><td>Ячейка 3x3 </td></tr>
</table>
</body>
</html>[10,c.75]
Границы таблицы
В рассмотренном выше примере таблица и ячейки не имеют видимых границ. Граница таблицы создается при помощи атрибута border тега <table>. Ширина границы указывается в пикселах. Если атрибут border не указан, то таблица выводится без видимой рамки. Атрибут bordercolor позволяет задать цвет границы таблицы, указав код цвета. Добавим к уже созданной таблице границу черного цвета шириной четыре пиксела. Для этого заменим строку <table> на <table border="4" bordercolor="#000000">
Границу таблицы (и другие элементы сайта) разные браузеры отображают немного по-разному. Опытные веб-программисты стараются следить, чтобы созданная веб-страница в различных браузерах выглядела одинаково. У каждого браузера свои капризы, поэтому создать сайт, в котором все везде выглядит одинаково, — задача сложная.
Листинг 1.40. Код HTML-таблицы с нестандартными расстояниями между ячейками
и границей
<html>
<head>
<title>Простая HTML-таблица</title>
<head>
<body>
<table border="4" bordercolor="#000000" cellspacing="0" cellpadding="10">
<caption>Это заголовок таблицы</caption>
<tr><th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th></tr>
<tr><td>Ячейка 2x1 </td><td>Ячейка 2x2 </td><td>Ячейка 2x3 </td></tr>
<tr><td>Ячейка 3x1 </td><td>Ячейка 3x2 </td><td>Ячейка 3x3 </td></tr>
</table>
</body>
</html>
Атрибут frame — определяет, какие стороны рамки окружающей таблицу, будут видны. Возможные значения: [27]
rules. Атрибут frame может принимать следующие значения:
Above — отображается только верхняя линия границы;
Below — отображается только нижняя линия границы;
Box или Border — отображается только внешняя граница таблицы;
Hsides — отображаются только горизонтальные линии границы;
Lhs — отображается только левая линия границы;
Rhs — отображается только правая линия границы;
Void — внешняя граница таблицы не отображается;
Vsides — отображаются только вертикальные линии границы.
Frame и rules — это новые атрибуты в HTML, которые поддерживаются только последними версиями браузеров. Атрибут rules может иметь следующие значения:
All — отображается граница вокруг каждой ячейки;
Cols — отображаются только вертикальные границы между столбцами;
Groups — отображаются только вертикальные границы между группами столбцов или горизонтальные границы между группами строк;
None — границы между ячейками не отображаются;
Rows — отображаются только горизонтальные границы между группами строк.
Листинг 1.41. Код HTML-таблицы с частичным отображением линий внешней и внутренней границ
<html>
<head>
<title>Простая HTML-таблица</title>
<head>
<body>
<table border="4" bordercolor="#000000" cellspacing="0" cellpadding="10"
frame= Hsides rules= Cols>
<caption>Склонение слова пиксел по падежам </caption>
<tr><th>Падеж</th><th>Пример </th></tr>
<tr><td>Им. </td><td>пиксел </td></tr>
<tr><td>Рд. </td><td>пиксела </td></tr>
<tr><td>Дт. </td><td>пикселу </td></tr>
<tr><td>Вт. </td><td>пиксел </td></tr>
<tr><td>Тв. </td><td>пикселом </td></tr>
<tr><td>Пр. </td><td>о пикселе </td></tr>
</table>
</body>
</html>
Как вы видите, у этой таблицы отображаются горизонтальные линии внешних и вертикальные линии внутренней границ, так как именно эти значения мы задали атрибутам frame и rules.[10,c.79]
2.4 Списки
Списком называется взаимосвязанный набор отдельных фраз или предложений, которые начинаются с маркера или цифры. Списки предоставляют возможность упорядочить и систематизировать разные данные и представить их в наглядном и удобном для пользователя виде. [23]
Маркированный список представляет собой неупорядоченный список (от англ. Unordered List). Создаётся с помощью парного тега <ul></ul>. В качестве маркера элемента списка выступает метка, например, закрашенный кружок.[25]
Такой список называется также ненумерованным, или неупорядоченным, потому что для его элементов последовательность не важна. Этот список можно использовать для перечисления объектов или их свойств. Для создания маркированных списков HTML предусматривает тег <UL>. Он требует закрывающий тег, а элементы списка находятся внутри блока тегов <UL>. Каждый элемент начинается с тега <LI>. У тега <UL> есть атрибут TYPE, определяющий вид маркера списка. Значения атрибута TYPE следующие:
circle — создает маркер в виде круга, белого внутри;
square — создает маркер в виде квадрата;
disc — создает маркер в виде закрашенного черным круга.
Листинг 1.21. Маркированные списки
<html
<head>
<title>списки</tite>
<body>
<ul type="circle">
<li>Венера</li>
<li>Земля</li>
<li>Юпитер</li>
<li>Марс</li>
</ul>
<ul type="square" >
<li>Венера</li>
<li>Земля</li>
<li>Юпитер</li>
<li>Марс</li>
</ul>
<ul type="disc" >
<li>Венера</li>
<li>Земля</li>
<li>Юпитер</li>
<li>Марс</li>
</ul>
</body>
</html>
Листинг 1.22. Список с разными маркерами
<html>
<head>
<title>Списки</title>
<body>
<ul>
<li type="circle">Земля</li>
<li type="circle">Марс</li>
<li type="square">Солнце</li>
<li type="circle">Венера</li>
<li type="disc">Луна</li>
</ul>
</body>
</html>
В примере разные маркеры отмечают объекты разных типов. Иногда удобнее создавать собственные маркеры для списков, чтобы их внешний вид соответствовал стилю вашего сайта и вашим желаниям. Для этого в HTML есть возможность создать список с графическими маркерами — вместо тега <LI> можно подставить картинку с изображением. Тег <UL> укажет браузеру, что нужно сделать отступ, а с помощью тега <BR> — перевод строки.
Листинг 1.23. Список с графическими маркерами
<html>
<head>
<title>Списки</title>
<body>
<ul>
<img src="marker.jpg" />Венера<br />
<img src="marker.jpg" />Марс<br />
<img src="marker.jpg" />Земля<br />
</ul>
</body>[10,c. 48]
Нумерованный список
Нумерованный список создаётся с помощью парного тега <ol></ol>. Каждый пункт списка также создаётся с помощью элемента <li>. Браузер нумерует элементы по порядку автоматически и если удалить один или несколько элементов такого списка, то остальные номера будут автоматически пересчитаны. [25]
Список определений — это особый вид списка, который применяется для форматирования словарей и в случаях, когда необходимо пояснить значения терминов. Особенность списка определения следует из его функций. Элемент такого списка всегда состоит из двух частей: первая часть задает определяемое слово, а вторая описание или расшифровку термина. При этом форматирование осуществляется таким образом, что описание термина отображается с отступом от края экрана и, возможно, с пропуском строки от определения. Для организации списков определений служит тег <DL> — это тег-контейнер, внутри которого находятся определение и описание термина. У этого тега нет атрибутов, кроме стандартных STYLE и CLASS, с помощью которых к определению можно подключить стили. Чтобы внести информацию внутри тега-контейнера <DL>, надо задать теги <DT> и <DD>. Тег <DT> используется для того, чтобы задать определение. Никаких особенных атрибутов он не имеет.
Списки определений создаются с помощью тега <dl></dl>. Для добавления термина применяется тег <dt></dt>, а для вставки определения — тег <dd></dd>.[25]
Тег <DD> используется для описания термина из тега <DT>. Особых атрибутов в нем также не предусмотрено. Чтобы изменить вид информации, представленной в этом теге, надо использовать таблицы стилей. [10,c.53].
Вложенные списки
Зачастую возможностей простых списков не хватает, например, при создании оглавления никак не обойтись без вложенных пунктов. Разметка для вложенного списка будет следующей[38]
Теперь рассмотрим, каким образом создаются вложенные списки. В HTML можно комбинировать и вкладывать друг в друга списки разных типов. При этом надо внимательно следить за тем, где заканчивается вложенный список, а где — список верхнего уровня, иначе возникнут проблемы с отображением информации. [10,c. 54]
2.5 Ссылки
Мы разобрались с большей частью принципов оформления текста. Теперь рассмотрим самое главное, на чем основывается сеть Интернет, — ссылки. По своей сути Интернет базируется на информации и ссылках на нее. Ссылки связывают документы, разбросанные по всему Интернету, в одну сеть. Ваш сайт может быть записан в памяти разных компьютеров, но для посетителя он будет отображаться как единое целое благодаря ссылкам. Существует два типа ссылок: внешние и внутренние. Внешние ссылки связывают страницы и помогают осуществлять навигацию. Внутренние ссылки дают возможность передвигаться в рамках одной страницы.
Внешние ссылки
Внешние ссылки — это ссылки на объекты, расположенные вне текущей страницы. Это могут быть другие страницы сайта, картинки, мультимедиа-приложения и иные сайты. Основой внешних ссылок является URL-адрес объекта, на который вы хотите сослаться. [4, c.247]
Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.[21]
Для создания ссылок в HTML служит тег <A>, который требует закрывающий тег. В блоке этих тегов располагается текст или другой объект, который будет выделяться как ссылка. На самом деле для того, чтобы сообщить человеку, что в каком-то месте сайта расположена ссылка, совершенно не обязательно писать адрес страницы. Язык HTML дает возможность «замаскировать» адрес под текст ссылки, который описывает, что увидит пользователь, перейдя по ней. Отдельно находится адрес страницы, на которую вы попадете при щелчке кнопкой мыши на ссылке. Между тегами <A> и </A> располагается текст ссылки, а адрес документа для перехода записывается в теге <A> в качестве значения атрибута HREF. Таким образом, пользователь сможет быстро и легко перемещаться по сайту. Ему абсолютно все равно, где находится документ, на который указывает ссылка, он видит только текст описания.
Листинг 1.28. Создание ссылок
<html>
<head>
<title>Ссылки</title>
<body>
<a href="aboutme.html">Обо мне</a><br />
<a href="myfoto.jpg">Мое фото</a>
</body>
</
Текст ссылки, как правило, отображается подчеркнутым, а при наведении на ссылку курсор меняет вид. Когда посетитель сайта щелкнет кнопкой мыши на ссылке, он перейдет на страницу, которая указывается в качестве адреса ссылки. [4,c46]
Внутренние ссылки
Внутренние ссылки организуют переходы внутри одного HTML-документа. Они применяются, когда на одной странице много текста. Для простоты навигации можно создать ссылки, при щелчке кнопкой мыши на которых пользователь автоматически перейдет к нужной части документа.[37]
Чтобы создать такую ссылку, сначала нужно определить место, к которому приводит ссылка. Это делается с помощью атрибута NAME тега <A>. Необходимый отрывок текста заключается в блок тега <A>. Однако совершенно не обязательно брать внутрь этого тега текст — можно просто установить его на месте, к которому браузер должен переходить при щелчке кнопкой мыши на ссылке.
В качестве значения атрибута NAME можно взять любое имя. Желательно, чтобы оно характеризовало текущее место — так вам самим будет проще пользоваться метками. Затем надо создать ссылку на эту метку. Ссылка на внутреннюю метку создается
так же, как и ссылка на внешний документ, только вместо URL-адреса желаемой
страницы надо ввести адрес метки в таком виде: #met1, где met1 — имя метки.
При щелчке кнопкой мыши на ссылке браузер автоматически перейдет к месту,
указанному меткой.
Листинг 1.29. Внутренние ссылки
<html>
<head>
<title>Ссылки</title>
<body>
<a name="met2">Это метка для перехода 2</a><br />
<a href="#met1">Кликните для перехода к метке 1</a><br />
<a href="#met2">Кликните для перехода к метке 2</a><br />
<a name="met1">Это метка для перехода 1</a>
</body>
</html>
Как вы видите, внутренние ссылки при отображении ничем не отличаются от внешних ссылок, а текст, отмеченный как метка, не выделяется.
Синтаксис внутренних ссылок такой же, как и у внешних, поэтому атрибуты тега <A> одинаковы для обоих типов.
Общие моменты при создании внешних и внутренних ссылок
Все немногочисленные атрибуты тега <A> можно применять при создании как
внешних, так и внутренних ссылок. Тег <A> имеет два вспомогательных атрибута.
Первый атрибут — TARGET. [78]
Атрибут target (от англ. "target" ‒ «цель, мишень») указывает место (фрейм или окно браузера) в которое должен быть загружен, указанный в гиперссылке документ.[32]