Задания по конструированию таблиц в HTML

KNOWLEDGE HYPERMARKET

Гіпермаркет Знань>>Інформатика>>Інформатика 8 клас>> Інформатика: Етапи створення веб-сайтів

Практична робота до предмету Інформатика 8 клас.

Тема «Задания по конструированию таблиц в HTML».

Розгляд теми: Етапи створення веб-сайтів

Задания по конструированию таблиц в HTML

Язык разметки гипертекста html предназначен для конструирования web - страниц при обучении информатики может использоваться как прекрасное средство для развития творческих способностей, логического и абстрактного мышления, воображения
После изучения основных тэгов для создания web – страниц выполнить задание с таблицами.

Этап 1. Изучение тэгов и атрибутов для построения таблиц, объединение ячеек, задание фона ячейки, таблицы

<table> </table> - тэги таблицы
атрибуты тэга <table>:
bgcolor - цвет фона таблицы
width - ширина таблицы
border = n - толщина границы, при n=0 граница не видима
<tr> </tr> - тэг строки
<td> </td> - тэги ячейки
атрибуты тэга <td>:
colspan = N - объединение N ячеек в странице
rowspan = N - объединение N ячеек в столбце
bgcolor - цвет фона ячейки

Цвет фона задается английским словом, например red, или шестнадцатеричным кодом –"#D9E4F8".
<caption> </caption> - тэги заголовка таблицы

Задание.

1. В программе Блокнот создайте web – страницу Телефон.HTM, на которой будет отображаться таблица:
<html>
<head>
<tilte> Телефон </tilte>
</head>

<body>
<table border=10 width=100%>
<caption align= "top"> Телефонный справочник </caption>
</table>
</body>
</html>
2. Первая строка таблицы должна содержать заголовки столбцов.
Определите ее следующим образом: (после строки <caption… .)

<tr bgcolor = “yellow” align =”center”>
<th> ФАМИЛИЯ </th><th>НОМЕР ТЕЛЕФОНА</th>

3. Введите последующие строки таблицы (с указанием фамилии
номера телефона), предваряя каждую из них тэгом <tr> и помещая
содержимое каждой ячейки после тэга <td>.
 Например:

<tr><td>Иванцов И.А.</td><td>2-34-56</td></tr>

4. Введите 2 – 3 строки с фамилией и номером телефона.
5. Последнюю строку таблицы задайте следующим образом:

<tr><td align = ”center” colspan=2> Не забудьте позвонить родителям</td></tr>

6. Сохраните файл и просмотрите полученную страницу.

 Задания для самостоятельной работы

 Построить таблицы. Для получения таблиц с пустыми ячейками нужно вводить в ячейку код пробела &#160
 1.

<center><table border=1 width=80%>
<tr><td width=20%>&#160</td><td colspan=3>&#160</td>
<tr><td>&#160</td><td colspan=3 rowspan=3>&#160</td>
<tr><td>&#160</td>
<tr><td>&#160</td>
</table></center>

3.

<center><table border=1 width=80%>
<tr><td> &#160 </td><td rowspan=2 colspan=2> &#160</td><td>>&#160</td>
<tr><td> &#160 </td><td rowspan=2>&#160</td>
<tr><td> &#160 </td> <td> &#160 </td> <td> &#160 </td>
</table></center>

Этап 2. Закрепление знаний тэгов и атрибутов для построения таблиц, а также работы с цветом.

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

Задание 1. Цветные прямоугольники – 1.
<center><table bqcolor=”red” width=80% border=1>
<tr><td> <center><table bqcolor=”blue” width=80% border=1>
<tr><td> <center><table bqcolor=”yellow” width=80% border=1>
<tr><td> <center><table bqcolor=”qreen” width=80% border=1>
<tr><td> </td>
<tr></table></center> </td>
<tr></table></center> </td>
<tr></table></center> </td>
<tr></table></center>

Задание 2. Цветные прямоугольники-2.
<center><table bqcolor=”red” width=80% border=1>
<tr><td> <table bqcolor=”blue” width=80% border=1>
<tr><td> <table bqcolor=”yellow” width=80% border=1>
<tr><td> <table bqcolor=”qreen” width=80% border=1>
<tr><td> </td>
<tr></table></td>
<tr></table></td>
<tr></table></td>
<tr></table></center>

Задание 3. Шахматная доска.
<center><table width=80% border=1>
<tr>
<td bqcolor=”black”> </td>
<td bqcolor=”FFFFFF”> </td>
<td bqcolor=”black”> </td>
<td bqcolor=”FFFFFF”> </td>
<tr>
<tr>
<td bqcolor=”black”> </td>
<td bqcolor=”FFFFFF”> </td>
<td bqcolor=”black”> </td>
<td bqcolor=”FFFFFF”> </td>
<tr>
<tr>
<td bqcolor=”black”> </td>
<td bqcolor=”FFFFFF”> </td>
<td bqcolor=”black”> </td>
<td bqcolor=”FFFFFF”> </td>
<tr>
<tr>
<td bqcolor=”black”> </td>
<td bqcolor=”FFFFFF”> </td>
<td bqcolor=”black”> </td>
<td bqcolor=”FFFFFF”> </td>
<tr>
</table></center>

Задание 4. Цепочка из цветных квадратов.
<center><table widrh=60% border=0>

<tr>
<td colspan=3 bqcolor=”#D9E4F8”> </td>
<td bqcolor=”red”> </td>
<tr>

<tr>
<td colspan=3 bqcolor=”#D9E4F8”> </td>
<td bqcolor=”qreen”> </td>
<td bqcolor=”#D9E4F8”> </td>
<tr>

<tr>
<td bqcolor=”#D9E4F8”> </td>
<td bqcolor=”yellow”> </td>
<td colspan=3 bqcolor=”#D9E4F8”> </td>
<tr>
<tr>
<td bqcolor=”blue”> </td>
<td colspan=3 bqcolor=”#D9E4F8”> </td>
<tr>

</table></center>

Задание 5. Ступени.
<center><table width=60% border=0>

<tr>
<td bqcolor=”blue”> </td>
<td colspan=3> </td>

<tr>
<tr>
<td colspan=2 bqcolor=”red”> </td>
<td colspan=2> </td>

<tr>

<tr>
<td colspan=3 bqcolor=”red”> </td>
<td> </td>

<tr>

<tr>

<tr>
<td colspan=4 bqcolor=”red”> </td>

<tr>
</table></center>

Задание 6. Кирпичная стена.
<center><table width=60% border=0>
<tr>
<td bqcolor=”red”> </td>
<td bqcolor=”red”> </td>
<td bqcolor=”red”> </td>
<td bqcolor=”red”> </td>
</tr>
</table></center>

<center><table width=60% border=0>
<tr>
<td bqcolor=”red”> </td>
<td bqcolor=”red”> </td>
<td bqcolor=”red”> </td>
<td bqcolor=”red”> </td>
<td bqcolor=”red”> </td>
</tr>
</table></center>

<center><table width=60% border=0>
<tr>
<td bqcolor=”red”> </td>
<td bqcolor=”red”> </td>
<td bqcolor=”red”> </td>
<td bqcolor=”red”> </td>
</tr>
</table></center>

<center><table width=60% border=0>
<tr>
<td bqcolor=”red”> </td>
<td bqcolor=”red”> </td>
<td bqcolor=”red”> </td>
<td bqcolor=”red”> </td>
<td bqcolor=”red”> </td>
</tr>
</table></center>

Надіслав викладач інформатики Миловидов Юрій Олегович, университет «КРОК»

_{Бібліотека з підручниками та книгами на скачку безкоштовно онлайн, Інформатика для 8 класу скачати, шкільна програма з інформатики, плани конспектів уроків}

Источник — «http://edufuture.biz/index.php?title=%D0%97%D0%B0%D0%B4%D0%B0%D0%BD%D0%B8%D1%8F_%D0%BF%D0%BE_%D0%BA%D0%BE%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8E_%D1%82%D0%B0%D0%B1%D0%BB%D0%B8%D1%86_%D0%B2_HTML»

Предмети > Інформатика > Інформатика 8 клас > Етапи створення веб-сайтів > Етапи створення веб-сайтів. Практикуми, лабораторні, кейси

При использовании материалов ресурса
ссылка на edufuture.biz обязательна (для интернет ресурсов - гиперссылка).
edufuture.biz 2008-© Все права защищены.
Сайт edufuture.biz является порталом, в котором не предусмотрены темы политики, наркомании, алкоголизма, курения и других "взрослых" тем.

Разработка - Гипермаркет знаний 2008-

Ждем Ваши замечания и предложения на email:
По вопросам рекламы и спонсорства пишите на email: