КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Структура тэга
|
|
|
|
Лекция 10. Язык HTML, DHTML и CSS.
Язык гипертекстовой разметки HTML (HyperText Markup Language) был предложен Тимом Бернерсом-Ли в 1989 году и в настоящее время является стандартом для представления гипертекстовых документов в сети World Wide Web (WWW). Поскольку большинство людей, перемещаясь по сайтам при помощи гиперссылок, никогда не покидают WWW, то можно сказать, что HTML – это один из основных языков в Internet.
Язык HTML представляет собой инструкции, называемые тэгами, на основании которых Web-браузер (например Internet Explorer) создает и форматирует гипертекстовую страницу. Тэг состоит из трех элементов:
Таблица 8.1.
| Элемент | Синтаксис | Пример |
| 1. Начало тэга | <тэг параметр1=значение1 параметрN=значениеN> | <TABLE WIDTH=50> |
| 2. Тело тэга | содержимое, зависит от самого тэга | |
| 3. Конец тэга | </тэг> | </TABLE> |
Поскольку тэги распознаются и выполняются web-браузером, то язык HTML не зависит от типа компьютера. Существует множество различных тэгов, позволяющих включать в HTML-страницу таблицы, рисунки, гиперссылки, задавать шрифт и цвет фона, и даже встраивать в страницу программы, написанные на языках Java, Java-script и VBScript. Однако для того, чтобы тэги работали, они должны быть правильно организованы. Браузеры не выполняют неизвестные или не правильно записанные тэги, благодаря чему достигается надежность HTML: даже если вы все сделаете не правильно – взрыва не произойдет, просто правильные команды будут выполнены, а не правильные или неизвестные браузер проигнорирует.
Ниже будут рассмотрены некоторые основные тэги HTML-документа. Конечно, можно не зная ни одного тега создать HTML-документ при помощи специализированных программ, таких как MS Front Page, или, на худой конец, создать документ Word с гиперссылками и сохранить его в формате HTML. Однако полезно знать хотя бы минимум информации по языку HTML, что повысит эффективность работы (т.к. специализированные программы порой создают крайне не эффективный HTML-код) и позволит исполь-зовать чужие HTML-странички для разработки собственных. Ведь для того, чтобы просмотреть HTML-код понравившегося сайта, достаточно дать команду “Просмотр в виде HTML” в контекстном меню Internet Explorer и подправить его при помощи "Блокнота" или любого другого текстового редактора, позволяющего сохранять файл в формате "Только текст". Базовая структура HTML-документа представлена ниже:
|
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Это заголовок HTML-документа, однако! </TITLE>
</HEAD>
<BODY> А это содержимое HTML-документа, однозначно!!! </BODY>
</HTML>
Здесь тэги обозначают следующее:
Таблица 8.2. Тэги структуры HTML-документа.
| Тэг | Значение |
| <!DOCTYPE HTML PUBLIC "-//W3C// DTD HTML 4.0 Transitional//EN"> | Тег указывает на то, что данный документ является документом HTML и указывает версию HTML. Фактически, этот тег является комментарием HTML и не обязате-лен. Однако, учитывая существование документов XML, его желательно указывать. |
| <HTML> </HTML> | Указывают на начало и конец HTML-документа. Любой HTML-документ должен быть заключен в эти тэги. В тэге HTML иногда указывается версия языка HTML использованная при написании этого документа. |
| <HEAD> </HEAD> | Начало и конец заголовка документа. В заголовке обычно указывается различная служебная информация: ключевые слова, тип кодировки документа и т.д. Это поле обычно просматривают поисковые сервера для того, чтобы определить содержимое документа. |
| <TITLE> </TITLE> | Текст, заключенный между этими тэгами, отображается в заголовке окна Internet Explorer при просмотре HTML-документа. |
| <BODY> </BODY> | Содержимое HTML-документа. Тэг BODY может иметь следующие параметры: text – цвет текста документа. Название цвета указывается английским словом или в RGB. Пример: <BODY text="yellow"> или text="#FFFF00". background – фоновая картинка документа. Пример: <BODY background="fon.gif">. bgproperties – при задании этому параметру значения fixed, фоновая картинка не будет прокручиваться вместе с документом, т.е. будет неподвижна. Пример: <BODY bgproperties="fixed"> bgcolor – цвет фона документа. Если указать одновременно и параметр background и параметр bgcolor, то цвет фона документа будет отображаться только если не удастся загрузить фоновую картинку. nowrap– при задании этого параметра, строчка, не помещающаяся в окне, не будет переносится на новую строку (появятся полосы прокрутки). Пример: <BODY nowrap> link – цвет гиперссылок в документе. alink – цвет активных (выделенных) гиперссылок в документе, vlink – цвет посещенных гиперссылок в документе. |
В заголовке, при помощи тэга <META> полезно указать ключевые слова (keywords) и кодировку (charset) документа. Ключевые слова используются поисковыми машинами Internet, при анализе содержимого документа. Кодировка важна для правильного отображения языка документа. В рамках тэга <BODY> </BODY> пишется содержимое всего остального документа, в виде обычного текста, заключенного в тэги форматирования, а также другие специальные тэги.
|
|
|
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD><TITLE>Пример HTML-документа</TITLE>
<META name="keywords" content="ключевое слово1, ключевое слово2, ключевое слово3">
<META content="text/html; charset=windows-1251" http-equiv="Content-Type">
</HEAD>
<BODY text="blue" bgcolor="yellow" background="fon.gif" bgproperties="fixed" link="green" alink="red" nowrap>
<!-- Это комментарий. Отображаться на экране не будет -->
<B> Этот текст будет выведен жирным (Bold) шрифтом </B>
<CENTER><I><B><U> Этот текст будет выведен по центру (Center), наклонным (Italic), жирным (Bold) и подчеркнутым (Underline) шрифтом </U></B></I></CENTER>
<H1> Это текст заголовка (Heading), самый крупный </H1>
<H6> Это текст заголовка (Heading), самый мелкий </H6>
<FONT face="Times" size="7" color="white"> Этот текст будет выведен шрифтом Times, размером 7 (размеры от 1 до 7), белым цветом </FONT>
<BR> Здесь будет новая строка (BR = Break). Тэг BR закрывать не надо.
|
|
|
<HR size="5px" width="70%" align="left" > Здесь будет горизонтальная линия: толщина=5 пикселей, дли-на=70% экрана (можно в пикселях), выравнивание – по левому краю страницы. Тэг HR закрывать не надо.
<PRE> Текст, расположенный между тэгами PRE, будет выводится на экран "как есть", т.е. с учетом вводов, пробелов и т.п. </PRE>
<A HREF="http://www.microsoft.com"> Этот текст будет гиперссылкой </A>
<A NAME="Metka"> Этот текст будет помечен закладкой (Anchor) с именем Metka </A>
<A HREF="#Metka"> Вот так, внутри документа, можно сделать гиперссылку на созданную выше закладку Metka для быстрого перехода по тексту документа </A>
<A HREF="../../katalog/file.html#Metka3"> Вот так можно сделать гиперссылку на конкретное место (закладку Metka3) файла file.htm, находящийся на два каталога выше, в папке katalog </A>
<IMG src="http://microsoft.com/risunok.gif" alt="Тэг IMG отображает рисунок из файла risunok.gif, размером 300x200 пикселей, без рамки (рамка=0), а текст, который вы читаете, будет отображен, если рисунок не удасться загрузить" width="300px" height="200px" border="0">
<!-- А вот так (см. ниже) можно сделать гиперссылку в виде рисунка. -->
<A HREF="http://www.microsoft.com"> <IMG src="risunok.gif"> </A>
</BODY>
</HTML>
Создание таблиц в HTML
Среди других тэгов отдельного внимания заслуживает тэг TABLE, отвечающий за создание таблиц. Таблицы можно использовать как непосредственно, так и для привязки текста к определенному месту экрана. Так, например, обтекание рисунка текстом справа, в рамках HTML проще всего сделать, создав 2 ячейки таблицы: в левой – рисунок, в правой – текст, толщина рамки - 0. Ниже, для примера, приведен HTML-код и показана таблица, которую он создает:
| Декабрь | ||||||
| Понедельник | Вторник | Среда | Четверг | Пятница | Суббота | Воскресенье |
рис 8.1. Пример создаваемой таблицы.
<TABLE width="500px" border="5" align="Left">
<TBODY>
<TR> <TH align="Center" valign="Middle" colspan="7"> Декабрь </TH> </TR>
<TR Align="Center">
<TH>Понедельник</TH> <TH>Вторник</TH> <TH>Среда</TH> <TH>Четверг</TH>
|
|
|
<TH>Пятница</TH> <TH>Суббота</TH> <TH>Воскресенье</TH> </TR>
<TR valign="Top">
<TD>1</TD> <TD>2</TD> <TD>3</TD> <TD>4</TD> <TD>5</TD> <TD>6</TD> <TD>7</TD> </TR>
<TR valign="Top">
<TD>8</TD> <TD>9</TD> <TD>10</TD> <TD>11</TD> <TD>12</TD> <TD>13</TD> <TD>14</TD>
</TR>
</TBODY>
</TABLE>
Здесь тэги и параметры тэгов имеют следующее значение:
Таблица 8.3.
Тэги создания таблицы.
| Тэг | Значение |
| <Tablе> </Table> | начало и конец таблицы. |
| <TBODY></TBODY> | тело таблицы |
| Border | толщина рамки таблицы. |
| Width | ширина таблицы либо в пикселях, либо в процентах ко всему пространству. |
| Align | выравнивание содержимого ячеек (right, left, center). |
| <TR> </TR> | начало и конец строки таблицы. |
| <TH> </TH> | начало и конец ячейки шапки таблицы. |
| <TD> </TD> | начало и конец обычной ячейки таблицы. |
| Valign | вертикальное выравнивание содержимого ячеек (bottom, middle, top). |
| Colspan | количество столбцов, объединяемых данной ячейкой. |
| Rowspan | количество строк, объединяемых данной ячейкой. |
|
|
|
|
|
Дата добавления: 2014-01-20; Просмотров: 543; Нарушение авторских прав?; Мы поможем в написании вашей работы!