🗊Презентация Создание Web-сайта

Категория: Интернет
Нажмите для полного просмотра!
Создание Web-сайта, слайд №1Создание Web-сайта, слайд №2Создание Web-сайта, слайд №3Создание Web-сайта, слайд №4Создание Web-сайта, слайд №5Создание Web-сайта, слайд №6Создание Web-сайта, слайд №7Создание Web-сайта, слайд №8Создание Web-сайта, слайд №9Создание Web-сайта, слайд №10Создание Web-сайта, слайд №11Создание Web-сайта, слайд №12Создание Web-сайта, слайд №13Создание Web-сайта, слайд №14Создание Web-сайта, слайд №15Создание Web-сайта, слайд №16Создание Web-сайта, слайд №17Создание Web-сайта, слайд №18Создание Web-сайта, слайд №19Создание Web-сайта, слайд №20Создание Web-сайта, слайд №21Создание Web-сайта, слайд №22Создание Web-сайта, слайд №23Создание Web-сайта, слайд №24
Скачать

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Создание Web-сайта. Доклад-сообщение содержит 24 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1


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

Слайд 2


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

Слайд 3


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

Слайд 4


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

Слайд 5


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

Слайд 6


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

Слайд 7


Форматирование текста: Размер шрифта в заголовках задается тэгами от Н1 до Н6: <H1> Все о компьютерах </H1> Тип выравнивания заголовка задает атрибут ALIGN <H1 ALIGN="CENTER”>Все о компьютерах </H1>
Описание слайда:
Форматирование текста: Размер шрифта в заголовках задается тэгами от Н1 до Н6: <H1> Все о компьютерах </H1> Тип выравнивания заголовка задает атрибут ALIGN <H1 ALIGN="CENTER”>Все о компьютерах </H1>

Слайд 8


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

Слайд 10


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

Слайд 11


Программирование 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>
Описание слайда:
Программирование 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>

Слайд 12


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

Слайд 13


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

Слайд 14


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

Слайд 15


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

Слайд 16


Гиперссылки <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>
Описание слайда:
Гиперссылки <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>

Слайд 17


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

Слайд 18


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

Слайд 20


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

Слайд 21


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

Слайд 22


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

Слайд 23


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

Слайд 24


Вставить таблицу в файл 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>
Описание слайда:
Вставить таблицу в файл 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>

Скачать

Похожие презентации
Mypresentation.ru
Загрузить презентацию