Обучение языку HTML

Автор работы: Пользователь скрыл имя, 26 Февраля 2012 в 15:48, научная работа

Описание

Язык HTML в своем развитии прошел несколько версий. Заметим, что после версий 1.0 и 2.0 в марте 1995 года был подготовлен черновой вариант версии 3.0, в которой по сравнению с версией 2.0 было много добавлений. Не углубляясь пока в детали, отметим, что основные производители навигаторов (фирмы Netscape и Microsoft) разработали свои расширения языка HTML, которые оказались несовместимыми между собой. В настоящее время ситуация осталась прежней, хотя совместимость навигаторов Netscape Navigator версии 3.0 и Microsoft Internet Explorer версии 3.0 несколько улучшилась.

Скачать (533.41 Кб) Сколько стоит заказать работу?

Работа состоит из 1 файл

введение.docx

— 552.75 Кб (Скачать документ)

</TR>

</TABLE>

</BODY>

</HTML>

Внешний вид получившейся таблицы мы показали на рис.18. На этом и следующих рисунках для экономии места мы не стали показывать внешний вид окна навигатора Microsoft Internet Explorer, вырезав из него только изображение таблицы.

Рис.18. Таблица со строкой заголовка, расположенной сверху

Очень часто заголовок таблицы помещают не сверху, а слева. Вы можете создать такую таблицу на базе примера документа HTML, исходный текст которого показан в листинге 23.

Листинг 23. Файл chap3\tableh1.htm

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

<HTML>

<HEAD>

<TITLE>Таблицы с заголовком</TITLE>

</HEAD>

<TR>

<TH>Строка 1</TH>

</TR>

<TR>

<TH>Строка 2</TH>

</TR>

<TR>

<TH>Строка 3</TH>

</TR>

</TABLE>

</BODY>

</HTML>

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

Таблица с заголовком строк, расположенным слева, показана на рис.19.

Рис.19. Таблица с заголовком строк, расположенным слева

Объединение ячеек таблицы

Для объединения ячеек таблицы, расположенных в одной и той же строке, вы можете воспользоваться параметром COLSPAN. Аналогично, для объединения ячеек, расположенных в одной и той же строке, используется параметр ROWSPAN.

В документе HTML, исходный текст которого приведен в листинге 24., мы показали, как можно использовать объединение ячеек для создания общего заголовка к двум столбцам таблицы.

Листинг 24. Файл chap3\tableh2.htm

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

<HTML>

<HEAD>

<TITLE>Таблицы с заголовком</TITLE>

</HEAD>

<TR>

<TH>Столбец 1</TH>

<TH COLSPAN=2>Столбец 2 и 3</TH>

</TR>

</TABLE>

</BODY>

</HTML>

Здесь параметр COLSPAN указан в операторе <TH>, определяющем вторую ячейку заголовка, и имеет значение, равное двум. Внешний вид таблицы, которая получится в результате, показан на рис.20.

Рис.20. Таблица с общим заголовком для двух столбцов

Аналогично вы можете создать общий заголовок для строк таблицы, воспользовавшись параметром ROWSPAN. Исходный текст документа HTML, в котором имеется таблица с общим заголовком для двух строк, показан в листинге 25.

Листинг 25. Файл chap3\tableh3.htm

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

<HTML>

<HEAD>

<TITLE>Таблицы с заголовком</TITLE>

</HEAD>

<TR>

<TH ROWSPAN=2>Строка 1 и 2</TH>

</TR>

<TR>

</TR>

<TR>

<TH>Строка 3</TH>

</TR>

</TABLE>

</BODY>

</HTML>

Внешний вид соответствующей таблицы мы привели на рис.21.

Рис.21. Таблица с общим заголовком для двух строк

Многослойные заголовки

Строки или столбца таблицы могут иметь несколько заголовков, расположенных слоями. В листинге 26 мы привели исходный текст документа HTML с двойным заголовком столбцов.

Листинг 26. Файл chap3\tableh4.htm

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

<HTML>

<HEAD>

<TITLE>Таблицы с заголовком</TITLE>

</HEAD>

<TR>

<TH COLSPAN=3>Заголовок для всех столбцов</TH>

</TR>

<TR>

<TH COLSPAN=2>Стобец 1 и 2</TH>

<TH>Столбец 3</TH>

</TR>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

Первый заголовок в этом документе относится ко всем столбцам. Второй заголовок расположен под первым. В нем используется объединение соседних ячеек для первого и второго столбца. Внешний вид получившейся таблицы показан на рис.22.

Рис. 22. Таблица с двойным заголовком

Таблицы с подписью

Помимо заголовка, вы можете снабдить таблицу подписью, для чего следует воспользоваться оператором <CAPTION>.

В листинге 27. мы привели исходный текст документа HTML, в котором создается таблица с подписью. Для оформления подписи мы использовали здесь расширение навигатора Microsoft Internet Explorer - параметр VALIGN оператора <CAPTION>.

Листинг 27. Файл chap3\caption1.htm

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

<HTML>

<HEAD>

<TITLE>Таблицы с заголовком и подписью</TITLE>

</HEAD>

<CAPTION VALIGN=TOP ALIGN=RIGHT>Табл. 1.1. Таблица с двойным заголовоком</CAPTION>

<TR>

<TH COLSPAN=3>Заголовок для всех столбцов</TH>

</TR>

<TR>

<TH COLSPAN=2>Стобец 1 и 2</TH>

<TH>Столбец 3</TH>

</TR>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

Внешний вид этой таблицы при ее просмотре в навигаторе Microsoft Internet Explorer показан на рис.23.

Рис. 23. Результат просмотра таблицы с подписью в навигаторе Microsoft Internet Explorer

Если же вы попытаетесь просмотреть этот документ при помощи навигатора Netscape Navigator, который “не понимает” параметр VALIGH и по другому трактует параметр ALIGN, то увидите таблицу, показанную на рис.24.

Рис. 24. Результат просмотра таблицы с подписью в навигаторе Netscape Navigator

В документе HTML, исходный текст которого показан в листинге 28, мы расположили подпись под таблицей, использовав для этого способ, совместимый как с навигатором Netscape Navigator, так и с навигатором Microsoft Internet Explorer.

Листинг 28. Файл chap3\caption2.htm

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

<HTML>

<HEAD>

<TITLE>Таблицы с заголовком и подписью</TITLE>

</HEAD>

<CAPTION ALIGN=BOTTOM>Табл. 1.2. Таблица с двойным заголовоком</CAPTION>

<TR>

<TH COLSPAN=3>Заголовок для всех столбцов</TH>

</TR>

<TR>

<TH COLSPAN=2>Стобец 1 и 2</TH>

<TH>Столбец 3</TH>

</TR>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

Внешний вид полученной таблицы показан на рис. 25.

Рис. 25. Подпись расположена под таблицей

Выравнивание текста в ячейках таблицы

С помощью параметров ALIGN и VALIGN можно выполнять выравнивание текста, расположенного в ячейках таблицы. В листинге 29. мы привели исходный текст документа HTML, содержащего достаточно сложную таблицу с многослойными заголовками, расположенными как сверху, так и слева от таблицы. В операторах, определяющих ячейки таблицы, мы использовали различные комбинации параметров выравнивания.

Листинг 29. Файл chap3\align.htm

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

<HTML>

<HEAD>

<TITLE>Выравнивание в таблицах</TITLE>

</HEAD>

<TR>

<TD>

<TH COLSPAN=3>Тип выравнивания</TH>

</TD>

</TR>

<TR>

<TD>

<TH>По левому краю</TH>

<TH>Центрирование</TH>

<TH>По правому краю</TH>

</TD>

</TR>

<TR>

<TH ROWSPAN=2>Направление</TH>

<TH>По вертикали</TH>

<TD>Этот текст выровнен по левому краю</TD>

<TD ALIGN=CENTER>Этот текст отцентрирован</TD>

<TD ALIGN=RIGHT>Этот текст выровнен по правому краю</TD>

</TR>

<TR>

<TH>По горизонтали</TH>

<TD VALIGN=TOP>Вверху</TD>

<TD ALIGN=CENTER>Посередине</TD>

<TD VALIGN=BOTTOM ALIGN=RIGHT>Внизу</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Внешний вид таблицы показан на рис. 26.

Рис. 26. Различные способы выравнивания текста в ячейках таблицы

Таблицы внутри таблиц

Таблицы могут содержать в своих ячейках многие объекты, допустимые в документах HTML. В частности, вы можете разместить внутри ячейки таблицы другую таблицу, создав таким образом вложенные таблицы.

В листинге 30 мы привели исходный текст документа HTML, в котором создается такая вложенная таблица.

Листинг 30. Файл chap3\nested.htm

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

<HTML>

<HEAD>

<TITLE>Вложенные таблицы</TITLE>

</HEAD>

<TR>

<TD>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</TD>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

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

Рис. 27. Вложенная таблица

3. ГРАФИКА, АНИМАЦИЯ, ВИДЕО И ЗВУК

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

Для подготовки мультимедийной информации вам могут потребоваться специальные приложения, такие как графические редакторы, средства ввода и обработки звука. В качестве примера мы можем назвать такие графические редакторы как Corel Draw и Adobe Photoshop.

Не исключено, что вам придется приобрести видеокамеру, адаптер для ввода видеосигнала от видеомагнитофона или видеокамеры, а также редактор файлов с видеофрагментами. В 15 томе “Библиотеки системного программиста”, который называется “Мультимедиа для Windows”, мы рассмотрели основные средства и методики, пользуясь которыми вы сможете самостоятельно создавать небольшие видеофрагменты в формате файлов AVI.

Если вы не обладаете художественными талантами, необходимыми для создания графических изображений или видеофрагментов, можно их заказать у художника либо приобрести отдельно. В любом случае вам нужно позаботиться о соблюдении авторских прав на всю информацию, которую вы собираетесь опубликовать на вашем сервере WWW, а также на все приложения, которые вы установите как расширение сервера (программы CGI или расширения типа ISAPI).

3.1 Размещение графических изображений

Для размещения графических изображений внутри текста или таблиц вы можете воспользоваться оператором <IMG>. Для этого оператора можно указывать ряд параметров, определяющих адрес файла с изображением, выравнивание текста, расположенного возле изображения и так далее. Ниже мы привели список параметров, допустимых для оператора <IMG> в стандарте языка HTML версии 3.2.

Параметр Описание

SRC

Адрес URL файла с графическим изображением

ALT

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

Информация о работе Обучение языку HTML