Материалы представленные на сайте исключительно с целью ознакомления пользователям Интернета и не преследуют коммерческих целей или нарушение авторских прав.
© 2018 - 2024
В WWW существует негласное правило, согласно которому первый файл, загружаемый броузером с какого-либо сервера по умолчанию, должен называться index.html. Таким образом, если вы явно не указываете имя документа, который вам требуется, а пишете только имя сервера, например www.yahoo.com, автоматически будет загружен файл index.html, находящийся на этом сервере, т. е. фактически будет выполнена команда http://www.yahoo.com/index.html. Итак, первый файл который мы с вами создадим, а потом разместим в Internet, будет называться index.html. Для этого вам придется освоить лишь несколько команд форматирования и оформления текста в формате HTML.
Как устроен HTML-документ
HTML-документ — это просто текстовый файл с расширением *.html (Unix-системы могут содержать файлы с расширением *.htmll). Вот самый простой HTML-документ:
<html>
<head><title> Пример 1 </title></head>
<body>
<H1>Привет! </H1>
<P> Это простейший пример HTML-документа. </P>
<P>Этот *.html-файл может быть одновременно открыт и в WordPad, и в Explorer. Сохранив изменения в WordPad, просто нажмите Обновить в Internet Explorer, чтобы увидеть эти изменения реализованными в HTML-документе.</P>
</body>
</html>
Для удобства чтения введены дополнительные отступы, однако в HTML это совсем не обязательно. Более того, браузеры просто игнорируют символы конца строки и множественные пробелы в HTML-файлах. Поэтому наш пример вполне мог бы выглядеть и вот так:
<html>
<head> <title>Пример 1</title> </head>
<body>
<H1>Привет!</H1>
<P>Это простейший пример HTML-документа.</P>
<P>Этот *.html-файл может быть одновременно открыт из WordPad, ивInternet Explorer. Сохранив изменения в WordPad, просто нажмите кнопку Reload ('перезагрузить') в Internet Explorer, чтобы увидеть эти изменения реализованными в HTML-документе.</P>
</body></html>
Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками «<« и «>«. Такой фрагмент (например, <html>) называется меткой (по-английски — tag, читается «тэг»).
Большинство HTML-меток — парные, то есть на каждую открывающую метку вида <tag> есть закрывающая метка вида </tag> с тем же именем, но с добавлением «/».
Метки можно вводить как большими, так и маленькими буквами. Например, метки <body>, <BODY> и <Body> будут восприняты браузером одинаково.
Многие метки, помимо имени, могут содержать атрибуты — элементы, дающие дополнительную информацию о том, как браузер должен обработать текущую метку. В нашем простейшем документе, однако, нет ни одного атрибута.
Обязательные тэги
<html> ... </html>Метка <html> должна открывать HTML-документ. Аналогично, метка </html> должна завершать HTML-документ.
<head> ... </head>
Эта пара меток указывает на начало и конец заголовка документа. Помимо наименования документа (см. описание метки <title> ниже), в этот раздел может включаться множество служебной информации, о которой мы обязательно поговорим чуть позже.
<title> ... </title>
Все, что находится между метками <title> и </title>, толкуется браузером как название документа. Internet Explorer и Netscape Navigator, например, показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 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>
С этого момента Вы знаете достаточно, чтобы создавать простые HTML-документы самостоятельно от начала до конца. Как можно улучшить наш простой HTML-документ. Начнем с малого — с абзаца.
Непарные тэги
В этом разделе поговорим о метках, которые не подчиняются двум основным правилам HTML: все они непарные, а некоторые (так называемые &-последовательности) к тому же должны вводиться только маленькими буквами.
<BR>
Эта метка используется, если необходимо перейти на новую строку, не прерывая абзаца.
Метка <HR> описывает вот такую горизонтальную линию:
Метка может дополнительно включать атрибуты SIZE (определяет толщину линии в пикселях) и/или WIDTH (определяет размах линии в процентах от ширины экрана).
&-последовательности
Поскольку символы <« и «>« воспринимаются браузерами как начало и конец HTML-меток, возникает вопрос: а как показать эти символы на экране? В HTML это делается с помощью &-последовательностей (их еще называют символьными объектами или эскейп-последовательностями). Браузер показывает на экране символ «<«, когда встречает в тексте последовательность < (по первым буквам английских слов less than — меньше, чем). Знак «>» кодируется последовательностью > (по первым буквам английских слов greater than — больше, чем).
Символ «&» (амперсанд) кодируется последовательностью &
Двойные кавычки («) кодируются последовательностью "
Помните: точка с запятой — обязательный элемент &-последовательности. Кроме того, все буквы, составляющие последовательность, должны быть в нижнем регистре (т.е., маленькие). Использование меток типа " или & не допускается.
Вообще говоря, &-последовательности определены для всех символов из второй половины ASCII-таблицы (куда, естественно, входят и русские буквы). Дело в том, что некоторые серверы не поддерживают восьмибитную передачу данных, и поэтому могут передавать символы с ASCII-кодами выше 127 только в виде &-последовательностей.
Комментарии. Браузеры игнорируют любой текст, помещенный между<!-- и -->. Это удобно для размещения комментариев.
<!-- Это комментарий -->
Форматирование шрифта
HTML допускает два подхода к шрифтовому выделению фрагментов текста. С одной стороны, можно прямо указать, что шрифт на некотором участке текста должен быть жирным или наклонным, то есть изменить физический стиль текста. С другой стороны, можно пометить некоторый фрагмент текста как имеющий некоторый отличный от нормального логический стиль, оставив интерпретацию этого стиля браузеру. Поясним это на примерах.
Физические стили. Под физическом стилем принято понимать прямое указание браузеру на модификацию текущего шрифта. Например, все, что находится между метками <B> и </B>, будет написано жирным шрифтом. Текст между метками <I> и </I> будет написан наклонным шрифтом.
Несколько особняком стоит пара меток <TT> и </TT>. Текст, размещенный между этими метками, будет написан шрифтом, имитирующим пишущую машинку, то есть имеющим фиксированную ширину символа.
Организация текста внутри документа
HTML позволяет определять внешний вид целых абзацев текста. Абзацы можно организовывать в списки, выводить их на экран в отформатированном виде, или увеличивать левое поле. Разберем все по порядку.
Ненумерованные списки: <UL> ... </UL>
Текст, расположенный между метками <UL> и </UL>, воспринимается как ненумерованный список. Каждый новый элемент списка следует начинать с метки <LI>. Обратите внимание: у метки <LI> нет парной закрывающей метки.
Нумерованные списки: <OL> ... </OL>
Нумерованные списки устроены точно так же, как ненумерованные, только вместо символов, выделяющих новый элемент, используются цифры. Если слегка модифицировать наш предыдущий пример:
<OL>
<LI>Ильгиз;
<LI>Гульнара;
<LI>Сергей
</OL>
получится вот такой список:
3. Ильгиз;
4. Гульнара;
5. Сергей
Списки определений: <DL> ... </DL>
Список определений несколько отличается от других видов списков. Вместо меток <LI> в списках определений используются метки <DT> (от английского definition term — определяемый термин) и <DD> (от английского definition definition — определение определения).
Если определяемые термины достаточно коротки, можно использовать модифицированную открывающую метку <DL COMPACT>. Например, такой фрагмент HTML-текста приведен в таблице 18.1.
Таблица 18.1 – Пример использования DL COMPACT
| Фрагмент HTML-текста | Вид на экране |
| <DL COMPACT> <DT>А <DD>Первая буква алфавита <DT>Б <DD>Вторая буква алфавита <DT>В <DD>Третья буква алфавита </DL> | А Первая буква алфавита Б Вторая буква алфавита В Третья буква алфавита |
Вложенные списки. Элемент любого списка может содержать в себе целый список любого вида. Число уровней вложенности в принципе не ограничено, однако злоупотреблять вложенными списками все же не следует.
Вложенные списки очень удобны при подготовке разного рода планов и оглавлений.
Форматированный текст: <PRE> ... </PRE>
В самом начале мы говорили о том, что браузеры игнорируют множественные пробелы и символы конца строки. Из этого правила, однако, есть исключение.
Текст, заключенный между метками <PRE> и </PRE> (от английского preformatted — предварительно форматированный), выводится браузером на экран как есть — со всеми пробелами, символами табуляции и конца строки. Это очень удобно при создании простых таблиц.
Текст с отступом: <BLOCKQUOTE> ... </BLOCKQUOTE>
Текст, заключенный между метками <BLOCKQUOTE> и </BLOCKQUOTE>, выводится браузером на экран с увеличенным левым полем. [25]
Вопросы для самоконтроля:
1. В какие скобки заключаются теги?
2. Первый тэг, который должен находиться в любом HTML-документе это:
3. Определение заголовка должно содержаться внутри тэга:
4. Какой тег служит для создания гипертекста?
5. Какой атрибут устанавливает цвет фона документа?
6. Как в HTML- документе выделить текст курсивом?
7. Какую функцию выполняет атрибут border в теге ?
8. Как изменить цвет ссылки?
9. Как разделить текст горизонтальной чертой?
Связывание в HTM-документе
Связывание
Как уже упоминалось в самом начале, сокращение HTML означает «язык маркировки гипертекстов». Про маркировку мы уже поговорили достаточно. Не пора ли перейти к гипертексту?
Прежде всего, что же такое гипертекст? В отличие от обыкновенного текста, который можно читать только от начала к концу, гипертекст позволяет осуществлять мгновенный переход от одного фрагмента текста к другому. Системы помощи многих популярных программных продуктов устроены именно по гипертекстовому принципу. При нажатии левой кнопкой мыши на некоторый выделенный фрагмент текущего документа происходит переход к некоторому заранее назначенному документу или фрагменту документа.
В HTML переход от одного фрагмента текста к другому задается с помощью метки вида:
<A HREF=«[адрес перехода]»> выделенный фрагмент текста</A>
В качестве параметра [адрес перехода] может использоваться несколько типов аргументов. Самое простое — это задать имя другого HTML-документа, к которому нужно перейти. Например:
<A HREF=«index.html»>Перейти к оглавлению</A>
Такой фрагмент HTML-текста приведет к появлению в документе выделенного фрагмента Перейти к оглавлению, при нажатии на который в текущее окно будет загружен документ index.html, а если вы находитесь в текстовом документе, то может осуществится переход по закладке, или загрузится документ, на который имеется гиперссылка.
Обратите внимание: если в адресе перехода не указан каталог, переход будет выполнен внутри текущего каталога. Если в адресе перехода не указан сервер, переход будет выполнен на текущем сервере.
Из этого следует одно очень важное практическое соображение. Если Вы подготовили к публикации некоторую группу HTML-документов, которые ссылаются друг на друга только по имени файла и находятся в одном каталоге на Вашем компьютере, вся эта группа документов будет работать точно так же, если ее поместить в любой другой каталог на любом другом компьютере, на локальной сети или... на Интернет! Таким образом, у Вас появляется возможность разрабатывать целые коллекции документов без подключения кИнтернет, и только после окончательной готовности, подтвержденной испытаниями, помещать коллекции документов на Интернет целиком.
На практике, однако, часто бывает необходимо дать ссылку на документ, находящийся на другом сервере. Например, если Вы хотите дать ссылку на это руководство со своей странички, Вам придется ввести в свой HTML-документ примерно такой фрагмент: <A HREF=«http://www.nmt/edu.ru/seminar/docHTML_2/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, хотя документ, скорее всего, будет загружен корректно.
Пока что обсуждали только ссылки на HTML-документы. Однако возможны ссылки и на другие виды ресурсов:
<A HREF=«ftp://server/directory/file.ext»> Выгрузить файл</A>
Такая ссылка, если ей воспользоваться, запустит протокол передачи файлов и начнет выгрузку файла file.ext, находящегося в каталоге directory на сервере server, на локальный диск пользователя.
<A HREF=«mailto:user@mail.box»>Послатьписьмо</A>
Если пользователь совершит переход по такой ссылке, у него на экране откроется окно ввода исходящего сообщения его почтовой программы. В строке To: («Куда») окна почтовой программы будет указано user@mail.box. [25]
Вопросы для самоконтроля:
1. Что такое HTML ?
2. Что такое тэг или дескриптор?
3. Приведите примеры тэгов контейнерного типа и одиночных тэгов.
4. Какой минимальный набор тэгов должен присутствовать в HTML-документе?
5. Что такое свойство или атрибут тэга?
6. В каком тэге — открывающем или закрывающем можно указывать атрибуты (свойства) для этого тэга?
7. Какой разделитель используется для отделения одного свойства (атрибута) от другого и от наименования тэга?
Дата: 2019-05-28, просмотров: 206.