МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РЕСПУБЛИКИ КАЗАХСТАН
АЛМАТИНСКИЙ ИНСТИТУТ ЭНЕРГЕТИКИ И СВЯЗИ
Курсовая работа
Дисциплина: WEB-технологии
Тема: Информационно-обучающий сайт по ТОЭ/ТЭЦ
Выполнил:
ст. гр. БИС-07-2
Суворов К.
Приняла:
Ельчибаева Р. Б.
Алматы 2010
Содержание
1 Введение
2 Описание
3 Использованные технологии
4 ER – диаграмма базы данных
5 Список литературы
Введение
Сейчас очень бурно развиваются вебтехнологии в области образования. Эта задача может решаться, например, с помощью создания образовательно – обучающих сайтов. В связи с переходом на кредитную систему обучения, студентам очень мало времени остаётся на самостоятельное освоение сложных дисциплин. Именно поэтому я и решил создать образовательно – обучающий сайт по дисциплинам ТОЭ/ТЭЦ.
Из-за нехватки времени студент просто физически не успевает освоить данную дисциплину, а значит и выполнить все необходимые работы: лабораторные, расчетно-графические и курсовые работы. Это в свою очередь влечет за собой плохую оценку по дисциплине, а значит и дальнейшую неуспеваемость.
Перед созданием проекта были проанализированы схожие по тематике интернет ресурсы.
Использованные технологии
При создании сайта были использованы: PHP5, CSS, HTML, JAVASCRIPT.
HTML (HyperText Markup Language, язык разметки гипертекста):
HTML — это система верстки веб-страниц, которая определяет, какие элементы и как должны располагаться в документе. Чтобы показать, что мы имеем дело не с обычным текстовым документом, используется термин HTML-документ. Подобные документы открываются под управлением браузера.
HTML-документ - обычный текстовый файл, который может содержать в себе текст, теги и стили. Изображения и другие объекты хранятся отдельно. Содержимое такого файла обычно называется HTML-код.
Он достаточно прост для освоения. Нужно усвоить: html не является языком программирования, он предназначен для разметки текстовых документов (т.е. с помощью него мы размечаем текст, таблицы, картинки и т.д. на нашей странице).
Тег — это специальный символ разметки, который применяется для вставки различных элементов на веб-страницу таких как: рисунки, таблицы, ссылки и др. и для изменения их вида. Для обозначения тегов используется символ <тег>. Теги нечувствительны к регистру, поэтому запись <B> и <b> эквивалентна.
Обязательные теги:
<html>
<head>
</head>
<body>
</body>
</html>
<html>
Этот тэг должен открывать документ. Если есть открывающий тэг, то должен быть и закрывающий:
</html>
Например,
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
<title>Главная</title>
<link href="css.css" rel=stylesheet type="text/css">
<body>
…………
</body>
</html>
<head> </head> - головадокумента, всетэги, расположенныемеждуэтимитегамиэточто-товродеслужебнойинформации .Например <title>Главная</title> - заголовококнаброузера, <link href="css.css" rel=stylesheet type="text/css"> - подключениеккаскаднымстилямтаблицы (онихчутьниже).
<meta content="text/html; charset=Windows-1251" http-equiv="content-type"> мета-информацияслужитдляуказания:
а)техническойинформацииодокументе
б)информацииосодержаниидокумента
Тэги тела документа идентифицируют отображаемые в окне компоненты HTML-документа. Тело документа может содержать ссылки на другие документы, текст и другую форматированную информацию.
Тело документа должно находиться между тэгами <BODY> и </BODY>. Это та часть документа, которая отображается как текстовая и графическая (смысловая) информация документа.
Уровни заголовков <Hx>
Когда пишется HTML-документ, текст структурно делится на просто текст, заголовки частей текста, заголовки более высокого уровня и т.д. Первый уровень заголовков (самый большой) обозначается цифрой 1, следующий - 2, и т.д. Большинство броузеров поддерживает интерпретацию шести уровней заголовков, определяя каждому из них собственный стиль. Заголовки выше шестого уровня не являются стандартом и могут не поддерживаться броузером. Заголовок самого верхнего уровня имеет признак "1". Синтакс заголовка уровня 1 следующий:
<H1> Заголовок первого уровня </H1>
Тэг абзаца <P>
В отличии от большинства текстовых процессоров, в HTML-документе обычно игнорируются символы возврата каретки. Физический разрыв абзаца может находиться в любом месте исходного текста документа (для удобства его читаемости). Однако броузер разделяет абзацы только при наличии тэга <P>. Если вы не разделите абзацы тэгом <P>, ваш документ будет выглядеть как один большой абзац.
Дополнительные параметры тэга <P>:
<P ALIGN=left|center|right>
позволяют выравнивать абзац по левому краю, центру и правому краю соответственно.
Например,
<div class="table">
<td><table width="690" border="0" cellspacing="0" cellpadding="0">
<tr>
<?php include "blocks/lefttd.php" ?>
<td width="508" valign="top"><?php echo "$myrow[text]"; ?> </td>
</tr>
</table></td>
</div>
Разрыв строки <BR>
Тэг <BR> извещает броузер о разрыве строки. Наилучший пример использования данного тэга - форматированный адрес или любая другая последовательность строк, где броузер должен отображать их одну под другой. Например:
<br>На нашем сайте вы всегда сможете прочитать самые полезные и действенные уроки по ТОЭ/ТЕЦ.
URL
Обязательный параметр, имеющий такой же синтаксис, как и стандартный URL. Данный URL указывает браузеру где находится рисунок. Рисунок должен храниться в графическом формате, поддерживаемом броузером. На сегодняшний день форматы GIF и JPG поддерживаются большинством броузеров
ALT="text" Данный необязательный элемент задает текст, который будет отображен браузером, не поддерживающим отображение графики или с отключенной подкачкой изображений. Обычно, это короткое описание изображения, которое пользователь мог бы или сможет увидеть на экране. Если данный параметр отсутствует, то на месте рисунка большинство браузеров выводит пиктограмму (иконку), активизировав которую, пользователь может увидеть изображение. Тэг ALT рекомендуется, если ваши пользователи используют браузер, не поддерживающий графический режим, например Lynx.
HEIGTH=n1 Данный необязательный параметр используется для указания высоты рисунка в пикселах. Если данный параметр не указан, то используется оригинальная высота рисунка. Это параметр позволяет сжимать или растягивать изображения по вертикали, что позволяет более четко определять внешний вид документа. Однако, некоторые броузеры не поддерживают данный параметр. С другой стороны, экранное разрешение у вашего клиента может отличаться от вашего, поэтому будьте внимательны при задании абсолютной величины графического объекта.
WIDTH=n2 Параметр также необязателен, как и предыдущий. Позволяет задать абсолютную ширину рисунка в пикселах.
ALIGN Данный параметр используется, чтобы сообщить браузеру, куда поместить следующий блок текста. Это позволяет более строго задать расположение элементов на экране. Если данный параметр не используется, то большинство броузеров располагает изображение в левой части экрана, а текст справа от него.
VSPACE Позволяет установить размер в пикселах пустого пространства над и под рисунком, чтобы текст не наезжал на рисунок. Особенно это важно для динамически формируемых изображений, когда нельзя заранее увидеть документ.
HSPACE То же самое, что и VSPACE, но только по горизантали.
Приведем пример использования данного тэга:
<img src="files/1.jpg" width="200" height="207" title="Курсовая" hspace="5" vspace="5">
Фоновые рисунки
Большинство браузеров позволяет включать в документ фоновый рисунок, который будет матрицироваться и отображаться на фоне всего документа. Некоторые пользователи любят фоновую графику, некоторые нет. Ненавязчивый полупрозрачный рисунок (обои) обычно хорошо выглядит в качестве фона для большинства документов.
Описание фонового рисунка включается в тэг BODY и выглядит следующим образом:
<BODYBACKGROUND="bg.gif">
Горизонтальная линия
Используя тэг <HR> вы можете разделить текст горизонтальной чертой.
Форматтэга:
<HR SIZE=number WIDTH=number|percent ALIGN=left|right|center >:
<hrcolor=#ff5353 size="7">
Все формы начинаются тэгом <FORM> и звершаются тэгом </FORM>.
<FORM METHOD="get|post" ACTION="URL"> Элементы_формы_и_другие_элементы_HTML
</FORM>
METHOD Метод посылки сообщения с данными из формы. В зависимости от используемого метода вы можете посылать результаты ввода данных в форму двумя путями:
GET: Информация из формы добавляется в конец URL, который был указан в описании заголовка формы. Ваша CGI-программа (CGI-скрипт) получает данные из формы в виде параметра переменной среды QUERY_STRING. Использование метода GET не рекомендуется.
POST: Данный метод передает всю информацию о форме немедленно после обращения к указанному URL. Ваша CGI-программа получает данные из формы в стандартный поток ввода. Сервер не будет пересылать вам сообщение об окончании пересылки данных в стандартный поток ввода; вместо этого используется переменная среды
ACTION ACTION описывает URL, который будет вызываться для обработки формы. Данный URL почти всегда указывает на CGI-программу, обрабатывающую данную форм
INPUT
Тэг <INPUT> используется для ввода одной строки текста или одного слова. Атрибуты тэга:
CHECKED - означает, что CHECKBOX или RADIOBUTTON будет выбран.
MAXLENGTH - определяет количество символов, которое пользователи могут ввести в поле ввода. При превышении количества допустимых символов броузер реагирует на попытку ввода нового символа звуковым сигналом и не дает его ввести. Не путать с атрибутом SIZE. Если MAXLENGTH больше чем SIZE, то в поле осуществляется скроллинг. По умолчанию значение MAXLENGTH равно бесконечности.
NAME - имя поля ввода. Данное имя используется как уникальный идентификатор поля, по которому, впоследствии, вы сможете получить данные, помещенные пользователем в это поле.