Спонсор: Microsoft
Вы можете этот курс.
Волгоградский государственный университет
Опубликован: 02.03.2009 | Доступ: свободный | Студентов: 1518 / 187 | Оценка: 4.20 / 4.03 | Длительность: 16:55:00
Специальности: Разработчик интернет-проектов
Теги:
Лекция 2:
Язык гипертекстовой разметки HTML
Изображения
Принимая решение о целесообразности включения в документ тех или иных изображений, нужно иметь в виду следующее:
Графические файлы могут иметь значительные размеры, что требует времени для их загрузки. Насыщенность графикой может привести к большим затратам времени, требуемым для получения документов, особенно при низкоскоростных соединениях.
Многие пользователи работают в режиме отключения приема графических изображений для увеличения скорости передачи данных.
Пользователи могут работать с различным разрешением экрана и различной глубиной цвета. Страницы, хорошо смотрящиеся при одном разрешении, могут выглядеть совершенно по-другому при ином разрешении.
Изображения на Web-страницах могут использоваться двумя способами: в качестве фонового изображения, на котором располагаются элементы основного документа, и изображения, встраиваемые в документ.
На Web-страницах в подавляющем большинстве случаев используется растровая графика в двух форматах: GIF и JPG. Эти два формата непосредственно поддерживаются популярными браузерами, а для использования большинства других графических форматов потребуются специальные средства.
Разработанный недавно формат PNG был призван заменить растровый формат GIF, однако, несмотря на его очевидные преимущества, должного распространения на настоящий момент не получил.
Для добавления изображения в HTML-документ необходимо перевести изображение в формате GIF (файл *.gif ) или JPEG (файл *.jpg или *.jpeg ). Для этого используется следующий тэг:
<img src="picture.gif" alt="Картинка"/>
Встретив такую метку, браузер покажет на экране текст Картинка и начнет загружать на его место картинку из файла picture.gif. Атрибут ALT необходим для старых браузеров, которые не поддерживают изображений, а также на случай, если у браузера отключена автоматическая загрузка изображений. Современные браузеры будут также отображать альтернативный текст в качестве подсказки ( tooltip ) при помещении курсора мыши в область изображения.
Файл, содержащий изображение, может находиться в другом каталоге или даже на другом сервере. В этом случае стоит указать его полное имя.
Фоновое изображение для HTML-документа всегда заполняет все окно просмотра Если размер изображения меньше размеров окна просмотра, то оно будет размножено по принципу мозаики. Поэтому фоновые изображения должны создаваться так, чтобы при появлении на экране границы сшивки повторяющихся изображений были бы невидимы.
Обычно в качестве фонового берется небольшое изображение, для загрузки которого по сети не требуется значительного времени. Существуют коллекции изображений (текстур), которые можно использовать при разработке HTML-документов.
Другим часто используемым вариантом является фоновое изображение в виде бледного рельефного логотипа. Такая графика ясно идентифицирует сайт и не мешает восприятию материала.
Пример записи тэга <body> с указанием фонового цвета и фонового изображения:
<body background="texture.gif" bgcolor="gray">
Рекомендуется указывать цвет фона документа, если задается фоновое изображение, так как при загрузке документа прежде всего отображается текстовая часть, а на следующем проходе будут загружаться изображения, в том числе и изображение, используемое в качестве фонового. До момента загрузки и отображения фонового изображения цвет фона документа будет определяться значением параметра bgcolor или устанавливаться по умолчанию. До загрузки фонового изображения порой проходит достаточное количество времени, в течение которого пользователь знакомится с уже загруженным текстом. В какой-то момент проявляется фоновое изображение, изменяя гамму цветов документа. Чтобы предотвратить резкое изменение гаммы цветов, следует задавать значение цвета фона близким к цветам фонового изображения. Кроме того, пользователь может отключить загрузку изображений. В этом случае фоновое изображение также не будет загружено.
Цветовая гамма
Цветовая гамма HTML-документа определяется атрибутами, размещенными внутри метки <body>:
Цвет кодируется последовательностью из трех пар символов. Каждая пара представляет собой шестнадцатеричное значение насыщенности заданного цвета одним из трех основных цветов (красным, зеленым и синим) в диапазоне от нуля (00) до 255 (FF). Примеры:
bgcolor=#FFFFFF
Цвет фона. Насыщенность красным, зеленым и синим одинакова — FF (это шестнадцатиричное представление числа 255). Результат — белый цвет.
text=#000000
Цвет текста. Насыщенность красным, зеленым и синим одинакова — 00 (ноль). Результат — черный цвет.
link=#FF0000
Цвет гипертекстовой ссылки. Насыщенность красным — FF (255), зеленым и синим — 00 (ноль). Результат — красный цвет.
Тэг <body> может включать атрибут background="[имя файла]", который задает изображение, служащее фоном для текста и других изображений. Фон должен быть представлен в формате GIF (файл с расширением *.gif) или JPEG (файл с расширением *.jpg или *.jpeg).
Браузеры заполняют множественными копиями изображения-фона все пространство окна, в котором открыт документ.
Таблицы
Одним из наиболее мощных и широко применяемых в HTML средств являются таблицы.
В HTML таблицы используются не только традиционно, как метод представления данных, но и как средство форматирования Web-страниц.
Описание таблиц должно располагаться внутри раздела документа <body>. Документ может содержать произвольное число таблиц, причем допускается вложенность таблиц друг в друга. Каждая таблица должна начинаться тэгом <table> и завершаться тэгом </table>. Внутри этой пары тэгов располагается описание содержимого таблицы. Любая таблица состоит из одной или нескольких строк, в каждой из которых задаются данные для отдельных ячеек.
Каждая строка начинается тэгом <tr> (Table Row) и завершается тэгом </tr>. Отдельная ячейка в строке обрамляется парой тэгов <td> и </td> (Table Data) или <th> и </th> (Table Header). Тэг <th> используется обычно для ячеек-заголовков таблицы, а <td> — для ячеек-данных. Различие в использовании заключается лишь в типе шрифта, используемого по умолчанию для отображения содержимого ячеек, а также расположению данных внутри ячейки. Содержимое ячеек типа <th> отображается полужирным шрифтом и располагается по центру ( align="center", valign="middle" ). Ячейки, определенные тэгом <td> по умолчанию отображают данные, выровненные влево ( align="left" ) и посередине ( valign="middle" ) в вертикальном направлении.
Пример:
<html> <body> <h1>Простейшая таблица </h1> <table border="1"> <caption>Заголовок таблицы</caption> <tr> <td> Первая строка, первая колонка </td> <td> Первая строка, вторая колонка </td> </tr> <tr> <td> Вторая строка, первая колонка </td> <td> Вторая строка, вторая колонка </td> </tr> </table> </body> </html>
Тэг <table> может включать несколько атрибутов (табл. 2.5).
| align | Устанавливает расположение таблицы по отношению к полям документа. Допустимые значения: align="left", align="center", align="right". |
| width | Ширина таблицы. Ее можно задать в пикселах (например, width="400" ) или в процентах от ширины страницы (например, width="80%" ). |
| border | Устанавливает ширину внешней рамки таблицы и ячеек в пикселах (например, border="4" ). Если атрибут не установлен, таблица показывается без рамки. |
| cellspacing | Устанавливает расстояние между рамками ячеек таблицы в пикселах (например, cellspacing="2" ). |
| cellpadding | Устанавливает расстояние между рамкой ячейки и текстом в пикселах (например, cellpadding="10" ). |
Таблица может иметь заголовок ( <caption> ... </caption> ), хотя заголовок не является обязательным. Тэг <caption> может включать атрибут align.
Каждая строка таблицы начинается с метки <tr> и заканчивается меткой </tr>. Метка <tr> может включать следующие атрибуты (табл. 2.6).
| align | Устанавливает расположение таблицы по отношению к полям документа. Допустимые значения: align="left", align="center", align="right". |
| valign | Устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: valign="top", valign="middle", valign="bottom". |
Каждая ячейка таблицы начинается с тэга <td> и заканчивается меткой </td>. Тэг <td> может включать следующие атрибуты (табл. 2.7).
| nowrap | Присутствие этого атрибута означает, что содержимое ячейки должно быть показано в одну строку. |
| colspan | Устанавливает размер ячейки по горизонтали. Например, colspan="3" означает, что ячейка простирается на три колонки. |
| rowspan | Устанавливает размер ячейки по вертикали. Например, rowspan="2" означает, что ячейка занимает две строки. |
| align | Устанавливает выравнивание текста в ячейке. Допустимые значения: align="left", align="center", align="right". |
| valign | Устанавливает вертикальное выравнивание текста в ячейке. Допустимые значения: valign="top", valign="middle", valign="bottom". |
| width | Устанавливает ширину ячейки в пикселах (например, width="200" ). |
| heigth | Устанавливает высоту ячейки в пикселах (например, heigth="40" ). |
При отображении таблиц их ширина и высота автоматически вычисляются браузером и зависят от многих факторов: значений параметров, заданных в описании всего документа, данной таблицы, отдельных ее строк и ячеек, содержимого ячеек, а также параметров, задаваемых при просмотре документа в том или ином браузере, например, типа и размеров шрифта, размеров окна просмотра и др. При отображении расчет размеров таблиц выполняется автоматически с учетом этих факторов, при этом делается попытка представить таблицу в наиболее удобном виде — расположить таблицу так, чтобы она помещалась в окне просмотра. Однако бывает необходимо принудительно указывать ширину или высоту таблицы. Для этой цели используются параметры width (ширина таблицы) и height (высота таблицы) тэга <table>. Аналогичные параметры могут задаваться и для отдельных ячеек.
Одной из особенностей представления таблиц различными браузерами является отображение пустых ячеек. Согласно описанию языка все браузеры должны дополнять строки пустыми ячейками, если в какой-либо строке их количество задано меньшим, чем в остальных строках. Кроме того, в любом месте таблицы могут находиться ячейки, не содержащие данных. Существует различие между пустыми ячейками и ячейками, содержащими невидимые данные. В пустых ячейках внутри пары тэгов <td> и </td> не содержится никакой информации или один или более пробелов, которые не трактуются как данные. Ячейки, содержащие невидимые данные, к примеру, могут содержать код или код перевода строки <br>, или любой текст, цвет которого совпадает с цветом фона ячейки. Если ячейки, содержащие данные (пусть даже невидимые), отображаются всеми браузерами одинаково, то пустые ячейки будут показаны по-разному.
Если ячейка таблицы пуста, вокруг нее не рисуется рамка. Если ячейка пуста, а рамка нужна, в ячейку можно ввести символьный объект (non-breaking space — неразрывающий пробел).
Фреймы
Фреймы позволяют разбить окно просмотра браузера на несколько прямоугольных подобластей, располагающихся рядом друг с другом. В каждую из подобластей можно загрузить отдельный HTML-документ, просмотр которого осуществляется независимо от других. Между фреймами, также как и между отдельными окнами браузера, при необходимости можно организовать взаимодействие, которое заключается в том, что выбор ссылки в одном из фреймов может привести к загрузке нужного документа в другой фрейм или окно браузера.
Фреймы могут быть использованы в следующих случаях:
- при необходимости организовать управление загрузкой документов в одну из подобластей окна просмотра браузера при работе в другой подобласти;
- для расположения в определенном месте окна просмотра информации, которая должна постоянно находиться на экране вне зависимости от содержания других подобластей экрана;
- для представления информации, которую удобно расположить в нескольких смежных подобластях окна, каждая из которых может просматриваться независимо.
Фреймы похожи на таблицы — и те и другие осуществляют разбиение окна просмотра браузера на прямоугольные области, в которых располагается некоторая информация. Однако при помощи фреймов можно решить не только задачу форматирования страниц документа, но организовать взаимодействие между ними. Принципиальная разница между фреймами и таблицами состоит в том, что каждому фрейму должен соответствовать отдельный HTML-документ, а содержимое всех ячеек таблицы всегда является частью одного документа. Отображаемая во фрейме страница может прокручиваться при просмотре независимо от других.
Пример:
<frameset rows="80%,20%"> <frameset cols="15%, 85%"> <frame src="LIST.htm"> <frame scrolling=auto src="empty.htm" name="pages"> </frameset> <frame src = "toolbar.html" scrolling=noresize> </frameset>
Фреймы определяются в структуре, называемой frameset, которая используется для страниц, содержащих фреймы, вместо раздела body обычного документа. Контейнер из тэгов <frameset> и </frameset> обрамляет каждый блок определений фрейма. Внутри контейнера <frameset> могут содержаться только тэги <frame> и вложенные тэги <frameset>. Тэг <frame> определяет одиночный фрейм и не является контейнером. Необходимо записать столько тэгов <frame>, сколько отдельных фреймов определено при задании тэга <frameset>.
Взаимодействие между фреймами заключается в возможности загрузки документов в выбранный фрейм по командам из другого фрейма. Для этой цели используется параметр target тэга <a>. Данный параметр определяет имя фрейма (задаваемого в параметре name тэга frame ) или окна браузера, в которое будет загружаться документ, на который указывает данная ссылка. По умолчанию при отсутствии параметра target документ загружается в текущий фрейм.
<a href="test.htm" target="pages">
Поддержка фреймов имеется только в стандарте HTML 4.0, однако большинство современных браузеров распознавали фреймы и до появления HTML 4.0. В XHTML поддержка фреймов отсутствует.
