Разработка Web-сайтов - презентация, доклад, проект скачать

Нажмите для полного просмотра!

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Разработка Web-сайтов. Доклад-сообщение содержит 54 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1

Описание слайда:

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

Слайд 2

Описание слайда:

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

Слайд 3

Описание слайда:

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

Слайд 4

Описание слайда:

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

Слайд 5

Описание слайда:

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

Слайд 6

Описание слайда:

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

Слайд 7

Описание слайда:

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

Слайд 8

Описание слайда:

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

Слайд 9

Описание слайда:

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

Слайд 10

Описание слайда:

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

Слайд 11

Описание слайда:

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

Слайд 12

Описание слайда:

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

Слайд 13

Описание слайда:

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

Слайд 14

Описание слайда:

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

Слайд 15

Описание слайда:

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

Слайд 16

Описание слайда:

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

Слайд 17

Описание слайда:

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

Слайд 18

Описание слайда:

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

Слайд 19

Описание слайда:

Горизонтальная линия. Горизонтальная линия. Заголовки целесообразно отделять от остального содержания страницы горизонтальными линиями с помощью одиночного тэга . Абзацы. Разделение текста на абзацы производится с помощью контейнера . При просмотре в браузере абзацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания и параметры форматирования шрифта.

Слайд 20

Описание слайда:

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

Слайд 21

Описание слайда:

Компьютер и ПО Ha этом сайте... Терминологический словарь ...

Слайд 22

Описание слайда:

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

Слайд 23

Описание слайда:

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

Слайд 24

Описание слайда:

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

Слайд 25

Описание слайда:

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

Слайд 26

Описание слайда:

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

Слайд 27

Описание слайда:

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

Слайд 28

Описание слайда:

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

Слайд 29

Описание слайда:

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

Слайд 30

Описание слайда:

Вставим в домашнюю страницу сайта HTML-код, создающий панель навигации: Вставим в домашнюю страницу сайта HTML-код, создающий панель навигации: [Программы] & nbsp [Словарь] [Анкетa]

Слайд 31

Описание слайда:

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

Слайд 32

Описание слайда:

Пример

Слайд 33

Описание слайда:

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

Слайд 34

Описание слайда:

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

Слайд 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

Описание слайда:

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

Слайд 48

Описание слайда:

Раскрывающиеся списки.HTML код Какой браузер вы используете наиболее часто: Internet Explorer Netscape Navigator Opera Mozilla

Слайд 49

Описание слайда:

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

Слайд 50

Описание слайда:

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

Слайд 51

Описание слайда:

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

Слайд 52

Описание слайда:

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