Презентация по информатике "Создание веб-документа"

Скачать материал

Создание веб-документаПри помощи программы Блокнот

Скачать материал

Скачать материал "Презентация по информатике "Создание веб-документа""

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

1 слайд

Создание веб-документа
При помощи программы Блокнот
2 слайд

Открыть документ Блокнот.
Сохраните пустой файл как Web-страницу, выполнив команду Файл > Сохранить как.
В поле Имя файла напишите 2.htm.
В поле Тип файла установите значение Все файлы(*.*).
Укажите куда сохранять (в созданную на столе папку, которую назвали Web-страница) и нажмите кнопку «Сохранить».
3 слайд

Создайте структуру, определяющую HTML-документ.
<HTML>
Дистанционное обучение
</HTML>
Сохраните также, как предыдущий раз.
Откройте документ при помощи Браузера.
Появится такое изображение на веб-странице
4 слайд

Добавьте в структуру документа разделы HEAD (заголовок) и BODY (тело), модифицировав текст:
<HTML>
<HEAD>
<TITLE>Web-страница по дистанционному обучению</TITLE>
</HEAD>
<BODY>
Дистанционное обучение
</BODY>
</HTML
Сохраните также, как предыдущий раз.
Откройте документ при помощи Браузера.
Появится такое изображение на веб-странице
5 слайд

Создание заголовков разного уровня, абзацев, прерываний и форматирования текста:
Создадим новый абзац, а для имеющегося текста установим заголовок первого уровня и расположим его по центру, напечатав:
<H1 ALIGN=”CENTER”> Дистанционное обучение </H1>
<P> Преимущества дистанционного обучения
Просмотрим внесенные изменения, сохранив их.
6 слайд

<HTML>
<HEAD>
<TITLE>Web-страница по дистанционному обучению</TITLE>
</HEAD>
<H1 ALIGN=”CENTER”> Дистанционное обучение </H1>
<P> Преимущества дистанционного обучения
<BODY>
</BODY>
</HTML
7 слайд

Изменим стиль, размер и цвет шрифта для созданного абзаца:
<FONT SIZE=4 COLOR=RED><B>Преимущества дистанционного обучения</B></FONT>
<HTML>
<HEAD>
<TITLE>Web-страница по дистанционному обучению</TITLE>
</HEAD>
<H1 ALIGN=”CENTER”> Дистанционное обучение </H1>
<P> Преимущества дистанционного обучения
<FONT SIZE=4 COLOR=RED><B>Преимущества дистанционного обучения</B></FONT>
<BODY>
</BODY>
</HTML
8 слайд

<HTML>
<HEAD>
<TITLE>Web-страница по дистанционному обучению</TITLE>
</HEAD>
<H1 ALIGN=”CENTER”> Дистанционное обучение </H1>
<P> Преимущества дистанционного обучения
<FONT SIZE=4 COLOR=RED><B>Преимущества дистанционного обучения</B></FONT>
<BODY>
</BODY>
</HTML
9 слайд

Перечислим некоторые преимущества, расположив их на разных строках, для этого используем теги абзаца и прерывания строк:
<P> Массовое обслуживание миллионов обучаемых
<BR> Индивидуальный подход к каждому обучаемому
<BR> Интерактивное общение со студентом
<BR> Накопление информации об интересах студента
10 слайд

<HTML>
<HEAD>
<TITLE>Web-страница по дистанционному обучению</TITLE>
</HEAD>
<H1 ALIGN=”CENTER”> Дистанционное обучение </H1>
<P> Преимущества дистанционного обучения
<FONT SIZE=4 COLOR=RED><B>Преимущества дистанционного обучения</B></FONT>
<BODY>
<P> Массовое обслуживание миллионов обучаемых
<BR> Индивидуальный подход к каждому обучаемому
<BR> Интерактивное общение со студентом
<BR> Накопление информации об интересах студента
</BODY>
</HTML
11 слайд

Сделаем заголовок текста Преимущества дистанционного обучения с новой строки:
<HTML>
<HEAD>
<TITLE>Web-страница по дистанционному обучению</TITLE>
</HEAD>
<H1 ALIGN=”CENTER”> Дистанционное обучение </H1>
<P> Преимущества дистанционного обучения
<P><FONT SIZE=4 COLOR=RED><B>Преимущества дистанционного обучения</B></FONT>
<BODY>
<P> Массовое обслуживание миллионов обучаемых
<BR> Индивидуальный подход к каждому обучаемому
<BR> Интерактивное общение со студентом
<BR> Накопление информации об интересах студента
</BODY>
</HTML
12 слайд

Создание и форматирования таблиц:
Добавим таблицу на нашу Web-страницу:
<TABLE FRAME=”BOX” RULES=”ALL” BORDER=”3”>
<TR><TH>Удобство доступа</TH><TH>Удобство поиска</TH>
<TH>Доступность ресурсов</TH> <TH>Хороший выбор</TH> <TH>Прочее</TH></TR>
<TR><TD>50%</TD> <TD>21%</TD> <TD>11%</TD> <TD>11%</TD> <TD>7%</TD></TR></TABLE>
Получить полный текст

Подписаться на рассылку!
13 слайд

<HTML>
<HEAD>
<TITLE>Web-страница по дистанционному обучению</TITLE>
</HEAD>
<H1 ALIGN=”CENTER”> Дистанционное обучение </H1>
<P> Преимущества дистанционного обучения
<P><FONT SIZE=4 COLOR=RED><B>Преимущества дистанционного обучения</B></FONT>
<BODY>
<P> Массовое обслуживание миллионов обучаемых
<BR> Индивидуальный подход к каждому обучаемому
<BR> Интерактивное общение со студентом
<BR> Накопление информации об интересах студента
<TABLE FRAME=”BOX” RULES=”ALL” BORDER=”3”>
<TR><TH>Удобство доступа</TH><TH>Удобство поиска</TH>
<TH>Доступность ресурсов</TH> <TH>Хороший выбор</TH> <TH>Прочее</TH></TR>
<TR><TD>50%</TD> <TD>21%</TD> <TD>11%</TD> <TD>11%</TD> <TD>7%</TD></TR></TABLE>
<P> Получить полный текст
<P> Подписаться на рассылку!
</BODY>
</HTML
14 слайд
15 слайд

Обратите внимание, что первая строка выделена жирным (это действие тега <TH>), сама таблица имеет обрамление, а данные расположены по левому краю.
Установим текст второй строки по центру, добавив в тег, определяющий вторую строку дополнительный атрибут выравнивания:
<TR ALIGN=CENTER><TD>50%</TD>
16 слайд

<HTML>
<HEAD>
<TITLE>Web-страница по дистанционному обучению</TITLE>
</HEAD>
<H1 ALIGN=”CENTER”> Дистанционное обучение </H1>
<P> Преимущества дистанционного обучения
<P><FONT SIZE=4 COLOR=RED><B>Преимущества дистанционного обучения</B></FONT>
<BODY BACKGROUND= фон.jpg>
<P> Массовое обслуживание миллионов обучаемых
<BR> Индивидуальный подход к каждому обучаемому
<BR> Интерактивное общение со студентом
<BR> Накопление информации об интересах студента
<TABLE FRAME=BOX RULES=ALL” BORDER=3 >
<TR><TH>Удобство доступа</TH><TH>Удобство поиска</TH>
<TH>Доступность ресурсов</TH> <TH>Хороший выбор</TH> <TH>Прочее</TH></TR>
<TR ALIGN=CENTER><TD>50%</TD> <TD>21%</TD> <TD>11%</TD> <TD>11%</TD> <TD>7%</TD></TR></TABLE>
<P> Получить полный текст
<P> Подписаться на рассылку!
</BODY>
</HTML
17 слайд

Размещение изображения на Web-странице:
Скачать изображение, СОХРАНИТЬ В СВОЕЙ ПАПКЕ: тачпад.jpg
Вставим на нашу Web-страницу:
<P><IMG SRC= тачпад.jpg >
18 слайд

<HTML>
<HEAD>
<TITLE>Web-страница по дистанционному обучению</TITLE>
</HEAD>
<H1 ALIGN=”CENTER”> Дистанционное обучение </H1>
<P> Преимущества дистанционного обучения
<P><FONT SIZE=4 COLOR=RED><B>Преимущества дистанционного обучения</B></FONT>
<BODY>
<P> Массовое обслуживание миллионов обучаемых
<BR> Индивидуальный подход к каждому обучаемому
<BR> Интерактивное общение со студентом
<BR> Накопление информации об интересах студента
<TABLE FRAME=BOX RULES=ALL” BORDER=3 >
<TR><TH>Удобство доступа</TH><TH>Удобство поиска</TH>
<TH>Доступность ресурсов</TH> <TH>Хороший выбор</TH> <TH>Прочее</TH></TR>
<TR ALIGN=CENTER><TD>50%</TD> <TD>21%</TD> <TD>11%</TD> <TD>11%</TD> <TD>7%</TD></TR></TABLE>
<P> Получить полный текст
<P> Подписаться на рассылку!
<P><IMG SRC= тачпад.jpg >
</BODY>
</HTML
19 слайд

Установим в качестве фона нашей страницы изображение
Скачать изображение, СОХРАНИТЬ В СВОЕЙ ПАПКЕ: фон.jpg
Вставим на нашу Web-страницу:
<BODY BACKGROUND= фон.jpg>
20 слайд

<HTML>
<HEAD>
<TITLE>Web-страница по дистанционному обучению</TITLE>
</HEAD>
<H1 ALIGN=”CENTER”> Дистанционное обучение </H1>
<P> Преимущества дистанционного обучения
<P><FONT SIZE=4 COLOR=RED><B>Преимущества дистанционного обучения</B></FONT>
<BODY BACKGROUND= фон.jpg>
<P> Массовое обслуживание миллионов обучаемых
<BR> Индивидуальный подход к каждому обучаемому
<BR> Интерактивное общение со студентом
<BR> Накопление информации об интересах студента
<TABLE FRAME=BOX RULES=ALL” BORDER=3 >
<TR><TH>Удобство доступа</TH><TH>Удобство поиска</TH>
<TH>Доступность ресурсов</TH> <TH>Хороший выбор</TH> <TH>Прочее</TH></TR>
<TR ALIGN=CENTER><TD>50%</TD> <TD>21%</TD> <TD>11%</TD> <TD>11%</TD> <TD>7%</TD></TR></TABLE>
<P> Получить полный текст
<P> Подписаться на рассылку!
<P><IMG SRC= тачпад.jpg >
</BODY>
</HTML
21 слайд

<HTML>
<HEAD>
<TITLE>Web-страница по дистанционному обучению</TITLE>
</HEAD>
<H1 ALIGN=”CENTER”> Дистанционное обучение </H1>
<P> Преимущества дистанционного обучения
<P><FONT SIZE=4 COLOR=RED><B>Преимущества дистанционного обучения</B></FONT>
<BODY BACKGROUND= фон.jpg>
<P> Массовое обслуживание миллионов обучаемых
<BR> Индивидуальный подход к каждому обучаемому
<BR> Интерактивное общение со студентом
<BR> Накопление информации об интересах студента
<TABLE FRAME=BOX RULES=ALL” BORDER=3 >
<TR><TH>Удобство доступа</TH><TH>Удобство поиска</TH>
<TH>Доступность ресурсов</TH> <TH>Хороший выбор</TH> <TH>Прочее</TH></TR>
<TR ALIGN=CENTER><TD>50%</TD> <TD>21%</TD> <TD>11%</TD> <TD>11%</TD> <TD>7%</TD></TR></TABLE>
<P> Получить полный текст
<P> Подписаться на рассылку!
<P><IMG SRC= тачпад.jpg height=150 >
</BODY>
</HTML
Задает высоту рисунка в пикселах
Уменьшим размер рисунка
22 слайд

Создание дополнительных эффектов на Web-странице:
Добавим горизонтальную разделительную линию после перечислений преимуществ дистанционного обучения:
<P><HR ALIGN="CENTER" WIDTH="70%" SIZE="5" COLOR="firebrick">
23 слайд

<HTML>
<HEAD>
<TITLE>Web-страница по дистанционному обучению</TITLE>
</HEAD>
<H1 ALIGN=”CENTER”> Дистанционное обучение </H1>
<P> Преимущества дистанционного обучения
<P><FONT SIZE=4 COLOR=RED><B>Преимущества дистанционного обучения</B></FONT>
<BODY BACKGROUND= фон.jpg>
<P> Массовое обслуживание миллионов обучаемых
<BR> Индивидуальный подход к каждому обучаемому
<BR> Интерактивное общение со студентом
<BR> Накопление информации об интересах студента
<P><HR ALIGN="CENTER" WIDTH="70%" SIZE="5" COLOR="firebrick">
<TABLE FRAME=BOX RULES=ALL” BORDER=3 >
<TR><TH>Удобство доступа</TH><TH>Удобство поиска</TH>
<TH>Доступность ресурсов</TH> <TH>Хороший выбор</TH> <TH>Прочее</TH></TR>
<TR ALIGN=CENTER><TD>50%</TD> <TD>21%</TD> <TD>11%</TD> <TD>11%</TD> <TD>7%</TD></TR></TABLE>
<P> Получить полный текст
<P> Подписаться на рассылку!
<P><IMG SRC= тачпад.jpg height=150>
</HTML
24 слайд

Создание списка:
Оформим перечисление преимуществ дистанционного обучения как маркированный список, вставим теги маркированного списка:
<UL><LI> Массовое обслуживание миллионов обучаемых
<LI> Индивидуальный подход к каждому обучаемому
<LI> Интерактивное общение со студентом
<LI> Накопление информации об интересах студента</UL>
25 слайд

<HTML>
<HEAD>
<TITLE>Web-страница по дистанционному обучению</TITLE>
</HEAD>
<H1 ALIGN=”CENTER”> Дистанционное обучение </H1>
<P> Преимущества дистанционного обучения
<P><FONT SIZE=4 COLOR=RED><B>Преимущества дистанционного обучения</B></FONT>
<BODY BACKGROUND= фон.jpg>
<UL><LI> Массовое обслуживание миллионов обучаемых
<LI> Индивидуальный подход к каждому обучаемому
<LI> Интерактивное общение со студентом
<LI> Накопление информации об интересах студента</UL>
<P><HR ALIGN="CENTER" WIDTH="70%" SIZE="5" COLOR="firebrick">
<TABLE FRAME=BOX RULES=ALL” BORDER=3 >
<TR><TH>Удобство доступа</TH><TH>Удобство поиска</TH>
<TH>Доступность ресурсов</TH> <TH>Хороший выбор</TH> <TH>Прочее</TH></TR>
<TR ALIGN=CENTER><TD>50%</TD> <TD>21%</TD> <TD>11%</TD> <TD>11%</TD> <TD>7%</TD></TR></TABLE>
<P> Получить полный текст
<P> Подписаться на рассылку!
<P><IMG SRC= тачпад.jpg height=150>
</HTML
26 слайд

Часть списка сделаем нумерованным
<UL><LI> Массовое обслуживание миллионов обучаемых
<ol><LI> Индивидуальный подход к каждому обучаемому
<LI> Интерактивное общение со студентом </ol>
<LI> Накопление информации об интересах студента</UL>
27 слайд

<HTML>
<HEAD>
<TITLE>Web-страница по дистанционному обучению</TITLE>
</HEAD>
<H1 ALIGN=”CENTER”> Дистанционное обучение </H1>
<P> Преимущества дистанционного обучения
<P><FONT SIZE=4 COLOR=RED><B>Преимущества дистанционного обучения</B></FONT>
<BODY BACKGROUND= фон.jpg>
<UL><LI> Массовое обслуживание миллионов обучаемых
<ol><LI> Индивидуальный подход к каждому обучаемому
<LI> Интерактивное общение со студентом </ol>
<LI> Накопление информации об интересах студента</UL>
<P><HR ALIGN="CENTER" WIDTH="70%" SIZE="5" COLOR="firebrick">
<TABLE FRAME=BOX RULES=ALL” BORDER=3 >
<TR><TH>Удобство доступа</TH><TH>Удобство поиска</TH>
<TH>Доступность ресурсов</TH> <TH>Хороший выбор</TH> <TH>Прочее</TH></TR>
<TR ALIGN=CENTER><TD>50%</TD> <TD>21%</TD> <TD>11%</TD> <TD>11%</TD> <TD>7%</TD></TR></TABLE>
<P> Получить полный текст
<P> Подписаться на рассылку!
<P><IMG SRC= тачпад.jpg height=150>
</HTML
28 слайд

Бегущая строка
<MARQUEE> Дистанционное обучение </MARQUEE>
Выражение, заключенное между этими тэгами будет перемещаться по экрану, т.е. будет бегающей строкой
29 слайд

<HTML>
<HEAD>
<TITLE>Web-страница по дистанционному обучению</TITLE>
</HEAD>
<H1 ALIGN=”CENTER”> Дистанционное обучение </H1>
<P> Преимущества дистанционного обучения
<P><FONT SIZE=4 COLOR=RED><B>Преимущества дистанционного обучения</B></FONT>
<BODY BACKGROUND= фон.jpg>
<UL><LI> Массовое обслуживание миллионов обучаемых
<ol><LI> Индивидуальный подход к каждому обучаемому
<LI> Интерактивное общение со студентом </ol>
<LI> Накопление информации об интересах студента</UL>
<P><HR ALIGN="CENTER" WIDTH="70%" SIZE="5" COLOR="firebrick">
<TABLE FRAME=BOX RULES=ALL” BORDER=3 >
<TR><TH>Удобство доступа</TH><TH>Удобство поиска</TH>
<TH>Доступность ресурсов</TH> <TH>Хороший выбор</TH> <TH>Прочее</TH></TR>
<TR ALIGN=CENTER><TD>50%</TD> <TD>21%</TD> <TD>11%</TD> <TD>11%</TD> <TD>7%</TD></TR></TABLE>
<P> Получить полный текст
<P> Подписаться на рассылку!
<P><IMG SRC= тачпад.jpg height=150>
<MARQUEE> Дистанционное обучение </MARQUEE>
</BODY>
</HTML

Скачать материал

Найдите материал к любому уроку, указав свой предмет (категорию), класс, учебник и тему:

6 663 169 материалов в базе

Найти материалы

Скачать материал

Другие материалы

docx

Методическое пособие по VBA для Excel

19.04.2017
2057
5

docx

Технологическая карта практического занятия "Создание многотабличной базы данных и связывание таблиц в СУБД Access"

19.04.2017
1861
3

docx

Рабочая программа ОП. 11 Компьютерная графика для специальности 230115 Программирование в компьютерных системах

19.04.2017
1711
1

docx

Рабочая программа ОП.02 АРХИТЕКТУРА КОМПЬЮТЕРНЫХ СИСТЕМ для специальности 230115 Программирование в компьютерных системах

19.04.2017
1566
2

zip

Стандарт основного общего образования по информатике и ИКТ

Рейтинг: 4 из 5

19.04.2017
4547
21

docx

Программа по учебному предмету "Информатика" 8 класс по учебнику Л.Л. Босовой

19.04.2017
434
0

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

Оставьте свой комментарий

Авторизуйтесь, чтобы задавать вопросы.

Скачать материал
- 19.04.2017 2248
- PPTX 6.3 мбайт
- 27 скачиваний
- Оцените материал:
Настоящий материал опубликован пользователем Колеухо Сергей Васильевич. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт

Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Автор материала

Колеухо Сергей Васильевич
- На сайте: 8 лет и 11 месяцев
- Подписчики: 0
- Всего просмотров: 21978
- Всего материалов: 11