Автор: Игнатенко Екатерина Сергеевна
Должность: преподаватель
Учебное заведение: НИК (филиал) ФГБОУ ВО «ЮГУ»
Населённый пункт: г. Нефтеюганск
Наименование материала: Статья
Тема: Олимпиада по HTML как одна из форм организации учебного процесса при изучении информатики
Раздел: среднее профессиональное
Олимпиада по HTML как одна из форм организации учебного
процесса при изучении информатики
Олимпиада
как
одна
из
форм
организации
учебного
процесса
при
изучении информатики, помогает обучающимся расширить свои знания в
более узкой сфере.
Одной из возможностей продемонстрировать свои знания и выделиться
на
фоне
других
–
это
успешное
участие
в
олимпиадах
и
конкурсах.
Обучающиеся попадают в атмосферу успеха, общаются между равными по
интеллекту, появляется желание снова встретиться соревноваться и общаться,
а
для
этого
появляется
необходимость
дополнительной
подготовки
по
выбранной дисциплине.
Предметные олимпиады и конкурсы – это соревнование студентов по
различным дисциплинам и сферам деятельности. Они занимают среди всех
форм
из
методов
внеурочной
деятельности
студентов,
осуществляемой
в
условиях
профессионального
обучения,
особое
место.
Олимпиады
и
конкурсы «работают» на обеспечение выбора дальнейшего жизненного пути
студента, развивают индивидуальные особенности личности студента, то есть
по
большому
счету
способствуют
реализации
целей
профессионального
обучения.
Главная
задача
олимпиад
и
конкурсов
заключается
в
повышении
интереса обучающихся к изучению дисциплин и выявлению талантливых
студентов.
Олимпиады и конкурсы позволяют обучающимся и преподавателям
проверить и критически оценить свои возможности, определиться в выборе
дальнейших
путей
своего
образования.
На
олимпиадах
и
конкурсах
предпочтение отдается оригинальным идеям решения задач с четким их
обоснованием,
выбору
оптимального
метода
выполнения
задания,
аргументированным выводам, четким следованиям инструкции задания.
Задание на олимпиаду состоит из 3 уровней.
Задания
первого
уровня
содержат
упражнения
за
знания
основных
понятий и структуры языка html.
Задания второго уровня содержат упражнения на более углубленное
знание языка, в этих заданиях предложено найти ошибки в коде программы и
исправить их.
Задания
второго
уровня
содержат
упражнения,
в
которых
обучающемуся
будет
предложено
уже
самому
написать
код
программы,
используя полученные знания и пользуясь справочной литературой.
ОЛИМПИАДА ПО HTML
Задание 1 уровня
Задание
1.
Просмотрите
текст
HTML-документа
и
ответьте
на
вопросы:
А. Какой цвет фона и текста будет на веб-странице?
Б. При выводе заголовков на веб-странице размер их уменьшается или
увеличивается?
Задание 2. Вставьте слова в пропуски в тексте:
HTML
(от
англ.
Hypertext
Markup
Language
-
«_____
разметки
гипертекста») - это стандартный язык разметки документов во Всемирной
_________.
Практически все веб-страницы создаются при помощи HTML.
Для того, чтобы текстовый файл превратился в HTML-файл, нужно
поменять его расширение с ".txt" на ".____"
Необходимо отметить, что любой HTML-документ открывется тегом
_______и им же закрывается.
Затем, между тегами <HTML> и </HTML> следует разместить тег
заголовка и тело документа. Вот и все!
Образец оформления:
<HTML>
<HEAD>
<TITLE>Заголовок документа</TITLE>
</HEAD>
<BODY>
Текст документа
________
</HTML>
Тело документа – святая святых. Именно в нем находится все то, что
отображается на странице: текст, картинки, таблицы. Соответственно, делаем
вывод:
большинство
ваших
HTML-экспериментов
будет
проводиться
в
пространстве между ______ и _________.
HTML
-
тэги
могут
содержать
_______,
позволяющие
задавать
поведение тэгов. Например, bgcolor отвечает за цвет фона страницы.
Для выделения текста используются особые тэги: жирным <b> </b>,
курсивом ____ ______.
Перевод ________ формируется тэгом <br>.
Для задания цвета, шрифта, размера текста используется тэг ________:
<font color="цвет"> </font>,
<font face="название шрифта"> </font>,
<font size="число"> </font>.
Возможность включения графических изображений в HTML - документ
позволяет значительно улучшить внешний вид документа. Делается это при
помощи тэга ______.
Таблицы
в
HTML
представляют
собой
сложные
структуры
из
вложенных
друг
в
друга
тэгов.
Тэги
таблицы
<table>
</table>
содержат
внутри тэги строк таблицы <tr> , которые в свою очередь содержат в себе
тэги ячеек <td>.
Для преобразования какого-либо текста в _______________ используют
тэг <a href="адрес">текст</a>.
Вывод по прочитанному: ________ — язык гипертекстовой разметки
документов.
Задания 2 уровня
Задание 1. Составьте программу, обозначив номера строк (какая будет -
первая, какая – вторая и т.д.)
<html>
</head>
</table>
<td>1</td><td>1</td></tr>
<table width="50%" border="3" >
<tr><td>1</td><td colspan="2">1</td></tr>
<head><title>Задание 1</title></html>
<td>1</td></tr>
<body>
<tr><td>1</td> <td>1</td><td>1</td>
</body>
<tr><td>1</td><td>1</td><td>1</td><td>1</td>
Задание 2. Исправьте ошибки
<HTML>
<HEAD>
<TITLE>Учебный файл HTML</TITLE>
<HEAD>
<BODY ="#FFFFCC" TEXT="#330066">
<P ALLIGN="CETER">
FONT CALOR="#008080" SZE="7"
<B>Расписание</B></FONT><BR>
<FONTS SАZE="6"><I> занятий на вторник</I></FONT> <BR><BR>
<IMG CRS="CLOCK.PNG">
</P>
</BODI>
</HTML>
Задания 3 уровня
Задание 1. Чередующиеся квадраты
Сделайте набор квадратов, у которых меняется цвет заливки (рисунок
1).
При
наведении
на
любой
квадрат
его
цвет
меняется
на
оранжевый
(рисунок 2).
Рисунок 1. Изменение цвета заливки квадратов
Рисунок 2. Изменение цвета заливки при на ведении мыши
Задание 2. Флаг Японии
Сделайте страницу с изображением флага Японии, как показано на рис.
1. Размер 300х200 пикселов, диаметр круга 120 пикселов. Любые картинки
применять запрещено, всё надо сделать с помощью CSS. Страница должна
корректно отображаться во всех современных браузерах.
Рисунок 3. Флаг Японии
Задание 3. Знак французских ВВС
Придумайте четыре способа создания фигуры, показанной на рисунке
4, с помощью CSS, без дополнительных изображений и символов.
Рисунок 4. Знак французских ВВС