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

Главная / Информатика / Web-сайты и web-страницы
X Код для использования на сайте:

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

X

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

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

Кнопки:

Презентация на тему: Web-сайты и web-страницы


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

Презентация на тему: Web-сайты и web-страницы


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



№ слайда 1 Web-сайты и web-страницы
Описание слайда:

Web-сайты и web-страницы

№ слайда 2 Цели и задачи: Образовательные: 1. Ввести понятие «web-сайт»; 2. Познакомить с H
Описание слайда:

Цели и задачи: Образовательные: 1. Ввести понятие «web-сайт»; 2. Познакомить с HTML; 3. Рассмотреть достоинства языка разметки гипертекстаРазвивающие: Продолжить формировать умение работать на компьютере.Воспитательные: Формировать информационную картину мира учащихся.

№ слайда 3 Web-сайт – это электронный интерактивный документ, состоящий из web-страниц, объ
Описание слайда:

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

№ слайда 4 HTML – язык разметки гипертекстовых страниц.Технология HTML заключается в том, ч
Описание слайда:

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

№ слайда 5 Форматирование текста и размещение графики
Описание слайда:

Форматирование текста и размещение графики

№ слайда 6 Цели и задачи: Образовательные: 1. Ввести понятие «тэги»; 2. Познакомить с основ
Описание слайда:

Цели и задачи: Образовательные: 1. Ввести понятие «тэги»; 2. Познакомить с основными тэгами размещения текста и графики.Развивающие: Продолжить формировать умение работать на компьютере.Воспитательные: Формировать информационную картину мира учащихся.

№ слайда 7 Основные ТЭГИ   - контейнер для обозначения начала и конца страницы  - контейнер
Описание слайда:

Основные ТЭГИ <HTML> </HTML> - контейнер для обозначения начала и конца страницы<HEAD> </HEAD> - контейнер для заголовка страницы<TITLE> </TITLE> - контейнер для названия страницы<BODY> </BODY> - контейнер для отображения содержимого страницы

№ слайда 8 ТЭГИ форматирования текста   (H2,…, H6 – самый мелкий)Атрибут ALIGN – задает выр
Описание слайда:

ТЭГИ форматирования текста <H1> </H1> (H2,…, H6 – самый мелкий)Атрибут ALIGN – задает выравнивание Пример:<H1 ALIGN=“left”> Все о компьютере </H1> (left, right, center, justify)<FONT> </FONT>Атрибуты FACE, SIZE, COLOR<P> </P><HR> - одиночный тэг, отображающий отделение одной части текста от другой горизонтальной чертой.<BR> - перенос строки

№ слайда 9 Мой первый шагЗдравствуйте, это моя первая страница.Добро пожаловать! :)
Описание слайда:

<html><head><title>Мой первый шаг</title></head><body>Здравствуйте, это моя первая страница.<br>Добро пожаловать! :)</body></html>

№ слайда 10 - не просто тэг, это контейнер - тэг, который может содержать внутри себя друг
Описание слайда:

<тэг> </тэг> - не просто тэг, это контейнер - тэг, который может содержать внутри себя другие тэги (и текст). Обратите внимание: <тэг1><тэг2><тэг3> ... </тэг3></тэг2></тэг1> Только такая очередность закрывающих тэгов верна: тэг, который мы открыли первым - закрываем последним, второй – предпоследним и т.д. Т.е. следующая очередность нежелательна и не верна, она может привести к ошибкам на вашей страничке: <тэг1><тэг2><тэг3> ... </тэг3></тэг1></тэг2>

№ слайда 11 Добро пожаловать! :) Color – параметр (атрибут) для тэга font, он отвечает, в д
Описание слайда:

<font color="#CC0000"> Добро пожаловать! :) </font>Color – параметр (атрибут) для тэга font, он отвечает, в данном случае, за цвет заключенного в контейнер текста.Атрибут color, как и другие атрибуты, не принадлежит только одному тэгу, он может быть присвоен и некоторым другим тэгам. Попробуйте вместо СС0000 подставить другие значения цветов для атрибута color. Обратите внимание, что значению цвета обязательно должен предшествовать значок «решетка» - #.<body text="#336699">

№ слайда 12 Цвет фона устанавливается в уже знакомом нам тэге :  Обратите внимание: мы однов
Описание слайда:

Цвет фона устанавливается в уже знакомом нам тэге <body>: <body bgcolor="#000000"> Обратите внимание: мы одновременно можем прописать в тэге <body> и цвет текста в документе, и цвет фона <body text="#336699" bgcolor="#000000">

№ слайда 13 С помощью параграфов мы можем центрировать текст: текст С помощью параграфов мы
Описание слайда:

<p></p> С помощью параграфов мы можем центрировать текст: <p align="center">текст</p> С помощью параграфов мы можем выровнять текст по левому краю: <p align="left">текст</p> По правому краю документа: <p align="right">текст</p> По обоим краям документа: <p align="justify">текст</p> Параграф не может содержать в себе другие параграфы

№ слайда 14 текст  текст  текст  текст  текст  текст  текст
Описание слайда:

<font size="+4"> текст </font><font size="+3"> текст </font><font size="+2"> текст </font><font size="+1"> текст </font><font size="+0"> текст </font><font size="-1"> текст </font><font size="-2"> текст </font>

№ слайда 15 текст (шрифт Arial) Какие же типы шрифтов являются стандартными, и по идее долж
Описание слайда:

<font face="arial"> текст (шрифт Arial)</font> Какие же типы шрифтов являются стандартными, и по идее должны находиться на компьютере каждого пользователя - это:Times; Times New Roman; Arial; Helvetica; Courier; Verdana; Tahoma; Cosmic Sans; GaramondВы можете безбоязненно использовать любой из них.В атрибуте face можно указать сразу несколько типов шрифтов:<font face="arial, verdana, courier"> текст (шрифт Arial) </font>В этом случае если у посетителя не окажется на компьютере шрифта Arial, то текст будет отображен шрифтом Verdana. Если и Verdana нет на компьютере вашего посетителя, то текст будет отображен шрифтом Courier. Т.е. в атрибуте face мы можем задать список разделенных запятыми названий шрифтов, которые броузер вашего посетителя должен попытаться найти у него на компьютере и отобразить в порядке приоритета.

№ слайда 16 Вставка изображений(можно использовать один из трех форматов изображений: GIF, J
Описание слайда:

Вставка изображений(можно использовать один из трех форматов изображений: GIF, JPG, PNG. <IMG SRC=“computer.gif”><IMG SRC=“C:\computer.gif”><IMG SRC=“HTTP://www.server.ru/computer.gif”><IMG SRC=“computer.gif” ALT=“Компьютер”>Атрибут ALIGN тэга IMG может принимать одно из пяти значений: TOP – вверх, MIDDLE – середина, BOTTOM – низ, LEFT – слева, RIGHT – справа.<IMG SRC=“computer.gif” ALT=“Компьютер” ALIGN =“RIGHT”>

№ слайда 17 Кроме атрибута align для тэга  можно ввести еще несколько атрибутов: (1) - (2) -
Описание слайда:

Кроме атрибута align для тэга <img> можно ввести еще несколько атрибутов: (1) - <img src="pr1.png" vspace="10">(2) - <img src="pr1.png" hspace="30">(3) - <img src="pr1.png" alt="моя фотография">(4) - <img src="pr1.png" width="100">(5) - <img src="pr1.png" height="200">(6) - <img src="pr1.png" border="5">

№ слайда 18 (1) - атрибут vspace - задает расстояние между текстом и рисунком (по вертикали)
Описание слайда:

(1) - атрибут vspace - задает расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях. Pixel - минимальная единица изображения, точка. Например, разрешение экрана 800х600 - 800 на 600 точек. В нашем примере расстояние равно 10 пикселям. (2) - атрибут hspace - тоже задает расстояние между текстом и рисунком, но по горизонтали. Расстояние задается в пикселях. В нашем примере оно равно 30 пикселям (точкам). (3) - атрибут alt - краткое описание картинки. Если навести курсором мыши на рисунок, и так подержать его (курсор) несколько секунд, выскочит описание картинки. В нашем случае это будет фраза - "моя фотография". Если параметр alt не задавать, описания не будет. Но умные люди говорят, что описание картинкам задавать следует (особенно, если это кнопки), т.к. есть особенные люди, которые бродят по интернету с отключенной графикой. Без alt им не будет видно на что нажимать (если картинка является ссылкой или кнопкой в меню), т.к. картинка не отображается, а при заданном alt, можно увидеть надпись, для чего картинка предназначена.

№ слайда 19 (4) атрибут width - ширина самой картинки (в пикселях). Если ширину не задавать
Описание слайда:

(4) атрибут width - ширина самой картинки (в пикселях). Если ширину не задавать специально, то по умолчанию она будет равна реальной ширине картинки (а так вы можете ее сделать или уже, или шире). (5) - атрибут height - высота самой картинки (тоже в пикселях). Так же как в случае с width высоту (height) картинки можно и не задавать. Правда, те же умные люди говорят, что размеры картинок следует задавать, для тех же особенных людей с отключенной графикой... (6) – атрибут border - рамка вокруг самой картинки (в пикселях). Можно не задавать. Однако, по умолчанию, рамка вокруг картинки есть всегда. И если вы хотите убрать ее, то выставляйте атрибут border равным нулю.

№ слайда 20 Как мы помним, атрибуты для одного тэга могут употребляться одновременно друг с
Описание слайда:

Как мы помним, атрибуты для одного тэга могут употребляться одновременно друг с другом, чтобы избежать путаницы продемонстрирую наглядно на нашей страничке. Введем следующие атрибуты для нашей картинки: <img src="pr1.png" align="left" hspace="30" vspace="5" alt="моя фотография"> Наша картинка будет прижата к левому краю экрана, текст будет обтекать ее справа, расстояние до текста по горизонтали - 30 пикселей, по вертикали - 5 пикселей (чтобы красиво все смотрелось), ну, и если вы наведете на картинку курсор, то выскочит надпись - "моя фотография".

№ слайда 21 Домашнее задание Выучить назначение всех тэгов (для контрольного теста). По возм
Описание слайда:

Домашнее задание Выучить назначение всех тэгов (для контрольного теста). По возможности закончить создание web-страницы, начатой на уроке.

№ слайда 22 Практическое задание Создайте Web-страницу, отображающую один из этапов развития
Описание слайда:

Практическое задание Создайте Web-страницу, отображающую один из этапов развития ЭВМ (по выбору). Разместите на станице не только текст, но и рисунки, скачанные из Интернета.

№ слайда 23 Создание гиперссылокТэг  делает ссылкой заключенную в него картинку или фразу (т
Описание слайда:

Создание гиперссылокТэг <a></a> делает ссылкой заключенную в него картинку или фразу (текст). Принципы прописывания пути мы уже знаем: (1) - <a href="prf.html">мои фотографии</a>(2) - <a href="photos/prf.html">мои фотографии</a>(3) - <a href="http://www.homepage.ru/prf.html">мои фотографии</a>

№ слайда 24 Для всех ссылок в нашем документе мы можем прописать цвета: link - цвет просто с
Описание слайда:

Для всех ссылок в нашем документе мы можем прописать цвета: link - цвет просто ссылки, alink - цвет активной ссылки (нажатой), vlink - цвет уже посещенной ссылки.<body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">

№ слайда 25 Как вы помните, мы можем задать различные цвета для разных блоков текста в нашем
Описание слайда:

Как вы помните, мы можем задать различные цвета для разных блоков текста в нашем документе (<font color="…"></font>). Для текстовых ссылок мы тоже можем задать разный цвет – это делается при помощи тэга <font> и его атрибута color: <a href="prf.html"><font color="#CC0000">посмотреть мои фотографии</font></a> Обратите внимание, <font color="…"></font> - прописывается внутри тэга <a></a>, если вы пропишите иначе, то у вас не получится задать вашей ссылке цвет отличный от цвета других ссылок в документе.

№ слайда 26 Как вы помните, мы можем задать различные цвета для разных блоков текста в нашем
Описание слайда:

Как вы помните, мы можем задать различные цвета для разных блоков текста в нашем документе (<font color="…"></font>). Для текстовых ссылок мы тоже можем задать разный цвет – это делается при помощи тэга <font> и его атрибута color: <a href="prf.html"><font color="#CC0000">посмотреть мои фотографии</font></a> Обратите внимание, <font color="…"></font> - прописывается внутри тэга <a></a>, если вы пропишите иначе, то у вас не получится задать вашей ссылке цвет отличный от цвета других ссылок в документе.

№ слайда 27 Ссылкой может быть и картинка. Принцип ссылки тот же, что и в случае с текстом,
Описание слайда:

Ссылкой может быть и картинка. Принцип ссылки тот же, что и в случае с текстом, только в тэг <a></a> вставляется не текст, а картинка: <a href="prf.html"><img src="primtocodephoto.gif"></a>

№ слайда 28 Если вы уже достаточно попутешествовали по интернету, то вы должны были заметить
Описание слайда:

Если вы уже достаточно попутешествовали по интернету, то вы должны были заметить, что ссылка может быть не только на документ с расширением *.html, но и на многие другие (*.doc, *.mp3, *.jpg, *.gif, *.txt, *.zip, *.exe и т.д:) Как это делается? Да все по тому же известному нам принципу: <a href="http://www.melody.ru/music.mp3"> скачать песню </a>

№ слайда 29 Практическое задание Создайте в созданной вами папке «Мой сайт» еще пять web-стр
Описание слайда:

Практическое задание Создайте в созданной вами папке «Мой сайт» еще пять web-страниц под именами foto1.html, foto2.html, foto3.html и т.д.Разместите на новых страницах крупные заголовки, поясняющие значение фотографий и пять скачанных ранее фотографий из интернета (Оценка «3»).На странице index.html разместите пять гиперссылок на вновь созданные странички, поясняющих какая именно фотография должна открыться (Оценка «4»).На новых страничках разместите по одной ссылке для возврата на главную страницу (Оценка «5»).

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


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