Курсовая с практикой на тему Создание сайта в html

Содержание:

ВВЕДЕНИЕ 4
1 Обзор языков программирования для разработки сайта 6
1.1 Описание возможностей языка разметки HTML 6
1.2 Использование каскадной таблицы стилей CSS 11
2 Этапы создания сайта 16
2.1 Создание шаблона страниц 16
2.2 Создание формы регистрации 19
2.3 Создание главной страницы 21
3 Работа с сайтом ………………….23
3.1 Настройка и установка сайта………………………………………….23
3.2 Обзор сайта……………………………………………………………..23
ЗАКЛЮЧЕНИЕ 27
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ 28

Введение:

В последнее время для предоставления информации о предприятии или его услугах активно используются веб технологии. Это обусловлено следующими факторами:
 возможностью привлечения новых пользователей:
 расширение географии представления товара или услуги;
 возможность начать электронный бизнес в сети Интернет;
 увеличить прибыль.
Актуальным направлением стает использование информационных ресурсов для предоставлении информации о своем предприятии или конкретном подразделении. Это позволяет создать небольшую веб площадку, которая позволит предоставить информацию пользователям сети Интернет.
В рамках данной работы выполняется разработка сайта для кафедры высшего учебного заведения. Основной целью сайта кафедры является предоставление пользователям сети Интернет информации о своей деятельности.
Цель работы разработка веб сайта кафедры высшего учебного заведения для представления информации в сети Интернет большому количеству пользователей.
Для достижения поставленной цели необходимо решить следующие задачи:
 рассмотреть особенности языка разметки HTML;
 возможности языка каскадной таблицы стилей CSS;
 изучить этапы разработки веб сайтов;
 представить создание шаблона сайта;
 создание формы регистрации;
 выполнить разработку веб сайта кафедры;
 представить работу веб-сайта.
При создании сайта будут использованы программный средства: Denwer, NotePad++, язык разметки гипертекста HTML, каскадная таблица стилей, серверный язык программирования PHP и JavaScript.

Заключение:

Построение информационного сайта кафедры позволит предоставить информацию о работе кафедры студентам, которые проходят обучения, даст информацию о преподавателях и дисциплинах кафедры, позволит принимать обсуждения о работе кафедры, выставляя оценки и формируя отзывы.
В рамках данной работы были решены следующие задачи:
 рассмотрены особенности создания сайтов с помощью языка разметки HTML и таблицы стилей CSS;
 определены этапы создания сайта;
 разработаны алгоритм построения регистрационной формы, которая позволяет разграничить права доступа на сайте;
 представлена структура главной страницы сайта;
 выполнена программная реализация сайта;
 представлена работа пользователей с сайтом.
Таким образом, для создания сайта кафедры использовались все языки описанные в первой главе. Описан процесс создания главной страницы сайта, создан основной шаблон и создана страница с регистрацией. Рассмотрена работа с сайтом, все его основные возможности.

Фрагмент текста работы:

1 Обзор языков программирования для разработки сайта

1.1 Описание возможностей языка разметки HTML

Небольшие сайты часто пишутся, используя HTML и CSS. Более крупные веб–сайты – в частности те, которые регулярно обновляются и используют управление контентом системы (CMS), инструментов ведения блога или программное обеспечение для электронной коммерции – часто используют более сложные технологий на веб–сервере, но эти технологии также могут базироваться на HTML и CSS [1].
Каждая веб–страница, в сети Интернет, написана на языке HTML. Как и любой язык, он имеет свой собственный специальный синтаксис (правила написания).
После сохранения файла с html кодом, результат работы будет действовать как интернет–браузер (например, Chrome, Firefox, Internet Explorer). Задача браузера – преобразовать код в html файла в узнаваемую веб–страницу. Браузер имеет инструменты, которые определяют, как выложить страницу, следуя синтаксису HTML [2].
HTML обозначает язык разметки гипертекста. Гипертекст означает «текст со ссылками в нем». Каждый раз, когда происходит нажатие на слово, которое переходит на новую веб–страницу, можно сделать вывод что был использован гипертекст.
Язык разметки – это язык программирования, используемый для того, чтобы сделать больше, чем простое размещение текста на странице: HTML имеет возможность превращать текст в изображения, ссылки, таблицы, списки и многое другое [3].
В файле HTML весь текст программы, должен быть расположен между открывающимися тегами <html> и закрывающим тегом </ html>.
В HTML–файле всегда есть две части: голова и тело.
Голова содержит информацию о файле HTML, и его название. Название – это то, будет отображено в строке заголовка или вкладке страницы браузера.
Первое, что нужно сделать, – создать скелет страницы. Скелет страницы задается следующим образом [6]:
 тег <! DOCTYPE html> должен быть помещен в первую строку. Это сообщит браузеру, какой язык он читает (в данном случае, HTML);
 га следующую строку необходимо поместить тег <html>. Это запустит документ HTML;
 в последнюю строку имеет смысл расположить тег </ html>. Это завершает HTML–документ.
Как было отмечено ранее, файл HTML имеет голову и тело.
Тело – это место, где будет размещен непосредственно контент сайта, например текст, изображения и ссылки. Содержание в теле – это то, что будет видно на фактической странице [4].
Тело находится внутри тегов <html>, сразу после тегов <head> (см. листинг 1).

Листинг 1 – Структура HTML страницы
<HTML>
<Голова>
< HEAD>
<title> Моя веб–страница </ title>
</ HEAD>
< Body>
<Тело>
</ Body>
</ Html>
В разделе тела необходимо создать заголовок. Для этого необходимо создать тег <h1>.
После этого добавляется контент.
Закрывается элемент тегом </ h1>. (Теперь контент находится между <h1> и </ h1>.)
В HTML можно указать более одного размера заголовка. Существует шесть размеров заголовков, где <h1> – самый крупный, а <h6> – это самый мелкий [5].
<h1> – самый крупный
<h2> – средний крупный
<h3> – мелкий крупный
<h4> – средний размер
<h5> – мелкий средний
<h6> – самый мелкий.
Для работы с изображениями (фотографии, картинки) необходимо между тегами <body> добавить само изображение с помощью тега <img>.
Рассмотрев кратко основные конструкции языка html, перйдем к следующему этапу – определим из каких компонент должен состоять современный веб–сайт.
 Заголовки страниц. Заголовки страниц похожи на миниатюрные версии домашней страницы, которые находятся на каждой странице. Заголовки предоставляют идентификацию сайта и глобальную навигацию с помощью поисковых и, возможно, других инструментов. Точное расположение и расположение компонентов варьируется от сайта к сайту, но общая схема проектирования стала довольно последовательной. Заголовки являются наиболее заметным компонентом идентификации сайта. Коллекция страниц, разделяющих заголовки, будет восприниматься как «сайт», даже если страницы происходят из очень разных технических источников (php / Perl, jsp, .net, программного обеспечения для блога, портальных систем, SharePoint, веб–сайтов приложения, системы управления контентом и т. д.).
 Домашняя ссылка. Размещение логотипа организации или логотипа сайта в верхнем левом углу страницы и привязка этого логотипа к домашней странице – это широко используемый прием. Если не использовать логотип или графику в заголовке, то существует необходимость размещения ссылки «домой» в верхнем левом углу страницы, где 99 процентов пользователей ожидают ее найти.
 Глобальная навигация. Заголовки являются наиболее частым местом для глобальных навигационных ссылок, которые охватывают сайт. Идеальная компоновка состоит в том, чтобы использовать html–список ссылок, в стиле css для распространения по горизонтали через часть заголовка.
 Вкладки – это еще одно широко используемое, легко понятное соглашение для глобальной навигации. Лучший способ реализовать вкладки – создать обычный список html с более сложной обработкой css, чтобы сформировать графику «вкладки» вокруг каждой ссылки. Вкладки также могут использоваться для реализации двухуровневой схемы навигации, в которой дополнительный выделенный список ссылок отображается под выбранной вкладкой, снова как простой список html с стилем css, чтобы сохранить видимые вещи в семантическом, доступном и поиске
 Поиск. Все сайты с более чем несколькими десятками страниц должны предлагать локальный поиск по сайту. Верхняя правая область заголовка является популярным местом для поисковых ящиков, но окно поиска заголовка обязательно должно быть простым для размещения.
 Столбцы сканирования. Разделение поля страницы на функциональные области является фундаментальной характеристикой современного графического дизайна. В начале дизайнеры использовали узкие столбцы «сканирования» на краю страницы для организации навигационных ссылок и других элементов периферийных страниц, так как столбцы сканирования были использованы в печатных публикациях в течение столетия или более. В настоящий момент более широко осуществляется поддержка размещения навигационных ссылок, особенно навигацию по разделам, в левом столбце.