<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Практична робота. Розміщення картинки і тексту за допомогою таблиці.</metakeywords>
<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Практична робота. Розміщення картинки і тексту за допомогою таблиці.</metakeywords>
-
<br> '''Тема: Практична робота. Розміщення картинки і тексту за допомогою таблиці.''' <br>
+
== Тема ==
-
'''Мета:''' Навчити розміщувати елементи веб-сторінки з використанням таблиць.
+
*'''Практична робота. Розміщення картинки і тексту за допомогою таблиці.''' <br>
-
'''Тип уроку:''' практичний
+
== Мета ==
-
'''<u>Завдання.</u>'''<u>Розмістити на веб-сторінці декілька картинок і текст, які відформатовані за допомогою таблиці за заданим прикладом:</u>
+
*Навчити розміщувати елементи [[Основные теги. Каркас веб-страницы. Полные уроки|веб-сторінки]] з використанням таблиць.
+
+
== Тип уроку ==
+
+
*практичний
+
+
== Завдання ==
+
+
*Розмістити на веб-сторінці декілька картинок і [[Оформление текста|текст]], які відформатовані за допомогою таблиці за заданим прикладом
<br>
<br>
-
[[Image:Prakt1.jpg]]
+
[[Image:Prakt1.jpg|480px|Приклад]]
<br>
<br>
-
''Хід виконання.''
+
== Хід виконання ==
-
'''1)''' Створюємо таблицю з одного рядка і двох стовпців. <br>
+
'''1)''' Створюємо таблицю з одного рядка і двох [[Практическая работа: Табличный процессор Microsoft Excel. Основные понятия. Ввод данных в таблицу|стовпців]]. <br>
< table ><br>
< table ><br>
Строка 37:
Строка 45:
'''2)''' Тепер вся увага на перший стовпець. Нам треба вставити в нього дві картинки.
'''2)''' Тепер вся увага на перший стовпець. Нам треба вставити в нього дві картинки.
-
Робимо це за допомогою вже відомих команд для роботи із зображеннями (img src) :
+
Робимо це за допомогою вже відомих команд для [http://xvatit.com/busines/jobs-career/ роботи] із зображеннями (img src) :
< table border="2">
< table border="2">
Строка 57:
Строка 65:
Дивимося на результат:
Дивимося на результат:
-
[[Image:Prakt2.jpg]]
+
<br> [[Image:Prakt2.jpg|480px|Приклад]]
<br>
<br>
Строка 63:
Строка 71:
До речі, для наочності була включена опція, яка показує межі таблиці. Робиться це за допомогою атрибуту border з мінімальним значенням «1».
До речі, для наочності була включена опція, яка показує межі таблиці. Робиться це за допомогою атрибуту border з мінімальним значенням «1».
-
<br> '''3)''' Час заповнити другий стовпець. Але спершу обмежимо його ширину, оскільки нам не треба, щоб текст в ньому розтягувався на ввесь екран.
+
<br> '''3)''' Час заповнити другий стовпець. Але спершу обмежимо його ширину, оскільки нам не треба, щоб текст в ньому розтягувався на ввесь [http://xvatit.com/it/comp_primochki/ екран].
Тому, привласнюємо атрибуту width значення «600». Це означає, що другий стовпець (разом з текстом) буде розтягнутий на 600 пікселів в ширину.
Тому, привласнюємо атрибуту width значення «600». Це означає, що другий стовпець (разом з текстом) буде розтягнутий на 600 пікселів в ширину.
Строка 79:
Строка 87:
<br>
<br>
-
[[Image:Prakt3.jpg]]
+
[[Image:Prakt3.jpg|480px|Приклад]]
-
+
-
<br>
+
<br>
<br>
Строка 89:
Строка 95:
''< td width="600" > < p align="justify"> Наш текст < /p > < /td >''
''< td width="600" > < p align="justify"> Наш текст < /p > < /td >''
-
[[Image:Prakt4.jpg]]
+
[[Image:Prakt4.jpg|480px|Приклад]]
<br>
<br>
Строка 97:
Строка 103:
<br>
<br>
-
[[Image:Prakt5.jpg]]
+
[[Image:Prakt5.jpg|480px|Приклад]]
<br>
<br>
-
<br>
+
Кінцевий код для виконання [http://xvatit.com/vuzi/ завдання]:
-
+
-
Кінцевий код для виконання завдання:
+
<br>
<br>
-
[[Image:Prakt6.jpg]]
+
[[Image:Prakt6.jpg|480px|Приклад]]
<br>
<br>
Строка 113:
Строка 117:
{{#ev: youtube|iQWe4VkHQIw}}
{{#ev: youtube|iQWe4VkHQIw}}
+
<br> {{#ev: youtube|F7AXPyKRpQE}}
-
{{#ev: youtube|F7AXPyKRpQE}}
+
<br>
+
----
+
<br> '''Над уроком працювали'''
-
<br> ----
+
Соловйов М. С.
-
'''<u>Над уроком працювали</u>'''
+
<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» >
Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на Образовательном форуме, где на международном уровне собирается образовательный совет свежей мысли и действия. Создав блог, Вы не только повысите свой статус, как компетентного преподавателя, а и сделаете весомый вклад в развитие школы будущего. Гильдия Лидеров Образования открывает двери для специалистов высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.
