ColorLesson

Таблица базовых цветов

Это основные цвета, используемые в HTML. Именно эти цвета используются дизайнерами для создания страниц поисковых систем, а также в дизайне сайтов с огромной аудиторией, то есть используются там, где нужна максимальная совместимость. Все они прекрасно отображаются даже в 256-цветном режиме работы видеокарты. Несомненно, для оригинального цветового дизайна обычных сайтов их маловато.

Black Navy
Gray Blue
Silver Aqua
White Green
Red Lime

Fuchsia Teal
Maroon Yellow
Purple Olive

Аквамарин
Белый
Желтый
Зеленый
Золотистый
Индиго
Каштановый
Красный
Оливковый
Пурпурный
Светло-зеленый
Серебристый
Серый
Сизый
Синий
Ультрамарин
Фиолетовый
Фуксиновый
Черный

Для получения любого другого оттенка применяются комбинации RGB-значений цвета, записанные в шестнадцатиричном формате. Приведенные ниже 216 цветов также считаются "безопасными" (browser-safe). Для удобства "безопасные" цветарасположины в три таблицы по 216 цветов, отсортированные по разным цветовым компонентам.

Красный и Синий – добавляем Зеленый Красный и Зеленый – добавляем Синий Зеленый и Синий – добавляем Красный
000000 | 000033 | 000066 | 000099 | 0000cc | 0000ff
330000 | 330033 | 330066 | 330099 | 3300cc | 3300ff
660000 | 660033 | 660066 | 660099 | 6600cc | 6600ff
990000 | 990033 | 990066 | 990099 | 9900cc | 9900ff
cc0000 | cc0033 | cc0066 | cc0099 | cc00cc | cc00ff
ff0000 | ff0033 | ff0066 | ff0099 | ff00cc | ff00ff
003300 | 003333 | 003366 | 003399 | 0033cc | 0033ff
333300 | 333333 | 333366 | 333399 | 3333cc | 3333ff
663300 | 663333 | 663366 | 663399 | 6633cc | 6633ff
993300 | 993333 | 993366 | 993399 | 9933cc | 9933ff
cc3300 | cc3333 | cc3366 | cc3399 | cc33cc | cc33ff
ff3300 | ff3333 | ff3366 | ff3399 | ff33cc | ff33ff
006600 | 006633 | 006666 | 006699 | 0066cc | 0066ff
336600 | 336633 | 336666 | 336699 | 3366cc | 3366ff
666600 | 666633 | 666666 | 666699 | 6666cc | 6666ff
996600 | 996633 | 996666 | 996699 | 9966cc | 9966ff
cc6600 | cc6633 | cc6666 | cc6699 | cc66cc | cc66ff
ff6600 | ff6633 | ff6666 | ff6699 | ff66cc | ff66ff
009900 | 009933 | 009966 | 009999 | 0099cc | 0099ff
339900 | 339933 | 339966 | 339999 | 3399cc | 3399ff
669900 | 669933 | 669966 | 669999 | 6699cc | 6699ff
999900 | 999933 | 999966 | 999999 | 9999cc | 9999ff
cc9900 | cc9933 | cc9966 | cc9999 | cc99cc | cc99ff
ff9900 | ff9933 | ff9966 | ff9999 | ff99cc | ff99ff
00cc00 | 00cc33 | 00cc66 | 00cc99 | 00cccc | 00ccff
33cc00 | 33cc33 | 33cc66 | 33cc99 | 33cccc | 33ccff
66cc00 | 66cc33 | 66cc66 | 66cc99 | 66cccc | 66ccff
99cc00 | 99cc33 | 99cc66 | 99cc99 | 99cccc | 99ccff
cccc00 | cccc33 | cccc66 | cccc99 | cccccc | ccccff
ffcc00 | ffcc33 | ffcc66 | ffcc99 | ffcccc | ffccff
00ff00 | 00ff33 | 00ff66 | 00ff99 | 00ffcc | 00ffff
33ff00 | 33ff33 | 33ff66 | 33ff99 | 33ffcc | 33ffff
66ff00 | 66ff33 | 66ff66 | 66ff99 | 66ffcc | 66ffff
99ff00 | 99ff33 | 99ff66 | 99ff99 | 99ffcc | 99ffff
ccff00 | ccff33 | ccff66 | ccff99 | ccffcc | ccffff
ffff00 | ffff33 | ffff66 | ffff99 | ffffcc | ffffff
000000 | 003300 | 006600 | 009900 | 00cc00 | 00ff00
330000 | 333300 | 336600 | 339900 | 33cc00 | 33ff00
660000 | 663300 | 666600 | 669900 | 66cc00 | 66ff00
990000 | 993300 | 996600 | 999900 | 99cc00 | 99ff00
cc0000 | cc3300 | cc6600 | cc9900 | cccc00 | ccff00
ff0000 | ff3300 | ff6600 | ff9900 | ffcc00 | ffff00
000033 | 003333 | 006633 | 009933 | 00cc33 | 00ff33
330033 | 333333 | 336633 | 339933 | 33cc33 | 33ff33
660033 | 663333 | 666633 | 669933 | 66cc33 | 66ff33
990033 | 993333 | 996633 | 999933 | 99cc33 | 99ff33
cc0033 | cc3333 | cc6633 | cc9933 | cccc33 | ccff33
ff0033 | ff3333 | ff6633 | ff9933 | ffcc33 | ffff33
000066 | 003366 | 006666 | 009966 | 00cc66 | 00ff66
330066 | 333366 | 336666 | 339966 | 33cc66 | 33ff66
660066 | 663366 | 666666 | 669966 | 66cc66 | 66ff66
990066 | 993366 | 996666 | 999966 | 99cc66 | 99ff66
cc0066 | cc3366 | cc6666 | cc9966 | cccc66 | ccff66
ff0066 | ff3366 | ff6666 | ff9966 | ffcc66 | ffff66
000099 | 003399 | 006699 | 009999 | 00cc99 | 00ff99
330099 | 333399 | 336699 | 339999 | 33cc99 | 33ff99
660099 | 663399 | 666699 | 669999 | 66cc99 | 66ff99
990099 | 993399 | 996699 | 999999 | 99cc99 | 99ff99
cc0099 | cc3399 | cc6699 | cc9999 | cccc99 | ccff99
ff0099 | ff3399 | ff6699 | ff9999 | ffcc99 | ffff99
0000cc | 0033cc | 0066cc | 0099cc | 00cccc | 00ffcc
3300cc | 3333cc | 3366cc | 3399cc | 33cccc | 33ffcc
6600cc | 6633cc | 6666cc | 6699cc | 66cccc | 66ffcc
9900cc | 9933cc | 9966cc | 9999cc | 99cccc | 99ffcc
cc00cc | cc33cc | cc66cc | cc99cc | cccccc | ccffcc
ff00cc | ff33cc | ff66cc | ff99cc | ffcccc | ffffcc
0000ff | 0033ff | 0066ff | 0099ff | 00ccff | 00ffff
3300ff | 3333ff | 3366ff | 3399ff | 33ccff | 33ffff
6600ff | 6633ff | 6666ff | 6699ff | 66ccff | 66ffff
9900ff | 9933ff | 9966ff | 9999ff | 99ccff | 99ffff
cc00ff | cc33ff | cc66ff | cc99ff | ccccff | ccffff
ff00ff | ff33ff | ff66ff | ff99ff | ffccff | ffffff
000000 | 000033 | 000066 | 000099 | 0000cc | 0000ff
003300 | 003333 | 003366 | 003399 | 0033cc | 0033ff
006600 | 006633 | 006666 | 006699 | 0066cc | 0066ff
009900 | 009933 | 009966 | 009999 | 0099cc | 0099ff
00cc00 | 00cc33 | 00cc66 | 00cc99 | 00cccc | 00ccff
00ff00 | 00ff33 | 00ff66 | 00ff99 | 00ffcc | 00ffff
330000 | 330033 | 330066 | 330099 | 3300cc | 3300ff
333300 | 333333 | 333366 | 333399 | 3333cc | 3333ff
336600 | 336633 | 336666 | 336699 | 3366cc | 3366ff
339900 | 339933 | 339966 | 339999 | 3399cc | 3399ff
33cc00 | 33cc33 | 33cc66 | 33cc99 | 33cccc | 33ccff
33ff00 | 33ff33 | 33ff66 | 33ff99 | 33ffcc | 33ffff
660000 | 660033 | 660066 | 660099 | 6600cc | 6600ff
663300 | 663333 | 663366 | 663399 | 6633cc | 6633ff
666600 | 666633 | 666666 | 666699 | 6666cc | 6666ff
669900 | 669933 | 669966 | 669999 | 6699cc | 6699ff
66cc00 | 66cc33 | 66cc66 | 66cc99 | 66cccc | 66ccff
66ff00 | 66ff33 | 66ff66 | 66ff99 | 66ffcc | 66ffff
990000 | 990033 | 990066 | 990099 | 9900cc | 9900ff
993300 | 993333 | 993366 | 993399 | 9933cc | 9933ff
996600 | 996633 | 996666 | 996699 | 9966cc | 9966ff
999900 | 999933 | 999966 | 999999 | 9999cc | 9999ff
99cc00 | 99cc33 | 99cc66 | 99cc99 | 99cccc | 99ccff
99ff00 | 99ff33 | 99ff66 | 99ff99 | 99ffcc | 99ffff
cc0000 | cc0033 | cc0066 | cc0099 | cc00cc | cc00ff
cc3300 | cc3333 | cc3366 | cc3399 | cc33cc | cc33ff
cc6600 | cc6633 | cc6666 | cc6699 | cc66cc | cc66ff
cc9900 | cc9933 | cc9966 | cc9999 | cc99cc | cc99ff
cccc00 | cccc33 | cccc66 | cccc99 | cccccc | ccccff
ccff00 | ccff33 | ccff66 | ccff99 | ccffcc | ccffff
ff0000 | ff0033 | ff0066 | ff0099 | ff00cc | ff00ff
ff3300 | ff3333 | ff3366 | ff3399 | ff33cc | ff33ff
ff6600 | ff6633 | ff6666 | ff6699 | ff66cc | ff66ff
ff9900 | ff9933 | ff9966 | ff9999 | ff99cc | ff99ff
ffcc00 | ffcc33 | ffcc66 | ffcc99 | ffcccc | ffccff
ffff00 | ffff33 | ffff66 | ffff99 | ffffcc | ffffff

Градации красного

Код | Цвет | Код | Цвет
#010000 |  | #800000 |
#100000 |  | #900000 |
#200000 |  | #A00000 |
#300000 |  | #B00000 |
#400000 |  | #C00000 |
#500000 |  | #D00000 |
#600000 |  | #E00000 |
#700000 |  | #FF0000 |

Градации зеленого

Код | Цвет | Код | Цвет
#000100 |  | #008000 |
#001000 |  | #009000 |
#002000 |  | #00A000 |
#003000 |  | #00B000 |
#004000 |  | #00C000 |
#005000 |  | #00D000 |
#006000 |  | #00E000 |
#007000 |  | #00FF00 |

Градации синего

Код | Цвет | Код | Цвет
#000001 |  | #000080 |
#000010 |  | #000090 |
#000020 |  | #0000A0 |
#000030 |  | #0000B0 |
#000040 |  | #0000C0 |
#000050 |  | #0000D0 |
#000060 |  | #0000E0 |
#000070 |  | #0000FF |

А так может выглядеть компьютерная радуга:

К
О
Ж
З
Г
С
Ф

Варианты оранжевого цвета:

Необходимо, чтобы монитор воспроизводил режим HighColor (16 разрядов) или TrueColor (24 разряда)

Код | Цвет
#FFB000 | 1
#FFA800 | 2
#FFA000 | 3
#FF9800 | 4
#FF9000 | 5
#FF8800 | 6
#FF8000 | 7
#FF7800 | 8
#FF7000 | 9
#FF6800 | 10
#FF6000 | 11
#FF5800 | 12

Раскладка цветовой гаммы по RGB-составляющим

Цветовая гамма | RGB | Цветовая гамма | RGB | Цветовая гамма | RGB
Пурпурный | A020F0 | Фиолетово-синий | 8A2BE2 | Орсель | DA70D6
Темно - фиолетовый | DDA0DD | Фиолетовый | EE82EE | Фуксин темный | 800080
Темно-бордовый | B03060 | Красно-фиолетовый | D02090 | Фуксин | FF00FF
Светло-розовый | FFB6C1 | Красно-фиолетовый бледный | DB7093 | Розовый | FFC0CB
Темно-красный | 800000 | Красный | FF0000 | Теплый розовый | FF69B4
Оранжево-красный | FF4500 | Коралловый светлый | F08080 | Коралловый | FF7F50
Оранжевый | FFA500 | Светлый самон | FFA07A | Самон | FA8072
Коричневый | A52A2A | Кирпичный | B22222 | Шоколадный | D2691E
Рыжевато-коричневый | D2B48C | Пшеничный | F5DEB3 | Бежевый | F5F5DC
Охра | A0522D | Кожано-коричневый | 8B4513 | Розово-коричневый | BC8F8F
Легкий желтый | DEB887 | Золотисто-березовый | DAA520 | Светло - золотистый | FFEC8B
Золотой | FFD700 | Темно - желтый | 808000 | Желто - зеленый | 9ACD32
Зелено - желтый | ADFF2F | Лимонно - зеленый | 32CD32 | Зеленый лесной | 228B22
Бледно-золотистый березовый | EEE8AA | Светло-желтый золотистый | FAFAD2 | Светло - желтый | FFFFE0
Желтый | FFFF00 | Весенний зеленый | 00FF7F | Зеленая лужайка | 7CFC00
Зеленый | 00FF00 | Нейтральный зеленый | C0DCC0 | Темно-зеленый | 008000
Зеленовато-желтый | 7FFF00 | Зелено - желтый | ADFF2F | Лимонно - зеленый | 32CD32
Светлый циан | E0FFFF | Темный циан | 008080 | Серо-синий | 5F9EA0
Аквамарин | 7FFFD4 | Цвет морской волны | 54FF9F | Светлая морская волна | 20B2AA
Бледно - зеленый | 98FB98 | Светлый небесно - голубой | 87CEFA | Синий со стальным оттенком | 4682B4
Синий | 0000FF | Небесно-голубой | 87CEEB | Голубой со стальным оттенком | B0C4DE
Светло - синий | A6CAF0 | Синий с пороховым оттенком | B0E0E6 | Бледно - бирюзовый | AFEEEE
Бирюзовый | 40E0D0 | Зеленовато-голубой | 00FFFF | Серый нейтральный | A0A0A4
Темно-серый | 808080 | Полуночно-синий | 191970 | Темно - синий | 000080
Васильковый | 6495ED | Грифельно - синий | 6A5ACD | Светлый грифельно - синий | 8470FF
Голубой королевский | 4169E1 | Бледно-лиловый | E6E6FA | Голубой с красным отливом | FFF0F5
Тускло - розовый | FFE4E1 | Белый | FFFFFF | Черный | 000000
Тускло - серый | 696969 | Синевато - серый | 708090 | Грифельно - серый | 778899
Серый | BEBEBE | Светло - серый | C0C0C0 | Белый-навахо | FFDEAD
Шелковый оттенок | FFF8DC | Слоновая кость | FFFFF0 | Лимонный | FFFACD
Морская раковина | FFF5EE | Медовый | F0FFF0 | Лазурный | F0FFFF
Белоснежный | FFFAFA | Призрачно-белый | F8F8FF | Белый - антик | FAEBD7
Кремовый | FFFBF0 | Персиковый | FFDAB9 | Бледно - бирюзовый | AFEEEE

Горизонтальная линия в качестве цветного прямоугольника:


Лаб

 Назад

Лабораторная работа. Списки

При написании электронных учебных пособий, (ЭУП) часто необходимо создавать общее содержание всех глав (модулей) ЭУП, параграфов, тем, лекций и т.д., то есть создать интерфейс ЭУП таким, чтобы студенты могли легко ориентироваться в представленном материале. В этом нам помогут списки - упорядоченное расположение содержания.
Когда и в каком случае следует применять списки?

  1. Информация в виде списка позволяет разбить большие массивы данных на отдельные, четкие фрагменты, которые человеку гораздо удобнее воспринимать, нежели весь поток в целом.

Например:
Список рубрик;

      1. Новости
      2. Финансы
      3. Спорт
      4. Погода
      5. Горячая линия
    1. Списки позволяют создавать понятную и логическую внутреннюю структуру информационных данных, ориентироваться в которой - дело простое и удобное.

Например:
Состав интегрированного пакета;

      1. Excel;
      2. Access;
      3. Outlook;
      4. Publisher;
      5. PhotoDraw.
      6. Team Manadger
    1. Использование удобно для отображения определенных пошаговых и прочих последовательных процессов.

Например, создания содержания необходимо:

  1. На бумаге нарисовать общую структуру глав учебника;
  2. В блокноте ввести тег <ol tipe="1"> и между тегами <li> </li> ввести главы;
  3. Главы разбить на параграфы;
  4. В блокноте записать тег <ul tipe="disc"> и между тегами <li> </li> ввести параграфы
  5. и т.д.
  6. .......

Спецификация HTML предусматривает три основных типа списков:

  1. Нумерованные списки;
  2. Маркированные списки;
  3. Списки определений (см словарь школьника)

Нумерованные списки

Для создания нумерованного списка используется тег-контейнер <ol>,внутри которого располагаются пункты перечня информационных данных, за указание которых отвечает тег <li>
<h3> Пример нумерованного списка </h3>
<HR align= "center" NOSHADE width="98%">
<ol>
<font face="Tahoma"><B>Визуальные эффекты Adobe Photoshop 7:</b></font>
<li>Drope Shadow
<li>Bebel and Emboss
<li>Color Overlay
</ol>
В результате получим нумерованный список следующего вида:
Пример нумерованного списка
Визуальные эффекты Adobe Photoshop 7:

  1. Drope Shadow
  2. Bebel and Emboss
  3. Color Overlay

Если в программу вставить <br> после, например, третьего номера <li value="5">Stroke, то четвертый номер пропустится:
Пример нумерованного списка
Визуальные эффекты Adobe Photoshop 7:

  1. Drope Shadow
  2. Bebel and Emboss
  3. Color Overlay
  4. Stroke

Параметры тега <ol>
Тег составления нумерованных списков <ol> может включать параметры TYPE, START, COMPACT.
Параметр используется для указания типа нумерованного списка. Помимо обычных арабских цифр могут применяться большие и маленькие римские цифры, а также строчные и прописные латинские буквы.
Программа:
<h3 align="center"> Пример нумерованного списка </h3>
<HR align= "center" NOSHADE width="98%">
<ol>
<font face="Tahoma"><B>Визуальные эффекты Adobe Photoshop 7:</b></font>
<li>Drope Shadow
<li>Bebel and Emboss
<li>Color Overlay
<li value="5">Stroke</li>
</ol>
<ol type="i">
<li>Drope Shadow
<li>Bebel and Emboss
<li>Color Overlay
<li value="5">Stroke</li>
</ol>
<ol type="a">
<li>Drope Shadow
<li>Bebel and Emboss
<li>Color Overlay
<li value="5">Stroke</li>
</ol>
Вид:
Пример нумерованного списка
Визуальные эффекты Adobe Photoshop 7:

  1. Drope Shadow
  2. Bebel and Emboss
  3. Color Overlay
  4. Stroke
  5. Drope Shadow
  6. Bebel and Emboss
  7. Color Overlay
  8. Stroke
  9. Drope Shadow
  10. Bebel and Emboss
  11. Color Overlay
  12. Stroke

Можно вводить и смешанную нумерацию, вводя параметры списка в тег <li type="1">
Например:
Визуальные эффекты Adobe Photoshop 7:

  1. Drope Shadow
  2. Bebel and Emboss
  3. Color Overlay
  4. Stroke

Маркированные списки

Маркированный список представляет собой ненумерованный и неупорядоченный перечень элементов, для заголовка которых используется специальные маркеры. В качестве маркеров выступают специальные символы, называемые буллетами.
Для создания маркированного списка используется тег-контейнер <ul>, внутри которого располагаются элементы самого списка <li>.
Пример:
<h3 flign="cente">Пример нумерованного списка </h3>
<HR align= "center" NOSHADE width="98%">
<ul type="circle">
<font face="Tahoma"><B>Визуальные эффекты Adobe Photoshop 7:</b></font>
<li>Drope Shadow
<li>Bebel and Emboss
<li>Color Overlay
<li>Stroke</ul>
<ul type="disc">
<li>Drope Shadow
<li>Bebel and Emboss
<li>Color Overlay
<li>Stroke
</ul>
<p></p>
<ul type="square">
<li>Drope Shadow
<li>Bebel and Emboss
<li>Color Overlay
<li>Stroke
Вид:
Пример нумерованного списка
Визуальные эффекты Adobe Photoshop 7:

  1. Drope Shadow
  2. Bebel and Emboss
  3. Color Overlay
  4. Stroke
  5. Drope Shadow
  6. Bebel and Emboss
  7. Color Overlay
  8. Stroke
  9. Drope Shadow
  10. Bebel and Emboss
  11. Color Overlay
  12. Stroke

Списки определений (см. словарь школьника)
Список определений - это особый тип структуризации информационных данных , идеально подходящих для отображения терминологических и толковых словарей, а также различных справочников средствами HTML. Список определений состоит из двух частей: самого определения (термина) и его содержательной части (описания)
Структура списка определений описывается тегом-контейнером <DL>, внутри которого указывается тег <DT>. определяющий заголовок, и тег <DD>, описывающий содержательную часть определения.
Пример создания словаря:
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Новая страница 1</title>
</head>
<body>
<center>
<h3><font size="3">Словарь школьника</font></h3>
<h3><font size="3">B</font></h3>
</center>
<dl>
<dt>Вакуум
<dd>Это состояние разряженного газа, находящегося при давлении ниже атмосферного.
<dt>Векторная физическая величина
<dd>Это физическая величина, которая имеет не только численное значение, но и направление
<dt>Вес тела
<dd>Это сила, с которой тело, вследствие его притяжения к Земле, действует на опору или подвес
</dl>
</body>
</html>

Назад

Лабораторная работа. Глоссарий

Цель работы: используя теги <dl>, <dt> и <dd>, составьте словарь своего курса по образцу, представленному ниже.
Ход работы:

      1. Создайте файл в одной из папок с названием “Glossary.htm”;
      2. Создайте алфавит от А до Я;
      3. Организуйте переходы на любую букву;
      4. Заполните словарь;
      5. Сдайте отчет преподавателю.

Примерный вид словаря:
Физика
B
Вакуум
Это состояние разряженного газа, находящегося при давлении ниже атмосферного.
Векторная физическая величина
Это физическая величина, которая имеет не только численное значение, но и направление
Вес тела
Это сила, с которой тело, вследствие его притяжения к Земле, действует на опору или подвес.


Гиперссылки

Гиперссылки

Перед создателями ЭУП всегда стоит задача: расположить весь имеющийся учебный материал (теоретическая часть, практические задания, лабораторные работы, глоссарий, тесты и многое другое) на электронном носителе, так чтобы студент имел возможность легко, при простом нажатии на клавишу, осуществлять переходы по всему документу, а если текст большой, организовать переходы внутри страницы.

К счастью, одним из достоинств Internet -технологий заключается в такой возможности. Автор может организовать переходы по документам как среди своей Web -страницы, так и ссылаться на Web -страницы других авторов.

Таким образом, ссылка представляет собой логическую связь одного элемента документа с другим документом в том же самом или в другом документе.

Обычно гиперссылка - это слово (краткое предложение) либо графическое изображение (рисунок) при щелчке на них, происходит переход на другой файл, либо в другое место данного документа. Браузер выделяет этот фрагмент цветом, а после использования гиперссылка меняет цвет.

Наиболее удачное определение гиперссылки, предложил М.М. Субботин : «Гипертекст — это форма организации текстового материала, при которой его единицы представлены не в линейной последовательности, а как система явно указанных возможных переходов, связей между ними. Следуя этим связям, можно читать материал в любом порядке, образуя разные линейные тексты»

Отметим, что здесь не конкретизируется способ представления текста (рукопись, книга, электронное издание).

Применительно к компьютерным технологиям представляется удачным определение гиперссылки, приведенное А.В. Поликахиным и А.Ю. Савиным : «Гипертекст—это информационный массив, в котором заданы и автоматически поддерживаются связи между выделенными элементами»

Ссылки характеризуются двумя закладками (anchor – якорь, закладка) – начальная (source anchor) и конечная (destination anchor) закладки.
Начальная закладка устанавливается в том месте документа, где требуется пояснить часть документа, расшифровать некоторые сокращения, перейти в другое место данного документа либо на другой документ, сайт. Начальная закладка может располагаться в любом месте документа, в таблицах, во фреймах, а также на рисунках.
Конечная закладка определяет пункт назначения начальной закладки.

В HTML–документах различают внутренние и внешние гиперссылки.

Внутренние ссылки осуществляют переход в пределах одного и того же документа. Обычно этот вид ссылок применяется в больших документах для перемещения по разделам. Например, в начале документа размещается содержание, состоящее из ссылок на заголовки разделов документов.

Внешние ссылки (удаленные гиперссылки) обеспечивают переходы к другим документам, расположенным на других Web- серверах.
Рассмотрим основные правила, которых нужно придерживаться при создании ссылок.
Элемент привязки < a >

Для создания ссылок применяется элемент <a>, называемый элементом привязки, или, другими словами, якорным элементом. Название элемента <a> происходит от первой буквы слова anshor –якорь, и цель его отобразить содержимое ссылки на экране и указать браузеру, к какому ресурсу необходимо перейти при вызове ссылки. Тег <a> должен выполнять простую задачу: отображать содержимое на экране и указывать браузеру, к какому ресурсу необходимо перейти при щелчке на ссылке. Внутри тега <a> ставится атрибут href , с помощью которого определяется целевой ресурс, а внутри контейнера размещается содержимое ссылки. Начальная закладка может быть в виде текста, слова, предложения, рисунка, и обязательно выделяется цветом и подчеркиванием.

Цвет ссылки зависит от того, в каком состоянии находится ссылка:

  • непосященная ссылка (link)- это ссылка на страницу, о посещении которой в браузере нет сведений, иными словами это цвет ссылки в которую ещё не заходили;
  • посещенная ссылка (vlink) - это ссылка на страницу, сведения, о посещении которой имеются в браузере.
  • активная ссылка (alink) - это ссылка, на которой щелкают мышью в текущий момент.

Цвет применяемых ссылок задается с помощью атрибутов link, vlink, alink.
Например:
<body bgcolor="#FFFFFF" text="black" link="#FF0000 " alink="#00FF00" vlink="#0000FF">

Цвет ссылок можно задавать в символьном эквиваленте, шестнадцатеричном коде или формате цветовой модели RGB. text-decoration="none"
В этом примере цвет задан в шестнадцатеричном коде (от 00 до FF с приставкой # (читается "диез")).
Обратите внимание на то, что ссылки по умолчанию кроме отличительного цвета, ещё и подчеркиваются. Однако некоторые дизайнеры отменяют подчеркивание, чем самым ставят в затруднительное положение клиентов. Посетители сайтов привыкли к тому, что ссылки подчеркиваются и могут понять, в этом случае, где ссылка, а где просто выделенное слово для того, чтобы на него обратили внимание. Пример неподчеркнутой ссылки, но с использованием задания цвета ссылки

Задание цвета ссылок при помощи каскадных таблиц стилей разберём ниже.

Простейшая программа создания ссылки выглядит так:
< a href =”адрес ссылки”>комплексные соединения</ a >

Содержимое ссылки это выделенное слова “комплексные соединения”. В тексте это слово будет отличаться от других цветом, поэтому элементы ссылок лучше всего размещать, не прерывая текста документа пробелами и переносами строк. Текст должен быть кратким и содержательным.

Задавать ссылки можно:
• по абсолютному адресу;
• по относительному;
• по внутреннему.

Задание ссылки по абсолютному адресу

Задание ссылки по абсолютному адресу указывается полный адрес:
<a href =” http :/ www . side . ru / docs / page 1. html ”>комплексные соединения</ a >

При этом задании независимо от того, с какого документа клиент нажмет на ссылку, он перейдет по адресу:
http :/ www . side . ru / docs / page 1. html

Задание ссылки по относительному адресу

При относительном переходе в атрибуте href указывается ссылка на документ, который расположен в том же каталоге, что и основной документ (документ с которого осуществляется переход). Например:
<a href=”page1.html”>Text</a>

Если документ, на который производится ссылка и основной документ, находятся в разных каталогах, то переход запишется так:
<a href=”...Figures/page1.html”>Text</a>, где Figures каталог, в котором находится файл page1.html.
Задание ссылки по внутреннему адресу

Если документ слишком большого размера и нет возможности разбить его на несколько файлов, то вводятся внутренние ссылки, которые позволяют делать переходы внутри страницы. Структура внутренней гиперссылки включает две части:
• ссылка;
• ее идентификатор - #

В общем, ссылка будет выглядеть так:
< a href ="#гидролиз">гидролиз солей</ a >
...............................................................
.............................................................
Основной текст
.............................................
<a name=” гидролиз ”></a>
Задание ссылки на рисунок или по рисунку
При ссылке на рисунок вводится другая конструкция:
<a img src=” Atom.gif”</a>, т.е. в теге <a> вместо атрибута href вставляется img src="" внутри которого, вставляется путь к рисунку. В этом случае рисунок будет загружаться вместе с Web - страницей. Если желаем загрузить рисунок по мере необходимости, то необходимо сделать на его ссылку типа:
<a href="Ro1.jpg"><imgsrc="Ro1.jpg></a>

Создание всплывающих подсказок для гиперссылок

Часто отпадает необходимость переходить по гиперссылке, если всплывет некоторая подсказка, объясняющая смысл ссылки. Для этого в тег <a> вставляется атрибут alt для людей с дефектом зрения. При наведении на рисунок мыши, проговаривается текст, которые описывает рисунок.

Тот же принцип действует для текстовых ссылок, однако, вместо alt="" вставляется title="". Например <a href="c1.htm" tatle="При переходе к файлу c1.htm возникнет ситуация, в котором текст представляется в другой кодировки. Для прочтения необходимо изменить кодировку - для этого проведите переход Вид - Кодировка - windows (кириллица)">Переход к файлу c1.htm</a>

Субботин М.М. Новая информационная технология: создание и обработка гипертекстов. М.: «Новинтех», 1992.

[Поликохин А.В., Савин А.Ю. Гипертекст: сущность состояние, проблемы, перспективы. М.: 1993. 126 с.].


Лаб_Таблицы

Лабораторная работа.
Таблицы

Цель работы: дать представление слушателям о роли таблиц в Web-документах, освоить методику создания простейших таблиц; создать таблицы по возрастающей сложности.
Рекомендации: В тетради для лабораторных работ перепишите краткую информацию о методики составления таблиц, расшифровку значений основных тегов форматирования таблиц и далее выполняйте рекомендации к выполнению лабораторной работы.

Таблицы занимают важное место в создании Web- страниц. Это связано с тем, что при помощи таблиц можно создавать шаблоны документов и представлять текстовые документы в виде компактного расположения на странице с помощью кода сценариев. В таблицах можно размещать коллекции картини, фонов, маркеров и разделителей и проводить гиперссылки на Web -документы. Пространство, отведенное под таблицы, разбивается на прямоугольные ячейки (с видимыми или невидимыми границами), в которых размещаются элементы документа – изображения, кнопки, ссылки, вложенные таблицы.
Прежде чем выполнить лабораторную работу, ознакомимся с основными тегами, которые используются при создании таблиц.

Правила описания таблиц
Основным тегом-контейнером является тег <table>, который требует присутствие закрывающегося тега </ table >. В состав тега входит ряд параметров, которые могут быть указаны, либо задаются по умолчанию.
Параметр border
C помощью параметра border можно задать рамку, показывающую внутреннюю структуру таблицы – ряды и ячейки. Если параметр отсутствует или равен нулю <table border =”0”>, рамка не будет отображена. Это помогает создать списки или использование таблиц в качества основы Web -документа. Значение параметра (в пикселах) можно задать и значением отличным от нуля, при этом, чем большее значение, тем толще будет рамка.
Параметр bordercolor
Параметр bordercolor предназначен для определения цвета рамки вокруг таблицы. Значение цвета указывается в шестнадцатеричном формате (# FFCCOO) или в виде наименования (red , green ). Например:
< table border =”0” bordercolor =”# FFCCOO ”>. Полный набор цветовой гаммы представлен в таблице в конце методического указания.
Параметр cellspacing
Параметр cellspacing задает расстояние между соседними ячейками таблицы по вертикали и горизонтали. Значение параметра указывается в пикселах, например, <table border =”0” bordercolor =”# FFCCOO ” cellspacing =”2”> Расстояние между соседними ячейками (как по горизонтали, так и по вертикали) всегда будет одинаково.
Параметр cellpadding
Для создания определенного отступа содержимого ячеек, вводится параметр cellspacing . Значение параметра задается в пикселах и обязательно указывается.
Например : <table border=”0” bordercolor =”#FFCCOO” cellspacing=”2” cellpadding=”10” >.
В случае, если <cellpadding =”0” >, содержимое ячейки будет прижато вплотную к границы таблицы, и если значение параметра border =”0” , то текст соседних ячеек сольется, что приведет к искажению смысла документа.
Параметр align
Этот параметр применяется для выравнивания таблицы относительно окна монитора: по левому краю, по центру и по правому краю.
- align =”left ”- выравнивание таблицы по левому краю документа. Если этот параметр не задан, то такое выравнивание будет произведено автоматически (по умолчанию)
- align=”center” – центрирование документа.
- align =” right ”- выравнивание таблицы по правому краю документ.
Этот параметр может быть использован и для выравнивания текста внутри ячеек таблицы.
Помимо функции выравнивания таблицы по горизонтали документа, параметр align позволяет получить эффект обтекания таблицы текстом.
Параметры width и height
Параметры width и height отвечают за ширину и высоту таблицы, соответственно. Значение этих параметров указывается в процентах или в пикселах. В последнем случае ширина и высота таблицы будет фиксирована. При использовании в качестве единицы измерения процентов размеры таблицы будут варьироваться в зависимости от размеров окна монитора.

Параметры тегов <tr>,<td>,<th>

Теги <tr>,<td>,<th> составляют внутреннюю структуру таблицы и могут содержать определенный набор параметров. Тег <tr> задает набор ячеек таблицы, тег <td> ячейку, а тег <th> заголовок.

Параметр valign
Этот параметр, в отличии от align , выравнивает текст ячейки по вертикали.
• valign =” middle ” – выравнивание по середине ячейки (значение по умолчанию);
• valign =” top ” – выравнивание по верхнему краю ячейки;
• valign =” botton ” – выравнивание по нижней границе ячуйки;
• valign =” baseline ” – выравнивание по базовой линии (привязка текста одной строки к единому уровню).
Параметры colspan и rowspan
Параметры colsoan и rowspan (объединение ячеек) применяются при необходимости объединения нескольких ячеек в одну.
- colspan – показывает, на какое количество ячеек по горизонтали необходимо расширить <td> или <th>.
- rowspan - показывает, на какое количество ячеек по вертикали необходимо расширить < td > или < th >.
При использовании параметров colspan и rowspan особое внимание следует уделять корректному объединению соседних ячеек таблицы, а также указанию закрывающихся тегов < td > и < th >
Параметр frame
Часто требуется создать текст, которые состоит из колонок отстоящих друг от друга на определенном расстоянии, или текст, заключенный в рамку и т.д. Для этого используется тег frame с атрибутами:
• box – рамка с четырех сторон;
• border – рамка с четырех сторон;
• above – рамка только сверху;
• below – рамка только снизу;
• hsides – верхняя и нижняя части рамки;
• vside – левая и правая части рамки;
• lhs - только левая часть рамки;
• rhs – только правая часть рамки;
• void – нет рамки
Для правки вертикальных линий в таблицы применяется тег rules с атрибутами:
• all – отображение линейки целиком;
• groups – часть линейки, разделяющая сгруппированные данные;
• cols – часть линейки, разделяющая столбцы;
• rows – часть линейки, разделяющая строки;
• none - отсутствие линейки.

Цвет в таблицах

При составлении таблицы часто требуется задать различные цвета для элементов таблицы: фона, рамок, строк, ячеек и т.д.
Фон . Цвет фона в таблицах задается атрибутом bgcolor , который который может применяться в тегах:
- <table bgcolor="#00CC00"> -задается фон всей таблицы;
- <tr bgcolor="#FFCC00"> - задается фон строки;
- <td bgcolor="#00CCFF"> - задается фон данных ячейки;
- <th bgcolor="#00CCFF"> - задается фон заголовка
При задании цвета можно воспользоваться также каскадными стилевыми свойствами. Например: <table style="background-color: aqua">
Для выделения цветом границы внешней рамки таблицы, в тег <table> вводится атрибуты bordercolor и border. Например: <table bordercolor="green" border=5 >. Этим задали рамку таблицы толщиной 5 пикселов, внутренние рамки равны 1 пикселу.
Цвет внутренних границ устанавливаются атрибутом bordercolor.
<tr bordercolor="#FF0000"> - задает красные границы ячеек строки, а синие границы ячеек заголовков отределяются тегом - <th bordercolor="#0000 FF ">
В HTML рамке таблицы можно придать объемный вид. Такой эффект достигается за счет разных цветов верхней и нижней линий, образующих рамку. Известно, что таблицы образуются двойными линиями. Если принять, что таблица освещается со стороны верхнего левого угла экрана, то внешняя рамка имеет освещенную (верхние и левые линии) и затененную (нижние и правые линии) части, в то время как для внутренних рамок все наоборот - освещены нижние и правые линии, а затемнены верхние и левые линии.
Итак:
- атрибут bordercolordark -определяет цвет затененной части рамки;
- атрибут задает цвет bordercolorlight освещенной части рамки.
- <table bordercolordark="brown" bordercolorlight="yellow" border=5> - внешняя рамка имеет толщину 5 пикселов, при этом верхняя и левая части границ - желтые, а правые и нижние части - коричневые.

Группирование строк и столбцов.

Для удобства форматирования содержимого таблицы производят разбивку ее на три части: заголовочную, основную и нижнюю.
Приведем пример использования построчного группирования в таблице с помощью трех элементов:

  • thead - определяет заголовочную часть таблицы. Начальный тег <thead> предшествует первой строке в таблице, а конечный тег иногда не ставят, но желательно поставить </thead>. В этом теге присутствуют атрибуты, которые позволяют задать фон и цвет заголовка, а жирное начертание текста устанавливается автоматически. Фрагмент заголовочной части таблицы следующий:
  • <thead style="background-color:yellow">
  • <tr style="font-size:13px; font-weight:bold">
  • <td text-align:center colspan=2> Количество посетителей за неделю</td></tr></thead>
  • <tfoot> - задает нижнюю часть таблицы. Обычно этот атрибут применяется для форматирования последних строк таблицы. Начальный тег <tfoot> располагается непосредственно после тега <thead>.

Фрагмент нижней части:
<tfoot style="font:italic bold; color:wite; text-align:right; background-color:brown">
<tr><td>Итого</td><td>866</td></tr>
<tr><td>в том числе студентов</td><td>251</td></tr>
</tfoot>
<tbody> - задает основную часть таблицы, которая состоит из элементов строк <tr></tr> и <td></td>, вложенных элементов ячеек.

Компоновка таблиц и текста

Часто в Web - страницы требуется размещать таблицу так, чтобы текст обтекал таблицу. При включении в тег <table> атрибута align позволит тексту обтекать таблицу Такие таблицы называются плавающими. Можно использовать для этого и стилевой элемент float.

Основные теги, применяемые при создании таблиц.

<title> Создание таблиц </title>
<table border=1 cellspacing="0" cellpadding="0" align="center">

  • border=1-:- 15 – толщина рамки таблицы
  • cellspacing="0" (1-:-10) - толщина рамки ячеек
  • cellpadding ="0" (0-:-70) отступ от границы ячейки
  • align =” center ”( left , right ) – расположение текста в ячейке
  • <caption> название таблицы </caption>
  • <caption align=”center”(left, right)>
  • <caption valign="bottom"(top) align="center">Опросник</caption>
  • < tr > создание строки</ tr >
  • < td >создание ячейки</ td >
  • <th> заголовок </th>
  • width ="49%" ( table width =300) - размеры таблицы (ширина)

Атрибут frame задает границы таблицы и принимает следующие значения:
• border ( box ) – устанавливает все линии внешней рамки;
• void – внешняя рамка не отображается вообще;
• above – выводит только верхнюю (или нижнюю) границу таблицы;
• hsides – – выводит только верхнюю и нижнюю линии рамки
• vsides – выводит только левую и правую линии рамки;
• lhs – устанавливает только левую линию рамки;
• rhs - устанавливает только правую линию рамки;
Атрибут rules отображает внутренние границы таблицы и принимает следующие значения:
• none - все линии внутренней рамки не отображаются;
• groups - отображаются горизонтальные границы между группами;
• rows - отображаются только горизонтальные линии между строками;
• cols - отображаются только вертикальные линии между строками;
• all - отображаются все внутренние рамки.
<table align="center" border="1" cellspacing="0" cellpadding="4" width="100%" frame="box" rules="groups">
• rowspan – тег предназначен для объединения ячеек смежных строк. Значение атрибута задает количество объединенных ячеек. Например: элемент
< TH rowspan =3> объединяет три ячейки.
• colspan – тег предназначен для объединения столбцов. Например: для формирования одной ячейки данных из трех ячеек смежных столбцов надо записать тег:
< TH colspan =3>
Объединение одной ячейки, расположенной на пересечении двух строк и трех столбцов назначается контейнером:
<TD rowspan=2 colspan=3>
• < TABLE bgcolor =” red ”> - цвет фона всей таблицы красный;
• < TD bgcolor =” yellow ”> - цвет ячейки желтый;
• < TABLE style =” background - color : aqua ”> - применен каскадный стиль назначения цвета фона. Отображается содержимое всех ячеек таблицы на бирюзовом фоне.
Пример прерывания обтекания таблицы текстом
<table border align="right" width=120
style="color: white; text-align; center; font-family: arial; font-weight: bold;
margin-left: 3mm; margin-bottom:3mm" >
<tr style="background-color: blue"><td>Синий</td>
<tr style="background-color: red"> <td>Красный</td>
<tr style="background-color: green"><td>Зеленый</td>
< KBD > align =" right "</ KBD > и обтекается текстом с левой стороны. После элемента
< KBD >& lt ; br clear =" left "& gt ;</ KBD >
< br clear =" right "> обтекание прекращается, а продолжение текстовой строки размещается ниже таблицы.
< tr bordercolor =”00 FF 00”> - цвет внутренних границ
<tr style="background-color: blue"><td> Синий </td>
<tr style="background-color: red"> <td> Красный </td>
<tr style="background-color: green"><td> Зеленый </td>
или
<tr style="background-color: 0000FF"><td> Синий </td></tr>
<tr style="background-color: FF0000"> <td> Красный </td></tr>
<tr style="background-color: 00FF00"><td> Зеленый </td></tr>
“ Объемная ” рамка
<table bordercolordark="brown" bordercolorlight="yellow" border=5>
<tr style="background-color: 0000FF"><td> Синий </td></tr>
<tr style="background-color: FF0000"> <td> Красный </td></tr>
<tr style="background-color: 00FF00"><td> Зеленый </td></tr>

Лабораторная работа 1. Создание простейших таблиц.

Рассмотрим простейшую таблицу, которую можно представить следующим образом:

Создание простейших таблиц

HTML–конструкция документа может содержать множество различных тегов и параметров.

Эта таблица имеет рамку, состоит из двух ячеек. В первой ячейки представлен заголовок, а во второй текст.
Коды этой таблицы приведены ниже.
Пример 1.
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1251”>
<title>Table1</title>
</head>
<body>
<table border=”1” width=”100%”>
<tr>
<th width=»50%»>Создание простейших таблиц</th>
<td width=»50%»>HTML–конструкция документа может содержать множество
различных тегов и параметров.</td>
</tr>
</table>
</body>
</html>

Ход работы

Задание:

Откройте шаблон документа (который создали лабораторной работе 1) в браузере Internet Explorer;

  • Кликните левой кнопкой мыши на иконке “Вид” в главном меню,

  • кликните на строку “Источник”. После этого откроется “Блокнот” с шаблоном документа (document’s form.htm ) .
  • Между тегами <title>…</title> напишите название таблицы;
  • В шаблоне документа между тегами <body> …. </body> наберите предложенную выше программу создания простейших таблиц.
  • Сохраните программу под именем table.htm . При этом учтите, что всегда имена папок должны:
  • называться с использованием английского алфавита и арабских цифр;
  • не должны содержать следующие символы:
  • пробел;
  • табуляцию;
  • новая строка;
  • возврат каретки;
  • символы.
  • Изменяя толщину рамки ( border =”1”) от 0 до 3, сохраните Web-страницу, в зависимости от толщины внешней рамки: table0.htm; table1.html; table2.htm; table3.htm.

Задание: раскройте значение тегов, используемых для создания таблиц

Теги | Значение
table |
border |
width |
cellspacing |
cellpadding |
align="center" |
tr |
th |
td |

Лабораторная работа 2. Создание сложных таблиц

Задание:

        • Создать таблицу следующего вида:
ячейка 1 | ячейка 2 | ячейка 3
ячейка 4 | ячейка 5 | ячейка 6
ячейка 7 | ячейка 8 | ячейка 9

Для этого:

Откройте шаблон документа (document’s form.htm ) в браузере Internet Explorer;

  • Кликните левой кнопкой мыши на иконке “Вид” в главном меню,
  • Кликните на строку “Источник”. После этого откроется “Блокнот” с шаблоном документа.
  • Между тегами <title>…</title> напишите название таблицы;
  • В шаблоне документа между тегами <body> …. </body> наберите предложенную ниже программу создания сложной таблицы.
  • В комментарии <!— Дальше продолжить составление таблицы самостоятельно--!>

предлагается самостоятельно написать теги для создания следующих столбцов таблицы.

  • Сохраните программу под именем table6.htm .

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title> Создание сложных таблиц</title>

<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1251”>
</head>
<table border=”1” width=900 cellspacing="0" cellpadding="0" align="center">
<tr>
<th width=300> ячейка 1</th>
<td width=300> ячейка 2</td>
<td width=300> ячейка 3</td>
</tr>
<!— Дальше продолжить составление таблицы самостоятельно--!>
</table>
</ body > </html>

Лабораторная работа3. Параметры внешних и внутренних границ

При выполнении лабораторной работы учтите:
Атрибут borderпозволяет отображением рамки таблицы по принципу “есть рамка – нет рамки”. Более гибкие средства задания рамки представляют атрибуты frame и rules .
С их помощью можно убрать внешнюю рамку, оставив внутренние границы, или задать отображение только горизонтальных линий.
Рассмотрим атрибут frame , который может принимать следующие значения:
• border – устанавливает все линии внешней рамки;
• void – внешняя рамка не отображается вообще;
• above – выводит только верхнюю (или нижнюю) границу таблицы;
• hsides – – выводит только верхнюю и нижнюю линии рамки
• vsides – выводит только левую и правую линии рамки;
• lhs – устанавливает только левую линию рамки;
• rhs - устанавливает только правую линию рамки.

Ход работы

Откройте шаблон документа (document’s form.htm ) в браузере Internet Explorer;

  1. Кликните левой кнопкой мыши на иконке “Вид” в главном меню,
  2. Кликните на строку “Источник”. После этого откроется “Блокнот” с шаблоном документа.
  3. Между тегами <title>…</title> напишите название таблицы;
  4. В шаблоне документа между тегами <body> …. </body> наберите предложенную ниже программу создания таблицы с различными параметрамивнешних и внутренних границ.

Ниже представлены таблицы и программа управления внутренними и внешними рамками таблицы.

Возможные значения атрибута frame

frame1

=

border

frame2

=

box

frame3

=

above

frame4

=

void

frame5

=

hsides

frame6

=

hsides

frame7

=

vsides

frame8

=

lhs

Обратите внимание на общее построение программы.
Программа создания таблицы с различными параметрамивнешних и внутренних границ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> FRAME</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>

<table border=0 widht=40%>
<caption align="left">
<strong>Возможные значения атрибута frame</strong>
</caption><br> <br>
<tr>
<td><table border=4 frame=”border”>
<tr><td width="49">frame1</td>
<td width="9">=</td>
<td width="55">border</td>
</tr></table><br>

<table align="left" border="1" cellspacing="0" cellpadding="4" width="14%" frame="box" rules="groups">
<tr><td width="7%">frame2</td>
<td width="3%">=</td>
<td width="90%">box</td>
</tr></table><br>
<br>
<table align="left" border="1" cellspacing="0" cellpadding="4" width="14%" frame="above" rules="all"><tr><td>frame3</td><td>=</td><td>above</td>
</tr></table> <br>
<br>

<table align="left" border="1" cellspacing="0" cellpadding="4" width="169" frame="void" rules="none">
<tr><td width="49">frame4</td>
<td width="9" >=</td>
<td width="79">void</td>
</tr></table><br>
<br>
<table align="left" border="1" cellspacing="0" cellpadding="4" width="14%" frame="hsides" rules="all"><tr><td>frame5</td><td>=</td><td> hsides
</tr></table><br> <br>
<table align="left" border="1" cellspacing="0" cellpadding="4" width="14%" frame="vsides" rules="all"><tr><td>frame6</td><td class=”eq”>=</td><td> hsides
</tr>
</table><br><br>

<table align="left" border="1" cellspacing="0" cellpadding="4" width="14%" frame="lhs" rules="all"><tr><td>frame7</td><td class=”eq”>=</td><td> vsides </td>
</tr></table><br> <br>

<table align="left" border="1" cellspacing="0" cellpadding="4" width="14%" frame="rhs" rules="all"><tr><td>frame8</td><td class=”eq”>=</td><td> lhs </td>
</tr></table>

</body>
</HTML>

Сохраните программу под именем table7.htm

Лабораторная работа4. Объединение ячеек и столбцов таблиц

Часто необходимо создать таблицу, в которой смежные ячейки должны быть объединены. Для этого в теги <TH> или <TD> вставляются атрибуты:

  1. rowspan - предназначен для объединения ячеек смежных строк. Значение атрибута задает количество объединенных ячеек.

Например: элемент < TH rowspan =3> объединяет три ячейки,

  1. colspan – предназначен для объединения столбцов.

Например: для формирования одной ячейки данных из трех ячеек смежных столбцов надо записать тег: <TH colspan =3>

  1. Объединение одной ячейки, расположенной на пересечении двух строк и трех столбцов назначается контейнером: <TD rowspan=2 colspan=3>

Ход работы

Откройте шаблон документа (document’s form.htm ) в браузере Internet Explorer;

  1. Кликните левой кнопкой мыши на иконке “Вид” в главном меню,
  2. Кликните на строку “Источник”. После этого откроется “Блокнот” с шаблоном документа.
  3. Между тегами <title>…</title> напишите название таблицы;
  4. В шаблоне документа между тегами <body> …. </body> наберите предложенную ниже программу объединения строк и столбцов

Задание. Создайте таблицу следующего вида:

Факультеты и кафедры АлПУ

Факультет | Кафедры | Корпус
Технологии наноматериалов | Высшая математика | 1- 43 ауд
 | Сопротивления материалов | 5 - 146 ауд
 | Наноматериаловы | 7 - 143 ауд
 | Силикиатов | 10 - 343 ауд
 | Количество сотрудников: 387
Механико-машиностроительный факультет (ММФ) | Кафедра сварочного производства (СП) | 1- 76 ауд
 | Кафедра металлургии черных металлов(МЧМ) | 3 - 9 ауд
 | Кафедра горно-шахтного оборудования (ГШО) | 3 - 110 ауд
 | Количество сотрудников: 281

Программа объединения строк и столбцов:
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1251”>
<meta name=”GENERATOR” content=”Microsoft FrontPage 4.0”>
<meta name=”ProgId” content=”FrontPage.Editor.Document”>
<title >Объединение ячеек</title >
</ head >
<body>
<h2>Факультеты и кафедры АлПУ</h2>
<table border=1 cellpadding=8>
<!—Формирование заголовков -->
<TR>
<TH width="354"> Факультет</TH>
<TH width="322">Кафедры</TH>
<TH width="81"> Корпус</TH>
</ TR >
<!-- Объединение 5-и столбцов -->
<TR>
<TD rowspan=5>Технологии наноматериалов</TD>
<td>Высшая математика</td>
<td>1- 43 ауд</td>
</TR>
<tr>
<td>Сопротивления материалов</td>
<td>5 - 146 ауд</TD>
</tr>
<tr>
<td>Наноматериаловы</td><td>7 - 143 ауд</TD>
</tr>
<tr>
<td>Силикиатов</td>
<td>10 - 343 ауд</TD>
</tr>
<tr>
<td colspan =2> <I>Количество сотрудников: 387</I></td>
</TR>
<TR><TD rowspan =4>Механико-машиностроительный факультет (ММФ) </TD>
<td>Кафедра сварочного производства (СП) </td>
<td>1- 76 ауд</td>
</TR>
<tr><td>Кафедра металлургии черных металлов(МЧМ) </td>
<td>3 - 9 ауд</TD>
</tr>
<tr><td>Кафедра горно-шахтного оборудования (ГШО) </td>
<td>3 - 110 ауд</TD>
</tr>
<tr>
<td colspan =2><I>Количество сотрудников: 281</I></td>
</TR>
</table>
</body>
</HTML>

Сохраните программу под именем table8.htm

Лабораторная работа 5. Цвет в таблицах

В таблицах можно задать цвет фона, рамки, ячейки, строки, заголовка и т.д.

Цвет фона задается атрибутом bgcolor . В зависимости от того. какой из тегов дополняется этим атрибутом, получится четыре варианта задания цвета:
• < TABLE bgcolor =” red ”> - цвет фона всей таблицы красный;
• < TD bgcolor =” yellow ”> - цвет ячейки желтый;
• < TABLE style =” background - color : aqua ”> - применен каскадный стиль назначения цвета фона. Отображается содержимое всех ячеек таблицы на бирюзовом фоне.
Ход работы

Откройте шаблон документа (document’s form.htm ) в браузере Internet Explorer;

  1. Кликните левой кнопкой мыши на иконке “Вид” в главном меню,
  2. Кликните на строку “Источник”. После этого откроется “Блокнот” с шаблоном документа.
  3. Между тегами <title>…</title> напишите название таблицы;
  4. В шаблоне документа между тегами <body> …. </body> наберите предложенную ниже программу применения атрибутов цвета к элементам таблицы.

Программа применения атрибутов цвета к элементам таблицы.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>LabTab55</title>
<!Зададим стиль для всей таблицы -->
<STYLE type="text/css">
table {font: bold 11pt Arial;
text-align: center;
background-color:#FF99FF;
color:blue}
tr{background-color:aqua}
</STYLE>
</head>
<body>
<h4 align="center"><b>Задание цветов для элементов таблицы</b></h4>
<p align="left"><br>
<table cellspacing=12 widht=550 border=5>
<TR>
<TD align="left">
<p align="left">Цвет фона всей таблицы</p>
</td><TD align="left">
<p align="left">фиолетовый</p>
</td>
</tr>

<TR>
<TD align="left">
<p align="left">Цвет фона строк</p>
</td><TD align="left">
<p align="center"> бирюзовый</p>
</td>
</tr>

<TR>
<TD align="left">
<p align="left">Цвет шрифта</p>
</td><TD align="left">
<p align="left"> синий</p>
</td>
</tr>

<TR>
<TD align="left">
<p align="left">Цвет линий рамки (по умолчанию)</p>
</td><TD align="left">
<p align="left">серый</p>
</td>
</tr>
</table>
</body>
</HTML>

Сохраните программу под именем table9.htm

Лабораторная работа6. Обтекание таблицы текстом

При компоновке Web -страницы необходимо располагать ее, согласно общему дизайну страницы, в определенном месте относительно текста, графики и т.д. Учитывая, что страница разрывает текст, необходимо тег < table > вводить атрибут align . В этом случае таблица не разрывает строк, и текст размещается вокруг таблицы. Атрибут align может принимать значения: left , right , center . Для прерывания текста, используется либо атрибут clear в элементах абзацев <p>, либо разрыв строки <br >.
Например: <br clear="left"> указывает на то, что обтекание слева прекращается.

Программа обтекания таблицы текстом

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Обтекание</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<p>&nbsp;</p>
<table width="200" border="1" align="left">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<p>Заполняя таблицу текстом необходимо учитывать, что имеется много способов форматирования текста: <br>
•&nbsp; выделения текста ( подчеркивание , <em>курсив </em>, <strong>жирное начертание) </strong>; <br>
•&nbsp; выбор гарнитуры и размер шрифта ; <br>
•&nbsp; возможно изменять цвет букв и фона ; <br>
•&nbsp; межбуквенный и межстрочный интервал; <br>
•&nbsp; тип регистра &quot; (строчные и прописные буквы) и многое другое.
<p><br>
</p>
</HTML>
Ход работы
• Внимательно разберитесь с программой обтекание текстом таблиц.
• Откройте «Блокнот», наберите программу обтекание текстом таблиц.
• Озаглавьте правильно файл и сохраните его.
• Наберите свой текст в абзаце <p></p> и отформатируйте таблицу по своему усмотрению.
Представьте отчет в виде отформатированной таблицы.
На этом мы заканчиваем изучение темы “Создание таблиц в Web -страницы ”. Для усвоения материала, создайте свою собственную таблицу так, чтобы она радовала Ваш взор.

Лабораторная работа7. Зачетная работа

В программе “Блокнот” запишите программу для создания предложенной ниже таблицы.
Сохраните в своей папке под именем Table.htm.

Самостоятельная работа

Задание: создать таблицу по виду приведенную ниже

Название таблицы

1

2

3

5

7

4

6

8

9

10

19

19

19

11

12

20

21

22

13

14

23

15

16

17

18

24

25

26

В “Блокноте” запишите эту программу и сохраните файл под именем her_Work.htm

Рабочая тетрадь
Таблица начинается тегом ___________ и заканчивается тегом ________.

Для создания строки применяются парные теги _____________________.

Для создания столбцов применяются парные теги ___________________.

Наличие атрибута border=1-:- 15 указывает, что __________________.

Атрибут тега table cellspacing="0" (1-:-10) задает __________________.

Атрибут тега table cellpadding ="0" (0-:-70) задает _________________.

Задание названия таблицы задается парным тегом __________________.

Теги <th> </th> задают заголовок _______________________________.

Заполните таблицу:
Атрибут frame задает границы таблицы и принимает следующие значения:
• border ( box ) –
• void -
• above –
• hsides –
• vsides –
• lhs –
• rhs

Заполните таблицу:
Атрибут rules отображает внутренние границы таблицы и принимает следующие значения:
• none -
• groups -
• rows -
• cols -
• all -
Тег < TH rowspan =3> указывает, что ______________________________.

Тег < TH rowspan =3> указывает, что ______________________________.

Тег < TABLE style =” background - color : aqua ”> отображается содержимое всех ячеек таблицы ________________________________________________.

Расшифруйте запись <table bordercolordark="brown" bordercolorlight="yellow" border=5>

Запишите программу для представления таблицы, приведенной ниже:

Запишите программу для представления таблицы, приведенной ниже:

Приложение 1
Таблица
Раскладка цветовой гаммы по RGB-составляющим

Цветовая гамма

RGB

Цветовая гамма

RGB

Цветовая гамма

RGB

Пурпурный

A020F0

Фиолетово-синий

8A2BE2

Орсель

DA70D6

Темно-фиолетовый

DDA0DD

Фиолетовый

EE82EE

Фуксин темный

800080

Темно-бордовый

B03060

Красно-фиолетовый

D02090

Фуксин

FF00FF

Светло-розовый

FFB6C1

Красно-фиолетовый бледный

DB7093

Розовый

FFC0CB

Темно-красный

800000

Красный

FF0000

Теплый розовый

FF69B4

Оранжево-красный

FF4500

Коралловый светлый

F08080

Коралловый

FF7F50

Оранжевый

FFA500

Светлый самон

FFA07A

Самон

FA8072

Коричневый

A52A2A

Кирпичный

B22222

Шоколадный

D2691E

Рыжевато-коричневый

D2B48C

Пшеничный

F5DEB3

Бежевый

F5F5DC

Охра

A0522D

Кожано-коричневый

8B4513

Розово-коричневый

BC8F8F

Легкий желтый

DEB887

Золотисто-березовый

DAA520

Светло-золотистый

FFEC8B

Золотой

FFD700

Темно-желтый

808000

Желто-зеленый

9ACD32

Зелено-желтый

ADFF2F

Лимонно-зеленый

32CD32

Зеленый лесной

228B22

Бледно-золотистый березовый

EEE8AA

Светло-желтый золотистый

FAFAD2

Светло-желтый

FFFFE0

Желтый

FFFF00

Весенний зеленый

00FF7F

Зеленая лужайка

7CFC00

Зеленый

00FF00

Нейтральный зеленый

C0DCC0

Темно-зеленый

008000

Зеленовато-желтый

7FFF00

Зелено-желтый

ADFF2F

Лимонно-зеленый

32CD32

Светлый циан

E0FFFF

Темный циан

008080

Серо-синий

5F9EA0

Аквамарин

7FFFD4

Цвет морской волны

54FF9F

Светлая морская волна

20B2AA

Бледно-зеленый

98FB98

Светлый небесно-голубой

87CEFA

Синий со стальным оттенком

4682B4

Синий

0000FF

Небесно-голубой

87CEEB

Голубой со стальным оттенком

B0C4DE

Светло-синий

A6CAF0

Синий с пороховым оттенком

B0E0E6

Бледно-бирюзовый

AFEEEE

Бирюзовый

40E0D0

Зеленовато-голубой

00FFFF

Серый нейтральный

A0A0A4

Темно-серый

808080

Полуночно-синий

191970

Темно-синий

000080

Васильковый

6495ED

Грифельно-синий

6A5ACD

Светлый грифельно-синий

8470FF

Голубой королевский

4169E1

Бледно-лиловый

E6E6FA

Голубой с красным отливом

FFF0F5

Тускло-розовый

FFE4E1

Белый

FFFFFF

Черный

000000

Тускло-серый

696969

Синевато-серый

708090

Грифельно-серый

778899

Серый

BEBEBE

Светло-серый

C0C0C0

Белый-навахо

FFDEAD

Шелковый оттенок

FFF8DC

Слоновая кость

FFFFF0

Лимонный

FFFACD

Морская раковина

FFF5EE

Медовый

F0FFF0

Лазурный

F0FFFF

Белоснежный

FFFAFA

Призрачно-белый

F8F8FF

Белый-антик

FAEBD7

Кремовый

FFFBF0

Персиковый

FFDAB9

Бледно-бирюзовый

AFEEEE

Интернет поддержка

  1. Язык XML - практическое введение
    Александр Печерский
  2. Изучение HTML 3.2 на примерах (13.04.1998)
    Jukka Korpela. Перевод "АКДИ Экономика и жизнь".
  3. Формат и синтаксис Cookie (13.04.1998)
    Андрей Аликберов, ЦИТ
  4. Язык гипертекстовой разметки HTML (13.04.1998)
    Павел Храмцов, из учебных материалов конференции Индустрия программирования 96, Центр Информационных Технологий
  5. Спецификация языка HTML (13.04.1998)
    Р. Усманов, перевод, сервер FREEnet
  6. Спецификация языка HTML 3.2 (CP1251, KOI8-r)
    Р. Усманов, перевод


Лабораторная работа_Форматирование

Лабораторная работа.

Структура документа

Цель работы:

  1. Освоить основные контейнеры HTML - документа;
  2. Освоить основные приемы форматирования текста

Слушатель должен знать:

  • Возможности применения языка гипертекстовой разметки HTML при создании электронных учебных пособий. уметь:
  • создавать инструкцию Web - документа;
  • заполнять Web - страницу текстом;
  • форматировать текст в Web-документе.

При загрузки Web-документа браузеру необходимо сообщить версию загружаемого документа. Эта информация закладывается в начале документа перед тегом <HTML> и неотображается в документе.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

где тег <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> - указывает:

  • документ соответствует спецификации DTD HTML 4.01 Transitiona, которая рекомендована консорциумом W3C;
  • для просмотра необходим браузер, поддерживающий эту версию;
  • EN - для документов HTML указвыает язык (английский);
  • "http://www.w3.org/TR/html4/loose.dtd"> - адрес файла, с описанием DTD.

Ход работы:

1. Cоздание информации о HTML

Задание:

  • Откройте "Блокнот";
  • Скопируйте тег <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">;
  • Сохраните документ под своим именем с расширением xxxx.htm

2. Создание внешнего контейнера

Для обозначения границ HTML - документа используется парный тег <HTML> ........ <.HTML>. Начальный тег <HTML> не имеет атрибутов и располегается в начале программы, а конечный </HTML> в конце и обозначает окончание всего документа. Таким образом, эти теги образуют внешний контейнер.

<HTML>
.........................
.........................
.........................
.........................

</HTML>

Задание:

  • Скопируйте теги внешнего контейнера;
  • Вставьте в продолжение документа.
  • Сохраните документ

Документ должен получиться следующего вида:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<HTML>
...........................
............................
............................

</HTML>

3. Заголовочная часть документа

Заголовочная часть документа представляет собой контейнер <head> </head>, в котором вся информация об информационной структуре документа. Этот тег не имеет атрибутов.

<head>
............................
............................
............................
</head>

Контейнер < head ></ head > содержит, помимо парного тега < title > </ title > , предназначенного для указания имени электронного документа, также и мета-определитель < meta >. Информация, заключенная в теге < meta ></ meta > предназначена для описания внутренних свойств HTML -файла.

Задание:

  • Скопируйте теги внешнего контейнера;
  • Вставьте в продолжение документа;
  • Сохраните документ.

Вид документа:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<HTML>
<head>
............................
............................
............................
</head>
.........................
.........................
.........................
.........................
.........................

</HTML>

a. Содержание заголовочной части документа

В заголовочной части документа входит обязательный элемент - контейнер <title></title>, который интерпретируется браузером как название Web - страницы, но не название файла. Название Web-страницы - это важнейший элемент, который имеет значениепри предоставлении информации для поисковых систем, поэтому необходимо давать краткие содержательные названия.

Например: <title>Лабораторная работа. Форматирование</title>.

Оптимальный размер названия документа 2 - 6 слов.

Элемент title по отношению к элементу head является дочерным, т.е. вкладывается в контейнер <head></head>:

<head>
.<title>....</title>
............................
............................
</head>

Задание:

  • Создайте тег названия документа в заголовоченй части;
  • Введите название документа;
  • Сохраните документ

Вид документа:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<HTML>
<head>
<title>название</title>
............................
............................
</head>
.........................
.........................
.........................
.........................
.........................

</HTML>

б. МЕТА-определения <meta>

Мета-определения электронного документа описываются рядом параметров, входящих в состав непарного тега <meta> и предназначеных для описания внутренних свойств HTML-файлов.

Пример мета тегов входящих в заголовочную часть документа:

  • < meta http - equiv =" Content - Type " content =" text / html > - показывает, что текст написан с использованием языка разметки HTML
  • <meta http-equiv="Тип-содержимое" content="text/html; charset=utf-8"> показывает, что в документе, по умолчанию, применена кодировка utf-8, либо- <meta http-equiv="Тип-содержимое" content="text/html; charset = windows -1251"> где charset = windows -1251"> показывает, что в документе, по умолчанию, применена кодировка windows -1251
  • < meta name =" GENERATOR " content =" Microsoft FrontPage 6.0"> документ создан в редакторе Microsoft FrontPage 6.0
  • < script language =" JavaScript "> ….</ script > - пишется программа на языке программирования JavaScript ;
  • < meta name =” keywords ”> - указание ключевых слов документа;
  • ; < meta name =” author ”> - информация об авторе (авторах) документа;
  • < meta name =” rating ”> - установление возрастной категории содержания документа и ряд другой информации.

Существует ещё много других функций тега <meta>, однака на этапе создания ЭУП их можно не указывать, однако тег определения типа и кодировки документа <meta http-equiv="Тип-содержимое" content="text/html; charset=utf-8"> обязательный.

Задание:

  • Скопируйте тег определения типа и кодировки документа;
  • Введите его в заголовочную часть документа;
  • Сохраните документ.

Вид документа:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<HTML>
<head>
<title>название</title>
<meta http-equiv="Тип-содержимое" content="text/html; charset=utf-8">
............................
</head>
.........................
.........................
.........................
.........................
.........................

</HTML>

в. Элементы <style></style> и <script></script>

В структуру раздела документа HEAD также могут входить теги-контейнеры <style></style> и <script></script>. Парный тег <style></style> и описывает стилевые шаблоны документа, а <script></script> - содержит код исполняемых сценариев. Эти контейнеры будем использовать вдальнейшем, при создании более сложных Web-страниц.

4. Тело HTML-документа

Раздел BODY является одним из самых важных компонентов любого HTML-документа, тюкю в нём располагается содержательная часть документа. Раздел описывается парным тегом <body> </body> и всё, что располагается в этом контейнере выводится на монитор.

а.Задание фона документа

Тег <body> имеет ряд параметров, которые можно разделить на группы:

  • параметры фона:
    • <body bgcolor="цвет"> - задание цвета фона,
    • <body background="bg0.jpg" - задание фона рисунком;
    • границы документа (размеры отступов)- (topmargin, bottommargin, leftmargin, marginwidth и т.д.);
  • <body text="black"> - задает цвет основного текста на странице;
  • < body link="# 00FF00 " alink="#00FF00" vlink="#0000FF"> - задает цвет не посещенных (link), активных (alink) и посещенных (vlink) гиперссылок.

В созданный ранее документ введите контейнер <body><body>;

Задание:

  • укажите цвет фона в виде конкретного задания цвета,
  • либо задать цвет фона рисунком;
  • запомните документ;
  • откройте документ в браузере;
  • поэксперементируйте, изменяя цвет фона.

Примечание: цвет фона (например белый) можно задать одним из тремя способами:

  • <body bgcolor="white">
  • <body bgcolor="#FFFFFF">
  • <body bgcolor="255,255,255">

б. Форматирование текста

Заголовок описывается тегом <Hx>Текст</Hx> , где Х задает размер заголовка;

<p>текст</p> теги абзаца;

<br> текст</br> - перенос текста на новую строку;

<b>текст </b> - жирное начертание слов;

<i>текст </i> - курсив

<u>текст </u> - подчеркивание слов, фраз. предложений;

<sup> текст</sup> и <sub>текст </sub> - верхний индекс и нижний индекс, соответственно;

<font color="NEX"> текст</font> - задание цвета слов, фраз. предложений (см. файл ColorLesson.htm);

<font style="font-family: Times New Roman"> текст</font> - выбор гарнитуры шрифта;

< font style="letter-spacing: 3px;">текст </ font > - межбуквенный интервал

межбуквенный интервал;

<blockquote> текст</blockquote>- отступ от начало строки (блок);

<p>&nbsp;(повторить n раз) </p> - отступ от начало строки на n pixel;

<align="center">, <align="left">, <align="right", align="justify"> - расположение текста по центру, слева и справа - соответственно;

<pre>текст</pre> - текст помещенный между этими тегами, полностью повторяет исходный, набранный в WORDе

<pre>

Я
    достаю
        из широких штанин
    дубликатом
        бесценного груза.
Читайте,
    завидуйте,
        Я – гражданин
Советского союза.
</pre>
<acronym title="HyherText Markup Language">HTML</acronym> - часто встречающийся тег в документах. Oн позволяет расшифровать сокращения.

HTML

< bdo >текст</ bdo > Позволяет изменять направление текста. Используется с атрибутом dir , которому присваивается либо LTR

(слева направо), либо RTL (справа налево).

Задание:

  • скопируйте текст;
  • введите его в свою программу;
  • отредактируйте текст, применяя все способы форматирования текста;
  • вставьте конечный тег </body>
  • сохраните текст;
  • откройте в режиме просмотра.

Текст для форматирования.

Глава 1. Теоретические основы создания учебника нового поколения

В главе 9 «Информационно – предметное обеспечение технологий обучения» учебного издания Чернилевского Д.В. Дидактические технологии в высшей школе, представлены принципы создания учебной книги как основного информационного источника.

СУМО(система учебно-методического обучения) занимает важное место, он есть стержень и основной компонент учебно- методического комплекса. С опорой на учебную программу учебник определяет содержание обучения и систему работы студентов при овладении знаниями и в значительной мере выступает организато ром работы преподавателя, поскольку через учебник реализуются концепция и стратегическая линия обучения.(стр.335-338)

ДИДАКТИЧЕСКИЕ ФУНКЦИИ УЧЕБНОЙ КНИГИ:

1.Учебник — первый и важнейший источник знаний студента

2. Главная функция учебника — информатизация знания, руководство процес сом усвоения содержания образования, т.е. познавательной деятель ности студентов.

3.Информационная функция — раскрытие сути учебника как носителя содержания обучения, представленного текстом и иллю страциями.

4.Функция руководства — раскрытие дидактико-методологического содержания программы, т.е. учебник определяет набор, акцентиро вание, ранжирование всего учебного материала (текстов, заданий, примеров). Благодаря этому он становится для преподавателя сред ством планирования, подготовки и проведения обучения.

5.Функция стимулирования — определение значения учебника в закреплении знаний и стимулировании учения, повышение интереса студентов к материалу, возможностям его использования. Материал учебника должен вырабатывать умение работать с дополнительной литературой и справочниками.

6.Функция упражнений, самоконтроля — обеспечение прочного и устойчивого усвоения знаний и умений, что достигается посредством упражнений, повторений, систематизации, организации контроля и самоконтроля.

7.Функция координации — установление взаимосвязи с другими книгами и средствами учебно-методического обеспечения конкрет ной дисциплины. Последние представляют собой систему дидакти ческих средств обучения (при ведущей роли учебника), которая обеспечивает наиболее полную реализацию учебно-воспитательных задач и развитие личностных качеств специалиста.

8.Функция рационализации — ориентирование на экономию времени преподавателя и студентов как на аудиторных занятиях, так и вне их. Обеспечивается регулирование трудозатрат, использование дополнительных средств и аппарата для выработки рациональной основы ориентировочных действий учебного процесса.

9.Воспитательная (мировоззренческая) функция — развитие у студентов с помощью учебника научного мировоззрения, научного и творческого мышления, экономической культуры, целостного отношения к научным знаниям, формирование на основе всего этого эмоционально-мотивационной сферы.


лаб2

Лабораторная работа. Форматирование

Цель работы: Используя теги логического форматирования и физического форматирования, отформатировать предложенный текст.

Ход работы

Откройте шаблон документа (который создали в предыдущей лабораторной работе) в браузере Internet Explorer;

  1. Кликните левой кнопкой мыши на иконке “Вид” в главном меню,

а затем кликните на строку “Источник”. После этого откроется “Блокнот” с шаблоном документа.

  1. В открывшийся “Блокнот ” вставляйте по частям и форматируйте предложенный ниже текст (если есть свой текст, то лучше вставить его);

Текст для форматирования

Фосфор и его важнейшие соединения

Фосфор входит в состав фосфорита Са3(РО4)2, апатита Са3(РО4)2·СаF2, содержится в костях животных и рыб.
В свободном состоянии фосфор образует более десяти аллотропических
<!—цвет фразы выберите из приложения 1-- > модификаций, среди которых наиболее исследованы белый, красный и черный фосфор.
Белый фосфор – мягкое воскообразное вещество, состоящее из тетраэдрических молекул Р4. Он плавится при 44 0С, кипит при 257 0С. При 800 0С начинается диссоциация четырехатомных молекул на двухатомные Р2, а при 1200 0С – на атомы. Белый фосфор –реакционное вещество. На воздухе при комнатной температуре он окисляется до Р4О10, а при 40 0С происходит самовоспламенение и бурное горение фосфора.
Изучение взаимодействия белого фосфора с кислородом привело к открытию цепных реакций. Автором этого открытия является Н.Н. Семенов – российский физико-химик, лауреат Нобелевской премии.

Примечание: при форматировании используйте следующие теги:
• < B ></ B > отображает текст жирным начертанием
• < I ></ I > - выделяет нужную часть текста курсивом.
• < u ></ U > - делает текст подчеркнутым.
• < small ></ small > - отображает в себе текст шрифтом, меньшим, чем шрифт окружающего текста;
• < span ></ span > - присваивает части текста определенные свойства;
• < sup ></ sup > - располагает часть текста по нижней линии;
• < sub ></ sub > располагает часть текста по верхней линии;
Например, для написания фразы “Белый фосфор” , необходимо заключить эту фразу между тегами <b><i><u> Белый фосфор </u></i></b>, а формулу Са3(РО4)2 запишите между тегами <p>текст, текст Ca<sup>3</sup>(PO<sup>4</sup>)<<sup>2</sup> текст /p>

    • Отформатированный текст, представить в виде Web-страницы. Назовите файл именем document’s form.htm и сохраните его.
    • Откройте файл в Internet Explorer и посмотрите результат. Если есть необходимость, проведите повторно отредактируйте его.

    Самостоятельная работа

      • В структуре HTML существует _______контейнера. Вставьте число.

    2. Укажите теги форматирования:

    • а) Теги логического форматирования;
    • б) Теги физического форматирования;
    • в) Теги фактического форматирования;
    • г) Теги идеального форматирования.

    3. Для расшифровки аббревиатуры используется тег____________

    • Абзац можно создать тегом __________________
    • Приведите в соответствие теги и их значения

    • < B ></ B >
    • < I ></ I >
    • < u ></ U >

      • выделяет нужную часть текста курсивом
      • отображает текст жирным начертанием

    - делает текст подчеркнутым.
    • Приведите в соответствие теги заголовка и их значения

    Теги

    Значения

    H1
    ТЕКСТ

    H2

    ТЕКСТ

    H3

    ТЕКСТ

    H4
    ТЕКСТ

    H5

    ТЕКСТ

    H6

    ТЕКСТ

    • Укажите атрибут тега <p>, который расположит текст в правой части текстового поля:

    <p align=“left”>Text</p>;
    <p align=“center”>Text</p>;
    <p align=“right”>Text</p>;

    • Вставьте теги P <___>4O<____>10, чтобы получить формулу P4O10;
    • Вставьте теги PO<____>4<_____>3-, чтобы получить ион PO43-;
    • Для раскрытия значения HTML используется тег ____

    Рабочая тетрадь:
    Развитие языка гипертекстовой разметки началось ________

    Как осуществляются связи между документами в HTML____

    Браузер – программа ____

    Web -страницы (Web -документы)-

    HTML (HyperTextMarkupLanguage) язык разметки документа - включает в себя____

    Атрибут (attribute ) - это переменная, ____

    Тег (tag ) . Теги определяют ____

    <acronym> </acronym> используется для ____

    <Hx ></ Hx> (x = 1,2,--6 ). Задаёт ____

    < strong > </ strong > - Используется для ____

    Тег <P > </ P > - Элемент абзаца. Применяется в тексте ___

    Запишите атрибуты тега абзаца для выравнивания по левому, центру и правому краям.

    < sup ></ sup > - располагает часть текста по ____

    < sub ></ sub > располагает часть текста по ___

    Задайте гарнитуру шрифта, размер шрифта, цвет для отдельного слова в тексте.

    Элемент задает отступ слева и справа по тексту тегом _____

    Перечислите все возможные случаи задания цвета фона.

    Задайте цвет гиперссылок


Лаб

Лабораторная работа. Форматирование

Лабораторная работа. Списки

Лабораторная работа Глоссарий

Лабораторная работа Таблицы

Методические указания к лабораторным работам

Цель работы. После выполнения лабораторной работы слушатель будет:

  • иметь представление о методах и приемах форматирования текста в HTML;
  • освоит методики представления текстов фермате HTML.
  • научится форматировать абзацы, отступы, пробелы и т.д.

Задание: Подготовить отформатированный текст по дисциплине в размере одного модуля. Создать файл с расширением hml

Введение в HTML

История развития языков уходит в 60-е годы 20 в. Это было время, когда резко возросло количество компьютерных пользователей. На больших предприятиях и учреждениях возникла потребность обмениваться информацией между пользовательскими компьютерами. В это время был разработан язык GML ( General Markup Language ), который предназначался для использования на ЭВМ семейства IBM . В 80-е годы язык GML развился до мощного универсального языка разметки SGML , который наибольшее распространение получил при оформлении технической документации в военном ведомстве США. В начале 80-х годов этой проблемой занялся Тим Бернерс-Ли. При разработке языка в основу был заложен язык SGML и приемы работы с гипертекстом, с чем и связано название созданного им языка – HTML ( Hyper Text Markup Language ). Так как гипертексты представляют собой электронные документы, работать с ними можно только на компьютере. Связи в гипертекстовой структуре осуществляются с помощью ссылок, благодаря которым пользователь из рабочего документа может вызвать любое количество дополнительных документов. Все документы находятся на серверах, которые размещены по всему миру и соединены между собой каналами.
Ниже приведена хронология развития HTML:

Декабрь 1990 года – рождение языка HTML в рамках проекта World Wide Web, созданного Тимом Бернерсом-Ли.

  • Лето 1991 года – первичная спецификация языка HTML выложена в Интернет для всеобщего обозрения.
  • Апрель 1994 года – появление начального документа HTML 2.0.
  • Июль 1994 года – появление чернового варианта спецификации HTML 2.0.
  • Сентябрь 1995 года – официальное принятие спецификации HTML 2.0 (RFC 1866).
  • Март 1995 года – выпущен черновой вариант HTML 3.0.
  • Май 1996 года – появление HTML 3.2.
  • Июль 1997 года - выпущен черновой вариант HTML 4.0.
  • Апрель 1998 года - принятие спецификации HTML 4.0.
  • Февраль 1999 года - принятие спецификации HTML 4.01.

Ключевые слова

  • Браузер – программа, которая применяется для поиска и просмотра документов в сети Internet . Браузер выполняет следующие функции:
  • находит Web –сервер и устанавливает с ним связь;
  • интерпретирует HTML -код и выводит документы на экран в заданном формате вместе с сопутствующей графикой;
  • читает гиперссылки в документах и осуществляет переходы на указанные документы;
  • поддерживает переходы по страницам вперёд и назад;
  • поддерживает элементы мультимедиа, звук, видео и трехмерную графику.

Наиболее популярным браузером является InternetExplorer 6

  • Web -страницы (Web -документы) - это гипертекстовые документы в WWW , которые содержат такую информацию, как текст, графику, звук и видео. Такие документы имеют расширение html или htm . Другими словами это документ, подготовленный в формате гипертекста и размещенный в WWW
  • Web -сайт - совокупность Web -страниц, объединенных одной общей темой и помещенных, как правило, на одном узловом компьютере.
  • Web -сервер -компьютер, подключенный к Интернету, на котором выполняется специальная программа, обеспечивающая обработку запросов клиентов и выдающая клиентам различные страницы с информацией.
  • WWW (World Wide Web ) - глобальная система распространения гипертекстовой информации, использующая в качестве транспортировки Интернет.
  • URL (Uniform Resource Locator )( унифицированный локатор

ресурса) – уникальный адрес файла в Интернете, который хранится на хост-компьютере подключенному к Интернету. С помощью URL, независимо от протокола доступа, может быть найдена любая информация в Интернете.

  • Базовый URL – часть адреса, которая является общей для всех ссылок текущей Web -страницы
  • HTML (HyperTextMarkupLanguage) язык разметки документа - включает в себя различные способы оформления гипертекстовых документов, дизайн, гипертекстовые редакторы, браузеры. HTML является основным языком для создания документов в WWW .
  • Элемент (element) - конструкция языка HTML . Это контейнер, содержащий данные и позволяющий отформатировать их определенным образом. Любая Web -страница представляет собой набор элементов. Одной из основных идей гипертекста – возможность вложения элементов.

Все элементы языка можно разделить на три группы:

  • элементы, которые создают структуру гипертекстового документа;
  • элементы, создающие эффекты форматирования
  • параметр или свойства элемента.
  • Атрибут (attribute ) - это переменная, которая имеет стандартное имя и которой может присваиваться определённый набор значений: стандартных или произвольных. Атрибуты располагаются внутри начального тега и отделяются друг от друга пробелами.
  • Тег (tag ) - начальный или конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web -страницы теги заключаются в угловые скобки, а конечный тег всегда снабжается косой чертой.
  • Гиперссылка - фрагмент текста, который является указателем на другой файл или объект. Гиперссылка может осуществляться и внутри одного и того же документа.
  • Фрейм ( frame ) - имеет значения:
  • область документа со своими полосами прокрутки;
  • одиночное изображение в сложном (анимационном) графическом файле.

Апплет ( applet ) - программа, передаваемая на компьютер клиента в виде отдельного файла и запускаемая при просмотре Web – страницы.

  • Скрипт или сценарий ( script ) - программа, включаемая в состав Web -страницы для расширения ее возможности.
  • CGI ( Common Gateway Interface ) -общее название для программ, которые работая на сервере, позволяют расширить возможности документов. Без таких программ невозможно создать интерактивные страницы.
  • Программный код - аналог понятия “текст программы”. Код HTML – гипертекстовый документ в своем первоначальном виде, когда видны все элементы и атрибуты.
  • Сайт (site ) набор Web – страниц, принадлежащих одному владельцу.
  • Загрузка ( downloading ) копирование файлов с сервера на компьютер – клиент.

Базовый цвет каждый цветовой оттенок на экране монитора получается сложением трех базовых цветов: красного, зеленого и синего.

Элементы форматирования документа

Тег(и) - ( Tag)

Замечание: Осваивать HTML надо не в специализированных программных пакетов, а основываясь на ручном создании HTML-кода документа. Научившись вручную писать HTML-код документа, вы без труда освоите любой HTML-редактор.
Теги это начальный или конечный маркеры элемента. Теги определяют границы действия элемента и отделяют элементы друг от друга. В тексте Web -страницы теги заключаются в угловые скобки, а конечный тег всегда снабжается косой чертой.
Теги подразделяются на две группы:

  • Теги логического форматирования;
  • Теги физического форматирования

Теги логического форматирования

  • Отображают на экране монитора элементы документа, таким образом, как установлено по умолчанию спецификации языка разметки HTML .
  • Переопределять их параметры или свойства нельзя (кроме использования стилей CSS)
  • <acronym> </acronym> используется для расшифровки аббревиатуры. Реализуется через параметр title и отображается в браузере при наведении курсора на слово-аббревиатуру.

Например: <acronymtitle=“HyperTextMarkupLanguage”> HTML</acronym> расшифровка сокращений.
• < cite ></ cite > Позволяет выделить цитаты и высказывания, названия библиографических источников и пр. Текст помещенный между < cite ></ cite > браузером выделяется курсивом. Аналогичные теги: <EM>,<I>
• <Hx ></ Hx> x = 1,2,--6 Задаёт определенный размер заголовка, всего текста целиком или его конкретного фрагмента. Этот тег уже подразумевает отступ от текстовой части и делать отступ самостоятельно не надо.

  • < strong > </ strong > - Используется для выделения фрагментов текста, которых необходимо акцентировать внимание пользователя. В результате действия тега, фрагмент текста выделяется жирным начертанием.

Теги физического форматирования
Теги физического форматированияпредназначены для выделения отдельных текстовых фрагментов различными способами, установленными автором документа и позволяют разработчику документа визуально изменять вид текста, варьируя его параметры и значения. К тегам физического форматирования относятся:
• Тег <P > </ P > - элемент абзаца. Применяется в тексте для обозначения законченности мысли. В Web -странице четкое деление на абзацы обязательное правило, поскольку тексты должны быть лаконичными.
Пример применения : <p> Здесь располагается текст абзаца </P> (разрешается писать и заглавные буквы и простые)
Тег <p> имеет элемент align с атрибутамиleft, center, rightиjustify которые выравнивают абзац по левому краю, по центру, либо по правому краю, соответственно.

<p align=“left”>Text</p>;
<p align=“center”>Text</p>;
<p align=“right”>Text</p>;
<p align=“justify”>Text</p>;

  • Тег <br>. Элемент, обеспечивающий принудительный переход на новую строку. Имеет только начальный тег. В месте его размещения строка заканчивается, а оставшийся текст печатается с новой строки.

Атрибуты:

      • left – следующая строка текста отражается на ближайшем свободном пространстве у левого поля;
      • right - следующая строка текста отражается на ближайшем свободном пространстве у правого поля;
      • all - следующая строка текста отражается на ближайшем свободном пространстве у любого поля;

• <NOBR></nobr>Текст, заключенный между этими тегами, будет выведен в одну строку. Если строка не вмещается в экран, применяют горизонтальную полосу прокрутки.
• < B ></ B > отображает текст жирным начертанием
• < I ></ I > - выделяет нужную часть текста курсивом.
• < u ></ U > - делает текст подчеркнутым.
• < small ></ small > - отображает в себе текст шрифтом, меньшим, чем шрифт окружающего текста;
• < span ></ span > - присваивает части текста определенные свойства;
• < sup ></ sup > - располагает часть текста по нижней линии;
• < sub ></ sub > располагает часть текста по верхней линии;
• < tt ></ tt >- элемент, обозначающий текст телетайпа;
• < ins ></ ins > и < del ></ del > Эти теги позволяют выделить текст, который надо обозначить как вставленный или удаленный (соответственно). Вставленный текст подчеркивается. Удаленный текст зачеркивается.
• < FONT ></ font > Определяет тип, размер и цвет шрифта.
Атрибуты:

  • face (вид) - позволяет задавать определенный шрифт или несколько шрифтов. Например:

<Font face =“ Arial, Verdana, Tahoma”>;

  • size – указывает размер шрифта в условных единицах от 1 до 7;
  • color– задает цвет шрифта (см Приложение 1).

• <bdo></bdo> Позволяет изменять направление текста. Используется с атрибутом dir, которому присваивается либо LTR (слева направо), либо RTL (справа налево).
< BDOdir =“ RTL ”> Направление текста можно изменить</ bdo >
• < blockquote > </ blockquote > Элемент задает отступ слева по тексту.
Очень полезный тег при форматировании текста, так как позволяет выделять отдельные фрагменты текста и сместить их вправо, а также служит для выделения длинных цитат.

Структура Web- документа

При запуске браузера необходимо ввести информацию о версии HTML. Эта информация содержится в теге <DOCTYPE>, который вынесен за пределы контейнера <html>.
В теге <DOCTYPE> указывается версия HTML и стандарт DTD, либо его версия. Например:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
"http://www.w3.org/TR/html4/loose.dtd">
Здесь:

  • !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 объявляет, что документ соответствует спецификации DTD HTML 4.01, которая рекомендована консорциумом W3C. Облегчает распознавание этого файла другими программами. Рекомендуется оставлять этот документ без изменения.
  • Strict DTD –поддерживает все элементы и атрибуты, кроме устаревших.
  • Transitional DTD –включает все элементы и атрибуты, включая и устаревшие.
  • Frameset DTD – поддерживает все элементы, а также и элементы фреймов.
  • EN – указывает язык DTD.

HTML – документы в составе учебника должны проходить проверку на соответствие DND XHTML 1.1 Проверку файла можно выполнить, если в контейнер meta включить переход по адресу:
"http://www.w3.org/TR/html4/loose.dtd">
Любой Web-документ состоит из контейнера <HTML> </HTML>, внутри которого вложены контейнеры <head></head> и <body></body>.
Весь Web-документ заключается в контейнере HTML, который, начинаясь с тега <HTML> и заканчиваясь тегом </HTML>. Этот тег дает указание браузеру информацию о том, что документ разработан с помощью языка разметки HTML.
Внутри данного контейнера содержатся два контейнера.
1. Контейнер <head></head>, который, содержит парный тег - <title>Название Web-документа</title>, который предназначен для указания имени электронного документа. Все, что находится между парой тегов <title> и </title> интерпретируется браузером как название Web- страницы. Если в документе имеются гиперссылки, то название документа, на который указывается гиперссылкой, будет появляться во всплывающей подсказке.
Другой, наиболее важный тег <META>. Этот элемент содержит служебную информацию и включает в себя два атрибута:

  • определения типа данных;
  • содержание

Информация, заключенная в теге <meta> предназначена для описания внутренних свойств HTML-файла. Например:

  • <meta http-equiv="Content-Type" content="text/html;charset=windows-1251"> показывает, что в документе применена кодировка windows-1251, либо

meta http-equiv="Content-Type" content="text/html; charset=utf-8">- кодировка utf-8;

  • <meta name="GENERATOR" content="Microsoft FrontPage 6.0"> документ создан в редакторе Microsoft FrontPage 6.0;
  • <script language="JavaScript"> ….</script> - пишется программа на языке программирования JavaScript;
  • <meta name=”keywords”> - указание ключевых слов документа;
  • <meta name=”author”> - информация об авторе (авторах) документа;
  • <meta name=”rating”> - установление возрастной категории содержания документа и ряд другой информации.

Далее вставляются каскадные таблицы стилей CSS – это определенный и специально оформленный набор правил, описывающих форматирование различных элементов Web-страницы. Более подробно каскадные стили таблиц будут описаны в соответствующей лабораторной работе.
<style type="text/css">
<!—
.text {font-family:Arial Cyr; color: #000000; line-height: 8mm; font-size: 10pt;}
#kursiv {font-style: italic ; } (указывает, что шрифт текста Arial Cyr, цвет черный, высота линий 8 мм, высота букв 10 пикселей)
.color {background-color: #CECECE; } (цвет фона светло-серый)
-->
</style>
Примечание: все, что заключено между <!—и -- > воспринимается браузером как комментарии.
Далее идет закрывающийся тег </head>;
2. Заключительным контейнером выступает теги <body> текст</body>. Все, что будет располагаться между тегами <body> и </body> будет выводиться на экран.
Рассмотрим основные элементы контейнера.
Контейнер начинается парным тегом <body></body>, который содержи ряд параметров, которые условно можно разделить на четыре группы:

      • параметры фона;
      • границы документа;
      • указание цвета текста;
      • указание цвета гиперссылок.

Установка цвета фона, текста и гиперссылок можно задавать в символьном эквиваленте, шестнадцатеричном коде или в формате цветовой модели RGB.

  • <BODY bgcolor=”white”>;
  • <BODY bgcolor=”#FFFFFF”>, где первые две буквы FF задают оттенок красного цвета, вторые две FF- зелёного цвета и третьи FF – синего цвета. Комбинация цифр и букв, позволяет создать любые цветовые оттенки. (см. Приложение 1)
  • <BODY bgcolor=”255,255,255”>
  • <BODY background=”images/bg0.gif”> -задаст фон в виде рисунка.
  • Цвет гиперссылок задается, как правило, в зависимости от их предназначения:
    • активные гиперссылки - alink=”#OOOOFF”;
    • не посещаемые - link=”#0000FF”;
    • посещаемые – vlink=”blue”

Далее идет определенным образом форматированный текст.

Лабораторная работа 1. Структура Web- документа

Цель работы “Структура Web- документа”:

  • приобрести опыт оформления документов на языке гипертекстовой разметки HTML.
  • научиться создавать Web-документы и форматировать их.

После выполнения работы, слушатель будет знать:

  • методику создания Wed- документов;
  • общую структуру документов;
  • создавать заголовки, абзацы и форматировать их;

Ход работы

Общтй вид Web – документов представлен приведенной ниже программой:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Документ без названия</title>

</head>

<body

</body>
</html>
Создадим шаблон документа. Сохраним его как Web – документ и при выполнении дальнейших лабораторных работ, будем открывать его, набирать текст в контейнере тела и сохранять под другим именем.
Итак начнем работу.

Откройте “Блокнот ”;

Наберите или скопируйте первую часть: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

http://www.w3.org/TR/html4/loose.dtd">

  • Создайте контейнер HTML, для этого наберите открывающийся тег <HTML> и закрывающийся тег </HTML> (не забывайте, при этом, поставить “слэш” /). Учтите, этот контейнер содержит внутри себя несколько контейнеров, поэтому разнесите их по документу.
  • Создайте контейнер заголовка, для этого наберите теги контейнера <head>и</head> , внутри которых наберите:
          • начальный тег заголовка документа <title>, назовите документ и вставьте конечный тег заголовка </title> ;

укажите тип кодировки. Для этого вставьте тег <meta> (закрывающегося тега нет!) и наберите в нем фрагмент программы задания кодировки всего документа: <meta http-equiv="Content-Type" content="text/html;charset=windows-1251"> кодировка windows, либо <meta http-equiv="Content-Type" content="text/html; charset=utf-8">- кодировка utf-8;

  • Закройте контейнер </head>;
  • Организуйте контейнер текста, для этого напишите тег <body> (далее идет текст документа);

Закройте контейнеры </body> и </html>;

  • Сохраните документ. Для этого:
    • в программе “Блокнот”, кликните левой кнопкой мыши на иконке “Файл” и в открывшемся окне нажмите “Сохранить как”;

      • в открывшемся окне выберете папку, в которой будите сохранять документ, и в нижнем окне напишите название вашего файла, желательно на английском языке.

Итак, создали шаблон Web- документа. В дальнейшем будем открывать этот шаблон документа, вставлять туда свой текст и сохранять документ под другим именем.

Лабораторная работа. Форматирование

Лабораторная работа Списки

Лабораторная работа Глоссарий

Лабораторная работа Таблицы


h2

Теги логического форматирования Ответы на задания

Отображают на экране монитора элементы документа, таким образом, как установлено по умолчанию спецификации языка разметки HTML .

Переопределять их параметры или свойства нельзя (кроме использования стилей CSS):

  • <acronym> </acronym>-используется для расшифровки аббревиатуры. Реализуется через параметр title="Расшифровка" и отображается в браузере при наведении курсора на слово-аббревиатуру.
  • < cite ></ cite > -позволяет выделить цитаты и высказывания, названия библиографических источников и пр. Текст помещенный между < cite ></ cite > браузером выделяется курсивом. Аналогичные теги:<EM>-</EM>,<I>-</I>
  • hx = 1,2,--6 -задаёт определенный размер заголовка, всего текста целиком или его конкретного фрагмента. Этот тег уже подразумевает отступ от текстовой части и делать отступ самостоятельно не надо.
  • <strong> </strong> - используется для выделения фрагментов текста, которых необходимо акцентировать внимание пользователя. В результате действия тега, фрагмент текста выделяется жирным шрифтом.. Аналогичные тег:<b>-</b>.

Задание: Используя тег - _______ расшифруйте аббревиатуру HTML, как HyperText Markup Language

Теги физического форматирования Теги физического форматирования предназначены для выделения от-дельных текстовых фрагментов различными способами, установленны-ми автором документа и позволяют разработчику документа визуально изменять вид текста, варьируя его параметры и значения. К тегам физи-ческого форматирования относятся:

Тег <P> </P> - элемент абзаца. Применяется в тексте для обозначения законченности мысли. В Web -странице четкое деление на абзацы обязательное правило, поскольку тексты должны быть лаконич-ными. Пример применения :

<P>Здесь располагается текст абзаца </P>

(разрешается писать и заглавные буквы и простые)

Тег <p> имеет элемент align с атрибутами left, center, right и justify которые выравнивают абзац по левому краю, по центру, либо по пра-вому краю, соответственно.

Text располагается слева

Text располагается по центру

Text располагается справа

Text выравнивается слева и справа

  • Тег <br>. Элемент, обеспечивающий принудительный переход на новую строку. Имеет только начальный тег. В месте его размещения строка заканчивается, а оставшийся текст печатается с новой строки.

Атрибуты:

    • left – следующая строка текста отражается на ближайшем свободном пространстве у левого поля;
    • right - следующая строка текста отражается на ближайшем свободном пространстве у правого поля;
    • all - следующая строка текста отражается на ближайшем свободном пространстве у любого поля;

• <NOBR></nobr>Текст, заключенный между этими тегами, будет выведен в одну строку. Если строка не вмещается в экран, применяют горизонтальную полосу прокрутки.

Задание:

1.Запишите этюд прогроммы абзаца, с располажением справа, слева и выравнен по краям;

2. Создайте принудительный переход на новую строку.

• < B ></ B > отображает текст жирным начертанием
• < I ></ I > - выделяет нужную часть текста курсивом.
• < u ></ U > - делает текст подчеркнутым.
• < small ></ small > - отображает в себе текст шрифтом, меньшим, чем шрифт окружающего текста;
• < span ></ span > - присваивает части текста определенные свойства;
• < sup ></ sup > - располагает часть текста по нижней линии;
• < sub ></ sub > располагает часть текста по верхней линии;
• < tt ></ tt >- элемент, обозначающий текст телетайпа;
• < ins ></ ins > и < del ></ del > Эти теги позволяют выделить текст, который надо обозначить как вставленный или удаленный (соответственно). Вставленный текст подчеркивается. Удаленный текст зачеркивается.

Задания:

1. Запишите этюд прогроммы абзаца, отобразив отдельные слова жирным начертанием, курсивом, меньшим шрифтом, чем шрифт окружающего текста.

2. Запишите этюд прогроммы: a11=x2 + y3;

3. Запишите этюд прогроммы абзаца, отобразив отдельную фразу телетайпом.

< FONT ></ font > Определяет тип, размер и цвет шрифта.

Атрибуты:

  1. face (вид) - позволяет задавать определенный шрифт или несколько шрифтов. Например: <Font face =“ Arial, Verdana, Tahoma”>;

  2. size – указывает размер шрифта в условных единицах от 1 до 7;
  3. color– задает цвет шрифта (см Приложение 1).

• <bdo></bdo> Позволяет изменять направление текста. Используется с атрибутом dir, которому присваивается либо LTR (слева направо), либо RTL (справа налево).
<bdo dir =“ RTL ”> Направление текста можно изменить</ bdo >
• < blockquote > </ blockquote > Элемент задает отступ слева по тексту.
Очень полезный тег при форматировании текста, так как позволяет выделять отдельные фрагменты текста и сместить их вправо, а также служит для выделения длинных цитат.

Задание: Запишите этюд прогроммы абзаца. Выделите отдельные слова цветом, а другие увеличте.

Структура Web- документа

При запуске браузера необходимо ввести информацию о версии HTML. Эта информация содержится в теге <DOCTYPE>, который вынесен за пределы контейнера <html>.
В теге <DOCTYPE> указывается версия HTML и стандарт DTD, либо его версия. Например:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
"http://www.w3.org/TR/html4/loose.dtd">
Здесь:

  • !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 объявляет, что документ соответствует спецификации DTD HTML 4.01, которая рекомендована консорциумом W3C. Облегчает распознавание этого файла другими программами. Рекомендуется оставлять этот документ без изменения.
  • Strict DTD –поддерживает все элементы и атрибуты, кроме устаревших.
  • Transitional DTD –включает все элементы и атрибуты, включая и устаревшие.
  • Frameset DTD – поддерживает все элементы, а также и элементы фреймов.
  • EN – указывает язык DTD.

HTML – документы в составе учебника должны проходить проверку на соответствие DND XHTML 1.1 Проверку файла можно выполнить, если в контейнер meta включить переход по адресу:
"http://www.w3.org/TR/html4/loose.dtd">
Любой Web-документ состоит из контейнера <HTML> </HTML>, внутри которого вложены контейнеры <head></head> и <body></body>.
Весь Web-документ заключается в контейнере HTML, который, начинаясь с тега <HTML> и заканчиваясь тегом </HTML>. Этот тег дает указание браузеру информацию о том, что документ разработан с помощью языка разметки HTML.

Задание: Запишите начало Web-документа.

1. Контейнер <head></head>, который, содержит парный тег - <title>Название Web-документа</title>, который предназначен для указания имени электронного документа. Все, что находится между парой тегов <title> и </title> интерпретируется браузером как название Web- страницы. Если в документе имеются гиперссылки, то название документа, на который указывается гиперссылкой, будет появляться во всплывающей подсказке.
Другой, наиболее важный тег <META>. Этот элемент содержит служебную информацию и включает в себя два атрибута:

  • определения типа данных;
  • содержание

Информация, заключенная в теге <meta> предназначена для описания внутренних свойств HTML-файла. Например:

  • <meta http-equiv="Content-Type" content="text/html;charset=windows-1251"> показывает, что в документе применена кодировка windows-1251, либо

meta http-equiv="Content-Type" content="text/html;
      charset=utf-8">- кодировка
      utf-8;

  • <meta name="GENERATOR" content="Microsoft FrontPage 6.0"> документ создан в редакторе Microsoft FrontPage 6.0;
  • <script language="JavaScript"> ….</script> - пишется программа на языке программирования JavaScript;
  • <meta name=”keywords”> - указание ключевых слов документа;
  • <meta name=”author”> - информация об авторе (авторах) документа;
  • <meta name=”rating”> - установление возрастной категории содержания документа и ряд другой информации.

Далее вставляются каскадные таблицы стилей CSS – это определенный и специально оформленный набор правил, описывающих форматирование различных элементов Web-страницы. Более подробно каскадные стили таблиц будут описаны в соответствующей лабораторной работе.
<style type="text/css">
<!—
.text {font-family:Arial Cyr; color: #000000; line-height: 8mm; font-size: 10pt;}
#kursiv {font-style: italic ; } (указывает, что шрифт текста Arial Cyr, цвет черный, высота линий 8 мм, высота букв 10 пикселей)
.color {background-color: #CECECE; } (цвет фона светло-серый)
-->
</style>
Примечание: все, что заключено между <!—и -- > воспринимается браузером как комментарии.
Далее идет закрывающийся тег </head>;