Проект по информатике на тему "Создание web-сайта по дисциплине математика на тему «Площади и объемы геометрических фигу

В данном проекте представлено полное описание, по созданию сайта. В данном проекте мы изучали язык программирования html, научились добавлять изображение, сделали гипер-ссылки, поработали над оформлением. Но перед началом создания сайта, мы создали макет. Далее начали создавать веб-сайт, дали ему описание.

Бюджетное профессиональное образовательное учреждение Вологодской области «Череповецкий химикотехнологический колледж» ИНДИВИДУАЛЬНЫЙ ПРОЕКТ СОЗДАНИЕ WEBСАЙТА ПО ДИСЦИПЛИНЕ МАТЕМАТИКА НА ТЕМУ «ПЛОЩАДИ И ОБЪЕМЫ ГЕОМЕТРИЧЕСКИХ ФИГУР» Автор работы: Специальность: Группа: Курс: Дисциплина: Давыдов Алексей Михайлович 13.02.11 Техническая эксплуатация электрического и электромеханического оборудования 41/2017 Первый Информатика, математика Руководитель проекта: Оценка за защиту проекта: (подпись) /Каштанова О.Г. / (Фамилия И.О.) /Дедюкова М.Н. / (дата) (подпись) (Фамилия И.О.) Череповец, 2018 2 СОДЕРЖАНИЕ Введение...............................................................................................................3 1. Основная часть ................................................................................................5 1.1 WEBсайт. Основные сведения................................................................4 1.2 Классификация сайтов.............................................................................6 1.3 Структура webсайта.................................................................................7 1.4 Язык гипертекстовой разметки HTML....................................................8 1.5 Основные команды HTML......................................................................9 1.6. Вставка графического изображения.....................................................10 1.7 Вставка гиперссылок...............................................................................11 2. Практическая часть.......................................................................................14 2.1 Создание webсайта «Площади и объемы геометрических фигур»....14 2.2 Описание webсайта................................................................................15 Заключение.........................................................................................................17 Список литературы............................................................................................18 3 ВВЕДЕНИЕ Сегодня во все области человеческой деятельности вошла компьютерная сеть Internet. На данный момент наиболее распространенной службой Internet является WWW (от англ. World Wide Web – Всемирная Паутина). Для навигации в WWW используются специальные программы – Webбраузеры, а вся информация в Webбраузере отображается в виде Webстраниц, которые являются элементами более крупной единицы сайта. Стандартным языком разметки Webстраниц является HTML (HyperText Markup Language). Есть и другие языки разметки гипертекста, но большая часть страниц сайтов Интернета размечена именно на языке HTML. Такие страницы успешно интерпретируются браузерами, которые отображают их на экранах различных электронных устройств в удобном для человека виде. Поэтому освоение языка HTML будет огромным плюсом для начинающего разработчика сайтов. Средства, предназначенные для работы с сетью, используются в различных целях. Для одних Internet – развлечение (многие подростки проводят огромное количество времени в различных чатах, форумах, участвуют в online играх). А для других Internet источник знаний, помощник в учёбе. Именно таким помощником станет сайт на тему «Площади и объемы геометрических фигур». Цель: разработка webсайта по дисциплине математика на тему «Площади и объемы геометрических фигур». Задачи: изучить литературу по основам Webконструирования и дизайна; освоить навыки гипертекстовой разметки HTML; создать webсайт по дисциплине математика на тему «Площади и объемы геометрических фигур». Объект: webсайт. 4 Предмет: создание webсайта по дисциплине математика на тему площадь и объем геометрических фигур. Метод работы: сбор, обобщение и анализ литературы, элементы метода моделирования. Практическая значимость работы определяется возможностью использовать исходные htmlкоды программного продукта на занятиях по дисциплине «Информатика», а так же самого сайта для самостоятельного изучения темы «Площади и объемы геометрических фигур». 5 1. ОСНОВНАЯ ЧАСТЬ 1.1 WEBСАЙТ. ОСНОВНЫЕ СВЕДЕНИЯ Вебсайты — это сборники документов, известных как вебстраницы. Они содержат некоторую информацию: изображения, текст, видео, аудиоматериалы и другое [1]. Главная страница вебсайта, называется домашней, с нее можно перейти на все остальные страницы. Они связаны гиперссылками, которые выделены особым видом шрифта или представлены при помощи изображений. При перемещении курсора на них, он приобретает вид руки с вытянутым указательным пальцем. После клика на такие элементы пользователь перемещается на новое место. Это может быть другая страница, другое место на той же странице или иной вебсайт. Сайт представляется пользователю как единое целое. Интернетстраницы обслуживаются вебсервером, представляющим собой специальное программное обеспечение, которое доставляет контент клиентам по вебпротоколам. Существуют следующие виды вебпротоколов:   http, наиболее известный протокол; https, использующийся для обеспечения безопасности передачи данных;   spdy, новый протокол, разработанный компанией Google; websocket, еще один более современный протокол, который на сегодняшний день поддерживается только несколькими браузерами. Создателем первого в мире электронного ресурса является ученый Европейской лаборатории элементарных частиц Тим БернерсЛи. Именно им в декабре 1990 был разработан первый веббраузер, который носил название World Wide Web. Сервер был основан на базе NeXTcube. Правда, еще в сороковые годы ученый Ваннервар (Вэнивар) Буш развивал теорию о том, что с помощью специальных технических устройств можно расширить память человека, проиндексировав информацию, накопленную 6 годами. По мнению ученого, путем проведения такой индексации можно было бы быстро найти необходимую информацию. 9 августа 1991 года появился первый онлайнресурс. При создании сайта была использована технология World Wide Web (WWW) и протокол передачи данных Hyper Text Transfer Protocol (HTTP), разработанный с помощью системы адресации Uniform Resource Identifier на языке программировании Hyper Text Markup Language (HTML). На страницах первого интернетресурса были размещены настройки установки и работы браузеров и серверов. Ученый Тим БернерсЛи был уверен в том, что гипертекст может быть базой для сетей обмена данных. Свой первый проект Enquire (– гипертекстовое программное обеспечение) Тим БернерсЛи разработал в 1980 году. 1.2 КЛАССИФИКАЦИЯ САЙТОВ В зависимости от выполняемых функций, есть такие виды вебресурсов: Информационный сайт используется для размещения статей и материалов определенного направления или на общую тематику. Это новостные порталы, блоги, энциклопедии, обучающие сайты и т. д. Корпоративный вебсайт — это сайт предприятия или организации. Он может иметь два функции: обеспечение связи между сотрудниками отделений и филиалов для координации их деятельности; предоставление информации о компании потенциальным клиентам. Для существующих покупателей может быть предусмотрен личный кабинет, в котором можно отслеживать статус покупок, уровень скидки и т.д. Разработка такого ресурса – это долгая и трудоемкая задача, поэтому их могут позволить себе только крупные компании[2]. Небольшие предприятия используют в своей деятельности сайты визитки и портфолио. Они делаются довольно просто, но предоставляют всю необходимую информацию о фирме. 7 Коммерческие вебсайты — это интернетмагазины разных видов: от многостраничных гипермаркетов до одностраничных сайтов, предоставляющих всего один или несколько товаров для заказа. Основная их цель – продажа или получение заявки на выполнение услуг. Сайты для общения – это форумы, социальные сети. Как правило, совершать действия на них могут только зарегистрированные пользователи. Сервисные вебсайты – это поисковые системы, почты, хостинги. Сюда же можно отнести интернетдоски объявлений. 1.3 СТРУКТУРА WEBСАЙТА Структура сайта — основа для выстраивания последовательности и формы отображения имеющихся данных на сайте. При правильной структуре сайта пользователям максимально удобно переходить от одной странички к другой и изучать необходимые для них сведения. Самым простым видом структуры сайта является линейный. Он называется так потому, что в нем вся информация представлена в линейном виде. Это как будто цепочка, где все элементы послушно следуют друг за другом. Здесь не может быть разделов, и пользователь не может перескакивать с одной страницы на другую в любой последовательности, он получает возможность лишь плавно переходить по заданной траектории, так, как будто он читает книгу. Для навигации обычно используют три основные ссылки: на главную страницу, на предшествующую и последующую. Расширенная форма данной структуры линейная с ответвлениями, содержащая несколько веток. На главной странице посетитель может выбрать, по какой из них идти дальше, и в зависимости от выбора ему будет представлена та или иная цепочка сведений. Самым многофункциональным и развитым можно назвать древовидный вид структуры сайта. Это форма представления данных, выраженная в форме многоуровневой иерархии. То есть, вся структура может содержать большое 8 количество разделов и подразделов, внутренних страниц любой вложенности и в произвольной последовательности. В таком формате можно выполнить совершенно любой вебресурс, причем вне зависимости от того, посвящен он одной тематике или сразу нескольким различным областям. Однако здесь следует быть осторожным, ведь вы можете запутать своих посетителей в лабиринте составных частей проекта. Чтобы этого не случилось, при выборе подобного вида структуры сайта следует хорошо позаботиться о подробной и удобной навигации, понятном интерфейсе. Существует еще один вид структуры сайта – решетчатый. Он выполняется практически по тем же стандартам, что и древовидный, но в его составе есть особая функция, которая помогает в один клик переместиться с одной части вебпроекта в совершенно противоположную. В большинстве случаев такой ход лишь усложняет разработку сайта, так что данный вид структуры сайта применяется лишь в среде разработчиков каталогов [6]. 1.4 ЯЗЫК ГИПЕРТЕКСТОВОЙ РАЗМЕТКИ HTML Аббревиатура HTML расшифровывается как HyperText Markup Language. HTML это не язык программирования, это язык разметки сайта. Все браузеры умеют преобразовывать эту разметку в удобный вид для пользователя. В этом языке используются специальные команды, называемые тегами. У каждого тега своя функция. Существует огромное количество тегов. HTML – стандартизированный язык разметки документов во Всемирной паутине. Большинство вебстраниц содержат описание разметки на языке HTML. Язык HTML интерпретируется браузерами; полученный, в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства. 9 Язык XHTML является более строгим вариантом HTML, он следует синтаксису XML и является приложением языка XML в области разметки гипертекста. HTML – страницы, как правило, передаются браузерам от сервера по протоколам HTTP или HTTPS, в виде простого текста или с использованием шифрования. Главное отличие XHTML от HTML заключается в обработке документа. Документы XHTML обрабатываются своим модулем (парсером) аналогично документам XML. В процессе этой обработки ошибки, допущенные разработчиками, не исправляются. XHTML соответствует спецификации SGML, поскольку XML является её подмножеством. HTML обладает множеством особенностей в процессе обработки и фактически перестал относиться к семейству SGML, что и закреплено в черновике спецификации HTML 5. Браузер выбирает парсер для обработки документа на основании заголовка contenttype, полученного от сервера: HTML — text/html XHTML — application/xhtml+xml Для локального просмотра на клиенте выбор основывается на расширении файла. 1.5 ОСНОВНЫЕ КОМАНДЫ HTML Список HTMLкоманд очень большой. Но основных не так много. Преимущество в том, что в специальных редакторах теги подсвечиваются определенным цветом, в зависимости от категории. Команды для создания сайта HTML в блокноте или любой другой программе одни и те же. Язык используется везде одинаковый. Среда разработки это лишь инструмент. В языке HTML есть закрывающиеся и незакрывающиеся теги. Также в этом языке 10 существует понятие вложенности. Каждый объект в коде это элемент. У элемента есть открывающий тег, закрывающий и содержимое. Более того, у тега есть свои дополнительные атрибуты со своими значениями. Рассмотрим два тега и [4]. Открывающий и закрывающий теги пишутся одинаково, но отличаются только "/". Если тег не закрыть, то обработчик будет всё остальное считать продолжением именно этого элемента. Это очень важно. Особенно в ссылках. Их мы рассмотрим немного позже. Тег обязательный. Его всегда нужно писать. А вот закрывать не обязательно. По стандартам надо, но если не закрыть, работать всё равно будет. Есть и другие основные теги: и . Эти HTMLкоманды являются каркасом для страницы. Они обязательны. Они также закрываются. Название тегов соответствует смыслу. Head голова. В этом разделе указывается служебная и важная информация, которую не видно. Раздел body тело документа. Здесь содержимое, которое отображается пользователю. Файл стилей подключается вот так: Файл скриптов следующим образом: У текста обязательно должен быть заголовок. Его указываем вот так: Заголовок страницы </little> Этот текст будет отображаться в названии вкладки браузера. Также этот заголовок выводится в результате выдачи поисковой системы. Текст нужно размещать в теге абзаца. Он обозначается как: <p>Текст</p>. Для текста также можно использовать <span> Строка </span>. 1.6 ВСТАВКА ГРАФИЧЕСКОГО ИЗОБРАЖЕНИЯ 11 Графические изображения, находящиеся на Webстраницах, улучшают восприятие информации, делают страницы более яркими и запоминающимися. Графические изображения вы можете подготовить сами. При создании Webузлов чаще всего применяют графические форматы JPEG (Joint Photographic Experts Group) и GIF (Graphics Interchange Format), являющиеся форматами со сжатием. Выбор формата определяется стоящими при разработке задачами. Так, например, GIF формат применяется для изображений, содержащих меньше 256 цветов, и используется, как правило, для создания анимационных эффектов. Если изображение содержит более 256 цветов, то применяется формат JPEG. Кроме того, программа FrontPage позволяет импортировать файлы, имеющие другие форматы, преобразовывая их в форматы JPEG и GIF. Вставил свое изображение через тег <img>[5]. После того как графическое изображение размещено на странице, с помощью кнопок панели инструментов Рисунки (Pictures). Можно изменить его яркость и контрастность, повернуть по горизонтали или по вертикали, преобразовать цветное изображение в полутоновое и т. д. Графические изображения улучшают внешний вид страницы. Однако при создании Webузла необходимо учитывать, что время загрузки страницы будет напрямую зависеть от размера размешенного на ней графического файла. В данном пункте мы использовали изображения геометрических фигур и их формулы[3]. 1.7 ВСТАВКА ГИПЕРССЫЛОК В HTML для вставки гиперссылки используется дескриптор (тег), который вставляется в нужное место. Обычно его располагают среди текста, так как гиперссылка сама по себе является текстовой структурой. Но ссылки бывают ещё графическими (иконки, кнопки, картинки); о них будет рассказано 12 дальше. Их расположение на вебстранице не ограничивается текстом, а зависит от дизайнерского решения создателя сайта. Можно заметить, что тег – парный: необходим закрывающий тег . href — атрибут тега, указывает назначение ссылки. «https://google.com/» – значение атрибута, заключающее в себе URLадрес ресурса, на который осуществится переход. Оно заключается в двойные или одинарные кавычки. Это зависит от структуры вложенности тегов по правилам HTML. По правилам HTML, одни элементы могут содержать другие элементы. Тег не исключение. Если программисту необходимо выделить жирным слово Google, то делается это с помощью тега по общим правилам форматирования текста, соблюдая последовательность вложенности тегов. Вебмастер должен знать, как создать гиперссылку в HTML без ошибок, иначе они не будут работать. Неработающие ссылки на компьютерном слэнге называют «битыми». Гиперссылки делятся на две группы абсолютные и относительные. Относительные гиперссылки. При относительной адресации использование гиперссылок в HTML служит для переходов внутри ресурса и не ведёт за его пределы. Если страница настолько большая, что работает вертикальная полоса прокрутки, иногда очень длинная, как, например, в словарях, то очень удобно и целесообразно использовать относительные ссылки для быстрого перехода к нужной букве. Создавая интернетсловарь, программист в начале страницы располагает алфавит, и если бы не применение ссылок, то пользователю пришлось бы очень долго крутить колесо мыши, чтобы добраться до буквы «Я». Абсолютные гиперссылки. Гиперссылки, использующие абсолютные URLадреса сайтов, содержащие имена доменов (.ru, .com, .org, .gov), называются абсолютными и имеют следующий синтаксис: протокол://название домена/путь к файлу Пример адреса распространённого в Америке поисковика: https://aol.com — абсолютный, так как содержит имя домена .com. Абсолютные 13 гиперссылки используются для переходов на страницы других сайтов или для доступа к ресурсам, расположенным на другом сервере. Переход осуществляется с помощью протоколов Интернета. Протоколы — это не тема данной статьи, но поскольку они участвуют в создании гиперссылок. Способы перехода по гиперссылкам. По умолчанию новая страница открывается в текущем окне браузера, когда пользователь кликает по гиперссылке. Но вебпрограммист может изменить значение по умолчанию и заставить открываться страницу, к примеру, в новом окне. Для этого существует атрибут target с определённым своим значением. Нагляднее всего это можно выразить таблицей 1. Значение атрибута target Таблица 1 Теги _blanck _self _parent _top Описание тега открывает страницу в новом окне браузера открывает страницу в текущем окне (значение по умолчанию) открывает страницу в родительском фрейме при использовании фреймов отменяет их все и открывает страницу в текущем окне браузера Цвет гиперссылок. Задаются цвета ссылок в теге с помощью атрибутов и их значений, в которых выступает цвет HTML в системе rgb (#00FF00) или с прямым указанием имени цвета «green». Существует три вида атрибутов для ссылок link, vlink, alink. link — задаёт цвет непосещённой ссылки; vlink — задаёт цвет ссылки, по которой пользователь уже переходил; alink — задаёт цвет ссылки в момент перехода на другую страницу. Это происходит быстро, поэтому не всегда можно уловить этот эффект. Графические гиперссылки. Для вставки графики в качестве гиперссылок на страницы сайта используется тот же синтаксис, только вместо текста используется тег вставки изображения по правилам HTML: 14 <a href=«page2.html»> < height=«46»> </a>. img src=«/images/img1» alt=«куб» width=«50» К тегу <img> точно так же применимы атрибуты задания альтернативного текста, ширины, высоты и другие. 15 2. ПРАКТИЧЕСКАЯ ЧАСТЬ 2.1 СОЗДАНИЕ WEBСАЙТА «ПЛОЩАДИ И ОБЪЕМЫ ГЕОМЕТРИЧЕСКИХ ФИГУР» Для создания собственного webсайта нам нужно определиться с темой, в данном случае наша тема: «Создание webсайта по дисциплине математика на тему «площади и объемы геометрических фигур». Что бы создать webсайта нам понадобится пустой текстовый блокнот, создадим его. В открывшемся окне прописываем основные теги html (Рисунок 1), а именно, те теги которые указаны выше. В дальнейшем, при создании сайта в «Блокноте», набор этих тегов можно просто копировать на новую страницу для облегчения работы. Одновременно с этим подбираем название разделов. Даем каждому разделу свой заголовок, а также название самой страницы. На webсайте мы запланировали разместить изображения геометрических фигур, не забываем добавить к ним описание. Рис. 1. Написание HTML тегов 16 После того, как набор текста будет завершен, нужно примерно определиться, что, и на какой странице будет находиться. Пора определить и саму структуру сайт (Рисунок 2), и структуру ссылок на сайте. Рис. 2. Структура webсайта Теперь у нас есть модель сайта, а остальные формальности будут соблюдены при разработке дизайна, которую можно начинать сразу после составления логической структуры. От дизайна будет зависеть читабельность текста, удобство навигации, внешний вид, привлекательность, возможность акцентировать внимание посетителя на чёмлибо конкретном. После того, как завершена разработка дизайна, остаётся лишь разместить, выбранный материал на соответствующие страницы. 2.2 ОПИСАНИЕ WEBСАЙТА Webсайт несет информацию по предмету математика, связанную с темой площади и объемы геометрических фигур, к этим фигурам есть описание в виде формул таких как: площадь, объем и периметр. 17 Структура сайт состоит из следующих частей: меню навигации, которое расположено в левом углу, заголовка и блока с информацией (Рисунок 3). 2 1 3 Рис.3. Структура сайта «Площади и объемы геометрических фигур»: 1 – меню навигации; 2 – заголовок; 3 – информационный блок При клике на ссылки в меню навигации осуществляется переход на другие страницы с соответствующим названием. В информационном блоке отображаются: изображение геометрической фигуры, формулы и примеры решения простейших задач (Рисунок 4). Рис.4 Содержание информационного блока ЗАКЛЮЧЕНИЕ 18 В данной работе мы изучили информацию по созданию webсайта, проанализировали виды webсайтов. Научились создавать свой собственный webсайт, наполнять его информацией, познакомились с такими языками программирования как HTML и XHTML. Наполнили наш сайт нужной информацией. В дальнейшем планируется апробация в группах первого курса. 19 СПИСОК ЛИТЕРАТУРЫ 1. Бердышев С.Н. Информатика и ИКТ: учебное пособие С.Н. Бердышев М. Дашков и К 2012. – 148с. 2. Акулов О.А., Медведев Н.А. Базовый курс: учебник / О.А. Акулов, Н.В. Медведев – М. Омега Л, 2009. – 940 с. 3. Геометрия 7–9 классы: учебник для общеобразовательных учреждений / Л.С. Атанасян, В.Ф. Бутузов, С.Б. Кадомцев, Э.Г. Позняк, И.И. Юдина – М. Просвещение, 2010. – 384 с. 4. HTMLкоманды для создания сайтов [Электронный ресурс]. – Режим доступа: http://fb.ru/article/256185/htmlkomandyidlyasozdaniyasaytov 5. HTML теги [Электронный ресурс]. – Режим доступа: http://mm business.ru/htmltegi.html 6. Структура сайта: основные виды [Электронный ресурс]. – Режим доступа: http://saitsozdat.ru/etapsozdaniesait/proektsait/saitstrukturaosnovnye vidy.php 20

Проект по информатике на тему "Создание web-сайта по дисциплине математика на тему «Площади и объемы геометрических фигур»" (2 курс)

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

22.01.2019