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="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» >


Приклад


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


Приклад







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

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




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

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