Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.

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

Презентация на тему по Информатике Создание сайта. Инструкция и практическое задание (9 класс)

Содержание

2. Прежде чем приступить к работе над собственным
3. Начало работыДля создания web-страниц, переведём OpenOffice –
4. Начало работы
5. Сохранить страницу.Для сохранения Web страницы, левой кнопкой
6. Файлу Web-страницы присвоить имя page1-1.htm. Запустить браузер
7. Форматирование страницыФон страницы можно задать следующим образом
8. Если для данной страницы, я хочу задать
9. http://www.weblabla.ru/examples/html/examples_main.htmlСсылка на вспомогательный материал по работе с сайтомФорматирование страницы
10. Основные тэги HTML. Первая страницаЗапустить текстовый редакторввести
11. - Сообщает браузеру что этот документ
12. Контент сайта пишется в теле документа между
15. ЗаголовкиЗаголовки различных уровней:Заголовок первого уровня…Заголовок шестого уровняЦифры
16. Форматирование шрифтаВвести в текст страницы тэги, определяющие
17. Форматирование шрифтаТеги делают текст жирным,а наклонным.Сильное выделение
18. Форматирование шрифтаЧто бы установить цвет шрифта надо
19. Форматирование шрифтаЕсли вы хотите установить размер шрифта
20. Форматирование шрифтаРасположить текст посередине можно с помощью тега Расположить слева= справа=
21. Форматирование шрифтаПараграф = Выравнивание = значения= left
22. Форматирование шрифтаНовая строка =( перевод строки)Убрать выравнивание = Горизонтальный разделитель =
23. Форматирование шрифтаЕсли вы хотите сделать пробел нужной
24. Пример написания шрифтаКод:Пример написания шрифта
25. СпискиВнести в текст страницы тэги, задающие списки нумерованные и ненумерованные, а также списки определений.
26. СпискиВнести в текст страницы тэги, задающие списки
27. ТаблицыПример кода самой простой таблицы:СодержаниеКстати, перевод строки
28. Внесение изменений и дополнений в Web-страницуВ процессе
29. Т.к. это наш первый сайт и мы
30. Основные подходы к созданию сайта Необходимо ответить
31. Практическое задание:Разделиться на группы (примерно по 3
32. Например, темы проектов:“Мой город” - история, проблемы,
33. Цель задания: подготовить информационно-содержательное наполнение сайта, и
34. Этапы работы:1. Определить цель создания сайта.2. Определить
35. Пояснения к выполнению задания:1. Сайт может быть
36. Пояснения к выполнению задания:4. В качестве форм
37. Скачать презентацию
38. Похожие презентации

Прежде чем приступить к работе над собственным веб-сайтом, вспомним:Какие функции выполняют сервисные службы WWW?Назначение языка HTMLТеги HTMLФункциональные разделы документаФорматирование HTML документа Ссылки на другие документы и файлыСпискиГрафикаФреймыЗвук Инструментальные средства создания Web-страниц

Главная
Информатика
Презентация по Информатике Создание сайта. Инструкция и практическое задание (9 класс)

Создание сайта (с помощью текстового процессора) Подготовил: Орлова О.Г.Учитель Информатики и ИКТ

Прежде чем приступить к работе над собственным веб-сайтом, вспомним:Какие функции выполняют сервисные

Начало работыДля создания web-страниц, переведём OpenOffice – Writer, в режим создания html

Сохранить страницу.Для сохранения Web страницы, левой кнопкой мышки, жмём меню “Файл” -

Файлу Web-страницы присвоить имя page1-1.htm. Запустить браузер и открыть созданный файл командой

Форматирование страницыФон страницы можно задать следующим образом - выбираем в меню программы

Если для данной страницы, я хочу задать фон рисунком, то картинку для

http://www.weblabla.ru/examples/html/examples_main.htmlСсылка на вспомогательный материал по работе с сайтомФорматирование страницы

Основные тэги HTML. Первая страницаЗапустить текстовый редакторввести HTML-код, задающий структуру Web-страницы:

- Сообщает браузеру что этот документ написан на языке HTML. -

Контент сайта пишется в теле документа между тегами и Напишем любой текст

Презентация по Информатике Создание сайта. Инструкция и практическое задание (9 класс)

ЗаголовкиЗаголовки различных уровней:Заголовок первого уровня…Заголовок шестого уровняЦифры между 1 и 6 =

Форматирование шрифтаВвести в текст страницы тэги, определяющие начертание шрифта и горизонтальных разделительных

Форматирование шрифтаТеги делают текст жирным,а наклонным.Сильное выделение и жирный шрифт Выделение и

Форматирование шрифтаЧто бы установить цвет шрифта надо в теге задать цвет шрифта:

Форматирование шрифтаЕсли вы хотите установить размер шрифта для всей страницы то пишем

Форматирование шрифтаРасположить текст посередине можно с помощью тега Расположить слева= справа=

Форматирование шрифтаПараграф = Выравнивание = значения= left - слева,right - справа,center -

Форматирование шрифтаНовая строка =( перевод строки)Убрать выравнивание = Горизонтальный разделитель =

Форматирование шрифтаЕсли вы хотите сделать пробел нужной длины то вставьте в текст

Пример написания шрифтаКод:Пример написания шрифта

СпискиВнести в текст страницы тэги, задающие списки нумерованные и ненумерованные, а также списки определений.

СпискиВнести в текст страницы тэги, задающие списки нумерованные и ненумерованные, а также

ТаблицыПример кода самой простой таблицы:СодержаниеКстати, перевод строки после каждого тега вебмастеры ставят

Внесение изменений и дополнений в Web-страницуВ процессе создания web-страницы приходится добавлять новые

Т.к. это наш первый сайт и мы не планируем на нем зарабатывать,

Основные подходы к созданию сайта Необходимо ответить на вопросы: В чем причина

Практическое задание:Разделиться на группы (примерно по 3 человека); дать имя группе (исходя

Например, темы проектов:“Мой город” - история, проблемы, перспективы. “Мои интересы” - как

Цель задания: подготовить информационно-содержательное наполнение сайта, и определить основные формы представления информации.Программные

Этапы работы:1. Определить цель создания сайта.2. Определить предполагаемый контингент посетителей сайта.3. В

Пояснения к выполнению задания:1. Сайт может быть создан с различными целями, в

Пояснения к выполнению задания:4. В качестве форм предоставления информации можно рассмотреть обычную

Источники:http://sitesaid.ru/siteprost.htmlhttp://www.weblabla.ru/examples/html/examples_main.htmlhttp://festival.1september.ru/articles/514032/http://webdirect.at.ua/blog/html_kody_samye_chasto_ispolzuemye_html_tegi/2013-04-29-6

Слайды презентации

Слайд 2 Прежде чем приступить к работе над собственным веб-сайтом,

Прежде чем приступить к работе над собственным веб-сайтом, вспомним:Какие функции выполняют

вспомним:
Какие функции выполняют сервисные службы WWW?
Назначение языка HTML
Теги HTML
Функциональные

разделы документа
Форматирование HTML документа
Ссылки на другие документы и файлы
Списки
Графика
Фреймы
Звук
Инструментальные средства создания Web-страниц

Слайд 3 Начало работы
Для создания web-страниц, переведём OpenOffice – Writer,

Начало работыДля создания web-страниц, переведём OpenOffice – Writer, в режим создания

в режим создания html документов (html страниц).
Делается это очень

просто, кликаем: “Файл” –> “Создать” -> “Документ HTML”:

Слайд 4 Начало работы

Слайд 5 Сохранить страницу.
Для сохранения Web страницы, левой кнопкой мышки,

жмём меню “Файл” - “Сохранить как”.
В появившемся окне,

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

Слайд 6 Файлу Web-страницы присвоить имя page1-1.htm.

Запустить браузер и

Файлу Web-страницы присвоить имя page1-1.htm. Запустить браузер и открыть созданный файл

открыть созданный файл командой [Файл - Открыть]. В заголовке

окна браузера высвечивается Первое знакомство с тэгами HTML. Основная часть окна браузера - пуста.

Слайд 7 Форматирование страницы
Фон страницы можно задать следующим образом -

Форматирование страницыФон страницы можно задать следующим образом - выбираем в меню

выбираем в меню программы Writer: “Формат” – “Страница” –

“Фон”
Во-первых, если в окне “Фон” выбрать тип фона: “Цвет”, то фон страницы мы можем задать цветом, выбрав его из таблицы цветов.
Во-вторых, если в окне “Фон” выбрать тип фона: “Графический объект”, то фон страницы мы можем задать рисунком.

Слайд 8 Если для данной страницы, я хочу задать фон

Если для данной страницы, я хочу задать фон рисунком, то картинку

рисунком, то картинку для фона, которую возьмём в галерее

установленного пакета OpenOffice.org по адресу
- C:\Program Files\OpenOffice.org 3\Basis\share\gallery\
- “Открыть” и “OK”

Форматирование страницы

Слайд 9 http://www.weblabla.ru/examples/html/examples_main.html

Ссылка на вспомогательный материал по работе с сайтом

Форматирование

страницы

Слайд 10 Основные тэги HTML. Первая страница
Запустить текстовый редактор
ввести HTML-код,

задающий структуру Web-страницы:
Первое знакомство с тэгами HTML

Ввести команду [Файл - Сохранить]

Слайд 11 - Сообщает браузеру что этот документ написан

на языке HTML.
- Начало заголовка.(не виден на странице).

- (Для поисковых систем) - Здесь пишется название сайта.
- Здесь пишутся мета - теги.
- Конец заголовка.
- Начало тела документа(для содержимого страницы).
- Конец тела документа.
- Конец HTML.

Слайд 12 Контент сайта пишется в теле документа между тегами

Контент сайта пишется в теле документа между тегами и Напишем любой

и
Напишем любой текст к примеру "Создание собственного

сайта" и вставим фото

.
Вместо com (8).gif выберите фото на своем компьютере , поместите в ту же папку где находится сайт и замените имя файла com (8).gif на свое.
Расположим текст и фото по центру тегом и добавим в тело цвет страницы bgcolor="#ceceff"

Слайд 13

Слайд 14

Слайд 15 Заголовки
Заголовки различных уровней:
Заголовок первого уровня…Заголовок шестого уровня
Цифры между

1 и 6 = 2,3,4,5= создают заголовок промежуточных размеров.
При

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

Слайд 16 Форматирование шрифта
Ввести в текст страницы тэги, определяющие начертание

Форматирование шрифтаВвести в текст страницы тэги, определяющие начертание шрифта и горизонтальных

шрифта и горизонтальных разделительных линий.
Для изменения размера шрифта надо

заключить текст в тег текст, размер устанавливается от малого 1 до большого 7.

Слайд 17 Форматирование шрифта
Теги делают текст жирным,а наклонным.
Сильное

Форматирование шрифтаТеги делают текст жирным,а наклонным.Сильное выделение и жирный шрифт Выделение

выделение и жирный шрифт
Выделение и курсив= . Тег

предназначен для сохранения форматирования,при вставке текста из другого редактора.

Слайд 18 Форматирование шрифта
Что бы установить цвет шрифта надо в

Форматирование шрифтаЧто бы установить цвет шрифта надо в теге задать цвет

теге задать цвет шрифта: color="#?" Цвет шрифта устанавливается в

формате цветов HTML, к примеру "#FFFFFF". Можно объединить цвет и размер шрифта в одном теге . Запись этого параметра выглядит так: текст.

Слайд 19 Форматирование шрифта
Если вы хотите установить размер шрифта для

Форматирование шрифтаЕсли вы хотите установить размер шрифта для всей страницы то

всей страницы то пишем со значениями ?=

от 1 до 7; по умолчанию 3. Выбор шрифта=, самые распространенные Arial,Tahoma,Verdana,Times New Roman,Georgia.

Слайд 20 Форматирование шрифта
Расположить текст посередине можно с помощью тега

Расположить слева=

справа=

Слайд 21 Форматирование шрифта
Параграф =
Выравнивание = значения=
left

- слева,
right - справа,
center - по центру,
jastify - по

ширине.

Слайд 22 Форматирование шрифта
Новая строка =
( перевод строки)
Убрать выравнивание =

Горизонтальный разделитель =

Слайд 23 Форматирование шрифта
Если вы хотите сделать пробел нужной длины

Форматирование шрифтаЕсли вы хотите сделать пробел нужной длины то вставьте в

то вставьте в текст символ
нужное количество раз.
Выделение

цитат курсивом =
Выделение текста подчеркиванием =-предпочтительнее,
и
Нижний индекс= ,запись=H₂SO₄
Верхний индекс,запись=m³

Слайд 24 Пример написания шрифта
Код:
Пример

size="4" color="#0000FF"> написания шрифта

Слайд 25 Списки
Внести в текст страницы тэги, задающие списки нумерованные

и ненумерованные, а также списки определений.

Слайд 26 Списки
Внести в текст страницы тэги, задающие списки нумерованные

СпискиВнести в текст страницы тэги, задающие списки нумерованные и ненумерованные, а

и ненумерованные, а также списки определений.

Первый пункт списка
Второй пункт

списка

Третий пункт списка

Слайд 27 Таблицы
Пример кода самой простой таблицы:

Содержание

Кстати, перевод строки после

ТаблицыПример кода самой простой таблицы:СодержаниеКстати, перевод строки после каждого тега вебмастеры

каждого тега вебмастеры ставят только для удобства редактирования html-кода,

этот же код таблицы можно вставить так:

Содержание

Слайд 28 Внесение изменений и дополнений в Web-страницу
В процессе создания

Внесение изменений и дополнений в Web-страницуВ процессе создания web-страницы приходится добавлять

web-страницы приходится добавлять новые тэги и просматривать получаемый результат:

Активизировать текстовый редактор с открытой в нем редактируемой Web-страницей. Внести в содержимое страницы необходимые изменения и сохранить новый вариант страницы, выполнив команду меню [Файл - Сохранить].
Активизировать браузер с открытым в нем предыдущим вариантом страницы.
Щелкнуть по кнопке Обновить. В окне браузера отобразится обновленная Web-страница

Слайд 29 Т.к. это наш первый сайт и мы не

Т.к. это наш первый сайт и мы не планируем на нем

планируем на нем зарабатывать, то разместить его можно на

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

Слайд 30 Основные подходы к созданию сайта
Необходимо ответить на вопросы:

Основные подходы к созданию сайта Необходимо ответить на вопросы: В чем

В чем причина возникновения интереса к Интернет-ресурсам?
Какие возможности предоставляет

Интернет в области Web-конструирования?
На кого должна быть ориентирована страница - на создателя или пользователя?
Какие цели чаще всего преследуют создатели различных сайтов?
Попробуйте классифицировать по различным основаниям сайты, расположенные в сети

Слайд 31 Практическое задание:
Разделиться на группы (примерно по 3 человека);

Практическое задание:Разделиться на группы (примерно по 3 человека); дать имя группе

дать имя группе (исходя из выбранной темы);
ТЕМЫ ЗАДАНИЯ: “Мой

город”, “Моя семья”, “Мои интересы”, “Моя малая родина”, “Мои питомцы”, “Мой класс”.

Слайд 32 Например, темы проектов:
“Мой город” - история, проблемы, перспективы.

Например, темы проектов:“Мой город” - история, проблемы, перспективы. “Мои интересы” -

“Мои интересы” - как я смогу реализовать себя.
“Мой

класс” – об одноклассниках, успехи, взаимопомощь, досуг, интересы.

Слайд 33 Цель задания: подготовить информационно-содержательное наполнение сайта, и определить

Цель задания: подготовить информационно-содержательное наполнение сайта, и определить основные формы представления

основные формы представления информации.
Программные средства: текстовый процессор Writer, НТМL,

FrontPage (по выбору группы)

Слайд 34 Этапы работы:
1. Определить цель создания сайта.
2. Определить предполагаемый

Этапы работы:1. Определить цель создания сайта.2. Определить предполагаемый контингент посетителей сайта.3.

контингент посетителей сайта.
3. В соответствии с целью создания сайта

и предполагаемым контингентом продумать содержание сайта.
4. Определить возможные формы представления информации на сайте.
5. Сформулировать названия основных рубрик (страниц) сайта.
6. В текстовом процессоре Writer подготовить концепцию создания сайта.

Слайд 35 Пояснения к выполнению задания:
1. Сайт может быть создан

Пояснения к выполнению задания:1. Сайт может быть создан с различными целями,

с различными целями, в связи с этим будет разным

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

Слайд 36 Пояснения к выполнению задания:
4. В качестве форм предоставления

Пояснения к выполнению задания:4. В качестве форм предоставления информации можно рассмотреть

информации можно рассмотреть обычную текстовую информацию, фотографии, телеконференции (продумайте

тему), чат, доску объявлений (продумайте тему), фотографии, работы учащихся (например открытки, выполненные во Flash) и др.
5. В соответствии с отобранным материалом продумайте названия страниц (ссылок, пунктов меню) сайта.
6. Откройте текстовый процессор Writer и подготовьте письменную концепцию сайта, кратко описав все этапы работы (цель, контингент посетителей, формы представления информации, названия рубрик).