Автор работы: Пользователь скрыл имя, 09 Ноября 2014 в 17:29, контрольная работа
1. Основы языка HTML. Таблицы в HTML.
2. Последовательность действий по разработке web-сайта.
ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ «СИБИРСКАЯ АКАДЕМИЯ ГОСУДАРСТВЕННОЙ СЛУЖБЫ»
(кафедра)
(дисциплина)
Письменное контрольное задание для студентов и слушателей дистанционного обучения
Студент |
_______Никифорова Ж.Б.________ |
Группа |
___________09405______________ |
Дата |
___________15.09.2010_________ |
Подпись |
______________________________ |
Преподаватель |
____Зацаринная О.А.___________ |
Дата |
______________________________ |
Оценка |
______________________________ |
Подпись |
______________________________ |
Новосибирск 2010
Необходимо выполнить все задания.
ПКЗ готовится и пересылается в одном документе WORD.
Выполнение ПКЗ является необходимым, но не достаточным условием получения зачёта по курсу.
HTML(HyperText Makeup Language - язык создания гипертекстовых документов) - стандарный сервис сети Интернет, принятый WWW- консорциумом (W3C). На сегодняшний день последней является 4-я версия стандарта, переработанная и дополненная. Данный документ не является ни переводом какого-либо стандарта, ни сопутствующим комментарием, его цель - предоставление общих знаний о формате HTML и путях его создания.
На самом деле, если открыть файл с расширением htm (или html) в любом текстовом редакторе, то можно увидеть,что это не что иное, как обычный текст, правда «испорченный» какими-то словами в угловых скобках. Эти слова и представляют собой средства разметки текста, которые понимает программа, работающая с html-файлами (такую программу называют браузер). То есть html - это обычный текст (информация) плюс управляющие элементы - тэги (удобное представление этой самой информации).
Отсюда следует, что для того, чтобы создать гипертекст, нужно всего лишь знать как, куда и в каком количестве «вносить» эти управляющие элементы.
Тэги - это средство, позволяющее браузеру предоставить имеющуюся информацию в виде, удобном для восприятия, поиска, чтения. Это в своем роде язык программирования, определяющий, как будет выглядеть на экране следующая строка, что нужно выделить, а что - наоборот - столь очевидно, что нет необходимости это подчеркивать.
Тэгом считается определенное выражение, помещенное в скобки вида < >. Весьма условно тэги можно разделить на граничные и унарные. Унарные тэги представляют собой очевидные операции, предписывающие браузеру совершить определенное действие по постижению данного тэга при обработке html - документа. Унарные тэги не относятся к определенным участкам текста, а, скорее всего, к всей последующей части документа. С граничными тегами сложнее, но надо учитывать, что их много больше, нежели унарных. Граничные тэги определяют, как будет выглядеть на экране пользователя часть текста, определенная этими элементами, причем в начальном тэге можно указывать различные параметры, определенные данному тэгу, в конечном тэге эти параметры присутствовать не должны (браузером они игнорируются).
Структура гипертекстовых файлов чрезвычайно проста. HTML-документ должен начинаться тэгом <html> и заканчиваться </html>. Информация вне этих тэгов игнорируется, либо выдается в нелицеприятном виде. Помимо этого все, огражденное тегами <html> и </html> делится на две части:
- заголовок (меньшая часть):
ограничивается тэгами <head> и </head>. Содержит, как правило метаинформацию, то есть дополнительные данные о странице, и заголовок страницы, выносимый как правило в заголовок окна браузера(в оконной графической системе).
Рассматривать представление метаинформации в данном тексте не имеет смысла, поскольку она не играет никакой роли при визуализации страницы. Заголовок определяется тэгами <title> и </title>,эго присутствие необязательно, но желательно.
Тэги <head> и <title> параметров не имеют. Эта часть документа может отсутствовать.
- основная часть документа (тело):
ограничивается тэгами <body> и </body>. Определяет то, что выводится в главном окне браузера. Здесь сосредотачивается вся несомая страницей информация. Так же может отсутствовать при использовании фреймов.
Тэг <body> имеет следующие (необязательные) параметры:
background="img.gif" - на задний план документа помещается изображение из файла img.gif;
bgcolor="RED" - цвет заднего плана, если предыдущий параметр не определен;
text="BLACK" - цвет текста документа;
link="RED" - цвет гиперссылок документа;
vlink="WHITE"
- цвет гиперссылок,уже
Простейший html-документ будет иметь следующую структуру:
<html>
<head>
<title>Заголовок</title>
</head>
<body bgcolor="WHITE" text="BLACK" link="BLUE">
.
.
Тело документа
.
.
</body>
</html>
Области <head> и <body> не пересекаются. Любая информация вне них, но внутри <html>-области игнорируется, если не несет с собой управляющий характер (например, является java-скриптом).
Таблицы в HTML - это один из мощных инструментов представления информации. Они описываются набором тегов, почти каждый из которых имеет свои параметры. Рассмотрим основные:
<table bgcolor=.. border=.. width=.. cellpadding=.. cellspacing=..> - объявление таблицы и определение некоторых параметров
bgcolor - цвет фона таблицы;
width - ширина таблицы в абсолютных и относительных единицах;
border - ширина рамки таблицы (в пикселях);
cellpadding - отступ от границ при визуализации табличного контента (в пикселях);
cellspacing - промежуток между ячейками таблицы (в пикселях).
<caption> - заголовок таблицы. Как правило, применяется после объявления таблицы
<th> - заголовок каждого столбца.
<tr> - объявление строковых элементов таблицы.Используется в паре с тэгом <td>, определяющим вертикальныеразделяющие линии при визуализации таблицы.То есть область, ограничиваемая тэгом <tr> включает в себя одну или несколько областей, ограниченых тегом <td>, определяющим, что будет находится в каждой ячейке на данной строке.
Пример:
Нужно построить таблицу:
<tr>
1 1 3 </tr>
2 2 3 <tr>
</tr>
Последние три тэга имеют ряд параметров:
colspan=.. - "растянуть" данную ячейку в ширину на указанное целое число ячеек (неприменимо к tr);
rowspan=.. - аналогично, но действие происходит по вертикали;
bgcolor=.. - задание цвета фона для каждой ячейки.
Задание 2 (макс. 40 баллов)
В итоге последовательность действий по разработке web-сайта сводится к следующему несложному алгоритму:
Постановка целей и определение основных задач.
Создание списка будущих тематических разделов.
Разработка логической и физической структуры ресурса.
Подготовка эскиза дизайна, компоновки сайта, невидимой верстальной таблицы.
Подготовка текстовых материалов.
Подготовка графических материалов в векторной форме.
Экспорт векторных рисунков в растровый формат, оптимизация картинок.
Создание шаблонов web-страниц.
Сборка web-страниц и отладка кода.
Проверка идентичности отображения web-страниц с различным экранным разрешением и цветовой палитрой и в различных браузерах.
Название сайта (организации) |
||
главная виды услуг контакты вопросы (консультационные) сотрудники форум |
Основная информация (об организации, оказывающая услуги) |
Поиск по сайту _____ регистрация |
Данные об организации, авторские права © |
Страницы второго уровня будут содержать более подробную информацию, например: сотрудники – ФИО сотрудников. Далее – страница 3-го уровня, например: сотрудники – ФИО сотрудников – краткая информация о сотруднике (образование, квалификация и т.п.).
Прежде чем получить консультацию, необходимо зарегистрироваться на сайте, где есть определенная форма, которую обязательно необходимо заполнить, например:
Данная информация будет конфиденциальна.
Вопросы и ответы на них будут находится на форуме, где она и будет сохранятся.
Index.html:
<html>
<head>
<title>Название сайта</title>
</head>
<body>
<h1>Заголовок<h1>
абзац (текст)
<br>
абзац 2 (текст)
<img src=”ссылка на картинку”>
<br>
<a href=”1.html”>Гиперссылка на стр.1</a>
<br>
<a href=”2.html”>Гиперссылка на стр.2</a>
</body>
</html>
1.html:
<html><head>
<title>Заголовок</title>
</head>
<body>
<h1>Заголовок страницы</h1>
<a href=”index.html”> Гиперссылка на страницу
</a>
</body></html>
2.html:
<html> <head>
<title>Заголовок страницы</title>
</head>
<body>
<h1>Заголовок страницы</h1>
<a href=”index.html”> Гиперссылка на страницу
</h1>
</body></html>
Информация о работе Контрольная работа по дисциплине "Интернет технологии"