HTML الدرس الخامس فى

Images

-وهى عملية ادارج الصور داخل صفحات الويب والتاج الخاص بها هو <img> وهو ليس لة تاج نهاية ويحتوى هذا التاج على مجموعة من(attributes)واهمها:

الشرح

Attributes

وبة يتم تحديد مكان الصورة التى ستدرج الى صفحة الويب

src

وبة يتم تحديد عرض للصورة

width

وبة يتم تحديد طول للصورة

height

وبة يتم تحديد اطار للصورة

border

عند الوقوف على الصورة بمؤشر الفارة تظهر كلمة نصية تحددها انت بهذة الخاصية

alt

والان مع مثال يوضح لنا استخدام تاج ادراج الصور:

<!DOCTYPE html>

<html>

<body>

<img src=”images/picture.jpg” alt=”my picture” width=”99″ height=”130″>

</body>

</html>

نلاحظ انة مع خاصية (src) فاننا نحدد لة المكان الموجود بة الصورة وهو هنا اسمة(images) ثم نضيف لة اسم الصورة وامتدادها وهى هنا (picture.jpg).

Tables

– وهى عملية ادارج الجداول داخل صفحة الويب ويتكون الجدول من صفوف واعمدة ويمكن ان تضيف عنوانين للجدول حيث تاج الجدول هو </table><table> وتاج الصف هو </tr><tr> وتاج العمود هو <td> </td> كما ان تاج العنوان هو <th> </th> وللجدول مجموعة من (attributes) اهمها (width,border) لتحديد عرض الجدول واطار الجدول والان مع مثال يشرح كيفية انشاء جدول بلغة (HTML).

<!DOCTYPE html>

<html>

<body>

<table width=”200″ border=”1″>

<tr>

<th>Header 1</th>

<th>Header 2</th>

</tr>

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

</body>

</html>

ويظهر الكود السابق فى صفحة الويب بالشكل التالى :

Header 1

Header 2

row 1, cell 1

row 1, cell 2

row 2, cell 1

row 2, cell 2

والان جرب المثال السابق السابق بنفسك.

Advertisements

ضع تعليقك هنا

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: