Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Инфоурок / Информатика / Презентации / Разработка Web-сайтов с использованием языка разметки гипертекста HTML (8-9 классы)

Разработка Web-сайтов с использованием языка разметки гипертекста HTML (8-9 классы)


  • Информатика

Поделитесь материалом с коллегами:

Презентация на тему: Разработка Web-сайтов с использованием языка разметки ги...
Web-страницы Web-страницы. Web-страницы создаются с использованием языка раз...
Web-сайты Web-сайты. Публикации во Всемирной паутине реализуются в форме Web-...
Структура Web-страницы HTML-код страницы помещается внутрь контейнера . Без э...
Сохранение Созданную Web-страницу необходимо сохранить в виде файла под имене...
Форматирование текста на Web-странице Пока наша страница выглядит не слишком...
Выравнивание текста Выравнивание текста. Задать способ выравнивания текста по...
Горизонтальная линия. Заголовки целесообразно отделять от остального содержа...
Вставка изображений в Web-страницы На Web-страницы можно помещать изображения...
Положение рисунка Положение рисунка относительно текста. Расположить рисунок...
Вставка Вставка альтернативного текста. Пользователи иногда, в целях экономии...
Гиперссылки на Web-страницах Гиперссылки. Гиперссылки, размещенные на Web-стр...
Указатель Указатель ссылки мы видим при просмотре Web-страницы в браузере. Ук...
Панель навигации Панель навигации по сайту. Создадим папку сайта "Компьютер"...
Размещение Разместим указатели гиперссылок внизу страницы в новом абзаце в од...
Гиперссылка на адрес электронной почты. Полезно на домашней странице сайта со...
Списки на Web-страницах Довольно часто при размещении текста на Web-страницах...
Нумерованные списки. Нумерованный список располагается внутри контейнера , а...
Маркированные списки. Маркированный список располагается внутри контейнера ,...
Список определений. Список определений располагается внутри контейнера /. Вну...
Конец.
1 из 21

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

№ слайда 1 Презентация на тему: Разработка Web-сайтов с использованием языка разметки ги
Описание слайда:

Презентация на тему: Разработка Web-сайтов с использованием языка разметки гипертекста HTML Выполнила ученица 8А класса Земелькина Екатерина

№ слайда 2 Web-страницы Web-страницы. Web-страницы создаются с использованием языка раз
Описание слайда:

Web-страницы Web-страницы. Web-страницы создаются с использованием языка разметки гипертекстовых документов HTML (Hyper Text Markup Language). В обычный текстовый документ вставляются управляющие символы - HTML-тэги, которые определяют вид Web-страницы при ее просмотре в браузере. Основными достоинствами Web-страниц являются: - малый информационный объем; - возможность просмотра в различных операционных системах. Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста самого редактора. В качестве такого редактора в Windows можно использовать стандартное приложение Блокнот. Создание Web-страниц с использованием HTML-тэгов требует больших усилий, времени и знания синтаксиса языка. Применение специальных инструментальных программных средств (Web-редакторов) делает работу по созданию Web-сайтов простой и эффективной. Процесс создания и редактирования страниц в Web-редакторах очень нагляден, так как производится в режиме WYSIWYG (от англ. "What You See Is What You Get" - "Что видишь, то и получишь").

№ слайда 3 Web-сайты Web-сайты. Публикации во Всемирной паутине реализуются в форме Web-
Описание слайда:

Web-сайты Web-сайты. Публикации во Всемирной паутине реализуются в форме Web-сайтов, которые обычно содержат материал по определенной теме или проблеме. Государственные структуры и организации (правительство, дума, школа и т. д.) обычно создают официальные Web-сайты своих организаций, на которых размещают информацию о своей деятельности. Коммерческие фирмы на своих Web-сайтах размещают рекламу товаров или услуг и предлагают их приобрести в Интернет-магазине. Любой пользователь Интернета может создать свой тематический сайт, на котором может разместить информацию о своих разработках, увлечениях и т. д. Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц. Сайт должен содержать систему гиперссылок, которая позволяет пользователю перемещаться по Web-страницам. Прежде чем разместить свой Web-сайт на сервере в Интернете, его необходимо тщательно протестировать, так как потенциальными посетителями вашего сайта будут являться десятки миллионов пользователей Интернета. Для публикации Web-сайта необходимо найти подходящее место на одном из серверов Интернета. Многие провайдеры предоставляют своим клиентам возможность бесплатного размещения Web-сайтов на своих серверах (бесплатный хостинг).

№ слайда 4 Структура Web-страницы HTML-код страницы помещается внутрь контейнера . Без э
Описание слайда:

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

№ слайда 5 Сохранение Созданную Web-страницу необходимо сохранить в виде файла под имене
Описание слайда:

Сохранение Созданную Web-страницу необходимо сохранить в виде файла под именем index.htm. В качестве расширения файла Web-страницы можно также использовать html. Рекомендуется создать для размещения сайта специальную папку и сохранять все файлы разрабатываемого сайта в этой папке. Необходимо различать имя файла index.htm, под которым Web-страница хранится в файловой системе, и имя Web-страницы (например, "Компьютер"), которое высвечивается в верхней строке окна браузера. Имя Web-страницы должно соответствовать ее содержанию, так как оно в первую очередь анализируется поисковыми системами.

№ слайда 6 Форматирование текста на Web-странице Пока наша страница выглядит не слишком
Описание слайда:

Форматирование текста на Web-странице Пока наша страница выглядит не слишком привлекательно: мелкий шрифт черного цвета на белом фоне. С помощью тэгов молено задать различные параметры форматирования текста. Заголовки. Размеры шрифтов заголовков задаются парами тэгов от <Н1></Н1> (самый крупный) до <Н6></Н6> (самый мелкий). Шрифт. Некоторые тэги имеют атрибуты, которые являются именами свойств и могут принимать определенные значения. С помощью тэга FONT и его атрибутов можно задать параметры форматирования шрифта. Атрибут FACE позволяет задать гарнитуру шрифта (например, FACE="Arial"), атрибут SIZE - размер шрифта (например, SIZE=4). Атрибут COLOR позволяет задавать цвет шрифта (например, C0L0R="blue"). Значение атрибута COLOR можно задать либо названием цвета (например, "red", "green", "blue" и т. д.), либо его шестнадцатеричным значением. Шестнадцатеричное представление цвета использует RGB-формат "#RRGGBB", где две первые шестнадцатеричные цифры задают интенсивность красного (red), две следующие - интенсивность зеленого (green) и две последние - интенсивность синего (blue) цвета. Минимальная интенсивность цвета задается шестнадцатеричным числом 00, а максимальная - FF. Например, синий цвет задается значением "#0000FF".

№ слайда 7 Выравнивание текста Выравнивание текста. Задать способ выравнивания текста по
Описание слайда:

Выравнивание текста Выравнивание текста. Задать способ выравнивания текста позволяет атрибут ALIGN. Выравнивание по левой границе задается так: ALlGN="left", выравнивание по правой границе: ALIGN="right", выравнивание по центру: ALIGN= "center". Таким-образом, синий цвет заголовка, выровненного по центру, можно задать следующим образом: <FONT COLOR="blue"> <Н1 ALIGN="center">Компьютер и ПО</Н1> </FONT>

№ слайда 8 Горизонтальная линия. Заголовки целесообразно отделять от остального содержа
Описание слайда:

Горизонтальная линия. Заголовки целесообразно отделять от остального содержания страницы горизонтальными линиями с помощью одиночного тэга <HR>. Абзацы. Разделение текста на абзацы производится с помощью контейнера <Р></Р>. При просмотре в браузере абзацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания и параметры форматирования шрифта. Домашняя страница сайта. На домашней странице сайта обычно размещается текст, кратко описывающий его содержание. Поместим на домашнюю страницу сайта "Компьютер" текст, разбитый на абзацы с различным выравниванием: <Р ALIGN="left">Ha этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.</Р>  <Р ALIGN= "right">Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.</Р> Таким образом, домашняя страница сайта "Компьютер" будет содержать отцентрированный крупный заголовок синего цвета, отделенный горизонтальной линией от двух по-разному выровненных абзацев (рис. 6.27): <FONT COLOR="blue"> <Н1 ALIGN="center"> Компьютер и ПО </Н1> </FONT> <HR> <Р ALIGN="left">Ha этом сайте...</Р> <Р ALIGN ="right"> Терминологический словарь ...</Р>

№ слайда 9 Вставка изображений в Web-страницы На Web-страницы можно помещать изображения
Описание слайда:

Вставка изображений в Web-страницы На Web-страницы можно помещать изображения, хранящиеся в графических файлах трех форматов - GIF, JPEG и PNG. Вставка изображений. Для вставки изображения используется тэг <IMG> с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете. Если графический файл находится на локальном компьютере в той же папке, что и файл Web-страницы, то в качестве значения атрибута SRC достаточно указать только имя файла. Например: <IMG SRC="computer.gif''> Если файл находится в другой папке на данном локальном компьютере, то значением атрибута должно быть полное имя файла, включая путь к нему в иерархической файловой системе. Например: <IMG SRC="C:\computer\computer.gif"> Если файл находится на удаленном сервере в Интернете, то должен быть указан Интернет-адрес этого файла. Например: <IMG SRC="http://www.server.ru/coraputer.gif">

№ слайда 10 Положение рисунка Положение рисунка относительно текста. Расположить рисунок
Описание слайда:

Положение рисунка Положение рисунка относительно текста. Расположить рисунок относительно текста различным образом позволяет атрибут ALIGN, который может принимать пять различных значений: ТОР (верх), MIDDLE (середина), BOTTOM (низ), LEFT (слева) и RIGHT (справа). На домашней странице сайта "Компьютер" логично разместить изображение компьютера. Для того чтобы рисунок располагался по правому краю текста, тэг вставки изображения должен принять следующий вид (рис. 6.28): <IMG SRC="computer.gif" ALIGN="right">

№ слайда 11 Вставка Вставка альтернативного текста. Пользователи иногда, в целях экономии
Описание слайда:

Вставка Вставка альтернативного текста. Пользователи иногда, в целях экономии времени, отключают в браузере загрузку графических изображений и читают только тексты. Чтобы не терялся смысл страницы, вместо рисунка должен выводиться альтернативный текст. Альтернативный текст выводится с помощью атрибута ALT, значением которого является текст, поясняющий, что должен был бы увидеть пользователь на рисунке: <IMG SRC="computer.gif" ALIGN="right" ALT="Компьютер">

№ слайда 12 Гиперссылки на Web-страницах Гиперссылки. Гиперссылки, размещенные на Web-стр
Описание слайда:

Гиперссылки на Web-страницах Гиперссылки. Гиперссылки, размещенные на Web-странице, позволяют загружать в браузер другие Web-страницы, хранящиеся на локальном компьютере или в Интернете. Гиперссылка состоит из двух частей: адреса и указателя ссылки. Гиперссылка создается с помощью универсального тэга <А> и его атрибута HREF, указывающего, в каком файле хранится загружаемая Web-страница: <А HREF="Адрес">Указатель ссылки</А> Если загружаемая в браузер Web-страница размещена на локальном компьютере в той же папке, то вместо адреса указывается просто имя файла, например: <А HREF="f ilename . htm">Указатель ссылки</А> Если загружаемая в браузер Web-страница размещена в Интернете, то в качестве адреса указывается Интернет-адрес, например: <А HREF="http://www.server.ru/Web-сайт/ filename. htm">Указатель ссылки</А>

№ слайда 13 Указатель Указатель ссылки мы видим при просмотре Web-страницы в браузере. Ук
Описание слайда:

Указатель Указатель ссылки мы видим при просмотре Web-страницы в браузере. Указателем ссылки может быть текст, обычно выделенный синим цветом и подчеркиванием, или рисунок, выделенный рамкой. При указании на него мышью, ее курсор превращается в значок "рука". Щелчок мышью по указателю вызывает переход на Web-страницу, указанную в гиперссылке. Гиперссылки могут содержать адреса не только Web-страниц, но и файлов других типов. Активизация таких гиперссылок будет приводить: к просмотру изображения в браузере: <А HREF="picture.jpg">Изображение</A> к запуску проигрывателя, встроенного в браузер и воспроизведению звукового файла: <А HREF="sound.wav">Звук</A> к сохранению файла на локальном компьютере с использованием встроенного в браузер менеджера загрузки файлов: <А HREF="Apxив.ziр">Скачать файл</А>

№ слайда 14 Панель навигации Панель навигации по сайту. Создадим папку сайта &quot;Компьютер&quot;
Описание слайда:

Панель навигации Панель навигации по сайту. Создадим папку сайта "Компьютер" и добавим в сайт пустые страницы "Программы", "Словарь", "Комплектующие" и "Анкета". Сохраним их в файлах с именами software.htm, glossary.htm, hardware.htm и anketa.htm в папке сайта. Такие "пустые" страницы должны иметь заголовки, но могут пока не иметь содержания: <HTML> <HEAD> <ТITLЕ>Заголовок страницы</ТITLЕ> </HEAD> <BODY> </BODY> </HTML> На домашней странице сайта разместим указатели гиперссылок на каждую страницу сайта. В качестве указателей гиперссылок удобнее всего выбрать названия страниц, на которые осуществляется переход.

№ слайда 15 Размещение Разместим указатели гиперссылок внизу страницы в новом абзаце в од
Описание слайда:

Размещение Разместим указатели гиперссылок внизу страницы в новом абзаце в одну строку, разделив их пробелами ( ). Такое размещение гиперссылок часто называют панелью навигации. Вставим в домашнюю страницу сайта HTML-код, создающий панель навигации: <Р ALIGN="center"> [<А HREF="software . htm">Программы</A>]    [<A HREF="glossary.htm">Словарь</A>]    [<A HREF="hardware.htm">Комплектующие</А>]   [<A HREF="anketa.htm">Aнкетa</A>]  </P>

№ слайда 16 Гиперссылка на адрес электронной почты. Полезно на домашней странице сайта со
Описание слайда:

Гиперссылка на адрес электронной почты. Полезно на домашней странице сайта создать ссылку на адрес электронный почты, по которому посетители могут связаться с администрацией сайта. Для этого необходимо атрибуту ссылки HREF присвоить адрес электронной почты и вставить ее в контейнер <ADDRESS></ADDRESS>, который задает стиль абзаца, принятый для указания адреса: <ADDRESS> <А HREF="mailto:username@server.ru">E-mail: username@server.ru</A> </ADDRESS> Теперь по щелчку по ссылке адреса электронной почты будет открываться почтовая программа Outlook Express (или другая используемая по умолчанию почтовая программа), где в строке Кому будет указан заданный в ссылке адрес. Итак, созданная домашняя страница Web-сайта "Компьютер" содержит заголовок, изображение компьютера, два абзаца текста, панель навигации и ссылку на адрес электронной почты (рис. 6.29).

№ слайда 17 Списки на Web-страницах Довольно часто при размещении текста на Web-страницах
Описание слайда:

Списки на Web-страницах Довольно часто при размещении текста на Web-страницах удобно использовать списки в различных вариантах: нумерованные списки, когда элементы списка идентифицируются с помощью чисел; маркированные списки, когда элементы списка идентифицируются с помощью специальных символов (маркеров); списки определений, позволяющие составлять перечни определений в так называемой словарной форме. Возможно создание и вложенных списков, причем вкладываемый список может по своему типу отличаться от основного.

№ слайда 18 Нумерованные списки. Нумерованный список располагается внутри контейнера , а
Описание слайда:

Нумерованные списки. Нумерованный список располагается внутри контейнера <OL></OL>, а каждый элемент списка определяется тэгом <LI>. С помощью атрибута TYPE тэга <OL> можно задать тип нумерации: арабские цифры (по умолчанию), "I" (римские цифры), "а" (строчные буквы) и ДР.: <OL> < LI >Системные программы < LI >Прикладные программы < LI >Системы программирования </OL>

№ слайда 19 Маркированные списки. Маркированный список располагается внутри контейнера ,
Описание слайда:

Маркированные списки. Маркированный список располагается внутри контейнера <UL></UL>, а каждый элемент списка определяется тэгом < LI >. С помощью атрибута TYPE тэга <UL> можно задать вид маркера списка: "disc" (диск), "square" (квадрат) или "circle" (окружность): <UL TYPE="square"> < LI >текстовые редакторы; < LI >графические редакторы; < LI >электронные таблицы; < LI >системы управления базами- данных. </UL> На Web-страницу "Программы" поместим нумерованный список, содержащий перечень основных типов программного обеспечения компьютера. Во второй элемент основного нумерованного списка вставим вложенный маркированный список (рис. 6.30).

№ слайда 20 Список определений. Список определений располагается внутри контейнера /. Вну
Описание слайда:

Список определений. Список определений располагается внутри контейнера <DL>/<DL>. Внутри него текст оформляется в виде терминов, которые выделяются одинарными тэгами <DT> и определений, которые следуют за одинарными тэгами <DD>. Web-страницу "Словарь" мы представим в виде словаря компьютерных терминов (рис. 6.31): <DL> <DТ>Процессор <DD>Центральное устройство компьютера, производящее обработку информации в двоичном коде. <DТ>Оперативная память <DD>Устройство, в котором хранятся программы и данные. </DL>

№ слайда 21 Конец.
Описание слайда:

Конец.


Автор
Дата добавления 02.09.2016
Раздел Информатика
Подраздел Презентации
Просмотров118
Номер материала ДБ-174205
Получить свидетельство о публикации

Похожие материалы

Включите уведомления прямо сейчас и мы сразу сообщим Вам о важных новостях. Не волнуйтесь, мы будем отправлять только самое главное.
Специальное предложение
Вверх