Версия 18:49, 2 ноября 2012

Гіпермаркет Знань>>Інформатика>>Інформатика 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="image 1.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="image 1.jpg" >

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

< /tr >

< /table >

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

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

5) Отже, тепер прибираємо видимість меж таблиці - видаляємо з коду команду «border=». Нашою останньою дією буде введення команди cellspacing, яка задаватиме відстань між стовпцями. Привласнюємо їй значення «10». < table cellspacing=«10» >

Кінцевий код для виконання завдання:

Над уроком працювали

Соловйов М. С.

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