Лабораторная работа №12
Создание графики в WEB-документах
Цель работы: научиться размещать на веб-страницах рисунки, фотографии.
Теоретические сведения
Создание графики средствами HTML
Создавать рисунки можно разными способами, используя любые графические пакеты и форматы файлов. В конечном итоге потребуется преобразовать результаты своей работы в один из стандартных для Интернета форматов GIF, JPG или PNG. Для этого надо открыть рисунок в графическом редакторе и выполнить команду Сохранить как, выбрав один из указанных форматов.
1. Базовые дескрипторы
Тип документа |
<HTML>…</HTML> |
(начало и конец файла) |
|||
Имя документа |
<TITLE>…</TITLE> |
(в заголовке) |
|||
Шапка документа |
<HEAD>…</HEAD> |
(описание документа) |
|||
Тело документа |
<BODY>…</BODY> |
(содержимое страницы) |
|||
Сценарий |
<SCRIPT>…</ SCRIPT > |
(времени и теста) |
|||
2. Для определения структуры документа |
|||||
Заголовок |
<Hn>…</Hn> |
(n – значение от 1 до 6) |
|||
Заголовок по центру |
<Hn ALIGN=CENTER>…</Hn> |
|
|||
3. Для внешнего вида документа |
|||||
Полужирный шрифт |
<B>…</B> |
|
|||
Курсив |
<I>…</I> |
|
|||
Подчеркнутый текст |
<U>…</U> |
|
|||
Отступ |
<DD> |
|
|||
Центрированный |
<CENTER>…</CENTER> |
для текста и для графики |
|||
Размер шрифта |
<FONT SIZE=«+0»>…</FONT> |
+ больше, - меньше |
|||
Цвет шрифта |
<FONT COLOR=#009900>…</> |
009900 – код цвета |
|||
Выбор шрифта |
<FONT FACE=«Georgia»>…</> |
Georgia – наз. шрифта |
|||
4. Описание ссылок |
|||||
Ссылка другое окно |
<A HREF=«Главная.html»>...</> |
|
|||
Графика |
<IMG SRC=«ff.gif»> |
ff.gif – код картинки |
|||
Размеры |
<IMG SRC=«ff.gif» WIDTH=30% HEIGHT=98%> |
||||
5. Для разделителей |
|||||
Сплошная линия <hr align="right" width=60%" hr size="4" font color="ff3399"> |
|||||
Новый абзац <P>…</P> |
|||||
Новая строка <BR> |
|||||
6. Для создания списков |
|||||
Маркированный список <UL><LI>…</UL> |
|||||
Нумерованный список <OL><LI>…</OL> |
|||||
7. Для описания фона и цвета |
|||||
Фоновая картинка |
<BODY BACKGROUND= «fon_2. jpg»> |
||||
Цвет фона |
< BODY BGCOLOR= «#fffCCC»> |
||||
Цвет текста |
<BODY TEXT== «#000000»> |
||||
Цвет ссылки |
<BODY LINK= «#993399»> |
||||
Активная ссылка |
<BODY ALINK= «#339999»> |
||||
8. Для описания таблиц |
|||||
Определить таблицу |
<TABLE>….</TABLE> |
||||
Ячейка таблицы |
<TD>…</TD> |
||||
Растягивание колонки |
<TD COLSPAN=2> |
||||
Растягивание строки |
<TD ROWSPAN=4> |
||||
Цвет ячейки |
<TD BGCOLOR= «#ff99CC»> |
||||
9. Для описания фреймов |
|||||
Документ с фреймами |
<FRAMESET>…</FRAMESET> |
||||
Высота строк |
<FRAMESET ROWS=15%>…</FRAMESET> |
||||
Ширина колонок |
<FRAMESET COLS=20%>…</FRAMESET> |
||||
Документ |
<FRAME SRC= «MENU»> |
||||
Имя фрейма |
<FRAME NAME= "Введение" src="Frameset/Ved.html"> |
||||
Указание прокрутки |
<FRAME SCROLLING="AUTO" / "NO"> |