Методический электронный образовательный центр Министерства образования Оренбургской области и Оренбургского государственного университета
Методический электронный образовательный центр Министерства образования Оренбургской области и Оренбургского государственного университета
Информатика и ИКТ 11 класс Семакин И.Г., Хеннер Е.К. Информатика и ИКТ. Базовый уровень. Учебник для 10-11 класса. М.: Бином. Лаборатория знаний. 2012 г. Уровень обучения: базовый Тема урока: Web-сайт. Практическая работа №7. «Интернет: создание Web-сайта на языке HTML» Общее количество часов, отведенное на изучение темы: 2 часа Место урока в системе уроков по теме: первый урок изучения языка разметки HTML в рамках изучения темы web-сайт, как информационная система Цель урока: Создать у обучающихся представление о создании сайтов средствами языка разметки гипертекста HTML Задачи урока: Обучающие: ввести понятие языка разметки гипертекста HTML; ввести понятие тэга, рассмотреть основные тэги языка разметки; сформировать представление о структуре web-страницы. Развивающие: развивать навыки применения изученного материала на практике; развивать творческие способности обучающихся; развивать умение работать в малых группах. Воспитательные: воспитывать интерес к предмету, учению; формировать представление обучающихся о профессиональной деятельности web-программистов; воспитывать доброжелательное отношение к чужому мнению. Планируемые результаты: Сформированность представлений о способах хранения и простейшей обработке данных, что такое гипертекст, гиперссылки, приёмы создания гиперссылок; умение создавать Web-сайт с помощью HTML Тип урока: Урок применения знаний, умений и навыков. План урока: 1. Организационный момент 2. Изложение нового материала 3. Закрепление нового материала 4. Домашнее задание 5. Рефлексия Ход урока: 1. Организационный момент Приветствие обучающихся Постановка целей и задач урока: (на доске представлена надпись: Что такое HTML?) Обучающимся предлагается ответить на данный вопрос. Не многие обучающиеся смогут ответить на него, поэтому им предлагается найти ответ на данный вопрос в дополнительной литературе, при отсутствии печатных изданий, обучающиеся пользуются Интернет-ресурсами. HTML – язык разметки гипертекста, стандартизированный язык разметки документов во Всемирной паутине Учитель подводит итог данной работе, что практически любую информацию можно найти в Интернете на тематических web-сайтах, но она не появляется там самостоятельно, ее необходимо там разместить. Учащиеся формируют задачи урока: изучить язык разметки, научиться создавать web-страницы и web-сайты средствами языка разметки гипертекста. 2. Изложение нового материала HTML (HyperText Markup Language) - язык разметки гипертекста. Документ на языке HTML представляет собой простой текст, в который вставлены тэги (markup tags). Тэги определяют структуру страницы, расположение текста на экране, места размещения рисунков и так далее. С помощью тэгов формируются связи с другими web-сайтами и ресурсами Интернет. Написать такой документ можно в простейшем текстовом редакторе, например, Блокнот. Просмотреть файл, написанный на языке HTML, можно в любом браузере (Мiсrosоft Intenet Explorer, Mozilla Firefox, Google Chrome и другие). Тэги – это определенные последовательности символов, заключенные между знаками < (меньше) и > (больше). Прописные и строчные буквы в написании тегов значения не имеют. Любой НТМL–документ, состоит из двух частей: заголовка и тела. Все, что заключено между тэгами <HTML> и </HTML>, является документом HTML. Между этими двумя тэгами располагается информация, размещаемая на странице и во вкладке браузера. Тэги бывают парные и непарные, открывающие и закрывающие. Отличительным признаком закрывающего тэга является символ /. Область действия парного тега начинается с того места, где стоит открывающий тэг, а кончается, где встречается закрывающий. Так, например, текст будет выводиться на экран полужирным шрифтом, если стоит между тэгами <В> и </В>. Например, для перехода на новую строку используется непарный тэг <br> (Line Break). Информация о документе, которая не выводится на экран, называется заголовком. Он заключается между тэгами <HEAD> и </HEAD>. В заголовке HTML–документа содержится название странички, которое появится в рамке окна программы просмотра. Название странички располагается между тэгами <ТITLE> и </ТITLE>. Например: <ТITLE> Моя страничка </ TIТLE> <HTML> <HEAD> <TIТLE> Моя страничка (заголовок) </TIТLE> </HEAD> <BODY> Привет! Это моя личная домашняя страничка! </BODY> </HTML> Между тэги <BODY> и </BODY> размещается информация (текст, картинки и прочее), которая будет размещаться в окне браузера. Тэги форматирования текста: Параграфы (абзацы). Разбиение текста на абзацы, как это делается в обычном текстовом редакторе, не характерно для web-страниц, в результате текст будет выглядеть как один абзац. В HTML перед началом каждого нового абзаца ставится тэг <р>, он является парным. Для тэга абзаца характерен атрибут выравнивания ALIGN: по центру (CENTER); по левому краю (LEFT); по правому краю (RIGHT); по ширине (JUSTIFY). Тэг <р align=”left”> обеспечит выравнивание текста абзаца по левому краю. Его используют для оформления коротких заголовков. Заголовки (Headings) Обозначаются прописной или строчной латинской буквой h. Цифра после буквы показывает уровень заголовка (всего их может быть шесть). Как и любой текст, заголовки можно выравнивать по левому или правому краю, по центру, по ширие. Например: <h1 align=center> Изучение иностранного языка </h1> <HTML> <HEAD> <TIТLЕ> Моя страничка </TITLЕ> </HEAD> <BODY> <H1 ALIGN = "Center"> Привет! Это моя личная домашняя страничка! </Н1> <H2> Мой город </Н2> <p> Я живу в Оренбурге </p> <H3 ALIGN = "Left"> Моя школа </Н3> <p ALIGN = "Left"> Я учусь в «Лицее № 3» </p> <H4 ALIGN = "Center"> Мои увлечения </Н4> <p ALIGN = "Center"> Мои увлечения – музыка, спорт </p> <H5 ALIGN = "Right"> Мои Друзья </Н5> <p ALIGN = "Right"> Мои друзья учатся со мной в классе </р> </BODY> </HTML> Текст (Шрифт) Как и в текстовом редакторе, текст можно отформатировать, задать размер, цвет, тип шрифта. Для форматирования шрифта текст заключается в тэги <FONT> и </FONT>. Атрибутами тэга фонт являются: FACE – тип шрифта. Например, FACE=”Times New Roman” SIZE – размер. Размер шрифта измеряется в диапазоне 1-7, где 7 – самый крупный шрифт Color – цвет. Цвет может быть задан одним из двух способов: 1. Указанием цвета на английском языке, например, red, blue, yellow, tomato. <FONT color=”tomato”> 2. Указанием 16-ричного кода цвета в формате RGB, например, <FONT color=”#FF0000”> Тэгом <FONT> можно выделять произвольные фрагменты текста: одно слово в абзаце, весь абзац целиком. Порядок тэгов <P> и <FONT> можно менять местами. Так, например, если необходимо применить одинаковое форматирование шрифта для нескольких абзацев, то рациональнее открыть тэг <FONT> перед первым абзацем, а закрыть после последнего. Фрагмент текста можно выделить полужирным шрифтом (Bold). Отдельные слова можно подчеркнуть (Underline). Часто для выделения используют курсивный шрифт (Italic). <B> жирный </B> <I> курсив </I> <U> подчеркнутый </U> <FONT SIZE = 5 COLOR = "#FF00FF" FACE = "Arial"> <B> <I> жирный курсивный текст </I> </B> </FONT> 3. Закрепление нового материала Обучающиеся выполняют задание 2 практической работы 3.7 Практикума. Обучающиеся самостоятельно выбирают тему проекта из предложенных в учебнике. Так как на изучение данной темы предполагается 2 часа, то обучающиеся выполняют неполный объем работы: создаются 4 несвязанных между собой гиперссылками web-страницы, на которых размещается текст и производится его форматирование. 4. Домашнее задание Подобрать материал и подготовить 4 web-страницы для зачетного проекта по теме web-сайт 5. Рефлексия Обучающимся предлагается ответить на вопросы: - Что нового было изучено на уроке? - Является ли данный материал для вас новым? - Возникли ли у вас затруднения при выполнении задания? - Является ли данная тема для вас полезной? - Как в дальнейшем вы можете применить полученные знания?
Автор(ы):
Скачать: Информатика 11кл - Конспект урока Практическая работа № 7 «Интернет: создание Web-сайта на языке HTML» [Ибрагимова М.Д.].docАвтор(ы):
Скачать: Информатика 11кл - Задание Практическая работа № 7 «Интернет: создание Web-сайта на языке HTML» [Гамурзакова Э.К.].docx
