KNOWLEDGE HYPERMARKET


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

Гіпермаркет Знань>>Інформатика>>Інформатика 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>&#160</td><td colspan=3>&#160</td>
<tr><td>&#160</td><td>&#160</td><td>&#160</td><td>&#160</td>
<tr><td>&#160</td><td>&#160</td><td>&#160</td><td>&#160</td>
</table></center>            
 

2.
   

 




 
 
 

 
 
 

     

<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><br><br><center><table bqcolor=”blue” width=80% border=1>
<tr><td><br><br><center><table bqcolor=”yellow” width=80% border=1>
<tr><td><br><br><center><table bqcolor=”qreen” width=80% border=1>
<tr><td><br><br><br><br><br><br><br><br><br><br><br><br></td>
<tr></table></center><br><br></td>
<tr></table></center><br><br></td>
<tr></table></center><br><br></td>
<tr></table></center>


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

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

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

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

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

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

</table></center>


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

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

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

<tr>

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

<tr>

<tr>

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

<tr>
</table></center>


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

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


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

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






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

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

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