- •Практическая работа. «Разработка гипермедиальных приложений с использованием языка html. Ход работы.
- •Сначала введите теги, определяющие структуру любого –документа (используйте любой регистр – верхний или нижний).
- •Задание стилей текста:
- •Вставка рисунка.
- •Создание списка.
- •Создание формы:
- •Вставка гипертекстовых ссылок.
- •Создание таблицы.
- •Создание страницы с фреймами.
- •Введение в гипертекст и гипермедиа
- •Язык html представления гипермедиальных документов
- •Структура.
- •3. Каскадные страницы стилей css
-
Проверьте работу переходя с одной странички на другую.
-
Создание таблицы.
До сих пор мы создавали документы, в которых текст располагался в одной колонке. На практике иногда бывает необходимо расположить текст в двух или трех колонках. Помочь в этом может таблица. Кроме того, таблица, состоящая из одной ячейки, может эффектно выделить фрагмент текста, на который вы хотите обратить внимание читателя. Очень удобно чередовать в ячейках таблицы рисунки и текст. Ну, и конечно же, таблица нужна для отображения информации в табличном виде. Часто таблица используется для В представления меню.
Создадим в новом файле таблицу из одной колонки, в ячейках которой, как в меню, представим ссылки на имеющиеся и другие, еще не созданные страницы сайта. Ведь сайт может содержать десятки страниц. Поэтому очень важно иметь возможность быстро выбирать нужную страницу из меню. Это меню мы затем поместим у левого края экрана так, чтобы оно постоянно оставалось в поле зрения пользователя.
Каждая таблица начинается тегом <table> и заканчивается тегом </tаble>. Строки таблицы образуются парой тегов <tr></tr>, между которыми располагаются пары тегов <td></td>. Каждая пара этих тегов образует один столбец. Между открывающим <td> и закрывающим </td> тегами помещается текст или любое другое содержимое ячейки
-
Создадим новую страницу нашего сайта, В окне программы Блокнот (Notepad) выберите команду меню Файл Создать (File New)
-
В заголовке документа укажите Меню. Цвет фона и текста документа самостоятельно выберите такими, чтобы ссылки были хорошо видны
<title>Meню> </title>
<body bgcolor=esilver>
-
Вставьте пустую строку между открывающим <body> и закрывающим </body> тегами и, начиная с нее, введите код.
<table>
<tr><td>Главная страница</td></tr>
<tr><td>Чем мы занимаемся? </td></tr>
<tr><td>О нашей группе</td></tr>
<tr><td>Новости</td></tr>
<tr><td>Расписание </td></tr>
<tr><td>Развлечения</td></tr>
<tr><td>Наши партнеры</td></tr>
<tr><td>Клуб досуга</td></tr>
<tr><td>Связь с нами</td></tr>
</table>
-
Сохраните документ в папке Web под именем menu.html
-
Запустите его.
-
Используя атрибут align=center выравняйте таблицу по центру
-
Добавьте в тег <tаble> атрибут border=1, чтобы показать рамку и ячейки таблицы толщиной 1 пиксел
-
Установите для таблицы ширину 140 пикселов, добавив атрибут width=l40 в открывающий тег <table>
-
Выделить данные в ячейках полужирным начертанием и выравнять по центру ячеек, вместо тегов <td></td> используйте теги <th></th>
-
В тегах <td> и <th> вы можете использовать следующие атрибуты:
•align - для горизонтального выравнивания содержимого ячеек по центру (center), левому (left) и правому (right) краям ячейки;
• width - для указания ширины ячейки в пикселах;
-
height - для определения высоты ячейки;
-
valign - для вертикального выравнивания данных в ячейке по верхнему (top) и нижнему (bottom) краям и середине (middle) ячейки; по умолчанию valign=middle.
-
Проверьте, как работают эти атрибуты, после чего верните таблицу в прежнее состояние.
-
Поэкспериментируйте с цветами и подберите подходящие, с вашей точки зрения, для таблицы, вставив атрибут bgcolor соответственно в тег <th>, <tr> или <table>.
-
Создадим ссылки из двух первых пунктов меню на соответствующие страницы нашего сайта. Так как остальные страницы еще не созданы, то ограничимся этими двумя ссылками. Как и прежде, воспользуемся тегами <а></а> с атрибутом href. В качестве значения этого атрибута для первого пункта меню - Главная страница - следует указать файл Km.html, т.е. href=" Km.html”, а для второго - Чем мы занимаемся? -файл spisok.html,т.е.href="spisok.html”
<tr><th><a href="km.html" target="frame">Главная страница</a></th></tr>
<tr><th><a href="spisok.html" target="frame">Чем мы занимаемся?</a></th></tr>