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

Содержание

Web-страницы и Web-сайты. Структура веб-страницы.

Слайд 1Разработка Web-сайтов с использованием языка разметки гипертекста HTML

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

Слайд 2Web-страницы и Web-сайты. Структура веб-страницы.

Web-страницы и Web-сайты. Структура веб-страницы.

Слайд 3Понятие веб-сайта
Информация во Всемирной паутине хранится в форме Web-сайтов.
Web-сайт по

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

Слайд 4Виды веб-сайтов
Официальные (правительство, школа…)
Коммерческие
Личные

Виды веб-сайтовОфициальные (правительство, школа…)Коммерческие Личные

Слайд 5Достоинства веб-страниц:
Малый информационный объем («легкие»)
Пригодны для просмотра в разных ОС.
Динамичные.
Интерактивные.

Достоинства веб-страниц:Малый информационный объем («легкие»)Пригодны для просмотра в разных ОС.Динамичные.Интерактивные.

Слайд 6Этапы создания веб-сайта:
Построить сайт на локальном компьютере.
Протестировать (проверить правильность работы).
Разместить в

Интернете – подобрать сервер для хостинга (платный или бесплатный).
Этапы создания веб-сайта:Построить сайт на локальном компьютере.Протестировать (проверить правильность работы).Разместить в Интернете – подобрать сервер для хостинга

Слайд 7Программы для создания сайта:
1) простейший текстовый редактор (без форматирования текста):

Блокнот
2) браузер для просмотра страниц:
Internet Explorer
3) программа обработки изображений:
Photoshop
Программы для создания сайта:1) простейший текстовый редактор (без форматирования текста): Блокнот2) браузер

Слайд 8Визуальные веб-редакторы
Создание сайта на языке HTML очень трудоемкое, нужны специальные знания.
Есть

визуальные веб-редакторы (программы) для создания сайтов. Работают по принципу WYSIWYG (что видишь, то и получишь).
Визуальные веб-редакторыСоздание сайта на языке HTML очень трудоемкое, нужны специальные знания.Есть визуальные веб-редакторы (программы) для создания сайтов.

Слайд 9Структура Web-страницы

Структура Web-страницы

Слайд 10HyperText Markup Language (HTML) - язык разметки гипертекста.

HyperText Markup Language (HTML) - язык разметки гипертекста.

Слайд 11Элемент - конструкция языка HTML. Это контейнер, содержащий данные и позволяющий

отформатировать их определенным образом. Любая Web-страница представляет собой набор элементов. Одна из основных идей гипертекста возможность вложения элементов.
Элемент - конструкция языка HTML. Это контейнер, содержащий данные и позволяющий отформатировать их определенным образом. Любая Web-страница

Слайд 12Тэги
Вид Web-страницы задается управляющими командами - тэгами, которые заключаются в угловые

скобки < >
Тэги бывают одиночные (неповторяющиеся) или парные (контейнеры): перед закрывающим тэгом контейнера пишут прямой слэш (/)

Тэги пишутся английскими буквами (прописными, строчными).
ТэгиВид Web-страницы задается управляющими командами - тэгами, которые заключаются в угловые скобки < > Тэги бывают одиночные

Слайд 13Структура Web-страницы
Весь HTML-код страницы помещается внутрь главного контейнера: .

Web-страница разделяется

на
2 логические части:
заголовок (HEAD)
содержание (BODY).
Структура Web-страницыВесь HTML-код страницы помещается внутрь главного контейнера: . Web-страница разделяется на 2 логические части:

Слайд 141. Взаимное расположение элементов HTML, HEAD, TITLE, BODY должно быть стандартным

на любой странице.


.....


..................


2. Всегда использовать конечные тэги (не забывать

, , и др.).
3. Не нарушать правила вложения тэгов.
Правильно:

Заголовок крупный

Заголовок поменьше


Неправильно:

Заголовок крупный

Заголовок поменьше


Правила синтаксиса

1. Взаимное расположение элементов HTML, HEAD, TITLE, BODY должно быть стандартным на любой странице........................2. Всегда использовать конечные

Слайд 154. Любая полезная информация должна находиться между начальным и конечным тэгами,

указывающими ее формат.

5. Все атрибуты располагаются в начальном тэге.

4. Любая полезная информация должна находиться между начальным и конечным тэгами, указывающими ее формат.5. Все атрибуты располагаются

Слайд 16Заголовок веб-страницы
Заголовок Web-страницы заключается в контейнер
Содержит название документа и

справочную информацию о странице (например, тип кодировки), которая используется браузером для ее правильного отображения.

Название Web-страницы содержится в контейнере и отображается в верхней строке окна браузера при просмотре страницы.


<тitlе>компьютер


Заголовок веб-страницыЗаголовок Web-страницы заключается в контейнер Содержит название документа и справочную информацию о странице (например, тип кодировки),

Слайд 17Пишем шаблон веб-страницы


Компьютер




Пишем шаблон веб-страницы Компьютер

Слайд 18Основное содержание веб-страницы
Основное содержание страницы помещается в контейнер .
Может содержать:

текст, таблицы, бегущие строки, картинки, ссылки, звуковые файлы...


Поместим на страницу текст «Все о компьютере»:
Все о компьютере
Основное содержание веб-страницыОсновное содержание страницы помещается в контейнер .Может содержать: текст, таблицы, бегущие строки, картинки, ссылки,

Слайд 19Шаблон веб-страницы


компьютер



все о компьютере


Шаблон веб-страницы компьютер

Слайд 21Как сохранить веб-страницу
1. Cоздать для сайта специальную папку и сохранять все

файлы сайта в этой папке.

2. Web-страницу сохранить в виде файла с именем index.html - это титульный лист сайта (первым загружается в браузер)
Расширения файла Web-страницы – .htm или .html

Как сохранить веб-страницу1. Cоздать для сайта специальную папку и сохранять все файлы сайта в этой папке.2. Web-страницу

Слайд 22Создаем свой сайт….
Нужно различать имя файла index.html - под которым Web-страница

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

1. В Блокнот ввести HTML-код Web-страницы.
2. Сохранить файл под именем index.html в папке сайта. Выбрать тип файла – «Все файлы».
3. Открыть этот файл в браузере для просмотра.
Создаем свой сайт….Нужно различать имя файла index.html - под которым Web-страница хранится в файловой системе, и собственно

Слайд 24Учебный сайт «Компьютер»
Проект сайта:
сколько Web-страниц будет входить в сайт,
тематика

страниц,
связи страниц (гиперссылки).

Структура сайта «Компьютер»:
1) начальная (домашняя) страница;
2) «Программы» (классификация программного обеспечения);
3) «Словарь» (словарь компьютерных терминов);
4) «Анкета» (опрос посетителей сайта).
Учебный сайт «Компьютер»Проект сайта: сколько Web-страниц будет входить в сайт, тематика страниц,связи страниц (гиперссылки).Структура сайта «Компьютер»:1) начальная

Слайд 25Вопросы
В какой форме хранится информация во Всемирной паутине?
Что такое Web-сайт?
Типы

сайтов.
В чем преимущества веб-страниц перед обычными текстовыми документами?
Каким образом веб-страницы объединяются в веб-сайты?
Что такое тэги?
Что такое тэговый контейнер? Записать главный контейнер веб-страницы.
Какова логическая структура веб-страницы?
Написать шаблон веб-страницы.
ВопросыВ какой форме хранится информация во Всемирной паутине? Что такое Web-сайт?Типы сайтов.В чем преимущества веб-страниц перед обычными

Слайд 26Форматирование текста на Web-странице

Форматирование текста на Web-странице

Слайд 27Форматирование текста
Пока страница не слишком привлекательна: мелкий шрифт и черный текст

на белом фоне. Но с помощью тэгов можно украсить текст.

1. Заголовки: тэги от <Н1> (самый крупный) до <Н6> (самый мелкий). <Н1> Всё о компьютере

2. Шрифт (FONT). Некоторые тэги имеют атрибуты - имена свойств, могут принимать определенные значения.
FONT face=“Arial” – гарнитура шрифта
size=4 – размер
color=“red” – цвет

3. Выравнивание (ALIGN). Текст обычно выравнивается по левому краю страницы, однако принято заголовок размещать по центру.
ALIGN =“left", ALIGN="right", <Н1 ALIGN="center"> Bcё о компьютере
ALIGN="center"
Форматирование текстаПока страница не слишком привлекательна: мелкий шрифт и черный текст на белом фоне. Но с помощью

Слайд 28Цвет шрифта

Значение атрибута COLOR можно задать 2-мя способами:
а) названием цвета (например,

"red", "green", "blue" и так далее),
б) его шестнадцатеричным значением в RGB-формате "#RRGGBB", где две первые шестнадцатеричные цифры задают интенсивность красного (red), две следующие — интенсивность зеленого (green) и две последние — интенсивность синего (blue) цветов.
Минимальная интенсивность цвета задается шестнадцатеричным числом 00, а максимальная — FF. Синий цвет = "#0000FF".

Таким образом, задать синий цвет заголовка можно тэгом FONT с атрибутом COLOR:
<Н1 ALIGN="center">Bcё о компьютере

Цвет шрифтаЗначение атрибута COLOR можно задать 2-мя способами:а) названием цвета (например,

Слайд 30Форматирование текста
4. Горизонтальная линия отделит заголовок от остального содержания страницы с

помощью одиночного тэга
.

5. Абзацы: <Р>. При просмотре в браузере абзацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания.
Форматирование текста4. Горизонтальная линия отделит заголовок от остального содержания страницы с помощью одиночного тэга .5. Абзацы: .

Слайд 31Учебный сайт «Компьютер»
Отформатировать текст начальной страницы:
1) Создать и выровнять 2 абзаца

(задание 3)
2) Выделить цветом заголовок страницы и отделить его горизонтальной чертой (задание 4)
Учебный сайт «Компьютер»Отформатировать текст начальной страницы:1) Создать и выровнять 2 абзаца (задание 3)2) Выделить цветом заголовок страницы

Слайд 33Вопросы
Что такое тэги?
Что такое тэговый контейнер? Записать главный контейнер веб-страницы.
Какова логическая

структура веб-страницы?
Написать шаблон веб-страницы.
Перечислить 5 тегов форматирования страницы.
Что такое атрибут тега?
Какие существуют способы задания цвета на веб-странице?
Какие теги используются для ввода заголовка? Форматирования шрифта? Ввода абзаца?
ВопросыЧто такое тэги?Что такое тэговый контейнер? Записать главный контейнер веб-страницы.Какова логическая структура веб-страницы?Написать шаблон веб-страницы.Перечислить 5 тегов

Слайд 34Вставка изображений в Web-страницы

Вставка изображений в Web-страницы

Слайд 35Вставка изображений
На Web-страницах могут быть графические файлы 3 форматов — GIF,

JPG и PNG. Если рисунок сохранен в другом формате, то его необходимо предварительно преобразовать в один из этих форматов.

Для вставки изображения используется тэг с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете.
1) картинка на локальном компьютере в папке с сайтом:

2) картинка в другой папке на локальном компьютере:

3) картинка находится на удаленном сервере в Интернете:

Вставка изображенийНа Web-страницах могут быть графические файлы 3 форматов — GIF, JPG и PNG. Если рисунок сохранен

Слайд 36Поясняющий текст. Расположение рисунка в тексте.
Иллюстрации на Web-страницах стали неотъемлемым элементом

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


Положение рисунка в тексте – определяет атрибут ALIGN тэга : ТОР, MIDDLE, BOTTOM, LEFT , RIGHT.

Компьютер
Поясняющий текст. Расположение рисунка в тексте.Иллюстрации на Web-страницах стали неотъемлемым элементом дизайна. Однако пользователи в целях экономии

Слайд 37Вид готового сайта

Вид готового сайта

Слайд 38
Код страницы сайта

Компьютер



Все о компьютере



SRC="computer.jpg" ALT="Компьютер" ALIGN="right">

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


Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.





Код страницы сайта Компьютер Все о компьютере На этом сайта вы сможете получить различную информацию о

Слайд 39Вопросы
Что такое Web-сайт?
Типы сайтов.
Каким образом веб-страницы объединяются в веб-сайты?
Что такое

тэги? тэговый контейнер? Записать главный контейнер веб-страницы.
Какова логическая структура веб-страницы?
Перечислить 5 тегов форматирования страницы.
Что такое атрибут тега?
Какие существуют способы задания цвета на веб-странице?
Какие теги используются для ввода заголовка? Форматирования шрифта? Ввода абзаца?
Какой тег и его атрибуты используются для вставки изображений?

ВопросыЧто такое Web-сайт?Типы сайтов.Каким образом веб-страницы объединяются в веб-сайты? Что такое тэги? тэговый контейнер? Записать главный контейнер

Слайд 40Гиперссылки на Web-страницах

Гиперссылки на Web-страницах

Слайд 41
Гиперссылки позволяют загружать в браузер другие веб-страницы, связанные с предыдущей.
Гиперссылка состоит

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

Слайд 42Виды гиперссылок
1) внутренняя:
Указатель ссылки
2) внешняя:
Указатель ссылки

Виды гиперссылок1) внутренняя: Указатель ссылки2) внешняя: Указатель ссылки

Слайд 43Указатели гиперссылок
Указатель – видимая часть гиперссылки: текст или картинка

Указатели гиперссылокУказатель – видимая часть гиперссылки: текст или картинка

Слайд 44Адресная часть гиперссылок
Перейти на другие веб-страницы:
Указатель ссылки
Открыть картинку в

браузере:
Картинка
Прослушать звук (запуск встроенного в браузер проигрывателя):
Звук
Сохранить файл (запуск встроенного в браузер менеджера загрузки файлов):
Скачать файл
Адресная часть гиперссылокПерейти на другие веб-страницы: Указатель ссылкиОткрыть картинку в браузере: КартинкаПрослушать звук (запуск встроенного в браузер

Слайд 45Гиперссылка на электронную почту
Гиперссылка этого типа заключается в особый контейнер


HREF=“mailto:username@server.ru”>Наш е-mail

Гиперссылка на электронную почтуГиперссылка этого типа заключается в особый контейнер Наш е-mail

Слайд 46Вид готовой страницы сайта

Вид готовой страницы сайта

Слайд 47Код страницы сайта

Компьютер


Все о компьютере



SRC="computer.jpg" ALT="Компьютер" ALIGN="right">

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


Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.



[Программы]  
[Словарь]  
[Комплектующие] 
[Анкета]




E-mail: mailbox@provaider.ru





Код страницы сайта Компьютер Все о компьютере На этом сайта вы сможете получить различную информацию о

Слайд 48Вопросы
Какой тег и его атрибуты используются для вставки изображений?
Какой тег и

его атрибуты используются для вставки гиперссылок?

ВопросыКакой тег и его атрибуты используются для вставки изображений?Какой тег и его атрибуты используются для вставки гиперссылок?

Слайд 49Списки на Web-страницах

Списки на Web-страницах

Слайд 50Виды списков
Нумерованные
Маркированные
Списки терминов (как в словаре)
Вложенные списки

Виды списковНумерованныеМаркированныеСписки терминов (как в словаре)Вложенные списки

Слайд 51Нумерованный список
Список – в контейнере
Элемент списка – тег
Атрибут TYPE

– тип нумерации (арабские цифры; I – римские; а – латинские строчные буквы)

  1. Системные программы
  2. Прикладные программы
  3. Системы программирования

Нумерованный списокСписок – в контейнере Элемент списка – тег Атрибут TYPE – тип нумерации (арабские цифры; I

Слайд 52Маркированный список
Список – в контейнере
Элемент списка – тег
Атрибут TYPE

– тип маркеров (“disc”- диск, “square”- квадрат, “circle”-окружность)

  • Текстовые редакторы
  • Графические редакторы
  • Электронные таблицы
  • Системы управления базами данных




Маркированный списокСписок – в контейнере Элемент списка – тег Атрибут TYPE – тип маркеров (“disc”- диск, “square”-

Слайд 53Список терминов
Список – в контейнере
Элемент списка – тег
Сначала пишется

термин, затем его определение (как в словаре)


Список терминовСписок – в контейнере Элемент списка – тег Сначала пишется термин, затем его определение (как в

Слайд 54Интерактивные формы на Web-страницах

Интерактивные формы на Web-страницах

Слайд 55Вопросы
Какие теги используются для создания нумерованных и маркированных списков?


ВопросыКакие теги используются для создания нумерованных и маркированных списков?

Слайд 56Понятие интерактивной формы
Для общения посетителей сайта с его создателями на веб-странице

размещают интерактивные формы.
Формы содержат различные элементы управления:
текстовые поля
раскрывающиеся списки
флажки
переключатели…

Понятие интерактивной формыДля общения посетителей сайта с его создателями на веб-странице размещают интерактивные формы.Формы содержат различные

Слайд 57Текстовое поле
Основной контейнер

Текстовое поле – для ввода текста с клавиатуры:

тэг с атрибутами:
TYPE=“text” – тип содержимого (текст)
NAME=“____” – имя поля
SIZE=“40” – длина поля ввода (в символах)




- разделитель строк (перевод курсора на новую строку)
Текстовое полеОсновной контейнер Текстовое поле – для ввода текста с клавиатуры: тэг с атрибутами: TYPE=“text” – тип

Слайд 58Переключатели (радиокнопки)
Круглая кнопка для выбора одного из нескольких вариантов

ответов: TYPE=“radio”
Все элементы этой группы должны иметь одинаковое имя: NAME=“group”
Атрибуты VALUE содержат варианты выбора ответов: VALUE=“учащийся”
У каждого VALUE свой вариант ответа.


Переключатели (радиокнопки)Круглая кнопка для выбора одного из нескольких вариантов ответов: TYPE=“radio” Все элементы этой группы

Слайд 59Флажки
Квадратное окошечко для выбора нескольких ответов из предложенных вариантов: TYPE=“checkbox”
Каждый

элемент этой группы должен иметь свое имя: NAME=“box1”, NAME=“box2”, …..
Атрибуты VALUE содержат варианты выбора ответов: VALUE=“WWW”, VALUE=“e-mail”, ….
У каждого VALUE свой вариант ответа.

WWW
ФлажкиКвадратное окошечко для выбора нескольких ответов из предложенных вариантов: TYPE=“checkbox” Каждый элемент этой группы должен иметь свое

Слайд 60Поля списков
Для создания раскрывающего списка используют контейнер
В нем каждый элемент

списка задается тэгом
Поля списковДля создания раскрывающего списка используют контейнер В нем каждый элемент списка задается тэгом

Слайд 61Текстовая область
Текстовая область с линейкой прокрутки – для ввода текста произвольной

длины.
Контейнер
Атрибуты: NAME - задает имя области
ROWS - число строк
COLS - число столбцов

Текстовая областьТекстовая область с линейкой прокрутки – для ввода текста произвольной длины.Контейнер Атрибуты: NAME -

Слайд 62Отправка данных из формы
Кнопка отправки создается тэгом
Атрибуты:
TYPE=“submit”
VALUE=“Отправить” (надпись на

кнопке)

Чтобы данные из формы передать по электронной почте, используют контейнер:


Отправка данных из формыКнопка отправки создается тэгом Атрибуты: TYPE=“submit”VALUE=“Отправить” (надпись на кнопке)Чтобы данные из формы передать по

Слайд 63Готовая анкета

Готовая анкета
Скачать презентацию

Похожие презентации

Презентация у уроку Информационные процессы Презентация у уроку Информационные процессы 169
Презентация Безопасность в Интернете Презентация Безопасность в Интернете 185
Подготовка компьютера к работе.(2 класс) Подготовка компьютера к работе.(2 класс) 265
Презентация по информатике на тему Внутренние устройства ПК Презентация по информатике на тему Внутренние устройства ПК 249
Мини-викторина по теме: Программирование циклических алгоритмов Мини-викторина по теме: Программирование циклических алгоритмов 405
Презентация по дисциплине Информационные технологии в профессиональной деятельности на тему Графика Презентация по дисциплине Информационные технологии в профессиональной деятельности на тему Графика 153

Что такое shareslide.ru?

Это сайт презентаций, где можно хранить и обмениваться своими презентациями, докладами, проектами, шаблонами в формате PowerPoint с другими пользователями. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами.

Для правообладателей

Яндекс.Метрика

Обратная связь

Email: Нажмите что бы посмотреть