Презентация "Основы HTML. Разработка Web-сайта" - скачать презентации по Информатике онлайн
На нашем сайте вы можете скачать и просмотреть онлайн доклад-презентацию на тему "Основы HTML. Разработка Web-сайта" - скачать презентации по Информатике абсолютно бесплатно. Урок-презентация на эту тему содержит всего 31 слайд. Все материалы созданы в программе PowerPoint и имеют формат ppt или же pptx. Материалы и темы для презентаций взяты из открытых источников и загружены их авторами, за качество и достоверность информации в них администрация сайта не отвечает, все права принадлежат их создателям. Если вы нашли то, что искали, отблагодарите авторов - поделитесь ссылкой в социальных сетях, а наш сайт добавьте в закладки.
Оцените презентацию от 1 до 5 баллов!
- Тип файла:ppt / pptx (powerpoint)
- Всего слайдов:31 слайд
- Для класса:1,2,3,4,5,6,7,8,9,10,11
- Размер файла:874.50 kB
- Просмотров:120
- Скачиваний:0
- Автор:неизвестен
Слайды и текст к этой презентации:
№1 слайд
Содержание слайда:
№2 слайд
Содержание слайда: Web-сайты и Web-страницы
Web-сайт состоит из Web-страниц, объединенных гиперссылками. Web-страницы могут быть интерактивными и могут содержать мультимедийные и динамические объекты.
№3 слайд
Содержание слайда: Создание Web-сайтов реализуется с использованием языка разметки гипертекстовых документов HTML.
Создание Web-сайтов реализуется с использованием языка разметки гипертекстовых документов HTML.
Технология HTML состоит в том, что в обычный текстовый документ вставляются управляющие символы (тэги) и в результате мы получаем Web-страницу.
№4 слайд
Содержание слайда: Вид Web-страницы задается тэгами, которые заключаются в угловые скобки.
Вид Web-страницы задается тэгами, которые заключаются в угловые скобки.
Тэги могут быть одиночными или парными, для которых обязательно наличие открывающего и закрывающего тегов (такая пара тэгов называется контейнером).
Закрывающий тэг содержит прямой слэш (/) перед обозначением.
№5 слайд
Содержание слайда: HTML-код страницы помещается внутрь контейнера <HTML></HTML>
HTML-код страницы помещается внутрь контейнера <HTML></HTML>
Заголовок Web-страницы заключается в контейнер <HEAD></HEAD>
Название Web-страницы содержится в контейнере < TITLE ></TITLE>
<HTML>
<HEAD>
<ТIТLЕ>Компьютер</ТIТLЕ>
</HEAD>
</HTML>
№6 слайд
Содержание слайда: Основное содержание страницы помещается в контейнер <BODY></BODY>
Основное содержание страницы помещается в контейнер <BODY></BODY>
<HTML>
<HEAD>
<ТIТLЕ>Компьютер</ТIТLЕ>
</HEAD>
<BODY>
Все о компьютере
</BODY>
</HTML>
№7 слайд
Содержание слайда: Размер шрифта для имеющихся в тексте заголовков задается тэгами от <Н1> (самый крупный) до <Н6> (самый мелкий)
Размер шрифта для имеющихся в тексте заголовков задается тэгами от <Н1> (самый крупный) до <Н6> (самый мелкий)
<Н1>Все о компьютере</Н1>
Задать тип выравнивания заголовка для тэга заголовка позволяет атрибут ALIGN
Выравнивание по правой границе окна реализуется с помощью записи ALIGN="right", а по центру — ALIGN="center“
<Н1 ALIGN="center">Bce о компьютере</Н1>
№8 слайд
Содержание слайда: С помощью тэга FONT и его атрибутов можно задать параметры форматирования шрифта любого фрагмента текста. Атрибут FACE позволяет задать гарнитуру шрифта (например, FACE="Arial"), атрибут SIZE — размер шрифта (например, SIZE=4), атрибут COLOR — цвет шрифта (например, COLOR="blue")
С помощью тэга FONT и его атрибутов можно задать параметры форматирования шрифта любого фрагмента текста. Атрибут FACE позволяет задать гарнитуру шрифта (например, FACE="Arial"), атрибут SIZE — размер шрифта (например, SIZE=4), атрибут COLOR — цвет шрифта (например, COLOR="blue")
<FONT COLOR="blue">
<Н1 ALIGN="center">Bce о компьютере</Н1>
</FONT>
Заголовок целесообразно отделить от остального содержания страницы горизонтальной линией с помощью одиночного тэга <HR>
№9 слайд
Содержание слайда: Разделение текста на абзацы производится с помощью контейнера <Р></Р>
Разделение текста на абзацы производится с помощью контейнера <Р></Р>
Поместим на титульную страницу текст, разбитый на абзацы с различным выравниванием:
№10 слайд
Содержание слайда: <HTML>
<HTML>
<HEAD>
<TITLE>Компьютер</TITLE>
</HEAD>
<BODY>
<FONT COLOR="blue">
<H1 ALIGN="center">Bce о компьютере</H1>
</FONT>
<HR>
<P ALIGN="left">Ha этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.</P>
<P ALIGN="right">Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.</P>
<BODY>
</HTML>
№11 слайд
Содержание слайда: Вставка изображений
Для вставки изображения используется тэг <IMG> с атрибутом SRC
<IMG SRC="COMP6.gif">
№12 слайд
Содержание слайда: Расположить рисунок относительно текста различными способами позволяет атрибут ALIGN тэга <IMG>, который может принимать пять различных значений:
Расположить рисунок относительно текста различными способами позволяет атрибут ALIGN тэга <IMG>, который может принимать пять различных значений:
ТОР (верх),
MIDDLE (середина),
BOTTOM (низ),
LEFT (слева)
RIGHT (справа).
<IMG SRC="COMP6.gif" ALT="Компьютер" ALIGN="right" >
№13 слайд
Содержание слайда: Гиперссылки
Первая титульная страница должна предоставлять посетителю Web-сайта возможность начать путешествие по сайту. Для этого на титульную страницу должны быть помещены гиперссылки на другие страницы сайта.
№14 слайд
Содержание слайда: <HTML>
<HTML>
<HEAD>
<ТIТLЕ>Заголовок страницы</ТIТLЕ>
</HEAD>
<BODY>
</BODY>
</HTML>
Создать пустые страницы «Программы», «Словарь», «Комплектующие» и «Анкета» и сохранить их в файлах с именами software.htm, glossary.htm, hardware.htm и anketa.htm в каталоге сайта.
№15 слайд
Содержание слайда: Панель навигации
Панель навигации будет представлять собой абзац, выровненный по центру, в котором указатели гиперссылок разделены пробелами ( ):
<Р ALIGH="center">
[Программы]   [Словарь]  
[Комплектующие]   [Анкета]
</Р>
№16 слайд
Содержание слайда: <P ALIGN="center">
<P ALIGN="center">
[<A HREF="software.htm">Программы</A>]  
[<A HREF="glossary.htm">Словарь</A>]  
[<A HREF="hardware.htm">Комплектующие</A>]  
[<A HREF="anketa.htm">Aнкетa</A>]
</P>
№17 слайд
Содержание слайда: Ссылка на электронный адрес
<ADDRESS>
<А HREF="mailto:mailbox@provaider.ru">E-mail:
mailbox@provaider.ru </A>
</ADDRESS>
№18 слайд
Содержание слайда: Списки
Список располагается внутри контейнера <OL></OL>, а каждый элемент списка определяется тэгом <LI>. С помощью атрибута TYPE тэга <OL> можно задать тип нумерации: арабские цифры (по умолчанию), "I" (римские цифры), "а" (строчные буквы) и т.д.
Программное обеспечение
<OL>
<LI>Системные программы
<LI>Прикладные программы
<LI>Системы программирования
</OL>
№19 слайд
Содержание слайда: Вложенный ненумерованный список располагается внутри контейнера <UL></UL>, а каждый элемент списка определяется также тэгом <LI>. С помощью атрибута TYPE тэга <UL> можно задать вид маркера списка: "disc" (диск), "square" (квадрат) или "circle" (окружность).
Вложенный ненумерованный список располагается внутри контейнера <UL></UL>, а каждый элемент списка определяется также тэгом <LI>. С помощью атрибута TYPE тэга <UL> можно задать вид маркера списка: "disc" (диск), "square" (квадрат) или "circle" (окружность).
Для прикладных программ:
<UL>
<LI TYPE="square"> текстовые редакторы;
<LI TYPE="square"> графические редакторы;
<LI TYPE="square"> электронные таблицы;
<LI TYPE="square"> системы управления базами данных.
</UL>
№20 слайд
Содержание слайда: Страницу «Словарь» мы представим в виде словаря компьютерных терминов.
Страницу «Словарь» мы представим в виде словаря компьютерных терминов.
Для этого используем контейнер списка определений </DL>. Внутри него текст оформляется в виде термина, который выделяется непарным тэгом <DT>, и определения, которое следует за тэгом <DD>
<DL>
<DT> Процессор
<DD> Центральное устройство компьютера, производящее обработку информации в двоичном коде.
<DТ> Оперативная память
<DD> Устройство, в котором хранятся программы и данные.
</DL>
№21 слайд
Содержание слайда: Формы
Форма заключается в контейнер <FORM></FORM>
Текстовые поля: создаются с помощью тэга <INPUT> со значением атрибута TYPE="text". Атрибут NAME является обязательным и служит для идентификации полученной информации. Значением атрибута SIZE является число, задающее длину поля ввода в символах.
Для того чтобы анкета «читалась», необходимо разделить строки с помощью тэга перевода строки <BR>.
№22 слайд
Содержание слайда: <FORM>
Пожалуйста, введите ваше имя: <BR>
<INPUT TYPE="text"
NAME="name" SIZE=30> <BR>
E-mail: <BR>
<INPUT TYPE="text"
NAME="e-mail" SIZE= 30 > <BR>
</FORM>
№23 слайд
Содержание слайда: Переключатели
Переключатели
Группа переключателей («радиокнопок») создается с помощью тэга <INPUT> со значением атрибута TYPE="radio". Все элементы в группе должны иметь одинаковые значения атрибута NAME. Например, NAME="group".
Еще одним обязательным атрибутом является VALUE, которому присвоим значения "schoolboy", "student" и "teacher". Значение атрибута VALUE должно быть уникальным для каждой «радиокнопки», так как при ее выборе именно они передаются серверу.
№24 слайд
Содержание слайда: Укажите, к какой группе пользователей вы себя относите: <BR>
Укажите, к какой группе пользователей вы себя относите: <BR>
<INPUT TYPE="radio" NAME="group" VALUE= “schoolboy">учащийся<ВР>
<INPUT TYPE="radio" NAME="group" VALUE= "student">студент<ВР>
<INPUT TYPE="radio" NAME="group" VALUE= "teacher">учитель<ВP>
№25 слайд
Содержание слайда: Флажки
Если из предложенного перечня он нужно выбрать одновременно несколько вариантов, то их помечают флажками.
Флажки создаются в тэге <INPUT> значением атрибута TYPE="checkbox".
Флажки, объединенные в группу, могут иметь одинаковые значения атрибута NAME. Например, NAME="group".
Еще одним обязательным атрибутом является VALUE, которому присвоим, например, значения "www", "e-mail" и "ftp".
№26 слайд
Содержание слайда: Какие из сервисов Интернета вы используете наиболее часто: <BR>
Какие из сервисов Интернета вы используете наиболее часто: <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>
№27 слайд
Содержание слайда: Поля списков
Выясним, какой из браузеров предпочитает посетитель сайта. Перечень браузеров представим в виде раскрывающегося списка, из которого можно выбрать только один вариант. Для реализации такого списка используется контейнер <SELECT></SELECT>, в котором каждый элемент списка определяется тэгом <OPTION>. Выбираемый по умолчанию элемент задается с помощью атрибута SELECTED.
№28 слайд
Содержание слайда: Какой из браузеров вы предпочитаете? <BR>
Какой из браузеров вы предпочитаете? <BR>
<SELECT NAME="browsers">
<OPTION SELECTED> Internet Explorer
Internet Explorer
<OPTION>
Netscape Navigator
<OPTION> Opera
<OPTION> Neo Planet
</SELECT> <BR>
№29 слайд
Содержание слайда: Текстовая область
Создается такая область с помощью тэга <TEXTAREA> с обязательными атрибутами: NAME, задающим имя области, ROWS, определяющим число строк, и COLS — число столбцов области.
Какую еще информацию вы хотели бы видеть на нашем сайте? <BR>
<TEXTAREA NAME="resume"
ROWS=4 COLS=30>
</TEXTAREA <BR>
№30 слайд
Содержание слайда: Отправка данных из формы
Отправка введенной в форму информации или очистка полей от уже введенной информации осуществляется с помощью кнопок. Кнопки создаются с помощью тэга <INPUT>. Для создания кнопки, которая отправляет информацию, атрибуту TYPE необходимо присвоить значение "submit", а атрибуту VALUE, который задает надпись на кнопке, — значение "Отправить".
Для создания кнопки, которая производит очистку формы, атрибуту TYPE необходимо присвоить значение "reset", а атрибуту VALUE - значение "Очистить".
<INPUT TYPE="submit" VALUE="Отправить"> <INPUT TYPE="reset" VALUE="Очистить">
№31 слайд
Содержание слайда: ДОМАШНЕЕ ЗАДАНИЕ
выучить условные обозначения и значения тэгов (контейнеров)
Скачать все slide презентации "Основы HTML. Разработка Web-сайта" - скачать презентации по Информатике одним архивом:
