Создание Web-страницы с помощью языка HTML. Web-страницы и создание web-страниц в FrontPage Создание web страницы с помощью языка html
Перед тем, как мы начнём наше путешествие по урокам создания сайтов на HTML и CSS, важно понимать различия между двумя языками, синтаксис каждого языка и некоторую основную терминологию.
Что такое HTML и CSS?
HTML (HyperText Markup Language, язык разметки гипертекста) задаёт структуру содержимого и его смысл, определяя такой контент как, к примеру, заголовки, абзацы или изображения. CSS (Cascading Style Sheets) или каскадные таблицы стилей - это язык презентаций созданный для оформления внешнего вида контента, использующий, например, шрифты или цвета.
Эти два языка - HTML и CSS независимы друг от друга и должны таковыми и оставаться. CSS не должен быть написан внутри HTML-документа и наоборот. Как правило, HTML всегда будет представлять содержимое, а CSS всегда будет определять его оформление.
При таком понимании разницы между HTML и CSS давайте погрузимся в HTML более подробно.
Основные термины HTML
Перед началом работы с HTML вы, вероятно, столкнётесь с новыми и часто странными терминами. Со временем вы ознакомитесь со всеми ними подробнее, но сейчас вы должны начать с трёх основных терминов HTML - элементы, теги и атрибуты.
Элементы
Элементы указывают, как определять структуру и содержимое объектов на странице. Некоторые из часто используемых элементов включают в себя несколько уровней заголовков (определены как элементы с
до
) и абзацев (определены как
); в список можно включить элементы
, Элементы идентифицируются с помощью угловых скобок <>, окружающих имя элемента. Таким образом, элемент будет выглядеть так: Добавление угловые скобок < и > вокруг элемента создаёт то, что известно как тег. Теги наиболее часто встречаются в парах открывающих и закрывающих тегов. Открывающий тег отмечает начало элемента. Он состоит из символа <, затем идёт имя элемента и завершается символом >; например, Закрывающий тег отмечает конец элемента. Он состоит из символа < с последующей косой чертой и именем элемента и завершается символом >; например, Содержимое, которое находится между открывающим и закрывающим тегами, является содержимым этого элемента. Ссылка, к примеру, будет иметь открывающий тег
и закрывающий тег
. Что находится между этими двумя тегами будет содержимым ссылки. Так, теги ссылок будут выглядеть примерно так: Атрибуты являются свойствами, применяемыми для предоставления дополнительной информации об элементе. Наиболее распространённые атрибуты включают в себя атрибут id
, который идентифицирует элемент; атрибут class
, который классифицирует элемент; атрибут src
, который определяет источник встраиваемого содержимого; и атрибут href
, который указывает ссылку на связанный ресурс. Атрибуты определяются в открывающем теге после имени элемента. В общем, атрибуты включают в себя имя и значение. Формат для этих атрибутов состоит из имени атрибута со знаком равенства за ним, а затем в кавычках идёт значение атрибута. Например, элемент
с атрибутом href
будет выглядеть следующим образом: Shay Howe
Данный код будет отображать текст «Shay Howe» на веб-странице и при щелчке на этот текст ведёт пользователя на http://shayhowe.com. Элемент ссылки объявлен с помощью открывающего тега
и закрывающего тега
охватывающих текст, а также атрибута и значения адреса ссылки объявленной через href="http://shayhowe.com"
в открывающем теге. Рис. 1.01. Синтаксис HTML в виде схемы включает элемент, атрибут и тег Теперь, когда вы знаете что такое элементы HTML, теги и атрибуты, давайте взглянем воедино на нашу первую веб-страницу. Если что-то выглядит здесь новым, не беспокойтесь - мы расшифруем всё по ходу. HTML-документы представляют собой простые текстовые документы, сохранённые с расширением.html, а не.txt. Чтобы начать писать HTML вначале нужен текстовый редактор, который вам удобен в использовании. К сожалению, сюда не входит Microsoft Word или Pages, поскольку это сложные редакторы. Двумя наиболее популярными текстовыми редакторами для написания HTML и CSS являются Dreamweaver и Sublime Text. Бесплатные альтернативы также Notepad++ для Windows и TextWrangler для Mac. Все HTML-документы содержат обязательную структуру, которая включает следующие декларации и элементы:
,
, Объявление типа документа или
находится в самом начале HTML-документа и сообщает браузерам, какая версия HTML применяется. Поскольку мы будем использовать последнюю версию HTML, наш тип документа будет просто
. После этого идёт элемент
означающий начало документа. Внутри
элемент Всё видимое содержимое веб-страницы будет находиться в элементе
Это веб-страница. Этот код показывает документ, начиная с объявления типа документа,
, затем сразу идёт элемент
. Внутри
идут элементы Когда элемент находится внутри другого элемента, известный также как вложенный, хорошей идеей будет добавить к нему отступ, чтобы сохранить структуру документа хорошо организованной и читабельной. В предыдущем коде оба элемента В предыдущем примере элемент
был единственным тегом, который не включал закрывающий тег. Не переживайте, это было сделано намеренно. Не все элементы состоят из открывающих и закрывающих тегов. Некоторые элементы просто получают содержимое или поведение через атрибуты в пределах одного тега.
является одним из таких элементов. Содержимое элемента
в примере присваивается с помощью атрибута charset
и значения. К другим типичным самозакрывающимся элементам относятся: Приведённая структура, сделанная с помощью объявления типа документа
и элементов
, Независимо от того, насколько аккуратно мы пишем наш код, ошибки неизбежны. К счастью, при написании HTML и CSS у нас есть валидаторы для проверки нашей работы. W3C предлагает валидаторы HTML и CSS , которые сканируют код на ошибки. Проверка нашего кода не только помогает правильно отображать его во всех браузерах, но и помогает обучению передовому опыту при написании кода. В качестве веб-дизайнеров и фронтенд-разработчиков мы можем позволить себе роскошь посещать ряд замечательных конференций, посвящённых нашему ремеслу. Мы собираемся организовать собственную конференцию Styles Conference и создать для неё сайт на протяжении следующих уроков. Вот так! Давайте переключимся немного, отойдя от HTML и взглянем на CSS. Помните, HTML определяет содержимое и структуру наших веб-страниц, в то время как CSS определяет их визуальный стиль и внешний вид. В дополнение к терминам HTML есть и несколько основных терминов CSS, с которыми вам нужно будет ознакомиться. Эти термины включают селекторы, свойства и значения. Как и с терминологией HTML, чем больше вы работаете с CSS, тем больше эти термины становятся вашей второй натурой. При добавлении элементов на веб-страницу они могут быть оформлены с помощью CSS. Селектор определяет, на какой именно элемент или элементы в HTML нацелиться и применить к ним стили (такие как цвет, размер и положение). Селекторы могут включать в себя комбинацию различных показателей для выбора уникальных элементов, в зависимости от того, насколько конкретными мы желаем быть. Например, мы хотим выбрать каждый абзац на странице или выбрать только один конкретный абзац. Селекторы, как правило, связаны со значением атрибута, вроде значения id
или class
или именем элемента, вроде В CSS селекторы сочетаются с фигурными скобками {}, которые охватывают стили, применяемые к выбранному элементу. Этот селектор нацелен на все элементы P { ... }
Как только элемент выбран, свойство определяет стили, которые будут к нему применены. Имена свойств идут после селектора, внутри фигурных скобок {} и непосредственно перед двоеточием. Существует множество свойств, которые мы можем использовать, такие как background
, color
, font-size
, height
и width
и другие часто добавляемые свойства. В следующем коде мы определяем свойства color
и font-size
, применяемые ко всем элементам P {
color: ...;
font-size: ...;
}
Пока мы только выбрали элемент через селектор и определили, какой стиль через свойства мы хотели бы к нему применить. Теперь мы можем задать поведение этого свойства через значение. Значения могут быть определены как текст между двоеточием и точкой с запятой. Ниже мы выбираем все элементы И устанавливаем значение свойства color
как orange
, а значение свойства font-size
как 16 пикселей. P {
color: orange;
font-size: 16px;
}
Для проверки, в CSS наш набор правил начинается с селектора, затем сразу же идут фигурные скобки. В этих фигурных скобках располагаются объявления, состоящие из пар свойств и значений. Каждое объявление начинается со свойства, за которым следует двоеточие, значение свойства и, наконец, точка с запятой. Распространённой практикой является сдвиг пары свойств и значений внутри фигурных скобок. Как и с HTML, отступы помогают держать наш код организованным и понятным. Рис. 1.03. Структура синтаксиса CSS включает селектор, свойства и значения Знание нескольких основных терминов и общего синтаксиса CSS - это отличный старт, но у нас есть еще несколько пунктов для изучения, прежде чем мы прыгнем в глубину. В частности, мы должны внимательнее рассмотреть, как селекторы работают в CSS. Селекторы, как уже упоминалось ранее, указывают, какие элементы HTML будут стилизованы. Важно полностью понимать как использовать селекторы и как они действуют. Первым шагом должно стать знакомство с различными типами селекторов. Мы начнём с самых основных селекторов: селекторы типа, классы и идентификаторы. Селекторы типа нацелены на элементы по их типу. Например, если мы хотим ориентироваться на все элементы Div { ... }
Классы позволяют выбрать элемент на основе значения атрибута class
. Селекторы классов немного более конкретны, чем селекторы типа, так как они выбирают определённую группу элементов, а не все элементы одного типа. Классы позволяют применять одинаковые стили сразу к разным элементам, используя то же значение атрибута class
для нескольких элементов. В CSS классы обозначаются с точкой впереди, за которой следует значение атрибута класса. Ниже селектор класса выбирает все элементы, содержащие значение awesome атрибута class
, включая элементы Awesome { ... }
Идентификаторы ещё точнее, чем классы, так как они нацелены только на один уникальный элемент за раз. Подобно тому, как селекторы классов используют значение атрибута class
, идентификаторы используют значение атрибута id
в качестве селектора. Независимо от типа отображаемого элемента, значение атрибута id
может быть использовано только один раз на странице. Если id
присутствуют, то они должны быть зарезервированы для важных элементов. В CSS идентификаторы обозначаются с символом решётки впереди, после чего идёт значение атрибута id
. Здесь идентификатор выберет только элемент, содержащий атрибут id
со значением shayhowe
. #shayhowe { ... }
Селекторы чрезвычайно мощная штука и описанные выше относятся к наиболее распространённым селекторам, которые нам попадаются. Эти селекторы только начало. Существует много продвинутых селекторов и они легко доступны. Когда освоитесь с ними, не бойтесь посмотреть и некоторые более прогрессивные. Ладно, начинаем собирать всё вместе. Мы добавляем элементы на страницу внутри нашего HTML, затем можем выбрать эти элементы и применить к ним стили с помощью CSS. Теперь давайте соединим точки между HTML и CSS, чтобы эти два языка работали вместе. Чтобы заставить наш CSS говорить с нашим HTML мы должны указать на CSS-файл из HTML. Хорошей практикой является включение всех наших стилей в одном внешнем файле, на который есть указатель внутри элемента Другие варианты подключения CSS включают в себя использование внутренних и встроенных стилей. Вы можете встретить эти варианты в реальности, но они, как правило, не одобряются, так как делают обновление сайтов громоздким и неповоротливым. Для создания нашей внешней таблицы стилей мы снова хотим использовать выбранный текстовый редактор, чтобы создать новый текстовый файл с расширением.css. Наш CSS-файл должен быть сохранён в той же папке или подпапке, где находится и наш HTML-файл. Внутри элемента В следующем примере HTML-документа элемент Чтобы CSS отображался правильно, значение пути атрибута href
должно напрямую совпадать с тем, где сохранён CSS-файл. В предыдущем примере файл main.css хранится в том же месте, что и HTML-файл, известном также как корневая папка. Если CSS-файл располагается в подпапке, то значение атрибута href
должно, соответственно, соотноситься с этим путём. Например, если наш файл main.css был сохранён в подпапке с именем stylesheets, то значеним атрибута href
будет stylesheets/main.css
. Здесь используется косая черта (или слэш), чтобы указать перемещение в подпапку. На данный момент наши страницы начинают оживать, медленно, но верно. Мы пока не вникали в CSS слишком глубоко, но вы, возможно, заметили, что у некоторых элементов есть стили, которые мы не объявляли в нашем CSS. Это браузер навязывает свои собственные предпочтительные стили для этих элементов. К счастью, мы можем переписать эти стили достаточно легко, что мы и сделаем дальше с помощью сброса CSS. Каждый браузер имеет свои собственные стили по умолчанию для различных элементов. То, как Google Chrome отображает заголовки, абзацы, списки и так далее, может отличаться от того, как это делает Internet Explorer. Для обеспечения совместимости с разными браузерами стал широко использоваться сброс CSS. Сброс CSS берёт все основные элементы HTML с заданным стилем и обеспечивает единый стиль для всех браузеров. Эти сбросы обычно включают в себя удаление размеров, отступов, полей или дополнительные стили понижающие эти значения. Поскольку каскадирование CSS работает сверху вниз (скоро об этом узнаете) - наш сброс должен быть в самом верху нашего стиля. Это гарантирует, что эти стили прочитаются первыми и все разные браузеры станут работать с общей точки отсчёта. Есть куча разных сбросов CSS доступных для применения, у всех них есть свои сильные стороны. Один из самых популярных от Эрика Мейера , его сброс CSS адаптирован для включения новых элементов HTML5. Если вы чувствуете себя немного авантюристом, есть также Normalize.css , созданный Николасом Галлахером. Normalize.css фокусируется не на использовании жёсткого сброса для всех основных элементов, но вместо этого на установлении общих стилей для этих элементов. Это требует более глубокого понимания CSS, а также знания того, что вы хотели бы получить от стилей. Как упоминалось ранее, разные браузеры отображают элементы по-своему. Важно признать значение кроссбраузерности и тестирования. Сайты не должны выглядеть исключительно одинаково во всех браузерах, но должны быть близки. Какие браузеры вы хотите поддерживать и в какой степени - это решение вы должны будете сделать на основе того, что лучше для вашего сайта. Существует несколько вещей, на которые следует обращать внимание при написании CSS. Хорошей новостью является то, что это всё по силам и нужно немного терпения чтобы это освоить. Вернёмся назад, где мы в последний раз остановились на нашем сайте конференции и посмотрим, как мы можем добавить немного CSS. Просматривая файл index.html в браузере мы можем видеть, что элементы Уже содержат стиль по умолчанию. В частности, у них задан уникальный размер шрифта и пространство вокруг них. Используя сброс Эрика Мейера мы можем смягчить эти стили, что позволит каждому из них начинать с одинаковой базы. Для этого загляните на его сайт , скопируйте код и вставьте его в верхней части нашего файла main.css. /* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
} Мы также включим ссылку на наш файл main.css используя атрибут href
. Помните, наш файл main.css сохранён в папке stylesheets, который находится внутри папки assets. Таким образом, значение атрибута href
, который является путём к нашему файлу main.css, должно быть assets/stylesheets/main.css
. Время для проверки нашей работы и просмотра, как уживаются вместе наши HTML и CSS. Открытие файла index.html (или обновление страницы, если она уже открыта) в браузере должно показать немного другой результат, чем раньше. Рис. 1.04. Наш сайт Styles Conference со сбросом CSS Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент. Итак, всё хорошо! Мы сделали несколько больших шагов в этом уроке. Подумать только, теперь вы знаете основы HTML и CSS. Поскольку мы продолжим и вы потратите больше времени на написание HTML и CSS, вам станет гораздо комфортнее работать с этими двумя языками. Напомним, что мы рассмотрели следующее: Теперь давайте поближе рассмотрим HTML и познакомимся немного с семантикой. Web-страницы или гипертекстовые документы (html-документы) - это текстовые файлы, размеченные тегами (tags) с помощью языка HTML (HyperText Markup Language). HTML не является языком программирования, он является языком разметки или средством форматирования гипертекста. Для разметки документа используются теги. Теги заключаются в угловые скобки. В основном теги являются парными, т.е. существуют открывающий и закрывающий теги. Язык разметки HTML позволяет форматировать текст веб страницы, размещать на ней графические объекты, рисунки, вставлять звукозапись и различные мультимедийные элементы, а так же скрипты (JavaScript, VBScript), создавать гипертекстовые ссылки. Веб-страница начинается и заканчивается парными тегами и . Между этими тегами размещаются парные теги Затем следуют теги Например, если в редакторе Блокнот или Notepad++ ввести текст, размеченный тегами: Веб-страницы (гипертекстовые документы) - это файлы, которые имеют уникальный адрес и отображаются браузерами. WWW-страницы могут быть: Статические страницы - это статические файлы (набор текста, таблиц, рисунков и т.д.), которые создается с помощью языка разметки HTML и имеет расширение.html или.htm. Динамические веб-страницы - это веб-страницы, сгенерированные или сформированные (созданные) в процессе исполнения запроса пользователя. Эти страницы пишутся на языке PHP, ASP и т.д. и имеют соответственно расширения.php, .aspx. Динамические страницы создаются так называемым движком (Content Managment System – Система Управления Контентом) или специальной программой на сервере, которая по запросам пользователей формирует веб-страницу из данных хранящихся на сервере в базе данных. Интерактивные веб-страницы - это веб-страницы, которые включают в себя формы (созданные на языках PHP, JavaScript и VBScript и т.д.), с помощью этих форм происходит обмен данными между пользователем и сервером. Web-страницы создаются с помощью различных html-редакторов: Microsoft FrontPage,
Macromedia Dreamweaver, TinyMCE WYSIWYG Editor, FCKeditor, и т.д. Для того чтобы научиться создавать веб-страницы и сайты, целесообразно использовать редактор на русском языке . В редакторе FrontPage существуют мастера, которые позволяют легко создавать web-сайт, и шаблоны веб-страниц, содержащие разметку (структуру) и дизайн необходимые для быстрого создания web-страниц. Алгоритм создания веб-страниц в редакторе FrontPage 2003 детально изложен на страничке Создание сайтов - это сложный процесс, разбитый на несколько этапов.
На первом этапе делают дизайн сайта в графическом виде: так называемые эскизы или прототипы сайта.
На деле это выглядит как несколько цветных изображений будущего сайта, которые предоставляются
заказчику на утверждение.
Эскизы или прототипы сайта обычно создаются в программах для графического дизайна.
Из профессиональных программ выделим три наиболее распространенные - это
, Adobe Illustrator
, и CorelDRAW
.
Есть, конечно, масса других менее профессиональных но
не менее любопытных программ, однако на них мы пока не будем заострять свое внимание.
Следующий этап
- это утомительная череда многочисленных исправлений и утверждений этих
самых эскизов заказчиком.
Ну вот дизайн сайта создан, откорректирован и утверждён заказчиком, теперь его нужно сверстать,
а что же такое верстка?
Ещё один этап
в создании сайта: вёрстка.
И наконец, последний этап - "заливка" готового сайта на сервер постоянной дислокации,
настройка и отладка, чтобы всё работало так как нам нужно без глюков и багов.
Итак, чтобы написать сайт, вам потребуется знать такие языки программирования как:
HTML, CSS, JavaScript, PHP, MYSQL
. Существуют и другие языки, но это наиболее популярные,
на сегодняшний день. И я расскажу вам о каждом языке подробней.
HTML
(HyperText Markup Language) - это язык разметки, описывающий форму отображения
информации. Этот язык используют для создания основания сайта, иными словами для каркаса сайта.
CSS
(Cascading Style Sheets) - это язык с помощью которого можно контролировать внешний
вид Web-страницы. С помощью CSS можно задавать точные характеристики практически всех
элементов Web-страницы.
JavaScript
- это язык так сказать для "оживления" Web-страницы, с помощью этого языка
можно сделать Web-страницу интерактивной, или другими словами, заставить взаимодействовать
с пользователем. С его помощью можно сделать всплывающие окна или подсказки,
а также многое другое. Этот язык служит не только для применения в Web-разработке.
PHP
- это язык для написания сервер скриптов. Он наиболее популярен в настоящее время,
и не труден в освоении. С помощью PHP можно обрабатывать данные на сервере, работать с
файлами, рассылать письма, размещать чат, форум и многое другое.
MYSQL
- это база данных. С помощью этого языка можно добавлять, изменять или удалять
данные, получать информацию по запросу. Если знать MYSQL то можно легко изучить и другие
языки баз данных. Курс «Создание Web-страниц средствами языка HTM
Тема 1. Начальные сведения о языке HTML
Назначение языка HTML
Web
-страницы
– это специальные файлы, написанные на языке HTML
(Hyper
Text
Markup
Language
– язык разметки гипертекста)
. Под разметкой
понимается вставка в текст специальных кодов (тегов), определяющих то, как итоговый гипертекстовый документ должен отображаться специальной программой - броузером. Язык HTML
предназначен для создания системно-независимых файлов и не описывает формат документа, но описывает его структуру. Например, если в тексте встречается заголовок, то код HTML
просто указывает, что соответствующий фрагмент является заголовком. Получив такой код, программа - броузер сама решает, что ей делать с заголовком. Возможно, она отобразит его более крупным шрифтом или выровнять по центру экрана. Если этот текст будет воспроизведен синтезатором речи, то синтезатор использует этот код, чтобы повысить громкость и сделать необходимую паузу. Язык HTML
представляет собой компьютерный язык, в некотором смысле родственный языкам программирования. Он включает достаточно строгие правила, которые необходимо соблюдать, чтобы получить правильные результаты. Язык HTML
появился одновременно со службой Worl
d Wide
Web
и развивался вместе с ней. Он является основой Worl
d Wide
Web
и одновременно причиной ее широчайшей популярности. HTML
- файл
HTML
- файл – текстовый файл, имеющий расширение .htm
или .
html
Web
-страница хранится в виде HTML
- файла. Для создания HTML
- файла могут использоваться как простые текстовые редакторы, такие как Блокнот или Word
Pad
, так и редакторы Web. Структура документа HTML
Документ HTML состоит из основного документа и тегов разметки, которые являются наборами обычных символов. Все документы HTML имеют строго заданную структуру. Документ должен начинаться с тега и заканчиваться соответствующим закрывающим тегом. Эта пара тегов сообщает броузеру, что перед ним действительно документ HTML. Документ HTML состоит из раздела заголовков и тела документа
, идущих именно в таком порядке. Раздел заголовков заключён между тегами и и содержит информацию о документе в целом. В частности, этот раздел должен содержать внутри себя теги и, между которыми размещают «официальный» заголовок документа. Сам текст документа располагается в теле документа
. Тело документа располагается между тегами и BODY
>. На практике определить место положения этих основных тегов можно и при их отсутствии. Поэтому, если теги, Простейший правильный документ HTML. <
HEAD
>
<
TITLE
>Заголовок документа
TITLE
>
HEAD
>
<
BODY
>
BODY
>
Теги
HTML
Язык HTML состоит из специальных разметочных указателей – тегов. Их также можно назвать командами, инструкциями или кодами языка HTML. Тег – инструкция броузеру, указывающая способ отображения текста.
Все теги начинаются с символа «меньше» (<) и заканчиваются символом «больше» (>). Пару этих символов иногда называют угловыми скобками.
После открывающей угловой скобки идет ключевое слово
, определяющее тег. Каждый тег в языке HTML имеет специальное назначение. Регистр букв в названиях тегов не имеет значения – можно использовать как строчные, так и прописные буквы, хотя общепринято использовать прописные буквы, чтобы теги отличались от обычного текста документа. Существует два типа тегов – парные и непарные. Парные теги
– открывающие и закрывающие, аналогичные круглым скобкам алгебраического выражения. Они влияют на текст с того места, где употреблены, до того места, где указан признак окончания их действия (закрывающие теги начинаются с символа косой черты (/). Например, <
HTML
> HTML
>, <
P
> P
>, Непарные теги дают разовый эффект в месте своего появления, поэтому в закрывающем теге нет необходимости. Например, Тег несет служебную информацию о Web
-сайте и не отображается в экране браузера: это информация о кодировке Web
-странички, об авторе, а также набор ключевых слов для поиска, отображающих содержание сайта. Пример.
Пример создания таблицы
Из примера видно, что страничка использует кодировку W
indows-1251 - наиболее распространенную на сегодняшний день, достаточно лишь каждый раз вставлять этот тэг в таком виде на свою страничку; автор страницы – Иванов Иван; страница посвящена животным. При отображении документа в браузере сами теги не отображаются, но влияют на способ отображения документа.
Если по ошибке в теге указано ключевое слово, отсутствующее в языке HTML, то тег игнорируется целиком. Открывающие теги часто могут содержать атрибуты, влияющие на эффект, создаваемый тегом. Атрибуты – это дополнительные ключевые слова, отделенные от ключевого слова тега и друг от друга пробелами. Атрибуты могут иметь значения, записываемые после знака равенства (=). Всегда полезно заключать значение атрибута в кавычки (одинарные либо двойные). Строка в кавычках не должна содержать такие же кавычки внутри себя. Можно опускать кавычки для значений атрибутов, которые состоят только из следующих символов: символов английского алфавита; промежутков времени; дефисов (-). Вы можете также опустить кавычки для значений атрибутов, которые состоят только из следующих символов (обратитесь к технической концепции
): символов английского алфавита (A - Z
, a - z
) цифр (0
- 9
) промежутков времени дефисов (-
) Таким образом, WIDTH=80
и ALIGN=CENTER
- разрешенное сокращение для WIDTH="80"
и ALIGN="CENTER"
. Примеры. FONT
> Комментарии
Подобно тому, как во всех языках программирования есть возможность внесения в программу комментариев (текстовых строк, не являющихся частью программы), есть она и в языке HTML. Начинается комментарий со специального тега. Комментарий может включать в себя любые символы, кроме символа “больше” (>), и, таким образом, не может включать в себя теги. Принцип наследования тегов
Теги-контейнеры.
<начало 2-го тега> текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
<начало 3-го тега> <Конец 3-го тега> <Конец 2-го тега> <Конец 1-го тега> Отступы от левого края не случайны - они автоматически выставляются программами, формирующими код HTML для упрощения его восприятия. Достаточно понимать, что чем дальше от левого края отстоит тег, тем "глубже" он лежит, тем большее количество "старших" тегов может на него действовать. Также следует заметить, что некоторые атрибуты вложенных тегов могут воздействовать и на вышестоящие, "старшие" теги. Например, это типично для таблиц, вложенных одна в другую. «Создание простейшей
Web
-страницы»
Цель:
научиться создавать Web
-страницы в текстовом редакторе Блокнот. Указания к выполнению
Наберите в нём структуру HTML
-документа, которая приведена ниже: О братьях наших меньших. Здесь будет размещено содержание Web-страницы Сохраните файл, присвоив ему имя index
.htm
. Откройте созданный файл. Вы увидите, как выглядит созданный вами файл в окне браузера. Закройте браузер. Вернитесь к сохранённому в Блокноте файлу. Внесите в него следующие изменения: вместо слов «Здесь будет размещено содержание Web
-страницы», наберите следующие:Это моя первая страничка
.
В строке <
TITLE
>
укажите: «Домашняя страничка (ваше имя и фамилия)».
Сохраните файл как page
2.htm
. Просмотрите результат в браузере, при необходимости отредактируйте файл при помощи Блокнота. Теги физического и логического форматирования текста
Форматирование шрифта
.
Для форматирования текста существует большое количество элементов. Форматировать текст можно с помощью традиционных элементов: выделять фрагменты курсивом, полужирным шрифтом, выбирать шрифт, размер и цвет шрифта, выравнивать текстовые фрагменты. Если автору не хватает простых вариантов форматирования текста, он может прибегнуть к таблицам стилей, которые существенно расширяют возможности языка HTML по форматированию. Рассмотрим более подробно стандартные элементы языка HTML, позволяющие форматировать текст. Шрифт
- это таблицы замены кода видимым изображением. Ариал
Courier New
Курьер Нью
Comic Sans
Комик Санс
Times New Roman
Таймс Нью Роман
Verdana
Вердана
Каждый из этих шрифтов уместен в своем дизайне и стиле. Наиболее распространен - Ариал. Все эти шрифты есть у 90% всех посетителей вашей будущей странички. Каждый шрифт - это самостоятельный файл в папке Windows/fonts/ *.ttf. Как в HTML придать шрифту тот или иной вид? Абсолютный размер шрифта задается атрибутом si
ze
(размер)
. Этот атрибут может принимать значения от 1 до 7, при этом шрифт 1-го размера - самый маленький, а 7-го – самый большой. текст размера 1
текст размера 6
Тише едешь – дальше будешьONT
>. Примеры.
Это шрифт arial размером 3 ONT
> …P
>
(Paragraph
). Причем, можно использовать только начальный тег, так как следующий элемент обозначает не только начало следующего абзаца, но и конец предыдущего. В тех случаях, когда по смыслу необходимо обозначить завершение абзаца, можно использовать и конечный тег. Глава 1P
> АнимацияP
> стр. 3P
> В языке HTML
нет средств для создания абзацного отступа (”красной строки”), поэтому для удобочитаемости текста между абзацами броузер обычно вводит пустую строку. Если нужно осуществить переход на новую строку без создания абзаца, используется одиночный тег Важным средством создания разделителей в тексте являются горизонтальные полоски-линейки, визуально отделяющие разные части документа друг от друга. Горизонтальная линейка создается одиночным тегом .. С его помощью очень удобно делить страницу на части. В теге допускается ряд атрибутов: Выравнивание
align = “left” align = “ center” align
= “ right
” align
= “ justify
” Толщина и длина линии
в пикселях.
Size
= 3(ширина в пикселях) width= 300 (длина в пикселях) width= 100% (длина в процентах) Цвет линии
color
=”red
” Язык HTML поддерживает шесть уровней внутренних заголовков документа. Они помечаются тегами от Домашние животные Логическое форматирование текста
.
В данном пункте мы рассмотрим теги, по своему эффекту очень напоминающие теги, задающие размер, цвет и начертание шрифта. Однако принципиальное различие заключается в том, что эти теги действительно описывают реальные свойства текста. Это означает, что текст может по разному отображаться в разных браузерах, но какой-то эффект гарантирован даже в том случае, когда по какой-то причине нет возможности применить шрифтовые эффекты. Все эти теги парные и воздействуют на текст, заключенный между открывающим и закрывающим тегами. Закрывающий тег обязателен. Для запуска Windows наберите: win
. Тег <
EM
>…
EM
>
используется для выделения элементов текста (обычно курсивом). Практическая работа № 2
“Форматирование текста на Web-странице”
Цель:
научиться форматировать шрифт и текст на Web
-странице. Указания к выполнению
В элементе <
TITLE
>
укажите название странички “П/р № 2”. Отформатируйте следующий текст согласно указаниям (даны в скобках курсивом), как показано на рисунке. (заголовок
H
1)
(выравнивание по центру)
Собаки
(заголовок
H
2)
(выравнивание по центру)
Сторожевые (выравнивание слева, полужирный шрифт)
Охотничьи (выравнивание справа, полужирный шрифт)
Дрессировка
(выравнивание по центру, полужирный курсив)
Клубы Выставки Площадки (выравнивание по центру, размер шрифта 10, цвет шрифта красный, шрифт
Arial
)
Стихотворение (цвет шрифта синий, размер шрифта 6, выравнивание по центру)
По жизни я скромен, Оваций не надо, Но как же я классно Смотрюсь у снаряда! (выравнивание по левому краю, размер шрифта 6)
Создание списков
Маркированные списки.
Список отличается от обычного текста тем, что пользователю не надо думать о нумерации его пунктов: эту задачу программа берет на себя. Если список дополняется новыми пунктами или укорачивается, нумерация корректируется автоматически. В случае ненумерованных списков программа ставит перед каждым пунктом маркеры: кружки, прямоугольники, ромбы или другие изображения. В результате список принимает удобочитаемый вид. Теги создания ненумерованного списка: Пример.
Вид на экране:
Пункт 1 списка Пункт 2 списка Пункт 3 списка Теги создания нумерованного списка: <
O
L> <
LI
>
OL
>
Пример.
Вид на экране:
Пункт 1 списка Пункт 2 списка Пункт 3 списка Способ нумерации задается при помощи атрибута type
. В таблице приведены все способы нумерации: Вид нумерации Практическая работа № 3
«Создание нумерованных и ненумерованных списков»
Цель
:
научиться создавать списки на Web
–страницах. Указания к выполнению
:
1
. Создайте новую Web
–страницу в редакторе Блокнот. 2
. В элементе 3
. Отформатируйте следующий текст согласно указаниям (даны в скобках курсивом), как показано на рисунке: Солнце должно быть:
(Шрифт размером 8, красного цвета,
выравнивание по центру)
1. Теплым. 2. Круглым. 3. Желтым. Снег должен быть:
(Шрифт размером 6, синего цвета,
выравнивание по центру)
В. Холодным. С. Пушистым. (Шрифт обоих списков черный, размер 3).
Гиперссылки Можно выделить несколько видов гиперссылок. Внешние (связывают Web-страницу с документами, не принадлежащими данному Web-узлу). Внутренние (связывают документы внутри одного и того же Web-узла). Абсолютный путь.
Если гиперссылка внешняя, то указывается полный URL
документа, называемый еще абсолютным путем. Относительный путь.
Если гиперссылка внутренняя, то указывается только та часть
URL
, которая отличается у двух связываемых документов (так называемыйотносительный путь
),
например, если два документа находятся в одной папке, то достаточно указать имя файла, на который указывает гиперссылка. Примеры.
Моя личная страницаA
> Якоря.
Гипертекстовые ссылки могут указывать на определенное место внутри страницы, если в нужное место предварительно вставить якорь
. Якорь также использует теги и A
>, но вместо атрибута href
для него обязательным является атрибут name
. Значением этого атрибута является имя якоря.
Оно может состоять только из латинских букв, цифр и не должно содержать пробелов. Указание почтового адреса в гиперссылке
. Когда гиперссылка используется для указания адреса электронной почты, ее выбор обеспечивает не переход к новому документу, а запуск почтовой программы на компьютере для отправки сообщения указанному адресату. Обычно такую ссылку размещают в конце страницы для обеспечения связи с Web-мастером или автором страницы, например, Иванов АлексейA
> Пример. А теперь можно перейти к моей личной страницеA
> О том, как связаться с автором, рассказано в Практическая работа № 4
«Создание гиперссылок»
Задание 1.
Создание простейшей гиперссылки. Цель:
научиться связывать два HTML
–документа с помощью гиперссылок. Указания к выполнению:
Создайте две Web
–страницы в редакторе Блокнот. Одну назовите page
1.htm
, вторую page
2.htm
. Обе странички сохраните в одной папке под названием site
. Обратите внимание, что названия папки и страничек должны быть на английском языке и начинаться со строчной буквы. В элементе На страницу 2 На страницу 1 Откройте в браузере первую страничку и убедитесь, что обе гиперссылки работают правильно. Задание 2.
Создание гиперссылок. Цель:
научиться связывать три HTML
–документа с помощью гиперссылок. Выполнить второе задание вы можете, если успешно справились с Заданием 1. Создайте третью страничку page
3.htm
. На страничке page
3.htm
создайте гиперссылки для перехода на странички page
1.htm
и page
2.htm
. На страничках page
1.htm
и page
2.htm
добавьте гиперссылку для перехода на страничку page
3.htm
. Откройте в браузере первую страничку и убедитесь, что теперь можно перейти с любой странички на любую другую из трех созданных. Задание 3.
Цвет гиперссылок.
Цель:
научиться определять цвет гиперссылок. Выполнить задание вы можете, если успешно справились с Заданием 2. На страничках page
1.htm
, page
2.htm
и page
3.htm
в тэге Откройте в браузере первую страничку и, переходя по ссылкам со странички на страничку, убедитесь, что цвет гиперссылок задан верно. Рисунки на
Web
-странице.
Иллюстрации (рисунки, фотографии) играют важнейшую роль в оформлении Web
-страниц. Сами рисунки хранятся в отдельных файлах вне документа HTML
, но отображаются браузером внутри. Для этого служит одиночный тег <
IMG
>.
Обязательным атрибутом этого тега является атрибут src
, значением которого является путь к файлу с рисунком или фотографией, Если картинка лежит в той же папке, что и Web
-страница, то путь представляет собой просто имя файла, например: В теге Текст может располагаться также внизу картинки (это по умолчанию) - (1), посередине - (2), и вверху - (3): vspace
- задает расстояние между текстом и рисунком (по вертикали): <
imgsrc="
pr1.
png"
hspace="30"> С помощью тега Практическая работа № 5
«Использование рисунка в качестве гиперссылки»
Цель
: научиться использовать рисунок в качестве гиперссылки. На страничках page
1.htm
, page
2.htm
и page
3.htm
вместо текстовых гиперссылок используйте рисунки. Для этого: откройте папку, указанную учителем (в папке находятся файлы с изображением цветных кнопок), вставьте на первую страничку изображение голубой кнопки и создайте гиперссылку для перехода на вторую страницу: Самостоятельно вставьте изображение оранжевой кнопки для перехода с первой страницы на третью; Задайте бордюр обоих изображений равным 2; Откройте в браузере первую страничку и, переходя по ссылкам со странички на страничку, убедитесь, что кнопки работают верно. Самостоятельно вставьте изображения кнопок на страницы page
2.htm
и page
3.htm
и задайте соответствующие гиперссылки. Откройте в браузере первую страничку и, переходя по ссылкам со странички на страничку, убедитесь, что кнопки на всех страничках работают верно. Альтернативный текст.
Web-страница может отображаться браузером, не имеющим средств для показа изображений. Пользователи часто отключают показ рисунков, чтобы ускорить прием документа. И в том и в другом случае желательно дать возможность узнать, что же изображено на картинке, если ее нельзя увидеть. Для этой цели используют альтернативный текст, который задается в теге <
IMG> атрибутом
alt
(или
title
),
этот атрибут выводит текст в месте расположения картинки во время её загрузки. Например:
Использование рисунка в качестве фона
. Если вы хотите использовать рисунок в качестве фона странички (“обоев”), то в теге Фреймы
Размещение нескольких документов на одной Web-странице.
Язык HTML
позволяет разбить окно программы броузера на несколько частей и в каждой из них отобразить отдельный документ. Такие области называются фреймами.
Теги
Атрибуты
Демонстрация основных терминов HTML
Настройка структуры документа HTML
Привет, мир!
Демонстрация структуры HTML-документа
и абзац текста через <р>
. Поскольку и заголовок и абзац вложены в элемент
, они видны на веб-странице.
Самозакрывающиеся элементы
Валидация кода
На практике
Основные термины CSS
Селекторы
или <р>
.
Свойства
Значения
Работа с селекторами
Селекторы типа
Классы
Идентификаторы
Дополнительные селекторы
Подключение CSS
Другие варианты добавления CSS
Использование сброса CSS
Кроссбраузерность и тестирование
На практике
и
Демонстрация и исходный код
Резюме
Ресурсы и ссылки
2.7.1. Создание web-страницы в редакторе FrontPage 2003
Этот сайт посвящен дистанционному обучению информатике, телекоммуникациям и электронному бизнесу
и сохранить его с расширением html, то получим html-документ, который отображается в окне браузера и имеет вид, представленный на рисунке.
Рис. 1.
Верстка
- это создание Web-страницы по эскизу или прототипу сайта.
А это значит, что всё то, что "наваял" дизайнер в одной из вышеперечисленных программ,
а также, всё что написал копирайтер в виде текстовых файлов, программисту-верстальщику нужно
аккуратно и со смыслом разрезать, написать код каждой страницы, поместить в код нарезанные
картинки и текст, соединить страницы между собой сквозными ссылками и переходами, добавить
формы и прочее, прочее, прочее… Монотонная, рутинная работа. Более подробно
о этапах создания сайта можно прочитать
, , Атрибуты тегов
Закрывающие теги не содержат атрибутов.
Мы уже знаем, что теги в большинстве своем состоят из двух частей - это открывающий (он же - содержащий атрибуты) и закрывающий, то есть, "конец" тега. Заданные в теге параметры действуют только между его началом и концом, то есть, только внутри тега:
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
Если у внутренней таблицы размер задан 100 , то у внешней не может быть размера меньше 100 пикселов + толщина рамки. Таким образом, вложенная таблица как бы "распирает" ту, в которую она вложена. При этом, даже если у нее не задан размер, а количество текста в ней значительно, она будет распирать "старшую" таблицу на такой размер, который необходим для отображения соответствующего количества строк текста. Это называется "обратная связь".Тема 2. Теги HTML
Каждая клавиша вашей клавиатуры дает определенный код, распознаваемый ОС (операционной системой, в большинстве случаев это Windows или Linux/Unix).
Таким образом, выбрав определенный шрифт, система заменяет полученный с клавиатуры код на сопоставленное в таблице символов шрифта изображение буквы или значка. Каждый шрифт - это файл. Файл, содержащий изображения букв, цифр и символов, назначаемых на каждую кнопку. Установить шрифт - означает включить в систему файл с дополнительными таблицами сопоставления. В системах MS Windows обычно используется несколько шрифтов, поставляемых вместе с системой - это:
<
FONT
>…
FONT
> определение типа, размера и цвета шрифта
. Все эти характеристики определяются при помощи соответствующих атрибутов.
Примеры.
текст размера 2
текст размера 3
текст размера 4
текст размера 5
текст размера 7
В дизайне обычно используются первые четыре размера. Все, что выше, дурной тон и признак дилетантства, ибо занимает слишком много места и трудно читается. Правда, и большим размерам находится применение. Например, седьмым размером можно писать буквицу (первую букву начала главы): Т
екст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст.
Кроме прочего, мы можем выбрать и сам шрифт, используемый для отображения текста. Делается это атрибутом face (вид).
текст FONT
>
Как видим, э
ти два атрибута - размер и вид шрифта, - можно расположить в любой последовательности в теге :
Можно также использовать атрибут color (цвет).
Название цвета задается либо числом, написанным в шестнадцатеричной системе, например, co
lor=”#ff
0000”, либо просто его названием, написанным на английском языке, например, color
=”red
”.Примеры.
Это шрифт синего цвета FONT
>
Это шрифт arial
размером 3, цвет синий FONT
>
Шрифт так же может быть: наклонный (курсив), жирный, подчеркнутый, перечеркнутый, надстрочный, подстрочный, а также сочетающий в себе несколько указанных видов. Достигается это, соответственно, тегами:
<
I
>
текст
I
>
<
B
>текст
B
>
<
U
>
текст
U
>
<
S
>
текст S
>
<
SUP
>
текст
SUP
>
<
SUB
>
текст SUB
>,
а также их сочетанием, например, <U
> текст
U
>B
>
Форматирование абзаца.
В большинстве обычных документов основными функциональными разделами являются заголовки
и абзацы.
Web
-документы не являются исключением. Для обозначения обычных абзацев в языке HTML используют тег
Вместе с тегом абзаца можно использовать и атрибут align (выравнивание)
:
align
=”left
” – выравнивание по левому краю;
align
=”right
” - выравнивание по правому краю;
align
=”center
” - выравнивание по центру.
Пример.
. В месте его размещения строка заканчивается, а оставшийся текст печатается с новой строки. Этот тег удобно использовать, чтобы, например, писать стихи в столбик:
Уронили мишку на пол,
Оторвали мишке лапу,
Все равно его не брошу,
Потому, что он хороший.
На экране браузера мы увидим стандартным образом написанное четверостишие.…
до
…
.
Заголовок первого уровня самый крупный, а шестого уровня – самый мелкий. Для заголовков можно использовать атрибуты выравнивания влево, по центру, вправо.
Пример.
Тег …
используется для цитат, названий книг. Обычно изображается курсивом.
Так как язык HTML был создан людьми, связанными с компьютерами, целая группа тегов предназначена для представления текстов компьютерных программ и результатов взаимодействия пользователя с ними.
Тег <
CODE
>…
CODE
>
указывает на исходный текст компьютерной программы, обычно отображается моноширинным шрифтом (чаще всего шрифт Courier), то есть шрифтом с фиксированным размером.
Тег <
KBD
>…
KBD
>
оформляет текст, который должен быть (или был) введен с помощью клавиатуры, обычно отображается моноширинным полужирным шрифтом. От английского keyboard - клавиатура
Пример.
Код
:
Для запуска Windows наберите: win
Тег …
отмечает текст как образец (sample). Используется для отметки текста, выдаваемого программами. Отображается моноширинным шрифтом.
Пример.
Это обычный текст
Тег …
используется для выделения переменных в листинге программы. Обычно такой текст отображается курсивом. От английского var
iable – переменная.
Пример
.
A
,
B
,
C
Код:
A
, B
, C
var
>
Тег <
STRONG
>…
STRONG
>
используется для более сильного выделения элементов текста (полужирным шрифтом).
Пример.
Это обычный текст
А это уже текст с использованием тега .
Так как здесь используется смысловое выделение вместо оформительского, рекомендуется использовать эти теги вместо тегов и <
B
>.
Домашние животные
Тег
Нумерованные списки.
Структура нумерованного списка похожа на структуру ненумерованного списка. Только для обрамления используется тег
O
L>
Виды гиперссылок.
<
A
>…
A
>
создание гипертекстовой ссылки.
В этом теге обязателен атрибут href
.
Его значением является адрес URL, на который указывает ссылка. Текст ссылки размещают между тегами <
A
>…
A
>.
При отображении документа в браузере текст ссылки обычно подчеркивается и изображается синим цветом. Щелчок на ссылке приводит к переходу по заданному адресу URL.
Пример.
http
://
www
.
microsoft
.
com
”>Microsoft
A
>
Основное неудобство абсолютного пути заключается в том, что при переносе файлов на другой сервер в Интернете требуется менять все гиперссылки.
Если документы находятся в разных папках, то сначала указывается имя папки, затем имя файла, на который указывает гиперссылка.
Бег на длинные дистанцииA
>
Использовать внутренние ссылки удобнее, так как в этом случае при переносе Web
-узла на другой сервер не требуется вносить изменения в отдельные документы.
Для ссылки на установленный якорь надо указать имя якоря в конце адреса URL после имени документа, отделив его символом «#».
HEAD
>
Новые версии стандартных программ операционной системы свежие драйверы можно найти на Web
-узле компании
http
://
www
.
microsoft
.
com
”>Microsoft
A
>
конце этой страницы
Здесь располагается основное содержание страницы
address”>Адрес электронной почтыA
>
BODY
>
HTML
>. Если картинка лежит в другой папке, то эту папку надо указать, например:
. Если картинка лежит на другом сайте, то путь прописывается полностью:
.
можно также использовать такие атрибуты, как:
height
,
width
– задают высоту и ширину области, в которой демонстрируется рисунок. Если задан только один из этих атрибутов, то второй размер устанавливается в соответствующей пропорции. Но нужно помнить, что масштабирование ухудшает качество изображения. Размер рисунка измеряется в пикселях или в процентах, например: , border
–
задаёт толщину рамки вокруг картинки (в пикселях). Этот атрибут можно не задавать, так как, по умолчанию, рамка вокруг картинки есть всегда. Но, если вы хотите её убрать, то выставляйте значение атрибута border равным нулю,
bordercolor
– задаёт цвет рамки вокруг картинки, например:
< IMG
src="picture.gif" border="3" bordercolor="#CC0000">
В нашем примере цвет рамки задан красным, ну, и, естественно, что атрибут border (толщина рамки) не должен равняться нулю, если вы хотите видеть рамку вокруг картинки,
align –
выравнивание картинки относительно других объектов:
картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа,
картинка - справа, текст - слева.
(1) -
(2) -
(3) -
,
hspace
- задает расстояние между текстом и рисунком (по горизонтали):
Расстояние задается в пикселях.
можно использовать изображения в гиперссылках, вставлять картинки в таблицы, решать задачи дизайна…
Чем отличается структура документа HTML
, содержащего фреймы, от обычного документа HTML
? Такой документ не содержит раздела «тела» документа и не содержит какого-либо текста вообще. Вместо этого он содержит описание фреймов и названия документов, загружаемых в отдельные области.
<
FRAMESET
>…
FRAMESET
>
тегописания фреймов.
Между тегами <
FRAMESET
>…FRAMESET
> содержится описание размеров и порядка размещения областей в окне броузера, а также задаются документы, которые должны загружаться в каждую из этих областей.
Тег