Создание ссылок и карт ссылок Лекция 3. Создание гиперссылок Гиперссылки - контекстные связи между расположенными в Интернете материалами. Они являются. - презентация

1 Создание ссылок и карт ссылок Лекция 3

2 Создание гиперссылок Гиперссылки - контекстные связи между расположенными в Интернете материалами. Они являются основой построения World Wide Web. Гиперссылки - контекстные связи между расположенными в Интернете материалами. Они являются основой построения World Wide Web. В принципе, любое слово, встречающееся на веб-странице, можно превратить в гиперссылку, если известны какие-либо другие страницы, описывающие этот предмет более подробно. В принципе, любое слово, встречающееся на веб-странице, можно превратить в гиперссылку, если известны какие-либо другие страницы, описывающие этот предмет более подробно.

3 Создание гиперссылок Возможно строить гиперссылки, указывающие на отдельные области страниц сайта, на другие страницы сайта, а также на другие сайты. Это помогает пользователю быстро переходить к интересующим их темам, например крупная веб-страница может содержать собственное оглавление, элементы которого снабжены ссылками на соответствующие разделы документа. Возможно строить гиперссылки, указывающие на отдельные области страниц сайта, на другие страницы сайта, а также на другие сайты. Это помогает пользователю быстро переходить к интересующим их темам, например крупная веб-страница может содержать собственное оглавление, элементы которого снабжены ссылками на соответствующие разделы документа.

4 Создание гиперссылок Чтобы построить ссылку на область внутри текущей страницы, первым делом следует дать такой области подходящее название. С этой целью применяется дескриптор с атрибутом NAME. Имя должно содержать только буквы и/или цифры. Чтобы построить ссылку на область внутри текущей страницы, первым делом следует дать такой области подходящее название. С этой целью применяется дескриптор с атрибутом NAME. Имя должно содержать только буквы и/или цифры. Во многих случаях полезно строить гиперссылки в конце каждого раздела обширной веб-страницы, указывающие на ее начало. В таком случае пользователи получат дополнительное удобное средство навигации. Во многих случаях полезно строить гиперссылки в конце каждого раздела обширной веб-страницы, указывающие на ее начало. В таком случае пользователи получат дополнительное удобное средство навигации. …. …. Вернуться к началу Вернуться к началу

5 Создание гиперссылок Гиперссылки можно устанавливать не только на файлы, содержащиеся в своем каталоге на сервере, но и на любые другие Интернет-ресурсы. В этом случае в качестве значения атрибута HREF= необходимо указать полный URL с абсолютным адресом ресурса. Абсолютным называют адрес, содержащий полные сведения о местонахождении страницы ( Гиперссылки можно устанавливать не только на файлы, содержащиеся в своем каталоге на сервере, но и на любые другие Интернет-ресурсы. В этом случае в качестве значения атрибута HREF= необходимо указать полный URL с абсолютным адресом ресурса. Абсолютным называют адрес, содержащий полные сведения о местонахождении страницы (

6 Создание гиперссылок "Altavista" "Altavista" По умолчанию все ссылки открываются в пределах одного и того же окна, чтобы открывать гиперссылки в ном окне необходимо применить атрибут target по умолчанию используется значение "_blank" По умолчанию все ссылки открываются в пределах одного и того же окна, чтобы открывать гиперссылки в ном окне необходимо применить атрибут target по умолчанию используется значение "_blank"

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

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

9 Создание гиперссылки на адрес электронной почты Для добавления поля ТЕМА необходимо использовать атрибут subject. В следствии получится следующая запись: Для добавления поля ТЕМА необходимо использовать атрибут subject. В следствии получится следующая запись: Факультет Факультет

10 Создание карт ссылок Представим себе, что необходимо создать сайт, посвященный Вашей группе. Необходимо создать страницы с краткой характеристикой каждого студента из группу. Представим себе, что необходимо создать сайт, посвященный Вашей группе. Необходимо создать страницы с краткой характеристикой каждого студента из группу.

11 Создание карт ссылок Можно сделать несколько ссылок с одного большого рисунка на несколько малых, не разрезая его. Такое изображение называется картой ссылок imagemap. Создание карты ссылок – работа кропотливая, но результат обычно эффектен. Можно сделать несколько ссылок с одного большого рисунка на несколько малых, не разрезая его. Такое изображение называется картой ссылок imagemap. Создание карты ссылок – работа кропотливая, но результат обычно эффектен.

12 Создание карт ссылок Делается это так: Делается это так: Сначала рисунок внедряется на веб-страницу обычным образом с помощью тега IMG Сначала рисунок внедряется на веб-страницу обычным образом с помощью тега IMG Затем необходимо установить в этом теге атрибут USEMAP=. Его значение должно содержать имя карты графических ссылок, с предварительным знаком #. Затем необходимо установить в этом теге атрибут USEMAP=. Его значение должно содержать имя карты графических ссылок, с предварительным знаком #. Теперь нужно создать собственную карту ссылок. Эта карта может располагаться где угодно, поэтому нужно указать кроме имени карты, имя этого файла: foto.html#fotomap. Теперь нужно создать собственную карту ссылок. Эта карта может располагаться где угодно, поэтому нужно указать кроме имени карты, имя этого файла: foto.html#fotomap.

13 Создание карт ссылок Карта графических ссылок начинается с тега и завершается закрывающим тегом. В теге следует установить единственный возможный атрибут NAME=. Его значением должно быть имя карты, на которое мы ссылались в теге IMG. Карта графических ссылок начинается с тега и завершается закрывающим тегом. В теге следует установить единственный возможный атрибут NAME=. Его значением должно быть имя карты, на которое мы ссылались в теге IMG. Между тегами MAP должна находиться основная часть карты. Она состоит из нескольких тегов, каждый из которых определяет активную область рисунка. При щелчке мыши на активных областях происходит перемещение по гиперссылке. Между тегами MAP должна находиться основная часть карты. Она состоит из нескольких тегов, каждый из которых определяет активную область рисунка. При щелчке мыши на активных областях происходит перемещение по гиперссылке. Активные области могут быть либо прямоугольной формы, либо круглой, либо многоугольной. Это определяется установкой значения атрибута SHAPE= в теге AREA. Если значение этого атрибута – rect, область будет прямоугольной, если circle – круглой, а если poly – многоугольной. Активные области могут быть либо прямоугольной формы, либо круглой, либо многоугольной. Это определяется установкой значения атрибута SHAPE= в теге AREA. Если значение этого атрибута – rect, область будет прямоугольной, если circle – круглой, а если poly – многоугольной.

14 Создание карт ссылок Дальше начинается самое неприятное в составлении карты граф. ссылок: нужно определить координаты каждой из активных областей и записать их как значения атрибута COORDS. Дальше начинается самое неприятное в составлении карты граф. ссылок: нужно определить координаты каждой из активных областей и записать их как значения атрибута COORDS. Если активная область прямоугольная (rect), то следует указать координаты левого верхнего ее угла и правого нижнего. Местоположение любой точки определяется двумя числами ее горизонтальной и вертикальной координат. Самая левая верхняя точка на рисунке имеет координаты «0,0». Например, если рисунок имеет координаты 400 х 300 точек и нам надо определить прямоугольную активную часть, занимающую его левый верхний угол и имеющую половину ширины и высоты рисунка, надо написать следующее: Если активная область прямоугольная (rect), то следует указать координаты левого верхнего ее угла и правого нижнего. Местоположение любой точки определяется двумя числами ее горизонтальной и вертикальной координат. Самая левая верхняя точка на рисунке имеет координаты «0,0». Например, если рисунок имеет координаты 400 х 300 точек и нам надо определить прямоугольную активную часть, занимающую его левый верхний угол и имеющую половину ширины и высоты рисунка, надо написать следующее: центральная точка рисунка 400 х 300 центральная точка рисунка 400 х 300

15 Создание карт ссылок Если активная область круглая (circle), то задача немного упрощается, нужно определить координаты только одной точки – центра окружности, а также указать ее радиус, например: Если активная область круглая (circle), то задача немного упрощается, нужно определить координаты только одной точки – центра окружности, а также указать ее радиус, например: НО радиус должен быт не более 150 пикселей, иначе активной областью будет являться все графическое изображение. НО радиус должен быт не более 150 пикселей, иначе активной областью будет являться все графическое изображение.

16 Создание карт ссылок И, наконец, самый сложный и наиболее часто встречающийся случай – многоугольная активная область. Здесь нужно последовательно указать координаты всех углов многоугольника. Поскольку таких углов очень много, то и значение атрибута COORDS будет принимать угрожающие размеры. И, наконец, самый сложный и наиболее часто встречающийся случай – многоугольная активная область. Здесь нужно последовательно указать координаты всех углов многоугольника. Поскольку таких углов очень много, то и значение атрибута COORDS будет принимать угрожающие размеры.

17 Создание карт ссылок Однако атрибуты SHAPE и COORDS это еще не все. В теге AREA необходимо прописать атрибут HREF, определяющий гиперссылку, то есть куда же должен попасть пользователь при щелчке мышью на этой активной области. Однако атрибуты SHAPE и COORDS это еще не все. В теге AREA необходимо прописать атрибут HREF, определяющий гиперссылку, то есть куда же должен попасть пользователь при щелчке мышью на этой активной области. Кроме того, полезно определить также атрибут ALТ, его значение может содержать поясняющий текст, который будет всплывать при наведении мыши на активную область. Т.е. получаем: Кроме того, полезно определить также атрибут ALТ, его значение может содержать поясняющий текст, который будет всплывать при наведении мыши на активную область. Т.е. получаем:

18 Создание таблиц. Вложенные таблицы. Лекция 4

19 Создание таблиц Любая таблица в HTML определяется с помощью тега. Все что расположено между тегами и, считается таблицей. Однако, если вы напишете Это уже таблица, но браузер отобразит просто обычный текст. Мало создать таблицу, надо задать в ней строки и хотя бы одну ячейку. Любая таблица в HTML определяется с помощью тега. Все что расположено между тегами и, считается таблицей. Однако, если вы напишете Это уже таблица, но браузер отобразит просто обычный текст. Мало создать таблицу, надо задать в ней строки и хотя бы одну ячейку.

20 Создание таблиц С помощью атрибута WIDTH можно устанавливать любую ширину таблицы, а в атрибуте HEIGHT ее высоту, при этом таблица отображается в браузере в пикселях. С помощью атрибута WIDTH можно устанавливать любую ширину таблицы, а в атрибуте HEIGHT ее высоту, при этом таблица отображается в браузере в пикселях.

21 Создание таблиц Чтобы текст не прилипал к границе ячеек, необходимо применить атрибут CELLPADDING. Его значение определяет, на сколько точек текст будет отступать от края ячейки. Кроме того, имеется еще атрибут CELLSPACING которое задет расстояние между ячейками таблицы. Чтобы текст не прилипал к границе ячеек, необходимо применить атрибут CELLPADDING. Его значение определяет, на сколько точек текст будет отступать от края ячейки. Кроме того, имеется еще атрибут CELLSPACING которое задет расстояние между ячейками таблицы.

22 Создание таблиц Чтобы таблица не казалась очень скучной, можно придать ей оттенки, цвета и фон. BORDERCOLOR- задает цвет рамки. Чтобы таблица не казалась очень скучной, можно придать ей оттенки, цвета и фон. BORDERCOLOR- задает цвет рамки. Можно создать вид выпуклости. Вместо BORDERCOLOR употребим атрибуты BORDERCOLORLIGHT и BORDERCOLORDARK задающие цвет, светлой и темной сторон рамки. Эти атрибуты поддерживаются только броузером IE. Можно создать вид выпуклости. Вместо BORDERCOLOR употребим атрибуты BORDERCOLORLIGHT и BORDERCOLORDARK задающие цвет, светлой и темной сторон рамки. Эти атрибуты поддерживаются только броузером IE.

23 Создание таблиц Дескриптор позволяет снабдить таблицу заголовком, уточняющим ее назначение и содержание. По умолчанию большинство браузеров располагает заголовок по центру и над таблицей. Атрибут ALIGN со значением bottom дает возможность перенести заголовок непосредственно под таблицу. Такое положение заголовка уместно в тех случаях, если он достаточно велик и содержит информацию, подытоживающую данные, представленные в таблице. Дескриптор позволяет снабдить таблицу заголовком, уточняющим ее назначение и содержание. По умолчанию большинство браузеров располагает заголовок по центру и над таблицей. Атрибут ALIGN со значением bottom дает возможность перенести заголовок непосредственно под таблицу. Такое положение заголовка уместно в тех случаях, если он достаточно велик и содержит информацию, подытоживающую данные, представленные в таблице. Список групп Список групп

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

25 Создание таблиц Для объединения соседних строк используется атрибут ROWSPAN, а для объединения соседних столбцов используется атрибут COLSPAN. Для объединения соседних строк используется атрибут ROWSPAN, а для объединения соседних столбцов используется атрибут COLSPAN. ячейка ячейка

26 Создание таблиц Иногда требуется в таблице оставить пустой одну, две ячейки. Необходимо добавить теги, если необходимо пустое место без ячейки, а если надо добавить незаполненную ячейку необходимо вставить пробел между этими тегами Иногда требуется в таблице оставить пустой одну, две ячейки. Необходимо добавить теги, если необходимо пустое место без ячейки, а если надо добавить незаполненную ячейку необходимо вставить пробел между этими тегами

27 Группировка строк таблицы Дескрипторы, u позволяют группировать строки таблицы. Дескрипторы, u позволяют группировать строки таблицы. Дескриптор предоставляет возможность создания группы заголовков для столбцов таблицы. Это средство полезно в тех случаях, когда необходимо снабдить заголовки специальными примерами форматирования, отличными от параметров остальной части содержимого таблицы. Он используется только единожды в пределах таблицы. Дескриптор предоставляет возможность создания группы заголовков для столбцов таблицы. Это средство полезно в тех случаях, когда необходимо снабдить заголовки специальными примерами форматирования, отличными от параметров остальной части содержимого таблицы. Он используется только единожды в пределах таблицы. Дескриптор применяется для создания одной или нескольких групп строк таблицы, содержащих основные данные. Дескриптор применяется для создания одной или нескольких групп строк таблицы, содержащих основные данные. Тег позволяет создать группу строк для предоставления информации о суммах или итогах, располагаемую в нижней части таблицы. Тег позволяет создать группу строк для предоставления информации о суммах или итогах, располагаемую в нижней части таблицы.

28 Группировка столбцов таблицы Дескрипторы COLGROUP и COL представляют возможность группирования столбцов таблицы. Группы столбцов делят таблицу на множества вертикально расположенных ячеек, признаки форматирования которых могут устанавливаться единовременно. Дескрипторы COLGROUP и COL представляют возможность группирования столбцов таблицы. Группы столбцов делят таблицу на множества вертикально расположенных ячеек, признаки форматирования которых могут устанавливаться единовременно. Дескриптор COLGROUP создает структурную группу столбцов, которая выделяет множество логически однородных ячеек. Дескриптор COL предназначен для формирования неструктурных групп столбцов, которые делят таблицу на разделы, не имеющие отношения к структуре. Дескриптор COLGROUP создает структурную группу столбцов, которая выделяет множество логически однородных ячеек. Дескриптор COL предназначен для формирования неструктурных групп столбцов, которые делят таблицу на разделы, не имеющие отношения к структуре.

29 Создание таблиц Атрибут ALIGN позволяет выровнять текст в ячейке по горизонтали, а VALIGN выравнивает текст по вертикали. Используются значения top, middle и bottom. Атрибут ALIGN позволяет выровнять текст в ячейке по горизонтали, а VALIGN выравнивает текст по вертикали. Используются значения top, middle и bottom.

30 Создание таблиц Атрибут BGCOLOR дает возможность указания для элементов таблицы признака цвета, позволяющего выделить важную информацию. Этот атрибут можно помещать как в теге BODY, так и в любом другом теге отвечающим за форматирования таблицы. Атрибут BGCOLOR дает возможность указания для элементов таблицы признака цвета, позволяющего выделить важную информацию. Этот атрибут можно помещать как в теге BODY, так и в любом другом теге отвечающим за форматирования таблицы. Атрибут BACKGROUND позволяет снабдить графическим фоном отдельную ячейку таблицы или всю ее целиком. Используя графическое изображение необходимо помнить что браузеры могут по разному интерпретировать эту информацию, он не входит в стандартный набор HTML. Атрибут BACKGROUND позволяет снабдить графическим фоном отдельную ячейку таблицы или всю ее целиком. Используя графическое изображение необходимо помнить что браузеры могут по разному интерпретировать эту информацию, он не входит в стандартный набор HTML.

31 Создание таблиц При воспроизведении таблицы, описанной дескриптором с атрибутом BORDER, браузер заключает таблицу в рамку и разграничивает линиями ее соседние строки и столбцы. Атрибуты FRAME u RULES позволяют указать, какие именно части линий обрамления таблицы следует отображать. При воспроизведении таблицы, описанной дескриптором с атрибутом BORDER, браузер заключает таблицу в рамку и разграничивает линиями ее соседние строки и столбцы. Атрибуты FRAME u RULES позволяют указать, какие именно части линий обрамления таблицы следует отображать. Атрибут FRAME служит для определения фрагментов внешнего очертания таблицы, подлежащих воспроизведению в окне браузера. Атрибут FRAME служит для определения фрагментов внешнего очертания таблицы, подлежащих воспроизведению в окне браузера. Атрибут RULES предоставляет возможность указания набора внутренних разделительных линий, которые должны быть воспроизведены. Атрибут RULES предоставляет возможность указания набора внутренних разделительных линий, которые должны быть воспроизведены.

32 Внешнее обрамление таблицы Void Все линии внешней границы отсутствуют Above Линия над таблицей Below Линия под таблицей Rhs Линия справа от таблицы Lhs Линия слева от таблицы Hsides Линия над и под таблицей Vsides Линия справа и слева от таблицы Border Все линии внешней границы присутствуют (по умолчанию)

33 Внутренние разделительные линии таблицы None Все внутренние линии отсутствуют Cols Линии между столбцами Rows Линии между строками Groups Линии между группами столбцов и группами строк All Все внутренние линии присутствуют (по умолчанию)

34 Создание таблиц WEB-браузеры обычно выполняют автоматический перенос слов текста внутри ячеек таблицы, руководствуясь значениями ее размеров и принимая во внимание текущие габариты собственного окна. WEB-браузеры обычно выполняют автоматический перенос слов текста внутри ячеек таблицы, руководствуясь значениями ее размеров и принимая во внимание текущие габариты собственного окна. Атрибут NOWRAP позволяет принудительно отключить функцию переноса слов в ячейке таблицы, чтобы обеспечить возможность отображения текста в одну строку. Атрибут NOWRAP позволяет принудительно отключить функцию переноса слов в ячейке таблицы, чтобы обеспечить возможность отображения текста в одну строку. Атрибут NOWRAP следует применять только по отношению к тем ячейкам таблицы, которые содержат короткие фрагменты текста, такие как заголовки или названия товаров. Атрибут NOWRAP следует применять только по отношению к тем ячейкам таблицы, которые содержат короткие фрагменты текста, такие как заголовки или названия товаров. Атрибут NOWRAP теряет свои свойства при взаимодействии дескрипторов u. Атрибут NOWRAP теряет свои свойства при взаимодействии дескрипторов u.