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

Опубликовано 19.11.2016 - 10:22 - Кушей Ирина Зеноновна

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

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

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

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

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

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

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

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

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

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

Скачать:

Вложение	Размер
tehnologicheskaya_karta.zip	2.91 МБ

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

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

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

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

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

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

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

к игре

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

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

Разработал:

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

Кушей И.З.

г. Ноябрьск

2014 г.

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

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

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

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

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

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

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

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

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

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

Вопросы

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

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

1. …

2. …

3. …

Ответ:1.

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

1. …

…

3. …

Ответ: 3.

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

2.
3.

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

</li></ol>Ответ: 2. Какая запись в языке HTML соответствует разделению текста двумя пустыми строками? (200 баллов)<ol class="c37 lst-kix_list_6-0 start" start="1"><li class="c4 c33">Текст1 Текст2</li><li class="c4 c33"> Текст1 Текст2 </li><li class="c4 c33">Текст1 <H2> Текст2 </H2></li><li class="c4 c33">Текст1 Текст2</li></ol>Ответ: 1.4. Какие из приведенных фрагментов HTML-кода соответствуют представленному выравниванию текста в браузере? (300 баллов)<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="">1. Параграф№1. Параграф№2.2. Параграф№1. Параграф№2. 3. Параграф№1. Параграф№2. Ответ: 1Таблицы1. С помощью каких тегов в HTML описывается таблица? (100 баллов)1. <TT>2. <TR>3. <TABLE>4. <TD>Ответ: <TR>, <TABLE>, <TD>3. Какая из записей соответствует описанию ширины рамки по периметру таблицы в 10 пикселей? (200 баллов)<ol class="c37 lst-kix_list_14-0 start" start="1"><li class="c4 c6">border=10</li><li class="c4 c6">border="10п"</li><li class="c4 c6">width=10</li><li class="c4 c6">height=10%</li></ol>Ответ: 1. 4. Какой фрагмент HTML-кода использован для создания сложной таблицы, приведенной на рисунке? (300 баллов)<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="">1. <TABLE border=3> <TR> <TD>Объединенная ячейка</TD> <TD>Ячейка1</TD> <TD>Ячейка2</TD></TR> <TR> <TD>Ячейка3</TD> <TD>Ячейка4</TD></TR></TABLE>2. <TABLE border=3> <TR> <TD rowspan=2>Объединенная ячейка</TD> <TD>Ячейка1</TD> <TD>Ячейка2</TD></TR> <TR> <TD>Ячейка3</TD> <TD>Ячейка4</TD></TR></TABLE>Ответ: 2. Гиперссылки. 1. Гиперссылка, это обязательно (100 баллов)1. Адрес сайта, записанный на гипертекстовой странице2. Ссылка, переход по которой автоматизирован3. Ссылка на книгуОтвет: 2. 2.Гиперссылки могут выделяться (200 баллов)1. Подчёркиванием2. Цветом и подчёркиванием3. ЦветомОтвет: 1,2,3.. 3.Какой код обеспечивает переход на начало документа 01.htm, который находится в том, же каталоге, что и файл с гиперссылкой (300 баллов)1. <A href="01.htm">переход</A> 2. <A href="01.htm#p">переход</A> 3. <A href="#def">переход</A> Ответ: 1. Вставка рисунка. 1.Какой из приведенных атрибутов тега <IMG ... > является обязательным при вставке изображения в HTML-документ? (100 баллов) 1. alt2. border3. widht4. srcОтвет: 4. 2. Размеры изображений на странице задаются атрибутами: (200 баллов)1. Size2. vspace, hspace3. height, width4. alignОтвет: 3.4. Расшифруйте код (300 баллов)<IMG src="./pic/wowa.gif" width=182 height=144 alt="Вова Бякин" title="Мысли о сложностях сайтостроения"> Ответ: вставка картинки pic/wowa.gif из подкаталога основного каталога размером 184Х144, при отсутствии картинки появляется надпись "Вова Бякин", при наведении указателя мышки - Мысли о сложностях сайтостроения.<hr style="page-break-before:always;display:none;"><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 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 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=""></div></div></div></div></div> <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>Технологическая карта занития по дисциплине "Математика" на 2 курсе учреждений СПО...</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 { margin-bottom: 0.21cm; }a:link { color: rgb(0, 0, 255); text-decoration: underl...</div><div class="others"><h6><a href="/shkola/raznoe/library/2015/12/20/tehnologicheskaya-karta-zanyatiya-vneurochnaya-deyatelnost-modul">Технологическая карта занятия внеурочной деятельности (Модуль "Мыльные истории") 5 класс. Тема занятия «В нашей школе Юбилей – у нас множество идей» (Изготовление упаковки для Юбилейного Школьного Мыла)</a></h6>Данная разработка является авторской. Используется на занятиях внеурочной деятельности (Модуль в 5 класс "Мыльные истории)...</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>Цели урока:: познакомить обучающихся со способами редактирования и форматирования HTML-документа;: совершенствование знаний о структуре HTML-документа.Педагогические задачи:Обучающая:: ...</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>Технологическая карта внеурочного занятия будет полезна учителям каоторые ведут занятия по внеурочной деятельности "Туризм и краеведение" Я пыталась систематичировать и обо...</div><div class="others"><h6><a href="/shkola/dopolnitelnoe-obrazovanie/library/2021/02/04/tehnologicheskaya-karta-zanyatiya-chelovek-i">Технологическая карта занятия "Человек и Природа"(Игра-занятие "Экологическая ромашка")</a></h6>В настоящее время главной ценностью экологического образования становится развитие личности через приобщение к экологической культуре.Этому способствуют занятия в кружке "Мир вокруг нас"с об...</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>Предмет:МатематикаКласс:3 классТема:«Таблица умножения и деления с числом 6»(формирования функциональной грамотности учащихся)Программа:УМК «Школа России», автор учебника &laqu...</div></div></div></div></div> <div id="poisk-materialov" data-1="1792"></div> <ul class="links inline"><li class="flag-like first last"><a href='#'>Мне нравится</a> </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> </div> </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 type="text/javascript" src="/sites/default/files/advagg_js/jsS3bm1c7u9YzJnRE6QrV-HsLzADKLeupchfbrYg22kRUS91yqV9ubUDMxzCK2GLBYdp1SFL3v48MFVTVZ3OSXjc__xK8RrS6Elbeb-uFsk6sQnqBT0LQWi9ruFM_5ORYTRxs.js" defer="defer"></script> <script type="text/javascript" src="/sites/default/files/advagg_js/jshxOxF7aEdhvlSyCfiIODtjKmufwiFkLnYBgfAc3JU2UZvl8DJBWOfPQpMnqpLsqpzRLZD7C0PqUDMlY8RRkYVw__xK8RrS6Elbeb-uFsk6sQnqBT0LQWi9ruFM_5ORYTRxs.js" defer="defer"></script> <script type="text/javascript" src="/sites/default/files/advagg_js/js__c1zZbhXAByh0V-pY3W2l6b4e6e6URcR4okOH_epIox4oVrjkf1Udl7K9Xgwtl5J3lSmv-cR7ynKeNmPgrmULSUxK8RrS6Elbeb-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>

Навигация

Библиотека

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

Скачать:

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

2.
3.

Навигация

Библиотека

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

Скачать:

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

2.3.

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

2.
3.