Презентация на тему "Гиперссылки и графические обьекты в HTML-документе" 9 класс

Содержание

• 
  Слайд 1

  Составил: учитель информатики и физики Водичев Андрей Сергеевич

  Гиперссылки и графические объекты в HTML-документе.

• 
  Слайд 2

  Гиперссылки

  2

  Гиперссылки – связь текста или какого-либо объекта с другими гипертекстовыми документами.

  Ссылкой на эти другие документы (части нашей странички) может быть текст (фраза, слово), а может быть и картинка.

• 
  Слайд 3
  

  3

  гипертекстовые ссылки среди других элементов текста выделяются цветом и подчеркиванием;

  мышиный курсор на ссылке меняет свою форму и превращается в указующий перст;

  для перехода по ссылке необходимо щелкнуть по ней мышкой;

  для возврата из ссылки необходимо использовать навигационную кнопку браузера Назад (Back).

• 
  Слайд 4
  

  4

  Для задания гипертекстового перехода внутри документа используют команду с атрибутом , которая является источником перехода к ссылаемому тексту.

  текст ссылки

  - гиперссылка

• 
  Слайд 5

  Гиперссылки в виде текста

  5

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

  мои фотографии -файл лежит в поддиректории /photos

  мои фотографии

• 
  Слайд 6

  Гиперссылки

  6

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

  указывать в ссылке полный путь к файлу, начиная с имени дисковода;

  указывать в ссылке путь по отношению к файлу со ссылкой.

• 
  Слайд 7

  Пример текстовых гиперссылок

• 
  Слайд 8
  
• 
  Слайд 9

  Графические объекты

  9

  Картинку можно помещать в документ почти так же, как текстовый символ. Для вставки этого необычного знака нужно воспользоваться тегом

  -вставка графического объекта

  Допускается использование файлов в формате GIF и JPG/JPEG.

• 
  Слайд 10

  Атрибуты

  10

  Атрибутsrc = “имя файла.jpg"

  При помощи этого тега можно задать имя файла с картинкой.

  Команда заставит браузер отобразить на экране графический файл картинка.gif из текущего каталога.

• 
  Слайд 11
  

  11

  Для удобства картинку сохраняют в ту же папку, что и HTML-документ, тогда в кавычках указывается только имя картинки, например:

  Тег не требует закрывающего тега.

• 
  Слайд 12
  

  12

  Атрибут alt = "текст надписи"

  Если браузер не находит картинки в указанном месте на диске, он вместо нее рисует на экране маленький прямоугольник и вписывает в него надпись, которая задана атрибутом alt:

  Cтоит пользователю установить курсор на картинке, как надпись появится в маленьком окошке и сообщит дополнительную информацию.

• 
  Слайд 13
  

  13

  Атрибутыwidth = n и height = m

  Эти атрибуты задают ширину и высоту (в пикселях) прямоугольника, в который выводится картинка.

  Если атрибуты не заданы, картинка рисуется в естественных размерах.

  Атрибут border = n

  Атрибут задает рамку иллюстрации толщиной в n пикселов.

  При отсутствии атрибута, или при значении n=0 рамка не рисуется.

• 
  Слайд 14
  

  14

  Атрибутalign

  Этот атрибут определяет положение иллюстрации по отношению к соседним элементам документа. Можно использовать следующие значения атрибута:

• 
  Слайд 15
  

  15

  - картинка будет располагаться слева от текста

  - картинка будет располагаться справа от текста

  - текст будет располагаться внизу картинки (это по умолчанию)

  - текст будет располагаться посередине картинки

  - текст будет располагаться вверху картинки

• 
  Слайд 16

  Расстояние между текстом и изображением

  16

  Расстояние между текстом и изображением задаётся с помощью параметров vspaceиhspace;

  Vspace – расстояние от изображения до текста по вертикали.

  Hspace – расстояние от изображения до текста по горизонтали.

  Расстояние задаётся в пикселях.

• 
  Слайд 17

  Гиперссылки в виде картинки

  17

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

• 
  Слайд 18
  

  18

  Картинка ведет себя так же, как текст. Курсор при попадании на картинку-ссылку меняет свою форму.

  Мышиный щелчок по картинке заставляет браузер выполнять переход.

  Отличие только в том, что картинка-ссылка не подчеркивается, как текст, и не выделяется цветом, а обрамляется в рамочку.