Урок «Основы языка HTML»

Конспект урока

Дата:

Урок: 10кл.

Тема урока: Основы языкаHTML

Тип урока: Комбинированный.

Цели урока:

Знакомство с историей создания языка HTML;

Изучение логической структуры Web-документа;

Ознакомление с основными структурными тегами;

Задачи:

Научитьучащихся составлять простейший Web-документ и просматривать его в браузере;

Показать простейшие приемы цветового оформленияWeb-документа;

Технические средства, дидактический материал:

ПК, ЦОРы, компьютеры,мультимедийный проектор, учебная презентация «Основы языка HTML», технологические карты для практической работы по количеству учащихся;

Этапы урока:

1.Организационный момент (1)

2. Сообщение темы. Мотивация учебной деятельности учащихся. (2)

3. Проверка домашнего задания (3)

4.Всесторонняя проверка знаний (5)

5. Подготовка уч-ся к активному и сознательному усвоению нового материала (5)

6. Усвоение новых знаний (18)

7. Закрепление новых знаний (12)

8. Домашнее задание (2)

Ход урока:

Оргмомент

Здравствуйте! (отмечаем отсутствующих).

Сообщение темы.

Основы языка HTML

3. Проверка домашнего задания

Устно.

4.Всесторонняя проверка знаний.

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

5. Подготовка уч-ся к активному и сознательному усвоению нового материала.

Историческая справка

В 1986 году Международная организация по стандартизации (ISO) приняла стандарт обобщенного метаязыкаStandardGeneralizedMarkupLanguage (SGML), позволяющего строить системы логической структурной разметки любых разновидностей текста. Управляющие коды, вносимые в текст при такой разметке, лишь задавали его логическую структуру, т.е. создавали ссылки от документа к документу и не несли никакой информации о внешнем виде документа.

6.Усвоение новых знаний

В1989 году сотрудник Европейского центра ядерных исследований в Женеве (CERN) Тим Бернес-Ли начал работу по созданию информационной системы, которая должна была объединить все информационные ресурсы центра: базы данных научных отчетов; результаты экспериментов; компьютерные программы обработки данных; списки почтовых адресов и т.д. Предложенная Бернесом гипертекстовая технология, позволяла легко переходить от одного документа к другому.

В основе технологииWWW лежат три составные части:

Язык гипертекстовой разметки - разработчики WWW выбрали систему SGML в качестве основы языка гипертекстовых документов. Этот язык был назван HyperText MarkupLanguage (HTML);

Универсальный способ адресации ресурсов в сети URL – UniformResourceLocator;

Протокол обмена гипертекстовой информацией HTTP - HyperTextTransferProtocol;

«Первый сайт»

В декабре 1991 года американский физик Пол Кунз из Стенфордского университета создал первый сайт на основе WWW-технологии. В январе 1992 года Тим Бернес-Ли на конференции во Франции, где присутствовало более 200 физиков из разных стран рассказал о системе WWW, затем продемонстрировал как с ее помощью можно связаться с заокеанским сайтом Кунза в США.

Информация в системе WWW организована в виде страниц. Каждый желающий может разместить информацию о себе на так называемой «домашней страничке» (от англ. homepage), поместив ее сервере своего провайдера или на серверах бесплатно предоставляющих место под такую страничку.

Несколько страниц, находящихся на одном сервере и объединенных по смыслу, образуют сайт (от англ. site – место, участок). В настоящее время большинство компаний, государственных и частных учреждений и предприятий, общественных организаций и просто частных пользователей имеют свои представительские сайты в Интернете.

«Первый графический браузер»

Для просмотра страниц в системе WWW имеются специальные программы, устанавливаемые на пользовательских компьютерах, так называемые браузеры (от англ. browse – рассматривать). Самые первые браузеры имели текстовый интерфейс, похожий на командную строку DOS. В начале 1993 г. в Национальном центре суперкомпьютерных программ (NCSA) Иллинойского университета группа программистов под руководством Марка Андриссена разработала первый браузер с графическим интерфейсом, работающий в различных операционных системах. Браузер был назван Mosaic. В 1994 г. разработчики Mosaic создали компанию NetscapeCommunication и вскоре выпустили первый коммерческий браузер NetscapeNavigator. В 1995 г. компания Microsoft выпустила первую версию браузераInternetExplorer, а уже в 1996 г. третья версия браузераInternetExplorer, стала понемногу теснить господствующий на рынке NetscapeNavigator.

Такова краткая история создания и развития системыWWW.

Основы языкаHTML»

Гипертекст создаваемый с помощью языка HTML представляет собой обычный текст, включающий в себя элементы, управляющие внешним видом этого текста (цветом, стилем, размером и т.д.). Эти элементы состоят из особых текстовых фраз, называемых тегами. Внешне теги выделены в тексте треугольными скобками. По своему значению теги близки скобкам «begin – end» (начало – конец) в языках программирования, которые задают области действия определенной группы команд.

«Структураweb-документа».

Весь гипертекстовый документ можно представить как один большой элемент с именем «HTML». По структуре он состоит из двух частей: заголовка документа и тела документа, где содержится отображаемый на экране текст.

Парные теги <html> </html> являются внешними для всех остальных. Без этих тегов браузер не может определить формат документа и правильно его отобразить.

Заголовок документа включает парные теги: <head> </head> и <title> </title>. Теги <head> </head> являются внешними по отношению к тегам<title> </title>. Между тегами <title> </title> обычно располагается название страницы, отображаемое в строке заголовка при просмотре документа в браузере.

Тело документа отображается с помощью парных тегов<body> </body> между, которыми помещается основное содержание web-страницы (тексты, таблицы, графические объекты, бегущие строки, баннеры и т.д.), включающее сведения о форматировании текста.

Итак, структураweb-документа:

<html>

Заголовок документа

<title> Работа с изображениями в HTML</title>

</head>

Тело документа

</body>

</html>

«Параметрытега <body>»

Тег <body> имеет несколько параметров:

Цвет фона документа bgcolor=#RRGGBB

Текстура фона background=file_name

Цвет текста text=# RRGGBB

Цвет текста ссылки link=# RRGGBB

Цвет текста активной ссылки alink=#RRGGBB

Цвет текста просмотренной ссылки vlink=#RRGGBB

«Таблица цветов»

Значение цвета указывается либо его буквенным обозначением, либо 6-ти разрядным шестнадцатеричным числовым кодомRRGGBB, где RR – интенсивность красного цвета, GG – интенсивность зеленого цвета, BB – интенсивность синего. Интенсивность может изменяться от значения 00 до FF.

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

Парный тег <h> служит для выделения заголовков (headings). Цифра после буквы показывает уровень заголовка (всего их может быть шесть). Вместе с заголовком можно задать и выравнивание текста, задав значение параметру align:

по центру – center;

по левому краю –left;

по правому краю – right.

«Редактирование»

Тег <font> указывает параметры шрифта. Для него могут задаваться следующие параметры:

Face – устанавливает тип шрифта для отображения текста;

Пример: <font Face=”Arial”, “Verdana” > текст </font>.

Size – устанавливает размер шрифта, относительно установленного в

браузере по умолчанию;

Пример: <font size=+n> текст </font> или <font size=-n> текст </font>, где n число пунктов (от 1 до 7), на которое увеличивается или уменьшается размер шрифта (1пункт= дюйма или 0,353 мм). Принято считать, что размер «нормального» шрифта соответствует значению 3.

Color – устанавливает цвет шрифта, задаваемый с помощью

стандартных имен или в формате RRGGBB (см. выше);

7.Закрепление новых знаний

Работа на компьютере

Учащиеся занимают рабочие места за компьютерами, получают таблицу цветов (Приложение 1), технологическую карту (Приложение 2) и приступают к выполнению практической работы.

8.Домашнее задание

Сегодня на уроке мы сформировали понятия: логическое высказывание, логические величины, логические операции.

Оценки за урок получили ученики….

Д/З: Выучить основные определения.

продумать тематику странички сайта – подготовить текст, подобрать иллюстрации;

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

Приложение 1.

Основные цвета

Адрес публикации: https://www.prodlenka.org/metodicheskie-razrabotki/379741-urok-osnovy-jazyka-html