Технологическая карта занятия «Таблицы HTML».
методическая разработка по теме

Учебный курс: «Веб-дизайн и «сайтостроительство»;

Тема занятия: таблицы в HTML

 Тип занятия: комбинированный.

 Форма учебной работы: фронтальная, групповая, индивидуальная.

 Время реализации занятия: 40 минут

 Цели занятия: достижение обучающимися предметных, метапредметных и личностных образовательных результатов.

• Предметные результаты – формировать представление о вложенных таблицах, их использовании при оформлении Web -страниц; повторить изученные ранее элементы оформления Web-документа (определение структуры, форматирование текста, вставка рисунка и гиперссылки, создание таблиц) и развить умение применить их на практике.

• Личностные результаты – умение слушать и выделять главное, запоминать; устанавливать связь между целью деятельности и ее результатом; формирование духовно-нравственных ценностей, через содержательную часть практической работы; стремление использовать полученные знания в процессе обучения другим предметам и в жизни;

• Метапредметные результаты – регулятивные: соотносить правильность выполнения действия с требованиями конкретной задачи; коммуникативные: задавать вопросы; строить продуктивное взаимодействие со сверстниками; работа в группе; развитие ИКТ-компетентности; познавательные: поиск и выделение необходимой информации; структурирование знаний, умение узнавать, называть, сравнивать и характеризовать объекты окружающей действительности.

ТСО и дидактические средства: компьютерный класс, проектор, интерактивная доска, раздаточный материал (таблицы для записи баллов в «Круговом секторе», инструкции для практической работы, таблицы критериев для оценки практических работ), электронная презентация, локальная сеть, интернет ресурсы, подборка стихотворений и иллюстраций к ним на тему «День победы», макет Web-страницы, главная страница сборника стихотворений.

Скачать:

ВложениеРазмер
Package icon tehnologicheskaya_karta.zip2.91 МБ

Предварительный просмотр:

Российская Федерация

Ямало-Ненецкий автономный округ

Муниципальное образовательное учреждение

Дополнительного образования детей

ЦЕНТР «ЮВЕНТА»

Содержание заданий

к игре

 «Круговой сектор» 

(для курса «Веб-дизайн и «сайтостроительство»)

                                           Разработал:

педагог дополнительного образования

Кушей И.З.

г. Ноябрьск

2014 г.


 

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

Круг разделен на 5 секторов.

На каждом секторе определенная  категория вопросов стоимостью 100, 200, 300 баллов.

Правила игры:

Игрок выбирает категорию и стоимость вопроса.

Желающий ответить поднимает сигнальную карточку и дает ответ.

Отвечает тот, кто первым поднимет карточку.

В случае правильного ответа его счет увеличивается на стоимость вопроса.

(количество баллов отмечается в таблицах учета баллов)

Следующий вопрос выбирает отвечавший игрок.

Вопросы

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

1. Какими тегами задаётся элемент, содержащий головную часть программы? (100 баллов)

1. …

2. …

3. …

Ответ:1.

2. Какой элемент в головной части HTML-кода выводит информацию в заголовок окна браузера?  (200 баллов)

1.

2.

,

3.

Ответ: 3.

3. Среди приведенных тегов найдите тег заголовка, имеющего самый большой размер шрифта (300 баллов)

1.

2.

3.

4.

Ответ: 3.

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

1.Для того чтобы начать новую строку используется тег:(100 баллов)


  1. </span></li></ol><p class="c4"><span class="c9">Ответ:</span><span class="c2"> </span><span class="c22"><BR></span></p><p class="c0 c43"><span class="c15"></span></p><p class="c0"><span class="c41"></span></p><p class="c4"><span class="c18">2. Какая запись в языке HTML соответствует разделению текста двумя пустыми строками? </span><span class="c19">(200 баллов)</span></p><ol class="c37 lst-kix_list_6-0 start" start="1"><li class="c4 c33"><span class="c5">Текст1 <BR><BR><BR> Текст2</span></li><li class="c4 c33"><span class="c5"><P> Текст1 </P> <P> Текст2 </P></span></li><li class="c4 c33"><span class="c5">Текст1 <H2> Текст2 </H2></span></li><li class="c4 c33"><span class="c5">Текст1 Текст2</span></li></ol><p class="c4"><span class="c9">Ответ:</span><span class="c2"> </span><span class="c22">1.</span></p><p class="c0"><span class="c2"></span></p><p class="c4"><span class="c18">4. Какие из приведенных фрагментов HTML-кода соответствуют представленному выравниванию текста в браузере?  </span><span class="c19">(300 баллов)</span></p><p class="c0"><span class="c2"></span></p><p class="c4"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 350.00px; height: 178.00px;"><img alt="" class="lazyload" data-src="/sites/default/files/docpreview_image/2016/11/19/tehnologicheskaya_karta.zip.doc_image3.jpg" style="width: 350.00px; height: 178.00px; margin-left: -0.00px; margin-top: -0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c0"><span class="c9"></span></p><p class="c0"><span class="c9"></span></p><p class="c0"><span class="c9"></span></p><p class="c0"><span class="c9"></span></p><p class="c0"><span class="c9"></span></p><p class="c0"><span class="c9"></span></p><p class="c0"><span class="c9"></span></p><p class="c0"><span class="c9"></span></p><p class="c0"><span class="c9"></span></p><p class="c4 c7"><span class="c2">1. <P align=right>  Параграф№1. </P></span></p><p class="c4 c7"><span class="c2">    <P align=right>  Параграф№2.</span></p><p class="c0"><span class="c2"></span></p><p class="c4 c7"><span class="c2">2. <P>  Параграф№1. </P></span></p><p class="c4 c7"><span class="c2">    <P>  Параграф№2. </P></span></p><p class="c0"><span class="c2"></span></p><p class="c4 c7"><span class="c2">3. < P align =Left></span></p><p class="c4 c7"><span class="c2">    <P>  Параграф№1. </P></span></p><p class="c4 c7"><span class="c2">    <P>  Параграф№2. </P></span></p><p class="c4"><span class="c9">Ответ:</span><span class="c2"> </span><span class="c22">1</span></p><p class="c0"><span class="c16"></span></p><p class="c4"><span class="c31">Таблицы</span></p><p class="c0"><span class="c15"></span></p><p class="c4"><span class="c18">1. С помощью каких тегов в HTML описывается таблица?</span><span class="c19"> (100 баллов)</span></p><p class="c4 c14"><span class="c2">1.</span><span class="c18"> </span><span class="c5"><TT></span></p><p class="c4 c14"><span class="c5">2. <TR></span></p><p class="c4 c14"><span class="c5">3. <TABLE></span></p><p class="c4 c14"><span class="c5">4. <TD></span></p><p class="c0 c14"><span class="c40"></span></p><p class="c4"><span class="c9">Ответ:</span><span class="c2"> </span><span class="c22"><TR>,  <TABLE>, <TD></span></p><p class="c0"><span class="c16"></span></p><p class="c4"><span class="c18">3. Какая из записей соответствует описанию ширины рамки по периметру таблицы в 10 пикселей? </span><span class="c19">(200 баллов)</span></p><p class="c0"><span class="c2"></span></p><ol class="c37 lst-kix_list_14-0 start" start="1"><li class="c4 c6"><span class="c5">border=10</span></li><li class="c4 c6"><span class="c5">border="10п"</span></li><li class="c4 c6"><span class="c5">width=10</span></li><li class="c4 c6"><span class="c5">height=10%</span></li></ol><p class="c0 c14"><span class="c5"></span></p><p class="c4"><span class="c9">Ответ: </span><span class="c22">1. </span></p><p class="c0"><span class="c16"></span></p><p class="c4"><span class="c18">4. Какой фрагмент HTML-кода использован для создания сложной таблицы, приведенной на рисунке? </span><span class="c19">(300 баллов)</span></p><p class="c4 c14"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 300.00px; height: 84.00px;"><img alt="" class="lazyload" data-src="/sites/default/files/docpreview_image/2016/11/19/tehnologicheskaya_karta.zip.doc_image2.jpg" style="width: 348.99px; height: 174.99px; margin-left: -11.99px; margin-top: -59.99px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c0 c14"><span class="c2"></span></p><p class="c0 c14"><span class="c2"></span></p><p class="c0 c14"><span class="c2"></span></p><p class="c0 c14"><span class="c2"></span></p><p class="c4 c14"><span class="c18">1. </span><span class="c5"><TABLE border=3></span></p><p class="c4 c14"><span class="c5">         <TR></span></p><p class="c4 c14"><span class="c5">                 <TD>Объединенная ячейка</TD></span></p><p class="c4 c14"><span class="c5">                <TD>Ячейка1</TD></span></p><p class="c4 c14"><span class="c5">                <TD>Ячейка2</TD></TR></span></p><p class="c4 c14"><span class="c5">       <TR></span></p><p class="c4 c14"><span class="c5">                <TD>Ячейка3</TD></span></p><p class="c4 c14"><span class="c5">                <TD>Ячейка4</TD></TR></span></p><p class="c4 c14"><span class="c5"></TABLE></span></p><p class="c4 c14"><span class="c18">2.  </span><span class="c5"><TABLE border=3></span></p><p class="c4 c14"><span class="c5">       <TR></span></p><p class="c4 c14"><span class="c5">             <TD rowspan=2>Объединенная ячейка</TD></span></p><p class="c4 c14"><span class="c5">             <TD>Ячейка1</TD></span></p><p class="c4 c14"><span class="c5">             <TD>Ячейка2</TD></TR></span></p><p class="c4 c14"><span class="c5">      <TR></span></p><p class="c4 c14"><span class="c5">          <TD>Ячейка3</TD></span></p><p class="c4 c14"><span class="c5">          <TD>Ячейка4</TD></TR></span></p><p class="c4 c14"><span class="c5"></TABLE></span></p><p class="c4"><span class="c9">Ответ:</span><span class="c2"> </span><span class="c22">2. </span></p><p class="c0"><span class="c15"></span></p><p class="c4"><span class="c31">Гиперссылки.  </span></p><p class="c0"><span class="c10"></span></p><p class="c4"><span class="c18">1. Гиперссылка, это обязательно </span><span class="c19">(100 баллов)</span></p><p class="c0"><span class="c2"></span></p><p class="c4"><span class="c2">1.  Адрес сайта, записанный на гипертекстовой               странице</span></p><p class="c4"><span class="c2">2.  Ссылка, переход по которой автоматизирован</span></p><p class="c4"><span class="c2">3.  Ссылка на книгу</span></p><p class="c0 c14"><span class="c2"></span></p><p class="c4"><span class="c9">Ответ:</span><span class="c2"> </span><span class="c22">2. </span></p><p class="c0"><span class="c2"></span></p><p class="c4"><span class="c18">2.Гиперссылки могут выделяться </span><span class="c19">(200 баллов)</span></p><p class="c0"><span class="c2"></span></p><p class="c4"><span class="c18">1. Подчёркиванием</span></p><p class="c4"><span class="c18">2. Цветом и подчёркиванием</span></p><p class="c4"><span class="c18">3. Цветом</span></p><p class="c0"><span class="c9"></span></p><p class="c4"><span class="c9">Ответ:</span><span class="c2"> </span><span class="c21">1,2,3..</span><span class="c22"> </span></p><p class="c0"><span class="c2"></span></p><p class="c4"><span class="c18">3.Какой код  обеспечивает переход на   начало документа  01.htm, который находится в том, же каталоге, что и файл с гиперссылкой </span><span class="c19">(300 баллов)</span></p><p class="c0"><span class="c2"></span></p><p class="c4"><span class="c18">1.  <A href="01.htm">переход</A> </span></p><p class="c4"><span class="c18">2.  <A href="01.htm#p">переход</A> </span></p><p class="c4"><span class="c18">3.  <A href="#def">переход</A> </span></p><p class="c0"><span class="c9"></span></p><p class="c4"><span class="c9">Ответ:</span><span class="c2"> </span><span class="c21">1.</span><span class="c22"> </span></p><p class="c0"><span class="c2"></span></p><p class="c4"><span class="c31">Вставка рисунка. </span></p><p class="c0"><span class="c2"></span></p><p class="c4"><span class="c18">1.Какой из приведенных атрибутов тега <IMG ... > является обязательным при вставке изображения в HTML-документ? </span><span class="c19">(100 баллов)</span></p><p class="c4"><span class="c18"> </span><span class="c2"> 1</span><span class="c18">. </span><span class="c5">alt</span></p><p class="c4 c14"><span class="c5">2. border</span></p><p class="c4 c14"><span class="c5">3. widht</span></p><p class="c4 c14"><span class="c5">4. src</span></p><p class="c0"><span class="c9"></span></p><p class="c4"><span class="c9">Ответ:</span><span class="c2"> </span><span class="c22">4. </span></p><p class="c0"><span class="c2"></span></p><p class="c4"><span class="c18">2. Размеры изображений на странице задаются  атрибутами:</span><span class="c19"> (200 баллов)</span></p><p class="c4"><span class="c18">1.</span><span class="c2">  Size</span></p><p class="c4"><span class="c18">2.</span><span class="c2">  vspace, hspace</span></p><p class="c4"><span class="c18">3</span><span class="c2">.  height, width</span></p><p class="c4"><span class="c18">4.</span><span class="c2">   align</span></p><p class="c0"><span class="c2"></span></p><p class="c4"><span class="c12">Ответ:</span><span class="c18"> </span><span class="c21">3.</span></p><p class="c0"><span class="c2"></span></p><p class="c4"><span class="c18">4.  Расшифруйте код </span><span class="c19">(300 баллов)</span></p><p class="c0"><span class="c2"></span></p><p class="c30"><span class="c38"><IMG</span><span class="c17"> src="./pic/wowa.gif" </span></p><p class="c30"><span class="c17">     width=182 height=144</span></p><p class="c30"><span class="c17">     alt="Вова Бякин"</span></p><p class="c30"><span class="c17">     title="Мысли о сложностях сайтостроения"</span><span class="c38">></span><span class="c17"> </span></p><p class="c4"><span class="c2">      </span></p><p class="c4"><span class="c9">Ответ:</span><span class="c2"> вставка картинки </span><span class="c17">pic/wowa.gif из подкаталога основного каталога  размером 184Х144, при отсутствии картинки появляется надпись "Вова Бякин", при наведении указателя мышки  - Мысли о сложностях сайтостроения.</span></p><p class="c0"><span class="c2"></span></p><p class="c0"><span class="c2"></span></p><p class="c0"><span class="c2"></span></p><hr style="page-break-before:always;display:none;"><p class="c8"><span class="c10"></span></p><p class="c4"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 709.00px; height: 265.00px;"><img alt="" class="lazyload" data-src="/sites/default/files/docpreview_image/2016/11/19/tehnologicheskaya_karta.zip.doc_image4.jpg" style="width: 709.00px; height: 265.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c0"><span class="c2"></span></p><p class="c8"><span class="c10"></span></p><p class="c0"><span class="c2"></span></p><p class="c0"><span class="c2"></span></p><p class="c0"><span class="c2"></span></p><p class="c0"><span class="c2"></span></p><p class="c4"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 709.00px; height: 265.00px;"><img alt="" class="lazyload" data-src="/sites/default/files/docpreview_image/2016/11/19/tehnologicheskaya_karta.zip.doc_image4.jpg" style="width: 709.00px; height: 265.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 709.00px; height: 265.00px;"><img alt="" class="lazyload" data-src="/sites/default/files/docpreview_image/2016/11/19/tehnologicheskaya_karta.zip.doc_image4.jpg" style="width: 709.00px; height: 265.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p></div></div></div></div></div><br><div class="block marina-gradient-rounded-corners marina-title-rounded-green"><div class="inner clearfix"><div class="inner-wrapper"><div class="inner-inner"><h2 class="title block-title">По теме: методические разработки, презентации и конспекты</h2><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2014/02/25/picture-387501-1393355056.jpg"><h6><a href="/shkola/algebra/library/2014/02/26/tekhnologicheskaya-karta-zanyatiya-po-teme-polnoe-issledovanie">ТЕХНОЛОГИЧЕСКАЯ КАРТА ЗАНЯТИЯ по теме: Полное исследование функции и построение графика (практическое занятие) </a></h6><p class="search-excerpt">Технологическая карта занития  по дисциплине "Математика" на 2 курсе учреждений СПО...</p></div><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2019/01/04/picture-433590-1546581939.jpg"><h6><a href="/shkola/korrektsionnaya-pedagogika/library/2014/04/09/logopedicheskoe-zanyatie-differentsiatsiya-bukv">Логопедическое занятие «Дифференциация букв п - т в словах и предложениях», 2 класс, технологическая карта занятия </a></h6><p class="search-excerpt">Логопедическое занятие «Дифференциация букв п - т в словах и предложениях» и технологическая карта занятия. p { margin-bottom: 0.21cm; }a:link { color: rgb(0, 0, 255); text-decoration: underl...</p></div><div class="others"><h6><a href="/shkola/raznoe/library/2015/12/20/tehnologicheskaya-karta-zanyatiya-vneurochnaya-deyatelnost-modul">Технологическая карта занятия внеурочной деятельности (Модуль "Мыльные истории") 5 класс. Тема занятия «В нашей школе Юбилей – у нас множество идей» (Изготовление упаковки для Юбилейного Школьного Мыла)</a></h6><p class="search-excerpt">Данная разработка является авторской. Используется на занятиях внеурочной деятельности (Модуль в 5 класс "Мыльные истории)...</p></div><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2016/01/28/picture-744764-1453957724.jpg"><h6><a href="/shkola/informatika-i-ikt/library/2016/01/28/tehnologicheskaya-karta-uroka-redaktory-html-faylov">Технологическая карта урока "Редакторы HTML-файлов. Люди моего города"</a></h6><p class="search-excerpt">Цели урока::  познакомить обучающихся со способами редактирования и форматирования HTML-документа;:  совершенствование знаний о структуре HTML-документа.Педагогические задачи:Обучающая:: ...</p></div><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2019/10/09/picture-777115-1570614184.jpg"><h6><a href="/shkola/raznoe/library/2019/04/07/tehnologicheskaya-karta-zanyatiya-vneurochnoy-deyatelnosti">Технологическая карта занятия внеурочной деятельности «Ориентирование и топографическая карта»</a></h6><p class="search-excerpt">Технологическая карта внеурочного занятия будет полезна учителям каоторые  ведут  занятия по внеурочной деятельности "Туризм и краеведение" Я  пыталась систематичировать и обо...</p></div><div class="others"><h6><a href="/shkola/dopolnitelnoe-obrazovanie/library/2021/02/04/tehnologicheskaya-karta-zanyatiya-chelovek-i">Технологическая карта занятия "Человек и Природа"(Игра-занятие "Экологическая ромашка")</a></h6><p class="search-excerpt">В настоящее время главной ценностью экологического образования становится развитие личности через приобщение к экологической культуре.Этому способствуют занятия в кружке "Мир вокруг нас"с об...</p></div><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2018/03/04/picture-976641-1520118297.jpg"><h6><a href="/shkola/matematika/library/2023/11/16/tehnologicheskaya-karta-uroka-tablitsa-umnozheniya-i-deleniya-s">Технологическая карта урока Таблица умножения и деления с числом 6</a></h6><p class="search-excerpt">Предмет:МатематикаКласс:3 классТема:«Таблица умножения и деления с числом 6»(формирования функциональной грамотности учащихся)Программа:УМК «Школа России», автор учебника &laqu...</p></div></div></div></div></div><br><div id="poisk-materialov" data-1="1792"></div> <ul class="links inline"><li class="flag-like first last"><span><span class='like-tooltip flag-like'><a href='#'>Мне нравится</a><span class='flag-throbber'> </span></span></span></li> </ul> <div class="share_buttons clearfix">Поделиться:<div class="ya-share2" data-services="vkontakte,odnoklassniki,telegram,moimir" data-url="https://nsportal.ru/shkola/informatika-i-ikt/library/2016/11/19/tehnologicheskaya-karta-zanyatiya-po-teme-tablitsy-html" data-title="технологическая карта занятия «таблицы html»." ></div></div>  <div class="add-new-comment-button my-button-large"></div> </div> </div> </div> </div> </div> </div> </div><!-- /content-inner --> </div><!-- /content --> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div id="user_relationships_popup_form" class="user_relationships_ui_popup_form"></div><script src="/sites/default/files/advagg_js/js__S3bm1c7u9YzJnRE6QrV-HsLzADKLeupchfbrYg22kRU__S91yqV9ubUDMxzCK2GLBYdp1SFL3v48MFVTVZ3OSXjc__xK8RrS6Elbeb-uFsk6sQnqBT0LQWi9ruFM_5ORYTRxs.js" defer="defer"></script> <script src="/sites/default/files/advagg_js/js__hxOxF7aEdhvlSyCfiIODtjKmufwiFkLnYBgfAc3JU2U__Zvl8DJBWOfPQpMnqpLsqpzRLZD7C0PqUDMlY8RRkYVw__xK8RrS6Elbeb-uFsk6sQnqBT0LQWi9ruFM_5ORYTRxs.js" defer="defer"></script> <script src="/sites/default/files/advagg_js/js__c1zZbhXAByh0V-pY3W2l6b4e6e6URcR4okOH_epIox4__oVrjkf1Udl7K9Xgwtl5J3lSmv-cR7ynKeNmPgrmULSU__xK8RrS6Elbeb-uFsk6sQnqBT0LQWi9ruFM_5ORYTRxs.js" defer="defer"></script> <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script> </body> </html> <!-- Page cached by Boost @ 2024-10-17 04:10:03, expires @ 2025-02-06 04:10:03, lifetime 3 месяца 3 недели --> <!-- cache/normal/nsportal.ru/shkola/informatika-i-ikt/library/2016/11/19/tehnologicheskaya-karta-zanyatiya-po-teme-tablitsy-html_ -->