«Язык гипертекстовой разметки html»
| Вид материала | Реферат |
СодержаниеBgcolor — Использование элемента I Использование элемента U Href="url" — Align (left, center, right) Создание проекта «Тест.exe». |
- Реферат создание сайта на основе html, 60.66kb.
- Сетевые технологии Web-дизайна, 85.09kb.
- Разработка модульной программы Пояснительная записка 30 1 Модульная программа по теме, 1307.03kb.
- План лабораторных работ Введение в Web-программирование; создание html-страниц, работа, 6.6kb.
- Содержание программы: Web -дизайн Основы Web -дизайна. Дизайн в Internet: задачи, подходы,, 13.59kb.
- Методика создания презентаций, 30.89kb.
- Урок-практикум по теме «создание сайта», 95.95kb.
- Районный конкурс учебно- исследовательских работ Секция: информационные технологии, 269.52kb.
- Лабораторная работа №5 Тема: Основы гипертекстовой и Web-технологий, 133.99kb.
- Text Transfer Protocol,которые позволяют настроенному определенным образом серверу, 64.74kb.
и
), в которых первый тэг задает начало элемента, второй — его окончание. Завершающий тэг имеет то же имя, что и стартовый, но перед именем ставится косая черта /. Завершающие тэги не имеют параметров. Некоторые элементы могут включать атрибуты, включаемые в качестве параметров в стартовые тэги1.Не все тэги поддерживаются всеми браузерами. Если какой-либо браузер не поддерживает какой-либо тэг, то он обычно этот тэг просто игнорирует.
Элементы HTML можно классифицировать на три основные категории:
- заголовочные элементы, т.е. элементы, используемые в элементе HEAD («шапка», заголовок) и содержащие информацию о документе в целом: TITLE, ISINDEX, BASE, META, LINK, SCRIPT, STYLE
- блоковые элементы, включающие элементы, которые специфицируют структуру документа, например, разделение на части и параграфы (абзацы): H1, H2, H3, H4, H5, H6, ADDRESS, и элементы P, UL, OL, DL, PRE, DIV, CENTER, BLOCKQUOTE, FORM, ISINDEX, HR, TABLE
- текстовые элементы. Текстовыми элементами могут быть:
- простой текст, возможно содержащий escape последовательности (например, &)
- выражения разметки: EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE
- разметка шрифта: TT, I, B, U, STRIKE, BIG, SMALL, SUB, SUP
- специальные элементы: A, IMG, APPLET, FONT, BASEFONT, BR, SCRIPT, MAP
- элементы формы: INPUT, SELECT, TEXTAREA
- простой текст, возможно содержащий escape последовательности (например, &)
Структура Web-страницы.
HTML
Этот элемент говорит программе-навигатору о том, что файл содержит документ HTML. Расширение имени файла .phpl или .php также говорит о таком содержимом документа.
HEAD
Этот элемент идентифицирует заголовок HTML-документа. Составными частями заголовка могут являться титул, мета-тэги и другие элементы. Титул выводится в окне навигатора (обычно в специальной строке сверху).
TITLE
Этот элемент содержит титул документа и идентифицирует его содержимое в глобальном контексте. Титул иногда выводится в специальном поле окна навигатора (обычно вверху), но не в основном окне. Содержимое этого поля выводится в некоторых каталогах и списках поисковых машин, поэтому следует делать титул максимально информативным. Поле титула используется при WAIS-поиске1.
Необязательно, но элемент HEAD может содержать следующие элементы в добавление к элементу TITLE:
элемент BASE, задающий точный базовый адрес ссылок на URL
элемент META, дающий различную метаинформацию, например дату истечения срока документа
элемент LINK, который также задает метаинформацию, но уже о связях документа с другими документами
элементы STYLE и SCRIPT. Ожидается, что в будущем это будут очень важные элементы, но сейчас они еще не используются (так как стандартизация находится в стадии развития).
BODY
Вторая и наибольшая по размерам часть документа HTML (тело документа), которая содержит контекст документа и отображается в окне навигатора. Описанные ниже тэги включаются между стартовым и оконечным тегами BODY
Итак, самая простая Web-страница выглядит следующим образом:
Переход на новую строку осуществляется с помощью тэга
.
Этот элемент по своему действию является прямой противоположностью предыдущему. Текст, заключенный между его тегами, будет выведен в одну строку. Длинная строка не уместится на экране, и для ее просмотра придется использовать горизонтальную полосу прокрутки.
Провести горизонтальную черту можно с помощью тэга
.
Параметры тэга:
SIZE — толщина линии в пикселях.
WIDTH — ширина линии в пикселях или процентах от ширина окна браузера.
ALIGN — расположение на экране (слева/по центру/справа).
NOSHADE — позволяет представить линию просто однотонной темной полоской.
Уровни заголовков
Когда пишется HTML-документ, текст структурно делится на просто текст, заголовки частей текста, заголовки более высокого уровня и т.д. Первый уровень заголовков (самый большой) обозначается цифрой 1, следующий — 2, и т.д. Большинство браузеров поддерживает интерпретацию шести уровней заголовков, определяя каждому из них собственный стиль. Заголовки выше шестого уровня не являются стандартом и могут не поддерживаться браузером. Заголовок самого верхнего уровня имеет признак "1". Синтаксис следующий:
где x — цифра от 1 до 6, определяющая уровень заголовка.
Escape последовательности (символьные объекты).
Некоторые символы, такие как <, используются в HTML в специальном значении, поэтому должен существовать способ их выражения, как символьных данных внутри самого документа или в URL. Принято использовать следующие нотации (соответствия):
| символ обычное имя (имена) символа | HTML запись символа (escape последовательность) |
| < символ "меньше чем", левая угловая скобка | <1 |
| > символ "больше чем", правая угловая скобка | > |
| & амперсанд | & |
| " двойные кавычки | " |
| знак копирайт, © | © |
| знак зарегистрированной торговой марки, ® | ® |
| непрерывный пробел | |
Двойные кавычки (") могут использоваться и в пределах обычного текста.
В escape последовательности важен вариант написания символов, то есть различаются заглавные и строчные буквы. Например, амперсанд (&) не может быть представлен как & вид записи.
Тэг абзаца
Элемент абзаца (paragraph) — один из самых полезных. Он позволяет использовать только начальный тег, так как следующий элемент <Р> обозначает конец предыдущего и начало следующего абзаца. Конечный тег удобно использовать в тех случаях, когда по смыслу необходимо обозначить конец абзаца. Вместе с элементом <Р> можно использовать атрибут выравнивания align.
позволяют выравнивать абзац по левому краю, центру и правому краю соответственно.
Центрирование элементов документа
Можно центрировать все элементы документа в окне браузера. Для этого можно использовать тэг
Все элементы между тэгами
Элемент
Элемент для обозначения текста, отформатированного заранее (preformatted). Подразумевается, что текст будет выведен в том виде, в каком он был подготовлен пользователем. Например, учитываются символы конца строки, появившееся при наборе текста в редакторе. Во всех других случаях браузер игнорирует эти символы. Этот элемент удобно использовать для демонстрации листингов программ или для вывода текстовых документов, переформатирование которых может привести к искажению их смысла.
Фоновые рисунки
Фоновый цвет
По умолчанию навигаторы выводят текст черными буквами на сером фоне. Однако пользователь может изменить цвет текста и фона по своему желанию. Некоторые Web-дизайнеры очень активно используют возможность смены цвета текста и символов.
Можно изменить цвет всех текстовых элементов (собственно текста, ссылок, использованных ссылок и т.п.) независимо с помощью тега .
Приведенный выше фрагмент обеспечивает вывод белого текста (TEXT) на черном фоне (BGCOLOR), а ссылки будут серебристыми (LINK).
Описание фонового рисунка включается в тэг BODY и выглядит следующим образом:
Итак,
BGCOLOR — цвет фона документа
TEXT — цвет простого текста документа
LINK — цвет ссылки
Цвет задается шестизначным числом в шестнадцатеричном формате по схеме RGB (Red, Green, Blue). Цвет #000000 соответствует черному, а цвет #FFFFFF — белому.
Управление цветом.
| Стандартные цвета: | Градации красного цвета | Градации зеленого цвета | Градации синего цвета | Градации оранжевого цвета |
| Аквамарин Белый Желтый Зеленый Каштановый Красный Оливковый Пурпурный Светло-зеленый Серебристый Серый Сизый Синий Ультрамарин Фуксиновый Черный | #010000 #100000 #200000 #300000 #400000 #500000 #600000 #700000 #800000 #900000 #A00000 #B00000 #C00000 #D00000 #E00000 #FF0000 | #000100 #001000 #002000 #003000 #004000 #005000 #006000 #007000 #008000 #009000 #00A000 #00B000 #00C000 #00D000 #00E000 #00FF00 | #000001 #000010 #000020 #000030 #000040 #000050 #000060 #000070 #000080 #000090 #0000A0 #0000B0 #0000C0 #0000D0 #0000E0 #0000FF | #FFB000 #FFA800 #FFA000 #FF9800 #FF9000 #FF8800 #FF8000 #FF7800 #FF7000 #FF6800 #FF6000 #FF5800 |
Раскладка цветовой гаммы по RGB-составляющим
Белоснежный (Snow) FFFAFA
Призрачно-белый(Ghostwhite) F8F8FF
Белый-антик (Antique White) FAEBD7
Кремовый (Cream) FFFBF0
Персиковый (Peachpuff) FFDAB9
Белый-навахо (Navajo White) FFDEAD
Шелковый оттенок (Cornsilk) FFF8DC
Слоновая кость (Ivory) FFFFF0
Лимонный (Lemon Chiffon) FFFACD
Морская раковина (Seashell) FFF5EE
Медовый (Honeydew) F0FFF0
Лазурный (Azure) F0FFFF
Бледно-лиловый (Lavender) E6E6FA
Голубой с красным отливом (Lavender Blush) FFF0F5
Тускло-розовый (Misty Rose) FFE4E1
Белый (White) FFFFFF
Черный (Black) 000000
Тускло-серый (Dim Gray) 696969
Синевато-серый (Slate Gray) 708090
Грифельно-серый (Light Slate Gray) 778899
Серый (Gray) BEBEBE
Светло-серый (Light Gray) C0C0C0
Серый нейтральный (Medium Gray) A0A0A4
Темно-серый (Dark Gray) 808080
Полуночно-синий (Midnight Blue) 191970
Темно-синий (Dark Blue) 000080
Васильковый (Cornflower) 6495ED
Грифельно-синий (Slate Blue) 6A5ACD
Светлый грифельно-синий (Light Slate Blue) 8470FF
Голубой королевский (Royal Blue) 4169E1
Синий (Blue) 0000FF
Небесно-голубой (Sky Blue) 87CEEB
Светлый небесно-голубой (Light Sky Blue) 87CEFA
Синий со стальным оттенком (Steel Blue) 4682B4
Голубой со стальным оттенком (Light Steel Blue) B0C4DE
Светло-синий (Light Blue) A6CAF0
Синий с пороховым оттенком (Powder Blue) B0E0E6
Бледно-бирюзовый (Pale Turquoise) AFEEEE
Бирюзовый (Turquoise) 40E0D0
Зеленовато-голубой (Cyan) 00FFFF
Светлый циан (Light Cyan) E0FFFF
Темный циан (Dark Cyan) 008080
Серо-синий (Cadet Blue) 5F9EA0
Аквамарин (Aquamarine) 7FFFD4
Цвет морской волны (Seagreen) 54FF9F
Светлая морская волна (Light Seagreen) 20B2AA
Бледно-зеленый (Pale Green) 98FB98
Весенний зеленый (Spring Green) 00FF7F
Зеленая лужайка (Lawn Green) 7CFC00
Зеленый (Green) 00FF00
Нейтральный зеленый (Medium Green) C0DCC0
Темно-зеленый (Dark Green) 008000
Зеленовато-желтый (Chartreuse) 7FFF00
Зелено-желтый (Green Yellow) ADFF2F
Лимонно-зеленый (Lime Green) 32CD32
Желто-зеленый (Yellow Green) 9ACD32
Зеленый лесной (Forest Green) 228B22
Бледно-золотистый березовый (Pale Goldenrod) EEE8AA
Светло-желтый золотистый (Light Goldenrod Yellow) FAFAD2
Светло-желтый (Light Yellow) FFFFE0
Желтый (Yellow) FFFF00
Темно-желтый (Dark Yellow) 808000
Золотой (Gold) FFD700
Светло-золотистый (Light Goldenrod) FFEC8B
Золотисто-березовый (Goldenrod) DAA520
Легкий желтый (Burly Wood) DEB887
Розово-коричневый (Rosy Brown) BC8F8F
Кожано-коричневый (Saddle Brown) 8B4513
Охра (Sienna) A0522D
Бежевый (Beige) F5F5DC
Пшеничный (Wheat) F5DEB3
Рыжевато-коричневый (Tan) D2B48C
Шоколадный (Chocolate) D2691E
Кирпичный (Firebrick) B22222
Коричневый (Brown) A52A2A
Самон (Salmon) FA8072
Светлый самон (Light Salmon) FFA07A
Оранжевый (Orange) FFA500
Коралловый (Coral) FF7F50
Коралловый светлый (Light Coral) F08080
Оранжево-красный (Orange Red) FF4500
Красный (Red) FF0000
Темно-красный (Dark Red) 800000
Теплый розовый (Hot Pink) FF69B4
Розовый (Pink) FFC0CB
Светло-розовый (Light Pink) FFB6C1
Красно-фиолетовый бледный (Pale Violet Red) DB7093
Темно-бордовый (Maroon) B03060
Красно-фиолетовый (Violet Red) D02090
Фуксин (Magenta) FF00FF
Фуксин темный (Dark Magenta) 800080
Фиолетовый (Violet) EE82EE
Темно-фиолетовый (Plum) DDA0DD
Орсель (Orchid) DA70D6
Фиолетово-синий (Blue Violet) 8A2BE2
Пурпурный (Purple) A020F0
Стили в HTML.
| — жирный текст | Использование элемента B |
| — курсив | Использование элемента I |
| — нижний индекс | Обычный текст и элемент SUB |
| — верхний индекс | Обычный текст и элемент SUP |
| | |
| — подчеркнутый | Использование элемента U |
| — печатная машинка | (изображается как шрифт фиксированной ширины) |
| — форматированный | (сохранить формат текста как есть) |
| | |
| — мигающий | |
| | |
| | (по умолчанию 10 точек) |
| | |
| | |
Также можно использовать тэг , обозначающий гарнитуру шрифта
Размер шрифта —
Можно изменять размер шрифта при помощи этого тэга. Шрифт может иметь размер от 1 до 7. Вы можете прямо указать размер шрифта цифрой, или указать смещение относительно базового значения (по умолчанию — 3) в положительную или отрицательную сторону. Базовое значение можно изменить при помощи тэга
Можно изменить цвет шрифта при помощи тэга , а описание — тэгом
Гипертекстовые ссылки
Общий вид:
текст ссылки
Тэг ссылки — .
HREF="URL" — адрес объекта, на который указывает ссылка.
Пользователь также может менять цвета ссылок (как пройденных, так и активных)
Цвет ссылки
Пройденная ссылка
Активная ссылка
HTML-графика.
Поддержка изображений в HTML — путь в мир графики. Создание и манипулирование изображениями, графическими форматами и другим графическим материалом не является частью HTML. В частности, HTML спецификации не объявляют каких-либо требований или ограничений на графические форматы, поддерживаемые Web браузерами.
Большинство программ-навигаторов способны выводить документы, содержащие текст и изображения в форматах XBM, GIF или JPEG. В будущем возможна поддержка и других форматов графики (например Portable Network Graphic — PNG). На загрузку изображений затрачивается дополнительное время и ресурсы процессора, поэтому не следует ими злоупотреблять. Старайтесь использовать файлы с изображениями небольших размеров, оптимизированные для использования в Internet. Для оптимизации графики существует целый ряд программ.
Для включения графики в документ используется тэг
где - ImageName — URL графического файла.
Синтаксис URL для тэга
Размеры изображений
В тэг
Пример включения графики в документ:
Размещение изображений
При размещении графики в тексте документа существует достаточно большая свобода выбора. Можно разместить изображение отдельно от текста (текст будет располагаться выше и ниже, но будет отсутствовать на уровне изображения) или разместить изображение и текст в одном параграфе. Можно даже организовать "оборачивание" текста вокруг графики.
Размещение графики в тексте
По умолчанию нижняя часть изображения выравнивается со следующим за графикой текстом. Можно также выровнять последующий текст по верхней границе изображения или посередине с помощью атрибутов
Можно также организовать "оборачивание" рисунка текстом с помощью атрибутов
Изображения без текста
Для вывода изображения отдельно от текста нужно создать новый параграф и разместить изображение в нем. Можно разместить рисунок слева, справа или по центру с помощью атрибутов ALIGN.
Альтернативный текст для графики
Некоторые навигаторы WWW не способны выводить графику. Кроме того, часть пользователей может специально отказаться от загрузки изображений (в целях экономии времени) при связи через модем. HTML позволяет обеспечить вывод заданного текста в качестве альтернативы.
Для задания такого текста служит параметр
Фрагмент:
обеспечивает вывод вместо изображения UpArrow.gif слова «Вверх». Если программа просмотра поддерживает графику, на экран будет выведен рисунок, в противном случае — заданный в параметре ALT текст.
Фоновые изображения
Последние версии Web-навигаторов могут загружать изображения для использования в качестве фона, на котором выводится текст, таблицы и т.п. Кому-то нравится использовать фоновую графику, другим — нет. При выборе фона нужно помнить только об одном — текст должен хорошо читаться на выбранном фоне при любом экранном разрешении.
В качестве фоновых изображений можно использовать текстуры или изображения объектов. Для создания фоновых изображений пользуются обычными графическими приложениями.
Для создания фона в окне навигатора используются изображения небольшого размера, которые просто транслируются для заполнения окна целиком. Заполнение автоматически осуществляется навигатором после загрузки файла с фоновой графикой.
Внешние изображения, звуки, анимация.
Автор Web-страницы также может предоставить возможность просмотра графики с высоким разрешением взамен представленной в документе уменьшенной копии. Такие изображения называются внешними, их полезно использовать в тех случаях, когда Вы не хотите замедлять процесс загрузки основного документа, предоставляя пользователю возможность самому решить, хочет ли он видеть Ваши картинки.
Для включения ссылки на внешнее изображение используется обычный тэг:
Картинка
Можно также использовать в качестве ссылки уменьшенную копию загружаемого изображения:
Читатель увидит уменьшенную копию и сможет решить, хочет ли он видеть большое изображение.
Такой же синтаксис используется для ссылок на звуковые и анимационные файлы. Например, фрагмент:
link anchor
задает ссылку на анимационный файл QuickTime.
Ниже приведен список расширений имен для наиболее популярных файлов multimedia:
| Тип файла | Расширение |
| обычный текст | .txt |
| документ HTML | .phpl |
| изображение GIF | .gif |
| изображение TIFF | .tiff |
| изображение X Bitmap | .xbm |
| изображение JPEG | .jpg или .jpeg |
| файл PostScript | .ps |
| звуковой файл AIFF | .aiff |
| звуковой файл AU | .au |
| звуковой файл WAV | .wav |
| анимация QuickTime | .mov |
| анимация MPEG | .mpeg or .mpg |
Однако не у всех пользователей могут быть установлены программы для работы с multimedia-расширениями. На большинстве рабочих станций UNIX, например, нет возможности просматривать анимационные файлы QuickTime.
Таблицы
До появления в HTML специальных средств работы с таблицами приходилось использовать форматированный текст (
), в котором для создания ровных колонок использовались пробелы. Таблицы существенно улучшают представление текста, даже если он на первый взгляд не похож на таблицу
Появление новых тэгов существенно расширило возможности организации таблиц. Сейчас таблицы могут иметь специальные заголовки, в которых разъясняются значения колонок и строк, ячейки для каждого элемента таблицы и т.п. В приведенной ниже таблице описаны теги HTML, предназначенные для организации таблиц в документах
Базовые элементы таблиц
| Элемент | Описание | |
| | определяет таблицу HTML. Если задан атрибут BORDER, ячейки таблицы выделяются рамкой. | |
| | определяет заголовок таблицы. По умолчанию заголовок располагается над таблицей и выравнивается по центру. С помощью атрибута | |
| | ||
| задает строку таблицы. Можно задать атрибуты для целой строки : ALIGN (LEFT, CENTER, RIGHT) и/или VALIGN (TOP, MIDDLE, BOTTOM)2. | ||
| | ... | определяет ячейку-заголовок. По умолчанию текст в этой ячейке выводится жирным шрифтом и выравнивается по центру. Ячейка-заголовок может содержать другие атрибуты, задающие представление ячейки и/или ее содержимого3. |
|---|---|---|
| | ... | определяет ячейку данных в таблице. По умолчанию текст выравнивается по левому краю и центруется по вертикали. Ячейка может содержать другие атрибуты, определяющие характеристики этой ячейки и/или ее содержимого4. |
Атрибуты таблиц
Атрибуты в ячейках
| Атрибут | Описание |
| ALIGN (LEFT, CENTER, RIGHT) | Выравнивание содержимого ячейки по горизонтали |
| VALIGN (TOP, MIDDLE, BOTTOM) | Выравнивание содержимого ячейки по вертикали |
| COLSPAN=n | Число колонок (n), охватываемых ячейкой |
| ROWSPAN=n | Число строк (n), охватываемых ячейкой |
| NOWRAP | Запрет переноса слов (word wrapping) в ячейке. |
Формат таблиц
Типичная таблица выглядит подобно приведенному здесь фрагменту:
| <== конец таблицы |
Тэги
Другие элементы HTML-таблиц.
| Окантовка таблицы | | | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Расстояние между ячейками |
|