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

Презентация: Разработка Web-сайтов
Включить эффекты
1 из 54
Ваша оценка презентации
Оцените презентацию по шкале от 1 до 5 баллов
  • 1
  • 2
  • 3
  • 4
  • 5
4.0
1 оценка

Комментарии

Нет комментариев для данной презентации

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


Добавить свой комментарий

Аннотация к презентации

Посмотреть презентацию на тему "Разработка Web-сайтов" для 9-11 класса в режиме онлайн с анимацией. Содержит 54 слайда. Самый большой каталог качественных презентаций по информатике в рунете. Если не понравится материал, просто поставьте плохую оценку.

Содержание

  • Презентация: Разработка Web-сайтов
    Слайд 1

    Разработка Web-сайтовс использованием языка разметки гипертекста НТМL

    Хайрулина Анастасия Владиславовна, МОУ СОШ №10, г. Кандалакша, Мурманская обл. 28.12.2016 1

  • Слайд 2

    Содержание:

    1.Web -страницы и Web – сайты Для создания Web-страниц Создание Web-страниц с использованием НТМL-тэгов Web-сайты. Основные моменты Размещение в Интернет Контрольные вопросы 2.Структура Web-страницы ТЭГИ Разработка заготовка Контрольные вопросы 3.Форматирование текста на Web-странице Шрифт Выравнивание текста Абзацы. Горизонтальная линия Контрольные вопросы 4.Вставка изображений в Web-страницы Положение рисунка относительно текста Вставка альтернативного текста Контрольные вопросы 28.12.2016 2

  • Слайд 3

    5.Гиперссылки на Web-страницах Панель навигации по сайту. ссылка на адрес электронный почты Пример 6. Списки на Web-страницах нумерованные списки маркированные списки списки определений Контрольные вопросы 7. Интерактивные формы на Web-страницах Форма Текстовые поля. Текстовые поля.HTML –код Переключатели. Переключатели. HTML-код Флажки. Флажки. HTML-код Раскрывающиеся списки.Раскрывающиеся списки.HTML код Текстовая область. Отправка данных из формы. Контрольные вопросы Что должно получиться Основные HTML -тэги

  • Слайд 4

    1.Web -страницы и Web - сайты

    Web -страницы создаются с использова­нием языка разметки гипертекстовых документов НТМL (Нуреr Техt Markup Language). В обычный текстовый доку­мент вставляются управляющие символы — НТМL-тэги, ко­торые определяют вид Web-страницы при ее просмотре в браузере. Основными достоинствами Web-страниц являются: • малый информационный объем; • возможность просмотра в различных операционных системах. 28.12.2016 4

  • Слайд 5

    Для создания Web-страниц

    Для создания Web-страниц используются простейшие текстовые редакторы или специальные программы-HTML –редакторы (HtmlPad FisherMan). В качестве такого редактора в Windows можно использовать стандартное приложение Блокнот. 28.12.2016 5

  • Слайд 6

    Создание Web-страниц с использованием НТМL-тэгов

    требует больших усилий, времени и знания синтаксиса языка. Применение специальных инструментальных программ­ных средств (Web-редакторов) делает работу по созданию Web-сайтов простой и эффективной. Процесс создания и ре­дактирования страниц в Web-редакторах очень нагляден, так как производится в режиме WYSIWYG (от англ. «What You See Is What You Get - Что видишь, то и получишь»). 28.12.2016 6

  • Слайд 7

    Web-сайты. Основные моменты

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

  • Слайд 8

    Размещение в Интернет

    Прежде чем разместить свой Web-сайт на сервере в Интернете, его необходимо тщательно протестировать, так как потенциальными посетителями вашего сайта будут являться десятки миллионов пользователей Интернета. Для публикации Web-сайта необходимо найти подходящее место на одном из серверов Интернета. Многие провайдеры предоставляют своим клиентам возможность бесплатного размещения Web-сайтов на своих серверах (бесплатный хостинг). 28.12.2016 8

  • Слайд 9

    Контрольные вопросы

    1. В чем заключается преимущество Web-страниц перед обычными текстовыми документами? 2. Каким образом Web -страницы объединяются в Web-сайты? 28.12.2016 9

  • Слайд 10

    2. Структура Web-страницы

    НТМL-код страницы помещается внутрь контейнера <НТМL>. Без этих тэгов браузер не в состоянии определить формат документа и правильно его интерпретировать. Web-страница разделяется на две логические части: заголовок и отображаемое в браузере содержание. Заголовок Web-страницы заключается в контейнер <НЕАD> и содержит название документа и справочную информацию о странице (например, тип кодировки), которая используется браузером для правильного отображения. 28.12.2016 10

  • Слайд 11

    Тэги заключаются в угловые скобки и могут быть одиночными или парными. Парные тэги содержат откры­вающий и закрывающий тег (такая пара тэгов называ­ется контейнером). 28.12.2016 11 i <НЕАD> <НТМL>

  • Слайд 12

    ТЭГИ

    Закрывающий тэг содержит прямой слэш (/) перед обозначением. Название страницы помещается в контейнер

    и при просмотре отображается в верхней строке окна браузера. Отображаемое в браузере содержание страницы помеща­ется в контейнер

    28.12.2016 12

  • Слайд 13

    Разработка заготовка

    Компьютер и ПО

    28.12.2016 13 Созданную Web-страницу необходимо сохранить в виде файла под именем index.htm. В качестве расширения файла Web-страницы можно также использовать html.

  • Слайд 14

    Необходимо различать имя файла index.htm, под которым Web-страница хранится в файловой системе, и имя Web-страницы (например, «Компьютер»), которое высвечивается в верхней строке окна браузера. Имя Web-страницы должно соответствовать ее содержанию, так как оно в первую очередь анализируется поисковыми системами 28.12.2016 14 i

  • Слайд 15

    Контрольные вопросы

    Какие тэги (контейнеры) должны присутствовать в HTML-документе обязательно? Какова логическая структура Web-страницы? Практическое задание. Создать заготовку Web-страницы «Компьютер» и просмотреть ее в браузере. 28.12.2016 15

  • Слайд 16

    3. Форматирование текста на Web-странице

    С помо­щью тэгов можно задать различные параметры форматиро­вания текста. Заголовки. Размеры шрифтов заголовков задаются параметрами тэгов от <Н1> (самый крупный) до

     

    (самый мелкий). 28.12.2016 16

  • Слайд 17

    Шрифт.

    Некоторые тэги имеют атрибуты, которые являются именами свойств и могут принимать определенные значения. С помощью тэга FONTи его атрибутов можно задать параметры форматирования шрифта. Атрибут FACEпозволя­ет задать гарнитуру шрифта (например, FACE="Arial"), Атрибут SIZE— размер шрифта (например, SIZE=4). Атрибут COLORпозволяет задавать цвет шрифта (напри­мер, COLOR="blue"). Значение атрибута COLOR можно за­дать либо названием цвета (например, "red", "green", "blue" и т. д.), либо его шестнадцатеричным значением - "#RRGGBB" 28.12.2016 17

  • Слайд 18

    Выравнивание текста.

    Задать способ выравнивания тек­ста позволяет атрибут ALIGN. Выравнивание по левой грани­це задается так: ALIGN="left", выравнивание по правой границе: ALIGN="right", выравнивание по центру: ALIGN= "center". Таким образом, синий цвет заголовка, выровненного по центру, можно задать следующим образом: <Н1 ALIGN="center">компьютери П0 28.12.2016 18

  • Слайд 19

    Горизонтальная линия. Заголовки целесообразно отде­лять от остального содержания страницы горизонтальными линиями с помощью одиночного тэга

    . Абзацы. Разделение текста на абзацы производится с помощью контейнера <р>. При просмотре в браузере аб­зацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания и па­раметры форматирования шрифта. 28.12.2016 19

  • Слайд 20

    Домашняя страница сайта.

    На домашней странице сайта обычно размещается текст, кратко описывающий его содер­жание. Поместим на домашнюю страницу сайта «Компьютер» текст, разбитый на абзацы с различным выравниванием: <Р ALIGN="left"> Ha этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие. <Р ALIGN="RIGHT">Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету. 28.12.2016 20

  • Слайд 21

    <Н1 ALIGN="center"> Компьютер и ПО

    <Р ALIGN="left">Ha этом сайте... <Р ALIGN ="right"> Терминологический словарь ... 28.12.2016 21

  • Слайд 22

    Контрольные вопросы

    Какие тэги (контейнеры) используются для ввода заголовков? Форматирования шрифта? Ввода абзацев? Практическое задание. Создать Web-страницу «Компьютер» с отформатированным текстом и просмотреть ее в браузере. 28.12.2016 22

  • Слайд 23

    4.Вставка изображений в Web-страницы

    На Web-страницы можно помещать изображения, хра­нящиеся в графических файлах трех форматов — GIF, JPEG и PNG. Вставка изображений. Для вставки изображения ис­пользуется тэг с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете. НАПРИМЕР: 28.12.2016 23

  • Слайд 24

    Положение рисунка относительно текста

    Расположить рисунок относительно текста различным образом позволяет атрибут ALIGN, который может принимать пять различных значений: ТОР (верх), MIDDLE (середина), BOTTOM (низ), LEFT (слева) и RIGHT (справа). НАПРИМЕР: 28.12.2016 24

  • Слайд 25

    Вставка альтернативного текста

    Пользователи иногда, в целях экономии времени, отключают в браузере загрузку графических изображений и читают только тексты. Чтобы не терялся смысл страницы, вместо рисунка должен выводиться альтернативный текст. Альтернативный текст выводится с помощью атрибута ALT, значением которого является текст, поясняющий, что должен был бы увидеть пользователь на рисунке:  28.12.2016 25

  • Слайд 26

    Контрольные вопросы

    1. Какой тэг и его атрибуты используются для вставки изображений в Web-страницы? Практическое задание. Вставить в Web-страницу «Компьютер» изображение и альтернативный текст и просмотреть ее в браузере. 28.12.2016 26

  • Слайд 27

    5. Гиперссылки на Web-страницах

    Гиперссылки. Гиперссылки, размещенные на Web-странице, позволяют загружать в браузер другие Web-страницы, хранящиеся на локальном компьютере или в Интернете. Гиперссылка состоит из двух частей: адреса и указателя ссылки. Гиперссылка создается с помощью универсального тэга <А> и его атрибута HREF, указывающего, в каком файле хра­нится загружаемая Web-страница: <А HREF="Адрес">Указатель ссылки 28.12.2016 27

  • Слайд 28

    Панель навигации по сайту. Создадим папку сайта «Компьютер» и добавим в сайт пустые страницы «Программы», «Словарь», «Комплектующие» и «Анкета». Сохраним их в файлах с именами software.htm, glossary.htm, hardware.htm и anketa.htm в папке сайта. Такие «пустые» страницы должны иметь заголовки, но могут пока не иметь содержания: 28.12.2016 28

  • Слайд 29

    панель навигации

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

  • Слайд 30

    Вставим в домашнюю страницу сайта HTML-код, создающий панель навигации: <Р ALIGN="center"> [<А HREF="software.htm">Программы] & nbsp [<А HREF="glossary.htm">Словарь]   [<А HREF="hardware.htm“>Комплектующие]   [

  • Слайд 31

    Гиперссылка на адрес электронной почты.

    Полезно на домашней странице сайта создать ссылку на адрес электронный почты, по которому посетители могут связаться с администрацией сайта. Для этого необходимо атрибуту ссылки HREFприсвоить адрес электронной почты и вставить ее в контейнер

     

    , который задает стиль абзаца, принятый для указания адреса:

    <А HREF="mailto:username@server.ru">E-mail: username@server.ru

    28.12.2016 31

  • Слайд 32

    Пример

    28.12.2016 32

  • Слайд 33

    6. Списки на Web-страницах

    нумерованные списки, когда элементы списка идентифицируются с помощью чисел; маркированные списки, когда элементы списка идентифицируются с помощью специальных символов (маркеров); списки определений, позволяющие составлять перечни определений в так называемой словарной форме. 28.12.2016 33

  • Слайд 34

    Нумерованные списки.

    Нумерованный список располагается внутри контейнера

    ,а каждый элемент списка определяется тэгом

    • . С помощью атрибута TYPEтэга
      1. можно задать тип нумерации: арабские цифры (по умолчанию), "I" (римские цифры), "а" (строчные буквы)
        1. Системные программы
        2. Прикладные программы
        3. Системы программирования 28.12.2016 34
  • Слайд 35

    Маркированные списки.

    Маркированный список располагается внутри контейнера

    ,а каждый элемент списка определяется тэгом

    • . С помощью атрибута TYPE тэга
      • можно задать вид маркера списка: "disc" (диск), "square" (квадрат) или "circle" (окружность):
        • текстовые редакторы;
        • графические редакторы;
        • электронные таблицы;
        • системы управления базами данных.
  • Слайд 36

    Список определений.

    Список определений располагается внутри контейнера

    / . Внутри него текст оформля­ется в виде терминов, которые выделяются одинарными тэгами и определений, которые следуют за одинарными тэгами . Web-страницу «Словарь» мы представим в виде словаря компьютерных терминов Процессор Центральное устройство компьютера, производящее обработку информации в двоичномкоде. Оперативная память Устройство, в котором хранятся программы иданные.  
  • Слайд 37

    Контрольные вопросы

    Какие тэги используются для создания нумерованных списков? Маркированных списков? Практическое задание. Создать Web-страницу «Программы» с нумерованным списком и вложенным маркированным спис­ком. Создать Web-страницу «Словарь» со списком терминов.

  • Слайд 38
  • Слайд 39

    7. Интерактивные формы на Web-страницах

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

  • Слайд 40

    Форма

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

  • Слайд 41

    Текстовые поля.

    Для получения этих данных разместим в форме два однострочных текстовых поля для ввода информации. Текстовые поля создаются с помощью тэга со значением атрибута TYPE="text". Атрибут NAMEявляется обязательным и служит для идентификации полученной ин­формации. Значением атрибута SIZEявляется число, задаю­щее длину поля ввода в символах.

  • Слайд 42

    Текстовые поля.HTML -код

    Для того чтобы анкета «читалась», необходимо разделить строки с помощью тэга перевода строки

    Пожалуйста, введите ваше имя: E-mail:  
  • Слайд 43

    Переключатели.

    Далеенеобходимо создать группу переключателей («радиокнопок»). Создается такая группа с помощью тэга со значением атрибута TYPE="radio".Все элементы в группе должны иметь одинаковые значения атрибута NAME. Например, NAME="group". Еще одним обязательным атрибутом является VALUE, которому присвоим значения "учащийся", "студент" и "учитель". Значение атрибута VALUEдолжно быть уникаль­ным для каждой «радиокнопки». Вставим в HTML-код группу переключателей, в которой строки разделяются с помощью тэга перевода строки

  • Слайд 44

    Переключатели. HTML-код

    Укажите, к какой группе пользователей вы себя относите: учащийся студент учитель

  • Слайд 45

    Флажки.

    Далее, из предложенного перечня можно выбрать одновременно несколько вариантов, пометив их флажками. Флажки создаются в тэге со значением атрибута TYPE="checkbox".Флажки, объединенные в группу, могут иметь различные значения атрибута NAME. Например, NAME="box1", NAME="box2" и т. д. Еще одним обязательным атрибутом является VALUE, которому присвоим значения "WWW", "e-mail" и "FTP". Значение атрибута VALUE должно быть уникальным для каждого флажка. Вставим в HTML-код группу флажков, в которой строки разделяются с помощью тэга перевода строки :

  • Слайд 46

    Флажки. HTML-код

    Какие из сервисов Интернета вы используете наиболее часто: WWW e-mail FTP

  • Слайд 47

    Раскрывающиеся списки.

    Для реализации раскрывающегося списка используется контейнер ,в котором каждый элемент списка определяется тэгом <0PTI0N>. B переключателях, флажках и списках выбранный по умолчанию элемент задается с помощью атрибутаSELECTED.

  • Слайд 48

    Раскрывающиеся списки.HTML код

    Какой браузер вы используете наиболее часто: Internet ExplorerNetscape NavigatorOperaMozilla

  • Слайд 49

    Текстовая область.

    В такое поле можно ввести достаточно длинный текст. Создается текстовая область с помощью тэгас обязательными атрибутами: NAME,задающим имя области, ROWS,определяющим число строк, и COLS— число столбцов области. Вставим в HTML-код текстовую область : Какую еще информацию вы хотели бы видеть на сайте?<br />

  • Слайд 50

    Отправка данных из формы.

    Отправка введенной в форму информации осуществляется с помощью щелчка по кнопке. Кнопка создается с помощью тэга .Атрибуту TYPE необходимо присвоить значение "submit",а атрибуту VALUE, который задает надпись на кнопке, присвоить значение "Отправить"

  • Слайд 51

    Щелчком по кнопке Отправить можно отправить данные из формы на определенный адрес электронной почты. Для этого атрибуту ACTIONконтейнера

    надо присвоить значение адреса электронной почты. Кроме того, в атрибутах METOD и ENCTYPE необходимо указать метод и форму передачи данных: После открытия в браузере Web-страницы «Анкета» и внесения данных в поля формы необходимо щелкнуть по кнопке Отправить. Данные будут отправлены по указанному адресу электронной почты.
  • Слайд 52

    Контрольные вопросы:

    Какие тэги используются для создания на форме текстовых полей? Переключателей? Флажков? Раскрывающихся списков? Текстовых областей? Какие значения необходимо присвоить атрибутам тэга

    для отправки введенной в форму информации Практическое задание: Создать страницу «Анкета», содержащую форму для ввода данных
  • Слайд 53
  • Слайд 54

    Сайт

Посмотреть все слайды

Сообщить об ошибке