- •Создание документов в формате html введение
- •Структура html-документа
- •Эти теги сообщают браузеру, что текст между ними следует интерпретировать как текст html.
- •Создание заголовков
- •Ввод текста и иной информации
- •Стилевое оформление текста
- •Отображение специальных символов
- •Управление цветом
- •Включение списков в web-документы
- •Создание таблиц
- •Создание гиперссылок
- •Включение изображений в html-документы
- •Желаю удачи! вопросы для самоконтроля
- •Литература
Создание гиперссылок
Гиперссылка – это выделенные цветом (подсвеченные, подчеркнутые) слова и фразы. Стоит щелкнуть на такой ссылке, и вы переходите на другую страницу, расположенную на локальном сервере, или открываете сайт службы, которая может находиться где угодно – в соседнем городе или на другой стороне земного шара.
Гиперссылка состоит из следующих элементов:
-
Начальный привязочный тег <A>.
-
Имя документа, на который вы ссылаетесь.
-
Текст (гипертекст), который подчеркивает браузер для обозначения ссылки.
-
Завершающий привязочный тег </A>.
Таблица 11.
|
<A>…</A> |
Начальный и конечный теги, которые позволяют создать гиперссылку (атрибут HREF) или идентификатор фрагмента (атрибут NAME) заголовка HTML-документа. |
Например, такая запись
<A HREF=”списки.html”> график путешествия </A>
обозначает, что слова график путешествия являются гиперссылкой на файл списки.html.
В качестве средства ссылок на другие Web-страницы можно использовать не только текст, но и изображения. Для этого необходимо вместо текста ссылки задать изображение. По умолчанию Web-браузеры окружают изображение–ссылку синей рамкой. Щелкнув мышью на любом месте изображения, посетители переходят на соответствующий документ. В качестве ссылок вы можете использовать любые виды изображений, рисунков и пиктограмм (кроме фоновых рисунков).
Например,
<A HREF= “Эмблема.html”> <IMG SRC=”Hr-polac.gif”> </A>
Старайтесь использовать понятные изображения, чтобы посетители знали, куда их адресует ссылка. При использовании изображений-ссылок чрезвычайно важно задавать альтернативный текст. Тогда те посетители, которым не видны изображения, также смогут пользоваться ссылками.
Компоновка ссылок в виде списков
Ссылки часто компонуют в виде списка. Списки очень удобны, если вы хотите использовать целый ряд ссылок.
Для создания маркированного списка из ссылок воспользуйтесь стандартными тегами <UL> и </UL>. Задайте каждую ссылку с отдельным тегом <LI>, чтобы они располагались в отдельных строках.
Связь с определенными разделами другого html-документа.
Выше было описано, как связать HTML-страницу с началом другого HTML-документа. Но иногда возникает необходимость сформировать ссылку на какой-то раздел в другом документе. Для этого необходимо сначала создать точку привязки в документе назначения. Например, в файле списки.html слово римскими необходимо сделать точкой привязки. Для этого в файле списки.html нужно внести следующие изменения:
<A NAME=”римскими”> римскими цифрами </A>.
Задание 12.
Создайте HTML-документ следующего содержания.
|
ЧЕМУ Я УЖЕ НАУЧИЛСЯ Я умею создавать разнообразные списки:
Маркированный список можно нумеровать не только арабскими цифрами, но и римскими цифрами, а также буквами, прописными и строчными. |
Слово списки сделаем гиперссылкой на файл списки.html, а слово римскими – гиперссылкой на раздел «А можно пронумеровать римскими цифрами» в этом же файле (списки.html).
Сохраните файл под именем ссылки.html в своей личной папке.
Предварительно в файле списки.html создайте точку привязки.
<HTML>
<HEAD>
<TITLE>Ссылки </TITLE>
</HEAD>
<BODY>
<H1> <B> <CENTER> ЧЕМУ Я УЖЕ НАУЧИЛСЯ </CENTER> </B> </H1>
Я умею создавать разнообразные списки:
<UL>
<LI> Нумерованные и маркированные <A HREF=”списки.html”>списки. </A>
<LI> Списки определений.
<LI> Вложенные списки.
</UL>
Маркированный список можно нумеровать не только арабскими цифрами, но и <A HREF=”списки.html#римскими”> римскими </A> цифрами, а также буквами, прописными и строчными.
</BODY>
</HTML>
Связь с определенными разделами того же html-документа.
Во многих случаях нет необходимости создавать несколько HTML-документов. Вместо этого просто создается один большой документ, который разбивается на разделы.
Для разбиения документа на разделы необходимо создавать точки привязки (именованные местоположения) по всему документу, в котором вы хотите определить ссылки.
Задание 13.
-
Создайте файл, где будет собрана вся информация о списках (нумерованных и маркированных, списках определений, вложенных списках). Для этого необходимо скопировать все HTML-файлы о списках в один файл. Отредактировать его и сохранить его под именем все_списки.html в свою личную папку.
-
Вначале документа сделайте ссылки на следующие разделы этого файла: - Маркированные и нумерованные списки. – Списки определений. – Вложенные списки.
-
В конце файла создайте ссылку на начало документа.
Листинг этого задания приведен ниже.
<HTML>
<HEAD>
<TITLE> Все виды списков </TITLE>
</HEAD>
<BODY>
<H1> <B> <A NAME=”все”> ВСЕ <A> ВИДЫ СПИСКОВ </B> </H1>
<P> Списки помогают организовать информацию Такую страницу посетители быстро прочтут, поскольку, бегло взглянув на список, можно быстро найти в нем то, что нужно.
<P> Существуют следующие виды списков:
<UL>
<LI> <A HREF=#МАРКИРОВАННЫЕ> маркированные и нумерованные </A> списки;
<LI> списки <A HREF=#ОПРЕДЕЛЕНИЙ> определений</A> ;
<LI> <A HREF=#ВЛОЖЕННЫЕ> вложенные</A> списки;
</UL>
<HR noshade size=10 color=seagreen>
<H2> <B> <A NAME=”МАРКИРОВАННЫЕ”> МАРКИРОВАННЫЕ И НУМЕРОВАННЫЕ </A> СПИСКИ </B> </H2>
<UL>
<LH> <B> Животные в цирке Барни </B> </LH>
<LI>Слоны
<LI>Львы
<LI>Медведи
</UL>
<OL>
<LH><B> График моего путешествия по Европе </B></LH>
<LI> Прибытие самолетом в Париж
<LI> Ночной переезд в Берлин
<LI> Поезд в Вену
<LI> Самолет в РИМ
<LI> Возвращение в Париж, самолет домой
</OL>
<P> А можно пронумеровать римскими цифрами.
<OL TYPE=I>
<LH><B> График моего путешествия по Европе </B></LH>
<LI> Прибытие самолетом в Париж
<LI> Ночной переезд в Берлин
<LI> Поезд в Вену
<LI> Самолет в Рим
<LI> Возвращение в Париж, самолет домой
</OL>
<HR noshade size=10 color=seagreen>
<H2> <B> СПИСКИ <A NAME=”ОПРЕДЕЛЕНИЙ” >ОПРЕДЕЛЕНИЙ </A> </B></H2>
<DL>
<LH> <B> Теги списков </B> </LH>
<DT> Тег UL </DT>
<DD> Создает маркированный список </DD>
<DT> Тег OL </DT>
<DD> Создает нумерованный список </DD>
<DT> Тег LI </DT>
<DD> Используется как в нумерованном, так и в маркированном списке для назначения элементов списка </DD>
<DT> Тег DL </DT>
<DD> Создает список словарного типа, или список определений </DD>
<DT> Тег DT </DT>
<DD> Задает термин списка </DD>
<DT> Тег DD </DT>
<DD> Задает определение термина списка </DD>
</DL>
<HR noshade size=10 color=seagreen>
<H2> <B> <A NAME=”ВЛОЖЕННЫЕ”> Вложенные </A> списки </B></H2>
<OL>
<LH><B> Дополнительный график моего путешествия по Европе </B></LH>
<LI> Прибытие самолетом в Париж
<UL>
<LI> Подняться на Эйфелеву башню
<LI> Посетить Лувр
</UL>
<LI> Ночной переезд в Берлин
<UL>
<LI> Посетить знаменитую Берлинскую стену
<LI> Съесть колбасы и выпить пива
</UL>
<LI> Поезд в Вену
<LI> Самолет в РИМ
<LI> Возвращение в Париж, самолет домой
</OL>
<HR noshade size=10 color=seagreen>
<P> Если хотите, можете посмотреть все <A HREF=#все> сначала </A>.
</BODY>
</HTML>
Полезные советы.
-
Количество ссылок должно быть не слишком большое.
-
Текст ссылок должен быть понятным.
-
Предупреждайте о ссылках на большие документы.
-
Поддерживайте ссылки в действующем состоянии.