Презентация "WEB-САЙТ. Разработка WEB-САЙТОВ"

Подписи к слайдам:

WEB-САЙТ. Разработка WEB-САЙТОВ. Web-страница- это отдельный документ (комбинация текста, рисунков, анимации, звука и прочее), который имеет свой собственный адрес. Web-страница- это отдельный документ (комбинация текста, рисунков, анимации, звука и прочее), который имеет свой собственный адрес. Web-сайт– это группа Web-страниц, объединенная гиперссылками, принадлежащих какому-либо частному лицу или организации. Гиперссылка- это некоторое слово или объект документа, содержащий указатель(адрес) для перехода на другой фрагмент документа или другую Web-страницу Браузер - программа просмотра web-сайтов и осуществление путешествий по сети Браузер - программа просмотра web-сайтов и осуществление путешествий по сети Служба WWW (World Wide Web ) – всемирная паутина (распределенная по всему миру информационная система, содержащая миллионы разнообразных документов) использует протокол HTTP (протокол передачи гипертекста). Его основное назначение- обработка гиперссылок и передача документов клиенту.

Книжник Светлана Викторовна учитель информатики МБОУ СОШ №3. г. Кумертау

Из истории. Первый в мире сайт info.cern.ch появился в 1991 году. Его создатель, Тим Бернерс-Ли, опубликовал на нём описание новой технологии World Wide Web (всемирная паутина), основанной на протоколе передачи данных HTTP, системе адресации URI и языке гипертекстовой разметки HTML. Также на сайте были описаны принципы установки и работы серверов и браузеров. Сайт стал и первым в мире интернет-каталогом, так как позже Тим Бернерс-Ли разместил на нём список ссылок на другие сайты. Тим Бернерс-Ли является «отцом» основополагающих технологий веба — HTTP, URI/URL и HTML, хотя их теоретические основы были заложены ещё раньше.

Книжник Светлана Викторовна учитель информатики МБОУ СОШ №3. г. Кумертау

Виды сайтов

Веб-сервисы

Информационные ресурсы

Интернет представительства

Сайты-визитки
Корпоративные сайты
Интернет-витрины
Промо-сайты

Тематические сайты
Интернет-порталы
Блоги
Каталоги сайтов

Поисковые системы
Почтовые системы
Интернет-форумы
Фото-, видео-, аудио-хостинги
Доски объявлений
Социальные сети

Разработка Web-сайтов

2 способа

Ручной
С использованием конструктора

Книжник Светлана Викторовна учитель информатики МБОУ СОШ №3. г. Кумертау

ЭТАПЫ СОЗДАНИЯ

Подготовительный
Дизайн
Web-программирование
HTML верстка сайта
Размещение сайта в сети
Раскрутка и администрирование (поддержка) сайта

Книжник Светлана Викторовна учитель информатики МБОУ СОШ №3. г. Кумертау

Создание Web-сайтов реализуется с помощью языка разметки гипертекстовых документов HTML.

Код страницы набирается в любом текстовом редакторе например блокнот и оформляется с помощью команд языка HTML.

Тестируются html файл с помощью любого браузера.

Команды HTML задаются с помощью специальных элементов – тэгов, которые заключается в угловые скобки

Существуют два типа тэгов – парные и непарные.

Непарные, например - тэг перевода строки
Парные мама , выделение слова полужирным шрифтом

Признаком окончания действия парного тэга служит слэш / .

Основные тэги для создания Web-страницы

<html></html> - определяет формат документа

<head></head> - содержит название страницы и справочную информацию о ней

<title></title> - содержит название страницы, которое отображается в верхней строке браузера

<body></body> - отображает в браузере содержимое страницы

Структура Web-страницы Текст HTML программы Коментарии <html> начало HTML кода <head> начало головной части <title>Первый документ</title> заголовок документа </head> конец головной части <body> начало тела программы <H1> Первый HTML документ </H1> заголовок <HR> горизонтальная линия начало абзаца Кошка не похожа на собаку. А собака не похожа на кошку. именно это сходство и берем за основу. конец абзаца </body> конец тела программы </html> конец HTML кода Сохранение, редактирование Web-страницы

Напечатать текст HTML программы в текстовом редакторе Блокнот
Созданную Web-страничку необходимо сохранить в виде файла с расширением *.html или *.htm
В процессе создания Web-страницы приходится добавлять новые тэги и просматривать получаемый результат. Для добавления тэгов необходимо открыть файл Web-страницы с помощью Блокнота командой вид – просмотр HTML – кода.

Вид html-страницы в: Блокноте

Internet Explorer

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

Разбиение текста на абзацы: …
Центрирование объектов: <CENTER>… </CENTER>
Выравнивание абзацев: , ,
Цвет, размер: или ; Пример:

Запись текста в формате RGB

Книжник Светлана Викторовна учитель информатики МБОУ СОШ №3. г. Кумертау

Гиперссылки Для определения гиперссылки используется тег <A>, структура которого имеет следующий вид: <A HREF=“filename” > текст ссылки </A> Пример: <A HREF=“foto.bmp” > фотография </A>

Возможно добавление атрибута TARGET со следующими значениями:
_top – открытие документа в текущем окне
_blank – открытие документа в новом окне

Имя файла

Текст в HTML - документе

Вставка графических изображений Для вставки изображений используется тег <IMG>. Рассмотрим применение этого тега на примере: <IMG SRC=“foto.jpg” WIDTH=“542” HEIGHT=“407” ALT= “Я”> Где SRC – определяет URL – адрес графического файла WIDTH – ширина, HEIGHT – высота, ALT – альтернативный текст. Изображение так же может быть гиперссылкой: <A HREF=“1.bmp” > <IMG SRC=“1.jpg” WIDTH=“542” HEIGHT=“407” ALT= “Я”></A> Фон страницы Фоновое изображение – это файл с небольшим рисунком, который многократно повторяется, заполняя все окно браузера независимо от его размера Графика, используемая в качестве фоновой, задается в теге <BODY> Пример: <BODY BACKGROUND=“FON.PNG”> -фоновая картинка <BODY BGCOLOR=“ЦВЕТ”> - цвет фона = АТРИБУТЫ КАРТИНКИ

<img src="uzeron_pc.jpg">	Без атрибутов - текст по умолчанию находится снизу картинки
<img src="uzeron_pc.jpg" align="right">	align="right" - картинка справа, текст слева
<img src="uzeron_pc.jpg" align="left">	align="left" - картинка слева, текст обтекает справа
<img src="uzeron_pc.jpg" align="bottom">	align="bottom" - как и по умолчанию, текст внизу картинки
<img src="uzeron_pc.jpg" align="middle">	align="middle" - текст посередине картинки

литература

Иванова И.А. Информатика. 11 класс: Практикум. –Саратов: Лицей, 2004.
http://beluys.com/html_basics/html_page.html
http://baxtop.ru/sozdanie-saita-s-pomoshhyu-html.htm

Книжник Светлана Викторовна учитель информатики МБОУ СОШ №3. г. Кумертау

Презентация "WEB-САЙТ. Разработка WEB-САЙТОВ"

Подписи к слайдам:

Информатика - еще материалы к урокам:

Предметы

Похожие материалы