Презентация, доклад по информатике на тему: Создание WEB-страниц

Содержание

Создание Web-страницОпубликовать сайт в Интернете - просто и доступно Оформление Web-страниц становится своеобразным видом прикладного искусства — Web-дизайн.Если вам нечего сказать миру, не стоит засорять Сеть!

Слайд 1Создание web-страниц

Создание web-страниц

Слайд 2Создание Web-страниц
Опубликовать сайт в Интернете - просто и доступно

Оформление Web-страниц

становится своеобразным видом прикладного искусства — Web-дизайн.

Если вам нечего сказать миру, не стоит засорять Сеть!



Создание Web-страницОпубликовать сайт в Интернете - просто и доступно Оформление Web-страниц становится своеобразным видом прикладного искусства —

Слайд 3Размещение Web- cайта на сервере
Опубликовать Web-сайт — значит разместить его на

Web-cepвepe.
Можно хранить сайт на своем компьютере, но у этого варианта много недостатков:
нестабильность канала связи с интернет;
компьютер должен быть постоянно включен;
придется покупать у провайдера персональный IP-адрес;
на компьютере нужно установить и настроить Web-сервер – программу, которая принимает запросы браузеров с других компьютеров и возвращает нужные им Web-страницы;
придется самостоятельно организовывать защиту сайта от взломщиков, вредоносных программ и сетевых атак.

Размещение Web- cайта на сервереОпубликовать Web-сайт — значит разместить его на Web-cepвepe.Можно хранить сайт на своем компьютере,

Слайд 4Доменное имя
В интернет существуют два типа адресов: числовые IP адреса и

символьные доменные имена.
Людям неудобно запоминать числовые IP адреса, поэтому сайты и имеют доменные имена.
После того как имя домена зарегистрировано, необходимо связать его с IP-адресом сервера, на котором хранятся файлы. Для этого используются серверы DNS – доменная система имен.

Доменное имяВ интернет существуют два типа адресов: числовые IP адреса и символьные доменные имена. Людям неудобно запоминать

Слайд 5Средства создания Web-страниц
Как сконструировать Web-страницу с ее текстами, рисунками, шрифтовым, цветовым

и звуковым оформлением? Надо создать текстовый файл, содержащий описание страницы на языке HTML — HiperText MarkUp Language — язык разметки гипертекста.
Это можно сделать с помощью:
простых текстовых редакторов (блокнот),
HTML-редакторов,
специальных сервисов sites.google.com.


Средства создания Web-страницКак сконструировать Web-страницу с ее текстами, рисунками, шрифтовым, цветовым и звуковым оформлением? Надо создать текстовый

Слайд 6Создание Web-страниц в блокноте
С помощью любого текстового редактора создаем текстовый файл,

содержащий команды языка HTML. Создаем документ в блокноте и сохраняем его в виде простого текстового документа (без оформления) с расширением *.htm или *.html.
Размещение информации на Web-странице задается с помощью специальных команд — тэгов. Тэг — это команда, которую понимает браузер. Тэги заключаются в угловые скобки < и >. Можно записывать тэги как маленькими, так и большими буквами (и даже вперемежку).


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

Слайд 7Создание Web-страниц в блокноте
Тэги бывают парные и непарные. 
Непарный тэг говорит о том, что в этом

месте надо вставить какой-то элемент, например, рисунок или разделительную линию. Например, тэг
означает переход на новую строку в тексте (без абзацного отступа).
Парный тэг состоит из двух частей — открывающего и закрывающего тэгов. Закрывающий тэг имеет то же самое имя, что и открывающий, но перед именем ставится знак / (слэш). Действие парного тэга распространяется на всё, что находится между ними. Например, парный тэг
...

выравнивает по центру страницы всю информацию, расположенную на месте многоточия.

Создание Web-страниц в блокнотеТэги бывают парные и непарные. Непарный тэг говорит о том, что в этом месте надо вставить какой-то элемент, например,

Слайд 8Создание Web-страниц в блокноте Простейшая страница
  Моя первая Web-страница Привет!

Создание Web-страниц в блокноте Простейшая страница    Моя первая Web-страница   Привет!

Слайд 9Создание Web-страниц в блокноте Цвета
Цвет в языке HTML задается двумя способами: по имени и

в виде шестнадцатеричного кода.
Многие цвета имеют (английские) имена и эти названия понимают браузеры. Например,
white — белый
black — черный
red — красный
green — зеленый
blue — синий

Создание Web-страниц в блокноте ЦветаЦвет в языке HTML задается двумя способами: по имени и в виде шестнадцатеричного кода.Многие цвета

Слайд 10Создание Web-страниц в блокноте Цвета
Другой способ задать цвет — указать его код

в формате RGB. Цвет записывается в виде трех пар шестнадцатеричных цифр, перед которыми ставится символ #. Первая пара обозначает яркость красного (R — red), вторая и третья - яркости зеленого (G —green) и синего (B — blue) в этом цвете.
Примеры цветов в шестнадцатеричном формате:
#FFFFFF — белый
#000000 — черный
#FF0000 — красный
#00FF00 — зеленый
#0000FF — синий

Создание Web-страниц в блокноте ЦветаДругой способ задать цвет — указать его код в формате RGB. Цвет записывается в

Слайд 11Создание Web-страниц в блокноте Текст
Свойства текста задаются в виде параметров различных тэгов.

Параметры записываются в открывающем тэге внутри скобок. Ниже объясняется использование основных тэгов для оформления текста.
Тэг  позволяет задать общие свойства для всей страницы. В параметрах открывающего тэга  можно задать цвет текста (параметр TEXT) и цвет фона (параметр BGCOLOR). Например, тэг
...
определяет черный цвет текста на желтом фоне для всей страницы.

Создание Web-страниц в блокноте ТекстСвойства текста задаются в виде параметров различных тэгов. Параметры записываются в открывающем тэге

Слайд 12Создание Web-страниц в блокноте Текст
Тэг  позволяет изменять также и цвет ссылок, которые в

языке HTML называются anchors - якоря. Для этого используют параметры
LINK — цвет обычных ссылок
ALINK — цвет активной ссылки, на которой щелкнули мышью
VLINK — цвет посещенных ссылок
Например, тэг
...
устанавливает желтый цвет для обычных ссылок, красный — для активных и синий — для посещенных.

Создание Web-страниц в блокноте ТекстТэг  позволяет изменять также и цвет ссылок, которые в языке HTML называются anchors - якоря. Для этого используют

Слайд 13Создание Web-страниц в блокноте Текст
Тэг 
Для того, чтобы изменить цвет, размер и стиль

шрифта для части текста, используют тэг . Он имеет три основных параметра:
COLOR — цвет текста
FACE — начертание (название) шрифта
SIZE — размер шрифта (принимает целые значения от 1 до 7)
Например, тэг
...
устанавливает для текста внутри области действия тэга шрифт Courier желтого цвета размера 2
Создание Web-страниц в блокноте ТекстТэг Для того, чтобы изменить цвет, размер и стиль шрифта для части текста, используют

Слайд 14Создание Web-страниц в блокноте Текст, стили оформления
Стили оформления
... (от английского bold), а так же  — это

жирный текст
... (от английского italic), а так же  — это курсив
... (от английского strike out) — это зачеркнутый текст
... (от английского underline) — это подчеркнутый текст
... (от английского superscript) — это верхний индекс
... (от английского subscript) — это нижний индекс
...
 (от английского preformatted) — это специальный стиль для оформления текстов программ (моноширинный шрифт, остаются все пробелы и переходы на новую строку).
Стиль относится к тексту, заключенному между открывающим и закрывающим тэгами.

Создание Web-страниц в блокноте Текст, стили оформленияСтили оформления... (от английского bold), а так же  — это жирный текст... (от английского italic), а так

Слайд 15Создание Web-страниц в блокноте Текст, заголовки
Заголовки
Для выделения заголовков используются парные тэги от  до  (от

английского header), то есть, уровень заголовка изменяется от от 1 до 6. Страница с кодом

Заголовок документа

Заголовок раздела

Заголовок подраздела

Заголовок параграфа

Комментарий
Авторские пометки


Создание Web-страниц в блокноте Текст, заголовкиЗаголовкиДля выделения заголовков используются парные тэги от  до  (от английского header), то есть, уровень заголовка

Слайд 16Создание Web-страниц в блокноте Текст, абзацы
Переход на новую строку
Для того, чтобы начать

новый абзац, можно использовать простейший тэг


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

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

Слайд 17Создание Web-страниц в блокноте Текст, абзацы
В языке HTML есть специальный парный тэг  (от английского paragraph — абзац),

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

 обозначает начало абзаца, а соответствующий ему закрывающий — конец абзаца. Страница с кодом

Одно физическое тело захотело поменять три своих старых варежки на что-нибудь хорошее.

До самого вечера тело с варежками ...



Создание Web-страниц в блокноте Текст, абзацыВ языке HTML есть специальный парный тэг  (от английского paragraph — абзац), позволяющий ограничить абзац. При этом

Слайд 18Создание Web-страниц в блокноте Текст, абзацы
Выравнивание абзацев
У тэга  есть параметр ALIGN, который может принимать

значения:
LEFT — выровнять по левой границе
RIGHT — выровнять по правой границе
CENTER — выровнять по центру
JUSTIFY — выровнять по ширине (левая и правая границы)
По умолчанию абзац выравнивается по левой границе. Ниже показано, как использовать этот параметр:

Этот текст выровнен по центру.

Этот текст выровнен по ширине.



Создание Web-страниц в блокноте Текст, абзацыВыравнивание абзацевУ тэга  есть параметр ALIGN, который может принимать значения:LEFT — выровнять по левой границеRIGHT —

Слайд 19Создание Web-страниц в блокноте гиперссылки
Отличительной особенностью гипертекстовых и гипермедиа- документов являются активные

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

Создание Web-страниц в блокноте гиперссылкиОтличительной особенностью гипертекстовых и гипермедиа- документов являются активные ссылки на другие документы (гиперссылки).

Слайд 20Создание Web-страниц в блокноте гиперссылки
Цвет гиперссылок
По умолчанию ссылки выделяются синим цветом и

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

Параметр LINK обозначает цвет обычной ссылки, VLINK — цвет посещенной ссылки, ALINK — цвет ссылки, над которой находится курсор мыши.

Создание Web-страниц в блокноте гиперссылкиЦвет гиперссылокПо умолчанию ссылки выделяются синим цветом и подчеркиваются. Ссылки на документы, которые

Слайд 21Создание Web-страниц в блокноте гиперссылки
Ссылки на сайты в Интернете
Для того, чтобы сделать

ссылку на сайт в Интернет, надо указать полный URL документа, включая протокол, сайт, каталог и имя файла. Например, ссылка Колонка, связанная с файлом http://www.gazeta.ru/kolonka.shtml, сделана так:
Колонка

Создание Web-страниц в блокноте гиперссылкиСсылки на сайты в ИнтернетеДля того, чтобы сделать ссылку на сайт в Интернет,

Слайд 22Создание Web-страниц в блокноте гиперссылки
Тэг  имеет также параметр TARGET, который говорит браузеру, где открывать

окно. После него может стоять имя открытого окна (если такого окна нет, то открывается новое окно с таким именем) или одно из следующих значений
_blank — открыть в новом окне
_parent — открыть в родительском окне
_top — открыть на полном экране
Последние два значения используются при работе с фреймами. Например, ссылка на сайт www.mail.ru, который всегда открывается в новом окне, сделана так:
www.mail.ru

Создание Web-страниц в блокноте гиперссылкиТэг  имеет также параметр TARGET, который говорит браузеру, где открывать окно. После него может стоять

Слайд 23Создание Web-страниц в блокноте Списки
Маркированные списки
Каждый элемент маркированного списка имеет маркер —

специальный значок слева. Список ограничен парным тэгом 
     (от английского unordered list — неупорядоченный список). Каждый элемент списка начинается с непарного тэга 
  • , после которого можно располагать текст, рисунки, таблицы и т.п. Список заканчивается закрывающим тэгом 
.
Ниже приведен пример простейшего маркированного списка — слева HTML-код, а справа — изображение в окне браузера.
  • Вася    
  • Петя
  • Коля


Создание Web-страниц в блокноте СпискиМаркированные спискиКаждый элемент маркированного списка имеет маркер — специальный значок слева. Список ограничен

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

может быть числовой или буквенной. Список ограничен парным тэгом 
     (от английского ordered list — упорядоченный список). Каждый элемент списка начинается с непарного тэга
  1. , после которого можно располагать текст, рисунки, таблицы и т.п. Список заканчивается закрывающим тэгом 
.
Ниже приведен пример простейшего нумерованного списка — слева HTML-код, а справа — изображение в окне браузера.
  1. Вася    
  2. Петя
  3. Коля


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

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

Для этого используется параметр BACKGROUND тэгаBODY. Если указано только имя файла, рисунок должен находиться в том же каталоге, что и сама Web-страница.


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

Слайд 26Создание Web-страниц в блокноте Рисунки
Рисунки в документе
Для вставки рисунка в Web-документ используется

тэг  (от английского image — изображение). Этот тэг имеет несколько параметров, из которых обязателен лишь SRC (от английского source — источник), который указывает, где находится рисунок. Если рисунок надо искать в том же каталоге, что и сама страница, надо просто написать имя файла. Можно указать также относительный адрес файла (так же, как в ссылках) или URL. Например:

Рисунок image1.jpg находится в текущем каталоге, рисунок image2.jpg — в соседнем каталоге IMAGES, аimage3.jpg — на сервере в Интернете.

Создание Web-страниц в блокноте РисункиРисунки в документеДля вставки рисунка в Web-документ используется тэг  (от английского image — изображение). Этот тэг

Слайд 27Создание Web-страниц в блокноте Таблицы
Простейшая таблица
Таблицы на Web-страницах используются не только для

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

и вид окна браузера

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

Слайд 28Создание Web-страниц в блокноте Фреймы
Что это такое?
Иногда Web-страницу делят на несколько частей

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

Создание Web-страниц в блокноте ФреймыЧто это такое?Иногда Web-страницу делят на несколько частей (чаще всего — на две,

Слайд 29Создание Web-страниц в блокноте Фреймы
Разбивка на столбцы
В отличие от обычной Web-страницы, страница,

которая описывает структуру фреймов, не содержит тела, то есть блока.... Вместо этого записывается блок ... (от английского frameset - набор фреймов).
   Фреймы-столбцы      
Браузер отображает эту страницу так:

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

Слайд 30Создание Web-страниц в блокноте Фреймы

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

Слайд 31Создание Web-страниц в Microsoft Word
Достоинства и недостатки:
режим WYSIWYG (англ. What You

See Is What You Get – что видишь, то и получишь), т.е. при редактировании документ выглядит также, как и при просмотре в браузере.
Изменять содержимое можно также, как и в текстовых процессорах при этом пользователю не нужно знать язык html – все необходимые тэги программа добавляет автоматически.
Для точной же верстки приходится вручную редактировать html-код.

Создание Web-страниц в Microsoft WordДостоинства и недостатки:режим WYSIWYG (англ. What You See Is What You Get –

Слайд 32Создание Web-страниц в Microsoft Word
Открываем программу Microsoft Word →вкладка вид →

веб-документ.
 Создаем страницу такой как хотим ее видеть → нажимаем сохранить как → выбираем другой формат → вводим название файла → выбираем тип файла – «веб-страница».
Организация гиперссылок: выделяем текст, который хотим сделать ссылкой → нажимаем: меню → вставка → гиперссылка → вводим название нового документа → вводим расширение .html.

Создание Web-страниц в Microsoft WordОткрываем программу Microsoft Word →вкладка вид → веб-документ. Создаем страницу такой как хотим ее

Слайд 33Создание сайтов sites.google.com
система Google предоставляет программу Конструктор, которая позволяет легко, без знания

языков программирования создать свой сайт;
Google предоставляет бесплатный хостинг;
название сайта состоит из постоянного адреса (sites.google.com/site) и имени вашего сайта;
режим помощи, где можно узнать, как создать свой сайт (http://www.google.com/support/sites/);

Создание сайтов sites.google.comсистема Google предоставляет программу Конструктор, которая позволяет легко, без знания языков программирования создать свой сайт;Google предоставляет

Слайд 34Создание сайтов sites.google.com
Преимущества:
позволяет с нуля создать полноценный сайт;
не требуется

знания языков программирования и не требуется специальных знаний;
достаточно большие возможности по созданию макета сайта, имеет удобный интерфес.
Недостатки:
не позволяет на одной странице пользоваться разными видами шрифтов;
не позволяет организовать форум, однако, для небольших сайтов эта проблема не существенна.
Создание сайтов sites.google.comПреимущества: позволяет с нуля создать полноценный сайт; не требуется знания языков программирования и не требуется

Слайд 35Домашнее задание
Создать свой сайт (с помощью Microsoft Word), состоящий из 4-х

страниц;
1.Организация гиперссылок между ними;
2. 2 внешние гиперссылки + 2 фотографии + 1 таблица;
3. Проверить работоспособность сайта с помощью браузера.

Домашнее заданиеСоздать свой сайт (с помощью Microsoft Word), состоящий из 4-х страниц;1.Организация гиперссылок между ними;2. 2 внешние

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

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


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

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

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

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