Главная | Обратная связь | Поможем написать вашу работу!
МегаЛекции

H1 - это заголовок 1-го уровня




HTML-языка.

 

Модульная лекция: МЛ 3-1.

1. Что такое Web-сайт.

 

Как известно, основной объем информации, доступной в сети Интернет, размещается во «всемирной паутине» - World Wide Web (WWW) - информационной системе, подобной гигантской библиотеке. В этой библиотеке информация представлена в виде связанных между собой документов, которые называются Web-страницами. Каждая Web-страниц может содержать текст, рисунки, видео, звукозаписи, и др. Такие страницы могут размещаться на компьютерах в любой части света. Множество страниц, объединенных некоторой общей темой и помещенных, как правило, на одном компьютере, называется Web-узлом или сайтом. Узлы Web-узлы подобны книгам, а Web- страницы - страницам этих книг. Компьютеры, на которых размещаются сайты, а также программы, обеспечивающие поддержку сайтов, называются серверами. На одном сервере может размещаться множество Web-сайтов. Основная служба Internet WWW(“всемирная паутина”) связывает между собой Web-сайты, состоящие из Web-страниц.

Просмотреть любую Web-страницу можно с помощью специальных программ - браузеров, наиболее популярные из которых Internet Explorer, Opera, Mozilla и Netscape.

Многие пользователи создают свои личные «домашние»страницы, где помещают информацию о себе, своих интересах, своих друзьях с фотографиями и другими сведениями.

1.1.Этапы проектирования и создания Web-сайта

После создания Web-страниц из них можно объединить в один Web-сайт (файл) и разместить его в Интернете. Прежде всего, необходимо точно определить назначение сайта. Как, правило, сайты создаются для того, чтобы заявить о себе или о своей организации, сообщить о своих достижениях, дать рекламу о товарах или услугах и прочее. Кроме назначения сайта нужно определить круг его потенциальных посетителей, на которых будет рассчитан разрабатываемый сайт. Материал, который планируется опубликовать на сайте, нужно организовать в определенную структуру. Самой главной является начальная (домашняя homepage) страница сайта, которая содержит различные объекты и ссылки, позволяющие переходить на другие страницы сайта. Для путешествия по страницам в любом направлении сайта на каждой странице нужно разместить ссылки для перехода по кнопкам «назад», «вперед». Удобная навигация привлекает посетителей возвращаться на сайт с такой навигационной структурой.

После создания Web-страниц необходимо их записать в отдельную папку, в которой нужно иметь также вложенную папку с файлами рисунков, звуков и видео файлов. При сохранении Web-страниц файлу нужно присвоить тип гипертекстового файла ( имя.html ). Имя файлов должны быть набраны строчными латинскими буквами. Например, primer1.html, index0.html, hello.htmlи т.д. Файлы рисунков должны храниться в форматеGIF или JPEG. Стартовой (главной) странице рекомендуется присвоить имя index0.html.

После создания Web-сайта необходимо загрузить его первую страницу (index0.html) и убедиться, что все переходы на другие страницы работают, страницы отображаются нужным образом, а рисунки выводятся на страницы. Если какой-либо рисунок не выводится на странице, то необходимо проверить правильность ссылки на имя файла рисунка и правильность указанного пути к файлу документа. Браузер игнорирует обнаруженные ошибки. При этом никаких сообщений о выявленных ошибках не выдается.

2. Язык создания Web-страниц.

Для создания текстового файла, каковыми являются Web-документы, можно использовать любой текстовый редактор, например, блокнот и визуальные редакторы, например Dreamweaver. Для использования текстовых редакторов необходимо знать html-язык. В этом случае разработчик сам вводит тэги, определяющие структуру и содержимое разрабатываемого им Web-сайта. В основе всех визуальных редакторов лежит html-язык и мощный инструмент таблицы каскадных стилей CSS. При создании Web-страниц html-язык не ставит никаких ограничений (в отличие от визуальных редакторов). Web-дизайнеры страниц могут использовать любые тэги и всю свою фантазию, применяя самые последние возможности html-языка и таблицу каскадных стилей CSS. В качестве редакторов тэгов можно использовать простейшую программу, входящую в поставку Windows: - notepad или блокнот.

То что мы видим на экране компьютера предоставляет нам специальная программа, которая имеется во всех Windows, и называется браузер Internet Explorer (IE). Браузер интерпретирует html-документы, которые сформированы с помощью специальных конструкций html-языка. После запуска Web-сайта браузер читает тэги html-языка, интерпретирует их и отображает на экране в виде графических и текстовых объектов страницы.

При подготовке html-документа для форматирования отдельных его фрагментов используются шрифт и размер шрифта, стиль начертания, цвет текста и фона и другие текстовые эффекты. Для форматирования текста (редактирования) используются специальные конструкции html-языка - тэги ( tag – ярлык, признак ). Все тэги выделяются символами - ограничителями (< и >), между которыми записывается идентификатор (имя) тэга и возможные параметры. Имена тэгов и его возможных параметров задаются с помощью идентификаторов - ключевых слов, наименование которых закреплены в языке html в соответствии со стандартом. Большинство тэгов состоят из начального ( открывающего ) тэга изавершающего ( закрывающего) тэга, который отличается от открывающего наличием символа / ( слэш) перед именем того же тэга. Обратите внимание на принцип вложения одного тэга во внутрь другого. Действие тэга распространяется на ту часть текста документа, которая находится между открывающим и закрывающим тэгами. Есть тэги, которые не нуждаются в закрывающих тэгах. Тэги, которые требуют соответствующего закрывающего тэга, называются тэгами - контейнерами. Все, что записано между соответствующими открывающим и закрывающим тэгами, называется содержимым тэга. В процессе интерпретации тэгов

Модульная лекция: МЛ 3-2

2.1. Структура html- документа.

Каждый документ, отвечающий требованиям html-языка, документ можно начинать с тэга html, внутри которого содержатся head и затем body Ниже приводится возможный вариант структуры html-документа.

<html> - начало html-файла

<hrad> - начало заголовка

<title> Название сайта </title>

... другие элементы заголовка

</head> - конец заголовка

<body параметры тэга > - начало содержимого документа

... тело документа

</body> - конец содержимого

</html> - конец html-файла

Рассмотрим еще один пример структуры документа.

<html> <head> - можно в одной строке

<meta charset=windows-1251">

<title>Заголовок документа</title>

</head>

<bodyY>

Тэг 1 - часть документа

Тэг 2 - следующая часть документа

Тэг 3 - следующая часть документа

и т.д..........................................

Тэг N, другая часть документа

</body>

</html>

В рассмотренном выше примере использованы следующие тэги:

<html> - тэг начала документа. У него есть тэг конца документа - </html>

< head> - тэг начала заголовка документа, закрывающий тэг </head>

< meta параметры > - содержит кодировку страниц, информацию, необходимую поисковой машине и т.д.

<title > - тэг, содержащий наименование документа. Используется как заголовок окна.

< body > - тэг начала выводимого на экран документа. Необходим тэг конца < /body >

В данном примере указана русская кодировка страниц (windows-1251 – русский алфавит).

2.2. Элемент body и его параметры.

Данный элемент содержит собственно тело (текст) документа. В теле документа может содержаться достаточно большой набор элементов. Ключевые атрибуты данного элемента - bgcolor, text, link, vlink и alink- могут использоваться для того, чтобы задать фоновое изображение, дополнительный цвет фона и цвет, который будет использоваться при вывода на экран обычного текста и гипертекстовых связей.

Пример
<body параметр1=значение1,параметр2=значение2...>

текст документ

</body>
Список параметров:

bgcolor - определяет цвет фона для тела документа. См. ниже синтаксис для кодировки таких цветов.

text - определяет цвет, используемый при выводе на экран текста из данного документа. Обычно используется, когда Вы меняете фоновый цвет с помощью атрибутов bgcolor или backround.

link - оределяет цвет, который будет использоваться при выводе на экран

текста из еще не выбранных вами гипертекстовых связей

vlink - оределяет цвет, который будет использоваться при выводе на экран

текста из уже проверенных вами гипертекстовых связей

alink - задает цвет, которым будут выделяться в тексте гипертекстовые связки

в тот момент, когда пользователь щелкает по ним клавишей мыши

background- определяет адрес URL, откуда будет браться изображение для

фона текущего документа.

В языке html цвета задаются по схеме RGB ( R – доля красного цвета, G –доля зеленого цвета, B – доля синего цвета ) шестнадцатеричными числами (например как color="#C0FFC0"), либо одним из 16 общепринятых названий для цвета.

Примеры использования цветов в параметре тэга body.

1. < body bgcolor=white text=black link=red vlink=maroon alink=fuschia>

2. <body background="face.jpg">

В первом случае в качестве фона документа выбран белый цвет, а для текста – черный.

Во втором случае в качестве фона документа выбран рисунок с названием face.jpg. Если размер рисунка меньше размера экрана, то он повторяется на весь экран.

2. 3. Тэги форматирования текста.

Множество тэгов html-языка можно объединить в группы по функциональному назначению. Рассмотрим на примерах использование этих групп тэгов.

Теги выделения текста

Тег Описание
<B>текст</B> Текст отображается полужирным.
<BIG>текст</BIG> Текст отображается шрифтом увеличенного размера.
<i>текст</i> Текст отображается курсивом.
<S>текст</S> Текст отображается перечеркнутым.
<SMALL>текст</SMALL> Текст отображается шрифтом уменьшенного размера.
<TT>текст</TT> Текст отображается моноширинным шрифтом.
<U>текст</U> Подчеркнутый текст.
X<SUB>i</SUB> Xi - для отображения подстрочных индексов.
A<SUP>x</SUP> Ax - для отображения надстрочных индексов.

 

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

Например:

<br clear=left> - новая строка начинается после изображений, размещенных слева

<br clear=right> - новая строка начинается после изображений, размещенных справа

<br clear=all> - новая строка начинается ниже всех изображений

Элемент font

Структура элемента:

<font параметр1=значение параметр2=значение...> текст </font>

Для элемента font необходимо указывать как начальный, так и конечный тэги. При этом у вас появляется возможность изменить у текста, оказавшегося меж этими двумя тэгами, размер шрифта и/или цвет. Возможные атрибуты:size = n. Размер шрифта текста (внутри тэга font) от n=1 до n=7. Вы можете задать абсолютный размер шрифта, указав какое-либо целое число от 1 до 7. color - указывает цвет, которым будет выделен данный кусок текста. Цвета задаются в виде RGB-значения с шестнадцатеричной нотацией, либо выбирается один из 16 стандартных цветов.

Пример.

<font size="1">Этот текст размером size=1</font>

<font size="2">Этот текст размером size=2</font>

<font size="3">Этот текст размером size=3</font>

<font size="4">Этот текст размером size=4</font>

<font size="5">Этот текст размером size=5</font>

<font size="6">Этот текст размером size=6</font>

<font size="7">Этот текст размером size=7</font>

Результат интерпретации браузером данного кода на экране:

Этот текст размером size=1
Этот текст размером size=2
Этот текст размером size=3
Этот текст размером size=4
Этот текст размером size=5
Этот текст размером size=6
Этот текст размером size=7

Модульная лекция: МЛ 3-3

2.4. Преформатированный текст - тэг PRE.

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

Например, если следующий абзац заключить внутри открывающего и закрывающегося тэгов pre:

 

слово1

слово2 слово3

слово4 слово5 слово6

слово7 слово8 слово9

то на экране он изобразится также (пробелы между словами браузером не игнорируются).

2.5. Заголовки - элементы h1,h2,h3,h4,h5,h6

Элементы заголовка служат для выделения названия разделов документа.существует шесть уровней заголовка. Чем меньше число, указывающее уровень, тем более значимым (большим размером) является заголовок.

Каждый из тегов <h1>,<h2>,<h3>,<h4>,<h5>,<h6> требует соответствующий закрывающий тэг:

</h1>,</h2>,</h3>,</h4>,</h5>,</h6>
Рассмотренные тэги могут использоваться с параметром горизонтального выравнивания align.

Рассмотрим примеры.

<h2> Это Заголовок 2-го уровня </h2>

<h3> Это Заголовок 3-го уровня </h3>

<h4> Это Заголовок 4-го уровня </h4>

<h6> Это Заголовок 6-го уровня </h6>

<h4 align=center> Заголовок 4-го уровня по центру </h4>

<h2 align=right>Заголовок 2-го уровня справа</h2>

Группирующие тэги div и SPAN. Все элементы, располагающиеся внутри body, подразделяются на "элементы уровня блока" и "встроенные элементы"(или "элементы уровня текста"). Различие между ними заключается в следующем:

1. Элементы уровня блока могут содержать внутри себя как встроенные элементы (тэги), так и другие элементы уровня блока, т.е., элементы уровня блока образуют более глобальную (крупную) структуру, нежели встроенные.

2. Вывод элемента уровня блока начинается с новой строки. Элемент div относится к элементам уровня блока., а span- к встроенным. Оба они применяются для форматирования соответствующей части документа с использованием таблиц стилей.

Рассмотрим пример использования элемента div.

<div style="color: blue">
Здесь размещается фрагмент документа
</div >

В этом примере фрагмент html-документа обрамляется тэгами (элементами) <div> и </div>для задания некоторых его свойств. В данном случае все текстовые элементы выделенного фрагмента будут отображаться синим (blue) цветом. Аналогом тэга<div> уровня текста является элемент <span>.Примечание: рассмотренные элементы желательно использовать вместе с таблицами стилей.

Тэг <center> - предназначен для горизонтального выравнивания всех элементов посредине окна просмотра браузера. Он имеет уровень блока и его полезно использовать для центрирования таких элементов, как, таблицы,(и для других). Этот элемент обязательно должен иметь закрывающий тэг </center>

2.6. Создание списков.

2.6.1. Упорядоченные (нумерованные) списки

Упорядоченные (или нумерованные) списки имеют следующий вид:

<OL> - начало списка

<LI>... первый пункт списка

<LI>... второй пункт списка

.....

</OL> конец списка

В элементе OL может использоваться атрибут start, задающий первое число, с которого начнется нумерация пунктов в таком списке (по умолчанию нумерация начинается с первого номера - 1). Вы можете в любой момент изменить порядок нумерации, записав другой атрибут value в любом из элементов LI Предполагается, что оба эти атрибута будут иметь значением целое число. Вы не можете запрограммировать разметку так, чтобы каким-либо образом автоматически продолжить текущую нумерацию в следующем списке, либо пропустить несколько номеров (т.е. не задавая явным образом в элементах OL или LI требуемый номер). Атрибут typeв элементе OLдает вам возможность выбрать стиль, каким будет осуществляется нумерация списка.

2.6.2. Неупорядоченные списки

<ol type="a" >

<li> наличие хорошей посещаемости </li>

<li> наличие продукта для продажи </li>

<li> наличие блоков рекламы </li>

</ol>

Результат интерпретации кода браузером.

a. наличие хорошей посещаемости

b. наличие продукта для продажи

c. наличие блоков рекламы

2.6.3. Маркированные списки.

Маркированные (неупорядоченные) списки имеют вид:

<UL> - начало списка

<LI>... первый пункт списка

<LI>... второй пункт списка

...

</UL>

Элемент UL используется для создания неупорядоченных списков. Причем для этого элемента всегда необходимо указывать и начальный и конечный тэги. Для маркировки отдельных пунктов списка используется элемент LI. Конечный же тэг для элемента LI может быть всегда опущен. Заметим, что элементы LI могут содержать вложенные списки.

В элементах UL и LIможет использоваться атрибут type, устанавливающий стиль разметки для данного списка.

Допустимые значения атрибута -"disc", "square" и "circle". Стиль разметки в общем случае зависит от уровня вложенности данного списка.

Пример:

<ul>

<li type="disc">Круг</li>

<li type="square">Квадрат</li>

<li type="circle">Окружность</li>

</ul>

Результат отображения на экране:

  • Круг
  • Квадрат
  • Окружность

 

2.6.4. Вложенные списки.

Списки могут быть произвольно вложенными друг в друга, хотя на практике лучше ограничиваться 3-мя уровнями вложенности. У вас также может быть несколько параграфов, каждый из которых содержит вложенный список, и все это в единственном элементе основного списка. Пример вложенного списка:

<UL>

<LI> Группы УПО:

<UL>

<LI> УПО-411

<LI> УПО-412

</UL>

<LI> Группы ГРК:

<UL>

<LI> ГРК-411

<LI> ГРК-412

</UL>

</UL>

Результат отображения кода на экране:

  • Группы УПО:
    • УПО-411
    • УПО-412
  • Группы ГРК:
    • ГРК-411
    • ГРК-412

 

Ниже приводится второй вариант данного списка, в котором используется параметр type.

<UL type=square>

<LI> Группы УПО:

<UL type="a">

<LI> УПО-411

<LI> УПО-412

</UL>

<LI> Группы ГРК:

<UL type="i">

<LI> ГРК-411

<LI> ГРК-412

</UL>

</UL>

Результат отображения кода на экране:

  • Группы УПО:
a. УПО-411 b. УПО-412
  • Группы ГРК:
i. ГРК-411 ii. ГРК-412

 

2.6.5. Списки определений

Списки определений имеют вид:

<DL> - начала списка определний

<DT> - определяемый термин

<DD> - определение термина

....

</DL> - конец списка определений

Заметим, что элементы DT можно использовать только как контейнеры для элементов текстового уровня B, I и др. Но в то же время внутри DDможно использовать блочные элементы P (исключение составляют заголовки).

Пример:

<DL>

<DT>МГУ

<DD>Московский государственный университет.

<DT>МО АСУ

<DD>Математическое обеспечение АСУ.

</DL>

Результат отображения кода на экране:

МГУ

Московский государственный университет.

ГИ

Гуманитарный институт.

ЕД

Естественнонаучные дисциплины.

Модульная лекция: МЛ 3-4

2.7. Использование звуковых файлов.

Для использования звуковых файлов на Web-странице можно применить любой из двух вариантов: встраивать файл с помощью тэга EMBED, либо создать ссылку на звуковой файл. В любом случае фонограмму можно будет прослушать при просмотре страницы в браузере Netscape при помощи подключаемого модуля LiveAudio, который работает со стандартными форматами AIFF,AU,MIDI и WAV (стандарт звуковых файлов операционной системы Windows). Этот модуль снабжен понятной и удобной консолью с кнопками воспроизведения, паузы, остановки и регулятора громкости. В браузере Microsoft Internet Explorer для проигрывания звуковых файлов используется вспомогательное приложение Microsoft ActiveMovie, работающее как компонент браузера. Приложение ActiveMovie предоставляет большие возможности по управлению прослушиванием. Так, например, можно задать режим повторения фонограммы заранее заданное или бесконечное число раз. Есть возможность одновременного исполнения (с наложением звука) нескольких файлов встроенных на страницу, даже если они имеют одинаковый тип. В настоящее время существуют различные форматы хранения звуковой информации, которые носят название Layer-1,Layer-2,Layer-3. Отличаются они друг от друга возможностью сжатия и сложностью.. Формат Layer-3 - наиболее трудоемкий и предлагает самое лучшее сжатие звуковых файлов. Этот формат получил самое распространенное применение, Его называют просто МРЗ. Такое название связано с типичным расширением МРЗ для звуковых файлов, хранящихся в этом формате. Это сокращение укоренилось, стало общепринятым (даже некоторые сайты получили это название (например, www.mp3.com и др.)

2.7. 1. Воспроизведение файлов формата МРЗ

Для проигрывания файлов МРЗ существует довольно большое количество программ-плейеров, число которых измеряется десятками. Безусловным лидером среди них является программа Winamp, которая предназначена для воспроизведения звуковых файлов в различных форматах и может устанавливаться в среде Windows.

Тэг EMBED используется для встраивания звуковых файлов в Web-страницу.
Ниже приводится пример html- документа, вызывающего звуковой файл.

<html>

<head>

<TITLE> Пример использования звуковых файлов</TITLE>

</head>

<body>

Встраивание звукового файла c полным набором органов управления консоли

<embed src="start.wav height=60 width=144 autostart=trUE>

<A href="start.wav"> - Это ссылка на звуковой файл start.wav

</body>

</html>

.2.8. Навигация по HTML-документам.

Известно, что Web-сайт содержит множество html-документов. Чтобы "путешествовать" по этим документам, необходимы специальные средства навигации, которые получили название "ссылка" (Anchor - A).

Структура элемента - ссылка:

<A href="ссылка на документ"> наименование ссылки </A>

Анкеры (ссылки) нельзя вкладывать друг в друга, они должны всегда иметь начальный и конечный тэги. Назначением этого элемента является создание гипертекстовых связей, а также разметка тех позиций в документе, которые имеют собственное название и могут служить ориентиром для подобных гипертекстовых связей.

Например:

<А href=" http://rambler.ru" >Выход в Интернет</a> - запуск сайта rambler.ru

<A href="MySaite.html">Мой сайт</a> - запуск сайта MySaite.html

<A href="MySaite.html"><img src="./pic/guminst.jpg"></a> - рисунок в качестве ссылки.

Чтобы включить anchor -ссылка в свой документ, с угловой скобки и тега А < А(после A стоит пробел). Определите документ, на который будет указывать ссылка, введя параметр href=”имя_файла” и, после этого, закрывающую скобку > Наберите текст, который представляет гипертекстовую ссылку в текущем документе. Завершите ссылку / A >

Пример гипертекстовой ссылки: <A href=”aist.html”>Автор</A>

Это выражение делает слово Автор гипертекстовой ссылкой на документ aist.html, который находится в той же директории, что и первый документ. Вы можете сделать ссылку и на документ из другой директории, указав относительный путь из текущего документа к документу, на который делается ссылка. Например, ссылка на файл start.html, расположенный в поддиректории samox будет выглядеть так: <A href=”samox/start.html”>Введение</A>

Это называется относительной ссылкой. Вы можете использовать также полное имя файла. В основном Вы должны использовать относительные ссылки, потому что Вам меньше набирать текста. Легче переместить группу документов в другое место, потому что относительные ссылки останутся корректными. Однако, используйте абсолютные пути, когда ссылаетесь на документы относящиеся к другой группе. Например, пусть Ваша группа документов содержит документацию пользователя. Ссылки внутри этой группы должны быть относительными. Ссылки на другие документы (относящиеся, например, к дополнительному программному обеспечению) должны содержать полный путь. Таким образом, если Вы переместите документацию в другую директорию, ни одна из связей не будет требовать обновления (изменения).

2.8. 1. Внутренняя навигация - по страницам html-документа.

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

1. В начале каждой страницы указать МЕТКУ - <A name="метка" > (метка - любое текст)

2. В конце каждой страницы указать ссылку на страницы с помощью их меток в виде:

: <A href="#метка1">страница 1 </A> - ссылка на страницу 1

<A href="#метка1">страница 2 </A> - ссылка на страницу 2

......

<A href="#меткаN">страница N </A> - ссылка на страницу N

Как правило, список ссылок на все страницы указываются либо в конце, либо в начале каждой страницы. Рассмотренные выше ссылки будут отображены на страницах следующим образом:

страница 1 страница 1 страница 1
или так:
Сведения об институтеИнформация о студентахПреподаватели кафедры

После щелчка мышкой по любой из указанных ссылок будет запущен соответствующий html-документ.

Модульная лекция: МЛ 3-5.

2.9. Создание таблиц.

Для создания таблицы любой структуры можно использовать следующие элементы (тэги):

<table border=1 width="80%">

<caption> заголовок таблицы </caption>

<tr> - начало первой строки

<td> содержимое 1 колонки таблицы </td>

<td> содержимое 2 колонки таблицы </td>

... и т д.

</tr> - конец первой строки таблицы

<tr> - начало второй строки

<td> содержимое 1 колонки таблицы </td>

<td> содержимое 2 колонки таблицы </td>

... и т д.

</tr> - конец первой строки таблицы

то же самое для второй строки и т.д.

</table>

Параметр border - задает рамки таблицы, а параметр width ширину таблицы, которую рекомендуется задавать в процентах (относительно размера экрана).

У элемента table нет обязательных атрибутов. По умолчанию таблица печатается без рамки (border=0). Разметка таблицы в общем случае осуществляется автоматически в соответствии с объемом содержащейся в ней информации, однако у автора всегда имеется возможность самому выбрать ширину таблицы, воспользовавшись атрибутом width. Дополнительный контроль над процессом разметки (таблицы) достигается также через атрибуты border, cellspacing и cellpadding.

Заголовок таблицы caption выравниваются по верхнему или нижнему краю таблицы в зависимости от атрибута align. В таблице каждый ряд ячеек содержит открывающий тэг элемента tr, хотя соответствующий закрывающий тэг всегда может быть опущен. Отдельные клетки таблицы размечаются элементом td, если это данные, и элементом th, если это заголовки. Как и в случае с tr, эти элементы являются контейнерами и могут быть записаны без указания закрывающего тэга.

Элементы th и tdмогут иметь несколько атрибутов:

align и valign- для выравнивания содержимого ячейки,

rowspan и colspan- для нестандартных ячеек, простирающихся на несколько рядов или колонок. В отдельной ячейке таблицы можно размещать самые разнообразные элементы разметки как блочного, так и текстового уровня, включая поля заполняемых форм и даже целые новые таблицы.

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

align - данный атрибут принимает одно из следующих значений: left, center или right(используемый при этом регистр значения не имеет). Указывает для текущей таблицы, каким образом при разметке осуществляется ее горизонтальное выравнивание. По умолчанию выполняется выравнивание таблицы по левой границе листа.
width- в отсутствии данного атрибута ширина таблицы определяется автоматически в соответствии с объемом содержащегося в ней материала. Однако посредством атрибута width вы можете сами задать ширину таблицы либо в пикселях (например width=212), либо как процент от расстояния между левой и правой границами экрана (например width="80%").

border - этот атрибут позволяет задавать для таблицы ширину внешней рамки - в пикселях (например, border=4). Данному атрибуту может быть также присвоено значение нуль, чтобы полностью отказаться от внешней рамки. Рамка таблицы не рисуется также, если атрибут border вообще отсутствует в разметке. Заметим, что некоторые из браузеров способны воспринимать также конструкцию <table border>, считая ее семантически эквивалентной атрибуту border=1.

cellspacing- в традиционных настольных издательских системах смежные ячейки в таблице имеют общую границу. В языке htmlэто не так. Каждая ячейка имеет собственную границу, отделенную промежутком от границ соседних ячеек. Ширину этого промежутка в пикселях можно устанавливать посредством атрибута cellspacing, (например cellspacing=10). То же самое значение определяет расстояние между общей границей таблицы и границами крайних ячеек.

cellpadding - данный атрибут устанавливает для каждой ячейки в таблице расстояние в пикселах между рамкой ячейки и содержащимся в ней материалом.

Элемент caption может иметь только один атрибут - align, который может принимать два значения: align=top или align=bottom. Посредством этого атрибута можно выбирать, помещать ли заголовок над таблицей или, соответственно, под ней. Большинство браузеров по умолчанию ставит заголовок над таблицей. Для элемента caption необходимо всегда указывать начальный и конечный тэги. Содержание заголовка должно ограничиваться простым текстом. Использование блочных элементов в этом случае недопустимо.

Для tr- элемента, начинающего новый ряд таблицы - необходимо указывать начальный тэг, однако всегда можно опустить конечный тэг. Элемент tr выступает в роли контейнера для ячеек таблицы и может иметь два атрибута:

align- устанавливает стиль горизонтального выравнивания для содержимого ячейки, который будет использоваться по умолчанию. Атрибут может принимать одно из следующих значений (независимо от используемого регистра): left, center или right и выполняет ту же самую роль, что и атрибут alignпри разметке параграфов.

valign - данный атрибут может использоваться при выборе правила, согласно которому - если нет других указаний - будет осуществляться вертикальное выравнивание во всех ячейках данной строки. Атрибут может принимать одно из следующих значений (независимо от используемого регистра): top, bottom или middle. При этом содержимое ячейки будет, соответственно, выравниваться по ее верхнему или нижнему краю, либо посередине.

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

nowrap - в присутствии этого атрибута блокируется автоматический перенос слов в пределах текущей ячейки (например в случае

<td nowrap>). Действие этого атрибута эквивалентно использованию в ячейке объектов, которые создают пробелы, неотменяемые браузером.

rowspan - данный атрибут имеет значением положительное целое число, определяющее количество рядов, на которые простирается данная ячейка. Этому атрибуту по умолчанию присваивается значение 1.

colspan - данный атрибут имеет значением положительное целое число, определяющее количество колонок, на которые простирается данная ячейка. По умолчанию атрибуту присваивается значение 1.

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

left, center и right. Если атрибут align для данной ячейки не был указан, то по умолчанию для элементов <td> выполняется выравнивание по левому краю. Напомним, что вы можете отменить это правило, задав требуемый атрибут align в элементе tr.

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

top, middle и bottom. Если для данной ячейки атрибуту valign вы не присвоили какого-либо значения, то по умолчанию для нее осуществляется выравнивание по центру. Те не менее вы можете изменить такое правило, задав нужный атрибут valign в элементе tr.

width - задает ширину площадки, отводимой под содержимое данной ячейки, в пикселях и без учета ширины границ. Как правило, при разметке будет использоваться предложенное здесь значение за исключением тех случаев, когда оно начинает вступать в противоречие с минимальной шириной остальных ячеек в той же самой колонке.

height - задает высоту площадки, отводимой под содержимое данной ячейки, в пикселях и без учета ширины границ. Как правило, при разметке будет использоваться предложенное здесь значение за исключением тех случаев, когда оно начинает вступать в противоречие с минимальной высотой других ячеек в той же самой колонке.

Ниже рассматривается пример оформления таблицы с использованием необязательных параметров. С целью комментарий все строки в коде пронумерованы (при создании страницы эти номера не указываются):

1. <table border="2" width="50%">

2. <tr>

3. <td rowspan="2">Фамилия</td>

4. <td align="center" colspan="3" bgcolor="#FF0000">Месяца</td>>

5. </tr>

6. <tr>

7. <td>январь</td>

8. <td>февраль</td>

9. <td>март</td>

10. </tr>

11. <tr><br>

12. <td>Петров</td>

13. <td>55</td>

14. <td>44</td>

15. <td>99</td>

16. </tr>

17. </table><br>

После запуска этого кода на экране браузер отобразит следующую таблицу:

 

Фамилия Месяца
январь февраль март
Петров      

 

 

Комментарий к коду Web-страницы.

1. Начало таблицы: рамка шириной 2 пикселя, ширина – 50% от размера экрана.

2. Начало первой строки таблицы.

3. Две строки (начиная с текущей) таблицы объединены в одну строку.

4. Три колонки, начиная с текущей, объединены в одну с названием Месяцы, размещенному по центру. Фон объединенных ячеек – красный.

5. Конец первой строки.

6. Начало второй строки.

7. Первая колонка текущей строки с содержимым январь.

8. Вторая колонка текущей строки с содержимым февраль

9. Третья колонка текущей строки с содержимым март.

10. Конец второй строки.

11. Начало третьей строки.

12. Первая колонка третьей строки с содержимым Петров.

13. Вторая колонка третьей строки с содержимым 55.

14. Третья колонка третьей строки с содержимым 44.

15. Четвертая колонка третьей строки с содержимым 99.

16. Коней третьей строки.

17. Конец таблицы.

 

Рассмотрим табли

Поделиться:





Воспользуйтесь поиском по сайту:



©2015 - 2024 megalektsii.ru Все авторские права принадлежат авторам лекционных материалов. Обратная связь с нами...