Submitted by Елена Евгеньевна Розова on вс, 16/06/2019 - 15:28
Муниципальное бюджетное общеобразовательное учреждение
«Гимназия имени А.Н. Островского»
городского округа Кинешма
Создание сайта
Коротаева Мария Николаевна, учащаяся 10б класса
Научный руководитель: учитель информатики
МБОУ «Гимназия им. А.Н. Островского»
Розова Елена Евгеньевна
Кинешма, 2019
ПЛАН ПРОЕКТА:
Введение
1. Что такое сайт
2. Виды сайтов
3. Устройство сайта
4. Вирусы
Заключение
Список литературы
Приложение№1
Приложение №2
Цель проекта: создание сайта.
Задачи:
1. Узнать, что такое сайт
2. Узнать всё, о видах сайта
3. Познакомиться с устройством сайта
4. Выбрать тему для сайта.
5. Сбор материала.
6. Подбор технических и программных средств.
7. Разработка структуры сайта
Методика.
Для достижения поставленной цели, был проведен сбор информации, разработка проекта с помощью языка разметки гипертекстовых документов HTML.
Практическая значимость и актуальность.
Сегодня Интернет является неотъемлимой частью нашей жизни. В сети мы посещаем много разных сайтов: интернет-магазины, соцсети, новостные сайты и другие. С их помощью мы общаемся, покупаем нужные вещи, не выходя из дома, и просто полезную информацию.
Практически каждый из нас задумывался о том, как устроены сайты, и многие хотели бы создать собственный сайт. Существует много сервисов для этого. Для самостоятельного создания нужно много знать: язык разметки, некоторые языки программирования и стандарты. Также необходимо сделать сайт удобным для любого пользователя, он должен соответствовать современным стандартам сайтостроения и исправно работать. Чтобы людям захотелось посетить его снова, желательно, чтобы он выглядел эстетично. Поскольку создание сайтов сегодня является очень актуальной темой, в своем проекте я решила разобраться в устройстве сайтов и создать свой.
Перспектива.
В перспективе возможна реализация проекта с использованием других программ.
1.Сайт, или веб-сайт(от англ. website: web — «паутина, сеть» и site — «место», буквально «место, сегмент, часть в сети»), — одна или несколько логически связанных между собой веб-страниц; также место расположения контента сервера. Обычно сайт в Интернете представляет собой массив связанных данных, имеющий уникальный адрес и воспринимаемый пользователем как единое целое. Сайты используются для разных целей, поэтому делятся на виды.
2. Рассмотрим некоторые виды сайтов.
1. Сайт-визитка - одна или несколько страниц в интернете, расположенных на одном доменном имени, предоставляющая общую информацию о владельце, основной перечень услуг, товаров, контактные данные и раздел с ответами на основные вопросы. Главная задача такого сайта – предоставить пользователю основной перечень информации о компании или частном лице. Зайдя на страницу, пользователь должен получить полную картину о частном лице либо об организации-владельце сайта.
2. Корпоративный сайт – это сайт компании, ее официальное виртуальное представительство в интернете. Корпоративный сайт содержит полный объем информации о самой компании, о сфере ее деятельности, предлагаемой продукции и услугах. Часто на корпоративном сайте размещают каталог производимой продукции и дополнительные сервисы – форум, опросы, рассылки и тому подобное.
Корпоративный сайт позволяет выдавать онлайн расчёты стоимости, производить продажу продукции, проводить маркетинговые исследования и рекламные акции, рассылать посетителям новости, собирать отзывы клиентов, устраивать голосования и многое другое.
Особое внимание уделяется дизайну, ведь корпоративный сайт – это в первую очередь имиджевый инструмент. В современном мире наличие корпоративного сайта является неотъемлемым для любой серьезной компании. Ведь сайт такого типа – это очень эффективное средство для предоставления в интернете информации об организации.
3. Сайт-сервис - сайт, оказывающий услуги. Сервисы бывают с самыми разными функциями. Объединяет такие сайты одно: они сделаны для решения прикладных утилитарных задач. Будущее интернета за такими сайтами, ведь интернет из средства развлечения и коммуникации превращается в инструмент решения различных задач.
4. Сайт-каталог - сайт, на котором представлена информация определённого рода о товарах, группе товаров, услуг или статей и материалов на определённую тематику. Сайты этого типа, как правило, содержат множество текстовой информации различных авторов или изображений и описаний товаров и услуг.
3. Как устроен сайт? Страницы сайтов — это файлы с текстом, размеченным на языке HTML. Эти файлы, будучи загруженными посетителем на его компьютер, обрабатываются браузером и выводятся на его средство отображения (монитор, экран КПК, принтер или синтезатор речи). Язык HTML позволяет форматировать текст, различать в нём функциональные элементы, создавать гипертекстовые ссылки (гиперссылки) и вставлять в отображаемую страницу изображения, звукозаписи и другие мультимедийные элементы с помощью тегов.
Всего тегов более сотни, но действительно важных и постоянно нужных не так много. Самые главные теги:
html — это глобальный тег-контейнер, в который помещается все содержимое веб-страницы. Он является парным, впрочем, как и большинство описываемых далее тегов. Если и будут попадаться одинарные, то я об этом скажу.
head — содержит разную информацию, которая никак не будет выводиться на странице, но от нее непосредственно зависит внешний вид информации. Например, в head прописывается кодировка, подключается таблица стилей и файлы javascript. То есть здесь указывается все, что нужно для корректной работы странички. Следующие четыре тега прописываются именно в head.
link — с помощью этого одинарного тега подключаются внешние файлы. Например, иконка или таблица стилей
script — подключает файлы с расширением js (javascript).
title — задает название страницы, ее заголовок, который будет виден в поисковиках и в браузере.
meta — одинарный тег, в котором прописывается служебная информация, такая, как кодировка или ключевые слова.
body — тело страницы. Контейнер для всего содержимого, которое будет непосредственно выведено на веб-страничку.
Теги для текста, списки
p — создает параграф или абзац, который отделяется от других элементов небольшими вертикальными отступами. Основной элемент для хранения текстовой информации.
blockquote — большая цитата, которая можете содержать в себе другие теги для ее оформления. Может состоять, например, из нескольких абзацев.
h1 — h6 — теги для выделения заголовков на веб-странице. H1 – самый главный и далее по убыванию важности.
q — маленькая цитата.
b, strong — выделяет текст жирным. Второй тег также придает словам особую важность.
em, i — выделение курсивом.
sub, sup — выводит текст в нижнем/верхнем индексе, заодно уменьшая немного размер шрифта.
ol — в html это тег нумерованного списка, пунктам которого будут присваиваться порядковые номера.
ul — маркированный список. Его пункты просто отмечаются маркером, внешний вид которого можно изменить. Маркированный список делают тогда, когда нет нужно в строгом перечислении каких-то пунктов.
li — парный тег, в который помещается один пункт маркированного или нумерованного списка. То есть ul или ol выступает лишь в роли контейнера.
Картинки
Картинки в html вставляются с помощью одинарного тега <img>. Обязательным атрибутом является src (source), то есть путь к самой картинке. Остальные параметры (размер, позиционирование, эффекты) лучше настраивать через css.
Таблицы
table — тег-контейнер, в который помещается вся таблица.
tr — ряд таблицы, в который вписываются ее ячейки. Сам ряд никак нельзя выделить, он выступает лишь в роли контейнера.
td — ячейка таблицы. Вот к ней как раз и можно применить какие-то стили, размер, в нее можно вписать информацию, вставить картинку или видео.
Пустые блочные и строчные контейнеры
div — пустой блочный контейнер, не выполняющий больше никаких функций. До сих пор с его помощью, например, верстают боковую колонку на сайте.
span — аналогично с дивов это пустой контейнер, но не блочный, а строчный. Чаще всего применяется для выделения отдельных кусков текста и применения к ним каких-то интересных стилей.
Мультимедиа
В список тегов html можно добавить и более современные. Например, тег video, в атрибутах которого можно задать адрес до видеоролика, а также кодеки для его проигрывания на веб-странице. Сюда же входит audio. С помощью этого парного тега можно вставить аудиозапись.
Формы
form — в этот тег помещается вся форма (обычно для регистрации, заказа чего-то). Имеет атрибуты, связывающие ее с PHP, иначе она не будет работать.
input — основной одинарный тег, который позволяет вставить в форму различные поля (для ввода текста, телефона, выбора даты рождения).
textarea — большое текстовое поле. Обычно в него можно вписать отзыв или комментарий.
HTML5
Хотелось бы также упомянуть несколько современных тегов, которые появились в HTML5.
header — шапка сайта, статьи или какого-то раздела.
footer — подвал сайта, статьи или какого-то раздела.
aside — второстепенная информация, не имеющая непосредственной связи с главным содержанием. Но в этот тег не советуют вставлять сайдбар (боковую колонку), которую лучше пока делать по-старому с помощью div.
figure — позволяет группировать элементы. Самый распространенный пример – картинка и описание для нее.
section — раздел сайта (обычно со своим заголовком).
article — независимая статья, новость или заметка.
nav — главная навигация сайта.
Конечно, это не все теги, которые появились в HTML5, но практика показывает, что именно перечисленные пригодятся вам больше всего
Отображение страницы можно изменить добавлением в неё таблицы стилей на языке CSS или сценариев на языке JavaScript.
Страницы сайтов могут быть простым статичным набором файлов или создаваться специальной компьютерной программой на сервере — так называемым движком сайта. Движок может быть либо сделан на заказ для отдельного сайта, либо быть готовым продуктом, рассчитанным на некоторый класс сайтов. Некоторые из движков могут обеспечить владельцу сайта возможность гибкой настройки структурирования и вывода информации на веб-сайте. Такие движки называются системами управления содержимым (CMS).
4. Тема моего сайта — компьютерные вирусы. Компью́терный ви́рус — вид вредоносного программного обеспечения, способного внедряться в код других программ, системные области памяти, загрузочные секторы, а также распространять свои копии по разнообразным каналам связи. Эти вирусы делятся на виды, которые также рассмотрены на моем сайте.
Заключение
В процессе выполнения проекта мы узнали, что такое сайт, какие бывают сайты, как они устроены и создали собственный. Это информационный сайт о компьютерных вирусах. Для его создания я использовала HTML, CSS и JavaScript (см. Приложение№1). Так же мы убедились, что это требует много знаний.
Приложение №1