В последнем отечественном примере первое, что кидается в глаза, это целая куча полос прокруток, каковые стоят где нужно и не нужно.. Давайте от них избавимся, ну возможно и покинуть кое где.. Делается это при помощи атрибута scrolling — тега , он может иметь одно из трёх значений:
- no- ни при каких обстоятельствах не показывать полосу прокрутки,
- yes- постоянно показывать,
- auto- показывать в том случае если она нужна.
Пример:
фреймы
Поля фреймов или иначе расстояние от границ фрейма до текста либо картины, как в нашем случае, задаются в пикселях при помощи атрибутов marginwidth и marginheight тега
Пример:
фреймы
Поболтаем мало о рамках около отечественных фреймов.
Если Вы обратили внимание, то в последнем примере наведя курсор на границу фрейма он, курсор то бишь, получает второй вид (захватить и переместить) и сейчас эту границу возможно перетащить в какую или сторону удерживая левой кнопкой мыши. Время от времени такая мобильность границ фреймов играется на руку веб-мастеру, но чаще однако мешает.. Чтобы запретить пользователю играться с размерами окон для тега придумали атрибут noresize
Пример:
фреймы
А вот в далеком прошлом нам привычный атрибут border задаёт ширину в пикселях этих самых рамок между фрёймами.. пишется он в тега . Как и раньше значение border=0 вовсе избавит нас от рамок.
Пример:
фреймы
ссылки и Фреймы.
Настало время оживить отечественный сайт ссылками, да вот беда, знакомая нам обычная ссылка Бобы в горшочке по-итальянски откроет этот документ в том же фрейме где она и находится, в нашем случае конкретно в фрейме с содержанием, а само содержание в момент перехода по данной ссылки уйдёт в небытие.. имеете возможность посмотреть на корявый пример.. кликнете в нём на любую ссылку.. Что бы впредь для того чтобы не происходило, нужно показывать браузеру в каком фрейме направляться открывать нужный нам документ, ну в случае, если само собой разумеется Вам и в правду не требуется открывать его в этом же фрейме.
Помнится мы уже знакомились, в главе посвящённой ссылкам, с атрибутами name- имя и target- цель, используются они кроме этого и при работе с фреймами механизм мало поменян а так практически также самое. в первую очередь фрейму в котором мы желали бы открывать какие конкретно или документы нужно присвоить личное имя.
пишется так:
имя возможно придумать любое.. основное его не забыть..
А сейчас в документе с ссылками (в нашем случае это файл menu.html)нужно указать цель другими словами фактически выяснить в каком окне стоит открывать тот либо другой документ
Пишется так:
Бобы в горшочке по-итальянски
Ну я думаю Вам уже не следует растолковывать, что перед тем как ссылаться на какие конкретно или документы, их нужно создать.. в моём случае файлы (рецепты) имеют имена text.html, text1.html, text2.html…
Посмотрите пример:
Файл index.html
фреймы
Файл menu.html
фреймы
Меню:
Суп из шампиньонов
Бобы в горшочке по-итальянски
Австралийский летний салат
… … …
Так же как и раньше документ возможно открыть в отдельном окне. Напомню, пишется так:
Бобы в горшочке по-итальянски
Либо же присвоив атрибуту target значение _top открыть его в этом же окне браузера, но на целый экран.. обнулив наряду с этим всё что бы в том месте не пребывало.. пишется так:
Бобы в горшочке по-итальянски
Таковой вот сайтик оказался.. само собой разумеется над ним ещё трудиться и трудиться.. к тому же по моёй задумке он будет иметь пара иную структуру в плане навигации по сайту, в нем будет ёщё целая куча страниц, прекрасное меню, но что касается фреймовой структуры, думаю она останется прошлой..
Плавающий фрейм
Время от времени в страницу содержащую в себе не фреймовую структуру нужно в отдельном окне засунуть второй HTML документ либо кроме того последовательность таковых документов. Для исполнения данной цели существует тег — так называемый плавающий фрейм.
Этот тег имеет последовательность атрибутов:
src — необходимый атрибут, показывающий путь к открываемой странице
width — ширина плавающего фрейма в пикселях либо процентах
height — высота плавающего фрейма
scrolling — показ полосы прокрутки
- no — ни при каких обстоятельствах не показывать полосу прокрутки,
- yes — постоянно показывать,
- auto — показывать в том случае если она нужна.
align — выравнивание пваюшего фрейма
- left — слева
- right — справа
- top — выше
- bottom — ниже
frameborder — наличие рамки около плавающего фрейма
- 1 — включить рамку
- 0- отключить рамку
Всё совместно пишется так:
Пример документа с плавающим фреймом:
Плавающий фрейм
Плавающий фрейм
В эту страницу введён так называемый плавающий фрейм.
В отдельном окне он открывает для показа второй документ html.
… … …
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 редактора была написана эта страница.