<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Практична робота. Розміщення картинки і тексту за допомогою таблиці.</metakeywords>
<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Практична робота. Розміщення картинки і тексту за допомогою таблиці.</metakeywords>
-
==Тема==
+
== Тема ==
-
*'''Практична робота. Розміщення картинки і тексту за допомогою таблиці.''' <br>
+
-
==Мета==
+
*'''Практична робота. Розміщення картинки і тексту за допомогою таблиці.''' <br>
-
*Навчити розміщувати елементи веб-сторінки з використанням таблиць.
+
-
==Тип уроку==
+
== Мета ==
-
*практичний
+
-
==Завдання==
+
*Навчити розміщувати елементи [[Основные теги. Каркас веб-страницы. Полные уроки|веб-сторінки]] з використанням таблиць.
-
*Розмістити на веб-сторінці декілька картинок і текст, які відформатовані за допомогою таблиці за заданим прикладом
+
+
== Тип уроку ==
+
+
*практичний
+
+
== Завдання ==
+
+
*Розмістити на веб-сторінці декілька картинок і [[Оформление текста|текст]], які відформатовані за допомогою таблиці за заданим прикладом
<br>
<br>
Строка 21:
Строка 25:
<br>
<br>
-
==Хід виконання==
+
== Хід виконання ==
-
'''1)''' Створюємо таблицю з одного рядка і двох стовпців. <br>
+
'''1)''' Створюємо таблицю з одного рядка і двох [[Практическая работа: Табличный процессор Microsoft Excel. Основные понятия. Ввод данных в таблицу|стовпців]]. <br>
< table ><br>
< table ><br>
Строка 41:
Строка 45:
'''2)''' Тепер вся увага на перший стовпець. Нам треба вставити в нього дві картинки.
'''2)''' Тепер вся увага на перший стовпець. Нам треба вставити в нього дві картинки.
-
Робимо це за допомогою вже відомих команд для роботи із зображеннями (img src) :
+
Робимо це за допомогою вже відомих команд для [http://xvatit.com/busines/jobs-career/ роботи] із зображеннями (img src) :
< table border="2">
< table border="2">
Строка 61:
Строка 65:
Дивимося на результат:
Дивимося на результат:
-
+
<br> [[Image:Prakt2.jpg|480px|Приклад]]
-
[[Image:Prakt2.jpg|480px|Приклад]]
+
<br>
<br>
Строка 68:
Строка 71:
До речі, для наочності була включена опція, яка показує межі таблиці. Робиться це за допомогою атрибуту border з мінімальним значенням «1».
До речі, для наочності була включена опція, яка показує межі таблиці. Робиться це за допомогою атрибуту border з мінімальним значенням «1».
-
<br> '''3)''' Час заповнити другий стовпець. Але спершу обмежимо його ширину, оскільки нам не треба, щоб текст в ньому розтягувався на ввесь екран.
+
<br> '''3)''' Час заповнити другий стовпець. Але спершу обмежимо його ширину, оскільки нам не треба, щоб текст в ньому розтягувався на ввесь [http://xvatit.com/it/comp_primochki/ екран].
Тому, привласнюємо атрибуту width значення «600». Це означає, що другий стовпець (разом з текстом) буде розтягнутий на 600 пікселів в ширину.
Тому, привласнюємо атрибуту width значення «600». Це означає, що другий стовпець (разом з текстом) буде розтягнутий на 600 пікселів в ширину.
Строка 104:
Строка 107:
<br>
<br>
-
Кінцевий код для виконання завдання:
+
Кінцевий код для виконання [http://xvatit.com/vuzi/ завдання]:
<br>
<br>
Строка 114:
Строка 117:
{{#ev: youtube|iQWe4VkHQIw}}
{{#ev: youtube|iQWe4VkHQIw}}
+
<br> {{#ev: youtube|F7AXPyKRpQE}}
-
{{#ev: youtube|F7AXPyKRpQE}}
+
<br>
-
+
----
----
+
<br> '''Над уроком працювали'''
-
'''Над уроком працювали'''
+
Соловйов М. С.
-
+
-
Соловйов М. С.
+
+
<br>
----
----
-
+
<br> Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на [http://xvatit.com/forum/ '''Образовательном форуме'''], где на международном уровне собирается образовательный совет свежей мысли и действия. Создав [http://xvatit.com/club/blogs/ '''блог,'''] Вы не только повысите свой статус, как компетентного преподавателя, а и сделаете весомый вклад в развитие школы будущего. [http://xvatit.com/school/guild/ '''Гильдия Лидеров Образования'''] открывает двери для специалистов высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.<br>
-
Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на [http://xvatit.com/forum/ '''Образовательном форуме'''], где на международном уровне собирается образовательный совет свежей мысли и действия. Создав [http://xvatit.com/club/blogs/ '''блог,'''] Вы не только повысите свой статус, как компетентного преподавателя, а и сделаете весомый вклад в развитие школы будущего. [http://xvatit.com/school/guild/ '''Гильдия Лидеров Образования'''] открывает двери для специалистов высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.<br>
4) Тепер текст «просить», щоб його вирівняли відносно картинок. Включаємо в загальний код знайомі нам команди для роботи з текстом - параграф, вирівнювання і перенесення рядка.
< td width="600" > < p align="justify"> Наш текст < /p > < /td >
5) Отже, тепер прибираємо видимість меж таблиці - видаляємо з коду команду «border=». Нашою останньою дією буде введення команди cellspacing, яка задаватиме відстань між стовпцями. Привласнюємо їй значення «10». < table cellspacing=«10» >
Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на Образовательном форуме, где на международном уровне собирается образовательный совет свежей мысли и действия. Создав блог, Вы не только повысите свой статус, как компетентного преподавателя, а и сделаете весомый вклад в развитие школы будущего. Гильдия Лидеров Образования открывает двери для специалистов высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.