119.50K

Category:

internet

Презентация _Web-сайты и Web-страницы_

1.

Web-сайты и Webстраницы
Подготовила:
Табашина О.Н.

Web-сайт
Публикации во Всемирной паутине Интернет
реализуются в форме Web-сайтов.
Web-сайт напоминает журнал, содержащий
информацию, посвященную какой-либо теме или
проблеме.
Web-сайт состоит из Web-страниц, объединенных
гиперссылками. Web-страницы могут быть
интерактивными и могут содержать
мультимедийные и динамические объекты.

3.

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

4.

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

5.

Мультимедийность
Кроме текста Web-сайты могут содержать
иллюстрации, анимацию, звуковую- и
видеоинформацию.

6.

Динамические объекты
Web-страницы могут содержать динамические
объекты (исполнимые модули), созданные с
использованием сценариев на языках JavaScript и
VBScript или элементов управления ActiveX.
Расположенные на сайте управляющие элементы
(кнопки) позволяют пользователю запускать те или
иные динамические объекты.

7.

Создание сайтов
Для создания сайтов используется язык разметки
гипертекстовых документов HTML.
Управляющие слова языка HTML называются
тегами.
Для создания сайтов используются простейшие
текстовые редакторы (Блокнот).

8.

Достоинства HTML-документов
Малый информационных объем
Возможность просмотра на ПК с различными ОС.

9.

Основы языка HTML
Вид Web-страницы задается тегами, которые
заключены в угловые скобки.
Теги могут быть одиночными или парными, для
которых обязательно наличие открывающего и
закрывающего тегов (контейнера).
Закрывающийся тег содержит прямой слэш (/)
перед обозначением.
Теги могут записываться как прописными, так и
строчными буквами.

10.

Основные теги
<HTML>…</HTML> - начало и конец программы.
<HEAD>…</HEAD> - содержит название документа
и справочною информацию о странице.
<TITLE>…</TITLE> - название страницы, которое
отражается в строке заголовка окна.
<BODY>…</BODY> - содержание страницы, может
включать текст, таблицы, бегущие строки, ссылки
на графические изображения и звуковые файлы и
т.д.

11.

Программа на HTML
<HTML>
<HEAD>
<TITLE>Компьютер</TITLE>
</HEAD>
<BODY>
Все о компьютере
</BODY>
</HTML>
index.html

12.

Форматирование текста
<H1>…</H1> - заголовок первого уровня
<H2>…</H2> - заголовок второго уровня
<H3>…</H3> - заголовок третьего уровня
<H4>…</H4> - заголовок четвертого уровня
<H5>…</H5> - заголовок пятого уровня
<H6>…</H6> - заголовок шестого уровня

13.

Атрибут align - выравнивание
center – по центру
right – по правому краю
left – по левому краю

14.

Тег FONT
С помощью этого тега можно задавать параметры
форматирования шрифта любого фрагмента
текста.

15.

Атрибуты
face – задает гарнитуру шрифта. Например:
face = “Arial”
size – задает размер шрифта
size=4
color - задает цвет шрифта
color=“blue”
color=“#0000ff”

16.

HR – горизонтальная линия
Заголовок принято отделять от остального
содержания страницы горизонтальной линией с
помощью одиночного тега <HR>.

17.

Разделение текста на абзацы
Разделение текста на абзацы происходит с
помощью тега <P>.
При просмотре в браузере абзацы отделяются друг
от друга интервалами.
Для каждого абзаца можно задать определенный
тип выравнивания.

18.

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

19.

Программа на HTML
<BODY>
<FONT color=“blue”>
<H1 align=“center”>Все о компьютере</H1>
</FONT>
<HR>
<P align=“left”> На этом сайте…
<P align=“right”> Терминологический словарь…
</BODY>

20.

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

21.

Вставка рисунка
Для вставки рисунка используется тег <IMG> с
атрибутом src, который указывает место хранения
файла на компьютере или в Интернете.
Если рисунок находится в той же папке, что и WEBстраница.
<IMG src=“computer.gif”>
Если рисунок находится во вложенной папке
каталога WEB-страницы.
<IMG src=“./pic/computer.gif”>

22.

Атрибуты alt и align
alt – поясняющий текст (название рисунка)
появляется при наведении на рисунок указателя
мыши.
align – выравнивание может применять 5 значений:
Top - верх
Middel – середина
Bottom – низ
Left – слева
Right – справа

23.

Программа на HTML
<BODY>
<FONT color=“blue”>
<H1 align=“center”>Все о компьютере</H1>
</FONT>
<HR>
<IMG src=“./pic/0002.jpg” alt=“Компьютер” align=“right”>
<P align=“left”> На этом сайте…
<P align=“right”> Терминологический словарь…
</BODY>

24.

Страницы сайта
Software.html – Программы
Glossary.html – Словарь
Hardware.html – Комплектующие
Anketa.html - Анкета

25.

Гиперссылки на Web-страницах
Титульная страница сайта должна предоставлять
возможность перехода к другим его страницам.
Для создания гиперсвязей между титульной
страницей и другими страницами сайта
необходимо создать заготовки Web-страниц.

26.

Гиперссылки
Гиперссылка состоит из двух частей:
Указателя ссылки – то, что мы видим на Webстранице (текст или рисунок), обычно выделена
синим цветом и подчеркиванием. Активизация
гиперссылки вызывает переход на другую страницу.
Адресной части ссылки представляет собой URLадрес документа, на который указывает ссылка.

27.

Гиперссылка
Гиперссылка на Web-странице существует в форме
указателя ссылки, щелчок по которому
обеспечивает переход на Web-страницу, указанную
в адресной части ссылки.

28.

Панель навигации
Гиперссылки принято размещать в нижней или
левой части страницы. Такое размещение
гиперссылок называется панелью навигации.
Нижняя панель навигации представляет собой
абзац выровненный по центру, в котором указатели
гиперссылок разделены непрерывными пробелами
( )

29.

Гиперссылка на HTML
<A href=“URL”>Указатель гиперссылки</A>

30.

Панель навигации 1 страницы
<P align=“center”>
[Главная]  
[<A href=“software.html”>Программы</A>]  
[<A href=“glossary.html”>Словарь</A>]  
[<A href=“hardware.html”>Комплектующие</A>]
</P>

31.

Панель навигации 2 страницы
<P align=“center”>
[<A href=“index.htm”>Главная</A>] &nbsp
[Программы] &nbsp
[<A href=“glossary.htm”>Словарь</A>] &nbsp
[<A href=“hardware.htm”>Комплектующие</A>]
</P>

32.

Панель навигации 3 страницы
<P align=“center”>
[<A href=“index.htm”>Главная</A>] &nbsp
[<A href=“software.htm”>Программы</A>] &nbsp
[Словарь] &nbsp
[<A href=“hardware.htm”>Комплектующие</A>]
</P>

33.

Панель навигации 4 страницы
<P align=“center”>
[<A href=“index.htm”>Главная</A>] &nbsp
[<A href=“software.htm”>Программы</A>] &nbsp
[<A href=“glossary.htm”>Словарь</A>] &nbsp
[Комплектующие]
</P>

34.

Списки на Web-страницах
Виды списков:
Нумерованные
Маркированные
Вложенные

35.

Нумерованные списки
Для их создания используется тег <OL>…</OL>
Элементы списка задаются тегом <LI>
Атрибут type тега <OL> задает вид номера
По умолчанию арабские цифры
type=“I” – Римские цифры
type=“a” – строчные буквы
<OL type=I>

36.

Маркированные списки
Для их создания используется тег <UL>…</UL>
Элементы списка задаются тегом <LI>
Атрибут type тега <UL> задает вид маркера
Type=“disc” – диск
Type=“square” – квадрат
Type=“circle” – окружность

37.

HTML-код 2 страницы
<HTML>
<HEAD>
<TITLE>Программы</TITLE>
</HEAD>
<BODY>
<FONT color=“blue”>
<H1 align=“center”>Программное
обеспечение</H1>
</FONT>
<HR>

38.

Код 2 страницы
<OL>
<LI> Системные программы
<LI> Прикладные программы
<UL type=“square”>
<LI> Текстовые редакторы;
<LI> Графические редакторы;
<LI> Электронные таблицы;
<LI> Системы управления базами данных
</UL>
<LI> Системы программирования
</OL>
ссылки
</BODY>
</HTML>

39.

Списки определений
Для их создания используются теги <DL>…</DL>
Для оформления термина используется тег <DT>
Для оформления определения тег <DD>

40.

HTML-код 3 страницы
<HTML>
<HEAD>
<TITLE>Словарь</TITLE>
</HEAD>
<BODY>
<FONT color=“blue”>
<H1 align=“center”>Компьютерные термины</H1>
</FONT>
<HR>

41.

HTML-код 3 страницы
<DL>
<DT> <FONT color=“blue”>Процессор</FONT>
<DD> Центральное устройство компьютера, производящее
обработку информации в двоичном коде.
<DT> <FONT color=“blue”> Оперативная память </FONT>
<DD> Устройство, в котором хранятся программы и данные.
</DL>
ссылки
</BODY>
</HTML>

42.

Литература
Угринович Н.Д., Информатика и информационные
технологии. Учебник для 10-11 классов. М.:
БИНОМ. Лаборатория знаний, 2010.

English Русский Rules