Презентация "Создание веб сайта" (9 класс) по информатике – проект, доклад

Скачать презентацию (0.47 Мб) Смотреть похожие презентации Конспекты для презентации

Слайд 1

Слайд 2

Слайд 3

Слайд 4

Слайд 5

Слайд 6

Слайд 7

Слайд 8

Слайд 9

Слайд 10

Слайд 11

Слайд 12

Слайд 13

Слайд 14

Слайд 15

Слайд 16

Слайд 17

Слайд 18

Слайд 19

Слайд 20

Слайд 21

Слайд 22

Слайд 23

Слайд 24

Слайд 25

Слайд 26

Слайд 27

Слайд 28

Слайд 29

Слайд 30

Слайд 31

Слайд 32

Слайд 33

Слайд 34

Слайд 35

Слайд 36

Слайд 37

Слайд 38

Презентацию на тему "Создание веб сайта" (9 класс) можно скачать абсолютно бесплатно на нашем сайте. Предмет проекта: Информатика. Красочные слайды и иллюстрации помогут вам заинтересовать своих одноклассников или аудиторию. Для просмотра содержимого воспользуйтесь плеером, или если вы хотите скачать доклад - нажмите на соответствующий текст под плеером. Презентация содержит 38 слайд(ов).

Скачать презентацию (0.47 Мб) Смотреть похожие презентации Конспекты для презентации

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

Слайд 1

Создание Web-сайта

Слайд 2

Структура Web-сайта

Тема урока:

Слайд 3

Контейнеры

Код страницы Заголовок Название Web-страницы Основное содержание страницы

Слайд 4

Назовем Web-страницу «Компьютер»

Компьютер

Слайд 5

Поместим на страницу текст «Все о компьютерах»

Все о компьютерах

Слайд 6

Текст программы:

Компьютер Все о компьютерах

Слайд 7

Сохранять Web-страницы нужно с расширением .html

Например, Мой сайт .html Принято сохранять титульный файл сайта под именем Index.html

Слайд 8

Форматирование текста:

Размер шрифта в заголовках задается тэгами от Н1 до Н6:

Все о компьютерах

Тип выравнивания заголовка задает атрибут ALIGN

Слайд 9

Абзацы:

Разделение текста на абзацы производится контейнером

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

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

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

Слайд 10

Программирование Web-сайта

Компьютер

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

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

Слайд 11

Вставка рисунка

Форматы .GIF, .JPG, .PNG. Тэг с атрибутом SRC, который указывает место хранения файла (путь к файлу). Расположение рисунка относительно текста –атрибут ALIGN: TOP MIDDLE BOTTON LEFT RIGHT Вставить рисунок в контейнер перед абзацем текста.

Слайд 12

«компьютер" Или

Слайд 13

Создание других страниц сайта

Заголовок страницы Создайте страницы Программы, Словарь, Комплектующие, Анкета. Сохраните их в файлах с названиями: software.html glossary.html hardware.html anketa.html

Слайд 14

Гиперссылки

Гиперссылки состоят из указателя ссылки и адресной части ссылки. Адресная часть – URL – адрес документа. Принято размещать гиперссылки в нижней части титульной страницы, поэтому разместим их после введенного текста в новом абзаце. В качестве указателя гиперссылок выберем названия страниц нашего сайта: Программы, Словарь, Комплектующие, Анкета. Указатели гиперссылок разделяются пробелами ( ) . Для каждой гиперссылки определим адрес перехода, (контейнер ) с атрибутом HREF, значением которого является URL – адрес.

Слайд 15

Программы] [Словарь] [Комплектующие] [Анкета]

Слайд 16

Адрес электронной почты вставляется так:

Полезно на странице помещать ссылку на адрес электронной почты, по которому посетители могут связаться с администрацией сайта. E-mail: mailbox@provaider.ru По щелчку мыши по ссылке на адрес электронной почты будет открываться программа Outlook Express, где в строке Кому будет указан заданный в ссылке адрес

Слайд 18

Создание списка нумерованного

Список располагается внутри контейнера

, а каждый элемент списка – тэгом

. С помощью атрибута TYPE тэга <ОL> можно задать вид нумерации: арабские цифры по умолчанию, “I” (римские цифры), “а” (строчные буквы). Открыть в Блокноте файл Software.html и добавить следующий HTML-код, задающий список:

Системные программы
Прикладные программы
Системы программирования

Слайд 19

Создание списка маркированного

Создадим теперь вложенный маркированный список для одного из элементов основного списка. Список располагается внутри контейнера

, а каждый элемент списка определяется также тэгом

. С помощью атрибута TYPE тэга

Прикладные программы.

Слайд 20

Создание нумерованного списка

Системные программы
Прикладные программы
Системы программирования

Слайд 21

Создание вложенного списка

ТЕКСТОВЫЕ РЕДАКТОРЫ
ГРАФИЧЕСКИЕ РЕДАКТОРЫ
ЭЛЕКТРОННЫЕ ТАБЛИЦЫ
СИСТЕМЫ УПРАВЛЕНИЯ БАЗАМИ ДАННЫХ.

Слайд 23

Словарь компьютерных терминов:

Контейнер списка определений

, Внутри него термин – тэг

определение -

Процессор Центральный процессор, производящий вычисления в двоичном коде.: Центральный процессор, производящий вычисления в двоичном коде.
Оперативная память Устройство, в котором хранятся программы и данные: Устройство, в котором хранятся программы и данные

Слайд 25

Таблицы

Таблица задается контейнером

, внутри которого содержится описание структуры таблицы и ее содержимого. Любая таблица состоит из строк, которые задаются контейнером , в который помещается описание ячейки. Формат ячейки и ее содержание помещается в контейнер , а заголовки ячеек в контейнер . Толщина разделительных линий задается атрибутом BORDER, а для выравнивания информации - атрибут ALIGN.

Слайд 26

Вставить таблицу в файл hardware .html

НАИМЕНОВАНИЕ	ТИП	ИЗГОТОВИТЕЛЬ	ЦЕНА
ПРОЦЕССОР	PENTIUM	INTEL	2500 РУБЛЕЙ
МАТЕРИНСКАЯ ПЛАТА	Abit	GIGABAIT	2700 РУБЛЕЙ

Слайд 28

Формы на Web- страницах

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

Текстовые поля задаются тэгом со значением атрибута type=“text”. Атрибут NAME является обязательным и служит для идентификации полученной информации, Атрибут SIZE задает длину поля ввода данных. Для того, чтобы анкета читалась необходимо разделять строки с помощью тэга перевода строки
.

Слайд 29

Открыть в Блокноте файл Anketa.html и добавить следующий HTML-код, задающий текстовые поля для ввода данных. Просмотреть результат в браузере:

Слайд 30

Переключатели

Пользователю предоставляется возможность отнести себя к одной из групп пользователей: учащийся, студент, учитель. Переключатели создается тэгом со значением атрибута type=“radio”. Все элементы в группе должны иметь одинаковые значения атрибута Name=“Group” Другим обязательным атрибутом должно быть VALUE, принимающий, в нашем случае, значения "schoolboy“, "student“, "teacher"

Слайд 31

Открыть в Блокноте файл Anketa.html и добавить следующий HTML-код, задающий группу переключателей. Просмотреть результат в браузере:

Укажите, к какой группе пользователей вы себя относите:
учащийся
студент
учитель

Слайд 32

Флажки

Флажки задаются тэгом со значением атрибута type=“checkbox” Флажки, объединенные в группу могут иметь одинаковые значения атрибута Name=“Group” Другим обязательным атрибутом должно быть VALUE, принимающий, в нашем случае, значения “www“, “e-mail“, “ftp“ Добавить HTML-код, задающий флажки для выбора нескольких элементов. Просмотреть результат в браузере:

Слайд 33

Пример:

Какие из сервисов Интернета вы используете наиболее часто:
www
e-mail
FTP

Слайд 34

Поля списков

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

Слайд 35

Открыть в Блокноте файл Anketa.html и добавить следующий HTML-код, задающий раскрывающий список. Просмотреть результат в браузере:

Слайд 36

Текстовая область

Создается с помощью тэга с обязательными атрибутами: NAME, задающим имя области, ROWS – число строк , COLS – число столбцов. добавить HTML-код, создающий текстовую область. Просмотреть результат в браузере: Какую еще информацию вы хотели бы видеть на нашем сайте? <BR> <TEXTAREA NAME="resume" ROWS=4 COLS=30>

Слайд 37

Отправка формы

Отправка введенной в форму информации, а также очистка полей от уже введенной информации осуществляется кнопками. Для создания кн., отправляющей инф-ю, атрибуту TYPE=“submit“, value=«Отправить». Для создания кн., очищающую инф-ю, атрибуту TYPE=“reset“, value=«Очистить». добавить HTML-код, создающий текстовую область. Просмотреть результат в браузере:

Слайд 38

Для того, чтобы при щелчке по кн. «Отправить» данные из формы передавались на сервер и там обрабатывались необходимо указать адрес и программу обработки. Для этого используется атрибут ACTION контейнера

Список похожих презентаций

Создание веб-сайта

Гипертекст (англ. hypertext) – это текст, содержащий гиперссылки. Гиперссылка (англ. hyper reference) – это «активная» ссылка на другой объект (часть ...

Создание сайта в системе ucoz

Общая схема создания wiki-страниц. Регистрация на портале. Для того, чтобы работать с контентом на сайте «Делового квартала » необходимо зарегистрироваться. ...

Создание сайта с помощью конструктора UCOZ

Спасибо за внимание. ...

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

Web-страница Web-сайт Браузер URL адрес Гипертекст. Что такое ? Создание Web сайта с помощью Google. Как создать сайт? Задачи урока:. освоить технологию ...

Создание сайта

Мой сайт по формату является «сайтом-визиткой.» Что же это такое? Сайт-визи́тка (англ. promo site) — небольшой сайт, как правило, состоящий из одной ...

Создание сайта

2 способа: Ручной. С использованием конструктора. В чем причина возникновения интереса к интернет-ресурсам? Существуют порталы, которые предоставляют ...

Создание сайта. Сервисы Google

Шаг 1. Структура сайта. Определяем основную структуру сайта, т.е. пункты будущего меню. Например, Главная Визитная карточка Портфолио Мои разработки ...

Создание простейшей веб-страницы

Откройте редактор Блокнот и наберите:. Тестовая страница Эта страница является тестовой Сохраните документ с расширением .html или .htm. Теги для ...

Создание профессионального сайта для «чайников»

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

Создание веб-документов

Структура. заголовок, служебная часть содержание веб-документа . Шаг 1. Создаем папку D:\первые шаги\ Откроем Блокнот (notepad) и скопируем ...

Создание веб-страниц в WORD

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

Создание статической веб-страницы, содержащей текст

Давайте вспомним, какие услуги предоставляет Internet? Какая из перечисленных услуг является самой популярной? WWW – всемирная паутина, которая позволяет ...

Создание блога и сайта

Создание блога. Первым шагом будет зайти или создать аккаунт в. Затем нажимаем на кнопку и выбираем оранжевый значок Blogger. Перед нами откроется ...

Создание Web-сайта с помощью MS Word

Цель работы:. освоение приемов создания Web-страниц и Web-сайтов с помощью текстового процессора MS Word; оформление дизайна страницы; организация ...

Создание Web-сайта

Создание Web-сайта «Компьютер». HTML-код страницы помещается внутрь контейнера Web-страница разделяется на две логические части: заголовок и содержание. ...

Создание школьного сайта

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

Создание программы на языке Free Pascal в среде разработки KDevelop

Cреда разработки KDevelop. Интегрированная среда разработки KDevelop преназдначена для разработки программных систем на многих языках программирования, ...

Размещение сайта в сети Интернет

Размещение сайта в сети Интернет Файлы сайта размещают на сервере провайдера и производят нужные настройки. На этом этапе сайт пока закрыт для посетителей. ...

Создание презентаций в Microsoft Power Point

Вы узнали:. Зачем необходимо прикладное приложение Power Point; Каковы возможности Power Point по подготовке презентаций; Какова область применения ...

Конспекты

Советы как сделать хороший доклад презентации или проекта

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