Занятие по теме «Инструментальные средства сетевых технологий информационного обслуживания управленческой деятельности »
Задание.
В приложении Notepad (HEFS) сформируйте несколько информационных HTML-страниц, соединенных гиперссылками. Создаваемый документ по содержанию должен отражать сайт-визитку учебного класса, школы, студенческой группы, специальности, факультета или Вашу персональную страницу. Работу сайта продемонстрировать преподавателю в браузере.
Рекомендации
HTML(HyperText Markup Language) - язык гипертекстовой разметки. Данный формат определяет внешний вид документа, взаимное расположение текстовой, графической и мультимедийной информации. Составление и внесение изменений в HTML-файл осуществляется любым текстовым редактором. Для просмотра результатов используется Web-браузер. Основным достоинством HTML-документов является их способность содержать перекрестные ссылки друг на друга. Перекрестные ссылки помогают быстро обратиться к документу с дополнительной информацией по интересующему вопросу, а затем продолжить работу с исходным текстом.
Теги HTML-документа.Любой документ, написанный с помощью языка HTML, состоит из содержимого страницы, то есть текста, и управляющих символов – тегов (tag – ярлык, маркер, знак). Тег – элемент HTML, представляющий собой текст, заключенный в угловые скобки <>. Как правило, используется стартовый (открывающий) тег и завершающий (закрывающий) тег. Завершающий тег отличается от стартового наличием / (слэша). HTML-теги могут быть условно разделены на две категории:
- теги, определяющие, как будет отображаться web-браузером тело документа в целом;
- теги, описывающие общие свойства документа, такие как заголовок или автор документа.
Между открывающим и закрывающим тегами может содержаться текст или другие теги. В таких случаях два тега и часть документа, заключенная между ними образует блок, называемый элементом HTML.
Спецификация атрибута тега включает в себя:
- имя атрибута;
- знак равенства;
- значение атрибута, которое задается строкой символов.
Структура HTML-документа.Документы HTML имеют следующую структуру:
- объявление HTML-документа;
- заголовок;
- тело документа;
- комментарии.
Объявление HTML-документа.Теги <HTML> и </HTML> являются первым и последним любого HTML-документа. Они сообщают web-браузеру, что между ними заключен документ в формате HTML. Web-браузер интерпретирует полученный документ как HTML-документ по наличию в его начале тега <HTML>.
Заголовочная часть.Теги <HEAD> и </HEAD> представляют собой общее описание документа. Как правило, между ними рекомендуется указывать информацию о документе (название, ключевые слова для поиска, описание и др.) Специальные программы-спайдеры (-роботы) поисковых систем используют название документа для построения своих информационных баз данных. Чтобы дать название HTML-документу, текст помещается между тегами <TITLE> - </TITLE>. Этот текст будет помещаться в строку заголовка окна браузера.
Тело HTML-документа.Тело HTML-документа определяет его содержательную часть, оно следует сразу после заголовка и находится между тегами <BODY> и </BODY>. Первый из них должен стоять сразу после тега </HEAD>, а второй – перед тегом </HTML>.
Комментарии.Как любой язык, HTML позволяет вставлять в тело документа комментарии, которые сохраняются при передаче документа по сети, но не отображаются браузером.
Метатеги определяют служебную информацию.
Первый метатег определяет кодировку текста, второй сообщает имя автора и список ключевых слов, третий сообщает, в каком редакторе написан HTML-документ
<TITLE> Пример </TITLE>
Заголовок для окна браузера
</HEAD>
Конец заголовка
<BODY DGCOLOR= «#FFFFFF» TEXT= «#000000»>
Пример начала тела HTML-документа
</BODY>
Конец тела документа
</HTML>
Конец документа HTML
Пример 1:
<HTML>
<HEAD>
<TITLE>Простейший документ</TITLE>
</HEAD>
<BODY TEXT=#0000ff BGCOLOR=#f0f0f0>
<H1>Пример простого документа</H1>
<HR>
Тело HTML-документа может содержать текст и другую форматированную информацию
<HR>
</BODY>
</HTML>
Теги тела документа.В таблице 2 представлены основные теги, предназначенные для оформления страницы.
Таблица 2
Элементы оформления страниц
Коды HTML
Абзац
<P> Абзац </P>
Жирный текст
<STRONG> Жирный текст </STRONG>
Курсив
<EM> Курсив </EM>
Подчеркнутый текст
<U> Подчеркнутый текст </U>
Текст увеличенного размера
<BIG> Текст увеличенного размера </BIG>
Текст уменьшенного размера
<SMALL> Текст уменьшенного размера </SMALL>
Задание размера шрифта
<BASEFONT SIZE=n> (задание базового размера шрифта величиной n, значение которого может быть от 1 до 7)
<FONT SIZE=n> - <FONT> - изменение размера шрифта. Некоторые браузеры тег <FONТ> не поддерживают, поэтому желательно употреблять его только внутри текстовой области. В других случаях лучше использовать теги <Н1>, <Н2>, <НЗ> и т.д.
Текст другого цвета
<FONT COLOR= «#FF0000» Текст другого цвета </FONT>
(#FF0000 – шестнадцатеричный код цвета)
Подстрочные индексы
<SUB> … </SUB>
Надстрочные индексы
<SUP> ... </SUP>
Текст с другим шрифтом
<FONT FACE= «COURIER»> Текст с другим шрифтом
(здесь COURIER – имя шрифта)
Список определений
<DL><DT>Термин</DT> <DD>Определение</DD></DL>
Определяемый термин записывается на одной строке, а его определение — на следующей строке, с небольшим отступом вправо. Тег <DL> позволяет создавать отдельные абзацы с отступом без нумерации или маркеров. Отступ делается от левого края.
Продолжение таблицы 2
Введение текста без форматирования
<PRE>
позволяет отобразить текст без форматирования ("как есть"), теми же символами и с тем же разбиением на строки.
Гиперссылка с URL-адресом
<А НREF="http://www.intuit.ru/index.htm"> Отображаемое название гипертекстовой ссылки </А>
Содержание контейнера гипертекстовой ссылки, заключенное между тегом начала и тегом конца, выделяется в тексте цветом, определенным для контекстных гипертекстовых ссылок. В атрибутах тега <ВОDY>:
Атрибут
Значение
ТЕХТ=#000000
Цвет текста (черный)
ALINK=#FF0000
Цвет "активных" гипертекстовых ссылок (красный)
VLINK=#FF00FF
Цвет пройденных гипертекстовых ссылок (пурпурный)
LINK=#0000FF
Цвет гипертекстовой ссылки (синий)
При нажатии на ссылку в окно браузера будет загружен новый документ.
Другой формой использования тега <А> является определение точек внутри текста, на которые можно сослаться. Такой метод применяется в том случае, когда документ нельзя поделить на части и необходимо быстро перемещаться из оглавления в текст:
<А NАМЕ="роint">
Для ссылки на такую точку используют следующую форму URL:
<А НREF="http://www.intuit.ru/index.html#роint">Ссылка на точку "роint" в документе "index.html"</А>
Выравнивание абзаца
<P ALIGN= «LEFT»> Выравнивание абзаца по левому краю </P> (LEFT – задает выравнивание по левому краю, RICHT – по правому, CENTER – по центру)
Увеличение интервала перед абзацем
<BLOCKQUOTE> … <P> Увеличение интервала перед абзацем </P>
</BLOCKQUOTE>
Изменение цвета фона
<BODY BGCOLOR=#xxxxxx>
Продолжение таблицы 2
Маркированный список:
o Первый элемент списка
o Второй элемент списка
o Третий элемент списка
<UL>Маркированный список:
<UL TYPE=СIRCLE>
<LI>Первый элемент списка
<LI>Второй элемент списка
<LI>Третий элемент списка
</UL>
(Теги <UL> и </UL> — это теги начала и конца маркированного списка, тег <LI> (List Item) задает тег элемента списка.) Для изменения типа маркера в списке можно использовать атрибут ТYРЕ. Можно задать любой тип маркера в произвольном месте списка. Можно смешивать разные типы маркеров в одном списке. Ниже перечислены теги с атрибутами стандартных маркеров:
<UL TYPE=СIRCLE>Тег создает маркеры в виде окружностей ◦.
<UL TYPE=SQUARE>Тег создает сплошные квадратные маркеры ▪.
Нумерованный список:
a. Первый элемент списка
b. Второй элемент списка
c. Третий элемент списка
<OL> Нумерованный список:
<OL TYPE=a>
<LI> Первый элемент списка
<LI>Второй элемент списка
<LI>Третий элемент списка
</OL>
ОL ТYРЕ=l> Тег создает список с нумерацией в формате 1., 2., 3. и т.д.
<OL ТYРЕ=а> Тег создает список с нумерацией в формате а., b., с. и т.д.
<ОL ТYРЕ=I> Тег создает список с нумерацией в формате I., II., III. и т.д.
Вставка изображения
<IMG SRC="image.gif" ALT="ИЗОБРАЖЕНИЯ">
Вставка изображения в качестве гиперссылки
<A HREF="адрес файла или изображения"> <IMG SRC="image.gif"></A>
Тег изображения имеет один обязательный атрибут SRC, который указывает файл изображения и путь к нему; изображение должно быть загружено в браузер и размещено в том месте документа, где расположен тег изображения.
Продолжение таблицы 2
Создание строки таблицы
<ТR></ТR>
Число тегов <ТD></ТD> в строке определяет число ячеек.
Пример 2. Простая таблица
<HTML>
<BODY>
<H1 ALIGN=center>Таблица</H1>
<CENTER>
<TABLE BORDER>
<TR>
<TD COLSPAN=3>Если в таблице два тега TR, то в ней две строки.</TD>
</TR>
<TR> <TD>Если в строке три тега TD,</TD>
<TD>то в ней</TD> <TD>три столбца.</TD> </TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
Пример 3. Таблица с цветным фоном. Фон таблицы определяется графическим файлом ris.gif.
<H3>Таблица с цветным фоном <H3>
<TABLE BORDER = 1 BACKGROUND = "ris.gif" HEIGHT = 140>
<TR> <TD><B>Row 1, Column 1</B>
<TD><B>Row 1, Column 2</B>
<TD><B>Row 1, Column 3</B> <TR>
<TD><B>Row 2, Column 1</B>
<TD><B>Row 2, Column 2</B>
<TD><B>Row 2, Column 3</B> </TABLE>
В таблице 3 определяет RGB-цвет в шестнадцатеричном представлении. Имеется возможность задавать цвета по названию. В таблице 3 приведены названия цветов, определенные в стандарте HTML 4 и соответствующие им RGB-коды. Надо отметим, что многие современные браузеры выходят за рамки стандартов и поддерживают больше названий цветов.
