Blog

Разработка модульной программы Пояснительная записка 30 1 Модульная программа по теме «Язык разметки гипертекста html» 31

Вид материала

Пояснительная записка

Содержание

Инструкционная карта учителя
Проверка выполнения домашнего задания
Изучение нового материала
Заголовки и подзаголовки
Изменение параметров шрифта: вид (гарнитура), размер символов, цвет
Управление начертанием текста
Первичная проверка усвоения знаний
Первичное закрепление знаний
В рабочих тетрадях должно быть написано

Подобный материал:

1 2 3 4 5 6 7 8 9

Инструкционная карта учителя

Этап урока (УЭ)	Деятельность учителя	Деятельность ученика
I	Организационный момент Здравствуйте! Кто отсутствует? (Перекличка по журналу.) Тема урока: форматирование текста Web-страницы. Мы должны познакомиться с тэгами позволяющими изменять начертание и расположение текста на Web-странице.	Приветствуют учителя. Записывают тему урока в тетрадь.
II	Проверка выполнения домашнего задания Подготовка учащихся к усвоению нового материала Каковы основные достоинства представления документов в форме Веб-страниц? Почему для создания и редактирования текста Веб-страницы нельзя пользоваться MicrosoftWord? Узнать понятия по предложенным схемам. Какие понятия вы еще можете назвать? Что они означают? Таким образом, мы с вами повторили материал необходимый нам для изучения материала сегодняшнего урока.	Учащиеся отвечают на вопросы учителя, используя свои знания и свой конспект. 1. Малый информационный объём; возможность просмотра в различных операционных системах; интерактивность. 2. Потому что Microsoft Word вставляет в текст свои управляющие символы. 3. Учащиеся определяют по схемам следующие понятия: Понятие 1 – Web-сайт Понятие 2 – Динамический объект Понятие 3 – Гипертекст Понятие 4 – Мультимедийный Web-сайт Понятие 5 – Браузер 4. Апплет, скрипт, HTML.
III	Изучение нового материала Объяснение учителя с использованием компьютерной презентации Умение привлекательно оформить свою Веб-страницу в современной жизни играет большую роль. Особенно если это связано с бизнесом. Да и на личном сайте подчеркнуть, выделить какую-то часть текста страницы тоже бывает очень важно. Сегодня вы узнаете о таких возможностях языка разметки. Реализуются эти возможности с помощью специальных тэгов. Форматирование текста Этот этап создания Веб-страницы можно разбить на несколько более мелких этапов: разбивка на абзацы и выравнивание абзацев; заголовки и подзаголовки; изменение параметров шрифта: вид (гарнитура), размер символов, цвет; управление начертанием текста. Разбивка на абзацы и выравнивание абзацев Обычные для текстовых редакторов символы (коды) конца абзаца браузером игнорируются, поэтому каждый абзац обрамляется (заключается в контейнер) парой тэгов: (в начале) и (в конце), тогда между абзацами автоматически оставляется небольшой межабзацный отступ. Если же вам требуется выполнить принудительный перенос текста на новую строку (что визуально воспринимается как начало нового абзаца, но без автоматического создания браузером межабзацного промежутка), то в требуемом месте текста необходимо вставить одиночный тэг . По умолчанию абзацы выравниваются по левому краю. Требуемое выравнивание любого абзаца можно задать с помощью параметра ALIGN, записав его в открывающем тэге контейнера абзаца: , где вместо многоточия записывается значение CENTER (центрировать), RIGHT (выровнять по правому краю) или LEFT (выровнять по левому краю; именно это значение подразумевается по умолчанию). Последние версии Internet Explorer поддерживают также значение JUSTIFY – выравнивание по формату (по левому и правому краям одновременно), но будьте готовы к тому, что в других браузерах и в старых версиях Internet Explorer такой текст окажется выровненным только по способу LEFT. При использовании данного параметра в конце абзаца нужно обязательно записать закрывающий тэг . Пример (на экране) Абзац заключение абзаца в контейнер; Абзац заключение абзаца в контейнер и выравнивание его по левому краю (без параметра ALIGN выполняется по умолчанию); Абзац заключение абзаца в контейнер и выравнивание его по центру; Абзац заключение абзаца в контейнер и выравнивание его по правому краю; Абзац заключение абзаца в контейнер и выравнивание его по ширине (данный параметр есть не на всех браузерах). принудительный перевод на новую строку (но не создание абзаца). Применяется при ручном форматировании (подгонке). Заголовки и подзаголовки Чтобы объявить выбранный абзац заголовком или подзаголовком (тем самым задав для него более крупный и жирный шрифт, чем для остального текста, как это обычно делается в книгах), достаточно заключить весь этот абзац в контейнер … (вместо … ), где вместо звёздочки записывается цифра (одна и та же и в открывающем, и в закрывающем тэге). При этом цифра 1 задаёт шрифт наибольшего размера (для общего заголовка), 2 – чуть меньший (для подзаголовков), 3 – ещё меньший и т.д. до цифры 6 (обычно же достаточно 1, 2 и 3). Выравнивание заголовков, если не указать его явно, делается по левому краю. Если же нужно отцентрировать заголовок или выровнять его по правому краю, надо воспользоваться уже рассмотренным параметром ALIGN, записанным в составе открывающего тэга , например, строка … задаёт размещаемый по центру общий заголовок. Пример (на экране) Заголовок заключение заголовка в контейнер для выравнивания его по левому краю, размер заголовка 1; Заголовок заключение заголовка в контейнер для выравнивания его по центру, размер заголовка 2; Заголовок заключение заголовка в контейнер для выравнивания его по правому краю и задания ему размера 3. Изменение параметров шрифта: вид (гарнитура), размер символов, цвет Управление отображением произвольного фрагмента текста (части абзаца или нескольких абзацев) производится при помощи контейнера … и рада его параметров. Для задания вида (названия, гарнитуры) шрифта, используемого при отображении текста на экране и его печати на принтере – параметр FACE=”[название шрифта]”, где в качестве значения указывается то название желаемого шрифта, которое обычно выводится для него в списке шрифтов, отображаемых в панели инструментов или в диалоговом окне форматирования шрифта в текстовых редакторах, например: …. Можно также записать через запятую несколько названий шрифтов на случай, если у пользователя не окажется какого-то из них (если отсутствуют все указанные шрифты, автоматически используется стандартный, назначенный для отображения текста Интернет-страниц в параметрах настройки браузера). Уменьшение или увеличение размера шрифта на несколько условных единиц определяется значением параметра SIZE: , где вместо многоточия записывается цифра, указывающая размер шрифта в неких «абсолютных» единицах (от 1 до 7, по умолчанию 3; заметим, что эти цифры никак не связаны с используемыми в текстовых редакторах величинами, определяющими размер («кегль») шрифта, которые обычно измеряются в «пунктах»). Значение параметра SIZE также может предваряться знаком «+» или «-», указывающим, что требуется увеличить или уменьшить величину шрифта на заданное количество условных единиц относительно текущего размера (например, …). Чтобы установить желаемый цвет текстового фрагмента, используется параметр COLOR=”[цвет]”, значение которого является словесное обозначение цвета (red, green, blue и пр.) либо цифровой код цвета. Однако прежде чем вести об этом разговор, необходимо сначала разобраться с тем каким образом в HTML вообще кодируются цветовые оттенки. Пример (на экране) ТЕКСТ простейшее использование – всё по умолчанию; ТЕКСТ установка гарнитуры для находящегося в контейнере текста; ТЕКСТ установка гарнитуры и размера символов для текста заключённого в контейнер; ТЕКСТ установка гарнитуры, размера и цвета для текста заключённого в контейнер. Управление начертанием текста Для отдельных слов или фрагментов текста произвольной длины (в том числе в несколько абзацев) можно задать желаемое начертание – полужирное, курсивное или полужирный курсив, используя контейнеры … и … соответственно. Аналогичным образом можно указать подчеркнутое и «зачеркнутое» отображение текста при помощи контейнеров … и …, однако они используются гораздо реже, а кроме того, использование подчеркивания в HTML-документе нежелательно, чтобы пользовать не путал такой текст с гиперссылками. Эти контейнеры могут быть как вложены в контейнер абзаца, так и, наоборот, содержать в себе один или несколько абзацев. Аналогичным образом используются контейнеры _… (для получения нижних индексов) и ^… (для верхних индексов). Заметим, что эти тэги могут комбинироваться друг с другом для получения «смешанных» начертаний, точно так же, как в текстовых редакторах типа WinWord для этой цели используется комбинация расположенных на панели инструментов «элементарных» кнопок Ж (жирный), К (курсив) и Ч (подчеркнутый шрифт). Следует обращать внимание на порядок записи открывающих и закрывающих тэгов – последовательность их записи в конце всей получаемой конструкции должна быть обратной по отношению к её началу. Пример (на экране) Текст контейнер для полужирного текста; Текст контейнер для курсива; Текст контейнер для подчёркнутого текста; ~~Текст~~ контейнер для зачёркнутого текста; _Текст контейнер для текста нижнего индекса; ^Текст контейнер для текста верхнего индекса. Пример 2 Каждый *охотник желает знать, где сидит* фазан. Каждый охотник желает знать, где сидит фазан.	Слушают учителя, записывают новые тэги, правила написания новых тэгов в тетрадь, задают вопросы, когда что-нибудь не понятно.
IV	Первичная проверка усвоения знаний 1. Какие тэги (контейнеры) должны присутствовать в HTML-документе обязательно? 2. Какая разница в использовании одиночного тэга и парного тэга … ? В каких случаях используется тэг ? 3. Для чего и в каких тегах используется атрибут ALIGN? 4. Как изменяется размер шрифта в заголовках и в обычном тексте? 5. Каким образом можно изменить цвет символов в тексте?	Учащиеся отвечают на вопросы учителя. Ответы на вопросы: 1. Документе обязательно должны присутствовать следующие тэги: , , и <BODY><br /><br /><br />2. Контейнер <P>…</P> организует абзац, а <BR> - это одиночный тэг, организующий перевод строки для более удобного расположения текста на экране в каких-то уникальных случаях, при этом между абзацами не образуется пустая строка.<br /><br /><br />3. Атрибут ALIGN используется в тэгах <H>, <P> и <FONT> для выравнивания текста и может иметь 4 значения:<br /> <br />- LEFT для выравнивания по левому краю (используется по умоляанию);<br /> <br />- RIGHT для выравнивания по правому краю;<br /> <br />- CENTER для выравнивания по центру;<br /> <br />- JUSTIFY для выравнивания по ширине.<br /><br /><br />4. В заголовках размер шрифта изменяется в самом тэге указанием номера размера (от 1 – самый крупный, до 7 – самый мелкий).<br /> <br /><H3>…</H3><br /> <br />А в тексте используется тэг <FONT> с атрибутом SIZE от 1до 6.<br /> <br /><FONT SIZE=2>…</FONT><br /><br /><br />5. Для изменения цвета символов используется тэг <FONT> с атрибутом COLOR.<br /> <br />…<br /><br /></td> </tr> <tr valign=top> <td width=49> <br /><b>V</b><br /> </td> <td width=422> <br /><u> Первичное закрепление знаний</u><br /><br /><br /><u>Задание</u><br /> <br />В рабочей тетради написать текст Веб-страницы со следующим содержанием:<br /> <br />В строке названия Веб-страницы должно быть написано: « Учебный текст».<br /> <br />В теле страницы должна быть написана программа, реализующая следующий вид текста в окне браузера:<br /><br /><br />Моя вторая Web<b>-</b>страница<br /><br /><br />Изменение размера символов в тексте произвести тэгами <FONT> с параметром SIZE для большого размера шрифта равным 7, а для маленького равным 3.<br /> <br />Выполнивший в тетради задание переходит к следующему этапу (работа на компьютере в редакторе Блокнот и в браузере Internet Explorer).<br /> </td> <td width=162> <br /><i> В рабочих тетрадях должно быть написано:</i><br /> <br /><b><HTML></b><br /> <br /><b><HEAD></b><br /> <br /><b><TITLE></b><br /> <br /><b>Учебный текст</b><br /> <br /><b> Моя первая Web-страница
VI	Самостоятельное выполнение задания и его контроль Задание 1. Открыть папку “Мои документы”, а в ней папку “9А класс”(9Б класс). 2. В текстовом редакторе Блокнот набрать текст Web-страницы, реализующей в окне браузера текст с помощью тэга как показано на рисунке 1. Использовать при этом параметр FACE и шрифты (гарнитуры): “Times New Roman Cyr”, “Arial Cyr”, “Courier New Cyr”. 3. Сохранить набранный текст в папке “9А класс” под именем “index2” с расширением htm или html. 4. Открыть сохранённый в папке “9А класс” файл index2.phpl с помощью Internet Explorer Рисунок 1. Справившимся с данным заданием предложить изменить цвет отображения каждого слова фразы первого задания, чтобы получилось, как показано на рисунке 2. Рисунок 2. Справившимся со вторым заданием предложить изменить начертание текста в полученной фразе как показано на рисунке 3. Рисунок 3.	На экране компьютера должна появиться картинка соответствующая рисунку 1. Если полученная картинка не соответствует рисунку 1, то необходимо проверить правильность написания текста файла index2.phpl и правильность задания имени и расширения этого файла
VII	Самооценка деятельности на уроке и запись домашнего задания «ОТЛИЧНО»: выполнил все задания без ошибок. «ХОРОШО»: выполнил два задания без ошибок. «УДОВЛЕТВОРИТЕЛЬНО»: выполнил одно задание без ошибок. Домашнее задание: Для всех: повторить понятия по теме «ОТЛИЧНО»: создать тестовые задания по теме урока и разместить их на своей Web-странице в тетради или в электронном виде, используя разные шрифты, цвет и размещение текста. «ХОРОШО» и «УДОВЛЕТВОРИТЕЛЬНО»: повторить алгоритмы управления текстом Web-страницы, прочитать §5.7.3.	Оценку записать в тетрадь. Ученики записывают задание в дневник (в тетрадь)
VIII	Подведение итогов занятия На этом уроке мы с вами продолжили изучать язык HTML. Мы рассмотрели теги позволяющие управлять начертанием текста Веб-страницы и создали учебную Веб-страницу с текстом, использующим изучаемые тэги. Результаты своих достижений вы видели на экранах дисплеев при просмотре созданной страницы с помощью браузера. Поясняю, какие ошибки делались во время выполнения практической работы. Отметить наиболее активных учеников, правильно отвечавших на вопросы и справившихся с практическим заданием, выставить оценки отличившимся ученикам в журнал и в дневник.	Ученики дают свои дневники для проставления оценок.