HTML. Урок 3 (таблицы, изображения, ссылки)



п.1. Продолджим немножко по таблицам. Захотели мы, к примеру, странную таблицу с разными хитромудрыми полями как на картинке

Всего в таблице у нас в таблице 9 столбцов и около 30 строк. Первую строку нам надо сделать объединенной на все 9 столбцов. Обычная строка с 9 ячейками выглядит так:

<tr>

<td><td><td><td><td><td><td><td><td>

Для объединения ячеек на несколько столбцов в первую из них добавляем расширение тега "colspan=xxx", где xxx - количество столбцов, которые должна занимать ячейка. Объединение 9 столбцов в одну ячейку выглядит так:

<tr>

<td colspan="9">

Во второй строке объединяются ячейки по 2 и по 3 столбца. Вторая строка выглядит так:

<tr>

<td colspan="2"><td colspan="2"><td colspan="2"><td colspan="3">


Дошли до 3-й строки. Тут самое сложное. Несколько строк объединяются в одну ячейку. Это делается расширением тега ячейки командой rowspan="xxx"

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

п.2. Этот пункт один из самых коротких и простых. Как разделять элементы между собой на странице, чтобы они не были вполтную? Если на странице содержится более одного пробела подряд, то они все воспринимаются как один. Несколько раз нажать пробел не получится, нужен специальный тег-спецсимвол пробела: &nbsp; Если нужно сделать небольшое расстояние между словами, то достаточно вставить несколько таких тегов подряд. Если нужен перенос на следующую строку, то используем тег: <br>. У этого тега нет закрывающей пары. Есть еще тег, в который раньше надо было заключать параграфы. Действовал он примерно так же, как и предыдущий тег, т.е. переносил строку, но к нему можно применить стили CSS и все внутри этого тега может быть изменено правилами. Сейчас он практически умер и бесполезен, его заменил самый широко используемый тег <div>, о котором я расскажу подробнее немного позже, когда дойдем до таблиц стилей CSS. 

п.3 Вставка изображения. Это тоже очень простой пункт. Используем тег <img>. Закрывающая часть этому тегу не нужна, зато обязательно расширение команды в виде ссылки на саму картинку, расположенную на этом же сервере или где то в интернете. Полностью завершенная вставка картинки выглядит так: <img src="http://333v.ru/uploads/9f/9f563e435fd91ede1af09d6567158f8c.jpg">. Если картинка расположена на этом же сервере, то можно указывать не полный путь к картинке, а относительно папки с файлом, где лежит станица, которую просматриваем. Если картинка находится в этой же папке, то ссылку укорачиваем просто до имени файла: <img src="image.jpg">. Если внутри этой же папки находится папка с фотками, то указание пути начинаем с имени папки, потом файла: <img src="pics/image.jpg">. Если папка с картинками находится на пару уровней выше, то нужно указывать это дополнительно точками. Две точки - каталог выше текущего: <img src="../../pics/image.jpg">. Если требуется указать, чтобы картинка масштабировалась больше или меньше оригинала, сделаем это позже средствами CSS.

п.4. Самое интересное в любом документе - ссылки на другой документ. Это делается с помощью тега <a>, который требует закрывающую часть. Все, что окажется между этими частями и будет ссылкой, нажав на которую переходите на другой документ. Внутри могут быть картинки, текст. Адрес страницы, на которую указывает ссылка, указывается с помощью параметра "href". Обычно ссылка выглядит вот так:

<a href="http://адрес куда мы попадем после нажатия на ссылку">Какой то текст, который и будет ссылкой</a>

Иногда требуется, чтобы при переходе по ссылке попадали на конкретную часть документа. Для этого используется тот же самый тег, но с именем и без адреса ссылки. В нужном месте вставляем отметку или "якорь", на который будет направлять другая ссылка. Якорь выглядит вот так:

<a name="zakladka1"></a>

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

<a href="http://адрес#zakladka1">Какой то текст, который и будет ссылкой</a>

Иногда вы видите, что на сайтах после адреса страницы стоит знак вопроса и какие то текстовые параметры. Примерно так:

http://website.ru/index.php?id=238

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

http://website.ru/index.php?id=238&pagesize=900px&setactive=1

Здесь мы видим передачу трех параметров. Этот способ передачи параметров называется "метод GET". Его удобно использовать, когда надо передать ограниченное количество параметров или когда передаем с помощью ссылки. В 4-м уроке мы будем рассматривать формы. Там будем изучать "метод POST", который от GET-а отличается тем, что с его помощью можно передавать большие объемы информации, которые не видны посторонним. 

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

<a href="http://адрес" title="подсказка">Какой то текст, который и будет ссылкой</a>