7- وسم الرابط وسماته | وسم الصورة | وسم الجداول Microsoft Expression Web | href | img | table

 فهرس الدروس  ( Microsoft Expression Web )

الدرس السابق (  Expression Web  )

لنتعلم المزيد من وسوم  html

 

وسم الروابط:
<a> </a>

 

هناك ما يسمى بـ attributes أي (سمات) بعبارة أخى خصائص الوسم.

name="value"

أي اسم السمة ثم يساوي ثم بين علامتي تنصيص القيمة سواء قيمة عددية أو نصية كعنوان موقع أو اسم ملف صفحة

سمة رابط :
يحتاج وسم الرابط إلى سمة أي خاصية , وهذه السمات عادة تكتب داخل وسم الفتح , وبعدها علامة يساوي = ثم التنصيص الذي يُكتب بداخله "القيمة" كـ عنوان الصفحة المراد ربطها بالنص.
مثال:

<a href="index.html">  أهلا وسهلا</a>

أي أن عبارة أهلا وسهلا أصبحت رابط .
حيث href تخبر المتصفح أين يذهب الزائر عند الضغط على الرابط
 كذلك الحال عن الرغبة في ربط موقع خارجي لكن سنستبدل الصفحة index.html بـ عنوان الموقع الخارجي
 مثال:

<a href="http://www.w3schools.com">  موقع برمجة</a>

من الأخطاء التي قد يقع فيها البعض هي نسيان علامتي التنصيص.

سمة فتح الرابط في نافذة جديدة : 
- تكتب هذه السمة أيضا داخل وسم الفتح بعد الرابط
- السمة هي target="_blank"
انتبه للشرطة التحتية قبل كلمة blank 

 <a href="http://www.w3schools.com" target="_blank">موقع برمجة</a>

وسم الصورة :
img وهي سمة ثنائية أي لها فتح وإغلاق
- لدى وسم الصورة سمات وهي سمة المصدر ثم يساوي ثم بين علامتي تنصيص القيمة 
عندما تكتب src في مايكروسوفت اكسبريشن تظهر علامة صغير تلقائيا لجلب صورة من الجهاز

مثال:

<img src="../ويب/punctuation.png"> </img>

هناك ملاحظات :
 أنه لا يوجد محتويات بين وسمي الصورة الفتح والاغلاق لان التطبيق اصبح داخل وسم الفتح
على وسم إغلاق الصورة حيث يمكن إغلاقها ليس بوسم الاغلاق

</img>

وإنما يمكن وضع شرطة مائلة داخل وسم الفتح نفسه بعد مسافة بسيطة مثال:

<img src="../ويب/punctuation.png" /> 

 لكن قد لا تعمل الطريقة الثانية مع كل المتصفحات

لربط رابط بالصورة , سيكون نفس طريقة ربط النص , ولكن بدلا من النص نجلب الصورة
تذكر طريقة ربط النص هنا

<a href="index.html">  أهلا وسهلا</a>

ما ستقوم به الآن هو: (كتابة وسم الصورة داخل وسم الرابط)
كتابة وسم الرابط ثم بداخله
بدلا من عبارة أهلا وسهلا ستطبق كود الصورة 

<a href="index.html">  <img src="../ويب/punctuation.png" />  </a>

وعليه أصبح هنا وسم الصورة كانها محتوى وسم الرابط لانها بين وسمي الفتح والاغلاق لوسم الرابط .

في برنامج اكسبريشن ويب , ستلاحظ خطوط زرقاء حول الصورة تدل على أنها اصبحت رابط .

وسم الجدول :

لإنشاء جدول بلغة html عليك أن تتعلم 3 وسوم هي 

الوسم الأساسي التغليفي الثنائي وهو table

وسم الصف tr أيضا ثنائي وهو اختصار لعبارة table row

وسم العمود td أيضا ثنائي  لـ لبيانات الخلية وهو اختصار لعبار table data
وسم th وهو أيضا للصف الريئسي (لست مضطرا لاستخدامه)  لـ رأس الخلية وهو عادة يُستخدم للأعمدة الأولى وهو اختصار لـ عبارة table header

مثلا لإنشاء 3 صفوف في الجدول ستحتاج إلى كتابة الوسم الثنائي tr  ثلاث مرات فتحا وإغلاقا

<table> 
     <tr>
     </tr>

     <tr>
     </tr>
 

     <tr>
     </tr>
 

 </table>

إلى الآن أصبح الجدول يحتوي على صفوف , إذا هي محتويات وسم الجدول .

لرأس الخلية سأكتب وسم td

إنشاء جدول

ثم بداخل كل وسم صف tr نكتب نكرر وسوم الاعمدة.

<table> 
<tr>

<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>

<tr>

<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
 

<tr>

<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
 

 </table>

 نبدأ بتعبئة المعلومات بداخل الجدول: 

<table> 
<tr>
<td> الفواكه</td>
<td>الخضروات </td>
<td> الحلويات</td>
<td> اللحوم</td>
</tr>


<tr>
<td> برتقال</td>
<td> كوسة</td>
<td>شوكلاته </td>
<td>دجاج </td>
</tr>

<tr>
<td> موز</td>
<td> كزبرة</td>
<td>دونات </td>
<td> سمك</td>
</tr>
</table>

ليكون بهذا الشكل : 

الفواكه	الخضروات	الحلويات	اللحوم
برتقال	كوسة	شوكلاته	دجاج
موز	كزبرة	دونات	سمك

يعتبر الجدول السابق في شكله الافتراضي حيث لا يوجد ألوان ولا خصائص أخرى.

أما عند تغيير الأعمدة الاولى واستبدال td بـ th

<table> 
<tr>
<th> الفواكه</th>
<th>الخضروات </th>
<th> الحلويات</th>
<th> اللحوم</th>
</tr>


<tr>
<td> برتقال</td>
<td> كوسة</td>
<td>شوكلاته </td>
<td>دجاج </td>
</tr>

<tr>
<td> موز</td>
<td> كزبرة</td>
<td>دونات </td>
<td> سمك</td>
</tr>
</table>

فسيكون الجدول كالتالي :
لو لاحظت النصوص في الصف الأول (فواكة , خضروات, الحلويات, اللحوم) ليست بالضبط كما في الجدول السابق فهي تبدو هنا أكبر 

الفواكه	الخضروات	الحلويات	اللحوم
برتقال	كوسة	شوكلاته	دجاج
موز	كزبرة	دونات	سمك

طبعا كانت تلك الطريقة يدوية لمعرفة وسوم إنشاء جدول , مع العلم أن ما يميز مايكروسوفت اكسبريشن هو وجود قائمة اسمها table خاصة بالجدول ولونه وعدد صفوف.. الخ

انتقل إلى الدرس التالي (  Microsoft Expression Web   )