1896
.pdfТекст программы в блокноте будет выглядеть следующим образом:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows1251"><TITLE>Table</TITLE></HEAD><BODY>
<CENTER><TABLE BORDER="1">
<CAPTION ALIGN="CENTER">Интернет-ресурсы</CAPTION> <TR>
<TH COLSPAN="2">Список адресов Internet</TH> </TR>
<TR>
<TD> http://russia.uthscsa.edu/Music/</TD>
<TD> Музыка на сервере «Маленькая Россия» в Сан-Антонио</TD> </TR>
<TR>
<TD>http://www.deol.ru/queen/</TD> <TD>Русские странички о группе Queen</TD>
</TR>
<TR>
<TD>http://www.september.ru</TD> <TD>Сервер газеты «Первое сентября»</TD> </TR>
<TR>
<TD>http://www.glasnet.ru</TD> <TD>Сервер газеты «Информатика»</TD>
</TR>
<TR>
<TD>http://www.rector.msu.su</TD> <TD>Сервер МГУ</TD>
</TR>
<TR>
<TD>http://www.phys.msu.su</TD> <TD>Сервер физфака МГУ</TD> </TR>
</TABLE></CENTER>
</BODY></HTML>
На рис. 36 показано, как будет выглядеть файл в окне браузера.
Рис. 36. Вид Web-страницы в окне браузера
1.4.3. Цвета в таблице
Существует ряд новых тегов, позволяющих задавать цвета фона и сетки таблицы. В первом случае ключевое слово BGCOLOR вставляется в тег <TABLE> следующим образом:
…
<TABLE BORDER="2" BGCOLOR="YELLOW">
…
</TABLE>
…
Цвет фона всей таблицы будет желтый.
Кроме ключевого слова BGCOLOR, существуют и другие способы управления цветом:
BORDERCOLOR – изменяет цвет сетки таблицы;
BORDERCOLORDARK/BORDERCOLORLIGHT – используется для изменения цвета сетки с дополнительным эффектом трехмерности. Если установлены эти атрибуты, таблица выглядит трехмерной.
Рассмотрим простой пример использования всех новых ключевых слов сразу:
…
<TABLE BORDER="2" BGCOLOR="YELLOW" BORDERCOLOR="RED"
BORDERCOLORDARK="BLUE" BORDERCOLORLIGHT="GRAY">
…
</TABLE>
…
В приведенном ниже HTML-коде цвет каждой ячейки задается отдельно:
Текст программы в блокноте будет выглядеть следующим образом:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows1251"><TITLE>Table</TITLE></HEAD><BODY>
<TABLE BORDER="6"> <TR>
<TD BGCOLOR="YELLOW">Желтый фон-черный текст</TD> <TD BGCOLOR="BLACK"><FONT COLOR="YELLOW">
Черный фон-желтый текст</FONT></TD> </TR>
<TR>
<TD BGCOLOR="BLACK"><FONT COLOR="YELLOW">
Черный фон-желтый текст</FONT></TD>
<TD BGCOLOR="YELLOW">Желтый фон-черный текст</TD> </TR></TABLE>
</BODY></HTML>
На рис. 37 показано, как будет выглядеть файл в окне браузера.
Рис. 37. Вид Web-страницы в окне браузера
Изменим ширину и высоту данной таблицы. Напомним, что величина высоты и ширины задается в пикселях или процентах от величины документа.
Например: WIDTH="300" или WIDTH="50%"
Текст программы в блокноте будет выглядеть следующим образом:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows1251"><TITLE>Table</TITLE></HEAD><BODY>
<TABLE BORDER="6" WIDTH="488" HEIGHT="178"> <TR>
<TD BGCOLOR="YELLOW" WIDTH="340" HEIGHT="100">
Желтый фон-черный текст</TD>
<TD BGCOLOR="BLACK" WIDTH="122" HEIGHT="100"> <FONT COLOR="YELLOW">Черный фон-желтый текст</FONT> </TD>
</TR>
<TR>
<TD BGCOLOR="BLACK" WIDTH="340" HEIGHT="66"> <FONT COLOR="YELLOW">
Черный фон-желтый текст</FONT></TD>
<TD BGCOLOR="YELLOW" WIDTH="122" HEIGHT="66">
Желтый фон-черный текст</TD></TR></TABLE> </BODY></HTML>
На рис. 38 показано, как будет выглядеть файл в окне браузера.
Рис. 38. Вид Web-страницы в окне браузера
Контрольные вопросы
1.Для чего необходимы таблицы на Web-страницах?
2.Какие теги отображают заголовок таблицы?
3.Какие теги определяют строку таблицы?
4.Какие теги определяют текст каждой ячейки таблицы?
5.Что задает ключевое слово BORDER в теге <TABLE>?
6.Какое ключевое слово служит для объединения нескольких строк в таблице?
7.Какое ключевое слово служит для объединения нескольких столбцов в таблице?
8.Каким образом задается фон в таблице?
Практические задания
1.Создайте HTML-документ, отображающий на экране браузера следующую информацию (рис. 39):
Рис. 39. Вид Web-страницы в окне браузера
2.Создайте HTML-документ, отображающий на экране браузера следующую информацию (рис. 40):
Рис. 40. Вид Web-страницы в окне браузера
3.Создайте HTML-документ, отображающий на экране браузера следующую информацию (рис. 41):
Рис. 41. Вид Web-страницы в окне браузера
1.5.ГРАФИКА НА WEB-СТРАНИЦЕ
1.5.1.Типы графических файлов, размещаемых на Web-странице
Изображение можно сохранять в нескольких форматах. У каждого из них свои преимущества и недостатки. WWW поддерживает два основных формата изображений – GIF и JPEG.
Тип файлов GIF (Graphical Interchange Format – графический формат обмена) был впервые применен много лет назад CompuServe (онлайновая информационная служба) для предоставления информации в стандартном графическом формате. Он стал первым типом файлов, поддерживаемых
WWW.
Формат JPEG (Joint Photographic Experts Group – объединенная группа экспертов фотографии). Во многих случаях он оказался существенно эффективнее GIF, особенно для больших изображений. Файлы в формате JPEG занимают меньше места и соответственно быстрее загружаются. JPEG использует специальную технику компрессии изображений, что определяет его преимущество для рисунков и фотографий. Кроме того, JPEG сохраняет цвета и детали лучше, чем GIF.
Оптимальные размеры файлов
При использовании изображений на Web-странице необходимо обратить внимание на размеры файлов. Когда кто-то посещает Webстраницу, ему обычно необходимо загрузить весь текст и все изображения на свой компьютер. Текст загружается недолго, чего нельзя сказать об изображениях. Необходимо представлять себе, насколько велика Webстраница и сколько времени требуется на ее загрузку. Загрузка должна занимать разумный промежуток времени, иначе после одного-двух посещений посетители больше у вас не появятся.
Максимальный размер файла
Лучше любые изображения на странице ограничивать размером 20 Кбайт. Такие изображения достаточно подробны и быстро загружаются. Ограничение в 20 Кбайт очень приблизительно. Если встретилось потрясающее изображение, занимающее больше 20 Кбайт, спокойно используйте его. Просто помните, что если вставляете слишком много больших изображений, время ожидания посетителей существенно возрастет.
1.5.2.Размещение изображений на Web-странице
Втабл. 14 приведены теги, используемые для размещения графических изображений на Web-странице.
Таблица 14. Теги размещения графики на Web-странице
Тег |
Комментарий |
<IMG SRC="name"> |
Добавляет изображение в HTML документ |
|
|
<IMG SRC="name" ALIGN=" "> |
Выравнивает изображение одним из способов: |
|
left – горизонтальное выравнивание по левому |
|
краю (выполняется по умолчанию); |
|
right – горизонтальное выравнивание по |
|
правому краю; |
|
top – вертикальное выравнивание по верхнему |
|
краю; |
|
middle – вертикальное выравнивание по |
|
центру; |
|
bottom – вертикальное выравнивание по |
|
нижнему краю |
<IMG SRC="name" BORDER=" "> |
Устанавливает толщину рамки вокруг |
|
изображения |
|
|
<IMG SRC="name" ALT=" "> |
Задает альтернативный текст |
<IMG SRC="name" WIDTH=" " > |
Задает ширину изображения в пикселях |
<IMG SRC="name" HEIGHT=" "> |
Задает высоту изображения в пикселях |
<IMG SRC="name" HSPACE=" "> |
Устанавливает отступы от левой и правой |
|
сторон изображения в пикселях, составляет 5 |
|
– 30 пикселей |
<IMG SRC="name" VSPACE=" "> |
Устанавливает отступы от верхней и нижней |
|
сторон изображения в пикселях, составляет 5 |
|
– 30 пикселей |
Замечание: всегда указывайте имя графического файла в точном соответствии с его видом в файловой системе (в том числе с учетом прописных букв). Обычно достаточно указать только имя файла и его расширение, но если файл расположен не в текущем каталоге, придется привести полный путь. Имена файлов и расширения должны быть представлены маленькими латинскими буквами, например computer.gif.
1.5.3 Уменьшение размера и миниатюризация изображений
Если общий размер файлов превышает желаемый, у вас есть несколько способов поместить изображения на домашнюю страницу, не заставляя каждого посетителя долго загружать их. Можно масштабировать изображения, уменьшив их размер на экране и соответственно размер файла. После уменьшения размера ваше изображение становится труднее
рассматривать. Некоторые изображения в сжатом виде смотрятся хорошо, другие же практически невозможно разглядеть. Другая возможность, которой можно воспользоваться, – создание миниатюрных дубликатов более крупных изображений. Создайте на Web-странице миниатюру большого изображения и вставьте ссылку (о ссылках поговорим позднее) на изображение-оригинал, чтобы посетители смогли увидеть его, если захотят. Миниатюры очень популярны, поскольку дают посетителям возможность выбирать только те изображения, которые они хотят увидеть.
Выравнивание изображения и задание рамки
Приведем примеры размещений изображений на Web-странице:
1.Выравнивание изображения относительно левой стороны документа
(рис. 42):
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows1251"><TITLE>Computer</TITLE>
</HEAD>
<BODY><IMG SRC="computer.gif" ALIGN="left"> </BODY>
</HTML>
Рис. 42. Вид Web-страницы в окне браузера
2.Выравнивание изображения относительно правой стороны документа (рис. 43):
…
<IMG SRC="computer.gif" ALIGN="RIGHT">
…
Рис. 43. Вид Web-страницы в окне браузера
3. Выравнивание изображения по центру документа (рис. 44):
…
<P ALIGN="CENTER">
<IMG SRC="computer.gif">
…
Рис. 44. Вид Web-страницы в окне браузера
4. Установка рамки изображения (рис. 45):
…
<IMG SRC="computer.gif" BORDER="14" ALIGN="RIGHT">
…