Презентация Разработка Web-сайтов с использованием языка разметки гипертекста HTML 8 класс, IV четверть онлайн
На нашем сайте вы можете скачать и просмотреть онлайн доклад-презентацию на тему Разработка Web-сайтов с использованием языка разметки гипертекста HTML 8 класс, IV четверть абсолютно бесплатно. Урок-презентация на эту тему содержит всего 70 слайдов. Все материалы созданы в программе PowerPoint и имеют формат ppt или же pptx. Материалы и темы для презентаций взяты из открытых источников и загружены их авторами, за качество и достоверность информации в них администрация сайта не отвечает, все права принадлежат их создателям. Если вы нашли то, что искали, отблагодарите авторов - поделитесь ссылкой в социальных сетях, а наш сайт добавьте в закладки.
Оцените презентацию от 1 до 5 баллов!
- Тип файла:ppt / pptx (powerpoint)
- Всего слайдов:70 слайдов
- Для класса:1,2,3,4,5,6,7,8,9,10,11
- Размер файла:2.57 MB
- Просмотров:103
- Скачиваний:1
- Автор:неизвестен
Слайды и текст к этой презентации:
№1 слайд
Содержание слайда: Разработка Web-сайтов
с использованием языка
разметки гипертекста HTML
8 класс, IV четверть
№2 слайд
Содержание слайда: Урок 1.
Web-страницы и Web-сайты.
Структура веб-страницы.
Угринович, § 3.7.1- 3.7.2
№3 слайд
Содержание слайда: Понятие веб-сайта
Информация во Всемирной паутине хранится в форме Web-сайтов.
Web-сайт по структуре напоминает журнал по какой-либо теме или проблеме. Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц.
Веб-страницы связаны гиперссылками.
№4 слайд
Содержание слайда: Виды веб-сайтов
Официальные (правительство, Дума, школа…)
Коммерческие
Личные
№5 слайд
Содержание слайда: Достоинства веб-страниц:
Малый информационный объем («легкие»)
Пригодны для просмотра в разных ОС.
Динамичные.
Интерактивные.
№6 слайд
Содержание слайда: Этапы создания веб-сайта:
Построить сайт на локальном компьютере.
Протестировать (проверить правильность работы).
Разместить в Интернете – подобрать сервер для хостинга (платный или бесплатный).
№7 слайд
Содержание слайда: Программы
для создания сайта:
1) простейший текстовый редактор (без форматирования текста): Блокнот
2) браузер для просмотра страниц:
Internet Explorer
3) программа обработки изображений:
Photoshop
№8 слайд
Содержание слайда: Визуальные веб-редакторы
Создание сайта на языке HTML очень трудоемкое, нужны специальные знания.
Есть визуальные веб-редакторы (программы) для создания сайтов. Работают по принципу WYSIWYG (что видишь, то и получишь).
№9 слайд
Содержание слайда: Структура Web-страницы
Угринович, § 3.7.2
№10 слайд
Содержание слайда: Тэги
Вид Web-страницы задается управляющими командами - тэгами, которые заключаются в угловые скобки < >
Тэги бывают одиночные (неповторяющиеся) или парные (контейнеры): перед закрывающим тэгом контейнера пишут прямой слэш (/)
<body> </body>
Тэги пишутся английскими буквами (прописными, строчными).
№11 слайд
Содержание слайда: Структура Web-страницы
Весь HTML-код страницы помещается внутрь главного контейнера: <HTML></HTML>.
Web-страница разделяется на
2 логические части:
заголовок (HEAD)
содержание (BODY).
№12 слайд
Содержание слайда: Заголовок веб-страницы
Заголовок Web-страницы заключается в контейнер <HEAD> </HEAD>
Содержит название документа и справочную информацию о странице (например, тип кодировки), которая используется браузером для ее правильного отображения.
Название Web-страницы содержится в контейнере <ТITLE> </TITLE> и отображается в верхней строке окна браузера при просмотре страницы.
<HEAD>
<ТITLЕ>Компьютер</ТITLЕ>
</HEAD>
№13 слайд
Содержание слайда: Пишем шаблон веб-страницы
<HTML>
<HEAD>
<ТITLЕ>Компьютер</ТITLЕ>
</HEAD>
</HTML>
№14 слайд
Содержание слайда: Основное содержание
веб-страницы
Основное содержание страницы помещается в контейнер <BODY> </BODY>.
Может содержать: текст, таблицы, бегущие строки, картинки, ссылки, звуковые файлы...
Поместим на страницу текст «Все о компьютере»:
<BODY> Все о компьютере </BODY>
№15 слайд
Содержание слайда: Шаблон веб-страницы
<HTML>
<HEAD>
<ТITLЕ>Компьютер</ТITLЕ>
</HEAD>
<BODY>
Все о компьютере
</BODY>
</HTML>
№16 слайд
Содержание слайда:
№17 слайд
Содержание слайда: Как сохранить веб-страницу
1. Cоздать для сайта специальную папку и сохранять все файлы сайта в этой папке.
2. Web-страницу сохранить в виде файла с именем index.html - это титульный лист сайта (первым загружается в браузер)
Расширения файла Web-страницы – .htm или .html
№18 слайд
Содержание слайда: Создаем свой сайт….
Нужно различать имя файла index.html - под которым Web-страница хранится в файловой системе, и собственно имя Web-страницы «Компьютер» - высвечивается в верхней строке окна браузера и в первую очередь анализируется поисковыми системами.
Имя Web-страницы должно в максимальной степени соответствовать ее содержанию.
1. В Блокнот ввести HTML-код Web-страницы.
2. Сохранить файл под именем index.html в папке сайта. Выбрать тип файла – «Все файлы».
3. Открыть этот файл в браузере для просмотра.
№19 слайд
Содержание слайда:
№20 слайд
Содержание слайда: Практическая работа 3.8
Учебный сайт «Компьютер»
Проект сайта:
сколько Web-страниц будет входить в сайт,
тематика страниц,
связи страниц (гиперссылки).
Структура сайта «Компьютер»:
1) начальная (домашняя) страница;
2) «Программы» (классификация программного обеспечения);
3) «Словарь» (словарь компьютерных терминов);
4) «Анкета» (опрос посетителей сайта).
№21 слайд
Содержание слайда: Домашнее задание
§ 3.7.1 – 3.7.2 – определения и тэги наизусть;
вопросы (с.114, 115)
ПР 3.8 (задания 1-2) – с. 166
№22 слайд
Содержание слайда: УРОК № 2
№23 слайд
Содержание слайда: Проверочная работа № 1
В какой форме хранится информация во Всемирной паутине?
Что такое Web-сайт?
Типы сайтов.
В чем преимущества веб-страниц перед обычными текстовыми документами?
Каким образом веб-страницы объединяются в веб-сайты?
Что такое тэги?
Что такое тэговый контейнер? Записать главный контейнер веб-страницы.
Какова логическая структура веб-страницы?
Написать шаблон веб-страницы.
№24 слайд
Содержание слайда: Урок 2.
Форматирование текста
на Web-странице
Угринович, § 3.7.3
№25 слайд
Содержание слайда: Форматирование текста
Пока страница не слишком привлекательна: мелкий шрифт и черный текст на белом фоне. Но с помощью тэгов можно украсить текст.
1. Заголовки: тэги от <Н1> (самый крупный) до <Н6> (самый мелкий). <Н1> Всё о компьютере </Н1>
2. Шрифт (FONT). Некоторые тэги имеют атрибуты - имена свойств, могут принимать определенные значения.
FONT face=“Arial” – гарнитура шрифта
size=4 – размер
color=“red” – цвет
3. Выравнивание (ALIGN). Текст обычно выравнивается по левому краю страницы, однако принято заголовок размещать по центру.
ALIGN =“left", <FONT COLOR=“blue”
ALIGN="right", <Н1 ALIGN="center"> Bcё о компьютере </Н1>
ALIGN="center" </FONT>
№26 слайд
Содержание слайда: Цвет шрифта
Значение атрибута COLOR можно задать 2-мя способами:
а) названием цвета (например, "red", "green", "blue" и так далее),
б) его шестнадцатеричным значением в RGB-формате "#RRGGBB", где две первые шестнадцатеричные цифры задают интенсивность красного (red), две следующие — интенсивность зеленого (green) и две последние — интенсивность синего (blue) цветов.
Минимальная интенсивность цвета задается шестнадцатеричным числом 00, а максимальная — FF. Синий цвет = "#0000FF".
Таким образом, задать синий цвет заголовка можно тэгом FONT с атрибутом COLOR:
<FONT COLOR=«#0000FF"> <Н1 ALIGN="center">Bcё о компьютере</Н1>
</FONT>
№27 слайд
Содержание слайда:
№28 слайд
Содержание слайда: Форматирование текста
4. Горизонтальная линия отделит заголовок от остального содержания страницы с помощью одиночного тэга <HR>.
5. Абзацы: <Р></Р>. При просмотре в браузере абзацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания.
№29 слайд
Содержание слайда: Практическая работа 3.8
Учебный сайт «Компьютер»
Отформатировать текст начальной страницы:
1) Создать и выровнять 2 абзаца (зад.3)
2) Выделить цветом заголовок страницы и отделить его горизонтальной чертой (зад.4)
№30 слайд
Содержание слайда:
№31 слайд
Содержание слайда: Домашнее задание
§ 3.7.3 – тэги наизусть;
вопросы (с.114, 115, 116)
ПР 3.8 (задания 3-4) – с. 166
№32 слайд
Содержание слайда: УРОК 3
№33 слайд
Содержание слайда: Проверочная работа № 2
В какой форме хранится информация во Всемирной паутине?
Что такое Web-сайт?
Типы сайтов.
В чем преимущества веб-страниц перед обычными текстовыми документами?
Каким образом веб-страницы объединяются в веб-сайты?
Что такое тэги?
Что такое тэговый контейнер? Записать главный контейнер веб-страницы.
Какова логическая структура веб-страницы?
Написать шаблон веб-страницы.
Перечислить 5 тегов форматирования страницы.
Что такое атрибут тега?
Какие существуют способы задания цвета на веб-странице?
Какие теги используются для ввода заголовка? Форматирования шрифта? Ввода абзаца?
№34 слайд
Содержание слайда: Урок 3.
Вставка изображений
в Web-страницы
Угринович, § 3.7.4
№35 слайд
Содержание слайда: Вставка изображений
На Web-страницах могут быть графические файлы 3 форматов — GIF, JPG и PNG. Если рисунок сохранен в другом формате, то его необходимо предварительно преобразовать в один из этих форматов.
Для вставки изображения используется тэг <IMG> с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете.
1) картинка на локальном компьютере в папке с сайтом:
<IMG SRC="computer.jpg">
2) картинка в другой папке на локальном компьютере:
<IMG SRC="C:\computer\computer.jpg">
3) картинка находится на удаленном сервере в Интернете:
<IMG SRC="http://www.server.ru/computer.jpg">
№36 слайд
Содержание слайда: Поясняющий текст. Расположение рисунка в тексте.
Иллюстрации на Web-страницах стали неотъемлемым элементом дизайна. Однако пользователи в целях экономии времени иногда отключают в браузере загрузку графических изображений и читают только тексты.
Поэтому, чтобы не терялся смысл страницы, вместо рисунка должен выводиться поясняющий текст с атрибутом ALT
<IMG SRC="computer.jpg" АLТ="Компьютер">
Положение рисунка в тексте – определяет атрибут ALIGN тэга <IMG>: ТОР, MIDDLE, BOTTOM, LEFT , RIGHT.
<IMG SRC="computer.jpg" ALT="Компьютер" ALIGN="right">
№37 слайд
Содержание слайда: Вид готового сайта
№38 слайд
Содержание слайда: Код страницы сайта
<HTML>
<HEAD> <TITLE>Компьютер</TITLE></HEAD>
<BODY>
<H1 ALIGN="center">
<FONT COLOR="#0000FF"> Все о компьютере </FONT>
</H1>
<HR>
<IMG SRC="computer.jpg" ALT="Компьютер" ALIGN="right">
<P ALIGN="left">На этом сайта вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.</P>
<P ALIGN="right">Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.</P>
</BODY>
</HTML>
№39 слайд
Содержание слайда: Домашнее задание
§ 3.7.4 – тэги наизусть;
вопросы (с.114, 115, 116, 118)
ПР 3.8 (задание 5) – с. 167
№40 слайд
Содержание слайда: Урок 4
№41 слайд
Содержание слайда: Проверочная работа № 3
Что такое Web-сайт?
Типы сайтов.
Каким образом веб-страницы объединяются в веб-сайты?
Что такое тэги? тэговый контейнер? Записать главный контейнер веб-страницы.
Какова логическая структура веб-страницы?
Перечислить 5 тегов форматирования страницы.
Что такое атрибут тега?
Какие существуют способы задания цвета на веб-странице?
Какие теги используются для ввода заголовка? Форматирования шрифта? Ввода абзаца?
Какой тег и его атрибуты используются для вставки изображений?
№42 слайд
Содержание слайда: Урок 4. Гиперссылки
на Web-страницах
Угринович, § 3.7.5
№43 слайд
Содержание слайда: Гиперссылки позволяют загружать в браузер другие веб-страницы, связанные с предыдущей.
Гиперссылка состоит из 2 частей: адрес и указатель ссылки.
Гиперссылка задается универсальным тегом <A> с атрибутом HREF (он указывает, в каком файле хранится нужная веб-страница):
<A HREF=«адрес»> Указатель ссылки</A>
№44 слайд
Содержание слайда: Виды гиперссылок
1) внутренняя:
<A HREF=«filename.html»> Указатель ссылки</A>
2) внешняя:
<A HREF=«http://www.server.ru/site/
filename.html»> Указатель ссылки</A>
№45 слайд
Содержание слайда: Указатели гиперссылок
Указатель – видимая часть гиперссылки: текст или картинка
№46 слайд
Содержание слайда: Адресная часть гиперссылок
Перейти на другие веб-страницы:
<A HREF=«filename.html»> Указатель ссылки</A>
Открыть картинку в браузере:
<A HREF=«picture.jpg»> Картинка</A>
Прослушать звук (запуск встроенного в браузер проигрывателя):
<A HREF=«sound.wav»> Звук</A>
Сохранить файл (запуск встроенного в браузер менеджера загрузки файлов):
<A HREF=«arhiv.rar»> Скачать файл</A>
№47 слайд
Содержание слайда: Гиперссылка на
электронную почту
Гиперссылка этого типа заключается в особый контейнер <ADDRESS></ADDRESS>
<ADDRESS>
<A HREF=“mailto:username@server.ru”>Наш е-mail</A>
</ADDRESS>
№48 слайд
Содержание слайда: Вид готовой страницы сайта
№49 слайд
Содержание слайда: Код страницы сайта
<HTML>
<HEAD> <TITLE>Компьютер</TITLE></HEAD>
<BODY>
<H1 ALIGN="center">
<FONT COLOR="#0000FF"> Все о компьютере </FONT>
</H1>
<HR>
<IMG SRC="computer.jpg" ALT="Компьютер" ALIGN="right">
<P ALIGN="left">На этом сайта вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.</P>
<P ALIGN="right">Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.</P>
<P ALIGN="center">
[<A HREF="software.htm">Программы</A>]  
[<A HREF="glossary.htm">Словарь</A>]  
[<A HREF="hardware.htm">Комплектующие</A>] 
[<A HREF="anketa.htm">Анкета</A>]
</P>
<ADDRESS>
<A HREF="mailto:mailbox@provaider.ru">E-mail: mailbox@provaider.ru</A>
</ADDRESS>
</BODY>
</HTML>
№50 слайд
Содержание слайда: Домашнее задание
§ 3.7.5 – тэги наизусть;
вопросы (с.114, 115, 116, 118, 119)
ПР 3.8 (задания 6-7) – с. 167: панель навигации
№51 слайд
Содержание слайда: Урок 5
№52 слайд
Содержание слайда: Проверочная работа № 4
Что такое Web-сайт?
Каким образом веб-страницы объединяются в веб-сайты?
Что такое тэги? тэговый контейнер? Записать главный контейнер веб-страницы.
Какова логическая структура веб-страницы?
Перечислить 5 тегов форматирования страницы.
Что такое атрибут тега?
Какие существуют способы задания цвета на веб-странице?
Какие теги используются для ввода заголовка? Форматирования шрифта? Ввода абзаца?
Какой тег и его атрибуты используются для вставки изображений?
Какой тег и его атрибуты используются для вставки гиперссылок?
№53 слайд
Содержание слайда: Урок 5. Списки
на Web-страницах
Угринович, § 3.7.6
№54 слайд
Содержание слайда: Виды списков
Нумерованные
Маркированные
Списки терминов (как в словаре)
Вложенные списки
№55 слайд
Содержание слайда: Нумерованный список
Список – в контейнере <OL></OL>
Элемент списка – тег <LI>
Атрибут TYPE – тип нумерации (арабские цифры; I – римские; а – латинские строчные буквы)
<OL>
<LI>Системные программы
<LI>Прикладные программы
<LI>Системы программирования
</OL>
№56 слайд
Содержание слайда: Маркированный список
Список – в контейнере <UL></UL>
Элемент списка – тег <LI>
Атрибут TYPE – тип маркеров (“disc”- диск, “square”- квадрат, “circle”-окружность)
<UL TYPE=“square”>
<LI>Текстовые редакторы
<LI>Графические редакторы
<LI>Электронные таблицы
<LI>Системы управления базами данных
</UL>
см. стр.168 – «Программное обеспечение»
№57 слайд
Содержание слайда: Список терминов
Список – в контейнере <DL></DL>
Элемент списка – тег <DT>
Сначала пишется термин, затем его определение (как в словаре)
см. стр.169 – «Словарь»
№58 слайд
Содержание слайда: Домашнее задание
§ 3.7.6 – тэги наизусть;
вопросы (с.114, 115, 116, 118,119,120)
ПР 3.8 (задания 8-9) – с. 168-169: страницы сайта «Программы» и «Словарь»
№59 слайд
Содержание слайда: Урок 6
№60 слайд
Содержание слайда: Урок 6. Интерактивные формы
на Web-страницах
Угринович, § 3.7.7
№61 слайд
Содержание слайда: Проверочная работа № 5
Что такое Web-сайт?
Каким образом веб-страницы объединяются в веб-сайты?
Что такое тэги? тэговый контейнер? Записать главный контейнер веб-страницы.
Какова логическая структура веб-страницы?
Перечислить 5 тегов форматирования страницы.
Что такое атрибут тега?
Какие существуют способы задания цвета на веб-странице?
Какие теги используются для ввода заголовка? Форматирования шрифта? Ввода абзаца?
Какой тег и его атрибуты используются для вставки изображений?
Какой тег и его атрибуты используются для вставки гиперссылок?
Какие теги используются для создания нумерованных и маркированных списков?
№62 слайд
Содержание слайда: Понятие
интерактивной формы
Для общения посетителей сайта с его создателями на веб-странице размещают интерактивные формы.
Формы содержат различные элементы управления:
текстовые поля
раскрывающиеся списки
флажки
переключатели…
№63 слайд
Содержание слайда: Текстовое поле
Основной контейнер <FORM></FORM>
Текстовое поле – для ввода текста с клавиатуры: тэг <INPUT> с атрибутами:
TYPE=“text” – тип содержимого (текст)
NAME=“____” – имя поля
SIZE=“40” – длина поля ввода (в символах)
<INPUT TYPE=“text” NAME=“e-mail” SIZE=30>
<BR> - разделитель строк (перевод курсора на новую строку)
№64 слайд
Содержание слайда: Переключатели (радиокнопки)
Круглая кнопка для выбора одного из нескольких вариантов ответов: TYPE=“radio”
Все элементы этой группы должны иметь одинаковое имя: NAME=“group”
Атрибуты VALUE содержат варианты выбора ответов: VALUE=“учащийся”
У каждого VALUE свой вариант ответа.
<INPUT TYPE=“radio” NAME=“group” VALUE=“ученик”>
№65 слайд
Содержание слайда: Флажки
Квадратное окошечко для выбора нескольких ответов из предложенных вариантов: TYPE=“checkbox”
Каждый элемент этой группы должен иметь свое имя: NAME=“box1”, NAME=“box2”, …..
Атрибуты VALUE содержат варианты выбора ответов: VALUE=“WWW”, VALUE=“e-mail”, ….
У каждого VALUE свой вариант ответа.
<INPUT TYPE=“checkbox” NAME=“box1” VALUE=“WWW”> WWW
№66 слайд
Содержание слайда: Поля списков
Для создания раскрывающего списка используют контейнер <SELECT></SELECT>
В нем каждый элемент списка задается тэгом <OPTION>
№67 слайд
Содержание слайда: Текстовая
область
Текстовая область с линейкой прокрутки – для ввода текста произвольной длины.
Контейнер <TEXTAREA> </TEXTAREA>
Атрибуты: NAME - задает имя области
ROWS - число строк
COLS - число столбцов
<TEXTAREA NAME=“Ваши предложения”
ROWS=4 COLS=30> </TEXTAREA>
№68 слайд
Содержание слайда: Отправка данных из формы
Кнопка отправки создается тэгом <INPUT>
Атрибуты:
TYPE=“submit”
VALUE=“Отправить” (надпись на кнопке)
Чтобы данные из формы передать по электронной почте, используют контейнер:
<FORM ACTION=mailto:name@server.ru METHOD=“post” ENCTYPE=“text/plain”>
№69 слайд
Содержание слайда: Готовая анкета
Готовая анкета
№70 слайд
Содержание слайда: Домашнее задание
§ 3.7.4 – тэги наизусть;
закончить таблицу основных тэгов;
вопросы (с.114, 115, 116,118,119,120,123) – подготовка к итоговой КР по теме
ПР 3.8 (задания 9-16) – с. 169-172:
страница сайта - «Анкета»
Скачать все slide презентации Разработка Web-сайтов с использованием языка разметки гипертекста HTML 8 класс, IV четверть одним архивом:
