DVKuklin.ru

Учебник по программированию.

Создание сайтов. Первые шаги.

 

 

Учебник по программированию. Первые шаги. Язык программирования PascalABC.NET.
Предыдущий параграф Назад в содержание Следующий параграф

§7. Тэги !doctype, title. Атрибуты тэга body. Фреймы.

!doctype

Любой html документ должен начинаться с тэга !doctype. Этот тэг содержит в себе информацию о версии языка html, на котором этот документ написан. Дело в том, что версий языка html на данный момент времени написано уже достаточно много, поэтому если не сообщить браузеру какая именно версия была использована при написании документа, то могут возникнуть ошибки при отображении.

До сих пор все наши документы не имели тэга !doctype, тем не менее вполне корректно отображались. Дело в том, что браузер отображает содержимое документа и без этого тэга, а так как мы использовали стандартные тэги, то ошибок и не было. Тем не менее, в профессиональной деятельности вам придётся включать этот тэг в свои документы.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

В данном примере тэг !doctype говорит браузеру, что документ написан на языке html версии 3.2. Кроме этого он содержит ещё некоторую информацию. В рамках данного учебника мы не будем вдаваться в подробности и ограничимся следующим видом тэга !doctype:

<!DOCTYPE html>

В таком виде тэг говорит браузеру, что документ написан на языке html пятой версии. Далее все наши html документы должны содержать в первой строчке именно такой тэг !doctype. Когда вы приступите к профессиональной деятельности, то вы для себя решите на какой версии языка писать и изучите соответствующую спецификацию. Соответственно и первая строка ваших документов изменится.

title.

Тэг title (заголовок) находится в тэге head и содержит в себе строку, которая будет отображаться в качестве заголовка окна браузера. Если тэг title не включён в документ, то в качестве заголовка окна выводится название файла документа. Если вы внимательно посмотрите на все предыдущие примеры, то вы в этом убедитесь.

Далее пример использования данного тэга:

<!doctype html> <html> <head> <title>Картинка</title> </head> <body> <img src = "Img.bmp"> </body> </html>
Пример использования тэга title.

Красной линией выделено то место, где находится заголовок окна документа. Как видите, он соответствует тому тексту, который мы заключили в тэг title.

Примечание: далее все наши документы должны иметь такую же структуру, как у предыдущего примера. Однако в примерах может быть указана только часть документа, относящаяся к теме. Тем не менее будет подразумеваться, что тэги !doctype, html, head и body присутствуют.

Атрибуты тэга body

.

С тэгом body мы уже знакомы. Теперь пришло время познакомиться с его атрибутами. Далее они будут приведены в таблице без примеров их использования. Научиться ими пользоваться вы должны самостоятельно.

Атрибут Описание Значение
text Цвет текста в документе цвет
link Цвет ссылки, которую ещё не посетили, и которую не нажали в данный момент цвет
alink Цвет ссылки на которую нажали в данный момент цвет
vlink Цвет ссылки, которую уже посетили цвет
bgcolor Цвет фона документа цвет
background Фоновый рисунок документа. адрес файла рисунка.
bgproperties Если данный атрибут установить, то фоновый рисунок не будет прокручиваться вместе с окном браузера. fixed
bottommargin Отступ от нижнего, левого, правого и верхнего края окна браузера соответственно до того, что содержится в документе. целое число в пикселях
leftmargin
rightmargin
topmargin

Фреймы.

Фрейм – определённая область окна браузера, в которую загружается отдельный html документ. При использовании фреймов окно браузера делится на области, в каждую из которых загружается свой отдельный документ. Таким образом, к примеру, в одном фрейме может находиться навигация, в другом – логотип и название сайта, в третьем – само содержание интернет страницы.

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

При создании интернет страницы с фреймами вместо тэга body (вместо тела документа) используется тэг frameset (открывающий и закрывающий). В этот тэг помещаются тэги frame (без закрывающих), которые и являются фреймами и содержат в себе информацию о тех документах, которые в них должны быть загружены. Тэг frameset при этом обязательно должен содержать в себе информацию о том, каким образом относительно друг друга расположены фреймы.

Пример:

1.html -------------------------------- <!doctype html> <html> <head> <title>Документ 1</title> </head> <body> <h1>Документ "1.html"</h1> </body> </html> _______________________________ 2.html ------------------------------- <!doctype html> <html> <head> <title>Документ 2</title> </head> <body> <h1>Документ "2.html"</h1> </body> </html> _______________________________ index.html ------------------------------- <!doctype html> <html> <head> <title>Документ с фреймами</title> </head> <frameset rows = "50%,50%"> <frame src = "1.html"> <frame src = "2.html"> </frameset> </html>
Пример двух фреймов.

Внимательно изучите код документа «index.html». Информация об адресах документов, которые должны быть загружены во фреймы, содержится в атрибуте src тега frame. Заметьте, он такой же как и у тэга img.

Информация о расположении фреймов относительно друг друга (в данном примере) содержится в атрибуте rows тэга frameset. Всего для задания такой информации существует два атрибута:

rows – фреймы располагаются относительно друг друга строками;

cols – фреймы располагаются относительно друг друга колонками.

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

Помимо чисел может быть использован единожды символ *. Он означает всё оставшееся пространство.

В следующем примере в документе «index.html» заменим атрибут rows на cols таким образом, что документ 1 будет занимать по ширине 70 пикселей, а документ 2 – всё оставшееся пространство:

………………………………… <frameset cols = "70,*" > …………………………………
Пример двух фреймов.

Примечание: здесь и далее если необходимо привести код, который почти полностью соответствует коду предыдущего примера, то неизменённый код будет заменён на строки с точками, а строки с изменённым кодом будут приведены полностью.

Примечание: если указать оба атрибута rows и cols, то приоритет будет у атрибута cols, и фреймы будут расположены в виде колонок.

Возможно создание и более сложной структуры фреймов. Для этого необходимо создать вложенный frameset.

Пример:

<!doctype html> <html> <head> <title>Сайт с вложенным frameset</title> </head> <frameset rows = "100,*" > <frame src = "Frame_1.html"> <frameset cols = "40%,*"> <frame src = "Frame_2.html"> <frame src = "Frame_3.html"> </frameset> </frameset> </html>
Пример трёх фреймов.

Для примера на месте третьего фрейма создадим два новых фрейма, а внизу добавим ещё один:

................................ <frameset rows = "100,*,100" > <frame src = "Frame_1.html"> <frameset cols = "40%,*"> <frame src = "Frame_2.html"> <frameset rows = "50%,*"> <frame src = "Frame_3.html"> <frame src = "Frame_4.html"> </frameset> </frameset> <frame src = "Frame_5.html"> </frameset> ................................
Пример различного расположения фреймов.

Страницы, загруженные во фреймы одного и того же окна браузера, могут друг с другом взаимодействовать посредством ссылок. Т.е. по ссылке из одного фрейма может быть загружена страница в другом. Для этого у каждого фрейма должно быть своё уникальное имя, которое присваивается атрибуту name тэга frame:

<frame src = "Doc_1.html" Name = "MainText">

Это уникальное имя необходимо указать в тэге a или area соответствующей ссылки, присвоив его атрибуту target:

<a href = "Doc_1.html" target = "MainText">Doc_1</a>

Далее пример полноценной страницы, размеченной с помощью фреймов:

Logotype.html ---------------------------------- <!doctype html> <html> <head> <title>Логотип</title> </head> <body> <h1 align = "center">Логотип, название сайта.</h1> </body> </html> __________________________________ Doc_1.html ---------------------------------- <!doctype html> <html> <head> <title>Документ 1</title> </head> <body> <h1>Документ 1</h1> </body> </html> ____________________________________ Doc_2.html ------------------------------------ <!doctype html> <html> <head> <title>Документ 2</title> </head> <body> <h1>Документ 2</h1> </body> </html> Content.html ----------------------------------------- <!doctype html> <html> <head> <title>Содержание</title> </head> <body> Содержание.<p> <a href = "Doc_1.html" target = "MainText">Doc_1</a><br> <a href = "Doc_2.html" target = "MainText"> Doc_2</a> </body> </html> ________________________________________ MainText.html ----------------------------------------- <!doctype html> <html> <head> <title>Основной текст</title> </head> <body> <h1>Основной текст</h1> </body> </html> _________________________________________ index.html ----------------------------------------- <!doctype html> <html> <head> <title>Сайт из фреймов</title> </head> <frameset rows = "100,*" > <frame src = "Logotype.html"> <frameset cols = "20%,*,15%"> <frame src = "Content.html"> <frame src = "Doc_1.html" Name = "MainText"> </frameset> </frameset> </html>
Пример разметки сайта с помощью фреймов.

Примечание: при решении задач предыдущего параграфа у вас должен был получиться сайт. Размечен он был с помощью таблиц. В предыдущем примере точно такая же разметка произведена с помощью фреймов.

У тэгов frameset и frame, помимо уже изученных атрибутов, есть ещё некоторые. Они представлены далее в таблице:

Атрибут Описание Значение
Атрибуты тэга frameset
border Толщина рамки между фреймами. Если атрибут равен нулю, то рамка не отображается. целое число
bordercolor Цвет рамки между фреймами. цвет
Атрибуты тэга frameset
noresize Если атрибут включён в тэг, то размер фрейма с помощью мыши пользователь изменить не сможет. Значений нет
scrolling Полосы прокрутки появляются автоматически при необходимости. Установлен по умолчанию. auto
Полосы прокрутки не появляются. no
Полосы прокрутки появляются в любом случае yes

Примечание: при решении задач предыдущего параграфа вы

Примечание: при решении задач предыдущего параграфа вы сделали сайт, размеченный с помощью таблиц. В данном параграфе вам будет предложено в задаче переделать этот же сайт, разметив его с помощью фреймов. Думаю, решив это задание, вы ощутите разницу в подходах и согласитесь, что с фреймами работать разработчику удобнее. К примеру, при работе с фреймами, если добавляется новая страница, то нужно будет отредактировать содержание только в одном документе, а не во всех. То же самое и с логотипом, если он будет изменён, то так же нужно будет отредактировать только один документ.

Что касается пользователя, то для него, если он зайдёт на главную страницу, то никакого различия не будет, размечен сайт таблицами или фреймами.

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

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


Примечание: на этом изучение html мы заканчиваем. На данном этапе сведений, приведённых в учебнике, о языке html вполне достаточно, что бы двигаться дальше. Не все тэги и атрибуты языка были рассмотрены, потому что данный учебник не является справочником, и его предназначение помочь сделать «первые шаги». Некоторые тэги и атрибуты так и останутся без внимания, однако некоторые будут изучены далее при изучении CSS и JavaScript.

Задачи.

1. Создать примеры использования каждого атрибута тэга body.

2.При решении задач предыдущего параграфа у вас должен был получиться полноценный сайт. Доработать этот сайт включив в него тэги !doctype, html, head, title и body. Настроить по своему вкусу атрибуты тэга body, при этом стиль оформления всех страниц должен получиться одинаковым.

3. Поэкспериментировать с атрибутами тэга frameset и frame, представленными в таблице. Создать пример использования каждого из них.

4. Переделать ваш сайт, используя фреймы. Соответственно у вас должны получиться отдельные документы для каждой главы, для логотипа с названием сайта и для содержания.


Предыдущий параграф Назад в содержание Следующий параграф