kopilkaurokov.ru - сайт для учителей

Создайте Ваш сайт учителя Курсы ПК и ППК Видеоуроки Олимпиады Вебинары для учителей

Урок по информатике «Создание web-страниц с помощью HTML. Основы языка HTML»

Нажмите, чтобы узнать подробности

Вводный урок по созданию web-страниц, на котором изучаются  структура  HTML – документа; основные понятия: тег, структура, технология создания Web-страниц. Закрепление знаний происходит при выполнении практической работы. На уроке используется опорный конспект.

Просмотр содержимого документа
«История создания HTML»

История создания HTML (Hyper Text Markup Language — язык разметки гипертекста)

Некоторые даты:

- В 1945 году американский ученый, научный консультант президента Ванневар Буш (Vannevar Bush) высказывает идею гипертекста.

- В 1968 году Дуглас Энджельбарт (создатель программного диалогового интерфейса, который реагировал на действия специального указателя - курсора, а так же создатель манипулятора - мыши) демонстрирует работу гипертекстовых связей в созданном им текстовом процессоре.

История языков разметки уходит в 1960-е годы, когда сотрудники компании IBM взялись за решение задач переноса документов между различными платформами и операционными системами. Результатом их усилий стал язык GML (General Markup Language - общий язык разметки), который предназначался для использования на ЭВМ семейства IBM. Язык GML в дальнейшем был расширен, а в 80-х годах прошёл стандартизацию ISO (Международная организация стандартизации). Этот мощный и универсальный режим разметки, названный SGML (Standart General Markup Langugage), использовался военным ведомством США для оформления технической документации. Однако SGML широкого распространения не получил ввиду своей сложности и дороговизны реализации.

Следующий этап развития языков разметки связан с именами учёных-физиков, сотрудников CERN (Европейский Центр Ядерных Исследований) в Женеве. Так, в конце 80-х годов Тим Бернерс-Ли занялся проблемой хранения и отображения данных, полученных коллегами. Проблема состояла в том, что каждый специалист, приезжавший в Центр, применял собственные методы представления информации, и срочно требовалось создание универсальной системы, которая не зависела бы от используемой компьютерной платформы и в то же время была бы достаточно простой.

В основу разрабатываемого языка Тим Бернерс-Ли положил язык SGML и приёмы работы с гипертекстом, с чем и связано название созданного им языка - HTML. Новый язык использовал основные конструкции SGML для описания документов и гипертекстовых ссылок.

Термин "гипертекст" впервые был введён Тедом Нельсоном в 1960-х годах. Понятие "гипертекст" обозначает электронный документ, который содержит в себе ссылки на другие документы.

Разработка HTML привела в итоге к новой технологии распространения гипертекстовых документов в Internet. Однако для широкого распространения WWW, кроме языка HTML, потребовалась разработка протокола передачи гипертекста HTTP (HyperText Transfer Protocol - протокол передачи гипертекста), который позволил осуществлять обмен документами HTML. Именно этот протокол дал возможность приложению-клиенту находить и использовать ресурсы, хранящиеся на другом компьютере. Протокол HTTP занимается поиском и загрузкой нужного документа.

Первые HTML-документы, обращавшиеся в Internet в начале 90-х годов, были исключительно текстовыми. Так было до тех пор, пока в NCSA (Национальный центр исследования сверхпроводников) Иллинойского университета не был разработан первый графический интерфейс (Mosaic) для HTML-документов. Впоследствии с появлением множества простых и доступных браузеров для Web и для других служб Internet началась новая эра для HTML. Язык HTML стал основным инструментом для распространения информации в Internet, хотя изначально он предназначался для организации информации в пределах одного научного центра.

     Язык HTML разрабатывался с той точки зрения, что все типы устройств должны иметь возможность использовать информацию в Web: персональные компьютеры с графическими дисплеями с различным разрешением и числом цветов, сотовые телефоны,…


История создания HTML (Hyper Text Markup Language — язык разметки гипертекста)

Некоторые даты:

- В 1945 году американский ученый, научный консультант президента Ванневар Буш (Vannevar Bush) высказывает идею гипертекста.

- В 1968 году Дуглас Энджельбарт (создатель программного диалогового интерфейса, который реагировал на действия специального указателя - курсора, а так же создатель манипулятора - мыши) демонстрирует работу гипертекстовых связей в созданном им текстовом процессоре.

История языков разметки уходит в 1960-е годы, когда сотрудники компании IBM взялись за решение задач переноса документов между различными платформами и операционными системами. Результатом их усилий стал язык GML (General Markup Language - общий язык разметки), который предназначался для использования на ЭВМ семейства IBM. Язык GML в дальнейшем был расширен, а в 80-х годах прошёл стандартизацию ISO (Международная организация стандартизации). Этот мощный и универсальный режим разметки, названный SGML (Standart General Markup Langugage), использовался военным ведомством США для оформления технической документации. Однако SGML широкого распространения не получил ввиду своей сложности и дороговизны реализации.

Следующий этап развития языков разметки связан с именами учёных-физиков, сотрудников CERN (Европейский Центр Ядерных Исследований) в Женеве. Так, в конце 80-х годов Тим Бернерс-Ли занялся проблемой хранения и отображения данных, полученных коллегами. Проблема состояла в том, что каждый специалист, приезжавший в Центр, применял собственные методы представления информации, и срочно требовалось создание универсальной системы, которая не зависела бы от используемой компьютерной платформы и в то же время была бы достаточно простой.

В основу разрабатываемого языка Тим Бернерс-Ли положил язык SGML и приёмы работы с гипертекстом, с чем и связано название созданного им языка - HTML. Новый язык использовал основные конструкции SGML для описания документов и гипертекстовых ссылок.

Термин "гипертекст" впервые был введён Тедом Нельсоном в 1960-х годах. Понятие "гипертекст" обозначает электронный документ, который содержит в себе ссылки на другие документы.

Разработка HTML привела в итоге к новой технологии распространения гипертекстовых документов в Internet. Однако для широкого распространения WWW, кроме языка HTML, потребовалась разработка протокола передачи гипертекста HTTP (HyperText Transfer Protocol - протокол передачи гипертекста), который позволил осуществлять обмен документами HTML. Именно этот протокол дал возможность приложению-клиенту находить и использовать ресурсы, хранящиеся на другом компьютере. Протокол HTTP занимается поиском и загрузкой нужного документа.

Первые HTML-документы, обращавшиеся в Internet в начале 90-х годов, были исключительно текстовыми. Так было до тех пор, пока в NCSA (Национальный центр исследования сверхпроводников) Иллинойского университета не был разработан первый графический интерфейс (Mosaic) для HTML-документов. Впоследствии с появлением множества простых и доступных браузеров для Web и для других служб Internet началась новая эра для HTML. Язык HTML стал основным инструментом для распространения информации в Internet, хотя изначально он предназначался для организации информации в пределах одного научного центра.

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

Просмотр содержимого документа
«Практическая работа1»

Практическая работа № 1 по теме «Создание простейшей web-страницы»

Задание 1. Создание простейших файлов HTML.

Чтобы создать свой файл HTML, сделайте следующее:

  1. Создайте папку KURS, в которой мы будем сохранять созданные web-страницы.

  2. Запустите стандартную программу Блокнот (Notepad).

  3. Наберите в окне редактора простейший текст файла HTML:

Учебный файл HTML

HEAD

BODY

Расписание занятий на вторник

BODY

HTML

4. Сохраните файл под именем RASP.HTM.

5. Для просмотра созданной web-страницы загрузите браузер Microsoft Internet Explorer.

6. Выполните в меню браузера команду Файл (File), Открыть (Open), Просмотр
(Обзор — Browse), найдите в папке KURS файл RASP.HTM и загрузите его.
Убедитесь, что название web-страницы (Учебный файл HTML) отразилось
в верхней статусной строке браузера.


Задание 2. Управление расположением текста на экране.

Информация.

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


1. При необходимости выполните п. 5, 6 задания 1.

2. Откройте первоисточник web-страницы - - в меню браузера выполните команду Вид (View), Источник (В виде HTML). Откроется окно со стандарт­ной программой Блокнот (Notepad), в котором ваша web-страница представ­лена в командах HTML.

3. Внесите изменения в текст файла HTML, расположив слова «Расписание»,«занятий», «на вторник» на разных строках:

Учебный файл HTML

Расписание

занятий

на вторник

Просмотр содержимого документа
«опорный конспект»

____________________________________________________________


____________________________________________________________________

Технология создания Web – страницы:

1.Набрать текст программы (в Блокноте)
2. Сохранить программу с расширением *.htm или
html (если это главная страница, то этот файл должен иметь имя index.html)

3. Запустить броузер Internet Explorer и из него открыть html-файл

4. Для просмотра и редактирования html-кода выполнить ВИДв виде НТМL

5. После внесения изменений выполнить Обновить (F5)


Замечания:

    1. имена файлов должны иметь только латинские имена с расширением htm или html

    2. все файлы, относящиеся к одному проекту: html-файлы, графика и т.д. должны располагаться в одном каталоге


ТЕГ – это_____________________________________________________________________________

______________________________________________________________________________________



Структура HTML – документа


Особенности:

1. текст, который мы хотим видеть в окне браузера, помещается между тегами.

2. все теги заключены в скобки.

3. в парных тегах закрывающий тег начинается с символа / «слеш». Парные теги выделяют текстовый блок и придают ему на странице некоторый статус; например, с помощью тегов hi...hi текстовый блок выделяется как заголовок.

4. Большинство тегов имеют ряд свойств, называемых параметрами; например, заголовок, помеченный тегами hi aiign="center” ...hi, располагается в центре окна браузера.

5. Каждый параметр представлен в следующем виде: имя_параметра=«значение_параметра», например width=”80”.

Все параметры располагаются в открывающем теге. Если параметров несколько, они отделяются пробелами. Порядок их следования не имеет значения.

6. Информация, располагаемая между тегами head ... head, не отображается в окне браузера, там находятся тег заголовка страницы, теги для поисковых машин, программный код, написанный на языке программирования, например JavaScript, и другая служебная информация.

7. Вся информация, видимая в окне браузера, помещается между тегами body...body.

Список элементов HTML

Базисные

Тип документа

HTMLHTML

начало и конец файла

Имя документа

TITLEX/TITLE

должно быть в заголовке

Заголовок

HEADXHEAD

описание документа, например его имя

Тело

BODYX/BODY

Содержимое cтраницы

Определение структуры

Заглавие

?H?

стандарт определяет 6 уровней

с выравниванием

Н?

ALIGN=LEFT|CENTER|RIGHT


Внешний вид

Жирный


Курсив


Подчеркнутый

U/U

часто не поддерживается

Верхний индекс

SUB/SUB


Нижний индекс

SUP/SUP


Размер шрифта

FONT SIZE=?/FQNT

(от 1 до 7)

Цвет шрифта

FONT COLOR="#$$$$$$" FONT


Выбор шрифта

FONT FACE="***"/FONT


Выравнивание


Ссылки и графика

Ссылка

HREF="URL"/A


Ссылка на закладку

HREF="URL#***"

(в другом документе)


HREF="#***"/A

(в том же документе)

Графика

IMG SRC="URL"


Выравнивание


Размеры

(в точках)

Окантовка

IMG SRC="URL" BORDER=?

(в точках)

Отступ

(в точках)

Разделители

Параграф

закрывать элемент часто не обязательно)

Выравнивание

Р ALIGN=LEFT|CENTER|RIGHT


Новая строка

BR

(одиночный перевод строки)

Горизонтальный разделитель

HR


Выравнивание


Списки

Неупорядоченный

ULLIUL

(LI перед каждым элементом)

Компактный

UL COMPACT/UL


Тип метки

(для всего списка)


  • (этот и последующие)

    Нумерованный

    OLLI/OL

    (LI перед каждым элементом)

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

    DLDTDD/DL

    (DТ=термин DD=onpeделение)

    Фон и цвета

    Фоновая картинка

    BODY BACKGROUND="URL"


    Цвет фона

    BODY BGCOLOR="#$$$$$$"

    (порядок: красный/зеленый/синий)

    Цвет текста

    BODY ТЕХТ="#$$$$$$"


    Цвет ссылки

    BODY_LINK="#$$$$$$"


    Таблицы

    Определить таблицу

    TABLE/TABLE


    Окантовка таблицы

    table border=?


    Строка таблицы

    TR/TR


    Выравнивание


    Ячейка таблицы

    TD/TD

    (должна быть внутри строки)

    Выравнивание

    ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTOM


    Желаемая ширина

    TD WIDTH=?

    (в точках)

    Ширина в процентах

    TD WIDTH="%"

    проценты от ширины страницы)

    Цвет ячейки

    TD BGCOLOR="#$$$$$$"


    Заголовок таблицы

    /ТН

    как данные, но жирный шрифт и центровка)

    Выравнивание

    ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTQM


    Цвет ячейки

    ТН BGCOLOR= "#$$$$$$"



    Просмотр содержимого документа
    «список элементов HTML»

    Список элементов HTML

    Базисные

    Тип документа

    HTMLHTML

    начало и конец файла

    Имя документа

    TITLEX/TITLE

    должно быть в заголовке

    Заголовок

    HEADXHEAD

    описание документа, например его имя

    Тело

    BODYX/BODY

    Содержимое cтраницы


    Определение структуры


    Заглавие

    ?H?

    стандарт определяет 6 уровней

    с выравниванием

    Н?

    ALIGN=LEFT|CENTER|RIGHT___



    Внешний вид

    Жирный


    Курсив


    Подчеркнутый

    U/U

    часто не поддерживается

    Верхний индекс

    SUB/SUB


    Нижний индекс

    SUP/SUP


    Размер шрифта

    FONT

    SIZE=?/FQNT

    (от 1 до 7)

    Цвет шрифта


    FONT COLOR="#$$$$$$" FONT


    Выбор шрифта


    FONT FACE="***"/FONT


    Выравнивание




    Ссылки и графика


    Ссылка

    HREF="URL"/A


    Ссылка на закладку

    HREF="URL#***"

    (в другом документе)


    HREF="#***"/A

    (в том же документе)

    Графика

    IMG SRC="URL"


    Выравнивание


    Размеры


    (в точках)

    Окантовка

    IMG SRC="URL" BORDER=?

    (в точках)

    Отступ

    IMG SRC="URL" HSPACE-? VSPACE=?

    (в точках)


    Разделители

    Параграф

    закрывать элемент часто не обязательно)


    Выравнивание

    Р ALIGN=LEFT|CENTER|RIGHT


    Новая строка

    BR

    (одиночный перевод строки)


    Горизонтальный разделитель_

    HR


    Выравнивание



    Списки

    Неупорядоченный

    ULLIUL

    (LI перед каждым элементом)

    Компактный

    UL COMPACT/UL


    Тип метки

      SQUARE

    (для всего списка)


  • SQUARE

  • (этот и последующие)

    Нумерованный

    OLLI/OL

    (LI перед каждым элементом)

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


    DLDTDD/DL

    (DТ=термин DD=onpeделение)


    Фон и цвета

    Фоновая картинка

    BODY BACKGROUND="URL"


    Цвет фона

    BODY BGCOLOR="#$$$$$$"


    (порядок: красный/зеленый/синий)

    Цвет текста

    BODY ТЕХТ="#$$$$$$"


    Цвет ссылки

    BODY_LINK="#$$$$$$"



    Таблицы

    Определить таблицу

    TABLE/TABLE


    Окантовка таблицы

    table border=?


    Строка таблицы

    TR/TR


    Выравнивание

    ALIGN-LEFT|RIGHT|CENTER|MIDDLE|BOTTOM


    Ячейка таблицы

    TD/TD

    (должна быть внутри строки)

    Выравнивание


    ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTOM


    Желаемая ширина

    TD WIDTH=?

    (в точках)

    Ширина в процентах

    TD WIDTH="%"

    проценты от ширины страницы)

    Цвет ячейки

    TD BGCOLOR="#$$$$$$"


    Заголовок таблицы

    /ТН

    как данные, но жирный шрифт и центровка)

    Выравнивание

    ТН

    ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTQM


    Цвет ячейки

    ТН BGCOLOR= "#$$$$$$"


    Заглавие таблицы


    Выравнивание

    сверху/снизу таблицы

    Фреймы

    Документ с фреймами

    FRAMESETX/FRAMESEI

    вместоBODY

    Высота строк

    FRAMESET

    ROWS-,,,

    (точки или %)

    Высота строк

    ROWS=*/FRAMESЕТ

    (* = относительный размер)

    Ширина колонок

    COLS=*

    (точки или %)

    Документ

    SRC="URL"


    Имя фрейма

    NAME="***"|_blank|_selt| _parent|_top


    Ширина границы

    FRAME

    MARGINWIDTH=?

    (правая и левая границы)



    Просмотр содержимого документа
    «урок »

    Тема урока «Создание web-страниц с помощью HTML. Основы языка HTML»

    Цели урока:

    • Обучающая: изучение структуры HTML – документа, основных понятий: тег, структура, технология создания Web-страниц;

    • Развивающая: умение сравнивать и обобщать;

    • Воспитательная: воспитание информационной культуры, положительное отношение к знаниям.

    Тип урока: изучение нового материала с последующим применением его в практической работе.

    Вид урока: теоретический урок

    Методы: объяснительно-иллюстративный, репродуктивный

    Используемые материалы:

    • подготовленные сообщения по истории HTML, в виде д/з.

    • класс, оборудованный ПК,

    • презентация,

    • карточки,

    • видеопроектор,

    • графические файлы в папке с:\foto\comp и usor

    • карточка-справка по тегам

    • опорные конспекты

    • на Рабочем столе файл с текстом программы в Блокноте

    План урока.

    1. Постановка цели урока.

    2. Актуализация знаний

    III Изучение нового материала.

    IV Закрепление полученных знаний. Практическая работа.

    V. Подведение итогов урока.

    VI Домашнее задание

    Ход урока.

    I. Постановка цели урока.

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

    А кто-нибудь из вас хотел бы сделать свою личную страничку, свой сайт.

    Сегодня мы начнём рассмотрение одного из способов создания сайта. Запишем тему урока… в КОНСПЕКТ (опорный конспект).

    II Актуализация знаний

    • Где находятся Web – страницы? (На Web - серверах)

    Web – сервер - компьютер в сети Internet, хранящий Web-страницы и соответствующее программное обеспечение для работы с ними.

    • Информация на Web – серверах представлена в виде … (Web - сайта)

    • Что такое Web – сайт? (Объединение Web – страниц одной темой)

    • А что ещё характерно для Web – сайт? (Наличие титульной страницы, которая называется домашняя или главная)

    На Web – страницах находится информация.

    • А какая информация? (Текстовая, графическая, звуковая, видео) Web – страницы являются мультимедийными.

    • в Web – сайтах как соединены Web – страницы? (Гиперссылками)

    • Что такое гиперссылка? (Гиперссылка осуществляет переход от одной страницы к другой)

    • Как узнать, что в тексте есть гиперссылка? (Выделена другим цветом или курсор на ссылке меняет свою форму и превращается в указующий перст)

    Для того, чтобы создать Web – страницу нужно написать программу.

    • Какие языки программирования вы знаете?

    Вспомним технологию создания программы на языке программирования

    1. Набор текста программы.
      2. Запуск программы.
      3. Сохранение программы с расширением

    III Изучение нового материала.

    Теперь мы будем действовать по другому. Нам необходимо будет иметь 2 программы:

    1. Блокнот (для создания текста программ)
    2. Браузер (будет отображать информацию в своём рабочем окне)

    ! Технологию создания Web – страницы зачитывает ученик по пунктам из опорного конспекта; учитель одновременно выполняет за ПК с проектором

    Технология создания Web – страницы:

    1.Набрать текст программы (в Блокноте)
    2. Сохранить программу с расширением *.htm или
    html (если это главная страница, то этот файл должен иметь имя index.html)

    3. Запустить броузер Internet Explorer и из него открыть html-файл

    4. Для просмотра и редактирования html-кода выполнить ВИДв виде НТМL

    5. После внесения изменений выполнить Обновить (F5)


    Далее по СЛАЙДУ зачитываем..

    Замечания:

      1. имена файлов д.иметь только латинские имена с расширением htm или html

      2. все файлы, относящиеся к одному проекту: html-файлы, графика и т.д. должны располагаться в одном каталоге

    • А на каком языке мы будем писать программу для создания Web – страницы? (На языке HTML).

    Прежде чем начать писать программу на языке HTML, мы познакомимся с основами языка HTML.

    Сначала познакомимся с историей создания языка HTML. (сообщение ученика).

    Демонстрируются слайды с вопросами, на которые отвечает класс, один ученик –читает со слайдов

    Основным понятием языка HTML является понятие тег. СЛАЙД

    Записываем в опорный конспект

    ТЕГ – инструкция браузеру, указывающие способ отображения информации.


    Задание. Даны теги, определить парные и одиночные теги. СЛАЙД

    ,
    , ,

    • Теги пишутся с использованием, какого алфавита?

    • При написании тегов используются только буквы?

    Структура HTML – документа. СЛАЙДЫ





    Особенности: зачитывает ученик по КОНСПЕКТУ

    1. текст, который мы хотим видеть в окне браузера, помещается между тегами.

    2. все теги заключены в скобки.

    3. в парных тегах закрывающий тег начинается с символа / «слеш». Парные теги выделяют текстовый блок и придают ему на странице некоторый статус; например, с помощью тегов hi...hi текстовый блок выделяется как заголовок.

    4. Большинство тегов имеют ряд свойств, называемых параметрами; например, заголовок, помеченный тегами hi aiign="center” ...hi, располагается в центре окна браузера.

    5. Каждый параметр представлен в следующем виде: имя_параметра=«значение_параметра», например width="80».

    Все параметры располагаются в открывающем теге. Если параметров несколько, они отделяются пробелами. Порядок их следования не имеет значения.

    6. Информация, располагаемая между тегами head ... head, не отображается в окне браузера, там находятся тег заголовка страницы, теги для поисковых машин, программный код, написанный на языке программирования, например JavaScript, и другая служебная информация.

    7. Вся информация, видимая в окне браузера, помещается между тегами body...body.

    ПРАКТИЧЕСКАЯ РАБОТА.

    Карточка№1 «Создание простейшей Web-страницы».

    Выполнить задания 1, 2. 10 мин

    АНАЛИЗ РАБОТЫ

    ? какую команду надо выполнять после внесения изменений в код.

    ? Изменилось ли изображение текста на экране, когда вы клавишей Enter разбили предложение на абзацы?

    ? вспомните работу в текстовых редакторах. Какие параметры текста и как мы меняли – цвет шрифта, размер, начертание, отступ абзаца, выравнивание и т.д.

    Для изменения вида шрифта, абзаца, работы с графикой, таблицами в HTML существуют специальные команды (теги).

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

    Основные теги для работы содержатся в таблице (в опроных конспектах учеников)

    Рассмотрим некоторые примеры. СЛАЙДЫ

    Заголовки:

    HTML поддерживает 6 уровней внутренних заголовков.

    … самый крупный





    … самый мелкий

    Атрибуты: align="значение" (определяет способ выравнивания заголовка по горизонтали).

    Значения: center (по центру), right (по правому краю), left (по левому краю).

    Например, Давайте знакомиться - Компьютер (заголовок первого уровня, выравнивание по центру).

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

    1) Выделение текста:

    - выделение полужирным
    - выделение курсивом
    - выделение подчёркиванием
    Например: Привет

    2) Стиль шрифта (гарнитура, размер, цвет):

    Тег должен иметь хотя бы один из трёх возможных атрибутов:

    Размер шрифта size="значение" (значения целые числа от 1 до 7)
    Цвет шрифта color="значение"
    Значение – название цвета или его 16-й код, например

    привет
    привет

    Гарнитура (вид шрифта) FACE="значение", например

    привет

    Пример

    привет (слово привет имеет размер 7, красного цвета, вид шрифта Arial).

    3. Тег абзаца:

    Атрибут:

    align="значение"

    left (по левому краю), right (по правому краю), center (по центру), justify (по ширине).

    Перевод строки:

    Цвет

    RRGGBB

    Цвет

    RRGGBB

    black

    черный

    000000

    purple

    фиолетовый

    FF00FF

    white

    белый

    FFFFFF

    yellow

    желтый

    FFFF00

    red

    красный

    FF0000

    brown

    коричневый

    996633

    green

    зеленый

    00FF00

    orange

    оранжевый

    FF8000

    azure

    бирюзовый

    00FFFF

    violet

    лиловый

    8000FF

    blue

    синий

    0000FF

    gray

    серый

    А0А0А0

    Фоновое оформление Web-страницы

    Фоновое изображение — это графический файл с изображением неболь­шой прямоугольной плашки. При просмотре в браузере эта плашка много­кратно повторяется, заполняя все окно, независимо от его размеров.

         Существует два способа фонового оформления Web-страницы:

    Использовать цвет, из таблицы основных цветов –
    заменить ? строкой задающий цвет

    Использовать графический фон –
    заменить ? строкой, задающей имя фонового файла, при необходимости его положение на диске ПК

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

    Графика, используемая в качестве фоновой, задается в теге в начале файла HTML.

    Например:

    IV Закрепление полученных знаний. Практическая работа.

    Выполнение заданий 3-10 по карточке

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

    V. Подведение итогов урока.

    Учащиеся по слайдам устно заполняют пропущенные места.

    язык . . . . (HTML)

     

    расширение файла . . . . (*.htm)

     

     . . . (тег)

    первый тег программы  . . . ()

    Запуск программы Блокнот  . . . (Пуск  Программы  Стандартные Блокнот)

    Гиперссылка  . . . (переход от одной страницы к другой)

    HTML-программу выполняет  . . . . (Internet Explorer)

    Парный тег  . . . ( )

    Web – сайт состоит из  . . . (Web – страниц)

    Текст программы пишем  . . . (в программе Блокнот)

    1. Как переводится HTML и что это обозначает?

    2. Как устроен HTML-документ?

    3. В чем отличие обычного текста от HTML-документа?

    4. Для чего используется тег?

    5. Назовите обязательные теги.

    6. Чем отличается тег
      от тега ?

    7. С помощью каких средств можно изменить стиль, цвет, размер выводимого текста на HTML-странице?

    8. Как можно просмотреть структуру HTML-документа?

    На этом уроке мы с вами сделали только первые шаги. Самое интересное ещё впереди: это работа с графикой, фотографиями, создание собственных страниц. Всё это на следующих уроках. До свидания!

    VI Домашнее задание

    На следующем уроке будем создавать Web – страницы с графикой на тему рассказ о себе и своих увлечениях. Принести текстовый материал и фото.



    Литература:

      1. Давыдова Е.В. Элективный курс «Компьютерное творчество. Начала web-дизайна». //Информатика и образование . 2006. №11.

      2. Моисеева Н.Н. Элективный курс «Начала веб-дизайна». // Информатика и образование. 2007. №10.

      3. Новосёлова Е.Н., Кадыров И.Р. Создание web-страниц с помощью HTML.//Информатика и образование . 2004. №11, №12.

      4. Титоров Д.Ю. //Информатика в школе. Приложение к журналу «Информатика и образование». 2007 №7.


    5


    Основы html

    Просмотр содержимого презентации
    «презентация»

    Создание web-страниц с помощью HTML   Основы языка HTML

    Создание web-страниц с помощью HTML Основы языка HTML

    Технология создания Web – страницы:  1.Набрать текст программы (в Блокноте) 2. Сохранить программу с расширением *.htm или html.

    Технология создания Web – страницы:

    1.Набрать текст программы (в Блокноте)

    2. Сохранить программу с расширением *.htm или html.

    Технология создания Web – страницы:  3 . Запустить броузер Internet Explorer и из него открыть html-файл 4. Для просмотра и редактирования html-кода выполнить ВИД – в виде НТМL 5. После внесения изменений выполнить Обновить (F5)

    Технология создания Web – страницы:

    3 . Запустить броузер Internet Explorer и из него открыть html-файл

    4. Для просмотра и редактирования html-кода выполнить ВИД – в виде НТМL

    5. После внесения изменений выполнить Обновить (F5)

    Замечания:

    Замечания:

    • имена файлов д.иметь только латинские имена с расширением htm или html все файлы, относящиеся к одному проекту: html-файлы, графика и т.д. должны располагаться в одном каталоге
    • имена файлов д.иметь только латинские имена с расширением htm или html
    • все файлы, относящиеся к одному проекту: html-файлы, графика и т.д. должны располагаться в одном каталоге
    История создания HTML  (Hyper Text Markup Language — язык разметки гипертекста) - В 1945 году американский ученый, научный консультант президента Ванневар Буш (Vannevar Bush) высказывает идею …… гипертекста.

    История создания HTML (Hyper Text Markup Language — язык разметки гипертекста)

    - В 1945 году американский ученый, научный консультант президента Ванневар Буш (Vannevar Bush) высказывает идею ……

    гипертекста.

    - В 1968 году Дуглас Энджельбарт (создатель программного диалогового интерфейса, который реагировал на действия специального указателя - курсора, а так же создатель манипулятора - мыши) демонстрирует … работу гипертекстовых связей в созданном им текстовом процессоре.

    - В 1968 году Дуглас Энджельбарт (создатель программного диалогового интерфейса, который реагировал на действия специального указателя - курсора, а так же создатель манипулятора - мыши) демонстрирует …

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

    в 1960-е годы, когда сотрудники компании IBM взялись за решение задач переноса документов между различными платформами и операционными системами. Результатом их усилий стал … язык GML (General Markup Language - общий язык разметки), который предназначался для использования на ЭВМ семейства IBM .

    в 1960-е годы, когда сотрудники компании IBM взялись за решение задач переноса документов между различными платформами и операционными системами. Результатом их усилий стал …

    язык GML (General Markup Language - общий язык разметки), который предназначался для использования на ЭВМ семейства IBM .

    В основу разрабатываемого языка Тим Бернерс-Ли положил… язык SGML и приёмы работы с гипертекстом, с чем и связано название созданного им языка - HTML

    В основу разрабатываемого языка Тим Бернерс-Ли положил…

    язык SGML и приёмы работы с гипертекстом, с чем и связано название созданного им языка - HTML

    Термин

    Термин "гипертекст" впервые был введён ……..

    Понятие "гипертекст" обозначает ...

    который содержит в себе ссылки на другие документы.

    Тедом Нельсоном в 1960-х годах

    электронный документ,

    Разработка HTML привела в итоге к новой технологии распространения гипертекстовых документов в Internet. Однако для широкого распространения WWW, кроме языка HTML, потребовалась разработка …     который позволил осуществлять обмен документами HTML. протокола передачи гипертекста HTTP (HyperText Transfer Protocol - протокол передачи гипертекста),

    Разработка HTML привела в итоге к новой технологии распространения гипертекстовых документов в Internet. Однако для широкого распространения WWW, кроме языка HTML, потребовалась разработка … который позволил осуществлять обмен документами HTML.

    протокола передачи гипертекста HTTP (HyperText Transfer Protocol - протокол передачи гипертекста),

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

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

    ТЕГ – инструкция браузеру, указывающая способ отображения информации.

    ТЕГ – инструкция браузеру, указывающая способ отображения информации.

    Задание  Даны теги, определить парные и одиночные теги.  , , ,

    Задание

    Даны теги, определить парные и одиночные теги. ,
    , ,

    Структура HTML – документа

    Структура HTML – документа

    Особенности: 1. текст, который мы хотим видеть в окне браузера, помещается между тегами. 2. все теги заключены в скобки.

    Особенности:

    1. текст, который мы хотим видеть в окне браузера, помещается между тегами.

    2. все теги заключены в скобки.

    пример

    пример

    3. в парных тегах закрывающий тег начинается с символа / «слеш». Парные теги выделяют текстовый блок и придают ему на странице некоторый статус ; например, с помощью тегов ... текстовый блок выделяется как заголовок .

    3. в парных тегах закрывающий тег начинается с символа / «слеш». Парные теги выделяют текстовый блок и придают ему на странице некоторый статус ;

    например, с помощью тегов ... текстовый блок выделяется как заголовок .

    4 . Большинство тегов имеют ряд свойств, называемых параметрами ;  например,  заголовок, помеченный тегами  ..., располагается в центре окна браузера .

    4 . Большинство тегов имеют ряд свойств, называемых параметрами ;

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

    5. Каждый параметр представлен в следующем виде: имя_параметра=«значение_параметра »,   например width=

    5. Каждый параметр представлен в следующем виде: имя_параметра=«значение_параметра », например width="80”.

    Все параметры располагаются в открывающем теге. Если параметров несколько, они отделяются пробелами. Порядок их следования не имеет значения.

    6. Информация, располагаемая между тегами  ... , не отображается в окне браузера, там находятся тег заголовка страницы  и другая служебная информация .

    6. Информация, располагаемая между тегами ... , не отображается в окне браузера, там находятся тег заголовка страницы и другая служебная информация .

    7. Вся информация, видимая в окне браузера, помещается между тегами ... .

    7. Вся информация, видимая в окне браузера, помещается между тегами ... .

    Заголовки: HTML поддерживает 6 уровней внутренних заголовков. … самый крупный  …  …  …  …  … самый мелкий

    Заголовки:

    HTML поддерживает 6 уровней внутренних заголовков.

    … самый крупный

    … самый мелкий

    Заголовки:

    Заголовки:

    • Атрибуты: align="значение" (определяет способ выравнивания заголовка по горизонтали).
    • Значения: center (по центру), right (по правому краю), left (по левому краю).
    • Например, Давайте знакомиться - Компьютер (заголовок первого уровня, выравнивание по центру).
    Форматирование текста 1) Выделение текста: … - выделение полужирным  … - выделение курсивом  … - выделение подчёркиванием   Например: Привет

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

    1) Выделение текста:

    - выделение полужирным - выделение курсивом - выделение подчёркиванием

    Например: Привет

    2) Стиль шрифта (гарнитура, размер, цвет):

    2) Стиль шрифта (гарнитура, размер, цвет):

    • Тег должен иметь хотя бы один из трёх возможных атрибутов:
    • Размер шрифта size ="значение" (значения целые числа от 1 до 7)
    • Цвет шрифта color ="значение"
    • Гарнитура (вид шрифта) FACE ="значение", например
    например  привет  привет     привет   ( слово привет имеет размер 7,  красного цвета, вид шрифта Arial).

    например

    привет

    привет

    привет

    ( слово привет имеет размер 7, красного цвета, вид шрифта Arial).

    3. Тег абзаца: …   Атрибут: align=

    3. Тег абзаца:

    Атрибут:

    align="значение"

    left (по левому краю), right (по правому краю),

    center (по центру), justify (по ширине).

    Перевод строки:

    Фоновое изображение — это графический файл с изображением небольшой прямоугольной плашки

    Фоновое изображение — это графический файл с изображением небольшой прямоугольной плашки

    заменить ? строкой задающий цвет Использовать графический фон – Body Background = “?” заменить ? строкой, задающей имя фонового файла" width="640"

          Существует два способа фонового оформления Web-страницы:

    Использовать цвет, из таблицы основных цветов – Body BGcolor = “?” заменить ? строкой задающий цвет

    Использовать графический фон Body Background = “?” заменить ? строкой, задающей имя фонового файла

    Графика, используемая в качестве фоновой, задается в теге  в начале файла HTML. Например:

    Графика, используемая в качестве фоновой, задается в теге в начале файла HTML.

    Например:

    Дополни фразу язык . . . . HTML расширение файла . . . *.html  первый тег программы . . HTML

    Дополни фразу

    язык . . . .

    HTML

    расширение файла . . .

    *.html

    первый тег программы . .

    HTML

    Дополни фразу переход от одной страницы к другой  Гиперссылка  . . . Web – сайт состоит из ... Web – страниц  Текст программы пишем в программе . . Блокнот

    Дополни фразу

    переход от одной страницы к другой

    Гиперссылка . . .

    Web – сайт состоит из ...

    Web – страниц

    Текст программы пишем в программе . .

    Блокнот


    Получите в подарок сайт учителя

    Предмет: Информатика

    Категория: Уроки

    Целевая аудитория: 11 класс

    Скачать
    Урок по информатике «Создание web-страниц с помощью HTML. Основы языка HTML»

    Автор: Тараненко Надежда Фёдоровна

    Дата: 05.02.2017

    Номер свидетельства: 387969



    ПОЛУЧИТЕ СВИДЕТЕЛЬСТВО МГНОВЕННО

    Добавить свою работу

    * Свидетельство о публикации выдается БЕСПЛАТНО, СРАЗУ же после добавления Вами Вашей работы на сайт

    Удобный поиск материалов для учителей

    Ваш личный кабинет
    Проверка свидетельства