Создание web-сайта компьютерного магазина

Размещено на http://www.allbest.ru/

ФЕДЕРАЛЬНОЕ Государственное АВТОНОМНОЕ образовательное учреждение высшего профессионального образования

БЕЛГОРОДСКИЙ ГОСУДАРСТВЕННЫЙ НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ УНИВЕРСИТЕТ

ФАКУЛЬТЕТ ИНФОРМАЦИОННЫХ ТЕХНОЛОГИЙ И ПРИКЛАДНОЙ МАТЕМАТИКИ

Кафедра прикладной математики и информатики

Курсовая работа

по дисциплине «Информатика»

СОЗДАНИЕ WEB-САЙТА КОМПЬЮТЕРНОГО МАГАЗИНА

Студента заочного отделения 2 курса

группы 83001253

Льянова Евгения Валерьевича

Белгород 2015

План

Введение

1. Общая характеристика языка HTML

2. Основы работы с CSS

3. Практическая реализация процесса создания web-сайта

Заключение

Список использованной литературы

Введение

Курсовая работа посвящена созданию Web-сайта «Компьютерного магазина». В данной курсовой работе поставлена задача описать главные аспекты языка HTML и технологии CSS, а так же создание web-сайта с использованием указанных выше инструментов.

С помощью этого языка создаются файлы с расширением *.html и *.htm, являющиеся Web-страницами. Из них состоят сайты Интернет.

Вся работа разделена на 3 раздела. Первый раздел посвящён описанию HTML и его основных тэгов.

Во втором разделе имеются сведения о том, как улучшить внешний вид документа и встроить в него дополнительные возможности.

1. Общая характеристика языка HTML

Hyper Text Markup Language (HTML) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WEB. HTML-документы могут просматриваться различными типами WEB-браузеров. Когда документ создан с использованием HTML, WEB-браузер может интерпретировать HTML для выделения различных элементов документа и первичной их обработки. Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей.

Большинство документов имеют стандартные элементы, такие, как заголовок, параграфы или списки. Используя тэги HTML, можно обозначать данные элементы, обеспечивая WEB-браузеры минимальной информацией для отображения данных элементов, сохраняя в целом общую структуру и информационную полноту документов. Все что необходимо, чтобы прочитать HTML-документ - это WEB-браузер, который интерпретирует тэги HTML и воспроизводит на экране документ в виде, который ему придает автор.

HTML-документы могут быть созданы при помощи любого текстового редактора или специализированных HTML-редакторов и конвертеров. Выбор редактора, который будет использоваться для создания HTML-документов, зависит исключительно от понятия удобства и личных пристрастий каждого автора.

Основные положения

Все тэги HTML начинаются с "<" (левой угловой скобки) и заканчиваются символом ">" (правой угловой скобки). Как правило, существует стартовый тэг и завершающий тэг. Для примера приведем тэги заголовка, определяющие текст, находящийся внутри стартового и завершающего тэга и описывающий заголовок документа:

<TITLE> Заголовок документа </TITLE>

Завершающий тэг выглядит также, как стартовый, и отличается от него прямым слешем перед текстом внутри угловых скобок. В данном примере тэг <TITLE> говорит WEB-браузеру об использовании формата заголовка, а тэг </TITLE> - о завершении текста заголовка.

Некоторые тэги, такие, как <P> (тэг, определяющий абзац), не требуют завершающего тэга, но его использование придает исходному тексту документа улучшенную читаемость и структурируемость.

HTML не реагирует на регистр символов, описывающих тэг, и приведенный ранее пример может выглядеть следующим образом:

<title> Заголовок документа </title>

Дополнительные пробелы, символы табуляции и возврата каретки, добавленные в исходный текст HTML-документа для его лучшей читаемости, будут проигнорированы WEB-браузером при интерпретации документа. HTML-документ может включать вышеописанные элементы, только если они помещены внутрь тэгов <PRE> и </PRE>.

Структура документа

Когда WEB-браузер получает документ, он определяет, как документ должен быть интерпретирован. Самый первый тэг, который встречается в документе, должен быть тэгом <HTML>. Данный тэг сообщает WEB-браузеру, что ваш документ написан с использованием HTML.

Заголовочная часть документа <HEAD>. Тэг заголовочной части документа должен быть использован сразу после тэга <HTML> и более нигде в теле документа. Данный тэг представляет собой общее описание документа. Избегайте размещать какой-либо текст внутри тэга <HEAD>. Стартовый тэг <HEAD> помещается непосредственно перед тэгом <TITLE> и другими тэгами, описывающими документ, а завершающий тэг </HEAD> размещается сразу после окончания описания документа.

Технически, стартовые и завершающие тэги типа <HTML>, <HEAD> и <BODY> необязательны. Но настоятельно рекомендуется их использовать, поскольку использование данных тэгов позволяет WEB-браузеру уверенно разделить заголовочную часть документа и непосредственно смысловую часть.

Заголовок документа <TITLE>. Большинство WEB-браузеров отображают содержимое тэга <TITLE> в заголовке окна, содержащего документ и в файле закладок, если он поддерживается WEB-браузером. Заголовок, ограниченный тэгами <TITLE> и </TITLE>, размещается внутри <HEAD>-тэгов, как показано выше на примере. Заголовок документа не появляется при отображении самого документа в окне.

Комментарии. Как любой язык, HTML позволяет вставлять в тело документа комментарии, которые сохраняются при передаче документа по сети, но не отображаются браузером. Синтаксис комментария: <!--Это комментарий-->

Комментарии могут встречаться в документе где угодно и в любом количестве.

Тэги тела документа

Тэги тела документа идентифицируют отображаемые в окне компоненты HTML-документа. Тело документа может содержать ссылки на другие документы, текст и другую форматированную информацию.

Тело документа <BODY>. Тело документа должно находиться между тэгами <BODY> и </BODY>. Это та часть документа, которая отображается как текстовая и графическая (смысловая) информация вашего документа.

Уровни заголовков <Hx>. Когда пишется HTML-документ, текст структурно делится на просто текст, заголовки частей текста, заголовки более высокого уровня и т.д. Первый уровень заголовков (самый большой) обозначается цифрой 1, следующий - 2, и т.д. Большинство браузеров поддерживает интерпретацию шести уровней заголовков, определяя каждому из них собственный стиль. Заголовки выше шестого уровня не являются стандартом и могут не поддерживаться браузером. Заголовок самого верхнего уровня имеет признак "1".

В отличие от большинства текстовых процессоров, в HTML-документе обычно игнорируются символы возврата каретки. Физический разрыв абзаца может находиться в любом месте исходного текста документа (для удобства его читаемости). Однако браузер разделяет абзацы только при наличии тэга <P>. Если вы не разделите абзацы тэгом <P>, ваш документ будет выглядеть как один большой абзац.

Дополнительные параметры тэга <P>:

<P ALIGN=left|center|right>, позволяют выравнивать абзац по левому краю, центру и правому краю соответственно.

Все элементы документа можно централизовать в окне браузера. Для этого можно использовать тэг <CENTER>.

Все элементы между тэгами <CENTER> и </CENTER> будут находиться в центре окна.

Тэг преформатирования, <PRE>, позволяет представлять текст со специфическим форматированием на экране. Предварительно сформатированный текст заканчивается завершающим тэгом </PRE>. Внутри предварительно сформатированного текста разрешается использовать:

а) перевод строки

б) символы табуляции (сдвиг на 8 символов вправо)

в) непропорциональный шрифт, устанавливаемый браузером.

Использование тэгов, определяющих формат абзаца, таких как <Hx> или <ADDRESS>, будет игнорироваться браузером при помещении их между тэгами <PRE> и </PRE>.

Данный список содержит фамилии, имена и отчества всех сотрудников нашей компании. <P>

Список может быть использован только в служебных целях. <P>

На экране браузера отобразится:

Данный список содержит фамилии, имена и отчества всех сотрудников нашей компании.

Таблица 1 - Основные тэги

Описанные ранее тэги - это все, что необходимо для того, чтобы начать работать с HTML.

С использованием описанных тэгов можно создать простой HTML-документ.

2. Основы работы с CSS

Основным понятием CSS является стиль - т. е. набор правил оформления и форматирования, который может быть применен к различным элементам страницы. В стандартном HTML для присвоения какому-либо элементу определенных свойств (таких, как цвет, размер, положение на странице и т. п.) приходилось каждый раз описывать эти свойства, даже если на одной страничке должны располагаться 10 или 110 таких элементов, ничуть не отличающихся один от другого. Нужно было десять или сто десять раз вставить один и тот же кусок HTML- кода в страничку, увеличивая размер файла и время загрузки на компьютер просматривающего ее пользователя.

CSS действует другим, более удобным и экономичным способом. Для присвоения какому-либо элементу определенных характеристик желательно один раз описать этот элемент и определить это описание как стиль, а в дальнейшем просто указывать, что элемент, который нужно оформить соответствующим образом, должен принять свойства стиля.

Сохранение описания стиля не в тексте странички, а в отдельном файле, позволит использовать описание стиля на любом количестве Web-страниц. Преимущество этого, - возможность изменить оформление любого количества страниц, исправив лишь описание стиля в одном (отдельном) файле.

Кроме того, CSS позволяет работать со шрифтовым оформлением страниц на гораздо более высоком уровне, чем стандартный HTML, избегая излишнего утяжеления страниц графикой.

Давайте рассмотрим, как мы можем воплотить столь замечательные возможности в жизнь.

Практическое освоение CSS

Как известно, информация о стилях может располагаться либо в отдельном файле, либо непосредственно в коде Web-странички. Расположение описания стилей в отдельном файле имеет смысл, если планируется применять эти стили к большему, чем одна, количеству страниц. Для этого нужно создать обычный текстовый файл, описать с помощью языка CSS необходимые стили, поместить этот файл на Web-сервере, а в коде Web-страниц, которые будут использовать стили из этого файла, нужно будет сделать ссылку на него. Делается это с помощью тега <LINK>, располагающегося внутри тега <BODY> ваших страниц: <LINK REL=STYLESHEET TYPE="text/css" HREF="URL">

Первые два параметра этого тега являются зарезервированными именами, требующимися для того, чтобы сообщить браузеру, что на этой страничке будет использоваться CSS. Третий параметр - HREF= «URL» - указывает на файл, который содержит описания стилей. Этот параметр должен содержать либо относительный путь к файлу - в случае, если он находится на том же сервере, что и документ, из которого к нему обращаются - или полный URL («http://...») в случае, если файл стилей находится на другом сервере.

Второй вариант, при котором описание стилей располагается в коде Web- странички, внутри тега <BODY>, в теге <STYLE type="text/css">... </STYLE>. В этом случае можно использовать эти стили для элементов, располагающихся в пределах странички. Параметр type="text/css" является обязательным и служит для указания браузеру использовать CSS.

И третий вариант, когда описание стиля располагается непосредственно внутри тега элемента, который описывается. Это делается с помощью параметра STYLE, используемого при применении CSS с большинством стандартных тегов HTML. Этот метод нежелателен, и понятно почему: он приводит к потере одного из основных преимуществ CSS - возможности отделения информации от описания оформления информации. Впрочем, если необходимо описать лишь один элемент, этот вариант расположения описания стилей также вполне применим.

Рассмотрим механизм, с помощью которого стили присваиваются элементам Web -страниц. Самый простой случай присвоения какому-либо элементу определенного стиля выглядит так: НАЗВАНИЕ_ЭЛЕМЕНТА {свойство: значение;}, Где НАЗВАНИЕ_ЭЛЕМЕНТА - имя HTML -тега (H1, P, TD, A и т. д.), а параметры в фигурных скобках - список свойств элемента и присвоенных им значений. Более подробно команды языка CSS мы рассмотрим чуть позже. В этом примере всем заголовкам на странице, оформленным тегом Н1, присваивается размер шрифта 30 пунктов и синий цвет.

Также элементы страниц, созданные с использованием CSS, используют механизм наследования: т. е. если расположить изображение внутри тега <P>...</P>, оформленного с помощью CSS, с отступами, так, чтобы параграф занимал только определенную часть ширины страницы, изображение также унаследует значения отступов, указанные для этого параграфа.

CSS реализует возможность присваивать стили не всем одинаковым элементам страницы, а избирательно - для этого используется параметр CLASS = "имя класса" или идентификатор ID=«имя элемента», присваивающиеся любому элементу страницы. Рассмотрим эти возможности подробнее. Параметр CLASS применяется в случае, если необходимо создать одинаковый стиль для нескольких, но не всех элементов страницы (одинаковых или разных).

Содержащийся в ячейке текст будет отображаться согласно описанию класса. Присвоение стилей с помощью идентификаторов применяется в случае, если данному идентификатору соответствует только один элемент на странице. Если элементов, которым необходимо присвоить такой стиль, несколько - это уже класс. Свойства элементов, управляемых с помощью CSS. В настоящее время язык CSS насчитывает довольно большое количество свойств элементов HTML, которыми он может управлять. Но из-за того, что этот стандарт еще очень молод, в полном объеме его пока не поддерживают наиболее популярные браузеры (Netscape Navigator и Microsoft Internet Explorer). Последние версии этих браузеров могут работать с довольно большим количеством команд CSS, а вот 3-и версии или совсем не поддерживают его (Netscape Navigator 3), или поддерживают, но лишь частично (Microsoft IE 3). Более того, поскольку разработчики из этих компаний никак не могут договориться между собой, последние версии браузеров поддерживают неодинаковый набор свойств CSS.

Все это делает малоприемлемым использование CSS в полном объеме, так как, при использовании CSS для форматирования элементов страницы и просмотре ее с помощью браузера версии ниже 4 й, есть большая вероятность увидеть непонятное оформление. Поэтому будет разумнее воздержаться от использования CSS для форматирования основной структуры страниц до всеобщего перехода на последние версии браузеров. В то же время, применяя «безопасные», т. е. совместимые с максимальным количеством браузеров элементы CSS, можно сильно облегчить задачу и сделать Web-странички более привлекательными в плане шрифтового оформления, а пользователи, путешествующие по Internet с помощью устаревших браузеров, просто этого не увидят и также не увидят и тех кошмаров, которые появляются при использовании CSS для верстки страниц.

3. Практическая реализация процесса создания Web-сайта

В данной курсовой работе был написан web-сайт «Компьютерного магазина» для этого использовался html код и css стили. Для написания кода потребовалась программа Notepad++, где были вписаны все теги.

Для навигации по сайту тег <nav>..</nav> позволяет переходить по ссылкам. Пример этого тега описывается ниже.

Рисунок 1 - Навигация по сайту

Для перехода между информациями авто еще были созданы стрелки. Ниже описан код тега <nav> с добавлением стрелок (следующая и предыдущая).

Рисунок 2 - Стрелки перехода между авто

Рисунок 3 - Компьютер Extreme

Рисунок 4 - Моноблок Acer Aspire Z3-615

Рисунок 5 - Ноутбук Asus X550JK

Рисунок 6 - Планшет Samsung GALAXY Tab 4 3G

Заключение

В данной курсовой работе была выполнена работа по созданию сайта «Компьютерный магазин». Были применены html теги и css стили.

На представленном сайте можно увидеть все новинки компьютерной периферии. Дизайн сайта будет удобен для просмотра страницы и прост при переходе между товарами.

На сегодняшний день HTML - это язык разметки, с помощью которого создается большинство веб-страниц в Интернете. Язык HTML обрабатывается браузером и отображается в виде web-страницы, в удобном для восприятия формате.

программный web сайт браузер

Список использованной литературы

1.Чак Муссиано и Билл Кеннеди «HTML и XHTML.Подробное руководство» 6-е издание.

2.Н. Комолова, Е.Яковлева «HTML. Самоучитель» 2-е издание. Издательство: Питер, 2011 г.

3. Петюшкин «HTML экспресс-курс» Издательство: СПб: БХВ-Петербург 2004 г.

4. Э. Кастро «HTML и CSS для создания Web-страниц» Издательство: НТ Пресс, 2006 г.

5. С. Айзекс «Dynamic HTML. Секреты создания интерактивных Web- страниц» Издательство: BHV, 2001 г.

Размещено на Allbest.ru