Томский политехнический университет
Опубликован: 01.08.2012 | Доступ: свободный | Студентов: 17331 / 1604 | Оценка: 3.91 / 4.09 | Длительность: 12:32:00
Лекция 6:

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

< Лекция 5 || Лекция 6: 12 || Лекция 7 >

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

Зачастую необходимо объединить ряд ячеек таблицы. Теги <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.

Результат:

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

Рис. 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 – веха, уже неотделимая от современной разработки сайтов.

Список материалов для самостоятельного изучения

  1. Таблицы
    1. http://www.w3schools.com/html/html_tables.asp
  2. Гиперссылки
    1. http://www.w3schools.com/tags/tag_a.asp
    2. http://www.w3.org/TR/html401/struct/links.html
    3. http://www.htmlquick.com/reference/tags/a.html
  3. Изображения-карты
    1. http://www.xiper.net/manuals/html/tags/map.html
    2. http://www.w3schools.com/tags/tag_map.asp
< Лекция 5 || Лекция 6: 12 || Лекция 7 >
Эмиль Галеев
Эмиль Галеев

По каким то причинам не сохраняется текст. И не выдает сообщение об ошибке если текста нет. Проверил все внимательно проблем в написании нет. Вопрос почему он не сохраняет?

Алексей Вычегжанин
Алексей Вычегжанин

http://www.intuit.ru/studies/courses/3734/976/lecture/27486?page=3

Заполнил html, js и css-файлы согласно рекомендациям. После запуска главной страницы в панели разработчика браузера, во вкл. Console, выдает сообщение об ошибке:

"script.js:85 Uncaught TypeError: Cannot read property 'addEventListener' of null"

, ссылаясь на строку js-файла (функция load()):

" audio.addEventListener('ended', function () "

При дальнейшем просмотре результатов доступны только функции просмотра треков по выбранному альбому и предварительного прослушивания трека. 

Функция добавления записей в плейлист не работает. Соответственно сам плей-лист и полоса прокрутки не открываются.

Елена Игнатко
Елена Игнатко
Россия, Москва
Алексей Шаповалов
Алексей Шаповалов
Россия, г. Брянск, Брянский государственный технический университет