Использование гиперссылок, таблиц, форм в HTML презентация

Содержание

Создание гиперссылок Гиперссылки позволяют нажатием кнопки мыши быстро перемещаться от одного документа к другому. Именно гиперссылки связывают все Web-страницы в единую сеть. Для создания ссылки необходимо сообщить браузеру, что является ссылкой,

Слайд 1Использование гиперссылок, таблиц, форм в HTML


Слайд 2Создание гиперссылок
Гиперссылки позволяют нажатием кнопки мыши быстро перемещаться от одного документа

к другому. Именно гиперссылки связывают все Web-страницы в единую сеть.
Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. Оба действия выполняются с помощью тега A, который имеет параметр href. В качестве значения используется адрес документа (URL).


Слайд 3Внешние гиперссылки
Внешние гиперссылки вставляются в HTML-документ с помощью тега .
Основным

параметром тега является href. Именно этот параметр задает URL-адрес Web-страницы, которая будет загружена при щелчке мыши на указателе. В качестве указателя может быть текст
Текст ссылки
или изображение
Подсказка
Если URL-адрес содержит символ "&", то его необходимо заменить на HTML-эквивалент &:
Текст ссылки
URL-адреса бывают абсолютными и относительными.


Слайд 4Абсолютный URL-адрес
Абсолютный URL-адрес содержит обозначение протокола, доменный или IP-адрес компьютера, путь

к файлу, а также имя файла. Например:
http://www.mysite.ru/folder/file.html
Если файл находится в корневой папке, то путь может отсутствовать:
http://www.mysite.ru/file.html
Имя файла также может отсутствовать. В этом случае загружается Web-страница, заданная по умолчанию в настройках Web-сервера:
http://www.mysite.ru/
http://www.mysite.ru/folder/


Слайд 5Относительный URL-адрес
Относительные ссылки, как следует из их названия, построены относительно текущего

документа или адреса. При относительном задании URL-адреса путь определяется с учетом местоположения Web-страницы, на которой находится ссылка. Возможны следующие варианты:
если нужная Web-страница находится в той же папке, что и Web-страница, содержащая ссылку, то URL-адрес может содержать только имя файла. Если с Web-страницы, находящейся по адресу http://www.mysite.ru/folder1/folder2/file1.html, нужно перейти на http://www.mysite.ru/folder1/folder2/file2.html, то ссылка будет такой:
Текст ссылки


Слайд 6Относительный URL-адрес
http://www.mysite.ru/folder1/folder2/file1.html → http://www.mysite.ru/folder1/folder2/folder3/file2.html:
Текст ссылки
http://www.mysite.ru/folder1/folder2/file1.html → http://www.mysite.ru/folder1/file2.html (двоеточие - перейти

на уровень выше в списке каталогов сайта):
Текст ссылки
http://www.mysite.ru/folder1/folder2/folder3/file1.html → http://www.mysite.ru/folder1/file2.html:
Текст ссылки


Слайд 7Ссылки внутри страницы
Для создания ссылки следует вначале сделать закладку в соответствующем

месте и дать ей имя при помощи параметра name тега А

Листинг 2.1. Структура документа с внутренними ссылками



Создание внутренних ссылок


Название документа


Оглавление












Глава 1


Содержание главы 1


Глава 2


Содержание главы 2


Глава 3


Содержание главы 3


Глава 4


Содержание главы 4





Слайд 8Используется параметр target=_blank тега А
Пример


Обычная ссылка на сайт

www.bsu.edu.ru

Ссылка открывает новое окно на сайт www.bsu.edu.ru



Ссылка на новое окно


Слайд 9Ссылка на адрес электронной почты выглядит так:

Текст

Вместо URL-адреса указывается адрес

электронной почты, перед которым добавляется слово "mailto:".

Гиперссылки на адрес электронной почты


Слайд 10Таблицы
В HTML-документе таблицы используются в следующих случаях:
как средство представления данных;
как элемент

оформления страницы, с помощью которого можно точно разместить на странице текст и графику.
 
Основным тегом для создания таблиц является



Слайд 11Тег
Тег имеет следующие параметры:
border управляет отображением линий сетки

таблицы, а также задает толщину рамки вокруг таблицы. По умолчанию сетка не отображается:



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



Слайд 12Тег
cellpadding указывает размер отступа между рамкой ячейки и данными

внутри ячейки:

По умолчанию параметр имеет значение 1;
width определяет ширину таблицы в пикселах или в процентах от размера окна:


align задает выравнивание таблицы, а также обтекание таблицы текстом. Он может принимать следующие значения:
left — таблица выравнивается по левому краю, а текст обтекает ее справа:

right — таблица выравнивается по правому краю, а текст обтекает ее слева:

center — таблица выравнивается по центру:

bgcolor указывает цвет фона таблицы:


Слайд 13Строки таблицы
С помощью парного тега описываются строки таблицы. Он имеет

следующие параметры:
align указывает горизонтальное выравнивание текста в ячейках таблицы. Параметр может принимать следующие значения:
left — по левому краю (по умолчанию):

right — по правому краю:
center — по центру:
justify — по ширине:
valign определяет вертикальное выравнивание текста в ячейках таблицы. Он может принимать следующие значения:
top — по верхнему краю:
middle — по центру:
bottom — по нижнему краю:
baseline — по базовой линии:
bgcolor указывает цвет фона ячеек таблицы.


Слайд 14Ячейки таблицы
С помощью тега описываются ячейки таблицы. Тег имеет

следующие параметры:
align и valign выполняют те же функции, что и в теге
;
width и height определяют ширину и высоту ячейки в пикселах или в процентах;
bgcolor указывает цвет фона ячейки;
colspan задает количество объединяемых ячеек по горизонтали;
rowspan указывает количество объединяемых ячеек по вертикали.


Слайд 15Пример



1x1

1x2










1x3

2x1

2x2

2x3



Слайд 16Объединения ячеек



1x1

1x2



bgcolor="#336699">
2x1


2x2


2x3





Слайд 17Объединения ячеек
Не прописаны параметры для ячейки 1х3, то есть в

первом ряду всего лишь две ячейки, так как ячейка 1х1 равна сама по себе двум ячейкам по длине (что и указано параметром colspan). Если бы была прописана ячейка 1х3, тогда получилась бы такая таблица:
 



 



Слайд 18


1x1

1x2



1x3




2x1

2x2





Объединения ячеек


Слайд 19Можно избавиться от пространства между ячейками таблицы
cellspacing=0


Слайд 20Можно, наоборот, увеличить пространство между ячейками
cellspacing=5


Слайд 21Формы в HTML-документах
Сейчас практически ни один сайт не обходится без элементов

интерфейса вроде полей ввода текста, кнопок, переключателей и флажков. Они необходимы для взаимодействия с пользователем, чтобы он мог искать на сайте по ключевым словам, писать комментарии, отвечать на опросы, прикреплять фотографии и делать много других подобных вещей. Именно формы и обеспечивают получение данных от пользователя и передачу их на сервер, где они уже подвергаются анализу и обработке. 
Вы можете использовать формы с различными целями. Простейшим примером является размещение формы, куда читатели, посетившие сайт, смогут записать свои отзывы. Круг применения форм HTML ограничивается только вашей фантазией.
Формы предназначены для пересылки данных от пользователя к Web-серверу. О том, как обрабатывать эти данные на стороне сервера, будет рассказано при изучении языка PHP. А пока рассмотрим возможности HTML для создания форм.


Слайд 22Тег
Этим тегом начинается каждая форма. Параметры этого тега:
action Определяет URL,

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


method определяет, как будут пересылаться данные от формы до Web- сервера. Может принимать два значения — GET и POST:
GET — данные формы пересылаются путем их добавления к URL-адресу после знака "?" в формате [Имя параметра]=[Значение параметра]
Пары параметр=значение отделяются друг от друга символом амперсанда (&). Например:
http://www.mysite.ru/file.php?pole1=Login&pole2=Password


Слайд 23Тег
Все специальные символы, а также буквы, отличные от латинских (например,

буквы русского языка), кодируются в формате %nn, а пробел заменяется знаком "+". Например, фраза "каталог сайтов" будет выглядеть следующим образом:
%EA%E0%F2%E0%EB%EE%E3+%F1%E0%E9%F2%EE%E2
В теге значение GET для параметра method задается так:

Метод GET применяется, когда объем пересылаемых данных невелик, так как существует предел длины URL-адреса. Длина не может превышать 256 символов;
POST предназначен для пересылки данных большого объема, файлов и конфиденциальной информации (например, паролей):



Слайд 24Тег
name задает имя формы:

target указывает, куда будет помещен

документ, являющийся результатом обработки данных формы Web-сервером. Параметр может содержать одно из зарезервированных значений — _blank, _top, _self или _parent:



Слайд 25Работа с тегами форм


Слайд 28Тег
Список опций включается в контейнер при помощи тега :


Слайд 30Тип поля ввода, атрибут ТYРЕ
Атрибут ТYРЕ тега может принимать следующие

значения

Слайд 31Тип поля ввода, атрибут ТYРЕ
Атрибут ТYРЕ тега может принимать следующие

значения

Слайд 32Примеры


Слайд 33Примеры


Слайд 34Примеры


Слайд 35Примеры
Пример:
В этом примере две формы расположены в соседних ячейках таблицы.


ВОRDER СЕLLSPACING=10>
<ТR>
<ТD>
Форма 1:

VALUE =" choice1"> yes.
VALUE =" choice2"> no.



Форма 2:

VALUE ="choice1"CHECKED> yes.
VALUE =" choice2"> no.







Слайд 36Примеры


Слайд 37Примеры


Слайд 38Примеры


Обратная связь

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

Email: Нажмите что бы посмотреть 

Что такое ThePresentation.ru?

Это сайт презентаций, докладов, проектов, шаблонов в формате PowerPoint. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами с другими пользователями.


Для правообладателей

Яндекс.Метрика