KNOWLEDGE HYPERMARKET

Задания по конструированию таблиц в HTML
(Новая страница: «<metakeywords>Гіпермаркет Знань - перший в світі!, Гіпермаркет Знань, Інформатика 8 клас, клас, уро...»)
 
Строка 9: Строка 9:
<br> <br>Розгляд теми: Етапи створення веб-сайтів<br>  
<br> <br>Розгляд теми: Етапи створення веб-сайтів<br>  
 +
<br>
 +
'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Задания по конструированию таблиц в HTML'''<br><br>Язык разметки гипертекста html предназначен для конструирования web -&nbsp; страниц при обучении информатики может использоваться как прекрасное средство для развития творческих способностей, логического и абстрактного мышления, воображения<br>После изучения основных тэгов для создания web – страниц выполнить задание с таблицами.<br><br>Этап 1. Изучение тэгов и атрибутов для построения таблиц, объединение ячеек, задание фона ячейки, таблицы<br><br>&lt;table&gt; &lt;/table&gt; &nbsp;&nbsp;&nbsp; &nbsp;- тэги таблицы <br>атрибуты тэга &lt;table&gt;:<br>bgcolor&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;- цвет фона таблицы<br>width&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;- ширина таблицы<br>border = n&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;- толщина границы, при n=0 граница не видима<br>&lt;tr&gt;&nbsp;&nbsp; &nbsp;&lt;/tr&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;- тэг строки <br>&lt;td&gt; &lt;/td&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;- тэги ячейки<br>атрибуты тэга &lt;td&gt;: &nbsp;<br>colspan = N&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;- объединение N ячеек в странице&nbsp;&nbsp; &nbsp;<br>rowspan = N&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;- объединение N ячеек в столбце<br>bgcolor&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;- цвет фона ячейки<br><br>Цвет фона задается английским словом, например red, или шестнадцатеричным кодом –"#D9E4F8".<br>&lt;caption&gt; &lt;/caption&gt; - тэги заголовка таблицы<br><br>'''Задание.'''<br><br>1.&nbsp;&nbsp; &nbsp;В программе Блокнот создайте web – страницу Телефон.HTM, на которой будет отображаться таблица: <br>&lt;html&gt;<br>&lt;head&gt;<br>&lt;tilte&gt; Телефон &lt;/tilte&gt;<br>&lt;/head&gt;<br><br>&lt;body&gt;<br>&lt;table border=10 width=100%&gt;<br>&lt;caption align= "top"&gt; Телефонный справочник &lt;/caption&gt;<br>&lt;/table&gt; <br>&lt;/body&gt;<br>&lt;/html&gt;<br>2.&nbsp;&nbsp; &nbsp;Первая строка таблицы должна содержать заголовки столбцов.<br>Определите ее следующим образом: (после строки &lt;caption… .)<br><br>&lt;tr bgcolor = “yellow” align =”center”&gt;<br>&lt;th&gt; ФАМИЛИЯ &lt;/th&gt;&lt;th&gt;НОМЕР ТЕЛЕФОНА&lt;/th&gt;<br><br>3.&nbsp;&nbsp; &nbsp;Введите последующие строки таблицы (с указанием фамилии<br>номера телефона), предваряя каждую из них тэгом &lt;tr&gt; и помещая<br>содержимое каждой ячейки после тэга &lt;td&gt;.<br>&nbsp;&nbsp; &nbsp;Например:<br><br>&nbsp;&lt;tr&gt;&lt;td&gt;Иванцов И.А.&lt;/td&gt;&lt;td&gt;2-34-56&lt;/td&gt;&lt;/tr&gt;<br><br>4.&nbsp;&nbsp; &nbsp;Введите 2 – 3 строки с фамилией и номером телефона.<br>5.&nbsp;&nbsp; &nbsp;Последнюю строку таблицы задайте следующим образом:<br><br>&lt;tr&gt;&lt;td align = ”center” colspan=2&gt; Не забудьте позвонить родителям&lt;/td&gt;&lt;/tr&gt;<br><br>6.&nbsp;&nbsp; &nbsp;Сохраните файл и просмотрите полученную страницу.<br><br><br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Задания для самостоятельной работы'''<br><br>&nbsp;&nbsp;&nbsp; &nbsp;Построить таблицы. Для получения таблиц с пустыми ячейками нужно вводить в ячейку код пробела &amp;#160<br>&nbsp;&nbsp; 1.<br>&nbsp;&nbsp; &nbsp;&nbsp; <br>
-
Задания по конструированию таблиц в HTML<br><br>Язык разметки гипертекста html предназначен для конструирования web -&nbsp; страниц при обучении информатики может использоваться как прекрасное средство для развития творческих способностей, логического и абстрактного мышления, воображения<br>После изучения основных тэгов для создания web – страниц выполнить задание с таблицами.<br><br>Этап 1. Изучение тэгов и атрибутов для построения таблиц, объединение ячеек, задание фона ячейки, таблицы<br><br>&lt;table&gt; &lt;/table&gt; &nbsp;&nbsp;&nbsp; &nbsp;- тэги таблицы <br>атрибуты тэга &lt;table&gt;:<br>bgcolor&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;- цвет фона таблицы<br>width&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;- ширина таблицы<br>border = n&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;- толщина границы, при n=0 граница не видима<br>&lt;tr&gt;&nbsp;&nbsp; &nbsp;&lt;/tr&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;- тэг строки <br>&lt;td&gt; &lt;/td&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;- тэги ячейки<br>атрибуты тэга &lt;td&gt;: &nbsp;<br>colspan = N&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;- объединение N ячеек в странице&nbsp;&nbsp; &nbsp;<br>rowspan = N&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;- объединение N ячеек в столбце<br>bgcolor&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;- цвет фона ячейки<br><br>Цвет фона задается английским словом, например red, или шестнадцатеричным кодом –"#D9E4F8".<br>&lt;caption&gt; &lt;/caption&gt; - тэги заголовка таблицы<br><br>Задание.<br><br>1.&nbsp;&nbsp; &nbsp;В программе Блокнот создайте web – страницу Телефон.HTM, на которой будет отображаться таблица: <br>&lt;html&gt;<br>&lt;head&gt;<br>&lt;tilte&gt; Телефон &lt;/tilte&gt;<br>&lt;/head&gt;<br><br>&lt;body&gt;<br>&lt;table border=10 width=100%&gt;<br>&lt;caption align= "top"&gt; Телефонный справочник &lt;/caption&gt;<br>&lt;/table&gt; <br>&lt;/body&gt;<br>&lt;/html&gt;<br>2.&nbsp;&nbsp; &nbsp;Первая строка таблицы должна содержать заголовки столбцов.<br>Определите ее следующим образом: (после строки &lt;caption… .)<br><br>&lt;tr bgcolor = “yellow” align =”center”&gt;<br>&lt;th&gt; ФАМИЛИЯ &lt;/th&gt;&lt;th&gt;НОМЕР ТЕЛЕФОНА&lt;/th&gt;<br><br>3.&nbsp;&nbsp; &nbsp;Введите последующие строки таблицы (с указанием фамилии<br>номера телефона), предваряя каждую из них тэгом &lt;tr&gt; и помещая<br>содержимое каждой ячейки после тэга &lt;td&gt;.<br>&nbsp;&nbsp; &nbsp;Например:<br><br>&nbsp;&lt;tr&gt;&lt;td&gt;Иванцов И.А.&lt;/td&gt;&lt;td&gt;2-34-56&lt;/td&gt;&lt;/tr&gt;<br><br>4.&nbsp;&nbsp; &nbsp;Введите 2 – 3 строки с фамилией и номером телефона.<br>5.&nbsp;&nbsp; &nbsp;Последнюю строку таблицы задайте следующим образом:<br><br>&lt;tr&gt;&lt;td align = ”center” colspan=2&gt; Не забудьте позвонить родителям&lt;/td&gt;&lt;/tr&gt;<br><br>6.&nbsp;&nbsp; &nbsp;Сохраните файл и просмотрите полученную страницу.<br><br><br><br>&nbsp;<br>Задания для самостоятельной работы<br><br>&nbsp;&nbsp;&nbsp; &nbsp;Построить таблицы. Для получения таблиц с пустыми ячейками нужно вводить в ячейку код пробела &amp;#160<br>&nbsp;&nbsp; 1.<br>&nbsp;&nbsp; &nbsp;<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<br><br><br>&lt;center&gt;&lt;table border=1 width=80%&gt;<br>&lt;tr&gt;&lt;td&gt;&amp;#160&lt;/td&gt;&lt;td colspan=3&gt;&amp;#160&lt;/td&gt;<br>&lt;tr&gt;&lt;td&gt;&amp;#160&lt;/td&gt;&lt;td&gt;&amp;#160&lt;/td&gt;&lt;td&gt;&amp;#160&lt;/td&gt;&lt;td&gt;&amp;#160&lt;/td&gt;<br>&lt;tr&gt;&lt;td&gt;&amp;#160&lt;/td&gt;&lt;td&gt;&amp;#160&lt;/td&gt;&lt;td&gt;&amp;#160&lt;/td&gt;&lt;td&gt;&amp;#160&lt;/td&gt;<br>&lt;/table&gt;&lt;/center&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<br>&nbsp; 2.<br>&nbsp;&nbsp; &nbsp;<br>&nbsp;&nbsp; &nbsp;<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<br><br><br><br>&lt;center&gt;&lt;table border=1 width=80%&gt;<br>&lt;tr&gt;&lt;td width=20%&gt;&amp;#160&lt;/td&gt;&lt;td colspan=3&gt;&amp;#160&lt;/td&gt;<br>&lt;tr&gt;&lt;td&gt;&amp;#160&lt;/td&gt;&lt;td colspan=3 rowspan=3&gt;&amp;#160&lt;/td&gt;<br>&lt;tr&gt;&lt;td&gt;&amp;#160&lt;/td&gt;<br>&lt;tr&gt;&lt;td&gt;&amp;#160&lt;/td&gt;<br>&lt;/table&gt;&lt;/center&gt;<br><br><br>3.<br>&nbsp;&nbsp; &nbsp;<br>&nbsp;&nbsp; &nbsp;<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<br><br><br>&lt;center&gt;&lt;table border=1 width=80%&gt;<br>&lt;tr&gt;&lt;td&gt; &amp;#160 &lt;/td&gt;&lt;td rowspan=2 colspan=2&gt; &amp;#160&lt;/td&gt;&lt;td&gt;&gt;&amp;#160&lt;/td&gt;<br>&lt;tr&gt;&lt;td&gt; &amp;#160 &lt;/td&gt;&lt;td&nbsp; rowspan=2&gt;&amp;#160&lt;/td&gt;<br>&lt;tr&gt;&lt;td&gt; &amp;#160 &lt;/td&gt; &lt;td&gt; &amp;#160 &lt;/td&gt; &lt;td&gt; &amp;#160 &lt;/td&gt;<br>&lt;/table&gt;&lt;/center&gt;<br><br><br><br>&nbsp;<br><br>Этап 2. Закрепление знаний тэгов и атрибутов для построения таблиц, &nbsp;<br>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; а также работы с цветом.<br><br>В предлагаемых заданиях требуется не просто получить таблицу как таковую, а создать некоторый рисунок из квадратов и прямоугольников.<br><br>Задание 1.&nbsp; Цветные прямоугольники – 1.<br>&lt;center&gt;&lt;table bqcolor=”red”&nbsp; width=80% border=1&gt;<br>&lt;tr&gt;&lt;td&gt;&lt;br&gt;&lt;br&gt;&lt;center&gt;&lt;table bqcolor=”blue” width=80% border=1&gt;<br>&lt;tr&gt;&lt;td&gt;&lt;br&gt;&lt;br&gt;&lt;center&gt;&lt;table bqcolor=”yellow” width=80% border=1&gt;<br>&lt;tr&gt;&lt;td&gt;&lt;br&gt;&lt;br&gt;&lt;center&gt;&lt;table bqcolor=”qreen” width=80% border=1&gt;<br>&lt;tr&gt;&lt;td&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;tr&gt;&lt;/table&gt;&lt;/center&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;tr&gt;&lt;/table&gt;&lt;/center&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;tr&gt;&lt;/table&gt;&lt;/center&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;tr&gt;&lt;/table&gt;&lt;/center&gt;<br>Задание 2. Цветные прямоугольники-2.<br>&lt;center&gt;&lt;table bqcolor=”red”&nbsp; width=80% border=1&gt;<br>&lt;tr&gt;&lt;td&gt;&lt;br&gt;&lt;br&gt;&lt;table bqcolor=”blue” width=80% border=1&gt;<br>&lt;tr&gt;&lt;td&gt;&lt;br&gt;&lt;br&gt;&lt;table bqcolor=”yellow” width=80% border=1&gt;<br>&lt;tr&gt;&lt;td&gt;&lt;br&gt;&lt;br&gt;&lt;table bqcolor=”qreen” width=80% border=1&gt;<br>&lt;tr&gt;&lt;td&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;tr&gt;&lt;/table&gt;&lt;/td&gt;<br>&lt;tr&gt;&lt;/table&gt;&lt;/td&gt;<br>&lt;tr&gt;&lt;/table&gt;&lt;/td&gt;<br>&lt;tr&gt;&lt;/table&gt;&lt;/center&gt;<br><br>Задание 3. Шахматная доска.<br>&lt;center&gt;&lt;table&nbsp; width=80% border=1&gt;<br>&lt;tr&gt;<br>&lt;td bqcolor=”black”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”FFFFFF”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”black”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”FFFFFF”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;tr&gt;<br>&lt;tr&gt;<br>&lt;td bqcolor=”black”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”FFFFFF”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”black”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”FFFFFF”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;tr&gt;<br>&lt;tr&gt;<br>&lt;td bqcolor=”black”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”FFFFFF”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”black”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”FFFFFF”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;tr&gt;<br>&lt;tr&gt;<br>&lt;td bqcolor=”black”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”FFFFFF”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”black”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”FFFFFF”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;tr&gt;<br>&lt;/table&gt;&lt;/center&gt;<br><br>Задание 4. Цепочка из цветных квадратов.<br>&lt;center&gt;&lt;table widrh=60% border=0&gt;<br><br>&lt;tr&gt;<br>&lt;td colspan=3 bqcolor=”#D9E4F8”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;tr&gt;<br><br>&lt;tr&gt;<br>&lt;td colspan=3 bqcolor=”#D9E4F8”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”qreen”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”#D9E4F8”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;tr&gt;<br><br>&lt;tr&gt;<br>&lt;td bqcolor=”#D9E4F8”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”yellow”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td colspan=3 bqcolor=”#D9E4F8”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;tr&gt;<br>&lt;tr&gt;<br>&lt;td bqcolor=”blue”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td colspan=3 bqcolor=”#D9E4F8”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;tr&gt;<br><br>&lt;/table&gt;&lt;/center&gt;<br><br><br>Задание 5. Ступени. <br>&lt;center&gt;&lt;table width=60% border=0&gt;<br><br>&lt;tr&gt;<br>&lt;td bqcolor=”blue”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td colspan=3&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br><br>&lt;tr&gt;<br>&lt;tr&gt;<br>&lt;td colspan=2 bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td colspan=2&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br><br>&lt;tr&gt;<br><br>&lt;tr&gt;<br>&lt;td colspan=3 bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br><br>&lt;tr&gt;<br><br>&lt;tr&gt;<br><br>&lt;tr&gt;<br>&lt;td colspan=4 bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br><br>&lt;tr&gt;<br>&lt;/table&gt;&lt;/center&gt;<br><br><br>Задание 6. Кирпичная стена.<br>&lt;center&gt;&lt;table width=60% border=0&gt;<br>&lt;tr&gt;<br>&lt;td bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;/tr&gt;<br>&lt;/table&gt;&lt;/center&gt;<br><br>&lt;center&gt;&lt;table width=60% border=0&gt;<br>&lt;tr&gt;<br>&lt;td bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;/tr&gt;<br>&lt;/table&gt;&lt;/center&gt;<br><br><br>&lt;center&gt;&lt;table width=60% border=0&gt;<br>&lt;tr&gt;<br>&lt;td bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;/tr&gt;<br>&lt;/table&gt;&lt;/center&gt;<br><br>&lt;center&gt;&lt;table width=60% border=0&gt;<br>&lt;tr&gt;<br>&lt;td bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;/tr&gt;<br>&lt;/table&gt;&lt;/center&gt;<br><br><br>
+
{| cellspacing="1" cellpadding="1" border="1" style="width: 723px; height: 66px;"
 +
|-
 +
| &nbsp;&nbsp; <br>
 +
| colspan="3" | &nbsp;&nbsp; <br>
 +
|-
 +
| &nbsp;&nbsp; <br>
 +
| &nbsp; <br>
 +
| &nbsp; <br>
 +
| &nbsp; <br>
 +
|-
 +
| &nbsp;&nbsp;&nbsp; <br>
 +
| &nbsp;&nbsp; <br>
 +
| &nbsp;&nbsp; <br>
 +
| &nbsp; <br>
 +
|}
 +
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<br>&nbsp;&lt;center&gt;&lt;table border=1 width=80%&gt;<br>&lt;tr&gt;&lt;td&gt;&amp;#160&lt;/td&gt;&lt;td colspan=3&gt;&amp;#160&lt;/td&gt;<br>&lt;tr&gt;&lt;td&gt;&amp;#160&lt;/td&gt;&lt;td&gt;&amp;#160&lt;/td&gt;&lt;td&gt;&amp;#160&lt;/td&gt;&lt;td&gt;&amp;#160&lt;/td&gt;<br>&lt;tr&gt;&lt;td&gt;&amp;#160&lt;/td&gt;&lt;td&gt;&amp;#160&lt;/td&gt;&lt;td&gt;&amp;#160&lt;/td&gt;&lt;td&gt;&amp;#160&lt;/td&gt;<br>&lt;/table&gt;&lt;/center&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<br>&nbsp;<br>
 +
2.<br>&nbsp;&nbsp;&nbsp; <br>
 +
{| cellspacing="1" cellpadding="1" border="1" style="width: 725px; height: 87px;"
 +
|-
 +
| '''&nbsp;<br>'''
 +
| colspan="3" | <br>
 +
|-
 +
| <br>
 +
| colspan="3" | <br>
 +
|-
 +
| <br>
 +
| &nbsp;<br>
 +
| &nbsp;<br>
 +
| &nbsp;<br>
 +
|-
 +
| <br>
 +
| &nbsp;<br>
 +
| &nbsp;<br>
 +
| &nbsp;<br>
 +
|}
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br><br>&lt;center&gt;&lt;table border=1 width=80%&gt;<br>&lt;tr&gt;&lt;td width=20%&gt;&amp;#160&lt;/td&gt;&lt;td colspan=3&gt;&amp;#160&lt;/td&gt;<br>&lt;tr&gt;&lt;td&gt;&amp;#160&lt;/td&gt;&lt;td colspan=3 rowspan=3&gt;&amp;#160&lt;/td&gt;<br>&lt;tr&gt;&lt;td&gt;&amp;#160&lt;/td&gt;<br>&lt;tr&gt;&lt;td&gt;&amp;#160&lt;/td&gt;<br>&lt;/table&gt;&lt;/center&gt;<br><br><br>3.<br>&nbsp;&nbsp;&nbsp; <br>
 +
 +
{| cellspacing="1" cellpadding="1" border="1" style="width: 721px; height: 66px;"
 +
|-
 +
| &nbsp;&nbsp; <br>
 +
| colspan="3" | &nbsp; <br>
 +
|-
 +
| &nbsp;&nbsp; <br>
 +
| colspan="3" | &nbsp; <br>
 +
|-
 +
| &nbsp;&nbsp; <br>
 +
| &nbsp; <br>
 +
| &nbsp; <br>
 +
| &nbsp; <br>
 +
|}
 +
 +
&nbsp;&nbsp; &nbsp;<br>&nbsp;<br>&lt;center&gt;&lt;table border=1 width=80%&gt;<br>&lt;tr&gt;&lt;td&gt; &amp;#160 &lt;/td&gt;&lt;td rowspan=2 colspan=2&gt; &amp;#160&lt;/td&gt;&lt;td&gt;&gt;&amp;#160&lt;/td&gt;<br>&lt;tr&gt;&lt;td&gt; &amp;#160 &lt;/td&gt;&lt;td&nbsp; rowspan=2&gt;&amp;#160&lt;/td&gt;<br>&lt;tr&gt;&lt;td&gt; &amp;#160 &lt;/td&gt; &lt;td&gt; &amp;#160 &lt;/td&gt; &lt;td&gt; &amp;#160 &lt;/td&gt;<br>&lt;/table&gt;&lt;/center&gt;<br><br>&nbsp;<br>'''<br>Этап 2. Закрепление знаний тэгов и атрибутов для построения таблиц,&nbsp; а также работы с цветом.'''<br><br>В предлагаемых заданиях требуется не просто получить таблицу как таковую, а создать некоторый рисунок из квадратов и прямоугольников.<br><br>'''Задание 1.'''&nbsp; Цветные прямоугольники – 1.<br>&lt;center&gt;&lt;table bqcolor=”red”&nbsp; width=80% border=1&gt;<br>&lt;tr&gt;&lt;td&gt;&lt;br&gt;&lt;br&gt;&lt;center&gt;&lt;table bqcolor=”blue” width=80% border=1&gt;<br>&lt;tr&gt;&lt;td&gt;&lt;br&gt;&lt;br&gt;&lt;center&gt;&lt;table bqcolor=”yellow” width=80% border=1&gt;<br>&lt;tr&gt;&lt;td&gt;&lt;br&gt;&lt;br&gt;&lt;center&gt;&lt;table bqcolor=”qreen” width=80% border=1&gt;<br>&lt;tr&gt;&lt;td&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;tr&gt;&lt;/table&gt;&lt;/center&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;tr&gt;&lt;/table&gt;&lt;/center&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;tr&gt;&lt;/table&gt;&lt;/center&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;tr&gt;&lt;/table&gt;&lt;/center&gt;
 +
 +
<br>'''Задание 2.''' Цветные прямоугольники-2.<br>&lt;center&gt;&lt;table bqcolor=”red”&nbsp; width=80% border=1&gt;<br>&lt;tr&gt;&lt;td&gt;&lt;br&gt;&lt;br&gt;&lt;table bqcolor=”blue” width=80% border=1&gt;<br>&lt;tr&gt;&lt;td&gt;&lt;br&gt;&lt;br&gt;&lt;table bqcolor=”yellow” width=80% border=1&gt;<br>&lt;tr&gt;&lt;td&gt;&lt;br&gt;&lt;br&gt;&lt;table bqcolor=”qreen” width=80% border=1&gt;<br>&lt;tr&gt;&lt;td&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;tr&gt;&lt;/table&gt;&lt;/td&gt;<br>&lt;tr&gt;&lt;/table&gt;&lt;/td&gt;<br>&lt;tr&gt;&lt;/table&gt;&lt;/td&gt;<br>&lt;tr&gt;&lt;/table&gt;&lt;/center&gt;<br><br>'''Задание 3.''' Шахматная доска.<br>&lt;center&gt;&lt;table&nbsp; width=80% border=1&gt;<br>&lt;tr&gt;<br>&lt;td bqcolor=”black”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”FFFFFF”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”black”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”FFFFFF”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;tr&gt;<br>&lt;tr&gt;<br>&lt;td bqcolor=”black”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”FFFFFF”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”black”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”FFFFFF”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;tr&gt;<br>&lt;tr&gt;<br>&lt;td bqcolor=”black”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”FFFFFF”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”black”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”FFFFFF”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;tr&gt;<br>&lt;tr&gt;<br>&lt;td bqcolor=”black”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”FFFFFF”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”black”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”FFFFFF”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;tr&gt;<br>&lt;/table&gt;&lt;/center&gt;<br><br>'''Задание 4'''. Цепочка из цветных квадратов.<br>&lt;center&gt;&lt;table widrh=60% border=0&gt;<br><br>&lt;tr&gt;<br>&lt;td colspan=3 bqcolor=”#D9E4F8”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;tr&gt;<br><br>&lt;tr&gt;<br>&lt;td colspan=3 bqcolor=”#D9E4F8”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”qreen”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”#D9E4F8”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;tr&gt;<br><br>&lt;tr&gt;<br>&lt;td bqcolor=”#D9E4F8”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”yellow”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td colspan=3 bqcolor=”#D9E4F8”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;tr&gt;<br>&lt;tr&gt;<br>&lt;td bqcolor=”blue”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td colspan=3 bqcolor=”#D9E4F8”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;tr&gt;<br><br>&lt;/table&gt;&lt;/center&gt;<br><br>'''<br>Задание 5'''. Ступени. <br>&lt;center&gt;&lt;table width=60% border=0&gt;<br><br>&lt;tr&gt;<br>&lt;td bqcolor=”blue”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td colspan=3&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br><br>&lt;tr&gt;<br>&lt;tr&gt;<br>&lt;td colspan=2 bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td colspan=2&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br><br>&lt;tr&gt;<br><br>&lt;tr&gt;<br>&lt;td colspan=3 bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br><br>&lt;tr&gt;<br><br>&lt;tr&gt;<br><br>&lt;tr&gt;<br>&lt;td colspan=4 bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br><br>&lt;tr&gt;<br>&lt;/table&gt;&lt;/center&gt;<br><br><br>Задание 6. Кирпичная стена.<br>&lt;center&gt;&lt;table width=60% border=0&gt;<br>&lt;tr&gt;<br>&lt;td bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;/tr&gt;<br>&lt;/table&gt;&lt;/center&gt;<br><br>&lt;center&gt;&lt;table width=60% border=0&gt;<br>&lt;tr&gt;<br>&lt;td bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;/tr&gt;<br>&lt;/table&gt;&lt;/center&gt;<br><br><br>&lt;center&gt;&lt;table width=60% border=0&gt;<br>&lt;tr&gt;<br>&lt;td bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;/tr&gt;<br>&lt;/table&gt;&lt;/center&gt;<br><br>&lt;center&gt;&lt;table width=60% border=0&gt;<br>&lt;tr&gt;<br>&lt;td bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;td bqcolor=”red”&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/td&gt;<br>&lt;/tr&gt;<br>&lt;/table&gt;&lt;/center&gt;<br><br><br>
 +
 +
<br>
 +
 +
 +
 +
 +
 +
<br>
Надіслав викладач інформатики Миловидов Юрій Олегович, университет «КРОК»  
Надіслав викладач інформатики Миловидов Юрій Олегович, университет «КРОК»  

Текущая версия на 09:21, 4 марта 2011

Гіпермаркет Знань>>Інформатика>>Інформатика 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 класу скачати, шкільна програма з інформатики, плани конспектів уроків

Источник — «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 клас > Етапи створення веб-сайтів > Етапи створення веб-сайтів. Практикуми, лабораторні, кейси

Авторські права | Privacy Policy |FAQ | Партнери | Контакти | Кейс-уроки

©  Автор системы образования 7W и Гипермаркета Знаний - Владимир Спиваковский

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

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

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