Презентация, доклад на тему Internet HTML

Содержание

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

Слайд 1Введение в технологию создания Web-сайтов

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

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


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

Слайд 3Введение
Интернет и WWW прочно вошли в нашу жизнь, и нам уже

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

Слайд 4Понятие web сайта
Информация, доступная пользователям Internet, располагается на Web-серверах.
Информация организованна в

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

Web сайт

Страница 1

Страница 2

текст

графика, видео, аудио

текст

графика, видео, аудио

Понятие web сайтаИнформация, доступная пользователям Internet, располагается на Web-серверах.Информация организованна в виде Web-сайтов. Web-сайт - это информационный

Слайд 5Классификация Web-сайтов
Личные страницы - содержат информацию об авторе, его интересах.
Информационные

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

Слайд 6Навигационная схема Web-сайта
Главными задачами при разработке Web-сайта являются четкая организация

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

Планирование

Реализация

Тестирование

Публикация

Рекламирование

Сопровождение

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

Слайд 7Планирование
На стадии планирования определяется следующее:
цели создания Web-сайта - какие задачи он

должен выполнять и на какую аудиторию он рассчитан?
Какая информация будет представлена и в каком порядке.








Определить кол-во
страниц

Определить
название
сайта

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

Слайд 8Планирование
На первую страницу, как правило, размещается информация о самом сайте, для

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

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

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

Слайд 10Планирование
Определить навигацию по сайту – простота и удобство навигации является одним

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








Определить
навигацию
по сайту

Определить
шаблон страниц
сайта

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

Слайд 11Планирование - Маркетинговый анализ
В итоге на этом этапе необходимо:
Представлять

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

Слайд 12Планирование - Маркетинговый анализ
Анализ сайтов-конкурентов для выявления у них минусов и

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

Слайд 13Реализация
На этом этапе проводится подготовка текстового и графического материала (печать,

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

Слайд 14Реализация
Можно менять в каждой новой странице только содержимое и адресацию ссылок,

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

Слайд 15Реализация
При создании Web-страниц необходимо учитывать, что разработанный Вами Web-сайт может выглядеть

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

Слайд 16Тестирование
Тестирование состоит из двух этапов:
тестирование на работоспособность
тестирование на удобство

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

Слайд 17Публикация
В завершение готовый Web-сайт необходимо опубликовать на Web-сервере, чтобы он был

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

Слайд 18Рекламирование
Существует множество приемов рекламирования сайта:
размещение информации на поисковом Web-сайте
организация взаимных ссылок

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

Слайд 19Сопровождение
Содержимое Web-сайта может подвергаться неоднократным изменениям.
Важно, чтобы предоставляемая на Web-сайте

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

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

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

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

структура - материал весь располагается последовательно

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

Слайд 22Навигационная схема Web-сайта
Иерархическая структура - сначала создаются категории высшего уровня,

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

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

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

Слайд 24Как правильно регистрировать сайт?
После публикации сайта, для повышения посещаемости необходимо заняться

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

Слайд 25Как правильно регистрировать сайт?
Самый эффективным способ раскрутки - регистрация в поисковых

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

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

их от поисковых систем заклю-чается в том, что все запросы просматриваются людьми, которые оцени-вают ценность сайта, выбирают для него кате-горию в каталоге и корректируют предо-ставленное описание ваше-го сайта.
Как правильно регистрировать сайт?Интернет-каталоги - списки ресурсов, распределенные по категориям.Основное отличие их от поисковых систем заклю-чается в

Слайд 27Ключевые слова
Правильный выбор ключевых слов позволяет сильно повысить позицию сайта при

запросах.
Какие же слова следует подбирать?
В качестве ключевых слов необходимо выбирать те, что наиболее верно отражают специфику сайта.
При этом нужно избегать лишних и общих фраз.
Нужно подобрать порядка 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

Слайд 30Основы HTML
HyperText Markup Language (HTML) -- язык разметки гипертекста -- предназначен

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

Слайд 31Теговая модель документа
HTML-документ содержит:
собственно текст, т. е. данные, составляющие

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

Слайд 32Таговая модель документа
Для файлов, содержащие HTML-документы, приняты расширения .htm или

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


  <имя_тега [атрибуты]>

Таговая модель документа Для файлов, содержащие HTML-документы, приняты расширения .htm или .html. Прописные и строчные буквы при записи

Слайд 33Таговая модель документа
Действие любого парного тега начинается с того места,

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

Слайд 34Структура документа
Самым главным из тегов HTML является одноименный тег --

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

Слайд 35Структура документа
HTML-документ состоит из двух частей: заголовок (head) и тело

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

Слайд 36Структура документа
Включение в документ заголовочной части не является обязательным. Задачей

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

Слайд 37Структура документа
В заголовок документа включают парный тег ... ,

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

Слайд 38Основные средства форматирования текста
Как и в Word, основой структуры текста

в HTML является абзац.
Для выделения абзаца служит таг

, закрывать который не обязательно.
В таге

можно указать способ выравнивания текста абзаца в виде:
Для выравнивания текста абзаца по левому краю, правому краю, по центру или по ширине следует использовать, соответственно, опции LEFT, RIGHT, CENTER, JUSTIFY


Основные средства форматирования текста Как и в Word, основой структуры текста в HTML является абзац. Для выделения

Слайд 39Гиперссылки
Для создания гиперссылки служит таг вида:

URL может быть как абсолютным,

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

текст ссылки

Если опция TARGET не указана, документ открывается в текущем окне браузера, а если указана в виде TARGET="_BLANK">, в новом окне.
Текст ссылки внутри тага может быть любым. Точно так же в таг можно поместить и изображение.

, в новом окне. Текст ссылки внутри тага может быть любым. Точно так же в таг можно поместить и изображение. ">Гиперссылки Для создания гиперссылки служит таг вида:URL может быть как абсолютным, так и относительным. URL, ссылающийся на

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


Ссылка на рисунок оформляется тагом следующего вида:


Закрывать этот таг не нужно.
Опция SRC содержит абсолютный или относительный URL рисунка, если рисунок не найден, на его месте выведется пустая рамка.

BORDER="рамка" ALIGN="выравнивание"
HSPACE="отступ по горизонтали" VSPACE="отступ по вертикали"
ALT="текст">

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

Слайд 41Работа с рисунками
Опции WIDTH и HEIGHT определяют ширину и высоту

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

Слайд 42Работа с рисунками
Опции HSPACE и VSPACE, указываемые в пикселах, определяют

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

Слайд 43Внутренние ссылки
Внутренние ссылки применяются для лучшего чтения большого документа, если

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

Слайд 44Внутренние ссылки
Этап 2. Создание ссылки на указатель
Вместо указания в параметре

href адреса документа, необходимо поместить имя ссылки с префиксом #, говорящем о том, что это внутренняя ссылка.
Глава 5
Внутренние ссылки Этап 2. Создание ссылки на указательВместо указания в параметре href адреса документа, необходимо поместить имя

Слайд 45Фоновые изображения
Разработчики Web-страниц могут управлять цветом фона документа, а также

указывать изображения, используемые в качестве фонового.
Для задания цвета фона употребляется параметр bgcolor тэга , а фоновое изображение включается в документ при помощи параметра background.
Фоновое изображение для HTML-документа всегда заполняет всё окно просмотра.
Пример записи тэга с указанием фонового цвета и фонового изображения:

Фоновые изображения Разработчики Web-страниц могут управлять цветом фона документа, а также указывать изображения, используемые в качестве фонового.

Слайд 46Задание
Создать веб – сайт “Прогулка по Большой Покровке” в текстовом редакторе

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

Слайд 47Задание - cтраница Index.html


Прогулка по Большой Покровке


Начало прогулки

-
площадь Горького



вперед




Задание - cтраница Index.html Прогулка по Большой ПокровкеНачало прогулки - площадь Горького
Скачать презентацию

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

Презентация 8класқа арналған.информатика пәні бойынша Презентация 8класқа арналған.информатика пәні бойынша 160
Сыныптан тыс жұмыс Информатика патшалығында Презентация Сыныптан тыс жұмыс Информатика патшалығында Презентация 308
Презентация по информатике на тему: Кодирование информации Презентация по информатике на тему: Кодирование информации 185
Презентация по информатике на тему Растровая и векторная графика (7 класс) Презентация по информатике на тему Растровая и векторная графика (7 класс) 202
Внутренняя и внешняя паять компьютера Внутренняя и внешняя паять компьютера 175
Сортировка одномерного массива Сортировка одномерного массива 155

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

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

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

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

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

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