12+  Свидетельство СМИ ЭЛ № ФС 77 - 70917
Лицензия на образовательную деятельность №0001058
Пользовательское соглашение     Контактная и правовая информация
 
Педагогическое сообщество
УРОК.РФУРОК
 
Материал опубликовал
Елена132

Муниципальное бюджетное образовательное учреждение

«Школа №48»



















«Как создать свой сайт»







Выполнил ученик 10 класса А

Ветринцев Илья

Научный руководитель –

учитель информатики

Генералова

Елена Алексеевна





Рязань, 2020

Содержание

Введение……………………………………………………………………………………………………………….3

Теоретическая часть

Понятие сайта и основные термины…………………………………........................ 4

Способы создания сайта …………………………………………… ………………………....... 5

Советы начинающим ……………………………………………………………………………….. 7

Практическая часть.

Вводная часть …………………………………………………………………………………………...9

Этапы создания сайта………………………………………………………………………………..9

Результаты работы…………………………………………………………………………………………..10

Заключение……………………………………………………………………………..................................11

Список источников………………………………………………………………………………………………12

Приложение

Приложение 1…………………………………………................................................................13

Приложение 2…………………………………………………………………………………………………….14

Приложение 3…………………………………………................................................................15

Приложение 4…………………………………………………………………………………………………….16









Введение

Сегодня иметь собственный сайт – это не просто значит идти в ногу со временем, но и эффективно зарабатывать. Если вы хотите продвинуть свой товар или услугу, нет более рационального и разумного способа, чем сделать это через интернет-портал. Собственный ресурс поможет не только привлечь дополнительное количество клиентов, но и заработать деньги на рекламе. Кроме того, создание сайтов можно превратить в творческий процесс, постоянно совершенствуя свой ресурс, и наполняя качественным контентом.

Если вы когда-либо задумывались о создании сайта, то наверняка думали, что это очень сложно и этому надо долго учиться. Сам по себе сайт может создаваться для разных целей (конкурсы, коммерческая необходимость и прочее). Важнее всего научиться, это делать самому, ведь в наше время так много возможностей для создания своего собственного сайта. Сейчас достаточно много коммерческих компаний, нацеленных на людей, нежелающих разобраться в вопросе. То есть вы можете просто заплатить достаточно внушительную сумму за хороший сайт или потратить немного своего времени для изучения этого процесса, и сэкономив деньги сделать сайт самому. Я выбрал второй вариант. Итак, основные сведения по моей работе:

Цель: Использую язык разметки гипертекста HTML создать свой сайт.

Задачи:

Узнать о понятии сайта и основных терминах;

Сравнить способы написания и выбрать наиболее подходящий;

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













1. Теоретическая часть

1.1 Понятие сайта и основные термины

Говоря простыми словами, сайт — это набор веб-страниц, которые отображаются в выдаче поисковой системы (Яндекс, Гугл и пр.), когда пользователи вводят определенные запросы с клавиатуры или с помощью голосового ввода. Например, человек пишет “деревянные дома”, и ему открываются сайты, соответствующие данной тематике.

Для выгрузки сайта в сеть необходимо приобрести домен (доменное имя). Это и есть тот уникальный адрес, по которому будет доступна главная его страница. Перед покупкой домена нужно убедиться в том, что он свободен. Иначе говоря, нужно проверить, не расположен ли какой-нибудь сторонний ресурс по данному адресу. Для этого достаточно написать в интернете “проверить домен” и воспользоваться специальными сервисами.

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

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

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

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

Гиперссылка - это текст или изображение на Web - странице, при щелчке на котором происходит переход к другой Web - странице или сайту.



1.2 Способы создания сайтов

Способ №1

Первый способ - это написание сайта на языке гипертекстовой разметки HTML(Hype rText Markup Language), а также CSS.

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

CSS — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языка разметки HTML.

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

Этот способ был изобретен одним из первых, сейчас сайтов, написанных данным способом все меньше, в связи с неактуальностью и большой конкуренцией.

Плюсы этого способа:

Огромный простор для работы (каждый сможет реализовать свои творческие идеи);

Невысокая вероятность по созданию одинаковых сайтов (огромное количество тегов и путей для реализации своих идей);

Возможность для саморазвития;

Не требует денежных вложений (исключая хостинг).

Минусы способа:

Требуется подготовка и знания языка разметки гипертекста;

Достаточные временные затраты.

Структуру сайта, а также основные теги, для написания сайта 1-ым способом вы можете увидеть в Приложении №1.

Способ №2

Это создание сайта на конструкторе (Wix и другие). Подобные конструкторы имеют уже готовые шаблоны, которые можно применять и создавать свой сайт. Этот способ подразумевает оплату использования определенных шаблонов (которых большинство).

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

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

Плюсы:

Простота и удобства;

Минимальные временные затраты;

Яркий дизайн шаблонов;

Отсутствие написание кода.

Минусы:

Однотипность таких сайтов;

Ограниченное число шаблонов;

Необходимость денежных затрат.

Способ №3

Создание сайта с помощью CMS

CMS - это аббревиатура от Content Management System, что в дословном переводе означает "система управления контентом сайта".
CMS - это программное обеспечение, которое позволяет разрабатывать и поддерживать динамические информационные web-сайты. Разные cms позволяют проектировать сайты различной сложности, вплоть до интернет-магазинов и информационных порталов.
Есть два основных вида cms:
1. CMS - работающие и располагающиеся в Интернете;
2. CMS - установленные на компьютере и соединенные с сайтом автоматически или через интерфейс обновления файлов.

Плюсы:

Скорость создания;

Вариативность (может быть, как шаблонным так и самописным);

Популярность и множество сайдов;

Минусы:

Необходимость в том, чтобы разобраться с особенностями CMS;

Качество кода оставляет желать лучшего;

Большая конкуренция;

Возможность вливания денегю

Для меня самым удобным способом является написание сайта на html и css (1-ый способ), но какой будет удобнее вам – выбирать вам.



1.3 Советы начинающим

Основные советы для написания сайта именно первым способом.

Выбор программы для эффективного написания сайта. Лучшим выбором будет Notepad++ или Brackets (Приложение №2). Я лично использую второй вариант, в нем есть приятнейшее оформление и возможность кастомизации программы под себя, а также она имеет функцию подсказок. Что существенно облегчит процесс.

Не увлекайтесь графикой. Графика это хорошо, но ведь существуют и другие вещи. Поэкспериментируйте с цветными таблицами и CSS. Разгрузите ваш сайт и старайтесь придерживаться планки до 50kb на страницу. Например, как в моём сайте, где задний фон сделан из маленьких картинок весом менее 10b (Приложении №3 Рис.1).

Придерживайтесь стиля. При создании сайта придерживайтесь тематики и не отходите от нее, есть такое понятие, как стиль. Он должен пронизывать весь сайт. (Приложение №3 Рис.2).

Не переусердствуйте с дизайном. Очень важно не использовать графические функции в ущерб информативности сайта.

Уделяйте внимание мелочам. Очень важно следить за каждым пикселем своего сайта, за каждой запятой и каждым символом. На это уйдет больше времени, зато потом сайтом будет приятнее пользоваться, и вы получите хороший результат.

Навигация. Если ваш сайт достаточно объемный (более 1-й страницы), то вам следует сделать навигацию по сайту (например, в «шапке» сайте). Так пользователь не будет мучиться, читая не интересную ему информацию (Приложение №3 Рис.3).

Оптимизация. Сделайте оптимизацию под разные браузеры, устройства и не нагружайте сайт, чтобы он быстро грузился, это всегда приманивает пользователя.

Структура. Следите за структурой сайта. Не сваливайте все в одну кучу, распределите все по полочкам и сделайте навигацию, это привлечет пользователя.







2. Практическая часть

2.1 Вводная часть

Тема сайта связана с годом театра в России. Сайт весь выполнен в желто-кремовых цветах. Сам сайт является информативным и несет в себе информацию о театрах нескольких древних цивилизаций (Приложение 3).

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

Мой сайт написан на языке программирования HTML, а также CSS, которые я описывал в 1-м способе. Этот способ мне кажется очень интересным пусть и не самым популярным в данный момент.

2.2. Этапы создания сайта

Этапы создания моего сайта на языке HTML и CSS. Код сайта соержится в Приложении 4.

Я продумал идею сайта - театры древнего мира.

Определился с программой, у меня это brackets. Ссылка на официальный сайт Brackets - http://brackets.io/

Создать первую страницу и написал на ней текст с помощью тегов, (Приложение 1).

Дальше я вставил картинки, которые также есть на моем сайте.

Я разделил свой текст на абзацы, с помощью тегов h6-h1, которые выделяют текст жирным шрифтом.

Дизайн сайта я постарался сделать в едином стиле.

Проверил свой сайт на наличие ошибок.

Я выставил свой сайт на хостинг. Ссылка на хостинг http://gotw.ru/?yclid=938800226604440844



3. Результаты работы

Написание сайта достаточно долгий процесс. Также нужно понимать, что есть структура сайта - заголовок сайта, «тело» и другие элементы. С таблицей основных тегов можно ознакомится в Приложении 1 .

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

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



































Заключение

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

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

















Список источников

1. ru.wikipedia.org

2. http://www.homearchive.ru/site/si0079.html

3. http://cccp-blog.com/sozdanie-saytov/plyusy-i-minusy-cms

4. https://ru.wix.com/my-account/sites/

5. http://rounb.ru/e-lib/rues/pochtovaya.html

6. http://myryazanfoto.ru/Foto/Album_25/Album_25.htm

7. https://yandex.ru/images





























Приложения №1

t1684955994aa.pngt1684955994ab.gif



Приложение 2

t1684955994ac.png

t1684955994ad.png













Приложение 3

t1684955994ae.png

Рис.1

t1684955994af.png

Рис.2

t1684955994ag.png

Рис.3



Приложение 4

t1684955994ah.png







16


Автор материала: И. Ветринцев (10 класс)
Опубликовано


Комментарии (0)

Чтобы написать комментарий необходимо авторизоваться.