Размещение адреса электронной почты

Также с web-странички можно отправлять письмо по электронной почте. Ссылка на электронный адрес оформляется с помощью тега < A> с указанием в параметре href специального слова «mailto: ». Например:

Пишите письма на: < А href= mailto: [email protected]> [email protected]< /A>

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

Задание 3.1. Создайте HTML-документ links.html с заголовком странички «Гиперссылки в HTML-документе» с текстом «Я учусь в ВятГГУ». Название университета оформите ссылкой, ведущей на сайт www.vshu.kirov.ru (см. рис.). Проверьте работу ссылки.

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

Задание 3.2. У HTML-документа links.html, созданного в задании 3.1, задайте следующие настройки ссылок: текст непосещенных ссылок окрашивается синим цветом, текст активных ссылок – зеленым, посещенных – красным. Проверьте настройки ссылок:

· заметьте, что в момент активизации ссылки (то есть в момент клика) ссылка меняет цвет на зеленый;

· вернитесь на исходный документ. Ссылка все еще остается активной – следовательно зеленой;

· теперь щелкните по любому месту в вашем HTML-документе: ссылке присваивается статус посещенной – ссылка станет красной.

Задание 3.3. Добавьте у ссылки, созданной в задании 3.1, подсказку «Перейти на сайт ВятГГУ». Проверьте результат в окне браузера: при наведении на ссылку должна появляться подсказка.

 

Задание 3.4. Добавьте в HTML-документ links.html графическую ссылку, ведущую на какой-либо сайт в сети Интернет. Для этого:

· В любом графическом редакторе (например, «Paint») создайте рисунок;

· Создайте ссылку на сайт, но вместо текста ссылки поместите созданный рисунок;

· Рядом со ссылкой поместите комментирующий текст;

· Загрузите страничку в окне браузера и проверьте работу ссылки;

· Уберите ссылочную рамку вокруг рисунка (используйте параметр border у тега < IMG> )

Задание 3.5. В HTML-документе links.html создайте ссылку, ведущую на страничку с картинкой (используйте страничку с картинками, которую Вы создавали в ЛР №2 «Графика в HTML-документе»).

 

Задание 3.6. Создайте ссылку внутри HTML-документа links.html, щелкнув по которой, пользователь перемещается в конец документа. Для этого:

· В конце тела странички создайте метку с именем finish;

· В начале документа поместите ссылку с текстом «в конец документа», ведущей на метку с именем finish;

· Проверьте работу ссылки, загрузив страничку в окне браузера.

Задание 3.7. Поместите на свою страничку ссылку на свой адрес электронной почты. Если у Вас нет зарегистрированного адреса, то для выполнения задания придумайте его сами.

Лабораторная работа №4 «Таблицы в HTML-документе»

Направления использования таблиц в HTML

Существует два основных направления использования таблиц в HTML:

1. Отображение каких-либо данных в табличном виде. В качестве данных таблицы может быть использовано все: параграфы, списки, заголовки, формы, рисунки и отформатированный текст.

2. Размещение всей информации на страничке внутри одной или нескольких таблиц.

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

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

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

Создание таблицы

Таблица описывается парными тегами < TABLE > и < / TABLE >:

< TABLE>

теги описания структуры таблицы

< /TABLE>

Тег < TABLE> имеет параметры, с помощью которых можно изменять внешний вид таблицы:

· border – ширина границы таблицы (при border= 0 таблица отображается без границы);

· bordercolor – цвет границы таблицы;

· width – ширина всей таблицы (в пикселях или процентах от ширины окна просмотра);

· height – высота всей таблицы (в пикселях или процентах от высоты окна просмотра);

· bgcolor – цвет фона таблицы;

· background – фоновый рисунок таблицы;

· align – расположение таблицы на странице (значения left, center, right );

· cellpadding – отступ текста от границ ячеек;

· cellspacing – отступ табличных объектов (ячейки, строки) друг от друга.

Структура таблицы

При описании структуры таблицы используются 4 элемента, которые располагаются между тегами < TABLE> и < /TABLE>, – это название, строка, ячейки-заголовки и ячейки с данными.

Название является необязательным элементом и задается парными тегами < CAPTION> < /CAPTION>

< CAPTION> Название таблицы < /CAPTION>

У тега < CAPTION> есть всего один параметр:

· align – задает положение названия таблицы относительно таблицы. Он может принимать значения:

- bottom – название таблицы будет расположено в центре под таблицей;

- left – название таблицы будет расположено над таблицей, слева;

- right – название таблицы будет расположено над таблицей, справа;

- top – название таблицы будет расположено над таблицей по центру (это значение задается по умолчанию).

Обязательный элемент Строка таблицы используется для формирования строк в таблице и задается парными тегами < TR> < /TR>:

< TR> Строка таблицы< /TR>

Тег < TR> имеет 4 параметра:

· align – задает выравнивание внутри строки (значения: left , right, center );

· valign – задает вертикальное выравнивание внутри строки (возможные значения: top , bottom, middle );

· bgcolor – задает цвет фона внутри строки;

· background – задает фоновый рисунок строки.

Внутри строки могут находиться ячейки с данными и ячейки-заголовки.

Ячейка-заголовок является необязательным элементом и служит для обозначения заголовка строки или столбца. По сути, это обычная ячейка таблицы, в которой используется более крупный и жирный шрифт, нежели в ячейках с данными.

Ячейка-заголовок задается парными тегами < TH> < /TH>:

< TH> Заголовок столбца таблицы< /TH>

Обязательный элемент Ячейка таблицы служит для хранения данных таблицы и задается парными тегами < TD > < / TD >:

< TD> Ячейка с данными < /TD>

Теги < TH> и < TD> имеют несколько параметров:

· align – задает выравнивание внутри ячейки ( left , right, center );

· valign – задает вертикальное выравнивание внутри ячейки ( top , bottom, middle );

· colspan – растягивание ячейки на несколько столбцов;

· rowspan – растягивание ячейки-заголовка на несколько строк;

· height – задает высоту ячейки (в пикселях либо в процентах от высоты таблицы);

· width – ширина ячейки (в пикселях либо в процентах от ширины таблицы);

· bgcolor – задает цвет фона ячейки;

· background – задает фоновый рисунок ячейки;

· nowrap – наличие или отсутствие этого параметра обозначает запрет или разрешение на перенос строк внутри ячейки.

⇐ Предыдущая1234567Следующая ⇒

Поделиться: