Организация и форматирование таблиц
Постройте таблицу следующего вида:
Заголовок таблицы
Заголовок1 |
Заголовок2 |
Заголовок3 |
Заголовок4 |
Ячейка1 |
Ячейка3 |
Ячейка4 |
|
Ячейка2 |
Ячейка5 |
||
Задание 6
Построение форм
Постройте формы в виде таблицы:
-
Вопрос 1
Вопрос 2
Ответ 2.1
Вопрос 3
Ответ 3.1
Ответ 3.2
Ответ 3.3
Вопрос 4
Ответ 4.1
Ответ 4.2
Ответ 4.3
reset
Задание 7
Организация фреймов
Разместите на Web-странице фреймы следующих видов:
-
Фрейм 1
с вертикальной полосой
прокрутки
Фрейм 2
Ф
рейм
3Фрейм 4
Контрольная работа
(создание Web – страниц учебного заведения)
Внимание! Результат выполнения контрольной работы приведен на рисунках в приложении 1
Создайте папку Web на диске D:
Откройте программу Блокнот
Создайте Web – страницу:
Введите тэги, определяющие структуру любого HTML - документа
Определите цвет фона и цвет текста с помощью атрибутов bgcolor и text открывающего тега <body>
Задайте стили текста: используйте тэги <h1> </h1> для определения первого предложения ( Добро пожаловать…..)в качестве заголовка
Увеличьте размер остального текста с помощью тегов <big> </big> или <font size=5> </font>
Оформите текст полужирным курсивным начертанием, используя теги <b> </b>; <i> </i>
Выровняйте заголовок по центру с помощью атрибута align=center тега <h1>
Выровняйте абзац по центру с помощью тэгов <center> </center>
Сохраните документ под именем reclama.html в папке Web. Обязательно укажите расширение .htm или .html
Откройте ваш документ с помощью браузера Internet Explorer
Ваша страничка будет выглядеть примерно так, как на рис.1 приложения.
Вставьте в документ под именем reclama.html рисунок cloud.gif
Скопируйте файл cloud.gif или любой другой файл с расширением .gif из папки Windows в вашу папку Web
Для вставки рисунка, используйте одиночный тэг <img> c атрибутом src.
С помощью атрибута <border>=1 включите отображение рамки вокруг рисунка
Ваша страничка будет выглядеть примерно так, как на рис.2
Создайте новую страницу, на которой вставим нумерованный список:
Определите цвет фона и цвет текста с помощью атрибутов bgcolor и text открывающего тега <body>
Определите заголовок списка, используя тэги <h1> </h1>
Создайте список, используя теги <u1> </u1> <li> </li>
Сохраните документ под именем spicok.html в папке Web
Ваша страничка будет выглядеть примерно так, как на рис.3.
Создайте гиперссылку для перехода с первой страницы (reclama.html) на вторую (spicok.html)
Откройте документ reclama.html
Используйте тег <a> с атрибутом href = “spicok.html” перед фрагментом текста о подготовке учащихся и закрывающий тег </a> после него
Ваша страничка будет выглядеть примерно так, как на рис.4.
Создайте гиперссылку для перехода со второй страницы (spicok.html) на первую (reclama.html)
Откройте документ spicok.html
Используйте тег <a> с атрибутом href = “reclama.html” перед фрагментом текста На первую страницу и закрывающий тег </a> после него
Ваша страничка будет выглядеть примерно так, как на рис.5
Создайте новую страницу, на которой вставим таблицу:
Определите цвет фона и цвет текста с помощью атрибутов bgcolor и text открывающего тега <body>
Создайте таблицу, используя теги <table> /</table><tr> </tr> <td> </td>
Добавьте в тег <table> атрибут border=1, чтобы показать рамку и ячейки таблицы толщиной в 1 пиксел
Установите фиксированную ширину таблицы – 140 пиксилей, добавив атрибут width=140 в тег <table>
Сохраните документ под именем menu.html в папке Web
Отредактируйте в файле menu.html строки кода содержащие названия пунктов меню Главная страница и Кого мы готовим, вставив вышеуказанные ссылки соответственно на файлы reclama.html и spicok.html
Ваша страничка будет выглядеть примерно так, как на рис.6
Значительно улучшить внешний вид и функциональность сайта можно, используя фреймы. С помощью фреймов экран разделяется на несколько окон, в каждом из которых отображается содержание отдельной страницы.
Создайте страничку с фреймами
Вместо тэгов <body> </body> используйте пару тэгов <frameset> </frameset> c атрибутами rows или cols, определяющими как делится экран по горизонтали или по вертикали, например <frameset cols=160,*> делит экран на два вертикальных фрейма. Первый имеет фиксированную ширину 160 пикселей, размер второго определяет браузер.
Для описания каждого фрейма в отдельности используйте тэги <frame> c атрибутом scr: <frame src = ”menu.html”> < frame src = ”reclama.html” name=frame >. При помощи атрибута name второму фрейму присвоено имя. Это имя будет указано в ссылках любого документа в качестве значения атрибута target , для определения в какой именно фрейм следует загрузить документ. Например, для того, чтобы при переходе по ссылке href=”reclama.html” документа menu.html документ отражался не в том же окне, что исходный, а в другом в тэге <a> используется атрибут target:
target=”frame”
Сохраните документ под именем index.html в папке Web
Ваша страничка будет выглядеть примерно так, как на рис. 7.
Отредактируйте в файле menu.html тэги: <a href=”reclama.html” target=”frame”> <a href=”spisok.html” target =”frame”>