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

Содержание

Основы языка разметки гипертекста HTML

Слайд 1


Слайд 2Основы языка разметки гипертекста HTML

Основы языка разметки гипертекста HTML

Слайд 3ЦЕЛЬ УРОКА
СФОРМИРОВАТЬ НАВЫКИ РАБОТЫ С ЯЗФКОМ ГИПЕРТЕКСТОВОЙ РАЗМЕТКИ HTML , УМЕТЬ

СОЗДАВАТЬ ДОКУМЕНТ HTML,ЗНАТЬ ОСНОВНЫЕ ТЕГИ ЯЗЫКА.
ЦЕЛЬ УРОКА			СФОРМИРОВАТЬ НАВЫКИ РАБОТЫ С ЯЗФКОМ ГИПЕРТЕКСТОВОЙ РАЗМЕТКИ HTML , УМЕТЬ СОЗДАВАТЬ ДОКУМЕНТ HTML,ЗНАТЬ ОСНОВНЫЕ ТЕГИ ЯЗЫКА.

Слайд 4КЛЮЧЕВЫЕ СЛОВА
HTML
BODY
WEB-страница
Атрибут
Гиперссылка

КЛЮЧЕВЫЕ СЛОВАHTMLBODYWEB-страницаАтрибутГиперссылка

Слайд 5 Hyper Text Markup Language (HTML) – язык гипертекстовой разметки

документов.

Web-страницы можно создать с помощью языка HTML

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

Hyper Text Markup Language (HTML) – язык гипертекстовой разметки документов.Web-страницы можно создать с помощью языка

Слайд 6 Теги заключаются в угловые скобки и

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

Например, код Web-страницы помещается внутрь контейнера


Теги могут записываться как прописными, так и строчными буквами.

Теги заключаются в угловые скобки и могут быть одиночными или парными.

Слайд 7 Некоторые теги имеют атрибуты, которые являются

именами свойств и могут принимать определённые значения и влияют на внешний вид Web-страницы.

Например,

Моё имя – Марина



Некоторые теги имеют атрибуты, которые являются именами свойств и могут принимать определённые

Слайд 8Структура Web-страницы



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



На этой странице можно

разместить любую интересную информацию в Интернете.


Назад

Структура Web-страницы Название Web-страницы На этой странице можно

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

файл под именем Шаблон.txt в личной папке.
Открыть файл Шаблон.txt и внести необходимую информацию, используя теги и их атрибуты.
Сохранить файл под именем index.htm в личной папке.



Создание Web-страницыСоздать личную папку.Создать в блокноте шаблон HTML-документа, набрав HTML-код страницы.Сохранить файл под именем Шаблон.txt в личной

Слайд 10Создание Web-страницы

Для редактирования файла index.htm необходимо выполнить следующие действия:

Создание Web-страницыДля редактирования файла index.htm необходимо выполнить следующие действия:

Слайд 11Атрибуты фона Web-страницы

Атрибут цвета Web-страницы


Атрибут вставки фонового рисунка Web-страницы

Атрибуты фона Web-страницыАтрибут цвета Web-страницыАтрибут вставки фонового рисунка Web-страницы

Слайд 12Теги и атрибуты форматирования текста на Web-странице
… до … тег размера

шрифта заголовков

тег форматирования шрифта
FACE=“Arial” атрибут задания гарнитуры шрифта
SIZE=4 атрибут задания размера шрифта
COLOR=“Red” атрибут задания цвета шрифта
ALIGN=“left” атрибут задания выравнивания текста


тег для создания горизонтальной линии

контейнер для разделения текста на абзацы
Теги и атрибуты форматирования текста на Web-странице… до … тег размера шрифта заголовков…  тег форматирования шрифта

Слайд 13Тег и атрибут вставки изображений на Web-странице





Тег и атрибут вставки изображений на Web-странице

Слайд 14Теги и атрибуты гиперссылки на Web-странице

Указатель тег с атрибутом

для создания гиперссылки

контейнер для создания гиперссылки на адрес электронной почты
Теги и атрибуты гиперссылки   на Web-страницеУказатель тег с атрибутом для создания гиперссылки… контейнер для создания

Слайд 15Гиперссылки
Для связывания Web- страниц используют гиперссылки.
Термин «гипертекст» был введён в

обращение Тедом Нельсоном в 1965 году для описания документов, которые выражают нелинейную структуру идей.
Гипертекст - это способ организации текстовой информации, внутри которой установлены смысловые связи между её различными фрагментами. Такие связи называют гиперсвязями, а место в тексте, обеспечивающее гиперсвязь, гиперссылкой.

Назад

ГиперссылкиДля связывания Web- страниц используют гиперссылки. Термин «гипертекст» был введён в обращение Тедом Нельсоном в 1965 году

Слайд 16Теги и атрибуты для создания списков на Web-странице
… контейнер для создания

нумерованных списков
  • тег элемента списка
    контейнер для создания маркированного списка
  • тег элемента списка
    контейнер для создания списка терминов
    тег для создания термина
    тег для создания определения

  • Теги и атрибуты для создания списков на Web-странице… контейнер для создания нумерованных списков    тег

    Слайд 17Теги и атрибуты для создания интерактивных форм на Web-странице
    … контейнер для

    создания формы
    Тег со значением атрибута TYPE=“text” создают текстовое поле
    Тег со значением атрибута TYPE=“radio” создают группу переключателей
    Тег со значением атрибута TYPE=“checkbox” создают флажки
    контейнер для реализации раскрывающего списка
    Теги и атрибуты для создания интерактивных форм  на Web-странице… контейнер для создания формыТег со значением атрибута

    Слайд 18Домашнее задание
    ЯЗЫК ПРОГРАММИРОВАНИЯ DELPHI

    Домашнее задание ЯЗЫК ПРОГРАММИРОВАНИЯ DELPHI

    Слайд 19Использованные источники
    1. Дробахина, АН. и др. Структурирование содержания профессиональной подготовки учителя

    информатики средствами современного гипертекста / А.Н. Дробахина, М.С. Можаров. - Новокузнецк, 2013.
    2. Угринович, Н. Д. Информатика и ИКТ. Базовый уровень. Учебник 10 класса/Н. Д. Угинович. – М.: БИНОМ. Лаборатория знаний, 2015
    Использованные источники1. Дробахина, АН. и др. Структурирование содержания профессиональной подготовки учителя информатики средствами современного гипертекста / А.Н.

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

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


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

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

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

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