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

Содержание

Структура Web-сайта

Слайд 1

Презентация по информатике Создание Web-сайта

Шаронова С.М.


Слайд 2Структура Web-сайта

Структура Web-сайта

Слайд 3Контейнеры
Код страницы
Заголовок
Название Web-страницы
Основное содержание страницы

Контейнеры Код страницы Заголовок Название Web-страницы Основное содержание страницы

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


Компьютер

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

Слайд 5

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



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


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

Слайд 6Текст программы:


Компьютер


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



Текст программы:КомпьютерВсе о компьютерах

Слайд 7

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


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

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

Слайд 8

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



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

Все

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

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


Форматирование текста:Размер шрифта в заголовках задается тэгами от Н1 до Н6:Все о компьютерахТип выравнивания заголовка задает атрибут


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

контейнером

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

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


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



Абзацы:   Разделение текста на абзацы производится    контейнером . Для каждого абзаца

Слайд 10

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



Компьютер



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






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




Программирование Web-сайтаКомпьютер

Слайд 11Вставка рисунка
Форматы .GIF, .JPG, .PNG.

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

Слайд 12Вставка рисунка


Или


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

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

Заголовок страницы

Создайте страницы Программы, Словарь,

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

Создание других страниц сайта Заголовок страницы  Создайте страницы Программы, Словарь, Комплектующие, Анкета.Сохраните их в файлах с

Слайд 14
Гиперссылки

Гиперссылки состоят из указателя ссылки и

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

Слайд 16
Адрес электронной почты вставляется так:
Полезно на странице

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

E-mail:
mailbox@provaider.ru


По щелчку мыши по ссылке на адрес электронной почты
будет открываться программа Outlook Express, где в строке
Кому будет указан заданный в ссылке адрес
Адрес электронной почты вставляется так:    Полезно на странице помещать ссылку на адрес электронной

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

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

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



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

    Слайд 19

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



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

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



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

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



    Системные программы
    Прикладные программы
    Системы программирования



    Создание нумерованного списка Системные программыПрикладные программыСистемы программирования

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


    ТЕКСТОВЫЕ РЕДАКТОРЫ
    ГРАФИЧЕСКИЕ РЕДАКТОРЫ
    ЭЛЕКТРОННЫЕ ТАБЛИЦЫ
    СИСТЕМЫ

    УПРАВЛЕНИЯ БАЗАМИ ДАННЫХ.

    Создание вложенного спискаТЕКСТОВЫЕ РЕДАКТОРЫ ГРАФИЧЕСКИЕ РЕДАКТОРЫ ЭЛЕКТРОННЫЕ ТАБЛИЦЫ  СИСТЕМЫ УПРАВЛЕНИЯ БАЗАМИ ДАННЫХ.

    Слайд 23Словарь компьютерных терминов:
    Контейнер списка определений ,
    Внутри него термин – тэг


    определение -


    Процессор


    Центральный процессор, производящий вычисления в двоичном коде.



    Оперативная память


    Устройство, в котором хранятся программы и данные



    Словарь компьютерных терминов:Контейнер списка определений , Внутри него термин – тэг определение - ПроцессорЦентральный процессор, производящий вычисления

    Слайд 25Таблицы
    Таблица задается контейнером , внутри которого содержится описание структуры таблицы и

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

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


    НАИМЕНОВАНИЕ
    ТИП
    ИЗГОТОВИТЕЛЬ
    ЦЕНА


    ALIGN="CENTER">ПРОЦЕССОР
    PENTIUM
    INTEL
    2500 РУБЛЕЙ


    МАТЕРИНСКАЯ ПЛАТА
    Abit
    GIGABAIT
    2700 РУБЛЕЙ


    Вставить таблицу в файл hardware .htmlНАИМЕНОВАНИЕТИПИЗГОТОВИТЕЛЬЦЕНАПРОЦЕССОРPENTIUMINTEL2500 РУБЛЕЙМАТЕРИНСКАЯ ПЛАТАAbitGIGABAIT2700 РУБЛЕЙ

    Слайд 28Формы на Web- страницах
    Формы включают в себя текстовые поля, раскрывающиеся списки,

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

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

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

    поля для ввода данных. Просмотреть результат в браузере:




    Пожалуйста, введите ваше имя:

    NAME="name" SIZE=30>

    E-mail:

    NAME="e-mail"
    SIZE=30>


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

    Слайд 30Переключатели
    Пользователю предоставляется возможность отнести

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

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

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

    переключателей. Просмотреть результат в браузере:

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

    NAME="group" value="schoolboy">учащийся

    NAME="group" value="student">студент

    NAME="group" value="teacher">учитель

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

    Слайд 32Флажки
    Флажки задаются тэгом со значением

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

    Флажки    Флажки задаются тэгом со значением    атрибута type=“checkbox”

    Слайд 33Пример:
    Какие из сервисов Интернета вы используете наиболее часто:


    www

    TYPE="checkbox"
    NAME="group" value="e-mail">e-mail

    NAME="group" value="ftp">FTP

    Пример: Какие из сервисов Интернета вы используете наиболее часто:wwwe-mailFTP

    Слайд 34Поля списков
    Теперь выясним, какой из браузеров предпочитает посетитель сайта. Перечень браузеров

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

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

    список. Просмотреть результат в браузере:


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

    Слайд 36Текстовая область
    Создается с помощью тэга с обязательными атрибутами: NAME, задающим


    имя области, ROWS – число строк , COLS – число столбцов.
    добавить HTML-код, создающий текстовую область. Просмотреть результат в браузере:
    Какую еще информацию вы хотели бы видеть на нашем сайте?