Работа с таблицами и средства навигации

Показывать лекцию целиком

Нами уже были рассмотрены основные элементы html-страниц и способы работы с медиа контентом. По сути, для создания первого простого сайта осталось только научиться работе с таблицами, как одними из самых используемых элементов, и способами навигации по сайту.

Работа с таблицами

В html работа с таблицами может оказаться как простой, так и не очень. С одной стороны тег всего один – <table>, и составить простую таблицу, к примеру, 2*2, не составит труда. С другой стороны, как только потребуется что-то не совсем стандартное, с объединением ячеек, размещением изображений в ячейках и т.п., могут возникнуть сложности.

Создание простых таблиц

Тег <table> является парным, таблица состоит из строк и ячеек, соответственно задаваемых парными тегами <tr> и <td>.

Атрибуты <table>:

align – задает тип выравнивания таблицы;

background – задает фоновый рисунок таблицы;

border – задает толщину рамки таблицы (в пикселях);

bordercolor –задает цвет рамки;

cellpadding – задает величину отступа от рамки до содержимого ячейки;

cellspacing – задает величину расстояния между ячейками;

cols – задает число колонок в таблице;

frame – задает отображение границ вокруг таблицы, может принимать значения:

void – не отображать границы;

border – отображать границу вокруг таблицы;

above – провести границу только по верхнему краю таблицы;

below – провести границу только по нижнему краю таблицы;

hsides – отрисовать только горизонтальные границы;

vsides – отрисовать только вертикальные границы;

rhs – провести границу только по правой стороне таблицы;

lhs – провести границу только по левой стороне таблицы;

height – задает высоту таблицы;

rules – задает отображение границ между ячейками, может принимать значения:

all – отображать границы вокруг каждой ячейки таблицы;

groups – отображать границы между группами, задаваемыми тегами <thead>, <tfoot>, <tbody>, <colgroup>, <col>;

cols - отображать границы между колонками;

none – скрыть все границы;

rows – отображать границы между строками таблицы;

summary – задает краткое описание таблицы;

width – задает ширину таблицы.

Пример создания таблицы 2*2:

<table border = 1> 
        <tr> 
            <td> Строка 1. Ячейка 1.</td>
            <td> Строка 1. Ячейка 2.</td>
        </tr>
        <tr>
            <td> Строка 2. Ячейка 1.</td>
            <td> Строка 2. Ячейка 2.</td>
        </tr>
      </table>

Результат:

(рис 5.1) Простейшая html-таблица

Внутри тега <table> , помимо <tr> и <td> допускается использование тегов:

<caption> – задает заголовок таблицы;

<col> – задает характеристики одной, или нескольких колонок таблицы;

<colgroup> – задает стиль для группы колонок таблиц;

<tbody> – хранит одну, или несколько строк таблицы, допустимо применение только одного такого тега в рамках <table>;

<tfoot> – хранит одну, или несколько строк, отображаемых внизу таблицы;

<th> – задание ячейки таблицы, которая является заголовочной, т.е. текст ячейки отображает полужирным шрифтом с выравниванием по центру;

<thead> –хранит одну, или несколько строк, отображаемых вверху таблицы;

В следующем примере приведен код создания таблицы с наименованием, шапкой и заголовочной ячейкой:

<table border = 1 cellspacing = 2> 
  <caption> <b> <i>План лекций курса "HTML5. Основы клиентской разработки" </i></b></caption>
  <thead>
   <tr> 
   <th> № </th>
   <th> Наименование лекции </th>
   <th> Содержание лекции</th>
   </tr>
  </thead>
  
  <tbody>
   <tr>
   <td align = center> 1 </td>
   <td> Web 2.0, как методика проектирования систем </td>
   <td> Возникновение термина "Web 2.0", 
     основы концепции, особенности проектирования современных веб-решений. </td>
  </tr>
  
  <tr>
   <td align = center> 2 </td>
   <td> Основы HTML. Особенности HTML5. </td>
   <td> Сущность гипертекста, развитие стандартов HTML, уровни и версии HTML. 
     Обзор HTML5, инструменты Microsoft, поддерживающие работу с HTML5. </td>
  </tr>
  
  <tr>
   <td align = center> 3 </td>
   <td> HTML5. Работа с текстом. </td>
   <td> Описание и характеристики основных тегов для разметки и оформления текста.
     Заголовки, списки, абзацы, фрагментирование, разрыв строк, вставка символов. 
      Глобальные атрибуты.</td>
  </tr>
   
   <tr>
   <td> ... </td>
   <td> .................. </td>
   <td> ...................</td>
   </tr>  
  </tbody>  
  <tfoot>
   <tr>
    <th>Всего лекций</th>
    <th>Объем лекций (часов)</th>
    <th>Объем практикумов (часов)</th>
   </tr>
   <tr align = center>
    <td>18</td>
    <td>40 часов</td>
    <td>24</td>
   </tr>
   </tfoot>
  </table>

Результат:

(рис 5.2) Пример html-таблицы

Объединение ячеек таблиц

Зачастую необходимо объединить ряд ячеек таблицы. Теги <td> и <th> содержат два атрибута: colspan и rowspan для объединения ячеек по горизонтали и вертикали соответственно.

Пример объединения ячеек по горизонтали:

<table border = 1>
    <tr align = center>
      <td colspan=2>Ячейка 1.1</td>
 
      <td>Ячейка 1.2</td>
    </tr>
    <tr>
      <td>Ячейка 2.1</td>
      <td>Ячейка 2.2</td>
      <td>Ячейка 2.3</td>
    </tr>
   </table>

Результат:

(рис 5.3) Пример таблицы с объединенными по горизонтали ячейками

Схожим образом происходит и объединение по вертикали, нужно помнить только о том, что необходимо удалить лишние теги <td> для строк, ячейки которых будут объединены по вертикали.

Пример:

<table border = 1>
    <tr>
      <td>Ячейка 1.1</td>
      <td rowspan = 2>Ячейка 1+2.2</td>
      <td>Ячейка 1.3</td>
    </tr>
    <tr>
      <td>Ячейка 2.1</td>
      
      <td>Ячейка 2.3</td>
    </tr>
   </table>

Результат:

(рис 5.4) Пример таблицы с объединенными по вертикали ячейками

Создание гиперссылок

Редкий сайт состоит лишь из одной веб-страницы, а значит, без грамотной навигации по различным страницам вашего сайта не обойтись. Рассмотрим основы создания гиперссылок.

Гиперссылка, в самом простом случае, создается следующим образом:

<a href="document1.htm"> Ссылка на document1 </a>

Ссылаться можно не только на другие страницы, но также и на внешние объекты (любые файлы). Как правило, при щелчке на гиперссылку, то что браузер не в состоянии отобразить (к примеру, архив) будет предложено скачать.

Тег <a> содержит следующие атрибуты:

accesskey – позволяет активировать ссылку при помощи комбинации клавиш;

charset – указывает кодировку текста, на который ведет ссылка;

coords – задает координаты активной области ссылки;

href – задает адрес документа, на который необходимо перейти;

hreflang – идентификация языка текста по ссылке;

media – указывает тип носителя, на который ведет ссылка;

name – задает наименование якоря;

rel – задает отношение между ссылаемым и текущим документом;

shape – задает форму активной области ссылки для изображений;

tabindex – задаeт последовательность перехода между ссылками при нажатии кнопки Tab;

target – наименование окна, в которое будет загружаться документ;

title – задает всплывающую подсказку для ссылки;

type – указывает MIME-тип на который ведет ссылка.

Отметим следующий момент: адрес документа на который указывает ссылка может быть как абсолютным (к примеру http://intuit.ru), так и относительным (/document.htm). В последнем случае, путь к документу определяется относительно расположения текущей веб-страницы.

Ссылки не обязательно должны быть только на внешние источники, можно задать так называемые якоря – ссылки на фрагмент текущей веб-страницы. Задается якорь следующим образом:

<a name = "part 1"> </a>

Переход к якорю можно осуществить двумя способами, в зависимости от отправной точки. Если необходимо сослаться с той же страницы, где якорь находится, можно указать только наименование якоря:

<a href="#part 1"> Часть 1 </a>

Если же сослаться нужно с другой веб-страницы, то гиперссылка оформляется следующим образом:

<a href="document.htm#part1"> Часть 1</a>

Графические гиперссылки

Содержимым гиперссылки не обязательно должен быть текст, это может быть в том числе и изображение:

<a href="document1.htm"> <img src="link.gif"> </a>

Изображение, выступающее в качестве гиперссылки будет выделено рамкой, при наведении курсора на такое изображение, он изменит форму.

Мы не будем детально останавливаться на создании графических карт-ссылок, ввиду того, что в настоящее время они применяются редко. С приемами их создания предлагается ознакомиться самостоятельно (см. список материалов для самостоятельного изучения).

Ключевые термины и определения

Гиперссылка – часть гипертекстового документа, ссылающаяся на другой элемент документа, или внешний объект.

MIME-спецификация кодирования информации, для обеспечения возможности ее передачи через Интернет.

Краткие итоги

К настоящему моменту мы рассмотрели основы основ HTML, которых, конечно, при должной сноровке и практике может хватить для создания небольшого тематического сайта. И если бы пользователю не нужно было бы ничего кроме текстовых материалов, аудио и видеоинформации, доступной для прослушивания и просмотра средствами браузера, то этим можно было бы и ограничиться.

К счастью, веб значительно шире и глубже, иначе и не было бы необходимости в данном курсе. Если попытаться подвести некую черту под уже изложенным материалом, то можно сказать, что рассмотренными средствами можно создать сайт, относящийся к web 1.0, в котором контент полностью определяется владельцем сайта. О причинах почему на этом останавливаться не стоит уже было упомянуто в самой первой лекции курса.

В рамках следующего блока лекций нами будут рассмотрены каскадные таблицы стилей CSS – веха, уже неотделимая от современной разработки сайтов.