Или Как просмотреть исходный код страницы 7 страница
q char — выбор символа, устанавливающего порядок выравни- вания данных в ячейках группы;
q span — установка числа столбцов в группе;
q valign — установка признака выравнивания данных в ячейках группы по вертикали.
<colgroup> — с помощью данного тега создается структурная группа столбцов таблицы. Он имеет те же атрибуты, что и тег <col>.
<dd> — данный тег позволяет отметить статью определения в списке определений.
<del> — с помощью данного тега текст снабжается признаком за- черкивания.
<div> — данный тег позволяет разделить веб-страницу на обла- сти. Это бывает целесообразно при использовании стилей. У данного тега есть атрибут class, с помощью которого можно сформировать список исключений.
<font> — с помощью данного тега осуществляется изменение внеш- него вида текста. Этот тег имеет перечисленные ниже атрибуты:
q color — изменение цвета текста;
q face — изменение шрифта текста;
q size — изменение размера шрифта.
<form> — это тег используется для создания форм. Он также име- ет несколько важных атрибутов, которые перечислены ниже:
q accept-charset — определение формата кодировки данных;
q action — задание места назначения данных формы;
q enctype — выбор формата передаваемых данных формы;
q method — выбор способа пересылки данных формы по сети;
q target — определение места, где будет отображено сообщение о доставке данных формы.
<frame> — с помощью данного тега определяется набор данных фрейма. О том, что такое фреймы, говорилось выше — в разделе
|
|
|
«Термины и определения, используемые веб-разработчиками». Дан- ный тег имеет несколько атрибутов, которые перечислены ниже:
q bordercolor — предназначен для изменения цвета линий рамки фрейма;
q frameborder — позволяет скрыть рамку фрейма;
q marginheight — позволяет изменить высоту верхнего и нижне- го полей фрейма;
q marginwidth — позволяет изменить ширину левого и правого полей фрейма;
q name — предназначен для присвоения имени фрейму;
q noresize — предотвращает изменение размеров фрейма;
q scrolling — предназначен для управления отображением полос прокрутки фрейма;
q src — предназначен для определения имени и местонахожде- ния файла данных, отображаемых фреймом.
<frameset> — с помощью данного тега создается набор фреймов.
Он может использоваться с перечисленными ниже атрибутами:
q border — позволяет регулировать толщину линий рамок фрей- мов;
q bordercolor — позволяет изменять цвет линий рамок фреймов;
q cols — предназначен для формирования столбцов рамок фрей- мов;
q frameborder — предназначен для скрытия рамок фреймов;
q framespacing — устанавливает заданную толщину линий рамок фреймов;
q rows — предназначен для создания строк фреймов.
|
|
|
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> — с помощью данных тегов со- здаются заголовки разных уровней (соответственно от первого до
шестого). Например, на созданной нами веб-странице (см. рис. 2.13) заголовок Информация о странице создан с помощью тега <h1>, то есть это заголовок первого уровня. Отметим, что все теги, предназна- ченные для создания заголовков, являются парными. Поэтому если вы, например, формируете заголовок первого уровня, то он должен находиться между тегами <h1> </h1> (см. рис. 2.14). Теги заголовков могут использоваться с атрибутом align, который позволяет опреде- лить признак выравнивания заголовка.
<head> — этот парный тег определяет раздел заголовка на веб- странице. Кроме этого, он предназначен для хранения прочих эле- ментов, задача которых — помочь Интернет-обозревателю в работе с данными. Также между тегами <head> </head> могут располагаться метатеги, применяемые для хранения сведений, которые предназна- чены для Интернет-обозревателей и поисковых систем. Строго гово- ря, заголовок станицы Тестовая страница (см. рис. 2.13 и 2.14), кото- рый мы поместили между тегами <title> </title>, следовало бы еще поместить и между тегами <head> </head>. При этом программный код заголовка должен был выглядеть так:
|
|
|
<head>
<title>Тестовая страница</title>
</head>
Это больше соответствует правилам HTML-языка, и мы не делали этого только для того, чтобы при создании простейшей веб- страницы обойтись минимальным количеством тегов.
<hr> — этот тег предназначен для создания горизонтальной ли- нейки. Он может использоваться с перечисленными ниже атрибутами:
q align — определяет признак выравнивания линейки;
q noshade — позволяет придать горизонтальной линейке объем- ный эффект;
q size — позволяет указать толщину линейки;
q width — позволяет указать ширину линейки.
<html> — как мы уже отмечали ранее, этот тег предназначен для идентификации веб-страницы. Программный код любой веб- страницы должен начинаться тегом <html>, и завершаться тегом
</html>.
<i> — с помощью данного тега (он также является парным) мож- но придать тексту курсивное начертание. Как пользоваться этим те- гом, мы продемонстрировали ранее на конкретном примере (см. рис. 2.7 и 2.10).
<iframe> — этот тег позволяет создать плавающий фрейм.
<img> — с помощью этого тега осуществляется вставка в доку- мент рисунков, фотографий, изображений и прочих графических объектов. Данный тег может использоваться с атрибутами, которые перечислены ниже:
|
|
|
q align — с помощью данного атрибута можно задать признаки выравнивания текста относительно изображения (например, чтобы текст обтекал изображение и т. п.);
q alt — предназначен для отображения альтернативного текста при отсутствии графического объекта;
q border — позволяет поместить графический объект в рамку;
q dynsrc — позволяет создать внедренный видео-объект;
q height, width — эти атрибуты позволяют задать соответственно высоту и ширину графического объекта;
q hspace, vspace — эти атрибуты позволяют обрамлять графиче- ский объект полосами чистого пространства;
q ismap — предназначен для создания карты ссылок;
q lowsrc — определяет имя и местонахождение файла изображе- ния с низким разрешением;
q name — присваивает имя графическому объекту;
q src — определяет имя и местонахождение файла графического объекта;
q tabindex — устанавливает порядок перехода по графическим объектам;
q usemap — устанавливает имя карты ссылок.
<ins> — с помощью данного тега осуществляется подчеркивание вставленного фрагмента текста.
<layer> — тег предназначен для позиционирования слоя (группы элементов) веб-страницы. Конкретизировать действие тега позво- ляют его перечисленные ниже атрибуты:
q height — позволяет установить высоту слоя;
q width — позволяет установить ширину слоя;
q left — определяет координату слоя относительно левой кромки окна;
q top — определяет координату слоя относительно верхней кромки окна;
q z-index — определяет приоритет воспроизведения перекрыва- ющихся элементов слоя.
<li> — данный тег предназначен для создания списков. Каждый элемент списка должен помечаться этим тегом. Возможности
HTML-языка предусматривают создание как маркированных, так и нумерованных списков. В первом случае используется атрибут type, во втором случае — value.
<link> — с помощью данного тега делаются ссылки на файл внешнего листа стилей. Это тег может использоваться с перечислен- ными ниже атрибутами:
q href — атрибут предназначен для определения имени и распо- ложения файла внешнего листа стилей;
q rel — определяет тип отношения внешнего листа стилей к веб- странице;
q type — определяет формат внешнего листа стилей.
<map> — данный тег предназначен для формирования карты ссылок, а с помощью атрибута name карту ссылок можно именовать.
<marquee> — этот тег позволяет создать на веб-странице один из довольно распространенных эффектов: бегущую строку. Он может использоваться совместно со следующими атрибутами:
q behavior — позволяет задать способ поведения бегущей строки;
q bgcolor — предназначен для указания цвета фона бегущей строки;
q direction — устанавливает направление движения бегущей строки;
q height — определяет высоту бегущей строки;
q width — определяет ширину бегущей строки;
q hspace, vspace — позволяет выполнить обрамление бегущей строки полосами чистого пространства;
q loop — определяет количество циклов перемещения бегущей строки;
q scrollamount — определяет шаг единовременного перемещения бегущей строки;
q scrolldelay — определяет величину задержки между отдельны- ми тактами перемещения текста бегущей строки;
q truespeed — устанавливает минимальное значение интервала задержки scrolldelay.
<meta> — с помощью данного тега в программном коде выделя- ется служебная информация о веб-странице, предназначенная глав- ным образом для поисковых систем.
<nobr> — действие этого тега прямо противоположно действию тега <br>, с которым мы познакомились ранее: он запрещает переход текста на новую строку (от английского «no break», что дословно означает «нет разрыва»).
<noframes> — с помощью данного тега включается отображение альтернативного текста при невозможности показа фрейма.
<noscript> — с помощью данного тега включается отображение альтернативного текста при невозможности исполнения сценария JavaScript.
<ol> — данный тег предназначен для формирования нумерован- ных списков. Он может использоваться совместно с атрибутами start, который определяет начальный номер элементов списка, и type, определяющим стиль нумерации списка.
<p> — с помощью данного тега можно создавать новые абзацы. Он может использоваться с атрибутом align, который определяет признак выравнивания текста абзаца.
<script> — этот тег предназначен для создания объекта сценария
JavaScript.
<small> — с помощью данного тега вы моете уменьшить размер шрифта относительно расположенного рядом текста.
<strike> — тег устанавливает признак зачеркивания текста.
<strong> — создание полужирного текста.
<style> — создание определения внутреннего листа стилей.
<sub> — преобразование текста в подстрочный индекс (то есть создание подстрочного текста).
<sup> — преобразование текста в надстрочный индекс (то есть создание надстрочного текста).
<table> — тег предназначен для построения таблиц. Он может ис- пользоваться совместно с перечисленными ниже атрибутами:
q align — включает режим обтекания таблицы текстом;
q background — определяет графический фон таблицы;
q bgcolor — устанавливает цвет фона таблицы;
q border — позволяет установить требуемую толщину линии рамки;
q bordercolor — устанавливает цвет линий рамки;
q cellpadding — устанавливает размер полос чистого простран- ства, отделяющего содержимое ячеек таблицы от ее границ (иначе говоря, с помощью этого атрибута определяется расстояние от со- держимого ячейки до ее границ);
q cellspacing — позволяет установить расстояние между ячейка- ми таблицы;
q frame — позволяет установить набор отображаемых линий рамки таблицы;
q height, width — эти атрибуты позволяют установить соответ- ственно высоту и ширину таблицы;
q rules — позволяет установить набор внутренних линий табли- цы, которые будут отображаться.
<tbody> — с помощью данного тега идентифицируется группа строк данных таблицы. Тег может использоваться с перечисленными ниже атрибутами:
q align — атрибут позволяет указать способ выравнивания дан- ных по горизонтали;
q bgcolor — определение цвета фона группы;
q char — с помощью этого атрибута можно указать символ, опре- деляющий порядок выравнивания данных в ячейках группы;
q valign — атрибут позволяет указать способ выравнивания дан- ных по вертикали.
<td> <th> — данные теги позволяют определить соответственно ячейку данных и ячейку заголовка таблицы. Они могут использо- ваться с атрибутами, которые перечислены ниже:
q align — атрибут позволяет указать способ выравнивания дан- ных по горизонтали;
q background — выбор графического фона ячеек;
q bgcolor — выбор цвета фона ячеек;
q char — указание символа, определяющего порядок выравнива- ния данных в ячейках;
q colspan — с помощью этого атрибута можно соединить сосед- ние ячейки одной строки таблицы;
q height — атрибут позволяет задать высоту ячейки;
q width — атрибут позволяет задать ширину ячейки;
q nowrap — с помощью данного атрибута можно запретить пере- нос слов внутри ячейки на новую строку;
q rowspan — атрибут позволяет выполнить объединение сосед- них ячеек одного столбца;
q valign — атрибут позволяет задать способ выравнивания дан- ных по вертикали.
<tfoot> — с помощью этого тега можно создать группу строк ито- говых данных таблицы. Он может использоваться с перечисленными ниже атрибутами:
q align — атрибут позволяет указать способ выравнивания дан- ных по горизонтали;
q bgcolor — выбор цвета фона группы;
q char — позволяет задать символ, определяющий порядок вы- равнивания данных в ячейках;
q valign — атрибут позволяет задать способ выравнивания дан- ных по вертикали.
<title> — с помощью данного тега задается заголовок веб- страницы, который отображается вверху окна Интернет-обозревателя. О том, как пользоваться этим тегом, мы уже говорили ранее.
<tr> — тег предназначен для создания строки таблицы. Он может использоваться с перечисленными ниже атрибутами:
q align — атрибут позволяет указать способ выравнивания дан- ных по горизонтали;
q bgcolor — выбор цвета фона;
q char — позволяет задать символ, определяющий порядок вы- равнивания данных в ячейках;
q valign — атрибут позволяет задать способ выравнивания дан- ных по вертикали.
<tt> — тег позволяет отобразить текст моноширинным шрифтом.
<u> — данный тег включает подчеркивание текста.
<ul> — с помощью данного тега можно создавать маркированные списки. Использование с данным тегом атрибута type позволяет ука- зать стиль маркированного списка.
Как показывает практика, перечисленных тегов с атрибутами бывает вполне достаточно для создания типичных веб-страниц на языке программирования HTML.
Оформление содержимого веб-страницы
Далее мы расскажем о том, каким образом выполняется элемен- тарное оформление представленной на сайте информации. В частно- сти, вы узнаете о том, как путем внесения соответствующих измене- ний и дополнений в исходный код веб-страницы форматировать текст, создавать таблицы, списки, и др.
Предположим, что наша веб-страница, которую мы назовем Ком- пания «Торговый мир», должна содержать следующий текст.
Добро пожаловать!
Мы рады приветствовать вас на сайте нашей компании ООО «Мир торговли». Уже более пяти лет мы занимается продажей товаров и оказанием услуг. Ниже представлены списки основных по- зиций, которые мы рады предложить.
Товары:
промышленные товары;
строительные материалы; одежда, обувь;
детские игрушки. Услуги:
грузоперевозки; ответственное хранение;
юридическое консультирование.
Более подробно об ассортименте товаров и услуг вы можете узнать в нашем отделе сбыта.
Этот текст на нашей странице поначалу будет включать в себя следующие элементы: заголовки первого и второго уровней, курсив- ный, полужирный и подчеркнутый текст, а также маркированный и нумерованный списки. После этого мы переделаем списки в таблицу, и вставим на страницу изображение.
Форматирование текста
Используя имеющиеся знания, напишем программный код так, чтобы поначалу выделить на странице ее название и заголовок пер- вого уровня, которым будет являться текст Добро пожаловать! Этот код представлен в листинге 1.1.
Листинг 1.1. Выделение названия страницы и заголовка пер- вого уровня
<html>
<head>
<title>Компания "Торговый мир"</title>
</head>
<body>
<h1>Добро пожаловать!</h1>
Мы рады приветствовать вас на сайте нашей компании ООО «Мир торговли». Уже более пяти лет мы занимается продажей товаров и оказанием услуг. Ниже представлены списки основных по- зиций, которые мы рады предложить.
Товары:
промышленные товары; строительные материалы; одежда, обувь;
детские игрушки. Услуги: грузоперевозки;
ответственное хранение; юридическое консультирование.
Более подробно об ассортименте товаров и услуг вы можете узнать в нашем отделе сбыта.
</body>
</html>
Обратите внимание: в отличие от рассмотренного ранее примера, заголовок веб-страницы мы заключили не только в теги <title>
</title>, но и поместили в контейнер <head> </head>.
Сохраним программный код в файле под названием Компа- ния.html, и откроем его в окне Интернет-обозревателя. Результат вы- полненных действий показан на рис. 2.15.
 |
Рис. 2.15. Название страницы и заголовок первого уровня
Теперь изменим программный код так, чтобы первая после заго- ловка фраза была написана курсивом, во второй фразе слова пяти лет — подчеркнутым шрифтом, а третья фраза — полужирным шрифтом. Кроме этого, слова Товары и Услуги будут у нас начинаться с новой строки.
Дата добавления: 2021-01-21; просмотров: 59; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!