Тема: Створення таблиць на Web-сторінках за допомогою мови гіпертекстової розмітки html.
Мета: Навчитися створювати таблиці за допомогою тегів мови HTML
Теоретичні відомості
Экономическая информация часто представляется в виде таблиц. Язык HTML имеет развитые возможности для описания таких объектов.
Описание таблицы:
<TABLE> и </TABLE> - служат для описания таблицы в целом
<CAPTION> </CAPTION> - для описания заголовка таблицы
<TR> </TR> -для описания строк таблицы
<TH> - для описания ячейки, являющейся заголовком столбца
<TD> - для описания ячейки, являющейся данными таблицы
атрибут BORDER= служит для создания рамки вокруг таблицы или вокруг отдельных ячеек.
В качестве содержимого ячеек могут использоваться любые данные и любые теги, допустимые в теле HTML-документа.
Задание 1. Создать HTML –документ с таблицей простой структуры:
<HTML>
<HEAD>
<TITLE>Пробная таблица</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=”90%” BORDER=10 CELLPADDING=2 CELLSPACING=10>
<CAPTION>Моя первая таблица</CAPTION>
<TR><TH>Первый столбец<TH>Второй столбец<TH>Третий столбец
<TR><TD>10<TD>20<TD>30
<TR><TD>100<TD>200<TD>300
</TABLE>
</BODY>
</HTML>
Задание 2. Создать HTML –документ с таблицей сложной структуры:
<HTML>
<HEAD>
<TITLE>Пробная таблица</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=”90%” BORDER=10 CELLPADDING=2 CELLSPACING=10>
<CAPTION>Моя первая таблица</CAPTION>
<TR><TH>Первый столбец<TH COLSPAN=2>Второй столбец<TH>Третий столбец
<TR><TD>10<TD ROWSPAN =2>20<TD>30<TD>40
<TR><TD>100<TD>300<TD>400
</TABLE>
</BODY>
</HTML>
Задание 3. Создать HTML –документ следующего вида:
До сих пор мы описывали только содержимое страниц и видели те стили форматирования, которые по умолчанию предлагает броузер. В языке HTML есть возможность задавать свои варианты форматирования и оформления фрагментов страниц. Среди них:
<FONT> </FONT> - парные теги, которые позволяют выполнить форматирование всех элементов страницы, заключенных между ними. Этот тег должен содержать один из атрибутов: SIZE= (от 1 до 7), COLOR= (например “RED”).
<B></B>, позволяет сделать текст, заключенный между открывающим и закрывающим тегом жирным, <I></I> - позволяет сделать текст наклонным, <U></U> - позволяет сделать текст подчеркнутым.
Атрибут BGCOLOR тега <BODY>- позволяет задать фоновый цвет. Например BGCOLOR=”BLACK”
Атрибут BACKGROUND тега <BODY> позволяет в качестве фона указать какой-либо графический файл. Например
BACKGROUND=”C:\Мои документы\Пузырьки.BMP”
Задание 4. Изменить Вид страницы, созданный в задании 3, так, чтобы она выглядела следующим образом.
Практична робота №9
Тема: Використовування на Web-сторінках графічних та мультимедійних об’єктів.
Мета:Навчитися підключати на Web-сторінки графічні та мультимедійні об’єкти
Теоретичні відомості
Для того, чтобы расположить на Web-странице графический объект используют тег <IMG SRC=”Имя файла”>. Возможно использование в этом теге атрибутов WIDTH= -ширина изображения HIGHT= - высота изображения
Задание 1. Создать Web-страницу следующего вида:
Более удобно работать со страницей, на которой есть все возможности навигации (переход на новую страницу, возврат на основную и т.д.) Еще более эффектно выглядит, когда такие ссылки выглядят как картинки. Для создания ссылки в виде картинки тег IMG нужно разместить между открывающим и закрывающим тегами ссылки:<A> и </A>.
Задание 2. Создать два HTML-документа произвольного содержания, содержащие кнопки Вперед (на первом документе) и Назад (на втором документе) в виде картинок.
Ход выполнения задания:
Текст первого документа может быть таким. Для того, чтобы страница отобразилась без ошибок нужно, чтобы в текущей папке находился еще один документ с именем 9_22.htm и картинка с именем, например, 21.jpg.
<HTML>
<TITLE>Стрелки для навигации</TITLE>
<BODY>
<p>Нажми на картинку и перейдешь к другому документу
<p>
<A HREF="9_22.htm"><IMG SRC="21.jpg" WIDTH="100" HIGHT="100"></A>
</BODY>
</HTML>
Второй документ со второй кнопкой создайте самостоятельно.
Для привлечения внимания к Web-странице (особенно если они создаются с коммерческой целью) часто используются анимированные (движущиеся) изображения. Мы попытаемся сами создать такое анимированное изображение в среде Macromedia Flash и разместить его на своей страничке.
Задание 3. Создать бегущую строку, содержащую Ваши Фамилию, Имя, отчество и номер группы и разместить ее на странице, содержащей сведения о Вашей группе.
Ход выполнения задания:
Открыть программу Macromedia Flash (Пуск/Программы/Macromedia/Flash)
Выбрать в меню Text/Font/Courier Cyr
Выбрать в меню Text/Size/14
«Взять» с панели инструментов инструмент Text Tool и нарисовать в правом верхнем углу область, в которой поместися Ваша фамилия, имя и отчество.
Ввести в эту область Ваши фамилию, имя и отчество.
Выбрать в меню пункт Modify/Break Apart
Повторить пункт 6.
Выбрать цвет надписи
Выбрать в меню пункт Modify Group
Щелкнуть мышью под отметкой 30 на шкале кадров
Выбрать в меню Insert/KeyFrame
Перетащить полученную надпись в правый верхний угол рабочей области.
Выбрать в меню Insert/Create Motion Tween
Выбрать в меню Control/Test Scene
Вы получили движущееся изображение
Сохраните полученную анимацию в своей папке под именем 9_3.fla
Выберите в меню пункт Control/Test Scene и просмотрите анимацию еще раз. После этого в Вашей папке окажется еще один файл 9_3 с расширением swf. Этот файл можно использовать на Web-странице.
Создайте новый HTML –документ содержащий ссылку на анимированное изображение:
Практична робота №10