🗊Презентация Введение в технологию создания Web-сайтов

Категория: Интернет
Нажмите для полного просмотра!
Введение в технологию создания Web-сайтов, слайд №1Введение в технологию создания Web-сайтов, слайд №2Введение в технологию создания Web-сайтов, слайд №3Введение в технологию создания Web-сайтов, слайд №4Введение в технологию создания Web-сайтов, слайд №5Введение в технологию создания Web-сайтов, слайд №6Введение в технологию создания Web-сайтов, слайд №7Введение в технологию создания Web-сайтов, слайд №8Введение в технологию создания Web-сайтов, слайд №9Введение в технологию создания Web-сайтов, слайд №10Введение в технологию создания Web-сайтов, слайд №11Введение в технологию создания Web-сайтов, слайд №12Введение в технологию создания Web-сайтов, слайд №13Введение в технологию создания Web-сайтов, слайд №14Введение в технологию создания Web-сайтов, слайд №15Введение в технологию создания Web-сайтов, слайд №16Введение в технологию создания Web-сайтов, слайд №17Введение в технологию создания Web-сайтов, слайд №18Введение в технологию создания Web-сайтов, слайд №19Введение в технологию создания Web-сайтов, слайд №20Введение в технологию создания Web-сайтов, слайд №21Введение в технологию создания Web-сайтов, слайд №22Введение в технологию создания Web-сайтов, слайд №23Введение в технологию создания Web-сайтов, слайд №24Введение в технологию создания Web-сайтов, слайд №25Введение в технологию создания Web-сайтов, слайд №26Введение в технологию создания Web-сайтов, слайд №27Введение в технологию создания Web-сайтов, слайд №28Введение в технологию создания Web-сайтов, слайд №29Введение в технологию создания Web-сайтов, слайд №30Введение в технологию создания Web-сайтов, слайд №31Введение в технологию создания Web-сайтов, слайд №32Введение в технологию создания Web-сайтов, слайд №33Введение в технологию создания Web-сайтов, слайд №34Введение в технологию создания Web-сайтов, слайд №35Введение в технологию создания Web-сайтов, слайд №36Введение в технологию создания Web-сайтов, слайд №37Введение в технологию создания Web-сайтов, слайд №38Введение в технологию создания Web-сайтов, слайд №39Введение в технологию создания Web-сайтов, слайд №40Введение в технологию создания Web-сайтов, слайд №41Введение в технологию создания Web-сайтов, слайд №42Введение в технологию создания Web-сайтов, слайд №43Введение в технологию создания Web-сайтов, слайд №44Введение в технологию создания Web-сайтов, слайд №45Введение в технологию создания Web-сайтов, слайд №46Введение в технологию создания Web-сайтов, слайд №47

Содержание

Вы можете ознакомиться и скачать презентацию на тему Введение в технологию создания Web-сайтов. Доклад-сообщение содержит 47 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации


Слайд 1





Введение в технологию создания Web-сайтов 
Старкова Е.Е.
Описание слайда:
Введение в технологию создания Web-сайтов Старкова Е.Е.

Слайд 2





Содержание
Введение
Классификация Web-сайтов  
Этапы разработки Web-сайта
Навигационная схема Web-сайта
Как правильно регистрировать сайт?
Основы HTML 
Таговая модель документа
Структура документа
Вставка рисунка
Описание слайда:
Содержание Введение Классификация Web-сайтов Этапы разработки Web-сайта Навигационная схема Web-сайта Как правильно регистрировать сайт? Основы HTML Таговая модель документа Структура документа Вставка рисунка

Слайд 3





Введение
Интернет и WWW прочно вошли в нашу жизнь, и нам уже трудно представить свою деятельность без них. 
WWW – это огромный набор гипертекстовых документов, которые благодаря Интернет доступны в любой точке мира.
Создание Web- сайтов является одной из важнейших технологий разработки ресурсов Интернет.
Хороший сайт, вбирая в себя всю полезную информацию, является лучшей визитной карточкой образовательного учреждения.
Описание слайда:
Введение Интернет и WWW прочно вошли в нашу жизнь, и нам уже трудно представить свою деятельность без них. WWW – это огромный набор гипертекстовых документов, которые благодаря Интернет доступны в любой точке мира. Создание Web- сайтов является одной из важнейших технологий разработки ресурсов Интернет. Хороший сайт, вбирая в себя всю полезную информацию, является лучшей визитной карточкой образовательного учреждения.

Слайд 4





Понятие web сайта
Информация, доступная пользователям Internet, располагается на Web-серверах.
Информация организованна в виде Web-сайтов. 
Web-сайт - это информационный ресурс, состоящий из связанных между собой гипертекстовых документов (Web-страниц), размещенный на Web-сервере и имеющий индивидуальный адрес
Описание слайда:
Понятие web сайта Информация, доступная пользователям Internet, располагается на Web-серверах. Информация организованна в виде Web-сайтов. Web-сайт - это информационный ресурс, состоящий из связанных между собой гипертекстовых документов (Web-страниц), размещенный на Web-сервере и имеющий индивидуальный адрес

Слайд 5





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

Слайд 6





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

Слайд 7





Планирование
На стадии планирования определяется следующее:
цели создания Web-сайта - какие задачи он должен выполнять и на какую аудиторию он рассчитан?
Какая информация будет представлена и в каком порядке.
Описание слайда:
Планирование На стадии планирования определяется следующее: цели создания Web-сайта - какие задачи он должен выполнять и на какую аудиторию он рассчитан? Какая информация будет представлена и в каком порядке.

Слайд 8





Планирование
На первую страницу, как правило, размещается информация о самом сайте, для чего он предназначен и какая информация размещается на нем.
Описание слайда:
Планирование На первую страницу, как правило, размещается информация о самом сайте, для чего он предназначен и какая информация размещается на нем.

Слайд 9





Планирование
На остальных страницах необходимо разместить информацию в порядке определяемый различными критериями, например привлекательности.
Описание слайда:
Планирование На остальных страницах необходимо разместить информацию в порядке определяемый различными критериями, например привлекательности.

Слайд 10





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

Слайд 11





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

Слайд 12





Планирование - Маркетинговый анализ
Анализ сайтов-конкурентов для выявления у них минусов и недоработок, которые помогут создать лучший сайт, найти успешные решения 
У конкурентных сайтов анализируются такие параметры как: дизайн, цветовое решение, навигация, качество иллюстраций, информационное наполнение. 
А также скорость загрузки, наличие подписки на новости, поиск, системы бонусов.
Описание слайда:
Планирование - Маркетинговый анализ Анализ сайтов-конкурентов для выявления у них минусов и недоработок, которые помогут создать лучший сайт, найти успешные решения У конкурентных сайтов анализируются такие параметры как: дизайн, цветовое решение, навигация, качество иллюстраций, информационное наполнение. А также скорость загрузки, наличие подписки на новости, поиск, системы бонусов.

Слайд 13





Реализация
 На этом этапе проводится подготовка текстового и графического материала (печать, сканирование). 
Материал разбивается по файлам в соответствии со структурой.
Организуются ссылки между файлами сайта. 
Рекомендуется создать шаблон-заготовку страницы с основными структурными областями и стилевым оформлением и использовать ее для создания всех страниц узла.
Описание слайда:
Реализация На этом этапе проводится подготовка текстового и графического материала (печать, сканирование). Материал разбивается по файлам в соответствии со структурой. Организуются ссылки между файлами сайта. Рекомендуется создать шаблон-заготовку страницы с основными структурными областями и стилевым оформлением и использовать ее для создания всех страниц узла.

Слайд 14





Реализация
Можно менять в каждой новой странице только содержимое и адресацию ссылок, такая организация работы сократит время, потраченное на каждую из них. 
Необходимо обеспечить, чтобы посетитель попавший на любую страницу сайта мог легко сориентироваться – и важно в этом случае показать ему, что она является частью целого сайта, дать ему возможность перейти по ссылке на главную страницу и просмотреть остальные разделы.
Описание слайда:
Реализация Можно менять в каждой новой странице только содержимое и адресацию ссылок, такая организация работы сократит время, потраченное на каждую из них. Необходимо обеспечить, чтобы посетитель попавший на любую страницу сайта мог легко сориентироваться – и важно в этом случае показать ему, что она является частью целого сайта, дать ему возможность перейти по ссылке на главную страницу и просмотреть остальные разделы.

Слайд 15





Реализация
При создании Web-страниц необходимо учитывать, что разработанный Вами Web-сайт может выглядеть на компьютерах разных пользователей по-разному.
 Это зависит от многих параметров – типа браузера клиента, установок операционной системы, аппаратных ресурсов компьютера и т.п. 
Создание сайта, разработка структуры, размещение материала возможно:
В текстовом редакторе (например блокнот) - в ручную
С помощью различных средств разработки (FrontPage, Publisher) -  автоматически
Описание слайда:
Реализация При создании Web-страниц необходимо учитывать, что разработанный Вами Web-сайт может выглядеть на компьютерах разных пользователей по-разному. Это зависит от многих параметров – типа браузера клиента, установок операционной системы, аппаратных ресурсов компьютера и т.п. Создание сайта, разработка структуры, размещение материала возможно: В текстовом редакторе (например блокнот) - в ручную С помощью различных средств разработки (FrontPage, Publisher) - автоматически

Слайд 16





Тестирование
Тестирование  состоит из двух этапов: 
тестирование на работоспособность 
тестирование на удобство пользования интерфейсом.
На этапе тестирования на работоспособность проверяют, как функционирует Web-сайт, используя те же условия, при которых с ним будет работать пользователь. 
Проверяется работоспособность Web-сайта в различных браузерах
Для тестирования на удобство пользования интерфейсом крупные компании приглашают специальные группы людей.
Описание слайда:
Тестирование Тестирование состоит из двух этапов: тестирование на работоспособность тестирование на удобство пользования интерфейсом. На этапе тестирования на работоспособность проверяют, как функционирует Web-сайт, используя те же условия, при которых с ним будет работать пользователь. Проверяется работоспособность Web-сайта в различных браузерах Для тестирования на удобство пользования интерфейсом крупные компании приглашают специальные группы людей.

Слайд 17





Публикация
В завершение готовый Web-сайт необходимо опубликовать на Web-сервере, чтобы он был доступен через Internet. 
Существуют два способа размещения сайта:
На бесплатных web серверах. Например www.narod.ru. 
На web серверах провайдеров за деньги. В зависимости от уровня домена плата меняется.
Описание слайда:
Публикация В завершение готовый Web-сайт необходимо опубликовать на Web-сервере, чтобы он был доступен через Internet. Существуют два способа размещения сайта: На бесплатных web серверах. Например www.narod.ru. На web серверах провайдеров за деньги. В зависимости от уровня домена плата меняется.

Слайд 18





Рекламирование
Существует множество приемов рекламирования сайта:
размещение информации на поисковом Web-сайте
организация взаимных ссылок с другими сайтами и т.д.
Чтобы сайт пользовался популярностью необходимо, чтобы содержимое Web-сайта – была достоверна и полна. 
Информация должна быть представлена таким образом, чтобы пользователь, однажды посетивший Web-сайт, еще ни раз обратился к нему.
Описание слайда:
Рекламирование Существует множество приемов рекламирования сайта: размещение информации на поисковом Web-сайте организация взаимных ссылок с другими сайтами и т.д. Чтобы сайт пользовался популярностью необходимо, чтобы содержимое Web-сайта – была достоверна и полна. Информация должна быть представлена таким образом, чтобы пользователь, однажды посетивший Web-сайт, еще ни раз обратился к нему.

Слайд 19





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

Слайд 20





Навигационная схема Web-сайта 
Web-сайт состоит из связанных между собой гипертекстовых документов.
Гипертекст – это способ хранения и манипулирования информации, позволяющий устанавливать связи между любыми “информационными единицами”. 
Связь между информационными единицами осуществляется по гиперссылкам. 
Гиперссылка  - это выделенный фрагмент текста, с помощью которого осуществляется переход от одного документа к другому. Обычно гиперссылки выделяют синим цветом и подчеркиванием.
Навигационная схема Web-сайта зависит от его структуры и определяет то, как пользователь будет по нему перемещаться и получать доступ к информации.
Описание слайда:
Навигационная схема Web-сайта Web-сайт состоит из связанных между собой гипертекстовых документов. Гипертекст – это способ хранения и манипулирования информации, позволяющий устанавливать связи между любыми “информационными единицами”. Связь между информационными единицами осуществляется по гиперссылкам. Гиперссылка - это выделенный фрагмент текста, с помощью которого осуществляется переход от одного документа к другому. Обычно гиперссылки выделяют синим цветом и подчеркиванием. Навигационная схема Web-сайта зависит от его структуры и определяет то, как пользователь будет по нему перемещаться и получать доступ к информации.

Слайд 21





Навигационная схема Web-сайта 
Существует несколько видов структурирования информационного материала на Web-сайте:
Линейная структура - материал весь располагается последовательно
 Нелинейная структура
Описание слайда:
Навигационная схема Web-сайта Существует несколько видов структурирования информационного материала на Web-сайте: Линейная структура - материал весь располагается последовательно Нелинейная структура

Слайд 22





Навигационная схема Web-сайта 
Иерархическая структура  - сначала создаются категории высшего уровня,  затем материал в логическом порядке размещают в категории, которые находятся ниже. 
Иерархические структуры бывают двух видов: узкая глубокая и широкая неглубокая.
Узкая глубокая иерархия - характеризуется тем, что на верхнем уровне она имеет мало категорий. Для получения нужной информации пользователь вынужден переходить на несколько уровней вниз.
Описание слайда:
Навигационная схема Web-сайта Иерархическая структура - сначала создаются категории высшего уровня, затем материал в логическом порядке размещают в категории, которые находятся ниже. Иерархические структуры бывают двух видов: узкая глубокая и широкая неглубокая. Узкая глубокая иерархия - характеризуется тем, что на верхнем уровне она имеет мало категорий. Для получения нужной информации пользователь вынужден переходить на несколько уровней вниз.

Слайд 23





Навигационная схема Web-сайта 
Широкая неглубокая иерархия
Описание слайда:
Навигационная схема Web-сайта Широкая неглубокая иерархия

Слайд 24





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

Слайд 25





Как правильно регистрировать сайт?
Самый эффективным способ раскрутки - регистрация в поисковых системах и каталогах. 
Как правильно зарегистрироваться? 
«Правильная" регистрация обозначает, что в ответ на запрос по теме сайта,  получен список ссылок, в которых наш сайт находится одним из первых. 
Поисковая система - это очень большая база данных, которая хранит в себе полные тексты всех зарегистрированных сайтов. 
Необходимым компонентом поисковых систем являются роботы. 
Для регистрации, мы должны сообщить роботу адрес нашего сайта.
Описание слайда:
Как правильно регистрировать сайт? Самый эффективным способ раскрутки - регистрация в поисковых системах и каталогах. Как правильно зарегистрироваться? «Правильная" регистрация обозначает, что в ответ на запрос по теме сайта, получен список ссылок, в которых наш сайт находится одним из первых. Поисковая система - это очень большая база данных, которая хранит в себе полные тексты всех зарегистрированных сайтов. Необходимым компонентом поисковых систем являются роботы. Для регистрации, мы должны сообщить роботу адрес нашего сайта.

Слайд 26





Как правильно регистрировать сайт?
Интернет-каталоги - списки ресурсов, распределенные по категориям.
Описание слайда:
Как правильно регистрировать сайт? Интернет-каталоги - списки ресурсов, распределенные по категориям.

Слайд 27





Ключевые слова
Правильный выбор ключевых слов позволяет сильно повысить позицию сайта при запросах. 
Какие же слова следует подбирать? 
В качестве ключевых слов необходимо выбирать те, что наиболее верно отражают специфику сайта. 
При этом нужно избегать лишних и общих фраз. 
Нужно подобрать порядка 20-30 ключевых слов.
Провести тестирование выбранных слов, набрав в поисковой системе. 
Список, каких сайтов возвращается? Связаны ли они с тематикой  сайта?
Описание слайда:
Ключевые слова Правильный выбор ключевых слов позволяет сильно повысить позицию сайта при запросах. Какие же слова следует подбирать? В качестве ключевых слов необходимо выбирать те, что наиболее верно отражают специфику сайта. При этом нужно избегать лишних и общих фраз. Нужно подобрать порядка 20-30 ключевых слов. Провести тестирование выбранных слов, набрав в поисковой системе. Список, каких сайтов возвращается? Связаны ли они с тематикой сайта?

Слайд 28





Описание сайта
Описание должно быть лаконичным и емким, чтобы было понятно с первого взгляда.
При составлении описания не нужно указывать название сайта, оно и так будет проиндексировано. 
Необходимо избегать общих фраз типа: "Здесь Вам будет интересно", "На этом сайте есть все", "Заходи, не пожалеешь!" и т.п.
Описание должно соответствовать содержанию сайта, посетитель сам разберется, нужно ли ему идти на сайт.
Описание слайда:
Описание сайта Описание должно быть лаконичным и емким, чтобы было понятно с первого взгляда. При составлении описания не нужно указывать название сайта, оно и так будет проиндексировано. Необходимо избегать общих фраз типа: "Здесь Вам будет интересно", "На этом сайте есть все", "Заходи, не пожалеешь!" и т.п. Описание должно соответствовать содержанию сайта, посетитель сам разберется, нужно ли ему идти на сайт.

Слайд 29





Подготовка к регистрации
Пример описания:
Название сайта: Web-studio "Cherry"
URL сайта: http://www.cherry.spb.ru/
Описание сайта: Дизайн и изготовление web-сайтов, их поддержка и раскрутка в сети. Статьи и ссылки по web-дизайну, полезные рекомендации.
Ключевые слова: дизайн, design, web-design, веб-дизайн, web-мастеринг, web, веб, www, поддержка, раскрутка, реклама, баннер, баннерик, кнопка, оптимизация, статьи по веб-дизайну, ссылки по web-дизайну, gif, jpg, HTML.
Контактное лицо: Андрей Иванов
E-mail регистрации: cherry@mail.ru
Описание слайда:
Подготовка к регистрации Пример описания: Название сайта: Web-studio "Cherry" URL сайта: http://www.cherry.spb.ru/ Описание сайта: Дизайн и изготовление web-сайтов, их поддержка и раскрутка в сети. Статьи и ссылки по web-дизайну, полезные рекомендации. Ключевые слова: дизайн, design, web-design, веб-дизайн, web-мастеринг, web, веб, www, поддержка, раскрутка, реклама, баннер, баннерик, кнопка, оптимизация, статьи по веб-дизайну, ссылки по web-дизайну, gif, jpg, HTML. Контактное лицо: Андрей Иванов E-mail регистрации: cherry@mail.ru

Слайд 30





Основы HTML
HyperText Markup Language (HTML) -- язык разметки гипертекста -- предназначен для написания гипертекстовых документов, публикуемых в World Wide Web. 
Гипертекстовый документ -- это текстовый файл, имеющий специальные метки, называемые тегами, которые впоследствии опознаются браузером и используются им для отображения содержимого файла на экране компьютера.
Описание слайда:
Основы HTML HyperText Markup Language (HTML) -- язык разметки гипертекста -- предназначен для написания гипертекстовых документов, публикуемых в World Wide Web. Гипертекстовый документ -- это текстовый файл, имеющий специальные метки, называемые тегами, которые впоследствии опознаются браузером и используются им для отображения содержимого файла на экране компьютера.

Слайд 31





Таговая модель документа 
HTML-документ содержит:
 собственно текст, т. е. данные, составляющие содержимое документа. 
 теги (markup tags), называемые также флагами разметки, -- специальные конструкции языка HTML, используемые для разметки документа и управляющие его отображением. 
Именно теги языка HTML определяют, в каком виде будет представлен текст, какие его компоненты будут исполнять роль гипертекстовых ссылок, какие графические или мультимедийные объекты должны быть включены в документ. 
Программы просмотра HTML-документов (браузеры) интерпретируют флаги разметки и располагают текст и графику на экране соответствующим образом.
Описание слайда:
Таговая модель документа HTML-документ содержит: собственно текст, т. е. данные, составляющие содержимое документа. теги (markup tags), называемые также флагами разметки, -- специальные конструкции языка HTML, используемые для разметки документа и управляющие его отображением. Именно теги языка HTML определяют, в каком виде будет представлен текст, какие его компоненты будут исполнять роль гипертекстовых ссылок, какие графические или мультимедийные объекты должны быть включены в документ. Программы просмотра HTML-документов (браузеры) интерпретируют флаги разметки и располагают текст и графику на экране соответствующим образом.

Слайд 32





Таговая модель документа 
Для файлов, содержащие HTML-документы, приняты расширения .htm или .html. 
Прописные и строчные буквы при записи тегов не различаются.
 В большинстве случаев теги используются парами и состоит из открывающего (start tag) и закрывающего (end tag) тегов. 
Синтаксис открывающего тега: 
      
Прямые скобки, используемые в описании синтаксиса, означают, что данный элемент может отсутствовать. 
Синтаксис закрывающего тега: 
       
Описание слайда:
Таговая модель документа Для файлов, содержащие HTML-документы, приняты расширения .htm или .html.  Прописные и строчные буквы при записи тегов не различаются. В большинстве случаев теги используются парами и состоит из открывающего (start tag) и закрывающего (end tag) тегов. Синтаксис открывающего тега:        Прямые скобки, используемые в описании синтаксиса, означают, что данный элемент может отсутствовать. Синтаксис закрывающего тега:        

Слайд 33





Таговая модель документа 
Действие любого парного тега начинается с того места, где встретился открывающий тег и заканчивается при встрече соответствующего закрывающего тега. 
Пара, состоящая из открывающего и закрывающего тегов, называют контейнером, а часть текста, окаймленную открывающим и закрывающим тегом, -- элементом. 
Описание слайда:
Таговая модель документа Действие любого парного тега начинается с того места, где встретился открывающий тег и заканчивается при встрече соответствующего закрывающего тега. Пара, состоящая из открывающего и закрывающего тегов, называют контейнером, а часть текста, окаймленную открывающим и закрывающим тегом, -- элементом. 

Слайд 34





Структура документа 
Самым главным из тегов HTML является одноименный тег -- <HTML>. 
Он должен всегда открывать ваш документ, так же, как тег </HTML> должен непременно стоять в последней его строке. 
Эти теги обозначают, что находящиеся между ними строки представляют единый гипертекстовый документ. Без этих тегов браузер или другая программа просмотра не в состоянии идентифицировать формат документа и правильно его интерпретировать. 
Описание слайда:
Структура документа Самым главным из тегов HTML является одноименный тег -- <HTML>. Он должен всегда открывать ваш документ, так же, как тег </HTML> должен непременно стоять в последней его строке. Эти теги обозначают, что находящиеся между ними строки представляют единый гипертекстовый документ. Без этих тегов браузер или другая программа просмотра не в состоянии идентифицировать формат документа и правильно его интерпретировать. 

Слайд 35





Структура документа 
HTML-документ состоит из двух частей: заголовок (head) и тело (body), расположенных в следующем порядке:
Описание слайда:
Структура документа HTML-документ состоит из двух частей: заголовок (head) и тело (body), расположенных в следующем порядке:

Слайд 36





Структура документа 
Включение в документ заголовочной части не является обязательным. Задачей заголовка является представление необходимой информации для браузера и сервера HTTP. Информация, размещенная внутри заголовка документа, обычно не выводится на экран (кроме названия документа). 
Заголовок документа открывается тегом <HЕAD>, который обычно следует сразу же за тегом <HTML>. 
Закрывающий тег </HEAD> показывает конец этого раздела, между ними располагаются остальные теги заголовка документа. 
Описание слайда:
Структура документа Включение в документ заголовочной части не является обязательным. Задачей заголовка является представление необходимой информации для браузера и сервера HTTP. Информация, размещенная внутри заголовка документа, обычно не выводится на экран (кроме названия документа).  Заголовок документа открывается тегом <HЕAD>, который обычно следует сразу же за тегом <HTML>. Закрывающий тег </HEAD> показывает конец этого раздела, между ними располагаются остальные теги заголовка документа. 

Слайд 37





Структура документа 
В заголовок документа включают парный тег <TITLE> ... </TITLE>, определяющий название документа. 
Многие программы просмотра используют его как заголовок окна, в котором выводят документ. 
Хорошее название должно быть достаточно длинным для того, чтобы можно было корректно указать соответствующую страницу, и в то же время оно должно помещаться в заголовке окна.
Описание слайда:
Структура документа В заголовок документа включают парный тег <TITLE> ... </TITLE>, определяющий название документа. Многие программы просмотра используют его как заголовок окна, в котором выводят документ. Хорошее название должно быть достаточно длинным для того, чтобы можно было корректно указать соответствующую страницу, и в то же время оно должно помещаться в заголовке окна.

Слайд 38





Основные средства форматирования текста 
Как и в Word, основой структуры текста в HTML является абзац. 
Для выделения абзаца служит таг <P>, закрывать который не обязательно. 
В таге <P> можно указать способ выравнивания текста абзаца в виде:
Для выравнивания текста абзаца по левому краю, правому краю, по центру или по ширине следует использовать, соответственно, опции LEFT, RIGHT, CENTER, JUSTIFY
Описание слайда:
Основные средства форматирования текста Как и в Word, основой структуры текста в HTML является абзац. Для выделения абзаца служит таг <P>, закрывать который не обязательно. В таге <P> можно указать способ выравнивания текста абзаца в виде: Для выравнивания текста абзаца по левому краю, правому краю, по центру или по ширине следует использовать, соответственно, опции LEFT, RIGHT, CENTER, JUSTIFY

Слайд 39





Гиперссылки 
Для создания гиперссылки служит таг вида:
URL может быть как абсолютным, так и относительным. 
URL, ссылающийся на закладку в текущем документе, имеет вид #имя_закладки, а для того, чтобы создать закладку, достаточно поместить нужное слово или фразу в таг <A NAME="имя_закладки">текст</A>.
Описание слайда:
Гиперссылки Для создания гиперссылки служит таг вида: URL может быть как абсолютным, так и относительным. URL, ссылающийся на закладку в текущем документе, имеет вид #имя_закладки, а для того, чтобы создать закладку, достаточно поместить нужное слово или фразу в таг <A NAME="имя_закладки">текст</A>.

Слайд 40





Работа с рисунками 
Браузеры поддерживают рисунки в форматах GIF и JPG. 
Ссылка на рисунок оформляется тагом следующего вида:

Закрывать этот таг не нужно. 
Опция SRC содержит абсолютный или относительный URL рисунка, если рисунок не найден, на его месте выведется пустая рамка.
Описание слайда:
Работа с рисунками Браузеры поддерживают рисунки в форматах GIF и JPG. Ссылка на рисунок оформляется тагом следующего вида: Закрывать этот таг не нужно. Опция SRC содержит абсолютный или относительный URL рисунка, если рисунок не найден, на его месте выведется пустая рамка.

Слайд 41





Работа с рисунками 
Опции WIDTH и HEIGHT определяют ширину и высоту рисунка в пикселах (точках). 
Значение опции BORDER также указывается в пикселах и определяет ширину рамки вокруг рисунка. Если рамка не нужна, значением этой опции следует сделать 0.
Опция ALIGN определяет размещение рисунка относительно текста, единственные понимаемые всеми браузерами значения — LEFT (слева) и RIGHT (справа).
Описание слайда:
Работа с рисунками Опции WIDTH и HEIGHT определяют ширину и высоту рисунка в пикселах (точках). Значение опции BORDER также указывается в пикселах и определяет ширину рамки вокруг рисунка. Если рамка не нужна, значением этой опции следует сделать 0. Опция ALIGN определяет размещение рисунка относительно текста, единственные понимаемые всеми браузерами значения — LEFT (слева) и RIGHT (справа).

Слайд 42





Работа с рисунками 
Опции HSPACE и VSPACE, указываемые в пикселах, определяют размер свободного места вокруг рисунка по горизонтали и вертикали.
Текст, переданный в опции ALT, выводится вместо рисунка, если в браузере отключен вывод рисунков или они не успели загрузиться, а также показывается в качестве подсказки при наведении "мышки" на рисунок. Обычно этот текст содержит название рисунка.
Описание слайда:
Работа с рисунками Опции HSPACE и VSPACE, указываемые в пикселах, определяют размер свободного места вокруг рисунка по горизонтали и вертикали. Текст, переданный в опции ALT, выводится вместо рисунка, если в браузере отключен вывод рисунков или они не успели загрузиться, а также показывается в качестве подсказки при наведении "мышки" на рисунок. Обычно этот текст содержит название рисунка.

Слайд 43





Внутренние ссылки 
Внутренние ссылки применяются для лучшего чтения большого документа, если он имеет оглавление со ссылками на соответствующие разделы.
Для построения внутренней ссылки нужно:
Этап 1. Создать указатель, определяющий место назначения. 
Например, если  создать ссылку на текст определенной главы документа, нужно разместить там указатель и дать ему имя при помощи параметра name тэга <A>.
 При этом параметр href не используется, и браузер не выделяет содержимое тэга <A>. Например:
<A name="chapter_5"> </A>
Описание слайда:
Внутренние ссылки Внутренние ссылки применяются для лучшего чтения большого документа, если он имеет оглавление со ссылками на соответствующие разделы. Для построения внутренней ссылки нужно: Этап 1. Создать указатель, определяющий место назначения. Например, если создать ссылку на текст определенной главы документа, нужно разместить там указатель и дать ему имя при помощи параметра name тэга <A>. При этом параметр href не используется, и браузер не выделяет содержимое тэга <A>. Например: <A name="chapter_5"> </A>

Слайд 44





Внутренние ссылки 
Этап 2. Создание ссылки на указатель
Вместо указания в параметре href адреса документа, необходимо  поместить имя ссылки с префиксом #, говорящем о том, что это внутренняя ссылка.
<A name="#chapter_5">Глава 5</A>
Описание слайда:
Внутренние ссылки Этап 2. Создание ссылки на указатель Вместо указания в параметре href адреса документа, необходимо поместить имя ссылки с префиксом #, говорящем о том, что это внутренняя ссылка. <A name="#chapter_5">Глава 5</A>

Слайд 45





Фоновые изображения 
Разработчики Web-страниц могут управлять цветом фона документа, а также указывать изображения, используемые в качестве фонового. 
 Для задания цвета фона употребляется параметр bgcolor тэга <BODY>, а фоновое изображение включается в документ при помощи параметра background. 
Фоновое изображение для HTML-документа всегда заполняет всё окно просмотра. 
Пример записи тэга <BODY> с указанием фонового цвета и фонового изображения:
<BODY bgcolor="gray" background="texture.gif">
Описание слайда:
Фоновые изображения Разработчики Web-страниц могут управлять цветом фона документа, а также указывать изображения, используемые в качестве фонового. Для задания цвета фона употребляется параметр bgcolor тэга <BODY>, а фоновое изображение включается в документ при помощи параметра background. Фоновое изображение для HTML-документа всегда заполняет всё окно просмотра. Пример записи тэга <BODY> с указанием фонового цвета и фонового изображения: <BODY bgcolor="gray" background="texture.gif">

Слайд 46





Задание
Создать веб – сайт “Прогулка по Большой Покровке” в текстовом редакторе блокнот.
Сайт состоит из 4 страниц, название страниц и структура  сайта показана ниже:
Описание слайда:
Задание Создать веб – сайт “Прогулка по Большой Покровке” в текстовом редакторе блокнот. Сайт состоит из 4 страниц, название страниц и структура сайта показана ниже:

Слайд 47





Задание - cтраница Index.html
Описание слайда:
Задание - cтраница Index.html



Похожие презентации
Mypresentation.ru
Загрузить презентацию