صفحة البيت | מס טלפון 04 – 6046227 | מס' פקס 04 – 8303539

كود كتابة صفحات المواقع – h t m l

موقع كتابة الكود (1) | (2) | (3) | (4)

الجداول

من أسئلة امتحانات المفمار – في مادة الـ html

v الجداول

טבלה – جدول – Table

وسم الجدول: <table>

وسم سطر جدول: <tr> (من الكلمات table row, سطر جدول)

وسم بيانات (خلايا) جدول: <td> (من الكلمات table data, قيمة جدول)

المبنى العام لتكوين جدول:

مثال: جدول مكوّن من سطرين وكل سطر من ثلاث خانات (أعمدة)

<tr>

<tr>

<tr>

</table>

وسوم تحديد الجدول:

<table>

وسم تكوين الجدول. يمثل البيانات مع أكثر من بعد واحد.

<tr>

يمثل صف او سطر (שורה) من الخلايا في الجدول.

(من كلمتي table row, سطر جدول)

<td>

يمثل خلية البيانات في الجدول (תא).

(من كلمتي table data, قيمة جدول)

إضافة حدود للجدول:

<table border="1"

لإحفاء الإطار (البرواز) نبدل 1 بــ 0 .

مع الوسم <table> يمكن وضع style يمكننا من التحكم بالجدول مثل: عرض الجدول، لون الخط، لون خلفية الجدول وغير ذلك.

أمثلة:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<table style="border: 1px solid black;">

وضع إطار (حدود) للجدول. يمكن تغيير اللون. وضع القيمة 0 تخفي الإطار.

أنواع الإطار: dotted، double و- solid

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<table style=color: red";>

الكود يقوم بكتابة محتوى الجدول باللون الأحمر.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<table border="1" style="width: 300">

الجدول يتم عرضه بمقياس 300 نقطة. ممكن استعمال height: 1px أو كلاهما.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<table border="1" style="float: right">

الجدول يتم عرضه من يمين الشاشة (ولعرضة على اليسار استخدم left).

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<table border="1" style="padding:10">

المسافة بين محتويات الخلايا وحدودها

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<table border="1" style="border-collapse: separate">

حدود الخلايا متقاربه. (للتباعد collapse)

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<table border="1" style= "text-align: right;">

يقوم بتحديد القيم التي في الخلايا بشكل أفقي: left, right, or center

إثراء: دمج الخلايا ودمج الأعمدة

عنوان الخلية

قيمة الخلية

· عدد الخلايا في العامود التي تدمج colspan

مستعمل فقط مع <td>

· عدد الخلايا في الصف التي تدمج لهذه الخلية rowspan

مستعمل فقط مع <td>

مسائل مع جداول

أسئلة خفيفة

أ) أي من هذه العناصر كلها عناصر تتعلق بإنشاء جدول؟

a) <table> <tr> <tt>

b) <table> <head> <tfoot>

c) <table> <tr> <td> P

d) <thead> <body> <tr>

الحل: ( C )

---------------------------------------------------------------------------------------------------------------------------------

ب) يمكن عمل خلية في الجدول بواسطة الوسم:

a) <td>

b) <th>

c) الخيار الأول والثاني

d) لا توجد اجابة صحيحة

الحل: ( a )

---------------------------------------------------------------------------------------------------------------------------------

ج) يمكن عمل صف جديد في الجدول بواسطة الوسم:

a) <th>

b) <td>

c) <tr>

d) لا توجد اجابة صحيحة

الحل: ( C )

---------------------------------------------------------------------------------------------------------------------------------

سؤال:

كتب طلاب صفحة انترنت لها خلفية صفراء وتحوي الجدول التالي:

أمامكم محتوي الصفحة. أكملوا الناقص.

<body dir="rtl" style="background-color: yellow ">

<table border="1">

<tr>

<td> 4 </td> <td> 3 </td> <td> 2 </td> <td> 1 </td>

</tr>

</table>

</body></html>

------------------------------------------------------------------------------------------------------------------------------

) معطى الجدول التالي:

	الفصل 1	الفصل 2
عربي	76	82
انجليزي	80	75

في كتابة كود الــ html التابع للصفحة المذكورة:

أ.	كم مرة سوف تستخدم العنصر <tr>...</tr>	3 مرات
ب.	كم مرة سوف تستخدم العنصر <td>...</td>	9 مرات (يوجد 3 أسطر وبكل سطر 3 أعمدة)
ج.	نريد من الجدول أن يظهر بدون إطار. أكمل:	<table border = "0">
د.	نريد محاذاة الجدول بحيث يظهر في منتصف الصفحة. للقيام بذلك، سنحتاج إلى تغليف وسم الجدول في <p>. أكمل:	<p align ="center"> … </p>

مواد غير مرتبة – قيد التحرير

ادخل الكود التالي واحفظ الملف وأجب عن الأسئلة:

1) ظهر جدول فيه ____ أعمدة و ______ أسطر

2) <tr> عرف بداية ______

3) الوسم <td></td> ظهر 3 مرات. وهو يمثل: _______

4) عنوان الجدول مزج بثلاثة أعمدة بسبب الوسم: _______

5) عنوان الجدول مزج بثلاثة أسطر بسبب الوسم: _______

6) الصورة umbrella.jpg ظهرت في السطر ___ وفي العمود ______

7) النص Google كُتب في السطر ______ وفي العمود ________

8) عند الضغط على Google _________

9) الصورة picture2.jpg ظهرت في السطر _____ وفي العمود _____.

10) عند الضغط على picture2.jpg ________

مهمة:

نريد ان نصمم صفحة تعرض الجدول التالي:

بل غيتس	ستيف جوبس	مارك تسوكربرغ

موسس ميكروسوفت	مؤسس ابل	مؤسس الفيس بوك
Bill Gates	Steve Jobs	Mark Zuckerberg

<html>

<head>

<title>جداول</title>

</head>

<body dir="rtl">

<table border="1">

<tr>

<th>بيل جيتس</th>

<th>ستيف جوبس</th>

<th>مارك تسوكربرغ</th>

</tr>

<tr>

<td><img src="bill.jpg" ></td>

<td><img src=" stiv.jpg" ></td>

<td><img src="mark.jpg" ></td>

</tr>

<tr>

<td>مؤسس ميكروسوفت</td>

<td>مؤسس ابل</td>

<td>مؤسس فيسبوك</td>

</tr>

<tr>

<td><a href="bill.html">بل جيتس</td>

<td><a href="stev.html">ستيف جوبس</td>

<td><a href="mark.html">مارك تسوكربرغ</td>

</tr>

</table> </br></br></br>

</body>

</html>

------------------------------------------------------------------------------------------------

<html>

<head>

<title>My first page</title>

</head>

<h1 style='color: red'> انتخابات 1973</h1>

<table>

<td> الحزب </td>

<td> عدد المقاعد </td>

</tr>

<tr> <td> المفدال </td>

</tr>

</tr>

<tr>

</tr>

</table>

<br/> من هو الحزب الفائر في عام 1973?

<input type="button" value="افحص اجابتي!"

onclick="alert('إجابة غير صحيحة!');" />

</body></html>

مهمة تلخيصيه

حضر موقع يحتوي على الصفحات التالية:

· صفحة رئيسية تحتوي على صورة واعلان تجاري لمكان تجاري وروابط لصفحات.

ثانوية بالموقع (كل صفحة ثانوية تحتوي على رابط رجوع للصفحة الرئيسية).

· تحتوي الصفحات الثانوية علي:

1. صور (الضغط على الصورة يظهرها بحجم كبير)

2. جدول منتجات المكان التجاري مع صور.

3. نصوص منسّقة (استخدم العناوين في وسط الصفحة، جملة مبرزة، جملة تحته اخط و....).

مدرسة قفطان حلبي الإعدادية – دالية الكرمل - Copywrite – 2019