КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Эффекты при переходе по ссылке
|
|
|
|
Автоматический переход на другую страницу
Пример:
<meta http-equiv="Refresh" content="10; URL=http://www.mysite/index.html">
Если вдруг по каким либо причинам Вы задумаете поменять URL адрес Вашего сайта то хорошо было бы на старом месте оставить страницу вроде этой:
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; Charset=Windows-1251">
<meta http-equiv="Refresh" content="10; URL=http://www.mysite/index.html">
<title>Переадресация</title>
</head>
<body>
<font size="+1">
Адрес сайта был изменен, через 10 секунд Ваш браузер будет автоматически перенаправлен по новому адресу:<br>
<a href="http://www.mysite.ru/index.html"><b>http://www.mysite.ru/</b></a><br>
Нажмите <a href="http://www.mysite.ru/index.html">здесь</a> для того чтобы выполнить переход немедленно.<br>
Приносим извинения за доставленные неудобства.
</font>
</body>
</html>
Разберём и осмыслим строчку из примера:
<meta http-equiv="Refresh" content="10; URL=http://www.mysite/index.html">
meta http-equiv="Refresh" - Refresh (восстановление) указывает браузеру что данную страницу необходимо обновить
content="10; - обновить через заданное количество секунд (в нашем случае десять)
URL=http://www.mysite/index.html" - адрес новой/другой страницы на которую следует перейти.
Пример:
<meta http-equiv="Refresh" content="30">
А вот если в заголовке Refresh URL адрес упустить, как показано в примере, то тогда браузер будет постоянно через каждые 30 секунд (ну или не 30.. сколько пропишите через столько и будет..) обновлять содержимое данной страницы.
Такой метод широко используется в новостных лентах, где информация идет так сказать потоком и требует постоянного обновления.
Пример:
<meta http-equiv ="Page-Enter" Content="RevealTrans(Duration=1.0, Transition=0)">
<meta http-equiv ="Page- Exit " Content="RevealTrans(Duration=3.0, Transition=23)">
Данные заголовки создают визуальные эффекты при переходе с одной страницы на другую.
· Page-Enter - Эффект появления страницы
· Page- Exit - Эффект исчезновения страницы
В которых:
· Duration - время действия эффекта в секундах
· Transition - Один из номеров предлагаемых эффектов (от 0 до 23) перечисленных в таблице:
| Номер | Описание эффекта | Номер | Описание эффекта |
| Прямоугольники внутрь | Растворение | ||
| Прямоугольники наружу | Вертикальная панорама внутрь | ||
| Круг внутрь | Вертикальная панорама наружу | ||
| Круг наружу | Горизонтальная панорама внутрь | ||
| Наплыв наверх | Горизонтальная панорама наружу | ||
| Наплыв вниз | Уголки влево - вниз | ||
| Наплыв вправо | Уголки влево - вверх | ||
| Наплыв влево | Уголки вправо – вниз | ||
| Вертикальные жалюзи | Уголки вправо – вверх | ||
| Горизонтальные жалюзи | Случайные горизонтальные полосы | ||
| Шажки горизонтальные | Случайные вертикальные полосы | ||
| Шажки вертикальные | Случайный выбор эффекта |
Пример:
Файл page1.html
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; Charset=Windows-1251">
<meta http-equiv ="Page-Enter" Content="RevealTrans(Duration=1.0, Transition=12)">
<title>Эффекты перехода страниц</title>
</head>
<body bgcolor="#c5ffa0">
<center>
<h2>На заметку:</h2>
<font size="+1">Эффекты перехода с одной страницы на другую работают не во всех браузерах.</font><hr><br>
<font size="+1">Нажмите на "Перейти" чтобы перейти к следующей странице<br>
и оценить эффект перехода от одной странице к другой.</font><br><br>
<a href="page2.html"><font size="+2">"Перейти"</font></a>
</center>
</body>
</html>
Файл page2.html
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; Charset=Windows-1251">
<meta http-equiv ="Page-Enter" Content="RevealTrans(Duration=2.0, Transition=23)">
<title>Эффекты перехода страниц</title>
</head>
<body bgcolor="#c0e4ff">
<center>
<h2>На заметку:</h2>
<font size="+1">Эффекты открытия и закрытия веб-страниц будут видны только при переходе <br>
от одной страницы к другой или же при помощи кнопок "назад" "вперёд". <br>
При первом открыти страницы, а также во время перезагрузки<br>
эффекты перехода видны не будут.</font><hr><br>
<font size="+1">Нажмите на "Перейти" чтобы перейти к следующей странице<br>
и оценить эффект перехода от одной странице к другой.</font><br><br>
<a href="page1.html"><font size="+2">"Перейти"</font></a>
</center>
</body>
</html>
Полезные советы:
· Ещё раз напомню о том что мета теги стоит применять умело и грамотно особенно это касается команд для робота и кодировки символов, иначе весь Ваш труд может пойти насмарку..
· Заголовок Refresh (автоматический переход на другую страницу) можно использовать не совсем стандартно.. Некоторые авторы используют его для создания своего рода "презентации" слайд шоу, где сменяющиеся страницы и есть кадры презентации. Представьте заходит человек на такой сайт а тут ему "Откинетесь на спинку кресла и расслабьтесь..":) а далее сами по себе пошли картинки, графики, тексты.. а последняя страница тупиковая где пользователь берёт сайт "в свои руки" или же может замыкаться на первую. Только всегда помните о золотом правиле веб-мастера: Главное не переборщить!
Глава 11
Заголовок <!DOCTYPE>
Ухитрился я таки перевернуть всё с ног наголову.. вообще то о заголовке <!DOCTYPE> нужно было говорить в самом начале данного учебника.. Ну до ничего ещё есть шанс всё исправить..
Но прежде чем продолжить обучение немного отвлечёмся.. ответе на вопрос:
Какие из этих слов, согласно правилам грамматики, написаны с ошибкой?: Шiопотъ, Шепотъ, Шёпот, Шепот, Шопот. Уверенны?
Но, подождите, я ведь не сказал, каких именно правил нужно придерживаться!
Так на старославянском было единственно верным писать "Шiопотъ" потом, следуя логики, что одному звуку - одна буква, сочетание "iо" решили заменить буквой "е" получился "Шепотъ". Потом родилась буква "ё" потому что народ не знал, как правильно написать слово "ёлка", далее с развитием телеграфа и типографии в целях экономии времени, бумаги, чернил и т.д., пропал твёрдый знак в окончаниях слов заканчивающихся на согласную букву. В настоящее время продвигают правило "Как слышим, так и пишем!" так что слово "Шопот" по нынешним меркам, уже, наверное, тоже правильно написано. Так же допускается писать букву "е" вместо "ё" если это не мешает верному пониманию слова, например "узнаем" вместо слова "узнаём".
Теперь представьте, что Вы пишите диктант и его будет проверять лингвист - старовер, учитель Марья Ивановна советской закалки, и тинэйджер, который привык общаться на сленге. Каким правилам грамматики Вы будите подчинятся чтобы всем угодить? Думаю единственно верным решением будет указать в начале диктанта, что то типа: "При написании диктанта придерживаюсь правил русского языка утверждённых приказом министра образования от такого то числа", тогда все проверяющие будут оценивать Ваш диктант не так как им больше нравится, а согласно правил, на которые Вы сослались.
К чему я это всё?
Язык разметки гипертекстовых документов, точно также как и русский язык живёт во времени и тоже меняется.. появляются новые слова - теги например <footer>, <header>, <video>.., какие-то наоборот умирают, забывается и осуждаются в использовании, например теги: <center>, <font>, <frameset>.., тоже самое происходит с атрибутами, меняются правила синтаксиса..
Так вот чтобы различные браузеры например: "старовер" - Internet Explorer 6.0, "учительница советской закалки" - Opera 8.0, "тинэйджер" - Chrome 5.0... не разругались на Ваш документ - отобразили его правильно, не запутались в чтении Вашей страницы, необходимо указать в соответствии с какими стандартами он был написан.
Теперь немного о самих стандартах.
Разработкой стандартов HTML языка (и не только HTML), иначе спецификаций, занимается организация World Wide Web Consortium, W3C - Консорциум Всемирной паутины, официальный сайт: (www.w3.org). С историй возникновения данной организации её целями и задачами, Вы можете ознакомиться здесь:(http://ru.wikipedia.org/wiki/Консорциум_Всемирной_паутины), моя же задача доложить Вам о том, что эта организация разработала несколько спецификаций HTML, по которым, собственно, мы и учимся.
Вот официальные спецификации:
· HTML 3.2 - 14 января 1997 года; (http://www.w3.org/TR/REC-html32)
· HTML 4.0 - 18 декабря 1997 года; (http://www.w3.org/TR/REC-html40-971218)
· HTML 4.01 - 24 декабря 1999 года; (http://www.w3.org/TR/html401)
· HTML 5 - в разработке. (официально ещё не объявлена, но уже используется) (http://www.w3.org/TR/html5)
Именно этими документами должны руководствоваться как веб-мастера при создании сайтов, так и разработчики браузеров. Эти стандарты созданы для того чтобы не вышло как в Библейской истории про Вавилонскую башню, где все вдруг начали говорить на разных языках и окончательно перестали понимать друг друга.. а такой момент назревал в своё время, да сейчас не всё так уж гладко, впрочем это уже совсем другая история.. вернемся к <!DOCTYPE>.
Итак, заголовок <!DOCTYPE> указывает на тип документа - DTD (document type definition - описание типа документа) для правильной его интерпретации браузерами, другими словами указывал браузерам, согласно каким стандартам следует обрабатывать ту или иную страницу.
Ниже перечислены основные варианты <!DOCTYPE>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- Строгий DTD. Используя такой заголовок, веб-страница должна в точности следовать спецификации HTML 4.01 не использовать теги и атрибуты, обозначенные спецификацией как "нежелательные", а также не должна использовать фреймы.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- Переходный синтаксис HTML. При таком заголовке допускаются "вольности" при составлении документа, страница может содержать теги и атрибуты, помеченные спецификацией HTML 4.01 как "нежелательные".
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
- Указывает, что в HTML-документе используются фреймы.
<!DOCTYPE html>
- А такой заголовок обозначает, что используется спецификация HTML 5.
Существуют и другие варианты заголовков <!DOCTYPE>, например для XHTML, выше перечислены основные для HTML.
Заголовок <!DOCTYPE> принято располагать в самом начале документа перед тегом <html>
Как показано на примере:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title><!DOCTYPE></title>
</head>
<body>
<center>
<font face="arial" size="+2" color="#ff0000">
Данный документ содержит теги и атрибуты осуждаемые спецификацией HTML 4.01
</font>
<br><br>
<font face="arial" size="+1" color="#0fff00">Для того чтобы этот документ прошёл проверку на валидность следует указывать переходный заголовок <!DOCTYPE></font>
</center>
</body>
</html>
Полезные советы:
· Всегда используйте заголовок <!DOCTYPE> для всех Ваших страничек.
· Проверяйте Ваш код на валидность - "правильность написания" с помощью специальных сервисов. Например здесь: (http://validator.w3.org)
· Использование неправильного - несоответствующего HTML документу <!DOCTYPE> может привести к плачевным результатам, будьте внимательны и осторожны при выборе нужного заголовка. В большинстве случаев для страниц, не использующих фреймы лучше указывать переходный <!DOCTYPE>
Глава 12
И снова таблицы..
Данная глава является продолжением 4 главы про таблицы, отложил я её на потом по нескольким причинам. Во-первых, четвёртая глава и без того получилась длинноватой и "неповоротливой".. Во-вторых, не хотел, что бы Вы на тот момент погрязли в изучении таблиц и так сказать топтались на месте.. обучение, на мой взгляд, должно происходить живенько, интересно, а главное результативно! Зато теперь, когда у Вас сложилось общее представление о HTML, Вы разобрались с его базовой частью, сделали свой первый нехитрый сайт, можно наращивать багаж знаний, умений и навыков. Ну и в-третьих, я надеюсь, что Вы к этому времени, параллельно начали изучать CSS: (http://www.webremeslo.ru/css/glava0.html).. что разве ещё нет? жаль.. Дело в том, что далее в этом учебнике нет нет будут попадаться вещи, которые сами по себе могут показаться бесполезными и бессмысленными, однако в купе с другими науками они порой незаменимы!
Ладно, вернёмся к таблицам..
В качестве "полигона" для изучения нового материала возьмём вот такую жутко скучную таблицу:
| Продукт | Белки | Жиры | Углеводы | ккал |
| Хлеб ржаной | 4,7 | 0,7 | 49,8 | |
| Молоко | 2,8 | 3,2 | 4,7 | |
| Картофель | 0,1 | 19,7 | ||
| Свинина | 11,4 | 49,3 | ||
| Итого: | 20,9 | 53,3 | 83,2 |
Ну что ж, давайте поколдуем над ней..
Заголовки таблиц.
Любая ячейка таблицы может быть определена как заголовок. Для того чтобы сделать ячейку таблицы заголовком нужно вместо знакомого тега <td> использовать тег <th>.
Например, вот так:
<table>
<tr>
<th>Данная ячейка является заголовком</th>
</tr>
</table>
Как правило, текст ячейки определённый в качестве заголовка отображается браузерами жирным шрифтом по центру ячейки.
Ну что давайте попробуем сделать некоторые ячейки нашей таблицы заголовками? смотрим пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Заголовок таблицы</title>
</head>
<body>
<table border="1" width="400" cellpadding="3" cellspacing="0">
<tr>
<th> Продукт </th><th> Белки </th><th> Жиры </th><th> Углеводы </th><th> ккал </th>
</tr>
<tr>
<th> Хлеб ржаной </th> <td>4,7</td><td>0,7</td><td>49,8</td><td>214</td>
</tr>
<tr>
<th> Молоко </th> <td>2,8</td><td>3,2</td><td>4,7</td><td>58</td>
</tr>
<tr>
<th> Картофель </th> <td>2</td><td>0,1</td><td>19,7</td><td>83</td>
</tr>
<tr>
<th>Свинина</th><td>11,4</td><td>49,3</td><td>9</td><td>489</td>
</tr>
<tr>
<th> Итого: </th> <td>20,9</td><td>53,3</td><td>83,2</td><td>844</td>
</tr>
</table>
</body>
</html>
К тегу <th> могут применятся точно такие же атрибуты как и к тегу <td> о них мы говорили в 4 главе поэтому повторятся не буду, а просто перечислю их:
· width - Ширина ячейки в процентах или пикселях.
· height - Высота ячейки в процентах или пикселях.
· align - Выравнивает текст в ячейке:
o left - по левому краю.
o right - по правому краю.
o center - по центру.
o justify - по левому и правому краю.
· valign - Выравнивает текст в ячейке по вертикали:
o top - по верхнему краю.
o middle - по центру.
o bottom - по нижнему краю.
o baseline - по базовой линии.
· colspan - количество столбцов занимаемое ячейкой.
· rowspan - количество рядов занимаемое ячейкой.
· bgcolor - Цвет фона ячейки.
· background - Задает фоновый рисунок в ячейке.
· bordercolor - Цвет бордюра.
· title - Всплывающая подсказка
· nowrap - Запрещает перенос строк в ячейке.
Думаю понятно, а посему идем дальше..
Название таблицы и её описание
Тег <caption> позволяет озаглавить таблицу, подписать её каким либо текстом. Данный тег должен располагаться внутри таблицы сразу после <table>
<table>
<caption>Название таблицы</caption>
<tr>
<td>ячейка</td>
</tr>
</table>
Вот пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Название таблицы</title>
</head>
<body>
<table border="1" width="400" cellpadding="3" cellspacing="0">
<caption> <b>Энергетическая ценность продуктов питания:</b> </caption>
<tr>
<th>Продукт</th><th>Белки</th><th>Жиры</th><th>Углеводы</th><th>ккал</th>
</tr>
<tr>
<th>Хлеб ржаной</th><td>4,7</td><td>0,7</td><td>49,8</td><td>214</td>
</tr>
<tr>
<th>Молоко</th><td>2,8</td><td>3,2</td><td>4,7</td><td>58</td>
</tr>
<tr>
<th>Картофель</th><td>2</td><td>0,1</td><td>19,7</td><td>83</td>
</tr>
<tr>
<th>Свинина</th><td>11,4</td><td>49,3</td><td>9</td><td>489</td>
</tr>
<tr>
<th>Итого:</th><td>20,9</td><td>53,3</td><td>83,2</td><td>844</td>
</tr>
</table>
</body>
</html>
К тегу <caption> может быть применён атрибут align - выравнивание названия таблицы по горизонтали с возможными значениями left, right и center, а также атрибут valign который говорит от том где должно располагаться название сверху - top или снизу - bottom таблицы.
Однако хочу отметить, что данные атрибуты в разных браузерах ведут себя по разному, так например, запись:
<caption align="left">Текст</caption>
- для браузеров IE и Opera разместит название сверху таблицы по её левому краю, а для браузера Firefox это будет значить, что название следует размещать слева от самой таблицы.
Так же название таблицы или её краткое описание можно указывать с помощью атрибута summary тега <table>
Вот так:
<table summary="описание таблицы">
Такое описание никак не отображается и не выводится на экран обычными браузерами, однако может быть использовано поисковыми системами, а так же речевыми браузерами.
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Описание таблицы</title>
</head>
<body>
<table border="1" width="400" cellpadding="3" cellspacing="0" summary="Энергетическая ценность продуктов питания" >
<tr>
<th>Продукт</th><th>Белки</th><th>Жиры</th><th>Углеводы</th><th>ккал</th>
</tr>
<tr>
<th>Хлеб ржаной</th><td>4,7</td><td>0,7</td><td>49,8</td><td>214</td>
</tr>
<tr>
<th>Молоко</th><td>2,8</td><td>3,2</td><td>4,7</td><td>58</td>
</tr>
<tr>
<th>Картофель</th><td>2</td><td>0,1</td><td>19,7</td><td>83</td>
</tr>
<tr>
<th>Свинина</th><td>11,4</td><td>49,3</td><td>9</td><td>489</td>
</tr>
<tr>
<th>Итого:</th><td>20,9</td><td>53,3</td><td>83,2</td><td>844</td>
</tr>
</table>
</body>
</html>
|
|
|
|
|
Дата добавления: 2014-10-31; Просмотров: 677; Нарушение авторских прав?; Мы поможем в написании вашей работы!