KNOWLEDGE HYPERMARKET


Практическая работа. Размещение картинки и текста с помощью таблицы. Полные уроки

Гипермаркет знаний>>Информатика>>Информатика 10 класс. Полные уроки>>Информатика: Практическая работа. Размещение картинки и текста с помощью таблицы.


Содержание

Тема

  • Практическая работа. Размещение картинки и текста с помощью таблицы.

Цель

  • научиться размещать картинки и текст с помощью таблицы

Ход урока

Задание

  • Разместить на веб-странице несколько картинок и текст отформатированные с помощью таблицы по заданному примеру:


Практическая работа


Ход выполнения

1) Создаем таблицу с одной строки и двух столбцов.

< table >

< tr > < td >

< /td >

< td >< /td >

< /tr >

< /table >


2) Теперь все внимание на первый столбец. Нам нужно вставить в него две картинки.

Делаем это с помощью уже известных команд для работы с изображениями (img src):

< table border="2">

< tr >

< td >< img src="image.jpg" > < br > < img src="image1.jpg" >< /td >

< td >< /td >

< /tr >

< /table >


Между картинками нужно поставить перенос (BR) для того, чтобы вторая картинка разместилась под первой, а не возле нее.

Смотрим на результат:


Практическая работа


Кстати, для наглядности была включена опция, показывающая границы таблицы. Делается это при помощи атрибута border с минимальным значением «1».

3) Время заполнить второй столбец. Но для начала ограничим его ширину, так как нам не нужно, чтобы текст в нем растягивался на весь экран.

Поэтому, присваиваем атрибуту width значение «600». Это значит, что второй столбец (вместе с текстом) будет растянут в ширину на 600 пикселей

< table border="2" >

< tr > < td><img src="image.jpg" > < br > < img src="image1.jpg" >

< td > < td width="600" > Наш текст < /td >

< /tr >

< /table >


Практическая работа


4) Сейчас текст просто «просить» форматирования. Включаем в общий код знакомые нам команды для работы с текстом – параграф, выравнивание и перенос строки.

< td width="600" > < p align="justify"> Наш текст < /p > < /td >


Практическая работа


5) Итак, теперь убираем видимость границ таблицы – удаляем из кода фразу «border="2"». А нашим последним действием будет ввод команды cellspacing, задающей расстояние между столбцами. Присваиваем ей значение «10». < table cellspacing="10" >


Практическая работа


Конечный код для выполнения задания


Практическая работа






Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.




Над уроком работали

Соловьев М. С.




Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на Образовательном форуме, где на международном уровне собирается образовательный совет свежей мысли и действия. Создав блог, Вы не только повысите свой статус, как компетентного преподавателя, но и сделаете весомый вклад в развитие школы будущего. Гильдия Лидеров Образования открывает двери для специалистов  высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.

Предмети > Информатика > Информатика 10 класс