12+
Практикум по HTML

Объем: 46 бумажных стр.

Формат: epub, fb2, pdfRead, mobi

Подробнее

Предисловие

Пособие предлагает задания для организации практической работы по созданию и оформлению HTML-документов.

Предлагаемые задания выходят за рамки школьного курса, что позволяет использовать их как на уроках, так и во внеурочной деятельности (на факультативных занятиях, во время подготовки к конкурсам и т.д.).

Использовать задания можно как фронтально, так и индивидуально, в зависимости от цели и содержания урока, уровня подготовки учеников.

Единообразие формы представления способствуют успешному использованию заданий при проведении занятий. В пределах одного уровня приводятся задания одинаковой сложности.

Разделение практических заданий по уровням сложности направляет деятельность учащихся на достижение определенного результата, переходя от простого к сложному, от уровней узнавания и запоминания к уровням понимания и применения, тем самым стимулируя их познавательную и интеллектуальную активность.

При выполнении заданий учащиеся правомерны проявлять элементы творчества, т.е. использовать различные цвета оформления, рисунки, тексты.

Задания разработаны согласно показателям оценки результатов учебной деятельности учащихся при осуществлении контроля с использованием десятибалльной шкалы.

Оформление текстов

Задание 1. Наберите с помощью программы «Блокнот» следующий программный код. Сохраните его и просмотрите результат в браузере.

<HTML>

<HEAD>

<TITLE> Стихотворение </TITLE>

</HEAD>

<BODY>

<H1> Александр Блок </H1>

<P> Ночь. Улица. Фонарь. Аптека. <BR>

Бессмысленный и тусклый свет. <BR>

Живи еще хоть четверть века — <BR>

Все будет так. Исхода нет. </Р>

<P> Умрешь, начнешь опять сначала <BR>

И повторится все, как встарь: <BR>

Ночь. Ледяная мгла канала. <BR>

Аптека. Улица. Фонарь. </P>

</BODY>

</HTML>


Задание 2. Наберите с помощью программы «Блокнот» следующий программный код. Сохраните его и просмотрите результат в браузере.

<HTML>

<HEAD>

<TITLE> Задание </TITLE> </HEAD>

<BODY>

<H1 AlIGN=CENTER> Оформление текстов на веб-страницах </H1>

<B> Жирный текст </I> <BR>

<I> Курсивный текст </I> <BR>

<U> Подчеркнутый текст </U> <BR>

<S> Зачеркнутый текст </S> <BR>

E=mc <SUB> 2 </SUB> -Верхний индекс <BR>

H <SUB> 2 </SUB> -Нижний индекс <BR>

<H1 ALIGN=CENTER> Оформление шрифтов </Н1>

<P> <FONT SIZE=6> Это шрифт размера 6 </FONT> </P>

<P>

<FONT SIZE=4 COLOR=red> Это красный шрифт размера 4 </FONT>

</P>

<P> <FONT SIZE=5 COLOR=000088 FACE=«Monotype Corsiva»> Это синий шрифт Monotype Corsiva размером 5 </FONT> </P>

</BODY>

</HTML>


Задание 3. Напишите HTML-код для отображения на Web-странице слова «Информатика» красным цветом, жирным, по центру. Фон документа — желтый.


Задание 4. Запишите HTML-код для отображения на Web-странице текста «Каникулы», выделив первую букву красным цветом, жирным; третью букву — синим, размер — 4, курсивом; пятую букву — зеленым, жирным подчеркиванием; выравнивание текста — по правому краю.


Задание 5. Создайте HTML-документ по образцу:

Примечание. Фон документа — желтый.


Задание 6. Создайте HTML-документ по образцу:

Задание 7. Создайте HTML-документ по образцу:

Задание 8. Создайте HTML-документ по образцу:

Задание 9. Создайте HTML-документ по образцу:

Задание 10. Создайте HTML-документ по образцу:

Примечание. Фон документа — желтый. Слово «ИНФОРМАТИКА» должно перемещаться по экрану справа налево и возвращаться обратно. Последний абзац должен иметь отступ от левого края в 1 см.

Оформление списков

Задание 1. Наберите с помощью программы «Блокнот» следующий программный код. Сохраните его и просмотрите результат в браузере.

<НТМL>

<HEAD>

<ТIТLЕ> Списки </ТIТLЕ>

</HEAD>

<BODY>

<H1 ALIGN=CENTER> Нумерованный список </Н1>

<L1> Принтер

<L1> Сканер

<L1> Монитор

</UL>

<BODY>

</HTML>


Задание 2. Наберите с помощью программы «Блокнот» следующий программный код. Сохраните его и просмотрите результат в браузере.

<HTML>

<HEAD> <TITLE> Списки </TITLE> </HEAD>

<BODY>

<H1 ALIGN=CENTER> Маркированные списки </H1>

<UL TYPE=CIRCLE>

<LI> Принтер

<LI> Сканер

<LI> Монитор

</UL>

<UL TYPE=DISC>

<LI> Принтер

<LI> Сканер

<LI> Монитор

</UL>

<UL TYPE=SQUARE>

<LI> Принтер

<LI> Сканер

<LI> Монитор

</UL>

</BODY>

</HTML>


Задание 3. Напишите HTML-код следующего списка:

Задание 4. Создайте HTML-документ по образцу:

Задание 5. Создайте HTML-документ по образцу:

Задание 6. Создайте HTML-документ по образцу:

Задание 7. Создайте HTML-документ по образцу:

Задание 8. Создайте HTML-документ по образцу:

Использование графики в HTML-документах

Задание 1. Наберите с помощью программы «Блокнот» следующий программный код. Сохраните его и просмотрите результат в браузере.

<HTML>

<HEAD> <TITLE> Графика </TITLE> </HEAD>

<BODY>

<H1 ALIGN=CENTER> Горизонтальная линия </H1>

<HR ALIGN=LEFT SIZE=50 WIDTH=50 COLOR=red>

<HR SIZE=100 WIDTH=2 COLOR=green>

<HR ALIGN=RIGHT SIZE=40 WIDTH=120 COLOR=black>

<HR ALIGN=CENTER SIZE=2 WIDTH=100 COLOR=blue>

</BODY>

</HTML>


Задание 2. Наберите с помощью программы «Блокнот» следующий программный код. Сохраните его и просмотрите результат в браузере.

<HTML>

<HEAD> <TITLE> Графика </TITLE> </HEAD>

<BODY>

<H1 ALIGN=CENTER> Рисунки в HTML-документах </H1>

<IMG SRC="picture.jpg»» ALT=«Это рисунок»

HEIGHT=200 WIDTH=150 ALIGN=RIGHT BORDER=4>

</BODY>

</HTML>


Задание 3. Напишите HTML-код для отображения квадрата размером 100х100 красного цвета, расположив его по левому краю.


Задание 4. Напишите HTML-код для отображения синей вертикальной линии толщиной в 5 пикселей и высотой в 200 пикселей, расположив ее по центру.


Задание 5. Создайте HTML-документ по образцу:

Задание 6. Создайте HTML-документ по образцу:

Задание 7. Создайте HTML-документ по образцу:

Примечание: в качестве фона используйте рисунок.


Задание 8. Создайте HTML-документ по образцу:

Бесплатный фрагмент закончился.

Купите книгу, чтобы продолжить чтение.