- •Рекомендации по проведению занятий
- •1. Общие сведения о языке разметки гипертекста (html)
- •1.1. Структура html-документа
- •1.2. Знакомство с таблицами
- •1.3. Знакомство с графическими объектами
- •1.4. Создание gif-файлов
- •1.5. Цвета в html
- •2. Главное о форматировании текста
- •2.1. Заголовки
- •2.2. Шрифты
- •2.3. Начертание шрифта
- •2.4. Списки
- •2.5. Выравнивание и отступы
- •2.5.1. Выравнивание текста по левому или правому краю
- •2.5.2. Центрирование объектов
- •3. Работа c изображениями
- •3.1. Поля вокруг изображения
- •3.2. Фоновые изображения и фоновый цвет
- •4. Ссылки
- •4.1. Локальные ссылки
- •4.1.1. Ссылка - строка
- •4.1.2. Ссылка - изображение
- •4.1.3. Якорь и ссылка на него
- •4.2. Глобальные ссылки
- •5. Дополнительные возможности форматирования текста
- •5.1. Текст, обтекающий границы объекта
- •5.2. Отображение текста в одной строке (без переноса на другую строку)
- •5.3. Выделение абзацев с помощью списков определений и полей
- •6. Элегантные списки
- •6.1. Красивые нумерованные списки
- •6.2. Смена порядка нумерации в списке
- •7. Теги из разряда неосновных
- •7.1. Красивые толстые и тонкие горизонтальные линии
- •7.2. Вертикальная пунктирная линия с уменьшающейся длиной штриха
- •7.3. Ступеньки
- •7.4. Загрузка html-страниц
- •7.5. Показ html-тегов
- •8. Дополнительные возможности ms Internet Explorer
- •8.1. Бегущая строка
- •8.2. Прослушивание звуковых файлов
- •Задание 8.2.1. Используя документ bgsound.Htm как исходный, записать в рабочую папку файл bgsound1.Htm, в котором увеличить длительность звучания в два раза.
- •9. Дополнительные возможности Netscape Navigator
- •Библиографический список
- •Дорошев в.И., Хахаев и.А., Мошенский с.А. Работа в компьютерной сети internet. / Учебное пособие. Для студентов всех специальностей всех форм обучения. - Спб.: сПбТэи, 1998. - 32 с.
- •Климова р.Н., Сорокина м.В., Хахаев и.А., Мошенский с.А. Информатика торговой фирмы / Учебное пособие. Для студентов всех специальностей всех форм обучения. - Спб.: сПбТэи, 1998. - 32 с.
1.1. Структура html-документа
HTML-документ состоит из текстов, графики, таблиц и других объектов, которые представляют собой содержимое документа. Например, на рис. 1 представлен документ, состоящий из текста. В таком виде файл ris1.htm изображается экране с помощью программы просмотра Internet Explorer фирмы Microsoft. Программа просмотра использует при этом теги, которые записаны в HTML-документе для задания структуры расположения объектов и их внешнего вида. Чаще всего HTML-теги записываются парами (начальный и конечный теги), между которыми размещаются текст и другие объекты документа. Имя конечного тега идентично имени начального, но перед именем конечного тега ставится косая черта (/), так называемый слэш. Оформление HTML-документа просто: он начинается тегом <html> и заканчивается тегом </html>. Имя тега может быть записано как строчными, так и прописными буквами.
Начнем создание простейшего HTML-документа, рассмотренного по рис.1. Для этого необходимо уяснить и затем выполнить следующие действия.
-
Запустить приложение Блокнот, используя кнопку “Пуск” на панели задач или соответствующую клавишу: ПУСК => ПРОГРАММЫ => СТАНДАРТНЫЕ => БЛОКНОТ.
-
Разместить на рабочем столе одновременно два окна: окно MS Word с данной методичкой и окно Блокнота.
-
Набрать Блокнотом следующий текст:
<HTML>
<HEAD>
<TITLE> Простейший HTML документ</TITLE>
</HEAD>
<BODY> Здесь записан текст, появляющийся на экране при открытии этого документа. <I>А этот текст будет записан курсивом </I>
</BODY>
</HTML>
-
Сохранить документ в рабочей папке под именем, например, ris1a.htm (Блокнот закрывать не следует, он пригодится для дальнейшей работы).
-
В окне рабочей папки выполнить двойной щелчок левой кнопкой мыши по значку только что созданного документа ris1a.htm и с помощью MS Internet Explorer просмотреть получившийся документ.
Текст документа состоит из элементов заголовок и тело, которые выделяются соответственно тегами <HEAD></HEAD> и <BODY></BODY>. В заголовке теги <TITLE> . . . </TITLE> ограничивают текст, используемый как надпись в заголовке окна программы просмотра. Такую же надпись имеет кнопка на панели задач при просмотре документа.
Задание 1.1.1. Изменить файл ris1a.htm так, чтобы на панели задач при просмотре документа появилась кнопка с надписью ris1a.htm.
Задание 1.1.2. Изменить файл ris1a.htm так, чтобы в окне программы просмотра появилась Ваша фамилия.
1.2. Знакомство с таблицами
Таблицы в HTML-документах используются не только для табличного представления фрагментов текста, но также для красивой и удобной компоновки различных других объектов - графики, ссылок и др. Сформируем простейшую таблицу, состоящую из одной клетки (одна строка и одна ячейка в строке). Для этого уясним и выполним следующие операции.
-
С помощью Блокнота создадим в рабочей папке файл table1.htm, записав в этот файл следующий текст:
<HTML>
<HEAD>
<TITLE> Простейшая таблица-1</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD>Этот текст - в ячейке таблицы</TD>
</TR>
</TABLE>
</BODY>
</HTML>
-
Просмотрим получившийся документ с помощью MS Internet Explorer.
Видно, что в окне программы просмотра какие-либо следы таблицы отсутствуют. Дело в том, что теги <TABLE>, <TR> и <TD> просто объявили о наличии соответственно таблицы, строки таблицы и клетки таблицы, но никак не определили их оформление. Для определения вида оформления объектов в тегах HTML используются так называемые атрибуты. Сделаем в тексте предыдущего документа некоторые изменения и сохраним в рабочей папке файл как table2.htm. Модифицированный текст документа:
<HTML>
<HEAD>
<TITLE> Простейшая таблица-2</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=3 WIDTH=50%>
<TR>
<TD>Этот текст-в ячейке таблицы</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Атрибут BORDER в теге <TABLE> объявляет о наличии рамки и задает ширину "рельефа" вокруг рамки таблицы. Атрибут WIDTH в данном случае определяет ширину таблицы в 50% от ширины окна программы просмотра.
Задание 1.2.1. Изменяя ширину окна программы просмотра понаблюдайте за изменением ширины исследуемой таблицы.
Задание 1.2.2. Уберите из атрибута BORDER значение ширины "рельефа" (текст "=3"), сохранив документ под именем table2a.htm и посмотрите на результат изменений.
Задание 1.2.3. Уберите из тега <TABLE> атрибут WIDTH, сохраните это изменение в файле table2b.htm и посмотрите на результат (выбрав кнопку "Обновить" в панели инструментов программы просмотра). Убедитесь в том, что в этом случае размер ячейки автоматически подгоняется под длину строки.
Задание 1.2.4. По документу table3.htm рассмотрите адресацию ячеек в таблице.