|
|
(4 промежуточные версии не показаны) |
Строка 1: |
Строка 1: |
| '''[[Гипермаркет знаний - первый в мире!|Гипермаркет знаний]]>>[[Информатика]]>>[[Информатика 10 класс. Полные уроки]]>>Информатика: Практическая работа. Размещение картинки и текста с помощью таблицы.''' | | '''[[Гипермаркет знаний - первый в мире!|Гипермаркет знаний]]>>[[Информатика]]>>[[Информатика 10 класс. Полные уроки]]>>Информатика: Практическая работа. Размещение картинки и текста с помощью таблицы.''' |
| | | |
- | <metakeywords>Информатика, класс, урок, на тему, 10 класс, Практическая работа. Размещение картинки и текста с помощью таблицы.</metakeywords><br> | + | <metakeywords>Информатика, класс, урок, на тему, 10 класс, Практическая работа. Размещение картинки и текста с помощью таблицы.</metakeywords><br> |
| | | |
- | '''Тема: Практическая работа. Размещение картинки и текста с помощью таблицы.'''
| + | == Тема == |
- | <br>
| + | |
| | | |
- | '''<u>Задание.</u>'''<u>Разместить на веб-странице несколько картинок и текст отформатированные с помощью таблицы по заданному примеру:</u> | + | *'''Практическая работа. Размещение картинки и текста с помощью таблицы.''' |
| | | |
- | <u></u><br>
| + | == Цель == |
| | | |
- | [[Image:Prakt1.jpg]]
| + | *научиться размещать картинки и текст с помощью таблицы |
| | | |
- | ''Ход выполнения.''
| + | == Ход урока == |
| | | |
- | '''1)''' Создаем таблицу с одной строки и двух столбцов. <br>
| + | === Задание === |
| | | |
- | < table ><br>
| + | *Разместить на [[Основные теги. Каркас веб-страницы. Полные уроки|веб-странице]] несколько картинок и текст отформатированные с помощью таблицы по заданному примеру: |
| | | |
- | < tr > < td ><br>
| + | <br> [[Image:Prakt1.jpg|400px|Практическая работа]] |
| | | |
- | < /td > <br>
| + | <br> |
| | | |
- | < td >< /td ><br>
| + | === Ход выполнения === |
| | | |
- | < /tr ><br> | + | '''1)''' Создаем таблицу с одной строки и двух столбцов. <br> |
| + | |
| + | < table ><br> |
| + | |
| + | < tr > < td ><br> |
| + | |
| + | < /td > <br> |
| + | |
| + | < td >< /td ><br> |
| + | |
| + | < /tr ><br> |
| | | |
| < /table > | | < /table > |
| | | |
- | <br> | + | <br> |
| | | |
- | '''2)''' Теперь все внимание на первый столбец. Нам нужно вставить в него две картинки. | + | '''2)''' Теперь все внимание на первый [[Практическая работа: Табличный процессор Microsoft Excel. Основные понятия. Ввод данных в таблицу|столбец]]. Нам нужно вставить в него две картинки. |
| | | |
| Делаем это с помощью уже известных команд для работы с изображениями (img src): | | Делаем это с помощью уже известных команд для работы с изображениями (img src): |
| | | |
- | < table border="2"> | + | < table border="2"> |
| | | |
- | < tr > | + | < tr > |
| | | |
- | < td >< img src="image.jpg" > < br > < img src="image1.jpg" >< /td > | + | < td >< img src="image.jpg" > < br > < img src="image1.jpg" >< /td > |
| | | |
- | < td >< /td > | + | < td >< /td > |
| | | |
- | < /tr > | + | < /tr > |
| | | |
| < /table > | | < /table > |
| | | |
| + | <br> |
| | | |
| + | Между картинками нужно поставить перенос (BR) для того, чтобы вторая [[Картинка-ссылка. Полные уроки|картинка]] разместилась под первой, а не возле нее. |
| | | |
- | Между картинками нужно поставить перенос (BR) для того, чтобы вторая картинка разместилась под первой, а не возле нее. Смотрим на результат: [[Image:Prakt2.jpg]]
| + | Смотрим на результат: |
| | | |
- | Кстати, для наглядности была включена опция, показывающая границы таблицы. Делается это при помощи атрибута border с минимальным значением «1».
| + | <br> [[Image:Prakt2.jpg|400px|Практическая работа]] |
| | | |
- | <br> '''3)''' Время заполнить второй столбец. Но для начала ограничим его ширину, так как нам не нужно, чтобы текст в нем растягивался на весь экран. | + | <br> Кстати, для наглядности была включена опция, показывающая границы [[Дидактический материал на тему: Электронные таблицы|таблицы]]. Делается это при помощи атрибута border с минимальным значением «1». |
| + | |
| + | '''3)''' Время заполнить второй столбец. Но для начала ограничим его ширину, так как нам не нужно, чтобы текст в нем растягивался на весь экран. |
| | | |
| Поэтому, присваиваем атрибуту width значение «600». Это значит, что второй столбец (вместе с текстом) будет растянут в ширину на 600 пикселей | | Поэтому, присваиваем атрибуту width значение «600». Это значит, что второй столбец (вместе с текстом) будет растянут в ширину на 600 пикселей |
| | | |
- | < table border="2" > | + | < table border="2" > |
| | | |
- | < tr > < td><img src="image.jpg" > < br > < img src="image1.jpg" > | + | < tr > < td><img src="image.jpg" > < br > < img src="image1.jpg" > |
| | | |
- | < td > < td width="600" > Наш текст < /td > | + | < td > < td width="600" > Наш текст < /td > |
| | | |
| < /tr > | | < /tr > |
Строка 66: |
Строка 79: |
| < /table > | | < /table > |
| | | |
| + | <br> [[Image:Prakt3.jpg|400px|Практическая работа]] |
| | | |
| + | <br> '''4) '''Сейчас текст просто «просить» [[Практическая робота на тему: Форматирование шрифта текста при создании документов|форматирования]]. Включаем в общий код знакомые нам команды для работы с текстом – параграф, выравнивание и перенос строки. |
| | | |
- | [[Image:Prakt3.jpg]]
| + | ''< td width="600" > < p align="justify"> Наш текст < /p > < /td >'' |
| | | |
- | '''4) '''Сейчас текст просто «просить» форматирования. Включаем в общий код знакомые нам команды для работы с текстом – параграф, выравнивание и перенос строки.
| + | <br> [[Image:Prakt4.jpg|400px|Практическая работа]] |
| | | |
- | ''< td width="600" > < p align="justify"> Наш текст < /p > < /td >'' | + | <br> '''5)''' Итак, теперь убираем видимость границ таблицы – удаляем из кода фразу «border="2"». А нашим последним действием будет ввод команды cellspacing, задающей расстояние между столбцами. Присваиваем ей значение «10». < table cellspacing="10" > |
| | | |
- | [[Image:Prakt4.jpg]] | + | <br> [[Image:Prakt5.jpg|400px|Практическая работа]] |
| | | |
- | '''5)''' Итак, теперь убираем видимость границ таблицы – удаляем из кода фразу «border="2"». А нашим последним действием будет ввод команды cellspacing, задающей расстояние между столбцами. Присваиваем ей значение «10». < table cellspacing="10" >
| + | <br> Конечный код для выполнения задания |
| | | |
- | [[Image:Prakt5.jpg]] | + | <br> [[Image:Prakt6.jpg|400px|Практическая работа]] |
| + | |
| + | <br> {{#ev:youtube|iQWe4VkHQIw}} |
| + | |
| + | <br> {{#ev:youtube|F7AXPyKRpQE}} |
| | | |
| <br> | | <br> |
| | | |
- | Конечный код для выполнения задания: [[Image:Prakt6.jpg]]
| + | ---- |
| + | |
| + | <br> ''Отредактировано и выслано преподавателем Киевского национального [http://xvatit.com/vuzi/ukraine-ukr/ университета] им. Тараса Шевченко Соловьевым М. С.'' |
| | | |
| <br> | | <br> |
| | | |
- | {{#ev:youtube|iQWe4VkHQIw}} {{#ev:youtube|Nffky8VRROk&feature=related}} {{#ev:youtube|F7AXPyKRpQE}}
| + | ---- |
| | | |
- | <br> ''Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.'' | + | <br> '''Над уроком работали''' |
| + | |
| + | Соловьев М. С. |
| + | |
| + | <br> |
| | | |
- | Если у вас есть исправления или предложения к данному уроку, [http://xvatit.com/index.php?do=feedback напишите нам].
| + | ---- |
| | | |
- | Если вы хотите увидеть другие корректировки и пожелания к урокам, смотрите здесь - [http://xvatit.com/forum/ Образовательный форум].
| + | <br> Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на [http://xvatit.com/forum/ '''Образовательном форуме'''], где на международном уровне собирается образовательный совет свежей мысли и действия. Создав [http://xvatit.com/club/blogs/ '''блог,'''] Вы не только повысите свой статус, как компетентного преподавателя, но и сделаете весомый вклад в развитие школы будущего. [http://xvatit.com/school/guild/ '''Гильдия Лидеров Образования'''] открывает двери для специалистов высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.<br> |
| | | |
| [[Category:Информатика_10_класс]] | | [[Category:Информатика_10_класс]] |
Поэтому, присваиваем атрибуту width значение «600». Это значит, что второй столбец (вместе с текстом) будет растянут в ширину на 600 пикселей
Соловьев М. С.