Презентация "Web-сайт. Разработка Web-сайтов"

WEB-САЙТ.САЙТ. Разработка WEB-САЙТОВ.WEB-САЙТ.САЙТОВ. Книжник Светлана Викторовна учитель информатики МБОУ СОШ №3. г. Кумертау

Web-страницастраница-страница это отдельный документ (комбинация текста, рисунков, анимации, звука и прочее), который имеет свой собственный адрес. Web-страницасайт– это группа Web-страницастраниц, объединенная гиперссылками, принадлежащих какому-страницалибо частному лицу или организации. Гиперссылка-страница это некоторое слово или объект документа, содержащий указатель(адрес) для перехода на другой фрагмент документа или другую Web-страницастраницу Книжник Светлана Викторовна учитель информатики МБОУ СОШ №3. г. Кумертау

Браузер -страница программа просмотра web-страницасайтов и осуществление путешествий по сети Служба WWW (World Wide Web ) – всемирная паутина (распределенная по всему миру информационная система, содержащая миллионы разнообразных документов) использует протокол HTTP (протокол передачи гипертекста). Его основное назначение-страница обработка гиперссылок и передача документов клиенту. Книжник Светлана Викторовна учитель информатики МБОУ СОШ №3. г. Кумертау

Из WEB-САЙТОВ.истории. Первый в мире сайт info.cern.ch появился в 1991 году. Его создатель, Тим Бернерс-страницаЛи, опубликовал на нём описание новой технологии World Wide Web (всемирная паутина), основанной на протоколе передачи данных HTTP, системе адресации URI и языке гипертекстовой разметки HTML. Также на сайте были описаны принципы установки и работы серверов и браузеров. Сайт стал и первым в мире интернет-страницакаталогом, так как позже Тим Бернерс-страницаЛи разместил на нём список ссылок на другие сайты.

Тим Бернерс-Ли является «отцом» основополагающих технологий веба — HTTP, URI/URL и HTML, хотя их теоретические основы были заложены ещё раньше. Книжник Светлана Викторовна учитель информатики МБОУ СОШ №3. г. Кумертау

Интернет представительства •Сайты-визитки •Корпоративные сайты •Интернет-витрины •Промо-сайты Информационные ресурсы •Тематические сайты •Интернет-порталы •Блоги •Каталоги сайтов тов й а с WEB-САЙТОВ. Виды Веб-сервисы •Поисковые системы •Почтовые системы •Интернет-форумы •Фото-, видео-, аудиохостинги •Доски объявлений •Социальные сети

Разработка WEB-САЙТОВ.Web-САЙТ.сайтов 2 способа •Ручной •С использованием конструктора Книжник Светлана Викторовна учитель информатики МБОУ СОШ №3. г. Кумертау

ЭТАПЫ WEB-САЙТОВ.СОЗДАНИЯ •Подготовительный •Дизайн •Web-страницапрограммирование •HTML верстка сайта •Размещение сайта в сети •Раскрутка и администрирование (поддержка) сайта Книжник Светлана Викторовна учитель информатики МБОУ СОШ №3. г. Кумертау

Создание Web-страницасайтов реализуется с помощью языка разметки гипертекстовых документов HTML. Код страницы набирается в любом текстовом редакторе например блокнот и оформляется с помощью команд языка HTML. Тестируются html файл с помощью любого браузера. Команды HTML задаются с помощью специальных элементов – тэгов, которые заключается в угловые скобки Существуют два типа тэгов – парные и непарные. •Непарные, например <BR> - тэг перевода строкиBR> -страница тэг перевода строки •Парные <BR> - тэг перевода строкиB>мама <BR> - тэг перевода строки/B>, выделение слова полужирным B>, выделение слова полужирным шрифтом Признаком окончания действия парного тэга служит слэш /B>, выделение слова полужирным .

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

Структура WEB-САЙТОВ.Web-САЙТ.страницы Текст WEB-САЙТОВ.HTML WEB-САЙТОВ.программы WEB-САЙТОВ. WEB-САЙТОВ. WEB-САЙТОВ. WEB-САЙТОВ. WEB-САЙТОВ. WEB-САЙТОВ. WEB-САЙТОВ. WEB-САЙТОВ. WEB-САЙТОВ. WEB-САЙТОВ. WEB-САЙТОВ. WEB-САЙТОВ. WEB-САЙТОВ. WEB-САЙТОВ. WEB-САЙТОВ. WEB-САЙТОВ. WEB-САЙТОВ. WEB-САЙТОВ. WEB-САЙТОВ. WEB-САЙТОВ. WEB-САЙТОВ. WEB-САЙТОВ. WEB-САЙТОВ. WEB-САЙТОВ. WEB-САЙТОВ. WEB-САЙТОВ. WEB-САЙТОВ. WEB-САЙТОВ. WEB-САЙТОВ.Коментарии начало HTML кода начало головной части Первый документ заголовок документа конец головной части начало тела программы Первый HTML документ заголовок горизонтальная линия <P> начало абзаца Кошка не похожа на собаку. А собака не похожа на кошку. именно это сходство и берем за основу. </P> конец абзаца конец тела программы конец HTML кода

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

Вид WEB-САЙТОВ.html-САЙТ.страницы WEB-САЙТОВ.в: Блокноте Internet WEB-САЙТОВ.Explorer

Форматирование текста • Разбиение текста на абзацы: <BR> - тэг перевода строкиP>…<BR> - тэг перевода строки/B>, выделение слова полужирным P> • Центрирование объектов: <BR> - тэг перевода строкиCENTER>… <BR> - тэг перевода строки/B>, выделение слова полужирным CENTER> • Выравнивание абзацев: <BR> - тэг перевода строкиP ALIGN="JUSTIFY">, <BR> - тэг перевода строкиP ALIGN=“LEFT">, <BR> - тэг перевода строкиP ALIGN=“RIGHT"> • Цвет, размер: <BR> - тэг перевода строкиFONT COLOR="#00FFFF"> или <BR> - тэг перевода строкиFONT COLOR=“BLUE"> <BR> - тэг перевода строкиFONT SIZE="5“>; <BR> - тэг перевода строкиFONT FACE=“ARIAL“> Пример: <BR> - тэг перевода строкиFONT SIZE="5“ COLOR="#00FFFF” >

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

Гиперссылки Для определения гиперссылки используется тег , структура A>, структура >, структура которого имеет следующий вид: , структура A>, структура HREF=“filename” > текст ссылки , структура /A>A>, структура > Имя файла Пример: , структура A>, структура Текст в HTML документе HREF=“foto.bmp” > фотография , структура /A>A>, структура > – Возможно добавление атрибута TARGET со следующими значениями: – _top – открытие документа в текущем окне – _blank – открытие документа в новом окне

Вставка графических изображений Для вставки изображений используется тег <BR> - тэг перевода строкиIMG>. Рассмотрим применение этого тега на примере: <BR> - тэг перевода строкиIMG SRC=“foto.jpg” WIDTH=“542” HEIGHT=“407” ALT= “Я”>”> Где SRC – определяет URL – адрес графического файла WIDTH – ширина, HEIGHT – высота, ALT – альтернативный текст. Изображение так же может быть гиперссылкой: <BR> - тэг перевода строкиA HREF=“1.bmp” > <BR> - тэг перевода строкиIMG SRC=“1.jpg” WIDTH=“542” HEIGHT=“407” ALT= “Я”>”><BR> - тэг перевода строки/B>, выделение слова полужирным A>

Фон WEB-САЙТОВ.страницы Фоновое изображение – это файл с небольшим рисунком, который многократно повторяется, заполняя все окно браузера независимо от его размера Графика, используемая в качестве фоновой, задается в теге BODY>> Пример: <BR> - тэг перевода строкиBODY BACKGROUND=“FON.PNG”> -страница фоновая картинка <BR> - тэг перевода строкиBODY BGCOLOR=“ЦВЕТ”> -страница цвет фона =

АТРИБУТЫ КАРТИНКИ Без атрибутов - текст по умолчанию находится снизу картинки align="right" - картинка справа, текст слева align="left" - картинка слева, текст обтекает справа align="bottom" - как и по умолчанию, текст внизу картинки align="middle" - текст посередине картинки

ЛИТЕРАТУРА •Иванова И.А. Информатика. 11 класс: Практикум. –Саратов: Лицей, 2004. •http://beluys.com/html_basics/html_page.html •http://baxtop.ru/sozdanie-saita-s-pomoshhyu-html.htm Книжник Светлана Викторовна учитель информатики МБОУ СОШ №3. г. Кумертау