Презентация на тему "Создание веб сайта"

Содержание

• 
  Слайд 1

  Создание Web-сайта

• 
  Слайд 2
  

  Структура Web-сайта Тема урока:

• 
  Слайд 3

  Контейнеры

  Код страницы

  Заголовок

  Название Web-страницы

  Основное содержание страницы

   

• 
  Слайд 4

  Назовем Web-страницу «Компьютер»

• 
  Слайд 5

  Поместим на страницу текст«Все о компьютерах»

  Все о компьютерах

• 
  Слайд 6

  Текст программы:

  Все о компьютерах

• 
  Слайд 7

  Сохранять Web-страницы нужно с расширением.html

  Например, Мой сайт .html Принято сохранять титульный файл сайта под именем Index.html

• 
  Слайд 8

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

  Размер шрифта в заголовках задается тэгами от Н1 до Н6:

  Все о компьютерах

  Тип выравнивания заголовка задает атрибут ALIGN

   
• 
  Слайд 9

  Абзацы:

  Разделение текста на абзацы производится контейнером

   

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

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

  Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.

• 
  Слайд 10

  Программирование Web-сайта

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

   

  Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.

• 
  Слайд 11

  Вставка рисунка

  Форматы.GIF, .JPG, .PNG. Тэгс атрибутомSRC, который указывает место хранения файла (путь к файлу). Расположение рисунка относительно текста –атрибутALIGN: TOP MIDDLE BOTTON LEFT RIGHT Вставить рисунок в контейнер перед абзацем текста.

• 
  Слайд 12
  

  Или

• 
  Слайд 13

  Создание других страниц сайта

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

• 
  Слайд 14

  Гиперссылки

  Гиперссылки состоят из указателя ссылки и адресной части ссылки. Адресная часть – URL – адрес документа. Принято размещать гиперссылки в нижней части титульной страницы, поэтому разместим их после введенного текста в новом абзаце. В качестве указателя гиперссылок выберем названия страниц нашего сайта: Программы, Словарь, Комплектующие, Анкета. Указатели гиперссылок разделяются пробелами ( ) . Для каждой гиперссылки определим адрес перехода, (контейнер )с атрибутом HREF, значением которого является URL – адрес.

• 
  Слайд 15
  

  Программы]   [Словарь]   [Комплектующие]   [Анкета]

• 
  Слайд 16

  Адрес электронной почты вставляется так:

  Полезно на странице помещать ссылку на адрес электронной почты, по которому посетители могут связаться с администрацией сайта. E-mail: mailbox@provaider.ru По щелчку мыши по ссылке на адрес электронной почты будет открываться программа Outlook Express, где в строке Кому будет указан заданный в ссылке адрес

• 
  Слайд 17
  
• 
  Слайд 18

  Создание списка нумерованного

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

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

  • .С помощью атрибута TYPEтэга <ОL> можнозадать вид нумерации: арабские цифры по умолчанию, “I” (римские цифры), “а” (строчные буквы). Открыть в Блокноте файл Software.html и добавить следующий HTML-код, задающий список:
    1. Системные программы
    2. Прикладные программы
    3. Системы программирования
• 
  Слайд 19

  Создание списка маркированного

  Создадимтеперь вложенный маркированный список для одного из элементов основного списка. Список располагается внутри контейнера

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

  • . С помощью атрибута TYPEтэга
    • можнозадать вид маркера списка: “disc” (диск), “Square” (квадрат), “circle” (окружность). Добавить HTML-код, задающий вложенный список для элемента
    • Прикладные программы.
• 
  Слайд 20

  Создание нумерованного списка

   

  1. Системные программы
  2. Прикладные программы
  3. Системы программирования
• 
  Слайд 21

  Создание вложенного списка

  • ТЕКСТОВЫЕ РЕДАКТОРЫ
  • ГРАФИЧЕСКИЕ РЕДАКТОРЫ
  • ЭЛЕКТРОННЫЕ ТАБЛИЦЫ
  • СИСТЕМЫ УПРАВЛЕНИЯ БАЗАМИ ДАННЫХ.
• 
  Слайд 22
  
• 
  Слайд 23

  Словарь компьютерных терминов:

  Контейнер списка определений

  ,

  Внутри него термин – тэг

  определение - Процессор   Центральный процессор, производящий вычисления в двоичном коде. Оперативная память   Устройство, в котором хранятся программы и данные
• 
  Слайд 24
  
• 
  Слайд 25

  Таблицы

  Таблица задается контейнером

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

• 
  Слайд 26

  Вставить таблицу в файл hardware .html

  НАИМЕНОВАНИЕ ТИП ИЗГОТОВИТЕЛЬ ЦЕНА ПРОЦЕССОР PENTIUM INTEL 2500 РУБЛЕЙ МАТЕРИНСКАЯ ПЛАТА Abit GIGABAIT 2700 РУБЛЕЙ
• 
  Слайд 27
  
• 
  Слайд 28

  Формы на Web- страницах

  Формы включают в себя текстовые поля, раскрывающиеся списки, флажки, переключатели и т.д. Формы заключаются в контейнер

   

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

• 
  Слайд 29
  

  Открыть в Блокноте файл Anketa.html и добавить следующий HTML-код, задающий текстовые поля для ввода данных. Просмотреть результат в браузере:

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

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

  Пользователю предоставляется возможность отнести себя к одной из групп пользователей: учащийся, студент, учитель. Переключатели создается тэгом со значением атрибута type=“radio”.Все элементы в группе должны иметь одинаковые значения атрибута Name=“Group” Другим обязательным атрибутом должно быть VALUE, принимающий, в нашем случае, значения "schoolboy“, "student“, "teacher"

• 
  Слайд 31
  

  Открыть в Блокноте файл Anketa.html и добавить следующий HTML-код, задающий группу переключателей. Просмотреть результат в браузере:

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

• 
  Слайд 32

  Флажки

  Флажкизадаются тэгом со значением атрибута type=“checkbox” Флажки, объединенные в группу могут иметь одинаковые значения атрибута Name=“Group” Другим обязательным атрибутом должно быть VALUE, принимающий, в нашем случае, значения “www“, “e-mail“, “ftp“ Добавить HTML-код, задающий флажки для выбора нескольких элементов. Просмотреть результат в браузере:

• 
  Слайд 33

  Пример:

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

• 
  Слайд 34

  Поля списков

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

  . Выбираемый по умолчанию элемент задается атрибутом SELECTED.
• 
  Слайд 35
  

  Открыть в Блокноте файл Anketa.html и добавить следующий HTML-код, задающий раскрывающий список. Просмотреть результат в браузере:

  Internet ExplorerNetscape NavigatorOperaNeo Planet

• 
  Слайд 36

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

  Создается с помощью тэгас обязательными атрибутами: NAME, задающим имя области, ROWS – число строк , COLS – число столбцов. добавить HTML-код, создающий текстовую область. Просмотреть результат в браузере: Какую еще информацию вы хотели бы видеть на нашем сайте? <BR> <TEXTAREA NAME="resume" ROWS=4 COLS=30>

• 
  Слайд 37

  Отправка формы

  Отправка введенной в форму информации, а также очистка полей от уже введенной информации осуществляется кнопками. Для создания кн., отправляющей инф-ю, атрибуту TYPE=“submit“, value=«Отправить». Для создания кн., очищающую инф-ю, атрибуту TYPE=“reset“, value=«Очистить». добавить HTML-код, создающий текстовую область. Просмотреть результат в браузере:

• 
  Слайд 38
  

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

  .