PPt4Web Хостинг презентаций

Главная / Информатика / Создание веб сайта
X Код для использования на сайте:

Скопируйте этот код и вставьте его на свой сайт

X

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

После чего скачивание начнётся автоматически!

Кнопки:

Презентация на тему: Создание веб сайта


Скачать эту презентацию

Презентация на тему: Создание веб сайта


Скачать эту презентацию



№ слайда 1 Создание Web-сайта
Описание слайда:

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

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

Структура Web-сайта Тема урока:

№ слайда 3 Код страницы <HTML></HTML> Код страницы <HTML></HTML> За
Описание слайда:

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

№ слайда 4 <HEAD> <HEAD> <TITLE> Компьютер</TITLE> </HEAD>
Описание слайда:

<HEAD> <HEAD> <TITLE> Компьютер</TITLE> </HEAD>

№ слайда 5 <BODY> Все о компьютерах </BODY>
Описание слайда:

<BODY> Все о компьютерах </BODY>

№ слайда 6 <HTML> <HTML> <HEAD> <TITLE>Компьютер</TITLE> <
Описание слайда:

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

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

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

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

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

№ слайда 10 <HTML> <HTML> <HEAD> <TITLE>Компьютер</TITLE> <
Описание слайда:

<HTML> <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. Форматы .GIF, .JPG, .PNG. Тэг <IMG> с атрибутом
Описание слайда:

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

№ слайда 12 <BODY> <BODY> <IMG SRC=«Комп.gif" alt=«компьютер" ALIGN
Описание слайда:

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

№ слайда 13 <HEAD> <HEAD> <TITLE> Заголовок страницы </TITLE> </H
Описание слайда:

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

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

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

№ слайда 15 <P ALIGN= "CENTER" <P ALIGN= "CENTER" [<A HREF=&quo
Описание слайда:

<P ALIGN= "CENTER" <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>, а каждый элемент
Описание слайда:

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

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

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

№ слайда 20 <FONT COLOR="GREEN"> <FONT COLOR="GREEN"> <H2
Описание слайда:

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

№ слайда 21 <UL> <UL> <LI TYPE="DISC"> ТЕКСТОВЫЕ РЕДАКТОРЫ <L
Описание слайда:

<UL> <UL> <LI TYPE="DISC"> ТЕКСТОВЫЕ РЕДАКТОРЫ <LI> ГРАФИЧЕСКИЕ РЕДАКТОРЫ <LI> ЭЛЕКТРОННЫЕ ТАБЛИЦЫ <LI> СИСТЕМЫ УПРАВЛЕНИЯ БАЗАМИ ДАННЫХ. </UL>

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

№ слайда 23 Контейнер списка определений <DL>, </DL> Контейнер списка определени
Описание слайда:

Контейнер списка определений <DL>, </DL> Контейнер списка определений <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>, внутри которого содерж
Описание слайда:

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

№ слайда 26 <TABLE border="2"> <TABLE border="2"> <TR>
Описание слайда:

<TABLE border="2"> <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 Формы включают в себя текстовые поля, раскрывающиеся списки, флажки, переключате
Описание слайда:

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

№ слайда 29 <FORM> <FORM> <FONT COLOR="GREEN"> <H2 ALIGN=&quo
Описание слайда:

<FORM> <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 Укажите, к какой группе пользователей вы себя относите: <BR> Укажите, к ка
Описание слайда:

Укажите, к какой группе пользователей вы себя относите: <BR> Укажите, к какой группе пользователей вы себя относите: <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 Флажки задаются тэгом <INPUT> со значением атрибута type=“checkbox” Флажки
Описание слайда:

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

№ слайда 33 Какие из сервисов Интернета вы используете наиболее часто: Какие из сервисов Инт
Описание слайда:

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

№ слайда 35 <SELECT NAME="browsers"> <SELECT NAME="browsers"&gt
Описание слайда:

<SELECT NAME="browsers"> <SELECT NAME="browsers"> <OPTION SELECTED> Internet Explorer <OPTION> Netscape Navigator <OPTION> Opera <OPTION> Neo Planet </SELECT>

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

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

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

Отправка введенной в форму информации, а также очистка полей от уже введенной информации осуществляется кнопками. Для создания кн., отправляющей инф-ю, атрибуту TYPE=“submit“, value=«Отправить». Отправка введенной в форму информации, а также очистка полей от уже введенной информации осуществляется кнопками. Для создания кн., отправляющей инф-ю, атрибуту 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"

Скачать эту презентацию


Презентации по предмету
Презентации из категории
Лучшее на fresher.ru