Контрольная работа по дисциплине "Информатика и программирование"

 

СОДЕРЖАНИЕ

 

 

 

ВВЕДЕНИЕ

 

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

Однако для работы в интернете нужны как минимум три вещи: браузер, доступ в интернет и начальные навыки построения и структуры Web-сайтов.

Целью контрольной работы является разработка WEB-сайта таксопарка средствами HTML (DHTML).

Задачи контрольной работы:

• изучить методы сайтостроения;
• изучить соответствующие WEB-технологии;
• разработать сайт таксопарка.

 

 

1. ТЕОРЕТИЧЕСКИЕ АСПЕКТЫ

 

 

1.1. Общие  сведения о сайтах

 

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

Для поиска информации в сети Интернет используется информационно-поисковые системы.

Поиск информации в сети Интернет этими системами производится по запросам. Простейшие запросы состоят из одного или нескольких слов на русском или английском языках, либо на другом языке, на котором записаны искомые документы.

Результатом поиска в сети Интернет являются перечни названий и адресов гипертекстов, отвечающих заданным запросам. Указанные поисковые системы еженедельно просматривают все серверы в сети Интернет и индексируют все найденные гипертексты, запоминая их адреса и встречающиеся в них ключевые слова и словосочетания. По этой причине любая информация, выставленная в сети Интернет, может быть найдена по интересующим нас запросам.

Сайт — совокупность электронных документов (файлов) частного лица или организации в компьютерной сети, объединённых под одним.

Каталог сайтов Интернета – структурированный набор ссылок на сайты с кратким их описанием. Сайты внутри каталога разбиваются по темам, а внутри тем могут быть ранжированы или по индексу цитирования, или по дате добавления, или по алфавиту, или по другому параметру. Это один из старейших сервисов Интернета. Подавляющее большинство рейтингов посещаемости ресурсов имеют классификатор сайтов, но ранжирование всегда основано на посещаемости сайтов.

Основой современной информационной компьютерной индустрии и сети Интернет является всемирная распределенная сеть электронных библиотек WWW - World Wide Web. Для навигации в WWW используются специальные программы – Web-браузеры. Вся информация в Web-браузере отображается в виде Web-страниц.

 

 

1.2. Создание Web-страниц с использованием языка HTML

 

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

Язык HTML существует в нескольких вариантах и продолжает развиваться, но конструкции HTML скорее всего будут использоваться и в дальнейшем. Изучая HTML и познавая его глубже, создавая документ в начале изучения HTML и расширяя его насколько это возможно, мы имеем возможность создавать Web-страницы, которые могут быть просмотрены многими браузерами Web, как сейчас, так и в будущем. Это не исключает возможности использования других методов, например, метод расширенных возможностей, который предоставляется Netscape Navigator, Internet Explorer или некоторыми другими программами.

Работа по HTML - это способ усвоить особенности создания документов в стандартизированном языке, используя расширения, только если это действительно необходимо.HTML был ратифицирован World Wide Web Consortium. Он поддерживается несколькими широко распространенными броузерами, и, возможно, станет основанием почти всего программного обеспечения, которое имеет отношение к Web.

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

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

 

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

Поскольку HTML-документы записываются в ASCII-формате, то для ее создания может использован любой текстовый редактор. Обычно HTML-документ - это файл с расширением .html или .htm, в котором текст размечен HTML-тегами (англ. tag - специальные встроенные указания). Средствами HTML задаются синтаксис и размещение тегов, в соответствии с которыми браузер отображает содержимое Веб- документа. Текст самих тегов Веб- браузером не отображается.

Все теги начинаются символом <. Обычно имеется пара тегов – стартовый (открывающий) и завершающий (закрывающий) тег (похоже на открывающиеся и закрывающиеся скобки в математике), между которыми помещается размечаемая информация.

Завершающий тег отличатся от стартового лишь тем, что у него перед текстом в скобках стоит символ '/' (слэш).Браузер, читающий HTML-документ, отображает его в окне, используя структуру HTML- тегов. В каждом HTML-документе должны присутствовать три главных части:

1. Объявление HTML;
2. Заголовочная часть;
3. Тело документа.

1) Объявление HTML

<HTML> и </HTML> Пара этих тегов сообщает программе просмотра (браузеру) что между ними заключен документ в формате HTML, причем первым тегом в документе должен быть тег (в самом начале документа), а последним - (в самом конце документа)

2) Заголовочная часть.

<HEAD> и </HEAD> Между этими тегами располагается информация о документе (название, ключевые слова для поиска, описание и т.д.). Однако наиболее важным является название документа, которое мы видим в верхней строке окна браузера ив списках "Избранное (BookMark)". Специальные программы- спайдеры поисковых систем используют название документа для построения своих баз данных. Для того чтобы дать название своему HTML-документу текст помещается между тегами.

 

 

3) Тело документа.

Третьей главной частью документа является его тело. Оно следует сразу за заголовком и находится между тегами <BODY> и </BODY>. Первый из них должен стоять сразу после тега, а второй - перед тегом. Тело HTML-документа - это место, куда автор помещает информацию, отформатированную средствами HTML.

 

 

 

ЗАКЛЮЧЕНИЕ

 

В этом проекте был рассмотрен язык разметки гипертекстовых  документов HTML, его основные функции свойства и параметры. Сегодня применение HTML практикуется во всех направлениях бизнеса, промышленности и образования.

HTML является самым простым, эффективным, доступным языком разметки текста для начинающих веб-мастеров.

 

 

 

ПРИЛОЖЕНИЕ 1. ПРОГРАММНЫЙ КОД СТРАНИЦ САЙТА

 

Index.html

<html> - содержимое веб-страницы

<head> - голова сайта

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> - Кодировка сайта

<title>Магазин автозапчастей «Форсаж»</title> - Название сайта в браузере

<link href="tabl.css" rel="stylesheet" type="text/css" /> - Подключение файла стилей

</head>

<body> - Тело сайта хранит в себе текст, изображения, теги, скрипты JavaScript и т.д.

<center><img src="img/flatch.png"   class="pic" /></center> - Верхушка сайта представлена в виде картинки.

<div class="bloc2">г.Тамбов ул.Чичерина д.***</div>

<div class="nav"> - Div предназначен для выделения фрагмента документа с целью изменения вида содержимого.

<table border="0" cellspacing="0" cellpadding="0" width="160" id="navigation">

        <tr> - Контейнер для создания строки таблицы.

          <td width="160"><a href="index.html" class="navText">Главная</a></td> - Переход на главную страницу сайта

        </tr>

        <tr>

          <td width="160"><a href="compani.html" class="navText">О Нас</a></td> - Переход на страницу «О компании»

        </tr>

        <tr>

          td width="160"><a href="zapch.html" class="navText">Автозапчасти</a></td> - Переход на страницу «Автозапчасти»

        </tr>

        <tr>

          <td width="160"><a href="autoserv.html" class="navText">Автосервис</a></td> - Переход на страницу «Автосервис»

        </tr>

        <tr>

          <td width="160"><a href="lic.html" class="navText">Гостевая книга</a></td> - Переход на страницу  «Гостевая книга »

      </tr>

    </table>

</div> 

<div class="cont">

<h1 align="center">Ваш заголовок</h1>

Здесь должен находится текст .</div>

</body>

</html>

 

 

 

 

Compani.html

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Магазин автозапчастей «Форсаж»</title>

 

<link href="tabl.css" rel="stylesheet" type="text/css" />

</head>

 

<body>

<center><img src="img/flatch.png"   class="pic" /></center>

<div class="bloc1"></div>

 

<div class="nav">

<table border="0" cellspacing="0" cellpadding="0" width="160" id="navigation">

        <tr>

          <td width="160"><a href="index.html" class="navText">Главная</a></td>

        </tr>

        <tr>

          <td width="160"><a href="compani.html" class="navText">О компании</a></td>

        </tr>

<tr>

          <td width="160"><a href="zapch.html" class="navText">Автозапчасти</a></td>

        </tr>

        <tr>

          <td width="160"><a href="autoserv.html" class="navText">Автосервис</a></td>

        </tr>

        <tr>

          <td width="160"><a href="lic.html" class="navText">Гостевая  книга</a></td>

        </tr>

</table>

</div> 

<div class="cont">

<h1 align="center">О компании</h1>

<h1 align="center">Добро пожаловать на сайт компании Форсаж!</h1>

<p>Здесь должен находится ваш текст.</p>

</div>

</body>

</html>

 

Zapch.html

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Магазин автозапчастей «Форсаж»</title>

 

<link href="tabl.css" rel="stylesheet" type="text/css" />

</head>

 

<body>

<center><img src="img/flatch.png"   class="pic" /></center>

<div class="bloc1"></div>

 

<div class="nav">

<table border="0" cellspacing="0" cellpadding="0" width="160" id="navigation">

        <tr>

          <td width="160"><a href="index.html" class="navText">Главная</a></td>

        </tr>

        <tr>

          <td width="160"><a href="compani.html" class="navText">О компании</a></td>

        </tr>

<tr>

          <td width="160"><a href="zapch.html" class="navText">Автозапчасти</a></td>

        </tr>

        <tr>

          <td width="160"><a href="autoserv.html" class="navText">Автосервис</a></td>

        </tr>

        <tr>

          <td width="160"><a href="lic.html" class="navText">Гостевая  книга</a></td>

        </tr>

</table>

</div> 

<div class="foto">

<P>

<center><p>Широкий выбор марок автомобилей</p></center>

<center><img src="img/zapch/1.gif" width="307" height="232" /></p><p></center>

<center><p>Автозапчасти от А до Я</p></center>

<center><img src="img/zapch/2.jpg" width="307" height="232" /></p><p></center>

<div class="cont">

<h1 align="center">Ваш заголовок</h1>

<center><p>Здесь должен находится ваш текст.</p></center>

</div>

</body>

</html>

 

Autoserv.html

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Магазин автозапчастей «Форсаж»</title>

 

<link href="tabl.css" rel="stylesheet" type="text/css" />

</head>

 

<body>

<center><img src="img/flatch.png"   class="pic" /></center>

<div class="bloc1"></div>

 

<div class="nav">

<table border="0" cellspacing="0" cellpadding="0" width="160" id="navigation">

        <tr>

          <td width="160"><a href="index.html" class="navText">Главная</a></td>

        </tr>

        <tr>

          <td width="160"><a href="compani.html" class="navText">О компании</a></td>

        </tr>

<tr>

          <td width="160"><a href="zapch.html" class="navText">Автозапчасти</a></td>