- •Рекомендации по проведению занятий
- •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.5. Цвета в html
Цвета в документах HTML могут задаваться двумя способами - указанием кода цвета или указанием названия цвета на английском языке. При первом способе код цвета записывается в виде шестнадцатеричного числа, содержащего шесть цифр: первые две цифры задают интенсивность красного цвета, вторые - зеленого, третьи - синего. При втором способе используются следующие названия цветов: black (черный), maroon (темно-красный), green (зеленый), olive (оливковый), navy (синий), purple (фиолетовый), teal (зеленовато-синий), gray (серый), silver (серебристый), red (красный), lime (известковый), yellow (желтый), blue (голубой), fuchsia (ярко-малиновый), aqua (морской волны) и white (белый).
Создадим документ, содержащий таблицу, ячейки которой окрашены в разные цвета. Фон документа установим черным. Документ наберем (или отредактируем) Блокнотом и запишем в рабочую папку в файл colortab1.htm.
<HTML>
<HEAD>
<TITLE> COLOR REFERENCE TABLE</TITLE>
</HEAD>
<BODY BGCOLOR=#000000>
<P ALIGN=CENTER>
<TABLE>
<TH COLSPAN=8><FONT COLOR=#FFFFFF>"SAMPLE COLOR REFERENCE"</FONT></TH>
<TR>
<TD BGCOLOR=#FF3300>...</TD><TD BGCOLOR=#CC3300>...</TD>
<TD BGCOLOR=#993300>...</TD><TD BGCOLOR=#663300>...</TD>
<TD BGCOLOR=#333300>...</TD><TD BGCOLOR=#003300>...</TD>
<TD BGCOLOR=#FF0000>...</TD><TD BGCOLOR=#00FFFF>...</TD>
</TR>
<TR>
<TD BGCOLOR=#FF3333>...</TD><TD BGCOLOR=#CC3333>...</TD>
<TD BGCOLOR=#993333>...</TD><TD BGCOLOR=#663333>...</TD>
<TD BGCOLOR=#333333>...</TD><TD BGCOLOR=#003333>...</TD>
<TD BGCOLOR=#FF9900>...</TD><TD BGCOLOR=#00CCFF>...</TD>
</TR>
<TR>
<TD BGCOLOR=#FF3366>...</TD><TD BGCOLOR=#CC3366>...</TD>
<TD BGCOLOR=#993366>...</TD><TD BGCOLOR=#663366>...</TD>
<TD BGCOLOR=#333366>...</TD><TD BGCOLOR=#003366>...</TD>
<TD BGCOLOR=#FFCC00>...</TD><TD BGCOLOR=#0099FF>...</TD>
</TR>
<TR>
<TD BGCOLOR=#FF3399>...</TD><TD BGCOLOR=#CC3399>...</TD>
<TD BGCOLOR=#993399>...</TD><TD BGCOLOR=#663399>...</TD>
<TD BGCOLOR=#333399>...</TD><TD BGCOLOR=#003399>...</TD>
<TD BGCOLOR=#FFFF00>...</TD><TD BGCOLOR=#0066FF>...</TD>
</TR>
<TR>
<TD BGCOLOR=#FF33CC>...</TD><TD BGCOLOR=#CC33CC>...</TD>
<TD BGCOLOR=#9933CC>...</TD><TD BGCOLOR=#6633CC>...</TD>
<TD BGCOLOR=#3333CC>...</TD><TD BGCOLOR=#0033CC>...</TD>
<TD BGCOLOR=#FF0066>...</TD><TD BGCOLOR=#0033FF>...</TD>
</TR>
<TR>
<TD BGCOLOR=#FF33FF>...</TD><TD BGCOLOR=#CC33FF>...</TD>
<TD BGCOLOR=#9933FF>...</TD><TD BGCOLOR=#6633FF>...</TD>
<TD BGCOLOR=#3333FF>...</TD><TD BGCOLOR=#0033FF>...</TD>
<TD BGCOLOR=#FF0099>...</TD><TD BGCOLOR=#0066FF>...</TD>
</TR>
<TR>
<TD BGCOLOR=#FF6600>...</TD><TD BGCOLOR=#CC6600>...</TD>
<TD BGCOLOR=#996600>...</TD><TD BGCOLOR=#666600>...</TD>
<TD BGCOLOR=#336600>...</TD><TD BGCOLOR=#006600>...</TD>
<TD BGCOLOR=#FF00CC>...</TD><TD BGCOLOR=#009999>...</TD>
</TR>
<TR>
<TD BGCOLOR=#FF6633>...</TD><TD BGCOLOR=#CC6633>...</TD>
<TD BGCOLOR=#996633>...</TD><TD BGCOLOR=#666633>...</TD>
<TD BGCOLOR=#336633>...</TD><TD BGCOLOR=#006633>...</TD>
<TD BGCOLOR=#FF00FF>...</TD><TD BGCOLOR=#00CC66>...</TD>
</TR>
</TABLE>
</P>
</BODY>
</HTML>
Посмотрите с помощью MS Internet Explorer на результат. Этот результат достигнут применением новых атрибутов и тегов. Атрибут BGCOLOR задает цвет фона в тегах <BODY> и <TD>. Он может использоваться также в тегах <TR> и <TH> для определения цвета фона строки в целом. Тег <P> означает абзац (paragraph). В данном случае ко всему абзацу применено выравнивание по центру окна (атрибут ALIGN со значением CENTER). Атрибут ALIGN может также принимать значения LEFT и RIGHT. Абзац заканчивается тегом </P> и после конца абзаца прекращается действие его атрибутов.
<TH> - это так называемый тег заголовка таблицы. Фактически он объявляет строку, в которой должен быть записан заголовок таблицы. В данном случае он имеет атрибут COLSPAN, определяющий, сколько ячеек из следующей строки должен перекрыть этот заголовок. Тег <FONT> определяет установки свойств шрифта. В данном случае устанавливается цвет текста в строке заголовка. Вообще говоря, в тегах можно использовать несколько атрибутов, но тег <FONT> является исключением - для каждого изменения свойств текста используется отдельный тег <FONT>, например:
<P ALIGN=RIGHT>
<FONT SIZE=+3><FONT COLOR=#0000FF>Цветной текст </FONT></FONT>
</P>
Задание 1.5.1. Создайте в рабочей папке документ font1.htm, в тело которого включите текст приведенного выше примера и просмотрите результат. Ускорить выполнение задания можно путем копирования этого примера в текст, создаваемый Блокнотом. Для этого следует выделить пример в методичке, протащив указатель мыши (при нажатой ее левой клавише) по полосе выделения слева от трех строк примера. Затем скопировать примера в буфер обмена, щелкнув в инструментальном меню “Стандартное” по кнопке или посредством команды операционного меню {Правка, Копировать}. Далее нужно вставить этот пример из буфера обмена в текст, создаваемый Блокнотом, используя команду {Правка, Копировать} операционного меню Блокнота.
Задание 1.5.2. Используя как образец документ colortab1.htm, создайте в рабочей папке документ table3.htm, содержащий таблицу с заголовком "Координаты ячеек" и с 16-ю клетками (4 строки по 4 ячейки), в которых записаны координаты этих клеток по принципу С1К1 (где С - строка, К - колонка с соответствующими номерами). Фон документа должен быть сине-зеленым, фон строки заголовка - белым, текст строки заголовка - желтым. Текст в ячейках таблицы должен быть черным на сером фоне. Ячейки таблицы должны иметь границы.
Задание 1.5.3. Модифицируйте документ table3.htm так, чтобы в одной из центральных ячеек оказался оранжевый текст размера +3 "Центральная клетка". Получившийся документ назовите table3a.htm. Обратите внимание на изменение ширины и высоты ячеек таблицы.
Задание 1.5.4. Используя документ font1.htm как исходный, записать в рабочую папку файл font1a.htm, в котором поэкспериментировать с атрибутом COLOR=, задав коды цвета.
Задание 1.5.5. Используя документ font1.htm как исходный, записать в рабочую папку файл font1b.htm, в котором поэкспериментировать с атрибутом COLOR=, задав названия цвета.