ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 04.02.2024
Просмотров: 29
Скачиваний: 0
ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.
МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РЕСПУБЛИКИ КАЗАХСТАН
УПРАВЛЕНИЕ ОБРАЗОВАНИЯ ГОРОДА АЛМАТЫ
ИННОВАЦИОННЫЙ ТЕХНИЧЕСКИЙ КОЛЛЕДЖ ГОРОДА АЛМАТЫ
КУРСОВАЯ РАБОТА
на тему: Создание сайта по просмотру Аниме
Дисциплина: Web-программирование и Интернет технологии
Специальность: 1304000 – «Вычислительная техника и программное обеспечение»
Квалификация: 1304053 – «Техник по защите информации»
| Выполнил(а): (Ф.И.О. обучающегося) Группа: ТЗИ-20Р Проверил (а): Аханкызы А. Дата защиты «16» марта 2023 г. Оценка ____________ |
АЛМАТЫ 2023
Содержание
ВВЕДЕНИЕ 3
1 ОСНОВНАЯ ЧАСТЬ 4
1.1 Web-программирование 4
1.2 Основы HTML 8
1.3Зачем нужен css 12
Внешняя таблица стилей представляет собой текстовый файл с расширением .css, в котором находится набор CSS-стилей элементов. Файл создаётся в редакторе кода, так же как и HTML-страница. Внутри файла могут содержатся только стили, без HTML-разметки. Внешняя таблица стилей подключается к веб-странице с помощью элемента , расположенного внутри раздела . Такие стили работают для всех страниц сайта. 14
К каждой веб-странице можно присоединить несколько таблиц стилей, добавляя последовательно несколько элементов , указав в атрибуте media назначение данной таблицы стилей. rel="stylesheet" указывает тип ссылки (ссылка на таблицу стилей). 14
HTML 14
Атрибут type="text/css" не является обязательным по стандарту HTML5, поэтому его можно не указывать. Если атрибут отсутствует, по умолчанию используется значение type="text/css". 14
Внутренние стили 14
Внутренние стили встраиваются в раздел HTML-документа и определяются внутри элемента . Внутренние стили имеют приоритет над внешними, но уступают встроенным стилям (заданным через атрибут style). 14
HTML 14
Встроенные стили 14
Когда мы пишем встроенные стили, мы пишем CSS-код в HTML-файл, непосредственно внутри элемента с помощью атрибута style:Правило @import 14
Правило @import позволяет загружать внешние таблицы стилей. Чтобы директива @import работала, она должна располагаться в таблице стилей (внешней или внутренней) перед всеми остальными правилами: 15
Правило @import также используется для подключения веб-шрифтов: 15
Виды селекторов 15
Селекторы представляют структуру веб-страницы. С их помощью создаются правила для форматирования элементов веб-страницы. Селекторами могут быть элементы, их классы и идентификаторы, а также псевдоклассы и псевдоэлементы. 15
Универсальный селектор 15
Соответствует любому HTML-элементу. Например, * {margin: 0;} обнулит внешние отступы для всех элементов сайта. Также селектор может использоваться в комбинации с псевдоклассом или псевдоэлементом: *:after {CSS-стили}, *:checked {CSS-стили}. 15
Селектор элемента 15
Селекторы элементов позволяют форматировать все элементы данного типа на всех страницах сайта. Например, h1 {font-family: Lobster, cursive;} задаст общий стиль форматирования всех заголовков h1. 15
Селектор класса 15
Селекторы класса позволяют задавать стили для одного и более элементов с одинаковым именем класса, размещенных в разных местах страницы или на разных страницах сайта. Например, для создания заголовка с классом headline необходимо добавить атрибут class со значением headline в открывающий тег и задать стиль для указанного класса. Стили, созданные с помощью класса, можно применять к другим элементам, не обязательно данного типа. 15
Инструкция пользования персональным компьютером 15
Если элемент имеет несколько атрибутов класса, их значения объединяются с пробелами. 15
Инструкция пользования персональным компьютером
15
Селектор идентификатора 15
Селектор идентификатора позволяет форматировать один конкретный элемент. Значение id должно быть уникальным, на одной странице может встречаться только один раз и должно содержать хотя бы один символ. Значение не должно содержать пробелов. 15
Нет никаких других ограничений на то, какую форму может принимать id, в частности, идентификаторы могут состоять только из цифр, начинаться с цифры, начинаться с подчеркивания, состоять только из знаков препинания и т. д. 15
Уникальный идентификатор элемента может использоваться для различных целей, в частности, как способ ссылки на конкретные части документа с использованием идентификаторов фрагментов, как способ нацеливания на элемент при создании сценариев и как способ стилизации конкретного элемента из CSS. 15
Селектор потомка 15
Селекторы потомков применяют стили к элементам, расположенным внутри элемента-контейнера. Например, ul li {text-transform: uppercase;} — выберет все элементы li, являющиеся потомками всех элементов ul. 16
Если нужно отформатировать потомки определенного элемента, этому элементу нужно задать стилевой класс: 16
p.first a {color: green;} — данный стиль применится ко всем ссылкам, потомкам абзаца с классом first; 16
p .first a {color: green;} — если добавить пробел, то будут стилизованы ссылки, расположенные внутри любого элемента класса .first, который является потомком элемента
; 16
.first a {color: green;} — данный стиль применится к любой ссылке, расположенной внутри другого элемента, обозначенного классом .first. 16
Дочерний селектор 16
Дочерний элемент является прямым потомком содержащего его элемента. У одного элемента может быть несколько дочерних элементов, а родительский элемент у каждого элемента может быть только один. Дочерний селектор позволяет применить стили только если дочерний элемент идёт сразу за родительским элементом и между ними нет других элементов, то есть дочерний элемент больше ни во что не вложен. 16
Например, p > strong — выберет все элементы strong, являющиеся дочерними по отношению к элементу p. 16
Сестринский селектор 16
Сестринские отношения возникают между элементами, имеющими общего родителя. Селекторы сестринских элементов позволяют выбрать элементы из группы элементов одного уровня: 16
h1 + p — выберет все первые абзацы, идущие непосредственно за любым элементом
, не затрагивая остальные абзацы; 16
h1
p — выберет все абзацы, являющиеся сестринскими по отношению к любому заголовку h1 и идущие сразу после него. 16
2.8. Селектор атрибута 16
Селекторы атрибутов выбирают элементы на основе имени атрибута или значения атрибута: [атрибут] — все элементы, содержащие указанный атрибут, [alt] — все элементы, для которых задан атрибут alt; селектор[атрибут] — элементы данного типа, содержащие указанный атрибут, img[alt] — только картинки, для которых задан атрибут alt; 16
селектор[атрибут="значение"] — элементы данного типа, содержащие указанный атрибут с конкретным значением, img[title="flower"] — все картинки, название которых содержит слово flower; 16
селектор[атрибут
="значение"] — элементы частично содержащие данное значение, например, если для элемента задано несколько классов через пробел, p[class
="feature"] — абзацы, имя класса которых содержит feature; 16, не затрагивая остальные абзацы; 16
h1
p — выберет все абзацы, являющиеся сестринскими по отношению к любому заголовку h1 и идущие сразу после него. 162.8. Селектор атрибута 16
Селекторы атрибутов выбирают элементы на основе имени атрибута или значения атрибута: [атрибут] — все элементы, содержащие указанный атрибут, [alt] — все элементы, для которых задан атрибут alt; селектор[атрибут] — элементы данного типа, содержащие указанный атрибут, img[alt] — только картинки, для которых задан атрибут alt; 16
селектор[атрибут="значение"] — элементы данного типа, содержащие указанный атрибут с конкретным значением, img[title="flower"] — все картинки, название которых содержит слово flower; 16
селектор[атрибут
селектор[атрибут|="значение"] — элементы, список значений атрибута которых начинается с указанного слова, p[class|="feature"] — абзацы, имя класса которых feature или начинается на feature; 16
селектор[атрибут^="значение"] — элементы, значение атрибута которых начинается с указанного значения, a[href^="http://"] — все ссылки, начинающиеся на http://; 17
селектор[атрибут$="значение"] — элементы, значение атрибута которых заканчивается указанным значением, img[src$=".png"] — все картинки в формате png; 17
селектор[атрибут*="значение"] — элементы, значение атрибута которых содержит в любом месте указанное слово, a[href*="book"] — все ссылки, название которых содержит book. 17
Селектор псевдокласса 17
Псевдоклассы — это классы, фактически не прикрепленные к HTML-элементам. Они позволяют применить CSS-правила к элементам при совершении события или подчиняющимся определенному правилу. 17
Псевдоклассы характеризуют элементы со следующими свойствами: 17
a[href][title] — выберет все ссылки, для которых заданы атрибуты href и title; 17
img[alt*="css"]:nth-of-type(even) — выберет все четные картинки, альтернативный текст которых содержит слово css. 17
Группировка селекторов 17
Один и тот же стиль можно одновременно применить к нескольким элементам. Для этого необходимо в левой части объявления перечислить через запятую нужные селекторы: 17
Наследование и каскад 17
Наследование и каскад — два фундаментальных понятия в CSS, которые тесно связаны между собой. Наследование заключается в том, что элементы наследуют свойства от своего родителя (элемента, их содержащего). 17
Каскад проявляется в том, как разные виды таблиц стилей применяются к документу, и как конфликтующие правила переопределяют друг друга. 17
Наследование 17
Наследование является механизмом, с помощью которого определенные свойства передаются от предка к его потомкам. Спецификацией CSS предусмотрено наследование свойств, относящихся к текстовому содержимому страницы, таких как color, font, letter-spacing, line-height, list-style, text-align, text-indent, text-transform, visibility, white-space и word-spacing. Во многих случаях это удобно, так как не нужно задавать размер шрифта и семейство шрифтов для каждого элемента веб-страницы. 17
Свойства, относящиеся к форматированию блоков, не наследуются. Это background, border, display, float и clear, height и width, margin, min-max-height и -width, outline, overflow, padding, position, text-decoration, vertical-align и z-index. 17
Принудительное наследование 17
С помощью ключевого слова inherit можно принудить элемент наследовать любое значение свойства родительского элемента. Это работает даже для тех свойств, которые не наследуются по умолчанию. 17
Как задаются и работают CSS-стили 17
Стили могут наследоваться от родительского элемента (наследуемые свойства или с помощью значения inherit). 17
Стили, расположенные в таблице стилей ниже, отменяют стили, расположенные в таблице выше. 18
К одному элементу могут применяться стили из разных источников. Проверить, какие стили применяются, можно в режиме разработчика браузера. Для этого над элементом нужно щёлкнуть правой кнопкой мыши и выбрать пункт «Посмотреть код» (или что-то аналогичное). В правом столбце будут перечислены все свойства, которые заданы для этого элемента или наследуются от родительского элемента, а также файлы стилей, в которых они указаны, и порядковый номер строки кода. 18
1.4Frontend 18
Когда вы гуляете по городу, что вы видите? Взгляд часто останавливается на стильных витринах, созданных с целью привлечь внимание. Вы выбираете самую красивую из них и заходите внутрь. 18
То же самое происходит и в интернете. Блуждая по интернету в поисках необходимого, вы натыкаетесь на самый подходящий на первый взгляд сайт и заходите на него. 18
Но если витрины прозрачны и показывают, что находится внутри, приглашают рассмотреть товары поближе, то для сайтов все немного иначе. Что скрывается под видимыми элементами сайта, как они взаимодействуют с пользователем, друг с другом и с системой, стоящей за всем этим? Давайте же выясним это. 18
Что такое фронтенд-разработка? Фронтенд vs бэкенд 18
Фронтенд веб-сайта — это все, что пользователь видит и с чем может взаимодействовать при помощи браузера. Создание этой визуальной части называется фронтенд-разработкой. Дизайнеров, создающих пользовательские интерфейсы, тоже можно в какой-то смысле назвать фронтенд-разработчиками, потому что они совместно работают над этой же частью проекта. 18
Для разработки фронтенда в качестве базовых инструментов используются: HTML (для создания базовой структуры страниц и контента), CSS (для стилизации внешнего вида) и JavaScript (для добавления интерактивности). Такой же набор инструментов используется в процессе создания прогрессивных веб-приложений — мобильных приложений, которые выглядят, как нативные, но при этом создаются с участием фронтенд-технологий. Подробнее об этом можно почитать в статье по ссылке. 18
Бэкенд — это серверная часть веб-приложения, скрытая от глаз пользователя. Это понятие включает в себя серверы, на которых расположены веб-страницы и определенную логику, которая управляет функциями и процессами сайта. Здесь можно почитать более подробное описание внутренней работы веб-приложений. 18
Бэкенд разрабатывается с использованием другого стека технологий, включая Java, PHP, Ruby, C# и иногда JavaScript, о которых мы поговорим в соответствующем разделе статьи. 18
Итак, базовый набор инструментов для разработки фронтенда четко определен: HTML, CSS и JavaScript. Однако этот набор может быть значительно расширен, включив в себя диспетчеры пакетов, CSS-препроцессоры, фреймворки и многое другое. 19
HTML: ключевая фронтенд-технология 19
HTML (от англ. Hypertext Markup Language) — это язык гипертекстовой разметки, предназначенный для создания веб-сайтов, которые впоследствии могут просматриваться при помощи доступа к интернету. HTML обычно используется для структурирования веб-документа. Он определяет такие элементы, как заголовки или абзацы, и позволяет вставлять изображения, видео и другие медиафайлы. 19
Как работает HTML. HTML-код представляет собой множество тегов и пишется в текстовом файле. Этот текстовый файл затем сохраняется в виде HTML-файла, который можно открыть и посмотреть в браузере. Браузер сканирует его, интерпретирует код в визуальную форму и в лучшем случае отображает страницу именно так, как задумал дизайнер. 19
ЗАКЛЮЧЕНИЕ 28
СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ 29
ВВЕДЕНИЕ
Unity использует гибкую модульную систему для создания сцен и персонажей в игре. Даже если вы только начинаете, вы все равно можете сделать довольно крутой космический корабль с базовым набором лего-конструктора Unity. Если же вы чувствуете, что готовы к «сложной изощренной кирпичной системе» для продвинутых, Unity дает вам возможность настроить практически любой компонент. Например, написать свои собственные шейдеры или переписать сетевые стеки в соответствии с потребностями вашей игры.
Редактор Unity имеет простой Drag&Drop интерфейс, который легко настраивать, состоящий из различных окон, благодаря чему можно производить отладку игры прямо в редакторе. Движок поддерживает два скриптовых языка: C#, JavaScript (модификация). Ранее была поддержка Boo (диалект Python), но его убрали в 5-й версии. Расчёты физики производит физический движок PhysX от NVIDIA.
Проект в Unity делится на сцены (уровни) — отдельные файлы, содержащие свои игровые миры со своим набором объектов, сценариев, и настроек. Сцены могут содержать в себе как, собственно, объекты (модели), так и пустые игровые объекты — объекты, которые не имеют модели («пустышки»).
Объекты, в свою очередь содержат наборы компонентов, с которыми и взаимодействуют скрипты. Также у объектов есть название (в Unity допускается наличие двух и более объектов с одинаковыми названиями), может быть тег (метка) и слой, на котором он должен отображаться. Так, у любого объекта на сцене обязательно присутствует компонент Transform — он хранит в себе координаты местоположения, поворота и размеров объекта по всем трём осям. У объектов с видимой геометрией также по умолчанию присутствует компонент Mesh Renderer, делающий модель объекта видимой.
К объектам можно применять коллизии (в Unity т. н. коллайдеры — collider), которых существует несколько типов.
Также Unity поддерживает физику твёрдых тел и ткани, а также физику типа Ragdoll (тряпичная кукла). В редакторе имеется система наследования объектов; дочерние объекты будут повторять все изменения позиции, поворота и масштаба родительского объекта. Скрипты в редакторе прикрепляются к объектам в виде отдельных компонентов.
При импорте текстуры в Unity можно сгенерировать alpha-канал, mip-уровни, normal-map, light-map, карту отражений, однако непосредственно на модель текстуру прикрепить нельзя — будет создан материал, которому будет назначен шейдер, и затем материал прикрепится к модели. Редактор Unity поддерживает написание и редактирование шейдеров. Редактор Unity имеет компонент для создания анимации, но также анимацию можно создать предварительно в 3D-редакторе и импортировать вместе с моделью, а затем разбить на файлы.
1 ОСНОВНАЯ ЧАСТЬ
1.1 Web-программирование
Веб-программирование - это процесс создания веб-приложений, которые доступны через интернет. Веб-приложения могут быть различными, например, интернет-магазинами, социальными сетями, онлайн-играми и многими другими.
Для создания веб-приложений используются различные языки программирования, такие как HTML, CSS и JavaScript, а также фреймворки и библиотеки, такие как React, Angular и Node.js.
Основная цель веб-программирования - создание веб-приложений, которые могут обрабатывать пользовательский ввод и взаимодействовать с базами данных для хранения и получения данных. Эти веб-приложения могут быть развернуты на сервере и доступны через интернет, что делает их доступными для множества пользователей.
Веб-программирование — одна из самых важных тем, которую мы должны затронуть при создании сайта. Конечно, стильный дизайн статичных веб-страниц и их интересное содержание не менее важно, но намного лучше выглядят интерактивные страницы, которые реагируют на действия пользователей. Большинство современных наиболее посещаемых сайтов умеют собирать и обрабатывать информацию посетителей, проводить голосования, осуществлять поиск и многое другое. Все эти возможности осуществляются с помощью использования на сайтах специальных программ, веб-разработчики называют их скриптами.
Веб-программисты используют множество различных инструментов для разработки сайтов. Несмотря на то что существуют десятки языков программирования, которые могут быть использованы для написания скриптов, все они делятся на 2 типа. Одни из них работают на стороне сервера, т.е. непосредственно на самом сайте. Другие же находятся на стороне клиента, на компьютере самого пользователя, который просматривает сайт.
Трудно представить работу, например, форума, без скриптов. В данном случае они помогают в сборе и хранении информации – приеме и сохранении отправленных сообщений. Скрипты, работающие на клиентской стороне, дают возможность реагировать на действия пользователя и изменять вид и содержание страницы, которая уже была загружена в память компьютера без ее повторного сохранения. Чаще всего для реализации определенной задачи используются оба типа скриптов.
Языки Си и Паскаль были уже достаточно популярными и развитыми языками программирования на момент появления интернета. Но нужны были все новые функции, потому что программирование в интернете имело свою специфику. Было необходимо упростить работу с типичными данными и элементами веб-страниц, а так же ограничить функциональность средств программирования для злоумышленников. Они не должны были иметь возможность нанести какой-либо вред серверам или пользовательским компьютерам с помощью написания или изменения скриптов. Именно поэтому начали появляться все новые и более современный языки и средства веб-программирования. Рассмотрим некоторые из них.
Javascript – язык, появившийся в начале 90х. Фирма-разработчик Netscape в то время была одной из самых популярных благодаря своему браузеру Netscape Navigator. Он был самым широко используемым для просмотра сайтов. Не стоит путать языки javascript и java. Несмотря на то, что основа у них одна, это совершенно разные языки программирования. Скрипты, написанные на javascript, работают на стороне клиентского персонального компьютера, точнее говоря в самом браузере, с помощью которого открыта веб-страница. Они не требуют никаких дополнительных программ или плагинов и могут быть добавлены в html-код страницы, после чего будут выполняться в любом браузере. Javascript практически не имеет конкурентов в своей области, простой и удобный язык, который позволяет реагировать на пользовательские действия и управлять содержимым веб-страницы. Именно с него рекомендуется начинать свое обучение веб-разработчику.
Java – язык, специально созданный для работы и интернете и компьютерных сетях. Данный язык позволяет создавать приложения как для стороны сервера, так и для клиента. Но Java уже не позволяет просто вставить html-код на страницу, как в случае с javascript. Для использования и управления такими приложениями используется специальная виртуальная машина Java. Кроме этого, язык java позволяет создавать java-апплеты – небольшие самостоятельные приложения, которые могут быть вызваны в html-коде. Их выполнение также будет обеспечено браузером.
Flash – технология для создания анимированных изображений, созданная фирмой Macromedia. Данная технология быстрее других получила распространение. Язык программирования Actionscripts, который в нее встроен, стал использоваться для написания различных программ, в том числе большого количества игр, а не только с целью создания эффектов анимации. Все данные программы также используются на стороне пользователя.
Работоспособность скриптов, написанных на языке javascript, можно легко проверить, открыв html-файл в браузере. Но серверные скрипты могут работать исключительно на стороне сервера. Сервером может быть как персональных компьютер в сети, на котором расположены веб-страницы, так и специализированная программа, которая обеспечивает все необходимые функции. Нет необходимости загружать скрипт на языке php для проверки его работоспособности на удаленный сервер. Вы можете использовать один и тот же компьютер в качестве клиента и сервера, установив на него программу-сервер, которая поддерживает php. Сервер Apache на сегодняшний день является самым популярным, SSI – программа, входящая в пакет Windows, Denver – сравнительно небольшой пакет, который обеспечивает поддержку популярных языков программирования и всех серверных функций.