1267691
столько раз учителя, ученики и родители
посетили сайт «Инфоурок»
за прошедшие 24 часа
+Добавить материал
и получить бесплатное
свидетельство о публикации
в СМИ №ФС77-60625 от 20.01.2015
Дистанционные курсы профессиональной переподготовки и повышения квалификации для педагогов

Дистанционные курсы для педагогов - курсы профессиональной переподготовки от 5.520 руб.;
- курсы повышения квалификации от 1.200 руб.
Престижные документы для аттестации

ВЫБРАТЬ КУРС СО СКИДКОЙ ДО 70%

ВНИМАНИЕ: Скидка действует ТОЛЬКО сейчас!

(Лицензия на осуществление образовательной деятельности № 5201 выдана ООО "Инфоурок")

ИнфоурокИнформатикаПрезентацииПрезентация по информатике "Создание Web-сайта"

Презентация по информатике "Создание Web-сайта"

библиотека
материалов
 Презентация по информатике Создание Web-сайта Шаронова С.М.
Структура Web-сайта
Контейнеры Код страницы  Заголовок  Название Web-страницы  Основное содержани...
 Назовем Web-страницу «Компьютер»   Компьютер
 Поместим на страницу текст «Все о компьютерах»  Все о компьютерах
Текст программы:   Компьютер   Все о компьютерах
Сохранять Web-страницы нужно с расширением .html Например, Мой сайт .html Пр...
Форматирование текста: Размер шрифта в заголовках задается тэгами от Н1 до Н...
Абзацы: Разделение текста на абзацы производится контейнером . Для каждого а...
 Программирование Web-сайта   Компьютер
Вставка рисунка Форматы .GIF, .JPG, .PNG. Тэг  с атрибутом SRC, который указы...
Вставка рисунка   Или
Создание других страниц сайта   Заголовок страницы   Создайте страницы Програ...
Гиперссылки Гиперссылки состоят из указателя ссылки и адресной части ссылки....
Гиперссылки
Адрес электронной почты вставляется так: Полезно на странице помещать ссылку...
Создание списка нумерованного Список располагается внутри контейнера  , а ка...
Создание списка маркированного Создадим теперь вложенный маркированный списо...
Создание нумерованного списка    Системные программы Прикладные программы Си...
Создание вложенного списка   ТЕКСТОВЫЕ РЕДАКТОРЫ  ГРАФИЧЕСКИЕ РЕДАКТОРЫ  ЭЛЕ...
Словарь компьютерных терминов: Контейнер списка определений ,  Внутри него те...
Таблицы Таблица задается контейнером , внутри которого содержится описание ст...
Вставить таблицу в файл hardware .html   НАИМЕНОВАНИЕ ТИП ИЗГОТОВИТЕЛЬ ЦЕНА...
Формы на Web- страницах Формы включают в себя текстовые поля, раскрывающиеся...
Открыть в Блокноте файл Anketa.html и добавить следующий HTML-код, задающий т...
Переключатели Пользователю предоставляется возможность отнести себя к одной и...
Открыть в Блокноте файл Anketa.html и добавить следующий HTML-код, задающий г...
Флажки Флажки задаются тэгом  со значением атрибута type=“checkbox” Флажки, о...
Пример: Какие из сервисов Интернета вы используете наиболее часто:  www e-mai...
Поля списков Теперь выясним, какой из браузеров предпочитает посетитель сайта...
Открыть в Блокноте файл Anketa.html и добавить следующий HTML-код, задающий р...
Текстовая область Создается с помощью тэга  с обязательными атрибутами: NAME,...
Отправка формы Отправка введенной в форму информации, а также очистка полей о...
Для того, чтобы при щелчке по кн. «Отправить» данные из формы передавались на...
Когда же был создан язык программирования Basic Язык программирования Basic б...
Алфавит языка Алфавит языка Basic представляет собой таблицу символов ASCII....

Описание презентации по отдельным слайдам:

1 слайд  Презентация по информатике Создание Web-сайта Шаронова С.М.
Описание слайда:

Презентация по информатике Создание Web-сайта Шаронова С.М.

2 слайд Структура Web-сайта
Описание слайда:

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

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

Контейнеры Код страницы <HTML></HTML> Заголовок <HEAD></HEAD> Название Web-страницы <TITLE></TITLE> Основное содержание страницы <BODY></BODY>

4 слайд  Назовем Web-страницу «Компьютер»   Компьютер
Описание слайда:

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

5 слайд  Поместим на страницу текст «Все о компьютерах»  Все о компьютерах
Описание слайда:

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

6 слайд Текст программы:   Компьютер   Все о компьютерах
Описание слайда:

Текст программы: <HTML> <HEAD> <TITLE>Компьютер</TITLE> </HEAD> <BODY> Все о компьютерах </BODY> </HTML>

7 слайд Сохранять Web-страницы нужно с расширением .html Например, Мой сайт .html Пр
Описание слайда:

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

8 слайд Форматирование текста: Размер шрифта в заголовках задается тэгами от Н1 до Н
Описание слайда:

Форматирование текста: Размер шрифта в заголовках задается тэгами от Н1 до Н6: <H1> Все о компьютерах </H1> Тип выравнивания заголовка задает атрибут ALIGN <H1 ALIGN="CENTER”>Все о компьютерах </H1> Тэг FONT задает параметры форматирования любого фрагмента текста. Атрибут FACE задает тип шрифта (FACE=“Arial”) SIZE – размер (SIZE=10) COLOR – цвет (COLOR=“blue”)‏ Для отделения заголовка от остального содержания страницы горизонтальной линией используется тэг <HR> Задать синий цвет заголовка: <FONT COLOR=“BLUE"> <H1 ALIGN="CENTER”> Все о компьютерах </H1> </FONT> <HR>

9 слайд Абзацы: Разделение текста на абзацы производится контейнером . Для каждого а
Описание слайда:

Абзацы: Разделение текста на абзацы производится контейнером <P></P>. Для каждого абзаца можно применить свой тип выравнивания. Поместим на титульную страницу текст, разбитый на абзацы с различным выравниванием: <P ALIGN="LEFT">На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.</P> <P ALIGN="RIGHT"> Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.</P>

10 слайд  Программирование Web-сайта   Компьютер
Описание слайда:

Программирование Web-сайта <HTML> <HEAD> <TITLE>Компьютер</TITLE> </HEAD> <BODY> <FONT COLOR="GREEN"> <H1 ALIGN="CENTER”> Все о компьютерах </H1> </FONT> <HR> <P ALIGN="LEFT">На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.</P> </H1> </FONT> <HR> <P ALIGN="RIGHT">Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.</P> </BODY> </HTML>

11 слайд Вставка рисунка Форматы .GIF, .JPG, .PNG. Тэг  с атрибутом SRC, который указы
Описание слайда:

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

12 слайд Вставка рисунка   Или
Описание слайда:

Вставка рисунка <BODY> <IMG SRC=«Комп.gif" alt=«компьютер" ALIGN="RIGHT"> Или <BODY> <IMG SRC="D:\Мои документы\Школа 32\Комп.gif" alt=" компьютер " ALIGN="RIGHT">

13 слайд Создание других страниц сайта   Заголовок страницы   Создайте страницы Програ
Описание слайда:

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

14 слайд Гиперссылки Гиперссылки состоят из указателя ссылки и адресной части ссылки.
Описание слайда:

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

15 слайд Гиперссылки
Описание слайда:

Гиперссылки <P ALIGN= "CENTER" [<A HREF="software.html">Программы</A>] &nbsp [<A HREF="glossary.html">Словарь</A>] &nbsp [<A HREF="hardware.html">Комплектующие</A>] &nbsp [<A HREF="anketa.html">Анкета</A>] </P>

16 слайд Адрес электронной почты вставляется так: Полезно на странице помещать ссылку
Описание слайда:

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

17 слайд
Описание слайда:

18 слайд Создание списка нумерованного Список располагается внутри контейнера  , а ка
Описание слайда:

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

19 слайд Создание списка маркированного Создадим теперь вложенный маркированный списо
Описание слайда:

Создание списка маркированного Создадим теперь вложенный маркированный список для одного из элементов основного списка. Список располагается внутри контейнера <UL> </UL>, а каждый элемент списка определяется также тэгом <LI>. С помощью атрибута TYPE тэга <UL> можно задать вид маркера списка: “disc” (диск), “Square” (квадрат), “circle” (окружность). Добавить HTML-код, задающий вложенный список для элемента <LI> Прикладные программы.

20 слайд Создание нумерованного списка    Системные программы Прикладные программы Си
Описание слайда:

Создание нумерованного списка <FONT COLOR="GREEN"> <H2 ALIGN="LEFT"> <OL> <LI>Системные программы <LI>Прикладные программы <LI>Системы программирования </OL>

21 слайд Создание вложенного списка   ТЕКСТОВЫЕ РЕДАКТОРЫ  ГРАФИЧЕСКИЕ РЕДАКТОРЫ  ЭЛЕ
Описание слайда:

Создание вложенного списка <UL> <LI TYPE="DISC"> ТЕКСТОВЫЕ РЕДАКТОРЫ <LI> ГРАФИЧЕСКИЕ РЕДАКТОРЫ <LI> ЭЛЕКТРОННЫЕ ТАБЛИЦЫ <LI> СИСТЕМЫ УПРАВЛЕНИЯ БАЗАМИ ДАННЫХ. </UL>

22 слайд
Описание слайда:

23 слайд Словарь компьютерных терминов: Контейнер списка определений ,  Внутри него те
Описание слайда:

Словарь компьютерных терминов: Контейнер списка определений <DL>, </DL> Внутри него термин – тэг <DT> определение - <DD> <DL> <DT>Процессор <FONT COLOR="BRAUN"> <H4> <DD>Центральный процессор, производящий вычисления в двоичном коде. </H4> <FONT COLOR="GREEN"> <DT>Оперативная память <FONT COLOR="BRAUN"> <H4> <DD>Устройство, в котором хранятся программы и данные </H4> </DL>

24 слайд
Описание слайда:

25 слайд Таблицы Таблица задается контейнером , внутри которого содержится описание ст
Описание слайда:

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

26 слайд Вставить таблицу в файл hardware .html   НАИМЕНОВАНИЕ ТИП ИЗГОТОВИТЕЛЬ ЦЕНА
Описание слайда:

Вставить таблицу в файл hardware .html <TABLE border="2"> <TR> <TH><FONT COLOR="BLUE">НАИМЕНОВАНИЕ</TH> <TH><FONT COLOR="CYAN">ТИП</TH> <TH><FONT COLOR="LIME">ИЗГОТОВИТЕЛЬ</TH> <TH><FONT COLOR="MAGENTA">ЦЕНА</TH> </TR> <TR> <TD ALIGN="CENTER">ПРОЦЕССОР</TD> <TD ALIGN="CENTER">PENTIUM</TD> <TD ALIGN="CENTER">INTEL</TD> <TD ALIGN="CENTER">2500 РУБЛЕЙ</TD> </TR> <TR> <TD ALIGN="CENTER">МАТЕРИНСКАЯ ПЛАТА</TD> <TD ALIGN="CENTER">Abit</TD> <TD ALIGN="CENTER">GIGABAIT</TD> <TD ALIGN="CENTER">2700 РУБЛЕЙ</TD> </TR> </TABLE>

27 слайд
Описание слайда:

28 слайд Формы на Web- страницах Формы включают в себя текстовые поля, раскрывающиеся
Описание слайда:

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

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

Открыть в Блокноте файл Anketa.html и добавить следующий HTML-код, задающий текстовые поля для ввода данных. Просмотреть результат в браузере: <FORM> <FONT COLOR="GREEN"> <H2 ALIGN="LEFT"> Пожалуйста, введите ваше имя: <BR> <INPUT TYPE="текст" NAME="name" SIZE=30> <BR> E-mail: <BR> <INPUT TYPE="текст" NAME="e-mail" SIZE=30> <BR> </FORM>

30 слайд Переключатели Пользователю предоставляется возможность отнести себя к одной и
Описание слайда:

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

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

Открыть в Блокноте файл Anketa.html и добавить следующий HTML-код, задающий группу переключателей. Просмотреть результат в браузере: Укажите, к какой группе пользователей вы себя относите: <BR> <INPUT TYPE="radio" NAME="group" value="schoolboy">учащийся<BR> <INPUT TYPE="radio" NAME="group" value="student">студент<BR> <INPUT TYPE="radio" NAME="group" value="teacher">учитель<BR>

32 слайд Флажки Флажки задаются тэгом  со значением атрибута type=“checkbox” Флажки, о
Описание слайда:

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

33 слайд Пример: Какие из сервисов Интернета вы используете наиболее часто:  www e-mai
Описание слайда:

Пример: Какие из сервисов Интернета вы используете наиболее часто: <BR> <INPUT TYPE="checkbox" NAME="group" value="www">www<BR> <INPUT TYPE="checkbox" NAME="group" value="e-mail">e-mail<BR> <INPUT TYPE="checkbox" NAME="group" value="ftp">FTP<BR>

34 слайд Поля списков Теперь выясним, какой из браузеров предпочитает посетитель сайта
Описание слайда:

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

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

Открыть в Блокноте файл Anketa.html и добавить следующий HTML-код, задающий раскрывающий список. Просмотреть результат в браузере: <SELECT NAME="browsers"> <OPTION SELECTED> Internet Explorer <OPTION> Netscape Navigator <OPTION> Opera <OPTION> Neo Planet </SELECT>

36 слайд Текстовая область Создается с помощью тэга  с обязательными атрибутами: NAME,
Описание слайда:

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

37 слайд Отправка формы Отправка введенной в форму информации, а также очистка полей о
Описание слайда:

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

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

Для того, чтобы при щелчке по кн. «Отправить» данные из формы передавались на сервер и там обрабатывались необходимо указать адрес и программу обработки. Для этого используется атрибут ACTION контейнера <FORM>. <FORM ACTION=http:/www.mycompany.ru/ogi-bin/bd.exe"

39 слайд Когда же был создан язык программирования Basic Язык программирования Basic б
Описание слайда:

Когда же был создан язык программирования Basic Язык программирования Basic был создан в 1964 году двумя профессорами Дартмунского университета Джоном Кенеми и Томасом Куртцом.BASIC - это первые буквы английских слов Beginner's All-purpose Symbolic Instruction Code (Всецелевой язык программирования для начинающих). В настоящее время существует множество версий этого языка, которые иногда очень сильно отличаются друг от друга. Для учебных заведений самыми распространенными являются версии MSX, впервые реализованная на японском компьютере "Ямаха", и версии фирмы Microsoft для компьютеров IBM. Кроме этого в нашей стране популярностью пользуется версия Turbo-Basic фирмы Borland. Без преувеличения можно сказать, что сегодня Бейсик является самым распространённым языком программирования. После появления мощных компиляторов Visual Basic этот язык стал популярен и у профессиональных программистов. Бейсик относится к языкам программирования высокого уровня. Как и другие языки, этот язык имеет алфавит, синтаксис, семантику.

40 слайд Алфавит языка Алфавит языка Basic представляет собой таблицу символов ASCII.
Описание слайда:

Алфавит языка Алфавит языка Basic представляет собой таблицу символов ASCII. Первая половина этой таблицы (символы с кодом 0-127) - стандартная. Вторая половина (символы с кодом 128-255) специфична для каждой страны. В этой таблице каждый символ имеет 8-битовое обозначение. Итак, в алфавит языка Basic входят все прописные и заглавные буквы английского и русского алфавитов, цифры, а также набор специальных символов, который имеется на клавиатуре компьютера.

Общая информация

Номер материала: ДВ-301105

Вам будут интересны эти курсы:

Курс повышения квалификации «Информационные технологии в деятельности учителя физики»
Курс повышения квалификации «Методика преподавания информатики в начальных классах»
Курс повышения квалификации «Организация работы по формированию медиаграмотности и повышению уровня информационных компетенций всех участников образовательного процесса»
Курс профессиональной переподготовки «Информатика: теория и методика преподавания в образовательной организации»
Курс «Фирменный стиль» (Corel Draw, Photoshop)
Курс «WEB-ВЕРСТКА (HTML, CSS)»
Курс повышения квалификации «Сетевые и дистанционные (электронные) формы обучения в условиях реализации ФГОС по ТОП-50»
Курс повышения квалификации «Развитие информационно-коммуникационных компетенций учителя в процессе внедрения ФГОС: работа в Московской электронной школе»
Курс профессиональной переподготовки «Информационные технологии в профессиональной деятельности: теория и методика преподавания в образовательной организации»
Курс профессиональной переподготовки «Управление в сфере информационных технологий в образовательной организации»
Курс профессиональной переподготовки «Теория и методика обучения информатике в начальной школе»
Курс профессиональной переподготовки «Математика и информатика: теория и методика преподавания в образовательной организации»
Курс повышения квалификации «Современные тенденции цифровизации образования»
Курс повышения квалификации «Современные языки программирования интегрированной оболочки Microsoft Visual Studio C# NET., C++. NET, VB.NET. с использованием структурного и объектно-ориентированного методов разработки корпоративных систем»
Курс повышение квалификации «Применение интерактивных образовательных платформ на примере платформы Moodle»

Благодарность за вклад в развитие крупнейшей онлайн-библиотеки методических разработок для учителей

Опубликуйте минимум 3 материала, чтобы БЕСПЛАТНО получить и скачать данную благодарность

Сертификат о создании сайта

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

Грамота за использование ИКТ в работе педагога

Опубликуйте минимум 10 материалов, чтобы БЕСПЛАТНО получить и скачать данную грамоту

Свидетельство о представлении обобщённого педагогического опыта на Всероссийском уровне

Опубликуйте минимум 15 материалов, чтобы БЕСПЛАТНО получить и скачать данное cвидетельство

Грамота за высокий профессионализм, проявленный в процессе создания и развития собственного учительского сайта в рамках проекта "Инфоурок"

Опубликуйте минимум 20 материалов, чтобы БЕСПЛАТНО получить и скачать данную грамоту

Грамота за активное участие в работе над повышением качества образования совместно с проектом "Инфоурок"

Опубликуйте минимум 25 материалов, чтобы БЕСПЛАТНО получить и скачать данную грамоту

Почётная грамота за научно-просветительскую и образовательную деятельность в рамках проекта "Инфоурок"

Опубликуйте минимум 40 материалов, чтобы БЕСПЛАТНО получить и скачать данную почётную грамоту

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