<metakeywords>Информатика, класс, урок, на тему, 10 класс, Практическая работа. Размещение картинки и текста с помощью таблицы.</metakeywords><br>
<metakeywords>Информатика, класс, урок, на тему, 10 класс, Практическая работа. Размещение картинки и текста с помощью таблицы.</metakeywords><br>
-
'''Тема: Практическая работа. Размещение картинки и текста с помощью таблицы.''' <br>
+
==Тема==
+
*'''Практическая работа. Размещение картинки и текста с помощью таблицы.'''
-
'''<u>Задание.</u>'''<u>Разместить на веб-странице несколько картинок и текст отформатированные с помощью таблицы по заданному примеру:</u>
+
==Цель==
+
*научиться размещать картинки и текст с помощью таблицы
-
<u></u><br>
+
==Ход урока==
-
[[Image:Prakt1.jpg]]
+
===Задание===
+
+
*Разместить на веб-странице несколько картинок и текст отформатированные с помощью таблицы по заданному примеру:
+
+
+
[[Image:Prakt1.jpg|400px|Практическая работа]]
-
<br>
-
''Ход выполнения.''
+
===Ход выполнения===
'''1)''' Создаем таблицу с одной строки и двух столбцов. <br>
'''1)''' Создаем таблицу с одной строки и двух столбцов. <br>
Строка 53:
Строка 59:
Смотрим на результат:
Смотрим на результат:
-
[[Image:Prakt2.jpg]]
-
<br>
+
[[Image:Prakt2.jpg|400px|Практическая работа]]
+
Кстати, для наглядности была включена опция, показывающая границы таблицы. Делается это при помощи атрибута border с минимальным значением «1».
Кстати, для наглядности была включена опция, показывающая границы таблицы. Делается это при помощи атрибута border с минимальным значением «1».
-
<br> '''3)''' Время заполнить второй столбец. Но для начала ограничим его ширину, так как нам не нужно, чтобы текст в нем растягивался на весь экран.
+
'''3)''' Время заполнить второй столбец. Но для начала ограничим его ширину, так как нам не нужно, чтобы текст в нем растягивался на весь экран.
Поэтому, присваиваем атрибуту width значение «600». Это значит, что второй столбец (вместе с текстом) будет растянут в ширину на 600 пикселей
Поэтому, присваиваем атрибуту width значение «600». Это значит, что второй столбец (вместе с текстом) будет растянут в ширину на 600 пикселей
Строка 73:
Строка 79:
< /table >
< /table >
-
<br>
-
[[Image:Prakt3.jpg]]
+
[[Image:Prakt3.jpg|400px|Практическая работа]]
-
<br>
-
-
<br>
'''4) '''Сейчас текст просто «просить» форматирования. Включаем в общий код знакомые нам команды для работы с текстом – параграф, выравнивание и перенос строки.
'''4) '''Сейчас текст просто «просить» форматирования. Включаем в общий код знакомые нам команды для работы с текстом – параграф, выравнивание и перенос строки.
Строка 85:
Строка 87:
''< td width="600" > < p align="justify"> Наш текст < /p > < /td >''
''< td width="600" > < p align="justify"> Наш текст < /p > < /td >''
-
[[Image:Prakt4.jpg]]
-
<br>
+
[[Image:Prakt4.jpg|400px|Практическая работа]]
+
'''5)''' Итак, теперь убираем видимость границ таблицы – удаляем из кода фразу «border="2"». А нашим последним действием будет ввод команды cellspacing, задающей расстояние между столбцами. Присваиваем ей значение «10». < table cellspacing="10" >
'''5)''' Итак, теперь убираем видимость границ таблицы – удаляем из кода фразу «border="2"». А нашим последним действием будет ввод команды cellspacing, задающей расстояние между столбцами. Присваиваем ей значение «10». < table cellspacing="10" >
-
<br>
-
[[Image:Prakt5.jpg]]
+
[[Image:Prakt5.jpg|400px|Практическая работа]]
-
<br>
-
-
<br>
Конечный код для выполнения задания
Конечный код для выполнения задания
-
<br>
-
[[Image:Prakt6.jpg]]
+
[[Image:Prakt6.jpg|400px|Практическая работа]]
-
<br>
{{#ev:youtube|iQWe4VkHQIw}}
{{#ev:youtube|iQWe4VkHQIw}}
Строка 112:
Строка 108:
{{#ev:youtube|F7AXPyKRpQE}}
{{#ev:youtube|F7AXPyKRpQE}}
-
<br> ''Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.''
----
----
-
'''<u>Над уроком работали</u>'''
-
Соловьев М. С.
+
''Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.''
4) Сейчас текст просто «просить» форматирования. Включаем в общий код знакомые нам команды для работы с текстом – параграф, выравнивание и перенос строки.
< td width="600" > < p align="justify"> Наш текст < /p > < /td >
5) Итак, теперь убираем видимость границ таблицы – удаляем из кода фразу «border="2"». А нашим последним действием будет ввод команды cellspacing, задающей расстояние между столбцами. Присваиваем ей значение «10». < table cellspacing="10" >
Конечный код для выполнения задания
Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.
Над уроком работали
Соловьев М. С.
Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на Образовательном форуме, где на международном уровне собирается образовательный совет свежей мысли и действия. Создав блог, Вы не только повысите свой статус, как компетентного преподавателя, но и сделаете весомый вклад в развитие школы будущего. Гильдия Лидеров Образования открывает двери для специалистов высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.