Урок по информатике «Создание web-страниц с помощью HTML. Основы языка 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 по теме «Создание простейшей 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, и другая служебная информация.