Noframes
Некоторые браузеры не поддерживают фреймовую структуру документа или неправильно её интерпретируют, кроме того зачастую пользователи в настройках своих браузеров умышленно отключают поддержку фреймовой структуры html документа. И хотя процент таких браузеров и пользователей невелик, но тем не менее они есть.
Теперь представьте, что Вы построили свой сайт с помощью фреймовой структуры и вот некоторые посетители, может быть сами не подозревая в чем проблема, пытаются открыть Ваш сайт, а их браузер выдает ошибку! Что они подумают о Вашем сайте? я думаю, что то типа: Фу.. ерунда какая то.. больше сроду сюда не зайду!.
Для того что бы дать понять пользователю, что его браузер/настройки браузера не поддерживают фреймы существует тег .
Тег выводит текст, заключенный в него в том случае, если браузер пользователя не поддерживает фреймы или они принудительно выключены в его настройках. Если же фреймы поддерживаются браузером пользователя, то данный тег попросту игнорируется.
Пример:
фреймы
Извините, но Ваш браузер не поддерживает фреймы..
Результат примера будет заметен, если Ваш браузер и в правду не поддерживает фреймы (тут я надолго задумался.. 
если это так, то зачем вообще читать эту главу?) или же Вы в качестве эксперимента выключили поддержку фреймов в своём браузере.
Тег должен быть расположен внутри тега
С плавающим фреймом всё ещё более просто, достаточно написать нужный текст между и данная надпись будет выводится на экран, в том случае если браузер не поддерживает фреймы.
Вот так:
Извините, но Ваш браузер не поддерживает фреймы..
Полезные советы:
- Перед тем как начать создавать страницу с использованием фрёймовой структуры проанализируйте её макет, размеры каждого окна, наличие или отсутствие в них полос прокруток и т. д. После этого можно создавать подключаемые HTML файлы особо не переживая за их взаимное расположение относительно друг друга..
- Используйте тег . Помните что если в Вашем браузере сайт работает и отображается так как Вы и задумывали то у других пользователей дела могут обстоять иначе!
Глава 8
Навигационные карты
Мы с Вами уже говорили о том как сделать рисунок ссылкой.. в этой главе поговорим о том как сделать фрагмент, область рисунка ссылкой на тот или иной документ, а так же о том как сделать различные области одного и того же рисунка ссылками на различные документы.
Для осуществления данной задачи нам не обойтись без так называемых навигационных карт.
Предположим, у нас имеется такой рисунок:
..и нам необходимо сделать, так что бы пользователь, нажав на одну из этих кнопок переходил по ссылке в тот или документ.. что нам для этого нужно?
В первую очередь обозначим наш рисунок не как обыкновенное графическое изображение, а как навигационную карту присвоив этому рисунку своё индивидуальное имя. Делается это при помощи атрибута usemap тега (я думаю Вам не стоит напоминать о том что тег
имеет обязательный атрибут src который указывает путь к той или иной картинке )
Назовём наш рисунок/карту именем panel. Это будет выглядеть так:
Не забываем по правилам синтаксиса поставить знак #решётки перед именем..
Ну а теперь, собственно, составим навигационную карту. Она задаётся тегом у которого есть атрибут name — имя.. улавливаете к чему я веду? Ну как Вы наверное уже догадались, укажем на базе какого рисунка мы будем строить нашу навигационную карту указав его имя..
Теперь займемся тем, что укажем браузеру области рисунка которые будут являться ссылками, а заодно пропишем пути переходов по этим ссылкам. Эту задачу берет на себя тег , закрывающего тега он не требует, и имеет следующие атрибуты, с которыми мы будем работать:
href — указывает путь к открываемому документу (точно так же как в теге )
shape — форма области рисунка которая будет служить ссылкой. Может иметь одно из трёх значений:
- rect — прямоугольная область
- poly — область представляет собой некий многоугольник
- circle — область заданная окружностью
coords — координаты формы
Прямоугольная область
Теперь наша карта приобретает такой вид:
По сути теперь зелёная квадратная кнопка стала рабочей.
В чем Вы можете убедится нажав на неё в этом примере:
Навигационная карта
Немного поспешил с примером толком не объяснив суть написанного.. Заострим внимание на атрибутах тега .
href=primer1.html — здесь думаю понятно, это путь к документу, который должен открыться при нажатии на зелёную кнопку.
Так как кнопка у нас квадратная, а квадрат как известно это правильный прямоугольник, форму области рисунка назначаем прямоугольной shape=rect.
А теперь самое интересное coords=15,15,82,82 — координаты.. Для прямоугольника они задаются двумя точками по принципу Х1,У1,Х2,У2 Где Х1,У1- первая точка и соответственно Х2,У2 -вторая. Координаты указываются в пикселях.. Наш рисунок/карта имеет размеры 300 на 100 пикселей, её самый верхний левый пиксель имеет координаты Х=0,У=0, а самый нижний правый Х=300,У=100. Если не понятно, окунёмся в геометрию за пятый класс..
Взгляните на рисунок:
Так, выбрав прямоугольную форму shape=rect для нашей области в виде квадратной кнопки мы указали координаты ёё верхнего левого и нижнего правого пикселей.. которых вполне достаточно для обозначения рабочей области всей кнопки.
Полигон (многоугольник).
Займёмся жёлтой кнопкой, она у нас представлена в виде треугольника. Для того чтобы выделить её рабочую область из нашего рисунка, присвоим атрибуту shape значение poly — полигон, которое определит эту область как некий многоугольник, где координаты через запятую будут являться его вершинами, их может быть сколь угодно много Х1,У1,Х2,У2,Х3,У3,Х4,У4… Х124,У124 фигура образованная этими точками вершинами углов может иметь вид любого многоугольника как правильного, так и неправильного. В нашем случае угла всего три, на то он и треугольник, следовательно его координаты будут заданы тремя парами значений Х1,У1,Х2,У2,Х3,У3
Значит всё вместе пишем так:
А вот рисунок который наглядно показывает откуда берутся координаты точек..
Пример:
Навигационная карта
Окружность
Ну и последняя красная кнопка она у нас круглая.. значит форма области будет круглой shape= circle. На сей раз с координатами дело обстоит немного иначе. Нам понадобится три значения Х,У,R. Х и У это координаты центра нашей окружности, а R — это длина радиуса в пикселях.
Вот рисунок:
А вот пример:
Навигационная карта
Доводим до ума..
Теперь немного о том, что ещё желательно было бы сделать с нашей картой прежде чем монтировать её в какую либо страницу.
Определим фиксированные размеры рисунка-карты атрибутами width и height
Напишем альтернативный текст, как для всего рисунка карты, так и для её отдельных областей используя атрибут alt, а также описание элементов атрибутом title.
Избавимся от рамки бордюра.. сделаем border=0..(ну если Вам с бордюром больше нравится, можете этого не делать.. я не настаиваю..)
В конце должно выглядеть примерно вот так:
Навигационная карта
Пересечение областей
Иногда удобно формировать рабочую область изображения смешивая разные формы..
Предположим, наша очередная кнопка имеет такой вид:
Конечно, можно определить форму как многоугольник, но придется задать уйму координат для округлой части такой кнопки (ну это если нужна особая точность в навигационной карте).
А можно определить в этом примере две формы прямоугольник rect и окружность circle как показано на рисунке:
А в коде указать путь к одному и тому же документу:
Пример:
Навигационная карта
Однако стоит помнить о том, что если бы ссылки с разных форм вели к разным документам, то нажимая на область пересечения наших фигур посетитель будет переходить по той ссылке, чья область в коде указана первой.. в нашем случае это окружность.
Не область
Рассмотрим на примере.. предположим необходимо изготовить вот такую кнопку:
Как быть с отверстием в ней?
Тег помимо атрибута href имеет противоположенный по значению атрибут nohref — неактивная область, то есть если пользователь нажмет на такую область, то ровным счетом ничего не произойдёт, чего нам собственно и необходимо добиться при изготовлении отверстия в нашей карте.
Карта будет задана двумя областями, неактивной окружностью circle и активной прямоугольной областью rect и как показано на рисунке чертеже иметь следующие координаты:
Как уже говорилось ранее, при пересечении областей наибольшим приоритетом будет пользоваться та область, которая в коде внутри тега указана первой
Следовательно, пример будет иметь такой вид:
Навигационная карта
Карта на сервере.
Отрывок из справочника: (http://www.webremeslo.ru/spravka/spravka.html) (атрибуты тега ):
usemap — изображение является навигационной картой на стороне клиента.
ismap — изображение является навигационной картой на сервере.
Непонятно? Тогда читаем..
С атрибутом usemap мы вроде бы разобрались.. Смотрите, пользователь (клиент) открыв Вашу страницу, одновременно со всем остальным содержанием, загружает на свою сторону как сам рисунок, так и навигационную карту к нему и всё это дело обрабатывается его браузером.
А вот атрибут ismap тега говорит браузеру о том, что к данному изображению на сервере, ну там где Вы выложили или собираетесь выложить свой сайт, есть навигационная карта. И теперь, когда посетитель (клиент) кликнет по какой либо области рисунка с таким атрибутом, браузер запомнит координаты этого клика и отправит их на сервер, где специальная программка обработает эти данные и перенаправит пользователя на тот адрес который указан в карте на сервере, в соответствии с полученными от браузера клиента координатами точки.
Пишется так:
Где адрес навигационной карты на каком либо сайте.. размещённом на том или ином сервере..
Всё равно непонятно? Если да, то тогда не стоит заморачивотся по этому поводу.. используйте usemap, на мой взгляд такое решение будет лучшим в большинстве случаев при использовании навигационных карт.
Полезные советы:
- Что бы без труда определить координаты той или иной точки на Вашей навигационной карте откройте рисунок графическим редактором тем же Paint к примеру.. там, когда будете двигать указателем по рисунку, увидите две меняющиеся цифры, это и есть координаты пикселя Х и У на данном рисунке. В Paint эта панелька расположена в нижней части экрана.
- При создании страницы с навигационной картой тег
всегда должен быть выше самой карты То есть писать вот так:
..можно, но не нужно.. потому что при загрузке страницы могут возникнуть проблемы, так как карта с разметкой уже загрузилась, а самого рисунка ещё нет..
- И ещё что касается загрузки..
В этом месте кода может быть всё что угодно длинный текст, таблицы, графика.. но всё же лучше здесь ничего не писать
А писать здесь, так как во время загрузки страницы, пользователь не дождавшись её окончания, может пытаться нажимать на кнопки указанные в навигационной карте которая к этому времени еще не загрузилась..
Глава 9
Списки
В этой главе пойдёт речь о списках, которые могут быть:
- неупорядоченные(маркированные)
- упорядоченные (нумерованные)
- и являться списком определений
Такое вот нестандартное начало главы.. зато теперь Вам понятно, что есть список в html.
Ну что ж давайте пройдёмся по нашему списку.
Неупорядоченные списки
Неупорядоченный список задаётся тегом
- . Любой список состоит из элементов, пунктов, каждый элемент в свою очередь задаётся тегом
- после которого собственно и идёт текст нужного нам пункта. Для тега
- закрывающий тег
необязателен.
Вместе данные теги приобретают следующий вид:
- Пункт первый..
- Пункт второй..
- Пункт третий..
Пример неупорядоченного списка:
неупорядоченный список
Купить и доставить домой:
- 2 кг. клубней картофеля
- 1 булку ржаного чёрного хлеба
- пачку макарон спагетти (длинные не менее 200мм. тонкие)
- 1 кг. шлифованного риса (сложно объяснить.. спросишь..)
- 1 дес. куриных яиц.
- 1 пачку 500г. Натрия двууглекислого (Сода)
Смотри ничего не перепутай.. целую..
Теги
- имеют атрибут type который присуждает элементу списка или же всему списку целиком определённый стиль.
Может иметь одно и трёх значений:
- disk- кружок, диск (по умолчанию)
o circle — полый круг
§ square — квадрат
Пример:
стили неупорядоченного списка
В этом списке каждый элемент имеет свой стиль:
- кружок, диск (по умолчанию)
- полый круг
- квадрат
А здесь стиль задан всему списку
- Пункт 1
- Пункт 2
- Пункт 3
Упорядоченные списки
Упорядоченный или нумерованный список задаётся тегом
- , так же как и в неупорядоченном списке, элемент списка присуждается тегом
- .
Построение кода полностью схоже с неупорядоченным списком, поэтому сразу пример:
упорядоченный список
Купить товары в следующем порядке:
- Водка
- Пиво
- Сырок (необязательно)
Жду!!!
А вот атрибут type в сочетании с упорядоченным списком может иметь следующие значения:
- А — Заглавные буквы
- а — Строчные буквы
- I — Заглавные римские цифры
- i — Строчные римские цифры
- 1 — Арабские цифры (по умолчанию)
Вот пример их применения:
Стили упорядоченного список
Арабские цифры
- Во-первых
- Во-вторых
Строчные буквы
- Во-первых
- Во-вторых
Заглавные буквы
- Во-первых
- Во-вторых
- В-третьих
Строчные римские цифры
- Во-первых
- Во-вторых
- В-третьих
- В-четвёртых
Заглавные римские цифры
- Во-первых
- Во-вторых
- В-третьих
- В-четвёртых
В упорядоченном списке есть ещё один атрибут start его числовое значение говорит о том с какого номера следует строить упорядоченный список.
Пример:
Начало упорядоченного списка
- Сразу переходим к двадцать четвёртому пункту!!
- Идём дальше
- И дальше
Аналогично можно стартовать при любом стиле упорядоченного списка
- Сразу переходим к восьмому пункту..
- Идём дальше
- И дальше
Списки определений
Со списком определений дело обстоит немного иначе, нежели чем с уже знакомыми списками. Задаётся данный вид списка тегом . Пункты списка определений размечаются тегом , а определения этих пунктов тегом .
Всё вместе пишется по следующей схеме:
Пример:
Список определений
Слово коса может иметь следующие определения:
сельскохозяйственный инструмент
хитрая девичья причёска
отмель реки
Слово ключ тоже имеет несколько значений:
гаечный
источник, родник
Собственно вот и вся премудрость..
Полезные советы:
Психология посетителя страницы.
- Не могу, не согласится с тем утверждением, что посетители страницы чаще просматривают документы, нежели чем вдумчиво читают их.. По-крайней мере так происходит практически всегда при первом визите посетителя на страничку. Первое на что обращает внимание пользователь просматривая какой либо документ это: заголовки в тексте, выделенные фрагменты текста, и списки. Умелое и ненавязчивое размещение таковых элементов залог того что посетитель окунётся в чтение Вашего документа более глубоко.
- Что касается списков.. следует понимать что: Маркированные перечни
- используются тогда, когда порядок следования пунктов не важен.. и делаются они для того чтобы изложенная информация воспринималась легче. А нумерованные списки
- наоборот, применяются тогда, когда важен именно порядок следования пунктов, например — когда список является изложением последовательности каких либо действий.
Глава 10
Meta теги
В первой главе этого учебника, об общем построении html документа, я говорил о том, что все html документы должны иметь вот такой шаблон кода:
— начало документа
— начало головы
— закрытие головы
— начало тела
— закрытие тела
— конец документа
Где между тегами указывается информация предназначенная для вывода на экран в нужном нам виде, а между тегами исключительно служебная информация предназначенная для поисковых систем и браузеров тех или иных пользователей. Так что же это за информация такая и для чего она нужна? Отвечу, планомерно и порционально в этой главе.
С тегом мы уже знакомы, с помощью него мы указываем имя документа в заголовке страницы. Теперь новый тег (закрывающего тега не требует) с помощью него мы и будем указывать эту самую служебную информацию на нашей страничке.
тег имеет следующие атрибуты:
- http-equiv — указывает браузеру как следует обработать основное содержание документа, точнее на основе каких данных.
- name — информационное имя. (применяется в паре с атрибутом content)
- content — информационное содержание, связанное с мета именем (name)
Теперь на примерах будем вникать в суть дела.
Кодировка символов и язык
Пример (очень нужный и важный):
Сначала расскажу, зачем необходима эта строка в заголовке html документа. Данная запись указывает браузеру кодировку, в которой была написана данная страница — формат документа и раскладку клавиатуры, в данном случае это кириллица для Windows. Если эту строку не писать в заголовке страницы, то есть большая вероятность что весь текст на Вашей странице отобразится в виде непонятных человеку иероглифов у разных пользователей тех или иных браузеров. Конечно, пользователь может применить к такому документу команду в браузере Вид-Кодировка-Кириллица, но он может не знать о данной функции, да и зачем утруждать человека данным действием.
Теперь разберём по слогам нашу запись:
Content=text/html; — а именно его текстом
Charset=Windows-1251 — документ для Windows — Кириллица, где 1251 кодировка раскладки клавиатуры, так например Английская клавиатура будет задаваться Charset=Windows-1252
В настоящее время продвинутые веб-мастера рекомендуют использовать кодировку UTF 8
То есть писать в голове документа вот так:
Пример:
В этой строчке говорится о том, что язык Language документа является русским Content=ru
Неправильная установка языка и раскладки клавиатуры может привести к печальным последствиям.
Информация о документе
Пример:
Данные метаописатели предназначены для заявления об авторских правах непосредственно в заголовке html кода, так name=author указывает имя автора страницы, а name=copyright авторское право (копирайт) в котором может указываться фамилия, имя, отчество автора сайта, название фирмы, бренда.. и т. д. Кроме того, включив в заголовок документа такое описание, Вы значительно упростите задачу поисковой машине при поиске Вашего сайта по имени автора, названию фирмы, бренду…
Пример:
Если хотите можете указать с помощью какого html редактора была написана данная страница.
Описание страницы и ключевые слова
Пример:
Description — краткое описание страницы. Данное описание частенько используется поисковыми системами для вывода в результатах поиска, по какому либо запросу, информации о сайте и его назначении.
Пример:
Keywords — ключевые слова веб-страницы, опять таки предназначены для поисковых машин.
Представьте, что Вы ищете в какой либо поисковой системе сайт с информацией о том, где можно продать те же рога и копыта Какие слова и фразы Вы будите вводить в строке Поиск? ну наверно что то типа: Где продать коровьи рога? или Реализовать копыта по выгодной цене Так вот если определить ключевые слова и так сказать предугадать мысли потенциального посетителя можно надеяться на то, что та или иная поисковая система выдаст ссылку на Ваш сайт в первых строчках результата поиска. Конечно ввод данного метоописателя не есть гарант того что именно Ваш сайт займет первые места в поиске по данным словам, но всё же не стоит им пренебрегать. Впрочем, оптимизация и раскрутка сайта это отдельная тема для разговора.
Помните, что описание description не должно превышать по длине более 200 символов, а ключевые слова keywords 1000 символов, иначе это может пагубно отразится при индексации Вашей страницы поисковыми системами.
Адрес
Пример:
Думаю понятно.. здесь указывается адрес Вашего почтового ящика Publisher-Email и адрес сайта Publisher-URL
Обновление страницы
Пример:
Если некая страница на Вашем сайте подразумевает постоянное обновление и/или дополнение информационным содержанием, то хорошо было бы включить данное описание в заголовок данной страницы. Такое введение позволит программе роботу своевременно посещать Ваш сайт и индексировать его содержание. В нашем примере мы заявили о том, что собираемся обновлять содержание на странице не менее одного раза в 15 дней, можете не сомневаться программа робот возьмет Ваши планы себе на заметку и будет приходить к Вам в гости раз в пятнадцать дней, для того чтобы проверить ничего ли у Вас не изменилось..
Время действия документа и кэш
Пример:
Для того чтобы ускорить загрузку страницы, а так же сэкономить трафик современные браузеры сохраняют посещаемые пользователем страницы в кэш (на жёсткий диск), и при повторном посещении загружают их не с сервера, а непосредственно с кэша. На самом деле такая функция хороша собой.. но есть одно но, дело в том что в браузере может отображаться уже устаревшая информация, какой либо страницы. Представьте, к примеру, Ваш сайт представляет собой некое периодическое новостное интернет издание, а пользователь получит, вместо самых свежих новостей, уже устаревшую информацию, ту которая хранится у него в кэше!! и не разобравшись в чем беда примет Ваш сайт за мертвый заброшенный и никем не обновляемый.
Для того чтобы принудительно заставить браузер загружать ту или иную страницу не с жёсткого диска, а с сервера необходим мета тег с данным синтаксисом, где указывается день недели, число месяц год время (чч:мм:сс) и часовой пояс(GMT+03:00 — время Московское + три часа). День недели и время дня можно не указывать. Теперь при чтении страницы браузером страница будет грузится с сервера, если указанная дата и время настало или просрочено, и напротив из кэша если указанное время еще не наступило.
Ниже на всякий случай приведены таблицы сокращений от Английских слов на месяцы и дни недели
| Месяцы: | От Английского: | Сокращения: |
| Январь | January | Jan |
| Февраль | February | Feb |
| Март | March | Mar |
| Апрель | April | Apr |
| Май | May | May |
| Июнь | June | Jun |
| Июль | July | Jul |
| Август | August | Aug |
| Сентябрь | September | Sep |
| Октябрь | October | Oct |
| Ноябрь | November | Nov |
| Декабрь | December | Dec |
Атрибуту content можно присвоить значение 0 в этом случае страница всегда будет загружаться с сервера.
И еще.. некоторые поисковые роботы могут отказаться индексировать документ с заведомо устаревшей датой. — не искушайте судьбу..
Пример:
А такая запись вовсе запретит браузеру кэшировать данную страницу.
Пример:
Данный мета тег предназначен для подачи поисковому роботу той или иной команды.
Список возможных команд роботу:
- Index — индексировать страницу
- Noindex — не индексировать страницу
- Follow — прослеживать гиперссылки на странице
- Nofollow — не прослеживать гиперссылки на странице
- All — индексировать страницу и прослеживать гиперссылки на странице (по умолчанию)
- None — не индексировать страницу и не прослеживать гиперссылки на странице
Автоматический переход на другую страницу
Пример:
Если вдруг по каким либо причинам Вы задумаете поменять URL адрес Вашего сайта то хорошо было бы на старом месте оставить страницу вроде этой:
Переадресация
Адрес сайта был изменен, через 10 секунд Ваш браузер будет автоматически перенаправлен по новому адресу:
http://www.mysite.ru/
Нажмите здесь для того чтобы выполнить переход немедленно.
Приносим извинения за доставленные неудобства.
Разберём и осмыслим строчку из примера:
meta http-equiv=Refresh — Refresh (восстановление) указывает браузеру что данную страницу необходимо обновить
content=10; — обновить через заданное количество секунд (в нашем случае десять)
URL=http://www.mysite/index.html- адрес новой/другой страницы на которую следует перейти.
Пример:
А вот если в заголовке Refresh URL адрес упустить, как показано в примере, то тогда браузер будет постоянно через каждые 30 секунд (ну или не 30.. сколько пропишите через столько и будет..) обновлять содержимое данной страницы.
Такой метод широко используется в новостных лентах, где информация идет так сказать потоком и требует постоянного обновления.
Эффекты при переходе по ссылке
Пример:
Данные заголовки создают визуальные эффекты при переходе с одной страницы на другую.
- Page-Enter — Эффект появления страницы
- Page- Exit — Эффект исчезновения страницы
В которых:
- Duration — время действия эффекта в секундах
- Transition — Один из номеров предлагаемых эффектов (от 0 до 23) перечисленных в таблице:
| Номер | Описание эффекта | Номер | Описание эффекта |
| Прямоугольники внутрь | Растворение | ||
| Прямоугольники наружу | Вертикальная панорама внутрь | ||
| Круг внутрь | Вертикальная панорама наружу | ||
| Круг наружу | Горизонтальная панорама внутрь | ||
| Наплыв наверх | Горизонтальная панорама наружу | ||
| Наплыв вниз | Уголки влево — вниз | ||
| Наплыв вправо | Уголки влево — вверх | ||
| Наплыв влево | Уголки вправо – вниз | ||
| Вертикальные жалюзи | Уголки вправо – вверх | ||
| Горизонтальные жалюзи | Случайные горизонтальные полосы | ||
| Шажки горизонтальные | Случайные вертикальные полосы | ||
| Шажки вертикальные | Случайный выбор эффекта |
Пример:
Файл page1.html
Эффекты перехода страниц
На заметку:
Эффекты перехода с одной страницы на другую работают не во всех браузерах.
Нажмите на Перейти чтобы перейти к следующей странице
и оценить эффект перехода от одной странице к другой.
Перейти
Файл page2.html
