Урок HTML №9 - ссылки (гиперссылки)

В этом уроке по HTML для начинающих, я вам расскажу о гипертекстовых ссылках. На гипертекстовых ссылках основаны, практически все web документы. Основное предназначение гиперссылок, это быстрый переход ( обычно одним кликом мыши), на другую страницу, какого либо сайта или web ресурса.

Если переход по ссылке идёт на этот же web ресурс, то адрес гиперссылки предпочтительнее задавать относительный, например: /papka/document.html

Если переход предназначен на сторонний web сайт, то адрес ссылки обязательно нужно делать полный т.е. абсолютный, например: http://адрес сайта/papka/document.html

Вместо "Видимого текста ссылки" может быть практически любой элемент HTML, чаще всего это либо текст, либо изображение.

Для создания ссылки используется дескриптор <a>, полный синтаксис данного дескриптора выглядит следующим образом:

Пример 1:  Видимый текст ссылки

По умолчанию при клике мышкой по такой ссылке, web ресурс откроется в этом же окне броузера, для того что бы html-страница назначения открылась в новом окне броузера (что чаще более предпочтительнее) нужно к дескриптору <a> применить атрибут target c константой _blank. В наглядном примере, это выглядит так:

Пример 2:  Видимый текст ссылки

В гиперссылках иногда бывает необходимо указать её назначение или описание-подсказку, но так что бы текст описания изначально был скрыт и появлялся тогда, когда к ссылке подносили курсор мышки. Для этого в дескрипторе ссылки <a> используют атрибут title, пример:

Пример 3:  Видимый текст ссылки

Урок HTML №7- фон таблицы

В этом уроке мы рассмотрим атрибуты таблицы, которые задают параметры фона таблицы - bgcolor и background

Атрибут bgcolor определяет цвет фона html таблицы сайта. Можно так же этот атрибут использовать вместе с атрибутом background (см. ниже), подобрав специально цвет фона близкий к фоновому рисунку. Синтаксис данного тега следующий:

Давайте рассмотрим наш урок на практике, для этого создаём в Notepad++ таблицу со следующими параметрами:

, где

bgcolor="#C3F393" - это цвет фона всей таблицы, цвет можно устанавливать как в шестнадцатеричном коде # как в нашем примере, простым названием цвета - green, так и RGB.

Урок №4 - атрибуты таблицы colspan и rowspan

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

Это код таблицы в Notepad++ *где исходя из раннее пройденных нами уроков:

border="1" - толщина рамки таблицы

width="200px" - ширина таблицы (если не указана высота таблицы,то она по умолчанию автоматически устанавливается "по содержимому")

Это то что у нас получится в броузере исходя из вышенаписанного:

В броузере будет такой результат: СМОТРЕТЬ

Итог как видим, корявый внешний вид и не грамотное отображение таблицы. Так как же нам поступить в этой ситуации? Для этого есть теги ячеек таблицы, colspan и rowspan.

Урок HTML №2 - атрибуты таблицы cellpadding и cellspacing

При создании таблицы иногда требуется задать отступ внутри ячейки от текста до границ этой ячейки. Одним из способов задать такой отступ является атрибут cellpadding и cellspacing. Первый атрибут - cellpadding задаёт размер полос чистого пространства внутри самой ячейки, тоесть размер отступа от внешних границ до текста. Этот атрибут не является обязательным и если он не указан, то отступ будет задан дефолтный, который равен "1".

Следующий атрибут cellspacing - он задаёт размер полосы, пустого пространства между ячейками. Cellspacing так же не является обязательным и если он не будет указан, то расстояние между полосами ячейки будет задано по умолчанию "2".

Например, без указания этих атрибутов cellpadding и cellspacing в теге table, код таблицы при вёрстке в редакторе Notepad++ выглядит так:

*где атрибут border="1"- это толщина рамки, в данном случае 1 пиксел.

Визуально результат получится такой: