КАТЕГОРИИ: Архитектура-(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) |
Введение. Чтобы опубликовать документ (здесь и далее под документом понимается файл, содержащий некоторую информацию) в Интернет
ЯЗЫК ГИПРЕТЕКСТОВОЙ РАЗМЕТКИ html Чтобы опубликовать документ (здесь и далее под документом понимается файл, содержащий некоторую информацию) в Интернет, достаточно поместить его на сервер, постоянно подключенный к Интернет и способный общаться с другими серверами с помощью протокола передачи гипертекстов (HyperText Transfer Protocol, или http://). Совокупность таких серверов получила название "всемирной паутины" (World Wide Web, или WWW). Разработку документов, однако, можно проводить и на компьютере, не имеющем выхода в Интернет. Термин HTML (HyperText Markup Language) означает "язык маркировки гипертекстов". Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли. Со времени создания первой версии HTML известны спецификации 2.0, 3.0, 3.2, 4.0. Текущую спецификацию HTML всегда можно найти на сервере W3C (http://www.w3.org/). Для работы с HTML необходимо: 1. Любой браузер, т.е., программа, пригодная для просмотра HTML-файлов.(Internet Explorer, Netscape Navigator, Opera и др.) 2. Любой редактор текстовых файлов, поддерживающий русский язык в выбранной Вами кодировке.(Far, Notepad и др.) или специальное программное средство для разработки HTML-файлов (Front Page, Home Site и др.).
2. Структура HTML-документ HTML-документ – это просто текстовый файл с расширением *.html (*.htm). Для удобства чтения в текст можно добавлять пробелы и пустые строки. Но при отображении HTML в браузере игнорируются символы конца строки и множественные пробелы в HTML-файлах. Поэтому наш пример вполне мог бы выглядеть и вот так: Вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками "<" и ">" или тэгах. Большинство HTML-меток парные, то есть на каждую открывающую метку вида <tag> есть закрывающая метка вида </tag> с тем же именем, но с добавлением "/". Метки можно вводить как большими, так и маленькими буквами. Многие метки, помимо имени, могут содержать атрибуты – элементы, дающие дополнительную информацию о том, как браузер должен обработать текущую метку. В состав обязательных тэгов входят <html>... </html> Метка <html> должна открывать HTML-документ. Аналогично, метка </html> должна завершать HTML-документ. <head>... </head> Эта пара меток указывает на начало и конец заголовка документа. В этот раздел может включаться множество служебной информации. <title>... </title> Все, что находится между метками <title> и </title>, определяется браузером как название документа и как правило показывается в заголовке окна. Рекомендуется название не длиннее 64 символов. <body>... </body> Эта пара меток указывает на начало и конец тела HTML-документа, каковое тело, собственно, и определяет содержание документа. <H1>... </H1> – <H6>... </H6> Метки вида <Hi> (где i – цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня – самый крупный, шестого уровня – самый мелкий. <P>... </P> Такая пара меток описывает абзац. Все, что заключено между <P> и </P>, воспринимается как один абзац. Метки <Hi> и <P> могут содержать дополнительный атрибут ALIGN: <H1 ALIGN=CENTER>Выравнивание заголовка по центру</H1> или <P ALIGN=RIGHT>Образец абзаца с выравниванием по правому краю</P> Пример: <html> <head> <title>Пример 2</title> </head> <body> <H1 ALIGN=CENTER>Привет!</H1> <H2>Это чуть более сложный пример HTML-документа</H2> <P>Теперь мы знаем, что абзац можно выравнивать не только влево, </P> <P ALIGN=CENTER>но и по центру</P> <P ALIGN=RIGHT>или по правому краю.</P> </body> </html>
3. Форматирование абзаца Помимо парных меток существуют еще и непарные, а некоторые (так называемые & (амперсант) -последовательности) должны вводиться только маленькими буквами. <BR> Эта метка используется, если необходимо перейти на новую строку, не прерывая абзаца. <P>Однажды в студеную зимнюю пору<BR> Сижу за решеткой в темнице сырой.<BR> Гляжу - поднимается медленно в гору<BR> Вскормленный в неволе орел молодой.</P> <HR> Метка <HR> описывает вот такую горизонтальную линию: Метка может дополнительно включать атрибуты SIZE (определяет толщину линии в пикселах) и/или WIDTH (определяет размах линии в процентах от ширины экрана). <H1>Коллекция горизонтальных линий</H1> <HR SIZE=2 WIDTH=100%><BR> <HR SIZE=4 WIDTH=50%><BR> <HR SIZE=8 WIDTH=25%><BR> <HR SIZE=16 WIDTH=12%><BR> &-последовательности. Поскольку символы "<" и ">" воспринимаются браузерами как начало и конец HTML-меток, в HTML для их показа используют &-последовательностей (их еще называют символьными объектами или эскейп-последовательностями). Браузер показывает на экране символ "<", когда встречает в тексте последовательность < (по первым буквам английских слов less than – меньше, чем). Знак ">" кодируется последовательностью > (по первым буквам английских слов greater than – больше, чем). Символ "&" (амперсанд) кодируется последовательностью & Двойные кавычки (") кодируются последовательностью " Помните: точка с запятой ≈ обязательный элемент &-последовательности. Кроме того, все буквы, составляющие последовательность, должны быть в нижнем регистре (т.е., маленькие). Комментарии. Браузеры игнорируют любой текст, помещенный между <!-- и -->. Это удобно для размещения комментариев. <!-- Это комментарий --> Форматирование шрифта. HTML допускает два подхода к шрифтовому выделению фрагментов текста. С одной стороны, можно прямо указать, что шрифт на некотором участке текста должен быть жирным или наклонным, то есть изменить физический стиль текста. С другой стороны, можно пометить некоторый фрагмент текста как имеющий некоторый отличный от нормального логический стиль, оставив интерпретацию этого стиля браузеру. Поясним это на примерах. Физические стили. Под физическом стилем принято понимать прямое указание браузеру на модификацию текущего шрифта. <B> и </B> жирным шрифтом. <I> и </I > наклонным шрифтом. <TT> и </TT>. Текст, размещенный между этими метками, будет написан шрифтом, имитирующим пишущую машинку, то есть имеющим фиксированную ширину символа. Логические стили. При использовании логических стилей автор документа не может знать заранее, что увидит на экране читатель. Разные браузеры толкуют одни и те же метки логических стилей по-разному. Некоторые браузеры игнорируют некоторые метки вообще и показывают нормальный текст вместо выделенного логическим стилем. Вот самые распространенные логические стили. <EM>... </EM> От английского emphasis ≈ акцент. (наклон) <STRONG>... </STRONG> От английского strong emphasis ≈ сильный акцент. (жирный) <CODE>... </CODE> Рекомендуется использовать для фрагментов исходных текстов. <SAMP>... </SAMP> От английского sample ≈ образец. Рекомендуется использовать для демонстрации образцов сообщений, выводимых на экран программами. <KBD>... </KBD> От английского keyboard ≈ клавиатура. Рекомендуется использовать для указания того, что нужно ввести с клавиатуры. <VAR>... </VAR> От английского variable ≈ переменная. Рекомендуется использовать для написания имен переменных. Пример <html> <head> <title>Пример 5</title> </head> <body> <H1>Шрифтовое выделение фрагментов текста</H1> <P>Теперь мы знаем, что фрагменты текста можно выделять <B>жирным</B> или <I>наклонным</I> шрифтом. Кроме того, можно включать в текст фрагменты с фиксированной шириной символа <TT>(имитация пишущей машинки)</TT></P> <P>Кроме того, существует ряд логических стилей:</P> <P><EM>EM - от английского emphasis - акцент </EM><BR> <STRONG>STRONG - от английского strong emphasis - сильный акцент </STRONG><BR> <CODE>CODE - для фрагментов исходных текстов</CODE><BR> <SAMP>SAMP - от английского sample - образец </SAMP><BR> <KBD>KBD - от английского keyboard - клавиатура</KBD><BR> <VAR>VAR - от английского variable - переменная </VAR></P> </body> </html> 4. Форматирование текста внутри документа HTML позволяет определять внешний вид целых абзацев текста. Абзацы можно организовывать в списки, выводить их на экран в отформатированном виде, или увеличивать левое поле. Ненумерованные списки: <UL>... </UL> Текст, расположенный между метками <UL> и </UL>, воспринимается как ненумерованный список. Каждый новый элемент списка следует начинать с метки <LI>. Например, чтобы создать вот такой список: <UL> <LI>Иван; <LI>Данила; <LI>белая кобыла </UL> · Иван; · Данила; · белая кобыла Обратите внимание: у метки <LI> нет парной закрывающей метки. Нумерованные списки: <OL>... </OL> Нумерованные списки устроены точно так же, как ненумерованные, только вместо символов, выделяющих новый элемент, используются цифры. <OL> <LI>Иван; <LI>Данила; <LI>белая кобыла </OL> 1. Иван; 2. Данила; 3. белая кобыла
Списки определений: <DL>... </DL> Список определений несколько отличается от других видов списков. Вместо меток <LI> в списках определений используются метки <DT> (от английского definition term — определяемый термин) и <DD> (от английского definition definition — определение определения). Разберем это на примере. Допустим, у нас имеется следующий фрагмент HTML-текста: <DL> <DT>HTML <DD>Термин HTML (HyperText Markup Language) означает 'язык маркировки гипертекстов'. Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли. <DT>HTML-документ <DD>Текстовый файл с расширением *.html (Unix-системы могут содержать файлы с расширением *.htmll). </DL> Этот фрагмент будет выведен на экран следующим образом: HTML Термин HTML (HyperText Markup Language) означает 'язык маркировки гипертекстов'. Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли. HTML-документ Текстовый файл с расширением *.html (Unix-системы могут содержать файлы с расширением *.htmll). Обратите внимание: точно так же, как метки <LI>, метки <DT> и <DD> не имеют парных закрывающих меток. Если определяемые термины достаточно коротки, можно использовать модифицированную открывающую метку <DL COMPACT>. Например, вот такой фрагмент HTML-текста: <DL COMPACT> <DT>А <DD>Первая буква алфавита <DT>Б <DD>Вторая буква алфавита <DT>В <DD>Третья буква алфавита </DL> будет выведен на экран примерно так: А Первая буква алфавита Б Вторая буква алфавита В Третья буква алфавита Вложенные списки Элемент любого списка может содержать в себе целый список любого вида. Число уровней вложенности в принципе не ограничено, однако злоупотреблять вложенными списками все же не следует. Вложенные списки очень удобны при подготовке разного рода планов и оглавлений.
Форматированный текст: <PRE>... </PRE> В самом начале мы говорили о том, что браузеры игнорируют множественные пробелы и символы конца строки. Из этого правила, однако, есть исключение. Текст, заключенный между метками <PRE> и </PRE> (от английского preformatted — предварительно форматированный), выводится браузером на экран как есть — со всеми пробелами, символами табуляции и конца строки. Это очень удобно при создании простых таблиц.
Текст с отступом: <BLOCKQUOTE>... </BLOCKQUOTE> Текст, заключенный между метками <BLOCKQUOTE> и </BLOCKQUOTE>, выводится браузером на экран с увеличенным левым полем.
5. Гипертекст Гипертекст в отличие от обыкновенного текста, который можно читать только от начала к концу, позволяет осуществлять мгновенный переход от одного фрагмента текста к другому. При нажатии левой кнопкой мыши на некоторый выделенный фрагмент текущего документа происходит переход к некоторому заранее назначенному документу или фрагменту документа. В HTML переход от одного фрагмента текста к другому задается с помощью метки вида: <A HREF="[адрес перехода]">выделенный фрагмент текста</A> В качестве параметра [адрес перехода] может использоваться несколько типов аргументов. Самое простое – это задать имя другого HTML-документа, к которому нужно перейти. Например: <A HREF="index.html">Перейти к оглавлению</A> Такой фрагмент HTML-текста приведет к появлению в документе выделенного фрагмента Перейти к оглавлению, при нажатии на который в текущее окно будет загружен документ index.html. Если в адресе перехода не указан каталог и сервер, переход будет выполнен внутри текущего каталога на текущем сервере. Если Вы подготовили к публикации некоторую группу HTML-документов, которые ссылаются друг на друга только по имени файла и находятся в одном каталоге на Вашем компьютере, вся эта группа документов будет работать точно так же, если ее поместить в любой другой каталог на любом другом компьютере, на локальной сети или... на Интернет! Таким образом, у Вас появляется возможность разрабатывать целые коллекции документов без подключения к Интернет, и только после окончательной готовности, подтвержденной испытаниями, помещать коллекции документов на Интернет целиком. На практике, однако, часто бывает необходимо дать ссылку на документ, находящийся на другом сервере. Например, если Вы хотите дать ссылку на это руководство со своей странички, Вам придется ввести в свой HTML-документ примерно такой фрагмент: <A HREF="http://www.yi.com/home/ChuvakhinNikolai/index.html"> Практическое руководство по HTML Николая Чувахина</A> При необходимости можно задать переход не просто к некоторому документу, но и к определенному месту внутри этого документа. Для этого необходимо создать в документе, к которому будет задан переход, некоторую опорную точку, или анкер. Разберем это на примере. Допустим, что необходимо осуществить переход из файла 1.html к словам "Переход закончен" в файле 2.html (файлы находятся в одном каталоге). Прежде всего, необходимо создать вот такой анкер в файле 2.html: <A NAME="AAA"> Переход закончен </A> Слова "Переход закончен" при этом никак не будут выделены в тексте документа. Затем в файле 1.html (или в любом другом) можно определить переход на этот анкер: <A HREF="2.html#AAA">Переход к анкеру AAA</A> Кстати говоря, переход к этому анкеру можно определить и внутри самого документа 2.html ≈ достаточно только включить в него вот такой фрагмент: <A HREF="#AAA"> Переход к анкеру AAA </A> На практике это очень удобно при создании больших документов. В начале документа можно поместить оглавление, состоящее из ссылок на анкеры, расположенные в заголовках разделов документа. Во избежание недоразумений рекомендуется задавать имена анкеров латинскими буквами. Следите за написанием имен анкеров: большинство браузеров отличают большие буквы от маленьких. Если имя анкера определено как AAA, ссылка на анкер aaa или AaA не выведет Вас на анкер AAA, хотя документ, скорее всего, будет загружен корректно. Возможны ссылки и на другие виды ресурсов: <A HREF="ftp://server/directory/file.ext"> Выгрузить файл </A> Такая ссылка, если ей воспользоваться, запустит протокол передачи файлов и начнет выгрузку файла file.ext, находящегося в каталоге directory на сервере server, на локальный диск пользователя. <A HREF="mailto:user@mail.box"> Послать письмо </A> Если пользователь совершит переход по такой ссылке, у него на экране откроется окно ввода исходящего сообщения его почтовой программы. В строке To: ("Куда") окна почтовой программы будет указано user@mail.box.
6. Изображения в HTML-документе Встроить изображение в HTML-документ очень просто. Для этого нужно только иметь это самое изображение в формате GIF (файл с расширением *.gif) или JPEG (файл с расширением *.jpg или *.jpeg) и одну строчку в HTML-тексте. Допустим, нам нужно включить в документ изображение, записанное в файл picture.gif, находящийся в одном каталоге с HTML-документом. Тогда строчка будет вот такая: <IMG SRC="picture.gif"> Метка <IMG SRC="[имя файла]"> может также включать атрибут ALT="[текст]", например: <IMG SRC="picture.gif" ALT="Картинка"> Встретив такую метку, браузер покажет на экране текст Картинка и начнет загружать на его место картинку из файла picture.gif. Атрибут ALT может оказаться необходимым для старых браузеров, которые не поддерживают изображений, а также на случай, если у браузера отключена автоматическая загрузка изображений (при медленном подключении к Интернет это делается для экономии времени).
Разберем все, что мы знаем об изображениях, с помощью примера 8. < <H1>Изображения </H1> <P>Изображение можно встроить очень просто: </P> <P><IMG SRC="picture.gif"></P> <P>Кроме того, изображение можно сделать "горячим", то есть осуществлять переход при нажатии на изображение:</P> <P><A HREF="index.html"><IMG SRC="picture.gif"></A></P>
Если ссылка на изображение находится между метками <A HREF="..."> и </A>, изображение фактически становится кнопкой, при нажатии на которую происходит переход по ссылке.
7. Цветовая гамма HTML-документа
Цветовая гамма HTML-документа определяется атрибутами, размещенными внутри метки <BODY>. Вот список этих атрибутов: bgcolor – Определяет цвет фона документа. text – Определяет цвет текста документа. link – Определяет цвет выделенного элемента текста, при нажатии на который происходит переход по гипертекстовой ссылке. vlink – Определяет цвет ссылки на документ, который уже был просмотрен ранее. alink – Определяет цвет ссылки в момент, когда на нее указывает курсор мыши и нажата ее правая кнопка, то есть непосредственно перед переходом по ссылке.
Цвет кодируется последовательностью из трех пар символов. Каждая пара представляет собой шестнадцатиричное значение насыщенности заданного цвета одним из трех основных цветов (красным, зеленым и синим) в диапазоне от нуля (00) до 255 (FF). Разберем несколько примеров. bgcolor=#FFFFFF Цвет фона. Насыщенность красным, зеленым и синим одинакова ≈ FF (это шестнадцатиричное представление числа 255). Результат ≈ белый цвет. text=#000000 Цвет текста. Насыщенность красным, зеленым и синим одинакова ≈ 00 (ноль). Результат ≈ черный цвет. link=#FF0000 Цвет гипертекстовой ссылки. Насыщенность красным ≈ FF (255), зеленым и синим ≈ 00 (ноль). Результат ≈ красный цвет. Кроме того, метка <BODY> может включать атрибут background="[имя файла]", который задает изображение, служащее фоном для текста и других изображений. Как и любое другое изображение, фон должен быть представлен в формате GIF (файл с расширением *.gif) или JPEG (файл с расширением *.jpg или *.jpeg). Браузеры заполняют множественными копиями изображения-фона все пространство окна, в котором открыт документ. Важно отметить, что цвет фона и изображение-фон никак не отображаются на бумаге при выводе HTML-документа на печать. Из этого есть одно важное практическое следствие: старайтесь не использовать текст белого цвета.
8. Заголовок HTML-документа. Заголовок HTML-документа, вообще говоря, не виден пользователю при просмотре. Однако в нем есть некоторые интересные особенности, которые стоит знать. Заголовок HTML-документа может включать неограниченное количество так называемых META -инструкций. META-инструкция – это просто способ определить некоторую переменную путем указания ее имени (атрибут NAME) и значения (атрибут CONTENT). Вот некоторые наиболее типичные META-инструкции: <META NAME=" description " CONTENT="Это руководство - учебник для тех, кто хочет публиковать документацию любого рода на глобальной компьютерной сети Интернет"> Такая META-инструкция определяет переменную description, содержащую краткое описание документа. Многие поисковые механизмы постоянно сканируют Интернет в поисках HTML-файлов, отыскивают в них эту переменную, сохраняют ее в своих базах данных и демонстрируют ее в ответ на запросы пользователей. <META NAME=" keywords " CONTENT="Интернет, HTML, WWW, руководство, публикация, гипертекст"> Такая META-инструкция определяет переменную keywords, содержащую набор ключевых слов, описывающих содержание документа. На практике поиск по ключевым словам очень удобно использовать при строительстве поискового механизма, работающего в пределах одного сервера (со стороны очень похоже, что именно такой подход был использован, например, при создании сервера технической поддержки фирмы Novell, ведущего производителя операционных систем для локальных компьютерных сетей). Другая группа META-инструкций определяет эквиваленты команд протокола передачи гипертекстов. (Не переживайте, это не так страшно, как кажется на первый взгляд!) Разберем несколько примеров: <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=windows-1251"> Эта META-инструкция дает браузеру указание интерпретировать загружаемый документ как содержащий HTML-текст в кодировке Windows/1251. <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=koi8-r"> Эта META-инструкция абсолютно аналогична предыдущей, только в качестве кодировки указана КОИ-8. <META HTTP-EQUIV="Refresh" CONTENT="[время]; URL=[документ]"> Такая META-инструкция дает браузеру примерно такое указание: "Если через [время] секунд после завершения загрузки этого документа пользователь не перейдет к другому документу, начать загрузку ресурса [документ]". Более конкретно это может выглядеть, к примеру, вот так: <META HTTP-EQUIV="Refresh" CONTENT="10; URL=http://www.yi.com/home/ChuvakhinNikolai/"> Если пользователь не предпримет никаких видимых действий в течение 10 секунд после загрузки документа, содержащего такую инструкцию, автоматически будет загружен документ http://www.yi.com/home/ChuvakhinNikolai/. META-инструкцию Refresh можно использовать, например, если Вы перенесли некоторый документ с одного сервера на другой. Вместо копии документа на старом сервере можно оставить короткое сообщение о переносе, включающее META-инструкцию Refresh и адрес документа на новом сервере. Если в качестве параметра [документ] подставить имя файла, содержащего звук, через [время] секунд после загрузки HTML-файла начнется загрузка и проигрывание этого звука (при условии, конечно, что браузер пользователя поддерживает формат этого звукового файла). Очень удобно для всякого рода приветственных речей.
9. Таблицы На практике иногда очень хочется расположить текст в несколько колонок. Таблица может в этом помочь. Кроме того, таблица, состоящая из одной ячейки, может очень эффектно выделить фрагмент текста, на который Вы хотите обратить внимание читателя. Пример. <HTML> <HEAD> <TITLE>Пример 10</TITLE> </HEAD> <H1>Простейшая таблица </H1> <TABLE BORDER=1> <!--Это начало таблицы--> <CAPTION> <!--Это заголовок таблицы--> У таблицы может быть заголовок </CAPTION> <TR> <!--Это начало первой строки--> <TD> <!--Это начало первой ячейки--> Первая строка, первая колонка </TD> <!--Это конец первой ячейки--> <TD> <!--Это начало второй ячейки--> Первая строка, вторая колонка </TD> <!--Это конец второй ячейки--> </TR> <!--Это конец первой строки--> <TR> <!--Это начало второй строки--> <TD> <!--Это начало первой ячейки--> Вторая строка, первая колонка </TD> <!--Это конец первой ячейки--> <TD> <!--Это начало второй ячейки--> Вторая строка, вторая колонка </TD> <!--Это конец второй ячейки--> </TR> <!--Это конец второй строки--> </TABLE> <!--Это конец таблицы--> </BODY> </HTML> Таблица начинается с метки <TABLE> и заканчивается меткой </TABLE>. Метка <TABLE> может включать несколько атрибутов:
Дата добавления: 2014-01-11; Просмотров: 423; Нарушение авторских прав?; Мы поможем в написании вашей работы! Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет |