Презентация, доклад по информатике на тему Практическая работа. Методы и средства создания сайтов

Содержание

Тема, цель практической работыТема 5. Телекоммуникационные технологии. Представления о технических и программных средствах телекоммуникационных технологий. Интернет – технологии.Название работы: Методы и средства сопровождения сайта образовательной организации. (Создание web-сайта с помощью языка разметки HTML). Цель работы: освоить

Слайд 1Практическая работа
Название работы: «Методы и средства создания и сопровождения сайта»

Практическая работаНазвание работы:  «Методы и средства создания и сопровождения сайта»

Слайд 2Тема, цель практической работы
Тема 5.
Телекоммуникационные технологии. Представления о технических и

программных средствах телекоммуникационных технологий. Интернет – технологии.

Название работы:
Методы и средства сопровождения сайта образовательной организации. (Создание web-сайта с помощью языка разметки HTML).

Цель работы:
освоить приемы создания web-страниц и web-сайтов с помощью языка разметки HTML; оформление дизайна страницы; организация внутренних и внешних гиперссылок.
Тема, цель практической работыТема 5. Телекоммуникационные технологии. Представления о технических и программных средствах телекоммуникационных технологий. Интернет –

Слайд 3Основные уровни Интернета

Основные  уровни  Интернета

Слайд 4Браузер - программа для просмотра Web-страниц.
Opera
Internet Explorer
Mozilla Firefox
Понятие браузера, поисковой системы
Поисковая

система - это компьютерная система, предназначенная для поиска информации. Одно из наиболее известных применений поисковых систем - web -сервисы для поиска текстовой или графической информации во Всемирной паутине. Существуют также системы, способные искать файлы на FTP-серверах, товары в интернет-магазинах, информацию в группах новостей Usenet. Википедия
Браузер - программа для просмотра Web-страниц.OperaInternet ExplorerMozilla FirefoxПонятие браузера, поисковой системыПоисковая система - это компьютерная система, предназначенная

Слайд 5Название работы: Методы и средства создания и сопровождения сайта
Способов для

создания сайта на сегодняшний день великое множество.
Наиболее распространенный метод создания сайтов — это создание сайта на основе страниц HTML.
Огромное количество сайтов во всемирной паутине сконструировано именно по такому типу. Хотя если говорить открыто — возможности при этом весьма ограничены.
Создание динамических страниц, пользуясь только HTML, затруднено.
Но если HTML связать с элементами РНР кода, то может получиться хороший макет сайта. Такие средства создания и сопровождения сайта являются базовыми, их должен знать и умело применять любой вебмастер.

Название работы: Методы и средства создания и сопровождения сайта  Способов для создания сайта на сегодняшний день

Слайд 6Первый способ создания сайта
Если использовать первый способ, то действовать нужно

в следующей последовательности:
1. создание шаблона на языке HTML;
2. копировать код изменяемых элементов и вынести его в отдельный файл, которому присваивается расширение «tpl»;
3. стираем код измененных элементов на страницах (только в такой последовательности);
4.на месте стертого HTML-кода на страницы вводятся только одна строчка РНР-кода. (В строчке этой – прописан путь до того самого файла с расширением «tpl» (такие строчки PHP-кода еще называют «инклудами»)).
5. меняем расширение страничек HTML, то есть мы меняем «html» на «php».
Вот такой вот незамысловатый способ, несомненно, облегчит жизнь начинающему создателю сайтов. Многие начинающие сайтостроители пользуются таким вот способом до сих пор.
Первый способ создания сайта Если использовать первый способ, то действовать нужно в следующей последовательности:1. создание шаблона на

Слайд 7Второй способ создания сайта
Второй способ создания сайтов будет немного посложнее.


Тут используются системы управления контентом (CMS), или как пишут на форумах, для легкой ориентировки — с помощью «движка».
Таких «движков» огромное количество по всей паутине. Большинство из них сегодня платные, но если поискать, то можно найти и бесплатные.

Сравнительно простые - это WORDPRESS и Joomla .

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

Слайд 8Третий способ создания сайта
Третий способ создания сайтов, так сказать для

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

Создание блога не займет много времени — на это потребуется несколько минут (все ориентируются на сайтах по-разному).
Третий способ самый легкий, но и самый незначительный и не уважаемый, поскольку все хотят быть индивидуальными, а не идти под одной гребенкой со многими.
Для начинающих блогеров — это конечно как маленький тренинг. Но конечно таким блогам до WORDPRESS «как до другого края Вселенной».

На этих трёх способах средства создания и сопровождения сайта не заканчиваются.
Многие вебмастера используют сторонние программы (например, Photoshop и другие). 
Третий способ создания сайта Третий способ создания сайтов, так сказать для людей либо ленивых по своей природе,

Слайд 9Сравнение «движков»
Ссылка на источник:
https://webmaster18.ru/pro-cms-wordpress/wordpress-ili-joomla-chto-luchshe/
Явных преимуществ перед поисковыми системами у

WordPress и Joomla нет. Обе CMS попадают в ТОП-10 поиска. НО:
Сравнение «движков» Ссылка на источник: https://webmaster18.ru/pro-cms-wordpress/wordpress-ili-joomla-chto-luchshe/Явных преимуществ перед поисковыми системами у WordPress и Joomla нет. Обе

Слайд 10Что такое плагин?
Плагин (англ. plug-in, от plug in «подключать») — независимо

компилируемый программный модуль, динамически подключаемый к основной программе и предназначенный для расширения и/или использования её возможностей.
Что такое плагин?Плагин (англ. plug-in, от plug in «подключать») — независимо компилируемый программный модуль, динамически подключаемый к

Слайд 11Поиско́вая оптимиза́ция SEO
Поиско́вая оптимиза́ция (англ. search engine optimization, SEO) — комплекс

мер по внутренней и внешней оптимизации для поднятия позиций сайта в результатах выдачи поисковых систем по определённым запросам пользователей.
ru.wikipedia.org›Поисковая оптимизация
Поиско́вая оптимиза́ция SEOПоиско́вая оптимиза́ция (англ. search engine optimization, SEO) — комплекс мер по внутренней и внешней оптимизации

Слайд 12Понятие хостинга
Ссылка: https://ru.hostings.info/termins
Хостинг - это размещение информации (сайтов, файлов) на сервере

и обеспечение к ней доступа через сеть Интернет.

Как работает хостинг сайтов?

Каждый сайт состоит из файлов (.html .php .css и т.д.) и все они хранятся на сервере хостинг-провайдера. Поэтому, когда пользователь введет адрес вашего сайта в браузер и захочет его увидеть, в этот момент на сервере запустятся файлы и в зависимости от того какой в них записан код, пользователь увидит тот или иной дизайн и функционал сайта.

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

Этот файл имеет расширение .sql и тоже хранится на сервере хостинг-провайдера


Понятие хостингаСсылка: https://ru.hostings.info/terminsХостинг - это размещение информации (сайтов, файлов) на сервере и обеспечение к ней доступа через

Слайд 13Обзоры и рейтинг лучших бесплатных хостингов
Ссылка на источник: https://ru.hostings.info/hostings/rating/free-hosting
Здесь показаны наиболее

качественные сервисы, предоставляющие бесплатный хостинг. В то же время рекомендуется обратить внимание на  обзор платного хостинга. Если Ваш сайт претендует хотя бы на каплю серьезности, то в будущем Вы можете быть очень недовольны качеством бесплатных услуг.
Обзоры и рейтинг лучших бесплатных хостинговСсылка на источник: https://ru.hostings.info/hostings/rating/free-hostingЗдесь показаны наиболее качественные сервисы, предоставляющие бесплатный хостинг. В

Слайд 14Обзоры и рейтинг лучших бесплатных хостингов
Ссылка на источник: https://ru.hostings.info/hostings/rating/free-hosting

Обзоры и рейтинг лучших бесплатных хостинговСсылка на источник: https://ru.hostings.info/hostings/rating/free-hosting

Слайд 15Обзоры и рейтинг лучших бесплатных хостингов
Ссылка на источник: https://ru.hostings.info/hostings/rating/free-hosting

Обзоры и рейтинг лучших бесплатных хостинговСсылка на источник: https://ru.hostings.info/hostings/rating/free-hosting

Слайд 16Обзоры и рейтинг лучших бесплатных хостингов
Важно четко понимать какие задачи ставятся перед

вашим будущим или уже существующим сайтом.
Хостинг-провайдеры на самом деле даром никому ничего не дают!

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

P.S. Часть из этих хостеров - платные, но дают хорошим проектам возможность не платить за услуги, например в замен на размещение их небольшого логотипа. Чтобы начать сотрудничать в таком формате - напишите в поддержку.
Обзоры и рейтинг лучших бесплатных хостинговВажно четко понимать какие задачи ставятся перед вашим будущим или уже существующим сайтом.Хостинг-провайдеры

Слайд 17Понятие Web-сайта
Web-сайт – целостная система web- документов, посвящённых одной теме, и

связанных между собой с помощью гиперссылок.
Web- документ, содержащий гиперссылки на другие документы, называется гипертекст.
Понятие Web-сайтаWeb-сайт – целостная система web- документов, посвящённых одной теме, и связанных между собой с помощью гиперссылок.Web-

Слайд 18Web-страница документ, содержащий гиперссылки.
Web-страница мультимедийная
Web-страница Интерактивная
Понятие Web-страницы
Web –страницы имеют расширение

htm или html
Web-страница  документ, содержащий гиперссылки.Web-страница мультимедийнаяWeb-страница ИнтерактивнаяПонятие Web-страницыWeb –страницы имеют расширение  htm или  html

Слайд 19Понятие языка HTML
HTML (HyperText Markup Language) – язык гипертекстовой разметки

для создания web-страниц.

Документ, размеченный с помощью языка HTML, называется:
HTML – документом,
web–документом,
web-страницей.


ВАЖНО!
Главная (первая) web-страница сайта должна иметь имя index.html

Понятие языка HTML HTML (HyperText Markup Language) – язык гипертекстовой разметки для создания web-страниц.Документ, размеченный с помощью

Слайд 20Возможности языка HTML
Язык HTML позволяет:
оформлять текст в виде

абзацев, задавать отступы;
выполнять форматирование текста: задавать тип шрифта, размер текста, начертание (полужирное, курсивное, подчёркивание);
добавлять различные объекты мультимедиа (клипы, видео, аудио);
создавать гиперссылки на другие web-страницы.

Возможности языка HTML   Язык HTML позволяет:оформлять текст в виде абзацев, задавать отступы;выполнять форматирование текста: задавать

Слайд 21Структура HTML-страницы

Структура  HTML-страницы

Слайд 22Виды тэгов
Парные

Непарные

Обязательные
Необязательные


Понятие

тега

Тэг – команда языка разметки HTML, задающая структуру web-страницы.









Виды тэгов   Парные  Непарные   ОбязательныеНеобязательные Понятие тегаТэг – команда языка разметки HTML,

Слайд 23Понятие гиперссылки
Гиперссылка представляет собой ссылку в документе, при наведении курсора

мыши и щелчке левой кнопкой мыши на которой осуществляется переход на другой документ, файл, web-страницу.

Гиперссылка реализует переход между объектами, размещенными в сети Интернет.

Объектами могут быть: web-документ, рисунок, адрес электронной почты, программа.


Понятие гиперссылки Гиперссылка представляет собой ссылку в документе, при наведении курсора мыши и щелчке левой кнопкой мыши

Слайд 24Гиперссылка в html: переход с одного html - документа на другой

Гиперссылка в html: переход  с одного html - документа на другой

Слайд 25ЗАДАНИЕ
для выполнения практической
работы

ЗАДАНИЕ для выполнения практической работы

Слайд 26Задание для выполнения
Создать web-сайт «Информационные ресурсы Интернет», используя язык гипертекстовой разметки

HTML.

СТРУКТУРА WEB- САЙТА (названия web- страниц)

Главная страница (index.html)
Информационные ресурсы сети Интернет (page2.html)
ТЕЛЕКОНФЕРЕНЦИЯ (page3.html)
ПОИСКОВАЯ СИСТЕМА (page4.html)
ФАЙЛОВЫЙ АРХИВ (page5.html)

Задание для выполненияСоздать web-сайт «Информационные ресурсы Интернет», используя язык гипертекстовой разметки HTML.СТРУКТУРА WEB- САЙТА  (названия web-

Слайд 27Структура web- сайта (практическая работа №__)

Структура web- сайта (практическая работа №__)

Слайд 28ВАЖНО знать и выполнять!
Главная (первая) web-страница сайта должна иметь имя index.html



Все web-страницы одного сайта
и иллюстрации должны быть размещены в одной папке.

ВАЖНО знать и выполнять!Главная (первая) web-страница сайта должна иметь имя index.html Все web-страницы одного сайтаи иллюстрации должны

Слайд 29Папка web- сайта (практическая работа №__)

Папка web- сайта (практическая работа №__)

Слайд 30Создание кода главной страницы сайта index.html


Главная страница




ФКПОУ «НТТИ» Минтруда России

ИНФОРМАЦИОННЫЕ РЕСУРСЫ
СЕТИ ИНТЕРНЕТ






Создание кода главной страницы сайта index.html Главная страница ФКПОУ «НТТИ» Минтруда России ИНФОРМАЦИОННЫЕ РЕСУРСЫ  СЕТИ ИНТЕРНЕТ

Слайд 31Гиперссылка: связь главной web-страницы со второй web-страницей page2.html
...



href="/page2.html">Информационные ресурсы сети Интернет





Сайт разработал студент первого курса группы П-1 Иванов Иван Иванович


...

Добавить недостающие обязательные теги.
Места вставки тегов обозначены многоточием ...

Гиперссылка: связь главной web-страницы  со второй web-страницей  page2.html ...Информационные ресурсы сети ИнтернетСайт разработал студент первого

Слайд 32Создайте вторую страницу page2.html


Информационные ресурсы сети Интернет

color=#0000ff>

ЭЛЕКТРОННАЯ ПОЧТА




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







Создайте вторую страницу page2.html Информационные ресурсы сети Интернет ЭЛЕКТРОННАЯ ПОЧТА Это сетевая служба, позволяющая пользователям обмениваться сообщениями

Слайд 33Создайте третью страницу page3.html
...

ТЕЛЕКОНФЕРЕНЦИЯ

Это совещание, участники которого территориально удалены друг от друга,
и которое осуществляется с использованием телекоммуникационных средств (передачи
голоса и видеосвязи).





...

Добавить недостающие обязательные теги.
Места вставки тегов обозначены многоточием ...

Создайте третью страницу page3.html ... ТЕЛЕКОНФЕРЕНЦИЯ  Это совещание, участники которого территориально удалены друг от друга, и

Слайд 34Создайте четвёртую страницу page4.html
...

ПОИСКОВАЯ СИСТЕМА


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





...

Добавить недостающие обязательные теги.
Места вставки тегов обозначены многоточием ...

Создайте четвёртую страницу page4.html ... ПОИСКОВАЯ СИСТЕМА  Это программно-аппаратный комплекс, предоставляющий возможность поиска информации в сети

Слайд 35Создайте пятую страницу page5.html
...

ФАЙЛОВЫЙ АРХИВ

Это

сервер, обеспечивающий обмен файлами по протоколу FTP (freesoft.ru, download.ru).





...

Добавить недостающие обязательные теги.
Места вставки тегов обозначены многоточием ...

Создайте пятую страницу page5.html ...ФАЙЛОВЫЙ АРХИВ Это сервер, обеспечивающий обмен файлами по протоколу FTP (freesoft.ru, download.ru)....Добавить недостающие

Слайд 36Создание страницы page6.html
...

ВСЕМИРНАЯ ПАУТИНА

Это распределенная система,

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








...
Создание страницы page6.html...ВСЕМИРНАЯ ПАУТИНА Это распределенная система, предоставляющая доступ к связанным между собой документам, расположенным на различных

Слайд 37...

НА ГЛАВНУЮ




Вставка кода гиперссылки для перехода на Главную

страницу (index.html)
...НА ГЛАВНУЮВставка кода гиперссылки для перехода  на Главную страницу (index.html)

Слайд 38...

Информационные ресурсы  
Телеконференция  

Поисковая система  
Файловый архив  


...

Вставка гиперссылок с главной страницы на все второстепенные страницы

...Информационные ресурсы  Телеконференция   Поисковая система  Файловый архив  ...Вставка гиперссылок с главной страницы на все второстепенные страницы

Слайд 39 План выполнения задания

Выбрать тему для Вашего сайта;
Придумать (сформулировать)

название сайта;
Подобрать теоретический материал для Вашего сайта и выбрать иллюстрации;
Придумать (разработать) дизайн сайта, использование графики;
Продумать структуру сайта:
количество Web-страниц Вашего сайта ,
связь (гиперссылки) между Web-страницами сайта.
Разместить созданный сайт на любом бесплатном хостинге
ukoz.ru narod.ru
Проверить работоспособность.


Домашнее задание

План выполнения задания Выбрать тему для Вашего сайта;Придумать (сформулировать) название сайта;Подобрать теоретический материал для Вашего

Слайд 40
Контрольные вопросы
Какие способы создания сайтов Вы знаете? Опишите кратко

каждый из способов.
Для чего предназначен хостинг?
Что называют web-сайтом?
Что называют web-страницей?
Привести определение гиперссылки.
Как создать web-страницу с помощью языка разметки HTML?
Как отредактировать HTML-код?
Контрольные вопросыКакие способы создания сайтов Вы знаете? Опишите кратко каждый из способов.Для чего предназначен хостинг?

Слайд 41Источники информации
 Цветкова М. С. Великович Л. С. Информатика и ИКТ. Учебник

для ССУЗов. 2015 год. Глава 6

https://infourok.ru/prezentaciya-po-informatike-na-temu-metodi-i-sredstva-sozdaniya-i-soprovozhdeniya-sayta-2554034.html
http://webseotop.ru/wiki/sredstva-sozdaniya-i-soprovozhdeniya-sayta/
https://fs00.infourok.ru/images/doc/226/34818/1/img1.jpg
http://900igr.net/up/datas/117552/005.jpg
http://images.myshared.ru/5/459221/slide_12.jpg

Источники информации Цветкова М. С. Великович Л. С. Информатика и ИКТ. Учебник для ССУЗов. 2015 год. Глава 6

Что такое shareslide.ru?

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


Для правообладателей

Яндекс.Метрика

Обратная связь

Email: Нажмите что бы посмотреть