هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟

ابتدأنا
كتابة المستند بكلمة html داخل قوسين زاوية < > لتصبح <html> هذا يسمى بمعرّف
البداية اي اننا اخبرنا هنا متصفح الويب انه هنا يبدأ عنصر ال html .. وكنا
قد انهينا المستند بنفس الكلمة ولكن زدنا قبلها داخل القوسين الشحطة
المائلة / <html/> وهي علامة اقفال
المعرّف وهنا نخبر متصفح الويب انه انتهى هذا العنصر بعد ان اقفلناه

ما معنى كلمة html

يتم انشاء كافة صفحات ويب باستخدام لغة النص التشعيبي (Hypertext Markup
Language)
واختصارها هو html وهي تماما لاصق تلتصق فيها صفحات الويب مع بعضها البعض
..
لغة ال html تعد لغة مرتة وقوية و في نفس الوقت هي لغة سهلة الفهم وليست
معقدة ولا تحتاج الى ادوات خاصة بل يكفينا كما راينا في مثالنا استخدام
برنامج المفكرة Notepad الذي يخص نظام الويندوز .
ولغة ال html تحتاج في داخلها الى مجموعة من المعرفات تصف كيفية تنظيم
العناصر على الصفحة مثلا تنظيم النص الصور الخ .. والتي سنأتي علي اهمها
بالتفصيل لاحقا ان شاء الله..

في داخل العنصر html وضعنا معرّفين اساسيين وهما head و body هما الرأس
والجسد لصفحة الويب
فالمعرف head يتضمن معلومات العنوان الذي يصف المستند ويصف بالتالي محتويات
صفحة الويب هذه التي اقوم بانشائها "سنأتي على شرحها بالتفصيل .. فأنا
مثلا عندما اقوم بتصميم صفحة اقوم بتصنيفها انها موقع شخصي فيه شعر وموسيقى
وتصميم الخ واسم الصفحة وهذه لا تظهر للعيان وانما احتاجها للارتباط على
مواقع البحث
وعنصر ال body وفيه تكون كافة محتويات صفحة الويب التي تظهر للعيان كالخطوط
والصور وتنظيم الصفحة والجداول الخ .. ايضا سناتي على شرحها بالتفصيل .
ولا حظ ايضا اننا كتبنا المعرفين داخل اقواس زاوية .. ووضعنا لهما معرّف
البداية <head> ومعرف النهاية
</head> وكذلك الامر ينطبق على المعرف head
نستنج مما سبق ان
-المعرف html هو الذي يحيط بكامل المستند
-المعرف head هو الذي يتضمن معلومات عنوان المستند
-المعرف body هو الذي يحيط بمكونات صفحة ويب .
لنعد الان الى الصفحة البيضاء الخالية التي قمنا بتأسيسها لا يحزنك انها
فارغة فقريبا ستمتلىء وتصبح صفحة البداية لموقعك القادم ان شاء الله ..
غدأ ان شاء الله نكمل مع تطبيق جديد .
تحياتي

الى الاخت ياسمينة اذا اردت نماذج فعندي
الكثير من html حتى java script لانو تخصصي هذا المجال ولغات برمجية اخرى
....ولكن اصعب ما هو موجود عملية تصميم الجداول بلغلة html فهي تقلب الراس
قليلا
شكرا لك ...على الموضوع
انا حاولت رفع ملف من تصميمي لكني فشلت يجب ان ابحث عن وسيلة رفع
للمنتدى...

الاخ MotasemCom اشكر متابعتك ..
الاخ موسى لم افهم تماما كلمة " عندي نماذج" هل تقصد انها صفحات من تصميمك
انت ؟ ان كانت كذلك نعم نحب ان نطلع على بعض منها بالنسبة للجافا سكريبت
هي من ضمن اللغات التي سأعرج عليها من ضمن هذا الموضوع مع بعض الشروحات لها
ومازال الوقت مبكرا عليها .. بالنسبة لموضوع الجداول لا اعلم اين الصعوبة
التي تجدها فيها ولكن للجداول اسرار ان عرفتها واتقنتها طوعتها لك
وبالتاكيد ان اي تصميم لا يخلو ابدا من الجداول ولنا وقفة مطولة معها ان
شاء الله بالنسبة لملف التصميم الخاص بك عليك ان ترفعه على اي موقع مجاني
خاص للتصميم وهنا سازودك بلينك لموقع مجاني وهو اكثر من رائع بامكانك ان
تقيم عليه موقع خاص بك وكنت ساطرحه ايضا في فقرات اخرى واشرح طريقة التسجيل
به وكيفية رفع الملفات اليه ولكن بامكانك الان استخدامه
http://www.freewebtown.com

[size=16]الخطوة
الثانية
توجه الى المكان الذي قمت بحفظ الصفحة السابقة فيه "اي الصفحة التي أنشاتها
في التمرين السابق " والتي اسميتها انا على سبيل المثال yasminah افتح
الصفحة توجه الى view في اعلى الصفحة ومنه الى source اضغط سيفتح لك
المستند النصي الخاص بهذه الصفحة والذي قمت بإنشائه في التمرين السابق
هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ Get-9-2008-do7a_com_50tplgx7

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ Get-9-2008-do7a_com_50tplgx7

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ Get-9-2008-do7a_com_mwd6kh8c

الان قم بتظليل المحتويات الموجودة بالمستند ومن ثم ديليت وانسخ الكود
التالي والصقه مكانه

[/size]

كود HTML:
<html>
<head>
<title>my web</title>
</head>
<body bgcolor=blue>
</body>
</html>
اغلق
الصفحة من علامة الاكس بالاعلى سيظهر لك مربع يسالك هل ترغب في حفظ
التغييرات اضفط yes وقم بتحديث الصفحة من refresh
سترى ان خلفية الصفحة اصبح لونها ازرق ..

http://www.freewebtown.com/jordan_am/yasminah.html

شكرا
لكي
هدا النموذج العندي لعبة صغيرة او مجرد تسلية ...
عليك ادخال الاسم بحروف صغيرة وتضغط ارسال سوف يظهر مربع انه اسم جيد واذا
ادخلت اسم بحروف كبيرة يظهر لك انه غير فعال ... للمبتدئين فقط
http://www.freewebtown.com/mousa909/name.html

والكود في المرفقات
تصميم موسى

اهلا
بكم جميعا مرة اخرى
شرح الخطوة الثانية

لنلقي نظرة مرة اخرى على الكود :

كود HTML:
<html>
<head>
<title>my web</title>
</head>
<body bgcolor="blue">
</font>
</body>
</html>
اضفنا للمعرف head احد عناصره الاساسية وهو title ولشرحه بطريقة
بطريقة مبسطة هو معرف عنوان الصفحة ف head لابد ان يتضمن هذا المعرف ولاحظ
ايضا اننا ابتدئنا العنصر title بمعرف بداية ونهاية <> </>

اضفنا في داخل معرف title عنوان الصفحة على سبيل المثال كتبت عنوان لهذه
الصفحة my web انظر الى الشريط العلوي للمتصفح حتى ان اسم الصفحة قد ظهر لك
كذلك في الشريط السفلي فهذا عمل title

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ Get-9-2008-do7a_com_kn86xflc

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ Get-9-2008-do7a_com_kn86xflc

من ثم لاحظ اننا اضفنا ضمن العنصر body عنصر وجعلناه في داخله وهو عنصر
bgcolor وهي اختصار ل background color اي الخلفية الملونة هنا اعطينا امر ل
body ان يلون خلفية الصفحة واسمينا اللون باسمه وهو الازرق blue ولا حظ
اننا وضعنا اشارة = ( bgcolor= blue)..
بالنسبة لقيم الوان سواء في الخلفية او في النصوص او في اي مكان في الصفحة
تستطيع ان تسمي اللون بعينه كما فعلنا الان مع اللون الازرق او ان تعطي
قيمة رقمية بدلا عنه والقيم الرقمية للالوان تعطيكي مساحة اوسع من ناحية
مشتقات الالوان فمثلا الازرق القيمة الرقمية له 3333FF ويجب ان نسبق القيمة
الرقمية بإشارة #

كود HTML:
<html>
<head>
<title>my web</title>
</head>
<body bgcolor=#3333FF>
</body>
</html>
في هذا اللينك اعددت صفحة فيها قيم الالوان تستطيع ان تجرب اللون
الذي تريده قبل ان تعتمده في متصفحك قم فقط بالضغط على قيمة اللون فتتغير
الخلفية في حال اعتمدت على لون ما انسخه كما هو من مربع قيمة اللون والصقه
في متصفحك :

http://www.freewebtown.com/jordan_am/color.htm

لكن ماذا لو اردت ان تكون خلفية الصفحة صورة وليس لونا .. انظر الى الصفحة :

http://www.freewebtown.com/jordan_am/yasminah.html

لقد قمت بتعديل الخلفية ووضعتها صورة بدلا من الالوان

كود HTML:
<html>
<head>
<title>my web</title>
</head>
<body background="b5.jpg">
</font>
</body>
</html>
هنا اعطيت ال body امرا بأني اريد ال background صورة ولاحظ ايضا
اني استبدلت كلمة bgcolor ب كلمة background فالاولى خاصة بالالوان
والثانية خاصة بالصورة ولاحظ ايضا ان وضعت قوسين وفتحت علامة اقتباس وضعت
في داخلها اسم الصورة + الامتداد ثم اغلقت قوسين الاقتباس ولمعرفة امتداد
الصورة اضغط كليك يمين على الصورة ثم الخصائص properties فيظهر لك اسم
الصورة وامتدادها مثلا b5.jpg والافضل دائما استعمال الصور ذات الامتداد
اما jpg او gif ولكل منهما اختصاص سناتي على ذكره لاحقا ان شاء الله .
للحصول على الخلفيات ال background تجدها في كثير من المواقع فقط اعمل
عملية بحث في جوجل او غيره ليخر ج لك الكثير من المواقع التي تقدم ال
background

يوجد على كل لينك background قم بتحميلهما على جهازك واجري فيهما تمرينا
في متصفحك ..
http://fwt.txdnl.com/4-10/j/o/jordan_am/background2.jpg

http://fwt.txdnl.com/4-10/j/o/jordan_am/yellowback.gif

في الفقرة التالية ان شاء الله ننتقل الى الخظة الثالثة .
تحياتي

الموضوع
ممتع للغاية واتمنى من الاخوة الاعضاء

ان يلاحظو اثر ((tags)) ((الوسوم)) وللتوضيح اكثر

الوسوم ((tags)) : هي عبارة عن اوامر في لغة html تستخدم لغرض محدد

والمثال الذي وضعته ياسمينة يوضح اكثر ما اقصد

<body bgcolor="blue> ال bgcolor تدعى وسم وهي شفيرة او امر يكتب
لاعطاء لون للخليفة ,,,
و background ايضا وسم ,,

وهناك العديد العديد من تلك الوسوم التي لكل واحدة منها اثر مختلف ,,

اشكرك مرة اخى ,,بانتظار المزيد

السلام عليكم مرة اخرى
ملاحظة عن الخطوة السابقة في الخلفيات : قم بفتح ملف جديد واحفظ به الصفحة
التي تقوم بعملها واحفظ فيه الصور التي تريد استخدامها حتى لا تستخدم
المسارات المتباعدة في اداراج الصور وبالطبع فيما بعد ان شاء الله سنتعلم
كيفية تنظيم الملف كامل وادراج ملفات الصور داخل ملف التصميم الخاص بك
وافضل ان تقوم بفتح الملف في داخل ملف My Web Site الموجودة داخل ملف My
Documents ان لم يكن ملف My Web Site موجود قم انت بإنشائه داخل ال My
Documents

الاخ MotasemCom شكرا لك ..

الخطوة الثالثة :
في هذه الخطوة سنتعلم تنسيق الخطوط

كود HTML:
<html>
<head>
<title>my web</title>
</head>
<body bgcolor="#FFFF99">

<h1>1-Welcome to my website</h1> <br>
<p>welcome to my website</p>
<h2>2-welcome to my website</h2>
<p>welcome to my website</p>
<h3>2-welcome to my website</h3>
<p>welcome to my website</p>
<br> welcome to my website

</body>
</html>

ستصبح الصفحة لديك كهذه

http://www.freewebtown.com/jordan_am/yasminah.html

في التمرين السابق اضفنا شيء جديد للعمل لاحظ انه عندما اردنا الكتابة
فطبعا الكتابة كانت في الجسم body كما قلنا سابقا ان ملف htmlالذي لدينا
يتكون من :
اولا

كود HTML:
<html> </html>
ابتدئنا
بها لتعريف المستعرض ان الملف هو ملف html واحطناهما بعلامتين فتح واغلاق
ومابين العلامة الاولى والاخيرة تاتي كل محتويات صفحة ويب اي نبدأ المستند
بالعلامة المفتوحة وعند الانتهاء نضعها بالعلامة المقفلة </>.
اضفنا بعد ذلك ال head

كود HTML:
<head>
<title>my web</title>
</head>
وقلنا
انه بمثابة الراس لصفحة الويب ويسمح لك الرأس باخبار اشياء عن صفحة الويب
وال title والتي تظهر عنوان لك العنوان في اعلى الصفحة .
كلهم طبعا بين علامتين <> فتح </> اغلاق اذا اغفلت علامة من
تلك العلامات فلن يظهر لك شيء في الصفحة ويخبرك المتصفح ان هناك خطأ .
واضفنا كذلك :

كود HTML:
<body></body>
وقلنا
ال body هو الجسم وكل محتويات الصفحة التي تظهر توضع في ال body >

الان في الخطوة الثالثة دخلنا الى خطوة اخرى مهمة الا وهي الكتابة لاحظ معي
الكود لنشرح الان ما جاء فيها والاضافات التي تمت فيها

كود HTML:
<body bgcolor="#FFFF99">
اخترنا
لون قيمة لون الخلفية

كود HTML:
<h1>1-Welcome to my website</h1> <br>
ابتدائنا
الكتابة في الجسم body احطنا الجملة الاولى welcome to my wbsiteبعلامات
جديدة اولها :

كود HTML:
<h1></h1>
النص
الذي بينهما هو العنوان الرئيسي ارجع للصفحة المعروضة حتى ترى تأثيرها
ومن ثم

كود HTML:
<h2></h2>
تستعمل
لعنوان فرعي رئيسي لاحظ ايضا انهما محاطتان بعلامتين فتح <> عند
بداية الجملة </> واغلاق عند نهاية الجملة على فرض انك نسيت اغلاقها
سيحدث خطأ عندك وهو ان بقية العناوين لن تستجيب الا لحجم العنوان الاول
فانتبه دائما للعلامات ال (tags ) او المغانط >
ثم ان هناك علامة جديدة ايضا وهي :

كود HTML:
<p></p>
هذه
العلامة كما رايت في الكود هي تحيط بكتلة من النص التي تمثل فقرة بجملة
واحدة او اكثر وايضا ال <p> حاول ان تضع الكود التالي في المستند
وانظر لترى النتيجة :

كود HTML:
<p>welcome to my website</p>
<p>welcome to my website</p>
<p>welcome to my website</p>
لاحظ
انني في هذا الكود كتبت جملة واحطتها بهذه العلامة ثم كتبت جملة اخرى
واحطتها بنفس العلامة وهكذا فتلاحظ النتيجة ان كل جملة ظهرت على سطر لوحدها
حتى لو انك نسختهم بجانب بعضهم البعض فعند معاينى الصفحة ستخرج كل جملة
على سطر وبين كل سطر مسافة معينة منسقة وهذا يعني انك لو كتبت في ال html
جملة وضغطت انتر لتنزل سطر وتكتب الجملة الاخرى لن يستجيب المستعرض لتلك
الحركة فعند عرض الصفحة ستظهر جميعها على سطر واحد اذا ما الذي يفصل بين
الاسطر والجمل مرت معنا الان علامةهي <p> <p/> وهناد ايضا
علامة اخرى وقد مرت معنا في التمرين وهي <br> هذه العلامة عندما
تنتهي من جملة وتريد الانتقال الى جملة جديدة في سطر جديد تضع هذه العلامة
<br> لاحظ ان هذه العلامة لا تحتاج الى علامة اغلاق </> .
اذا نستنتج انه هناك معرّفات
html هي معرفات حاوية container tags والتي تحتاج معرّف بداية ونهاية
<> و </> وهناك معرّفات خالية empty tags هي عبارة عن معرفات
مستقلة لا تحتاج الى معرّف نهاية مثال عليها معرّف ال <br> الذي مر
معنا الان .
انصح المتعلمين دائما بالتجرية وحتى يثبت التمرين لديهم ان يقوموا بتجربته
مرة ومرتين وثلاثة حتى يشعرون انه اصبح تمام لديهم زشيء مهم ايضا بعد
التجربة الاولى التي نضعها وهي نسخ الكود افضل ان تعود اليها مرات اخرى
وتكتبه بيدك حتى تأخذ يدك عليه ولا بد من ان تخطىء مرة واثنتين وتنسى
احيانا ولكن من الخطأ ستتعلم وتكتشف امور اخرى .
نتابع مع الخطوط ان شاء الله في الفقرة التالية

نتابع
اليوم الحديث عن الخطوط
قم بفتح مستند جديد من ال Notepad واحفظه كما تعلمنا في الخطوة الاولى او
قم بالتعديل على صفحتك السابقة من view ثم من source كما تعلمنا في الخطة
الثانية ..وانا افضل مع كل اضافة عمل مستند جديد ..
قم بنسخ الكود التالي والصقه في المستند

كود HTML:
<html>
<head>
<title>my font</title>

</head>
<body bgcolor="#FFFFCC" >
<p align="center">
<font face="Tahoma" size="3" color="#CC00CC">
<b>1-welcome to my website</b><br>
<i>2-welcome to my website </i> <br>
<u>3-welcome to my website</u><br><br>
<strike>3-welcome to my website</strike><br>

</font>

</p>

</body>
</html>

انظر النتيجة داخل هذه الصفحة
http://www.freewebtown.com/jordan_am/yasminah1.html

من خلال المثال السابق نلاحظ اننا اضفنا معرّفات جديدة وهي تابعة
للمعرف<font> في الجزء body
قبل ان أبدأ بالكتابة اخترت ان تكون جهة الكتابة هي التوسيط اي توسيط النص
في منتصف الصفحة
ودلالتها

كود HTML:
<p align="center">
ابتدئتها
بالمعرف <p> والذي قلنا عنه سابقا انه يتضمن فقرة انه يتضمن فقرة من
عدة جمل وهو معرّف
حاوي يحتاج لاقفال الوسم </> راجع التمرين سابقا ولاحظ اين وضعنا
علامة اقفال وسم المعرّف <p>.

ثم وضعنا بداخل الوسم نفسه امر التوسيط

كود HTML:
align="center"

alignاي ان الاصطفاف او الاتجاه (=) واشارة يساوي تعني النتيجة (center) اي التوسيط
محاطة باشارتين اقتباس " "
(جيد ان نعتاد على علامات الاقتباس لانها سترد معنا كثيرا فيما بعد ).
اذا نتيجة الامر محاطة بعلامتين اقتباس .
ثم فتحنا وسم جديد وكتبنا بداخله المعرف font اي
الخط وهو الخاص بتنسيق الخطوط

كود HTML:
<font face="Tahoma" size="3" color="#CC00CC">
ثم
ابتدئنا نختار انواع التنسيق التي نريد .. اخترنا المعرف face وهو يستخدم لتحديد نوع الخط الذي تريد ان تستعمله = النتيجة ، اخترت انا على سبيل المثال خط التاهوما
tahoma بين علامتين اقتباس .
وهنا يجب ان نورد ملاحظة مهمة : هناك مجموعات خطوط اساسية بالجهاز كخط
التاهوما وغيره وهناك انواع خطوط تقوم بانزالها انت على جهازك اضافية الان
الخط الذي تختاره هنا ان لم يكن من الخطوط الاساسية فلن تستطيع ان تقرأه
جميع الاجهزة يظهر عندك بالجهاز ولايظهر عندي بالجهاز وانما يقراه جهازي
كخط عادي لانه لايوجد لدي نوع الخط هذا بالجهاز ولكن طبعا هناك طريقة لعرض
الخطوط التي بجهازك وتستطيع ان تقراه كافة الاجهزة ولكنها في المراحل
المتقدمة ان شاء الله التي سناتي على ذكرها وهي مرحلة اوراق الانماط او
stylesheet لكن مبدئيا احرص على ان لا تقع في هذه الاشكالية .

ثم وضعت معرف size وهو معرّف حجم الخط الذي اريد = النتيجة ، بين قوسين اقتباس " "
اخترت الخط حجم ثلاثة 3 .. حاول ان تعمل تدريب لاحجام الخطوط في كل مرة
ممكن ان تزيد او تنقص في ارقام الاحجام .

ثم وضعت معرّف اللون color = النتيجة بين قوسين
اقتباس " " قيمة اللون . ثم اغلقت الوسم > .

ابتدأت الجملة الاولى بمعرف جديد وهو معرّف<B>
او ><b> وهو معرّف حاوي container tags
اي يحتاج الى علامتين فتح واغلاق وهو معرّف مسؤول عن الخط العريض اي يعطي
الخطم حجم عريض

كود HTML:
<b></b>

كود HTML:
<b>1-welcome to my website</b><br>
لاحظ
كيف ابتداناه بالمعرف الجديد <b > ثم
الجملة ثم اقفلنا المعرّف </b> ثم علامة ال
<br> التي تنقلني الى سطر جديد .

الجملة الثانية ابتداتها ايضا بمعرّف جديد وهو <i>
وهو المسؤول عن ميلان الخط اي يعطيني جملة بخط مائل

كود HTML:
<i>2-welcome to my website </i ><br>
وينطبق
عليها ما انطبق على المعرّف <b> انها
معرّف حاوي ويحتاج الى اقفال .

ثم الجملة الثالثة ابتداتها بالمعرّف <u>
هو المسؤول عن اعطاء خط تحت الجملة

كود HTML:
<u>3-welcome to my website</u><br>
وينطبق
عليه شروط المعرّفين السابقين .
الجملة الرابعة ابتداتها بمعرف جديد ايضا وهو <strike> وهو معرف
مسؤول عن الخط داخل الجملة

كود HTML:
<strike>3-welcome to my website</strike><br>
وينطبق
عليه شروط المعرّفات السابقة .

وفي النهاية لاحظ معي عملية اقفال العرّفات التالية كيف ابتدئنا نقفلها :

كود HTML:
</font>

</p>

</body>
</html>
في
البداية في اعلى الصفحة كتبنا المعرّف <p> ومن ثم المعرّف
<font> في النهاية بعد الانتهاء من هذه الفقرة اقفلنا ال
<font> اولا ثم ال<p> بالطبع لان الفونت كانت متضمنة داخل ال
المعرّف <p> .

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

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

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

كود HTML:
<html>

<head>
<title>ترقيم القوائم</title>
</head>

<body bgcolor="#E9BCD2">
<ul>

<li> 1(علامة ترقيم دائرية مصمتة)</li>

<li> 2(علامة ترقيم دائرية مصمتة)

</ul>

<br>

<ul type="circle">

<li> 1(علامة ترقيم دائرية مفرغة)</li>
<li>2(علامة ترقيم دائرية مفرغة)
</ul>

<br>

<ul type="square">
<li> (علامة ترقيم مربعة مصمتة)</li>
</ul>

<br>

<ol>
<li>تعداد رقميي</li>
<li>تعداد رقمي</li>

</ol>

<br>

<ol type="a">
<li>تعداد حرفي صغير</li>
<li>تعداد حرفي صغير</li>
</ol>

<br>

<ol type="A">
<li>تعداد حرفي كبير</li>
<li>تعداد حرفي كبير</li>
</ol>

<br>

<ol type="I">
<li>تعداد ارقام رومانية كبيرة</li>
<li>تعداد</li>
<li>تعداد</li>
<li>تعداد</li>
<li>تعداد</li>
</ol>

<br>

<ol type="i">
<li>تعداد ارقام رومانية صغيرة</li>
<li>تعداد</li>
<li>تعداد</li>
<li>تعداد</li>
</ol>

</body>

</html>
ستاظهر لك الصفحة كهذه الصفحة :

http://www.freewebtown.com/jordan_am/yasminah3.htm

في الفقرة التالية سنشرح ما قمنا به ان شاء الله

الان
مالذي قمنا به ؟؟

انشأنا مستند نصي جديد واسميناه ترقيم القوائم ونسخنا الكود السابق
وادخلناه بالمستند

كود HTML:
<html>

<head>
<title>ترقيم القوائم</title>
</head>
اخترنا لون الخلفية ووضعناها داخل وسم ال body

كود HTML:
<body bgcolor="#E9BCD2">
لا تجزع من طول الشيفرة السابقة فالربما تشعر انها مشوشة بعض الشيء
ولكن ما ان تفهم مابداخلها حتى تشعر انها جعلت لتنظيم شيفرة قائمتك بحيث
يملك كل معرف قائمة سطره الخاص به وان كل عنصر قائمة جديد يملك سطراً خاصا
به .

نبذة عن معرّفنا الجديد قبل ان نبدأ بالشرح التفصيلي

معرّفات القوائم المرتبة وغير المرتبة The Ordered and Unordered List Tags
يعتبر معرّف القائمة المرتبة المرقمة <OL>
ومعرّف القائمة غير المرتبة <UL> اكثر انواع المعرّفات شيوعا في الاستخدام ضمن
صفحات الويب فمها يمتازان بعموميتهما وبساطة الاستخدام بالاضافة الى سهولة
المعالجة .. فانا عندما اريد ان اسرد عدة نقاط اقوم بترقيمهم يدويا :
1-
2-
3-
واحيانا انسى انا الى اي رقم وصل التعداد معي فاعود الى النقطة السابقة
للتاكد من الرقم الذي يليه .
في ال HTML انت فقط تضع المعرّف الذي تختاره لتعداد نقاطك مع بداية كل سطر
وهو يقوم عنك بمهمة التنظيم والترتيب وسرد الارقام او الاحرف بالتتالي بشكل
مرتب ومنظم .
لنلقي نظرة على القسم الول من الشيفرة :

كود HTML:
<ul>

<li> 1(علامة ترقيم دائرية مصمتة)</li>

<li> 2(علامة ترقيم دائرية مصمتة)

</ul>
ابتدأنا القائمة بعنصر المعرّف <UL>
وهو معرّف القوائم غير المرتبة . وهو معرّف حاوي يقوم بتعريف قائمة بداية
ونهاية قائمة غير مرتبة

كود HTML:
<ul></ul>
اذا لم تقم باغلاقه اي باستخدام معرف النهاية بعد الانتهاء من
التعداد فستستمر قائمتك الى الابد !!.

عندما ابتدأنا بسرد محتوى القائمة اتبعناه بمعرّف <LI>
أحاطت بالجملة الاولى

كود HTML:
<li> 1(علامة ترقيم دائرية مصمتة)</li>
وهو معرّف عنصر القائمة ويتم استخدامه قبل سرد كل نقطة في القائمة .
ملاحظة مهمة المعرّف <LI> لك ان تقوم
بإضافة معرّف نهاية له

كود HTML:
</li>
ولك ايضا ان لا تغلقه فبعض محررات ال HTML تقوم بإضافة معرّف نهاية
ويبقى استخدامها اختياري .
لاحظ اني في الفقرة الاولى استخدمته كمعرّف حاو وفي الفقرة الثانية لم
ادخله كمعرف حاو

كود HTML:
<li> 2(علامة ترقيم دائرية مصمتة)
حيث ان مصممو مواصفات ال HTML اعتبرو ان وجود معرف <LI> آخر لا
يبدأ بعنصر القائمة التالي وحسب بل ويشير تلقائيا الى نهاية عنصر القائمة
السابق فالمثالين السابقين يعتبران مثالين صحيحين .

علامات الترقيم التي تسبق فقرة تعداد كما في المثال السابق تظهر على شكل
دوائر مصمتة .
ماذا لو اردت ان تظهر تعداد قائمتي دوائر مفرغة ؟! لاحظ معي التالي وهي
الفقرة الثانية في التعداد في الصفحة :

كود HTML:
<ul type="circle">

<li> 1(علامة ترقيم دائرية مفرغة)</li>
<li>2(علامة ترقيم دائرية مفرغة)
</ul>
عندما افتتحت الوسم <UL> توسعت بداخله واضفت له سمة type وهي تعني القيمة الافتراضية التي اريد اختيارها
واتبعتها بسمة بعد ال = بسمة circleبين
علامتي اقتباس "وعلامتي الاقتباس هنا ايضا اختيارية وبعض المحررات تضيفها
تلقائي ". سمة ال circle تخبر المتصفح اني اريد التعداد على شكل دوائر
مفرغة ..

كود HTML:
<ul type="circle">

وايضا اوردت في النقطتين مثالين لمعرّف <li> حاو في النقطة الاولى
والنقطة الثانية غير حاو .

في الفقرة الثالثة اوردت المربع المصمت لتعداد قائمتي :

كود HTML:
<ul type="square">
<li> (علامة ترقيم مربعة مصمتة)</li>

</ul>
كل ما اضفته هو سمة square بعد السمة type في داخل وسم <ul>
وسمة square تفيد ان التعداد يأتي على شكل مربع مصمت .

ثم اخترت التعداد الرقمي للفقرة الرابعة وجاءت الشيفرة لها كالتالي :

كود HTML:
<ol>
<li>تعداد رقميي</li>
<li>تعداد رقمي</li>

</ol>
لاحظ اننا هنا ابتدأنا بمعرّف جديد وهو <ol> وينطبق عليه ما
انطبق على المعرّف <ul> السابق من انه معرف حاو يحتاج الى معرّف
بداية ونهاية :

كود HTML:
<ol></ol>
وهو مختص بأنواع التعداد الرقمي تركتها فارغة لم اضف لها السمة type
وهي بشكل انسيابي ستقوم بتعداد الفقرة على شكل ارقام 1- 2- الخ ..
وايضا احطت فقرات التعداد بمعرّف <li> هو ثابت بكل تعدادات القوائم
الداخلية .

ثم اخترت في الفقرة الخامسة ان يكون التعداد على شكل احرف انكليزية صغيرة :
a.b.c

كود HTML:
<ol type="a">
<li>تعداد حرفي صغير</li>
<li>تعداد حرفي صغير</li>
</ol>
كل ما قمت باضافته هو السمة type في ادخل المعرّف <ol> واضفت
بعد ال = حرف a بين علامتي اقتباس وهي تفيد انني اريد التعداد هنا بالاحرف
الانكليزية الصغيرة المتتابعة .

في الفقرة التي يليها اخترت التعداد باحرف انكليزية كبيرة A.B.C:

كود HTML:
<ol type="A">
<li>تعداد حرفي كبير</li>
<li>تعداد حرفي كبير</li>
</ol>
لاحظ انني كل ما قمت به هو استبدا حرف a الصغير بحرف A الكبير

كود HTML:
<ol type="A">
ثم اخترت التعداد باحرف رومانية كبيرة

كود HTML:
<ol type="I">
<li>تعداد ارقام رومانية كبيرة</li>
<li>تعداد</li>
<li>تعداد</li>
<li>تعداد</li>
<li>تعداد</li>
</ol>
كل الذي فعلته هو فقط استبدال حرف ال A بحرف I كبيرة ويبدأ معي
التعداد الروماني تلقائيا .
ثم اخترت في الفقرة الاخيرة التعداد الروماني باحرف صغيرة

كود HTML:
<ol type="i">
<li>تعداد ارقام رومانية صغيرة</li>
<li>تعداد</li>
<li>تعداد</li>
<li>تعداد</li>
</ol>
كل ما فعلت اني قمت باستبدال حرف ال I الكبير بحرف i صغير ويبدا
التعداد الروماني باحرف صغيرة تلقائي عند كل بداية فقرة تعداد جديدة .

كود HTML:
<ol type="i">
ارجو من الاخوة الراغبين بالتعلم باجراء تدريبات بكتابة يدهم في
المستندات وحفظ الملاحظات في دفتر خاص ..
في الدرس المقبل سنتعلم امرين مهمين ان شاء الله الاول الجداول والثاني
تنسيق الصور وهما من اكتر الاستخدامات التي نستخدمها في التصاميم ..
اتمنى فعلا ان تكون الامور سابقة واضحة تماما .
تحياتي لكم جميعا

[size=21]الجداول Tables

مقدمة لابد منها (اقرأها جيدا قبل ان تنطلق ):
الجداول ذلك الشيء الرائع والذي يساعدني في تخطيط صفحة الويب عندما تدخل
الى اي صفحة موقع ويب وتجدها مرتبة ومنظمة مقسمة الى عندة اجزاء كجزء البنر
وجزء اليساري او اليميني الذي يحوي قوائم محتويات الموقع والجزء الوسطي او
حتى لنلقي نظرة على هذا المنتدى في صفحته الرئيسية هو عبارة عن تخطيط
جداول قاموا بتقسيم الصفحة به .. فمع الجداول أصبح لمؤلفي ويب قدرة اكبر
على التحكم بتخطيط صفحاتهم فهي تسمح لك بترتيب النص الصور في الصفحة بأية
طريقة .
الجداول في غاية المرونة فهي تستطيع إنشاء اي نوع من تخطيط الصفحة الذي
يرغب به مؤلف الويب ارفض قول البعض ان الجداول عيبها الوحيد هو التعقيد
واحب استبدالها بكلمة ان الجداول هي بنية قوية واذا فهمناها طوعناها
وتصادقنا معها .. يمكن ان يظهر تعنت الجداول في المحررات التي تقدم بنية
الجداول جاهزة كبرنامج الفرونت بيج فعندما تريد اجراء اي تعديل على الجدول
او خلية من الجدول تجد صعوبة في بعض الاحيان واحيانا اخرى تجد ان الجدول لا
يستجيب لك وهذا طبعا كله لانه قد يغيب او غاب عنك بعض الامور الاساسية
والرئيسية في بناء الجدول ..
تخيل الجدول دائما انه كالطفل يقول لك ان لم تفهم كل الذرات
(المعرّفات)التي بداخلي لن استجيب لك ..
ولن اؤدي واجبي على اكمل مايرام . هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ No%5B1%5D

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ No%5B1%5D

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

سنبدأ هنا ببداية جدول بسيط ذو خلية واحدة قم بإنشاء مستند نصي جديد ضع به
الشيفرة التالية :

كود HTML:
<html>

<head>

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

<body bgcolor="#FEE2A9">

<div align="center">

<table border="1" width="20%" height="20%" bgcolor="#CC3300">
<tr>
<td></td>
</tr>
</table>

</div>

</body>

</html>
احفظه في الملف الخاص بك لهذه التمارين واذهب اليه افتحه ستجد ان
الصفحة ظهرت معك كالاتي :

http://www.freewebtown.com/jordan_am/yasminah4.htm

قمنا بهذا التمرين ببناء جدول بسيط جدا يتكون من خلية واحدة .. الان لنشرح
ما قمنا به :
ابتدانا المستند بكتابة لغة ال html وفي ال head في داخل ال title حددنا
اسم الصفحة وهي الجداول ثم اقفلنا ال head:

كود HTML:
<html>

<head>

<title> tablesالجداول</title>
</head>
ثم افتتحنا ال body وحددنا الخلفية bgcolor بالقيمة الرقمية #FEE2A9:

كود HTML:
<body bgcolor="#FEE2A9">
قبل ان ابدا برسم الجدول اعطيت امر التوسيط اي انني اريد الجدول
يكون متوسط في الصفحة

كود HTML:
<div align="center">
بامكانك طبعا تغيير الاتجاه حسب ما ترغب فإن اردته على الجهة اليمين
تستبدل كلمة center ب كلمة right او بمحاذاة اليسار فتضع كلمة left.

ومن ثم اعطيت امرا ببناء جدول فاستفتحه بالشيفرة التالية :

كود HTML:
<table border="1" width="20%" height="20%" bgcolor="#CC3300">
في داخل الوسم كتبت table وهي تفيد انني بدأت بتخطيط جدول ومن ثم
حددت بعض المواصفات لهذا الجدول وهي ال الحدود borderاي الحدود الخارجية
لهذا الجدول اردت ان تكون قيمتها هي الرقم 1 وهي السماكة ولك ان تزيد (حاول
ان تزيد سماكة الحدود في التدريب وارجع في كل مرة لترى الفرق بأن تكتب
ارقام من الواحد الى ماشئت ) .
ثم حددت عرض الجدول والمساحة التي اريد ان يحتلها هذا الجدول عن طريق
المعرّف width اخترت القيمة المئوية 20% اي عشرين بالمئة من حجم الصفحة
الكامل ، ولك ان تختار الحجم اما بالبكسل px او بالنسبة المئوية وانصح في
البداية هنا ان تختار الطول والعرض بالنسبة المئوية الى ان تتقن احجام
الجدول . ثم انتقلت الى تحديد ارتفاع الجدول height وايضا اخترته بالقيمة
المئوية 20% من قيمة مساحة الصفحة الاجمالية . وفي النهاية حددت لون خلفية
لهذا الجدول عن طريق المعرّف bgcolor واخترت له القيمة الرقمية #CC3300 .
هذا كله جاء داخل وسم ال table .

ثم اعطيت امر ال <tr>

كود HTML:
<tr>
ماهو معرّف ال <tr> ؟ ال <TR> هو معرّف لإنشاء اسطر بين
خلايا الجدول اي يقسم الجدول الى اسطر التي تم انشاؤها بواسطة المعرّف :

كود HTML:
<td></td>
والمعرّف TD يحوي النصوص التي تقوم بتشكيل محتويات الجدول .

من ثم اغلقت المعرّف <TR>

كود HTML:
</tr>
اتبعته باغلاق المعرّف table :

كود HTML:
</table>
واتبعته باغلاق معرّف div الذي حددنا بداخله اتجاه الجدول في الصفحة

كود HTML:
</div>
وفي النهاية اغلقنا ال body وال html

كود HTML:
</body>

</html>
لنعد الان لتعريف كل معرّف جديد مر معنا اليوم :

كود HTML:
<table></table>
معرّف ال <TABLE>

the <table> tag-creating table يستخدم لإضافة جدول الى مستند ويب
وهو معرّف حاو اي يحتاج الى معرّف بداية

كود HTML:
<table>
ويحتاج الى معرف نهاية واقفال :

كود HTML:
</table>
ومعرّف النهاية هو اجباري .

والجدول يتضمن معرّفين اساسيين اولهما المعرّف <tr>:

كود HTML:
<tr></tr>
the <tr> tag-table rows وهو معرّف
سطر الجدول اي لانشاء اسطر بين الخلايا وهو معرّف حاوي بالرغم من ان معرّف
النهاية اختياري لكن لا احبذ ابدا تركه ومن الافضل استخدامه لان هناك بعض
البرامج ان لم تغلقه تعطيك خطأ . وايضا غير ذلك اغلقه لرتابة الشيفرة حتى
تعلم اين بدأت واين انتهيت .

كود HTML:
</tr>
ثم المعرّف <td> معرّف معطيات
الجدوال وهي تحيط النصوص التي تقوم بتشكيل محتويات جدولك وهو ايضا معرّف
حاوي ينطبق عليه ما ينطبق على معرّف ال <tr>

كود HTML:
<td>
لايهم باي حجم حروف تكتب في داخل مستند ال html لك ان تكتب بحروف
كبيرة او صغيرة فالنتيجة واحد ‘ واورد هنا ملاحظة كنت قد اوردتها سابقا ان
مستند ال html لا يعترف بالفراغات التي تتركها داخل المستند اي انها لاتظهر
في صفحة الويب نحن نترك الفراغ حتى يسهل علينا التعرف الى محتويات الشيفرة
ولكن الانتقال من سطر الى سطر جديد في المستند كما اوردنا سابقا هو
المعرّف <br> والمعرف <p> والسبيس هو كلمة  

كود HTML:
<p> 
مشوارنا مع الجدوال مازال في البداية فقط وفي الخطوة التالية سننتقل
الى تطوير الجدول اكثر .
تحياتي للجميع[/size]

الان
لنعد الى الجداول :
سنقوم الان بتصميم جدول من عدة اسطر وعدة خلاية او خانات .. حتى نفهم تماما
عمل ال المعرّف <tr> والمعرّف <td>.
قم بفتح مستند جديد كما في الخطوة الاولى والخطوة الثانية من بداية الموضوع
.. وقم بنسخ الكود التالي وضعه في مستندك وقم بحفظه :

كود HTML:
<html dir="rtl">

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

<body bgcolor="#C0CFEF">

<br>
<div align="center">
<table border="2" width="400px">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

</div>

</body>

</html>
الان قم بعمل ريفريش لمتصفحك حتى ترى النتيجة كهذه :
http://www.freewebtown.com/jordan_am/yasminah6.htm

لقد قمنا بإنشاء جدول من عدة اعمدة وعدة خلايا .. لنلقي نظرة مرة اخرى على
الكود لنتعلم ما قمنا به ونتعلم بطريقة عملية اكثر على عمل كل معرّف مر
معنا ..

اولا ابتدأنا المستند بكتابة شيفرة ال html ولاحظ معي الجديد بها :

كود HTML:
<html dir="rtl">
الجديد بها هو dir=rtl تخبر المستعرض أن الكتابة ستكون من اليمين إلى
اليسار ..

ثم الhead وتضمن ال title

كود HTML:
<head>
<title>جداول 2</title>
</head>
ومن ثم ال body مع تحديد لون الخلفية :

كود HTML:
<body bgcolor="#C0CFEF">
ثم وضعت معرّف ال br اعطيت به فاصل من اعلى الصفحة حتى لايكون الجدول
ملتصق على الحافة العلوية للصفحة .. ثم أعطيت أمر التوسط للجدول قبل أن
ابدأ به " اي اني اريد الجدول في منتصف الصفحة فإشارة التوسط هذه ستحيط
بكامل جدولي :

كود HTML:
<div align="center">
ثم ابتدأنا بإنشاء الجدول بإعطاء امر ال table وحددنا له ال border
وهو الحد الخارجي للجدول اعطيناه القيمة 2 وايضا حددت له العرض اي المساحة
التي سيشغلها الجدول في الصفحة وحددت القيمة في ال البكسل وهي 400px:

كود HTML:
<table border="2" width="400px">
ثم بدأت برسم اول سطر في الجدول باستدعاء المعرّف <tr>:

كود HTML:
<tr>
والان اريد تقسيم هذا السطر الى عدة خلايا اخترت تقسيمة الى ست خلايا
فاستدعيت صاحب المهمة وهو المعرّف <td> وكتبته ست مرات متتالية :

كود HTML:
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
وكانت النتيجة انه قام بتقسيم السطر الى ست خلايا واخترت طبعا ان
اكتب كل بداية معرف ونهاية على سطر حتى استطيع تمييز ان اردت المراجعة في
شيء ولا تختلط علي الامور .. فكما قلنا سابقا ان لغة ال html لا تعترف
بالمساحات الفارغة التي تتركها داخل المستند وانما تعترف بالشيفرة فقط
وتقوم بتنفيذها .. طبعا تلاحظ اني اضفت الكيان الرمزي الاخ المحاسنة اهلا
بك ،، يسعدني مرورك ،، بالتأكيد ان احتجت لمساعدة لن أتاخر في طلب المساعدة
..
شكرا لك .

الان لنعد الى الجداول :
سنقوم الان بتصميم جدول من عدة اسطر وعدة خلاية او خانات .. حتى نفهم تماما
عمل ال المعرّف <tr> والمعرّف <td>.
قم بفتح مستند جديد كما في الخطوة الاولى والخطوة الثانية من بداية الموضوع
.. وقم بنسخ الكود التالي وضعه في مستندك وقم بحفظه :

كود HTML:
<html dir="rtl">

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

<body bgcolor="#C0CFEF">

<br>
<div align="center">
<table border="2" width="400px">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

</div>

</body>

</html>
الان قم بعمل ريفريش لمتصفحك حتى ترى النتيجة كهذه :
http://www.freewebtown.com/jordan_am/yasminah6.htm

لقد قمنا بإنشاء جدول من عدة اعمدة وعدة خلايا .. لنلقي نظرة مرة اخرى على
الكود لنتعلم ما قمنا به ونتعلم بطريقة عملية اكثر على عمل كل معرّف مر
معنا ..

اولا ابتدأنا المستند بكتابة شيفرة ال html ولاحظ معي الجديد بها :

كود HTML:
<html dir="rtl">
الجديد بها هو dir=rtl تخبر المستعرض أن الكتابة ستكون من اليمين إلى
اليسار ..

ثم الhead وتضمن ال title

كود HTML:
<head>
<title>جداول 2</title>
</head>
ومن ثم ال body مع تحديد لون الخلفية :

كود HTML:
<body bgcolor="#C0CFEF">
ثم وضعت معرّف ال br اعطيت به فاصل من اعلى الصفحة حتى لايكون الجدول
ملتصق على الحافة العلوية للصفحة .. ثم أعطيت أمر التوسط للجدول قبل أن
ابدأ به " اي اني اريد الجدول في منتصف الصفحة فإشارة التوسط هذه ستحيط
بكامل جدولي :

كود HTML:
<div align="center">
ثم ابتدأنا بإنشاء الجدول بإعطاء امر ال table وحددنا له ال border
وهو الحد الخارجي للجدول اعطيناه القيمة 2 وايضا حددت له العرض اي المساحة
التي سيشغلها الجدول في الصفحة وحددت القيمة في ال البكسل وهي 400px:

كود HTML:
<table border="2" width="400px">
ثم بدأت برسم اول سطر في الجدول باستدعاء المعرّف <tr>:

كود HTML:
<tr>
والان اريد تقسيم هذا السطر الى عدة خلايا اخترت تقسيمة الى ست خلايا
فاستدعيت صاحب المهمة وهو المعرّف <td> وكتبته ست مرات متتالية :

كود HTML:
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
وكانت النتيجة انه قام بتقسيم السطر الى ست خلايا واخترت طبعا ان
اكتب كل بداية معرف ونهاية على سطر حتى استطيع تمييز ان اردت المراجعة في
شيء ولا تختلط علي الامور .. فكما قلنا سابقا ان لغة ال html لا تعترف
بالمساحات الفارغة التي تتركها داخل المستند وانما تعترف بالشيفرة فقط
وتقوم بتنفيذها .. طبعا تلاحظ اني اضفت الكيان الرمزي   الذي
يعطيني فاصلة احب هذا الكيان واستعمله كثيرا فهو يساعدني في كثير من
الاحيان ..

ثم اغلقت وسم ال <tr> معلنة انتهاء السطر الاول :

كود HTML:
</tr>
ثم ابتدأت برسم السطر الثاني مبتدأة بالمعرّ ف <tr> وايضا
قسمته الى ست خانات كما في السطر الاول :

كود HTML:
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
وهكذا دواليك في جميع الاسطر .
حاول ان تصمم جدولا بنفسك بعدة اسطر وضع عدد الخانات في كل سطر يختلف عن
الذي قبله وانظر النتيجة ..
اذا الان في هذا الشرح المبسط تعلمنا اكثر عن انشاء الجداول وقد تدربنا
عليه معا اكثر الان سننتقل الى متعة تصميم الجداول بالالوان والايطارات
والخلفيات وسندخل في معرّفات جديدة للجدول مهمة جدا جدا .

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

كود HTML:
<html dir="rtl">

<head>
<title>جدول3</title>
</head>

<body bgcolor="#C0C0C0">
<br><br><br>
<div align="center">
<table border=2 bordercolor=red bordercolordark=#FFFF66 bordercolorlight=#00FF00 cellpadding=20px cellspacing=10px>
<tr>

<th bgcolor="#F9A800">column1</th>
<th bgcolor="#E4CAFF">column2</th>
<th bgcolor="#FFFF66">column3</th>
<th bgcolor="#B7FFE2">column4</th>
</tr>
<tr>
<td bgcolor="#FFE1A4">  </td>
<td bgcolor="#FFE1A4">  </td>
<td bgcolor="#FFE1A4">  </td>
<td bgcolor="#FFE1A4">  </td>
</tr>
</table>

</div>
</body>

</html>
ستظهر لك الصفحة التالية :
http://www.freewebtown.com/jordan_am/yasminah7.htm

في الفقرة التالية سأعود لشرح هذا التمرين ان شاء الله وتفصيل المعرّفات
الجديدة .

نعود
الان لشرح الخطة السابقة بالتفصيل ..
لاحظ معي شكل الجدول الذي قمنا بتصميمه هنا ولاحظ انه جدول متباعد الاعمدة
والخلايا ..
حسنا لو كنت معتاد على تصميم الجداول على سبيل المثال في الفرونت بيج واردت
ان تنشأ جدول كهذا او تقسيم في صفحة متباعدة الاعمدة كهذه كيف لك ان تقوم
بهذا التقسيم ان كنت لا تنظر الى التعليمات البرمجية للصفحة ؟؟ الامر سيكون
غاية في الصعوبة ..
الذي قمت به اضافة بعض اوامر لترويسة الجدول تنطبق على كامل الجدول الذي
اريد تصميمه داخل وسم معرّف <table> .. اي بمعنى اخر تحديد الستايل
بشكل عام للجدول

كود HTML:
<table border=2 bordercolor=red bordercolordark=#FFFF66 bordercolorlight=#00FF00 cellpadding=20px cellspacing=10px bgcolor=#FFFFFF>
اولا قمنا بتحديد حجم قيمة ال border اي الحدود الخارجية او ايطار
الجدول اردته بعرض 2 .. border=2
وطبعا اذا اردت ان يظهر التأثير على ال border فيجب ان تكون قيمته على
الاقل رقم 1 فما فوق .. هذا طبعا لانك اذا اردت اخفاء حدود الجدول تكتب
القيمة صفر داخل ال border فتختفي جميع حدود الجدول ولا تظهر عند عرض صفحتك
على المتصفح .. :

ثم bordercolor=red تحدد لون الحدود الخارجية
لكامل الجدول واعطبناها هنا اللون الاحمر .. يجب تحديد السمة border
بالقيمة واحد او اكثر حتى تكون السمة bordercolor فعالة ... ويتم التعرف
على هذه السمة ضمن مستعرض الانترنت فقط .

ثم حددنا سمة bordercolordark وهي تحدد لون
الحدود اليميني السفلي للجدول منشئة بذلك تأثير ثلاثي الابعاد .. ويجب ايضا
تحديد سمة ال border بالقيمة واحد او اكثر حتى تكون السمة bordercolordark
فعالة ويتم ايضا التعرف عليها ضمن مستعرض الانترنت فقط .. حددتها انا هنا
بقيمة اللون #FFFF66 وهو من مشتقات اللون الازرق .

ثم السمة bordercolorlight تحدد لون الحدود
اليسرى العليا للجدول ، منشئة بذلك تأثير ثلاثي الابعاد ويجب ايضا تحديد
السمة border بالقيمة واحد فما فوق حتى يتم التعرف على هذه السمة . حددتها
هنا بقيمة اللون #00FF00 وهو لون من مشتقات اللون الاخضر .

ثم السمة cellpadding وهي تحدد مساحة الخلية
مقدرة بعناصر الصورة اي بالبكسل pixels ويشار اليها بالرمز px .. اعطيتها
هنا قيمة cellpadding=20px عشرين بكسل ..
حتى تتعلم جيدا على هذه السمة قم بالتجربة في متصفحك بحيث تلغي قيمة
cellpadding واجعل قيمتها صفر وانظر الى النتيجة في متصفحك .. ستجد ان
الجدول تحول الى جدول صغير جدا متلاصق الخلايا .. او زد في القيمة ستجد ان
الخلايا كبرت اكثر وقفا للقيمة التي تضعها .

ثم السمة cellspacingوهي تحدد المساحة المحصورة
بين الخلايا والاعمدة مقدرة ايضا بعناصر الصورة اي بالبكسل .. وهنا جعلتها
بقيمة 10px .. فلو جعلنا قيمتها صفر مثلا لوجدنا الجدول تحول الى جدول عادي
متلاصق الاعمدة والخلايا ولكن يبقى حجم الخلية كما هو اي كما حدتته في
cellpadding السابقة .. قم ايضا بالتجربة في متصفحك حتى تتعرف على هذه
السمة اكثر .

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

الان لننتقل الى اضافة جديدة ايضا استعملناها في الجدول السابق وهي معرّف <th> :

كود HTML:
<tr>

<th bgcolor="#F9A800">column1</th>
<th bgcolor="#E4CAFF">column2</th>
<th bgcolor="#FFFF66">column3</th>
<th bgcolor="#B7FFE2">column4</th>
</tr>
فبعد ان حددت المعرّف <tr> للسطر الاول من الجدول قمت باستبدال
معرّف ال <td> الذي مر معنا سابقا بمعرّف جديد وهو <th> كما تلاحظ .. لاحظ ايضا اني اضفته فقط
لخلايا السطر الاول من الجدول ثم في السطر الثاني عدت للمعرّف <td>
..
ال <th> هو تماما كمعرّف ال <td>
يقوم برسم خلايا السطر ومحتويات الجدول .. ولكن ال <th>
هي ستقوم بتشكيل الترويسات لجدولك لاحظ الكلمات في السطر الاول خرجت في
المتصفح بشكل بارز والى المنتصف وبخط سميك .. من غير ان نستعمل ايا من
تنسيق الخطوط فقط استعملنا المعرّف <th>
وهو من يقوم بهذا العمل .. اذا هو يختص بعناوين الترويسة لجدولك ..
قم بالتجربة بأن تكتب كلمات في خلايا السطر الثاني والذي تركته لك فارغا
حتى تعرف الفرق بين المعرّفين .. ستظهر لك الكتابة كلمات عادية جدا خالية
من اي تنسيق .
ولاحظ ايضا في هذا التمرين اني قمت بتلوين كل خلية .. هي فقط باضافة عنصر
bgcolor الى كل واحدة منها على حدة ..

كود HTML:
<th bgcolor="#F9A800">column1</th>

كود HTML:
<td bgcolor="#FFE1A4">  </td>
في نهاية هذه الفقرة اود ان اعود لنقطة كنت قد قلتلها في بداية وهي
انه من يريد تعلم تصميم المواقع ليس بحاجة في البداية ان يكون ملم ببعض
اللغات ولهذا ارجو ان يكون اسهابي في الشرح قد اوصل للنتيجة المطلوبة وهي
التي اخذتها على عاتقي عندما قلت تعلم تصميم المواقع من الصفر وبهذا الشرح
اقصد به من هم ليس عندهم اي خلفية على التصميم .. وكما ترى كما قلت في
البداية ان لغة ال html لغة سهلة الفهم .. بالعكس انت بحاجة الى هذه اللغة
او على الاقل مبادئها لتنطلق الى عدة لغات اخرى .. واعلم ان اغلب اللغات هي
تحتاج بالقدر الاكبر الى ممارسات عملية فهي التي تثقل لديك هذه اللغات ..
انا اقول لك هنا انطلق نعم مجرد حماس الانطلاق والاصرار للتعلم سيعلمك
الكثير مما كان يجهل عليك .. نعم مازلنا في البداية ولكن اعتقد الان انه
اصبح لديك الشغف في التعلم كما اوردت سابقا في مقدمة هذا الموضوع .
ونعود ان شاء الله مع تمارين اخرى في نطاق الجداول ..
تحياتي

الان لنتابع مع متعة الجداول .. واضافة بعض السمات الجديدة في الوسم
<table> وكما قلت انه يهمني ان نتعلم كل ما يتعلق بالجداول وال
border لعدة اسباب اولا لا ارغب ان ترى مع الايام اي سمة تشعر انها غريبة
وانها لم تمر عليك لذلك احاول ادراج اكبر قدر مستطاع منها ومن ثم قلنا اننا
نريد ان نتعرف على كل ذرات الجداول ان شاء الله .. ومن ثم هذه السمات
ستحتاج اليها في تصميم موقعك مستقبلا ان شاء الله وسيعود اغلبها معنا في
ملفات الانماط فيما بعد ..

سنعود الى نفس التمرين السابق ونضيف اليه بعض السمات الجديدة .. افتح مستند
التمرين السابق ظلل كود وسم ترويسة ال <table> فقط وضع هذا الكود
الجديد بلا منها :

كود HTML:
<table border=2 bordercolor=red bordercolordark=#FFFF66 bordercolorlight=#00FF00 cellpadding=20px cellspacing=10px bgcolor=#FFFFFF cols=4 frame=void>
تلاحظ اننا اضفنا ثلاث سمات جديدة هنا وهي على التوالي :
السمة التي اصبحت معروفة لديك bgcolor وهي خلفية
الجدول بشكل عام واخترت لها القيمة #FFFFFF اللون الابيض حتى تظهر معي
التعديلات القادمة .

ثم اضفت السمة cols وحددتها بقيمة 4 :

كود HTML:
cols=4
cols تعرف عدد الاعمدة في الجدول بشكل صريح
ومسبق ويسمح تحديد هذه القيمة في ترويسة الجدول بأن يتم جلب الجدول بشكل
اسرع وذلك لان المتصفح لن يحتاج الى قراءة كامل الجدول ليعرف حجمه . وطبعا
في التمرين السابق كما ترى عدد الاعمدة هو اربعة .

ثم اضفنا السمة frame واعطيناها القيمة void :

كود HTML:
frame=void
السمة frame هي تمثل الحدود في الاتجهات
الاربعة للجدول تسمح لك بالتحكم بالحد الخارجي للجدول باخفاء بعض اجزائه
واظهار بعضها ولها عدة قيم اخترنا في البداية القيمة void
تفيد بانه لايوجد حدود للجدول الخارجي قم بعمل ريفريش لمتصفحك حتى ترى
النتيجة ستظهر كهذه :
http://www.freewebtown.com/jordan_am/yasminah8.htm

لاحظ معي اختفت الحدود الخارجية للجدول .
لنقم الان بتبديل القيمة void الى القيمة above هكذا :

كود HTML:
frame=above
قم بعمل ريفريش على متصفحك لترى النتيجة وتأثير قيمة ال above على
جدولك ستظهر النتيجة كهذه :

http://www.freewebtown.com/jordan_am/yasminah9.htm

ظهر الحد العلوي للجدول فقط اذا القيمة above
مهمتها اظهار الحد العلوي للجدول .

ايضا لنغير القيمة الى below :

كود HTML:
frame=below
قم بعمل ريفريش لمتصفحك ستظهر لك النتيجة كهذه :

http://www.freewebtown.com/jordan_am/yasminah10.htm

اختفت كل الحدود وظهر لي الحد الادنى فقط .
ايضا لنغير القيمة الى vSides:

كود HTML:
frame=vSides
اعمل ريفريش لمتصفحك لترى النتيجة ظهور الحدود اليمنى واليسرى للجدول
واختفاء الباقي ..
لنسرد الان القيم وعمل كل واحدة منها وعليك ان تقوم باستبدالهم في مستندك
وترى النتيجة :
القيمة hSides الحد الاعلى والادنى فقط .
القيمة vSides الحدود اليمنى واليسرى فقط .
القيمة lhs الحد الايسر فقط .
القيمة rhs الحد الايمن فقط .
القيمة box الحدود في الجهات الاربع .
القيمة border الحدود في الجهات الاربع مثل box
وهي القيمة الافتراضية .
القيمة void لا يوجد حدود .
القيمة above الحد الاعلى فقط .
القيمة below الحد الادنى فقط .
قم بتجربتها جميعا وحفظها جيدا.

الان سنضيف سمة جديدة في كود ال table وهي rules :
قم فقط بتغيير ترويسة الجدول <table> واضف هذا الكود بدلا منه :

كود HTML:
<table border=2 bordercolor=red bordercolordark=#FFFF66 bordercolorlight=#00FF00 cellpadding=20px cellspacing=10px bgcolor=#FFFFFF cols=4 frame=box rules=none>
اضفنا الان عنصر جديد في نهاية الكود كما ترى وهو rules
ان كانت frame السابقة تتحكم في حدود الجدول الخارجية فإن rules عملها هو التحكم في القواعد الداخلية لخلايا
الجدول بحيث تشير الى جزء الحد المراد عرضه في الخلايا الداخلية تبعا
للقيمة التي تضعها ،، انا هنا وضعت لها القيمة none
:

كود HTML:
rules=none
عند عمل ريفريش لمتصفحك ستجد ان حدود الخلايا الداخلية اصبح كهذا :
http://www.freewebtown.com/jordan_am/yasminah11.htm

لاحظ ان ظهور الحدود للخلايا الداخلية اختلف واختفى ..
فالقيمة none المضافة الى السمة rules تعني لا
حدود داخلية .
قم بتجربة القيم التالية بمستندك ومن ثم اعرضها بمتصفحك بعمل ريفريش حتى
ترى التغيير وتعرف عمل كل قيمة منها :
القيمة none تعني لاحدود داخلية كما راينا .
القيمة rows يتم عرض حدود افقية .

كود HTML:
rules=rows
القيمة cols يتم عرض حدود راسية .
القيمة all يتم عرض جميع الحدود .
في النهاية اتمنى ان يكون الشرح كافي .. وقد اوصلت المعلومة بكل يسر وسهولة
..
وحتى ننتقل الى فقرة جديدة لكم مني اطيب التحايات .

مقدمة
لا بد منها :
لا تشعر بالملل ها انت قد رايت نموذج لما ستصل اليه في النهاية ان شاء الله
.. اعلم تماما انك (( ان اتقنت الجداول فلن يصعب عليك
شيئا بعدها )) ان شاء الله فأغلب عملك في ال html هو في الجداول ..
المعلومات السابقة التي اوردتها في تنسيق الجدول نستعملها بكثرة في التصميم
لا تنقص شيئا من قيمة اي سمة من السمات السابقة
واللاحقة وتدرب اكثر واكثر حتى تشعر انك اصبحت تكتب وسوم الجدول
باتقان .. لاحظ اني اترك لك مسافة بين التمرين والاخر حتى لا اثقل عليك
فتجتمع المعلومات مرة واحدة فتعود للتشتت والضياع .. لا انتقل للخطوة
التالية حتى اضع في حسابي انك الان اتقنت ان شاء الخطوة السابقة ..
ان شعرت وانت تجلس انك تريد العودة والمطالعة اكثر حول هذا العلم والتجربة
اكثر ((فاعلم انك في طريق النجاح )) ..

الان لنتابع :
سنتحدث اليوم عن عدة سمات وعناصر نستعملها ايضا بكثرة في التصميم ..
بل بالنسبة لي ارجع سبب اتقان الجدول لها ..
طيب ماذا لو اردت تصميم جدول لكن اريد خلية معينة بداخله ان تاخذ مساحة
خليتين او اكثر ؟! وكاني اقوم بعملية ضم بعض الخلايا بشكل افقي الى بعضها
لتصبح خلية واحدة !! كهذه

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ Yasminah101

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ Yasminah101

بسيطة فانا هنا احتاج الى سمة سحرية تسمى colspan

كل ماعلي عمله ان ادرجها في مكان الخلية <TD>التي
اريد دمجها واعطيها مقدار الخلايا التي اريد دمجها معها ..:

كود HTML:
<td colspan="2"> مندمجة</td>
الان اليك الكود كامل لتجري عليه تعديلات واضافات وتمارين ..

كود HTML:
<html dir="rtl">

<head>
<title>جدول مندمج</title>
</head>

<body bgcolor="#FFCC99">

<div align="center">

<table border="1" bordercolor=#CC3300 width=30%>
<tr>
<td>عادية </td>
<td colspan="2"> مندمجة</td>
</tr>
<tr>
<td>عادية</td>
<td>عادية</td>
<td>عادية</td>
</tr>
</table>

</div>

</body>

</html>
قمت بتوسيط الجدول في منتصف الصفحة :

كود HTML:
div align="center"
قمنا بفتح وسم ال table اضفت اليه قيمة ال border واحد ولونت الحدود
bordercolor واعطيت الجدول عرض بقيمة تلاتين بالمئة width=30%

الجدول عبارة عن سطرين وثلاث خلايا .. السطر الاول الذي قمت بالدمج فيه
بمقدار خليتين colspan=2

كود HTML:
<tr>
<td>عادية </td>
<td colspan="2"> مندمجة</td>
</tr>
والسطر الثاني هو سطر عادي بثلاث خلايا :

كود HTML:
<tr>
<td>عادية</td>
<td>عادية</td>
<td>عادية</td>
</tr>
ثم اغلقت وسم ال table , وسم التوسط div وال body وال htm

كود HTML:
</table>

</div>

</body>

</html>
طيب هذا بالنسبة لدمج الخلايا الافقية .. طيب ماذا لو اردت بالعكس
دمج عدة صفوف مع بعضها البعض كهذه ؟!

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ Yasminah102

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ Yasminah102

استعملت هنا العنصر rowspan في الوسم <TD> وحددت له اني اريد دمج ثلاث خلايا عامودية :

كود HTML:
<td rowspan="3">مدمج </td>
ضع هذا الكود في مستندك وانظر اليه وقم بعمل تمارين اضافية:

كود HTML:
<table border="1" bordercolor="#800000" height=200PX>
<tr>
<td>صف1</td>
<td>صف 2</td>
</tr>
<tr>
<td>عادي</td>
<td rowspan="3">مدمج </td>
</tr>
<tr>
<td>عادي</td>
</tr>
<tr>
<td>عادي</td>
</tr>
</table>

</div>

</body>

</html>
في ال TABLE هنا حددت ارتفاع الجدول بالعنصر height
واعطيته قيمة 200PX :

كود HTML:
<table border="1" bordercolor="#800000" height=200PX>
اذا colspan تستعمل لدمج الخلايا الافقية و
rowspan تستعمل لدمج الخلايا العامودية و height
احدد بها قيمة ارتفاع الجدول و width قيمة عرض
الجدول .
يتبع في الفقرة التالية ان شاء الله ..

الان سنأخذ سمة مهمة جدا مع توابعها ..
كثيرا ما يقوم بعض الاشخاص بانشاء جدول مثلا يكتبون في العمود اليميني
يجدون ان الكتابة في العامودين الاخرين مثلا بدات تنزل مع مستوى الكتابة في
العامود الذي يكتب فيه او انه كتب وانتهي في العامود اليميني ياتي الى
العامود الوسطي ليكتب فيه فيجد ان الكتابة تبدا من منتصف الصفحة او من عند
نقطة انتهاء كتابة العامود اليميني اي بشكل عام تكون الكتابة متفاوتة في
الجداول ويحاول ويحاول لكن ...
اقول هذا لانك اغفلت سمة مهمة جدا ولا يكاد جدول ولا خلية تخلو منها وهي
سمة [size=16]valign انظر معي الى
الجدول المبسط التالي :

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ Yasminah103

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ Yasminah103

في هذا الجدول البسيط تحكمت انا من اين ابدا الكتابة في كل خلية :

عندما اريد الكتابة تبدأ من اعلى الخلية عند بداية الخلية في الوسم
<TD>علي ان اكتب اولا الامر valign
ومن ثم طبعا اشارة =تهياة للامر الاخر وهو top اي اعلى الخلية او الجدول
.. فتتجه كل محتويات الخلية للاعلى بحيث تبدأ من بداية العامود او الخلية
..

[/size]

كود HTML:
<td valign="top">أعلى</td>
طيب
عندما اريد ان اكتب في اسفل الخلية او محتويات العامود هذا اريدها ان تكون
في الاسفل ..
اكتب السمة [size=16]valign واعطيها
الامر bottom هكذا :
[/size]

كود HTML:
<td valign="bottom">أسفل</td>
فتتجه
جميع المحتويات الى الاسفل ..
وعندما اريدها في الوسط اكتب السمة [size=16]valign
واعطيها الامر center
هكذا :

[/size]

كود HTML:
<td valign="center">وسط</td>
اما
التموضع هذا وضعته لاريكم كيف ان الكلمة ان لم احدد لها اتجاه فهي تبقي او
تبدأ في هذا المكان من منتصف الصفحة .

اليكم الكود ال TABLE:

كود HTML:
<html >

<head>
<title>VALING</title>
</head>

<body bgcolor="#FF9999">
<div align="center">
<table border="1" bordercolor="#008080">
<tr>
<td height="150">تموضع</td>
<td valign="top">أعلى</td>
<td valign="center">وسط</td>
<td valign="bottom">أسفل</td>
</tr>
</table>
</div>
</body>

</html>
اذا
السمة valign تستعمل لتحديد محتويات الجدول
والخلايا ، يرافقها :
top اي الى الاعلى
center في الوسط
bottom في الاسفل ..
يتبع في الفقرة القادمة ان شاء الله

نتابع
..
طيب ماذا لو اردت ان تتجه محتويات الجدول الى اليمين او اليسار؟ او حتى
الوسط ؟

انظر معي الى هذا الجدول البسيط :

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ Yasminah104

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ Yasminah104

لاحظ في هذا الجدول كيف تحكمت بازاحة محتوياتها في الاتجاه الذي اريد يسار
،، يمين ،، وسط .

السمة المسؤولة هنا هي [size=16]align
نضعها في داخل الوسم الذي نريد تحديد اتجاه محتوياتها كال <TR> او <TD>
وانا هنا استعملتها داخل وسوم ال <TD> بحيث
حددت لكل خلية اتجاه .

لازاحة المحتويات الى اليمين كتبت الامر align
واعطيته الامر right هكذا align=right
فيكون معنا الوسم التالي

كود HTML:
td align=right>يمين</td>
ازاحة المحتويات الى جهة اليسار تتطلب السمة align
مضاف اليها الامر left اي اليسار هكذا align=left فيكون معنا الوسم التالي :

كود HTML:
<td align=left>يسار</td>
ازاحة المحتويات الى المنتصف نكتب السمة align
ونعطيها امر center فيكون الوسم معنا هو :

كود HTML:
<td align=center>وسط</td>
وهذا هو كود ال TABLE كاملا :

كود HTML:
<div align=center>
<table border="1" width="60%" bgcolor="#F305E1">
<tr>
<td align=left>يسار</td>
<td align=right>يمين</td>
<td align=center>وسط</td>
</tr>
</table>
</div>
يتبع ان شاء الله .[/size]

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ Bsm

السلام عليكم مرة اخرى ..
اليوم سنتحدث عن معرّفات جديدة في الجداول هي تختصر الوقت وايضا تعطي شيفرة
الجدول ترتيب بحيث لا ادخل مع كل خلية او عامود بداخل وسم <tr> او
ال <td> على سبيل المثال : سمات ال الخلفية bgcolor والعرض width
وال valign حتى بمعنى اخر "ما يصير عجئة " خاصة في الجداول الكبيرة وحتى
اذا اردت التعديل اتوصل بسهولة للموقع الذي اريد بالجدول ..
هناك معرّفان يعتبران اداتان قويتان لمصمم الويب الذي يريد التحكم بمحاذاة
العناصر المحتواة ضمن خلايا الجدول .. ولا اعرف سبب اغفال الكثير عنهما مع
اني اجدهما كالرباط القوي الذي يشد على الجدول . وعلى فكرة هناك الكثير من
مطوري المواقع ممن التقيتهم لا يعرفون هذا المعرف ويغفلون ايضا عن اهميته
ومنهم يعلمه ولكن لايعطيه اهمية و لا اعرف السبب .. على العموم هذا التمرين
اليوم هو يقدم عادة على انه تمرين للمحترفين .. لكن انا لن اتوسع به ولن
ادخل في كيفياته توصلت الى تمرين بسيط سهل يعطي الفكرة بشكل عام عنه من
غير تفاصيل اخرى ..

لنبدأ :

لدينا معرّفان جديدان هما [size=16]<colgroup>
و <col> والسمة span. ولدينا ايضا المعرفات
التي ستنتاولها في الفقرة التالية وهم <thead>
و <tbody> و <tfoot> .
لنبدأ مع المجموعة الاولى : لنفترض اني اريد عمل جدول من ثلاث اعمدة وثلاث
اسطر خلايا .. واريد ان احدد عدد من المواصفات لكل عامود وخلية طبعا ستقول
اني ساتي الى <tr> والى ال <td> واحدد ما اريد داخل الوسم
المخصص لهما .. نعم صحيح لكن عندي طريقة اخرى واقوى من التي فكرت بها انظر
الى هذا الجدول البسيط الذي انشاته
هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ Yasminah105

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ Yasminah105

لنلقي نظرة على شيفرة ال <tr> و ال <td> التي استخدمتها :

كود HTML:
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>

<tr>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>

<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
فارغة وخالية من التنسيقات ومنظمة ومرتبة هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ 29

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ 29

. ما الذي قمت به ؟!
كل ما هنالك اني استعملت المعرف <colgroup>
و <col> و span
في راس الجدول حددت لها المهام وهي من قامت بهذا التنسيق والمحاذاة التي
اخترتها .

لنقل ان <colgroup> معرّف حاوي وهو معرف
مجموعة من الاعمدة يحدد فيه الاعدادات التي اريد لمجموعة من الاعمدة في
جدول .
و <col> هو معرّف خال اي لا يحتاج الى
اقفال </>
و span تحدد عدد الاعمدة التي تحتويها المجموعة
التي اخترتها .

انظر الى شيفرة راس الجدول التي قمت بانشائها للجدول السابق :

كود HTML:
<table >
<colgroup>
<col span=2 bgcolor=#FF5050 align=center width=80>
</colgroup>
<colgroup>
<col span=1 align=left width=90 bgcolor=#00FF00>
</colgroup>
انشأت ال table ثم كتبت المعرّف <colgroup>
اخبر المتصفح اني اريد ان انشأ مجموعة من الاعمدة بمواصفات معينة ..

كود HTML:
<table >
<colgroup>
ثم افتتحت الوسم <col> وضعت فيه
المواصفات اولا span حددت لها الرقم 2 ان هذه المواصفات ستكون مجتمعة في
عمودين

كود HTML:
<col span=2
وحددت لون الخلفية وهو مشتق من اللون الاحمر

كود HTML:
bgcolor=#FF5050
وحددت المحاذات aling لمحتويات الجدول اخترتها التوسط center

كود HTML:
align=center
وحجم عرض الاعمدة المختارة width بالامكان اقدرها بالنسبة المئوية
وانا اخترتها هنا مقدرة بعناصر الصورة وهي البكسل :

كود HTML:
width=80
انتهيت من تطبيقات مجموعة الاعمدة الاولى التي اخترتها فأغلقت الوسم colgroup :

كود HTML:
</colgroup>
ثم بدأت بتحديد مجموعة اخرى من الاعمدة فتحت الوسم colgroup جديد :

كود HTML:
<colgroup>
ومن ثم وسم ال col وحددت ال span=1 عامود واحد مع مجموعة خلاياه :

كود HTML:
<col span=1
وال align=left اتجاهها اليسار و bgcolor بلون مشتق من اللون الاخضر
والعرض width=90 حددته حجم 90 بالبكسل . ثم اغلقت وسم المعرّف colgroup
الثاني الذي بدأت فيه :

كود HTML:
<col span=1 align=left width=90 bgcolor=#00FF00>
</colgroup>
وكانت النتيجة التي رايتم سابقا في الجدول .. المعرف colgroup ياخذ
ايضا السمات التي اخذها المعرف col ال span والخلفية والعرض والمحاذاة .
لكن مبدئيا اعتمدوها هكذا .. كما اسلفت لا اريد ان ادخل في تفاصيل اكثر حول
هذه المعرفات لانها متشعبة واكتفي بالتوضيح هذا واعود واكرر انهما اداتان
قويتان لمصممي الويب خاصة الذي يريد التحكم بكيفية محاذاة العناصر المحتواة
ضمن خلايا الجدول .

لا تقلق الجداول اوشكت على الانتهاء ..
يتبع في الفقرة التالية ان شاء الله القسم الثاني من المعرفات .
تحياتي

[/size]

لنتنابع
:

حديثنا في هذه الفقرة عن المعرّفات <thead>
و <tbody> و <tfoot>
.. كما ترى من مسميات هذه المعرفات اننا نستطيع تقسيم الجدول الى انقسامات
هرمية كصفحة ال html بحيث نقسمه الى <thead> اي table head و
<tbody> قسم الجسم للجدول بمعنى table body وتذييل الجدول مع معرف
<tfoot> اي table foot . ونستطيع طبعا بوسم كل هذه المعرفات ان نضع
مجموعة من الاوامر .. وماهي في النهاية الا مجموعة روابط تشد من محتويات
الجدول اكثر واكثر .. وبرايي انها تختصر الوقت ..
لاحظ معي الجدول التالي :

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ Yasminah107

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ Yasminah107

في تصميمه يبدو كالجداول السابقة لكن شيفرته تختلف :

<

كود HTML:
body bgcolor="#FFCFBF">
<div align="center">
<table border=2 width=40% bgcolor="#FF9977">
<thead align=center>
<tr>
<th>A</th><th>B</th><th>C</th>
</tr>
</thead>
<tbody align=left bgcolor="#F97C00">
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
</tbody>
<tfoot align=right bgcolor="#FFC671">

<tr>
<td>E</td><td>F</td><td>G</td>
</tr>
</tfoot>
</table>

افتتحنا وسم ال TABLE اعطيناه بعض الاوامر border=2 و width=40% وال
bgcolor:

كود HTML:
<table border=2 width=40% bgcolor="#FF9977">

ثم افتتحنا الوسم thead مخبرين المتصفح ان لدينا
جدول بتركيبة هرمية .. وحددنا في داخل الوسم ايضا ال align المحاذاة
واخترناه التوسط center :

كود HTML:
<thead align=center>
ثم معرفات الجدول السطر الاول TR و TH :

كود HTML:
<tr>
<th>A</th><th>B</th><th>C</th>
</tr>
ثم اخبرنا المتصفح بانتهاء قسم ال thead بإقفال وسمه :

كود HTML:
</thead>
وبدأنا بعدها بفتح وسم tbody حددنا في داخل
وسمه المحاذاة align=left الى جهة اليسار و ال bgcolor بخلفية مختلفة عن
الخلفية التي اخترتها بوسم ال TABLE الاساسي :

كود HTML:
<tbody align=left bgcolor="#F97C00">
ثم معرفات السطر الثاني من الجدول <TR> و <TD> :

كود HTML:
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
ثم اخبرنا المتصفح باغلاق وسم ال TBODY :

كود HTML:
</tbody>
وانتقلنا الى الجزء النهائي وهو معرّف تذييل النص tfoot افتتحنا
الوسم وحددنا معه المحاذاة الى جهة اليمين و align=right و bgcolor مختلف :

كود HTML:
<tfoot align=right bgcolor="#FFC671">
ومن ثم معرفات السطر الثالث التي ستجري التطبيقات عليها :

كود HTML:
<tr>
<td>E</td><td>F</td><td>G</td>
</tr>
واخيرا اخبرنا المتصفح باغلاق وسم التذييل tfoot :

كود HTML:
</tfoot>
ومن ثم اغلاق وسم ال TABLE الاساسي :

كود HTML:
</table>
اذا المعرّف <thead> هو معرّف عنوان
الجدول .. يحدد سطر عنوان الجدول .. ممكن ان يحدد في داخل وسمه ال aling
المحاذاة و valing تحديد المحاذاة الراسية للجدول وال bgcolor تحديد لون
الخلفية .

المعرف المعرّف <tbody> هو معرّف جسم
الجدول .. يعرف جسم الجدول .. ممكن ان يحدد في داخل وسمه ال aling
المحاذاة و valing تحديد المحاذاة الراسية للجدول وال bgcolor تحديد لون
الخلفية .

المعرف المعرّف <tfoot> هو معرّف تذييل
الجدول .. يعرف سطر تذييل الجدول .. ممكن ان يحدد في داخل وسمه ال aling
المحاذاة و valing تحديد المحاذاة الراسية للجدول وال bgcolor تحديد لون
الخلفية .

نضيف الان معرف جديد وهو معرف ال <caption>
وهو معرف عناوين الجداول وهو عنصر اختياري يقوم بأنشاء عنوان للجدول يمكن
ان يظهر في اعلى او اسفل الجدول :

هذا نفس الكود السابق ولكن اضفت عليه في نهايته معرف ال caption:

كود HTML:
<table border=2 width=40% bgcolor="#FF9977">
<thead align=center>
<tr>
<th>A</th><th>B</th><th>C</th>
</tr>
</thead>
<tbody align=left bgcolor="#F97C00">
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
</tbody>
<tfoot align=right bgcolor="#FFC671">
<tr>
<td>E</td><td>F</td><td>G</td>
</tr>
</tfoot>
<caption>table 1</caption>
</table>

هذا هو منفصل للتوضيح :

كود HTML:
<caption>table 1</caption>
مع اني اضفته اخر الكود الا ان النتيجة كما سترى في متصفحك ستظهر في
اعلى الجدول لاني تركته من غير ان احدد له ال الاتجاه .. ان تركته هكذا
يظهر اعلى الجدول .. بشكل طبيعي وهذا المعرف ياخذ معه ال valing وفيه
القيمتان اما اعلى الجدول top او اسفل الجدول bottom .
وكذلك المحاذاة aling .
لاحظ في هذه الصورة ان محتوى caption ظهر في اعلى الجدول خارج حدووده ممثلا
عنوان لهذا الجدول وهو table 1

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ Yasminah108

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ Yasminah108

لعل قائل يقول لما كل هذا ؟! ساقول لك لا تستعجل كل هذه الامور ستحتاج
اليها عندما تتوسع اكثر وكما اني وعدت في بداية الحديث عن الجداول اني
ساقوم بشرح كل ذراته اتمنى ان شاء الله ان اكون قد اوفيت بهذا الامر .. ان
فهمت كل مضى اقول لك مبروك اصبحت انت والجداول اصدقاء وستطوعه بين يديك ..
وليس هذا فقط ان انهيت هذه المهام بنجاح فلن يصعب عليك شيئا فيما بعد بإذنه
تعالى ..
هل بقي لنا شيء هنا في الجداول ؟! نعم بقي لنا امر واحد والجداول المتداخلة
ليس فيها الا ان تتعلم كيف تتحكم بانشاء الجداول داخل بعضها البعض وهي
اساسية في التصميم .. لكن الدرس ان شاء الله سيكون ممتع جدا لانه تطبيق
عملي للنقطة الجديدة وفيه تلخيص لاكثر نقاط مرت معنا .. سترى فيه امور
درستها هنا ستحتاجها كثيرا في التصميم .
الى ان نلتقي في الفقرة القادمة لكم مني اطيب تحية .

اطلنا المكوث في الجداول اليس كذلك ؟!
هل استطيع ان افعل بها شيء الان ؟! نعم تستطيع تعال لنبني بها صفحة وترى
بنفسك ..
لكن الاجمل من هذا كله " اني ساقوم ببناء صفحة كاملة من غير برامج مساعدة
كالفرونت بيج " اليس هذا جميل ؟؟
بهذا التمرين مراجعة لبعض العناصر التي مرت معنا سابقا .. اضافة الى تمرين
جديد وهو الجداول المتداخلة والذي قلنا اساسي في التصميم ..
لنبدأ ..
قم بفتح فولدر جديد new folder في ال My Documents او اذا كان لديك ال
My Web Sites
فقم بفتح الفولدر الجديد بداخله .. ثم انشأ مستند html واحفظه داخل الفولدر
الجديد .. الان قم بنسخ الصور التالية عن طريق كليك يمين على الصورة وقم
بحفظها في الفولدر الجديد اي بنفس الفولدر الذي حفظت به المستند الذي قمت
بانشائه لا تغير اسماء الصور اثناء الحفظ انما احفظهم باسمائهم كما هي ..
الصورة 1

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ 1

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ 1

الصورة رقم 2 " هذه الصورة صغيرة هي عبارة عن خطين دقيقين بلون الزهر ضع
الماوس عليها وكليك يمين وقم بحفظها :

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ 9

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ 9

الصورة رقم 3 :

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ 3

الصورة رقم 4 :

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ 4

الان في المستند الذي قمت بانشائه قم بنسخ الكود التالي وضعه في مستندك بدل
الكود الموجود الذي كنت قد كتبته بالحفظ ..

كود HTML:
<html>
<head>

<Title>The first page</Title>

</head>

<body background=1.jpg>
<table BORDER=2 CELLSPACING=0 CELLPADDING=15 WIDTH="90%" BACKGROUND="9.jpg" borderColorDark="#76B291" bordercolorlight="#D1E1D8" align="center" >
<tr>
<td>
<table BORDER=2 CELLSPACING=0 CELLPADDING=12 WIDTH="100%" BACKGROUND="1.jpg" borderColorDark="#76B291" bordercolorlight="#D1E1D8" align="center" >
<tr>
<td>
<table BORDER=2 CELLSPACING=0 CELLPADDING=15 WIDTH="100%" BACKGROUND="9.jpg" borderColorDark="#76B291" bordercolorlight="#D1E1D8" align="center" >
<tr>
<td>

<table BORDER=2 CELLSPACING=0 CELLPADDING=10 WIDTH="100%" BACKGROUND="3.jpg" borderColorDark="#76B291" bordercolorlight="#D1E1D8" align="center" >
<tr>
<td>
<div align="center">
<p><font face="Chiller" size="7" color="#547562">jordan weathe</font><p>
<font face="Edwardian Script ITC" size="7" color="#D79798">yasminah</font><table class="text01" width="80%" border="0" cellspacing="0" cellpadding="40" align="center">
<tr>
<td align="center">
<img border="0" src="4.jpg" width="150" height="85"></td>
</tr>
</table>
<p> </p>

</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

قم بالحفظ وعمل الريفريش للصفحة ستظهر معك النتيجة صفحة جميلة كهذه :

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ Yasminah106

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ Yasminah106

اليس رائعا

نعم استطعنا ان ننشىء صفحة منسقة ..

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

يتبع ان شاء الله

تحياتي

توقفنا
سابقا مع تمرين صفحة منسقة بالجداول استعملنا بها بعض السمات التي مرت
معنا واضفنا اليها شيء جديد وهو تداخل الجداول .. اي انني استطيع ان ابني
جداول بداخل جدول وهذه مهمة جدا جدا لان لا يخلو تصميم من الجداول
المتداخلة ..
لنشرح الكود السابق الذي استعملناه ..
قمنا بفتح مستند نصي بلغة ال html حددنا عنوان ال title ب The first page
اقفلنا ال head

كود HTML:
<html>
<head>

<Title>The first page</Title>

</head>
افتتحنا ال body واخترنا الخلفية صورة فكان لا بد اذا من استعمال
سمة background وقلنا انها خاصة للخلفياتت التي نستعمل بها صور .. وكانت
الصورة اسم الصورة 1 وامتدادها هو jpg فوضعناها هكذا
1.jpg وضعناهم في داخل وسم ال body هكذا :

كود HTML:
<body background=1.jpg>
ثم بدأنا العمل بالجداول افتتحنا وسم الجدول table حددنا بداخله سمة
ال border بعرض 2 ثم ال CELLSPACING وهي كما قلنا انها المساحة المحصورة
بين الخلايا والاعمدة هنا جعلت قيمتها صفر اي انها خامدة ولا اريد
استعمالها الان CELLSPACING=0 ثم ال CELLPADDING وهي تحدد مساحة الخلية كما
راينا سابقا وحددتها هنا ب 15 .. CELLPADDING=15 وهي المسؤولة طبعا عن
اعطائي هذا الفاصل الجميل المتناسق في مساحة الخلايا .. ثم حددت ال WIDTH
وهو عرض الجدول وحدته بالنسبة المئوية من قيمة الصفحة فجعلته 90% من اجمالي
قيمة الصفحة ..
ثم جعلت للجدول هذا خلفية صورة فكان لابد من استدعاء السمة BACKGROUND
واخترت لها الصورة التي اسمها 9 وامتداها هو فتكون النتيجة هكذا
BACKGROUND=9.jpg ثم حددت بعض جهات الحدود التي اريد اظهارها واعطائها
الوانا فاخترت ال borderColorDark واعطيته لون #76B291 وال
bordercolorlight واعطيته قيمة اللون #D1E1D8 ( راجع التمرين الخاص بهذه
السمات ان كنت قد نسيتها لترى عمل كل منهما ) .. ثم حددت الاتجاه الداخلي
لمحتويات الجدول بالتوسط align=center

ليصبح كود هكذا :

كود HTML:
<table BORDER=2 CELLSPACING=0 CELLPADDING=15 WIDTH="90%" BACKGROUND="9.jpg" borderColorDark="#76B291" bordercolorlight="#D1E1D8" align="center" >
ثم افتتحنا ال tr واتبعناها ب ال td

كود HTML:
<tr>
<td>
من غير ان نغلق ايا منهما ابتدائنا بداخلهما ببناء جدول جديد ..
قريب من معطيات الجدول الاساسي الول لكن فيه بعض التغيير بالسمات التاية ..
ال CELLPADDING هنا جعلت قيمتها ال 12 وال WIDTH جعلتها بالقيمة المئوية
وقيمتها 100% اي التمدد الكلي داخل الجدول الاساسي بحيث يحتل المساحة كاملة
وال BACKGROUND اخترت لها الصورة 1 وهي نفس الصورة التي استعملتها في
الخلفية الاساسية للصفحة ..
ليصبح الكود هكذا :

كود HTML:
<table BORDER=2 CELLSPACING=0 CELLPADDING=12 WIDTH="100%" BACKGROUND="1.jpg" borderColorDark="#76B291" bordercolorlight="#D1E1D8" align="center" >
ثم افتتحت ال tr و td الخاصتين بالجدول هذا الاخير

كود HTML:
<tr>
<td>
ثم بداخلهما اخترت ان افتتح جدول اخر ويكون الجدول الثالث في الصفحة
والجدول الثاني داخل الجدول الاساسي واخترت له نفس معطيات الجدول الاول
وغيرت فقط ب نسبة ال CELLPADDING=10 جعلت قيمتها 10 والخلفية طبعا اخترت
لها الصورة التي اسمها 3 وامتدادها jpg :

كود HTML:
<table BORDER=2 CELLSPACING=0 CELLPADDING=10 WIDTH="100%" BACKGROUND="3.jpg" borderColorDark="#76B291" bordercolorlight="#D1E1D8" align="center" >
ثم افتتحت للجدول الاخير tr و td

كود HTML:
<tr>
<td>
ثم افتتحت ال div حتى يحيط بالاشياء التي ساضعها في داخل هذا الجدول
وحددت الاتجاه بداخله وهو التوسط

كود HTML:
<div align="center">
ثم افتتحت السمة <p> والتي ستحيط بكتلة النص الذي ساكتبه
افتتحت وسم الخط font استدعيت السمة face لتحديد نوع الخط واخترته Chiller
قد لايكون نوع الخط هذا موجود عندك في الجهاز فهو من الخطوط الاضافية التي
قمت بانزالها وبالتالي فمن الممكن ان لا يراها جهازك لانها غير موجودة عندك
.. قم باختيار نوعية خط موجودة في جهازك عوضا عنها .. ثم حجم الخط size
حددته بالرقم 7 لون الخط color اعطيته قيمة #547562
اغلقت الوسم وكتبت كلمة jordan weather ثم قمت باقفال وسم الخط font ووسم
ال p

كود HTML:
<p><font face="Chiller" size="7" color="#547562">jordan weathe</font></p>
بعد ذلك نفس العملية السابقة مع بعض التغييرات التي اخترتها في نوع
الخط كتبت كلمة yasminah

كود HTML:
<font face="Edwardian Script ITC" size="7" color="#D79798">yasminah</font>
ثم ابتدات بفتح جدول اخر هذا الجدول بصورة العرض في متصفحك لن تراه
لاني قمت باخفاء حددوه ال border جعلت قيمتها صفر هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ 29

فهو لن يظهر للعيان في
حالة عرض الصفحة وجعلت عرضه 80% وال cellpadding جعلتها 40

كود HTML:
<table class="text01" width="80%" border="0" cellspacing="0" cellpadding="40" align="center">
بالنسبة للسمة class دعها الان ستمر معنا لاحقا ان شاء الله ولايهم
حتى لو انك لم تضفها الى الجدول ..

ثم افتتحنا ال tr وال td الخاصة بالجدول الاخير داخل ال td حددنا الاتجاه
وهو التوسط :

كود HTML:
<tr>
<td align="center">
ثم ادرجت الصورة داخل وسم img وحددت ارتفاع الصورة وعرضها ومن ثم
اغلقت وسم ال td واتبعته باغلاق وسم ال rt واتبعته باغلاق وسم ال table
الاخير :

كود HTML:
<img border="0" src="4.jpg" width="150" height="85"></td>
</tr>
</table>
بالنسبة لشرح وسوم الصور والصور سيمر معنا بالدرس التالي ان شاء الله
بالتفصيل ..

والان ستبدأ عملية اغلاق الوسوم التي لم اغلقها بعد
ونبدأ باغلاقها بشكل عكسي اي الاخير نغلقه اولا كما رايت في اغلاق الوسم
الاخير ..
نغلق ال td وال tr والtable الخاصتين بالجدول ما قبل الاخير
ونتبعها ايضا باغلاقات الجدول الذي قبله والذي قبله وهكذا حتى نتاكد من
اقفال وسوم جميع الجداول التي قمنا بانشائها :

كود HTML:
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
عندما نفتح الجدول نضع ال table اولا ثم ال tr ثانيا ثم ال td ثالثا
لكن في عملية الاغلاق تكون عكسية بحيث نغلق td اولا ثم ال tr ثانيا ثم ال
table ثالثا هكذا ..
طبعا نصيحة لك دائما عندما تفتح وسوم حتى لاتضيع كم وسم يجب اغلاقه في
النهاية قم من البداية بفتح الوسم واضف الى جانبه وسم الاغلاق ومن ثم باعد
بينهما بالسبيس وضع المحتويات التي تريد بينهما وهكذا ..
الان انتهينا ان شاء الله من الجداول .. اتمنى ان تكون قد وصلت كاملة ..
ومن لديه سؤال فاليتفضل ..
وسننتقل في الفقرة التالية الى موضوعين اخرين تماما وهو الوصلات التشعيبية
والصور

تحياتي للجميع

فقرتنا اليوم سهلة جدا جدا
وهي ربط الصفحات بعضها ببعض .. مثلا عندما تدخل الى اي موقع تجد ايقونات
مكتوب عليها عناوين الايقونات هذه تقودك الى صفحات اخرى ربما في نفس الموقع
وربما في مواقع اخرى .. هذا ما نسميه بمراسي النص التشعبي Hypertext Anchors ..
المعرّف[size=16] <A> هو
المسؤول عن انشاء مراسي النص التشعبي
the <a> tag-creating hypertext anchors
وهو معرّف حاوٍ اي يحتاج الى معرّف <>
بداية والى معرّف نهاية </> يقوم بتعريف ما
ستعرضه صفحة ويب عندما ينقر المستخدم على النص المحتوى الذي يظهر ضمن معرف
البداية والنهاية ..
لنرى ذلك بطريقة عملية .. انقر على اللينك التالي ستظهر لك صفحة ستجد
بداخلها كلمة "انقر هنا للدخول الى منتديات طقس الاردن " مجرد نقرك على
الكلمة ستنقلك الصفحة الى صفحة منتديات طقس الاردن :

http://www.freewebtown.com/jordan_am/yasminah19.htm

لنلقي نظرة الى الشيفرة التي استخدمناها هنا :

كود HTML:
<html>

<head>
<title>Hypertext</title>
</head>

<body>
<a href="http://jordanweather.jo/forum/index.php"> انقر هنا للدخول الى منتديات طقس الاردن </a>
</body>

</html>
انظر كم هي بسيطة وبعيدة عن التعقيد في داخل المعرّف body قمنا بفتح
وسم معرّف المرساة
<a> وضعنا معه في نفس الوسم السمة href وهي لتحديد صفحة الويب التي
سيتم جلبها عندما ينقر المستخدم على النص المحتوى .. اتبعناها باشارة = ثم علامتي الاقتباس " "
توجهت الى موقع طقس الاردن ونسخت اللينك في الاعلى كما هو ووضعته ضمن
علامتي الاقتباس

كود HTML:
<a href="http://jordanweather.jo/forum/index.php">
ثم خارج حدود الوسم وقبل معرّف الاغلاق للوسم كتبت جملة انقر هنا
للدخول الى منتديات طقس الاردن
ثم اغلقت المعرّف a :

كود HTML:
انقر هنا للدخول الى منتديات طقس الاردن </a>
الكود كاملا هكذا :

كود HTML:
<a href="http://jordanweather.jo/forum/index.php"> انقر هنا للدخول الى منتديات طقس الاردن </a>
حسنا هذا في حال اردت جلب صفحة ويب من مواقع شبكة الانترنت اقوم بنسخ
اللينك واضعه .. لكن لو كنت اعمل على تصميم موقع متعدد الصفحات واردت ان
اشبك هذه الصفحات بعضها ببعض ..
ايضا الموضوع بسيط للغاية انظر الى الصفحة التالية :

http://www.freewebtown.com/jordan_am/yasminah20.htm

هنا قمت بربط صفحتين في نفس الفايل الذي اعمل فيه لاحظ معي الكود الذي
استعملته

كود HTML:
<a href="yasminah11.htm">click here!</a>
هو نفس الكود السابق لكن الذي اختلف فيه اني قمت بوضع اسم الصفحة فقط
yasminah11.htm طبعا مع امتدادها وهو .html عند الضغط على كلمة click
here! قام بنقلي الى الصفحة المحددة ..

هذا اذا كانت الصفحات في نفس الفايل لكن ماذا لو اردت ان اجلب صفحة من فايل
اخر موجود داخل الفايل الذي اعمل .. كثيرا ما نستخدم في عملية التصميم
عدة فايلات متداخلة نوع من التنظيم لملفات الموقع على سبيل المثال لدي
بداخل الفايل الذي اعمل به ملف الصور images واردت ان اجلب صورة من داخله
او صفحة فيجب علي تحديد مسار الملف فيصبح الكود كالتالي :

كود HTML:
<a href="images/yasminah107.jpg">click here!</a>
هنا جلبت صورة من داخل فايل ال images فقمت بتحديد المسار ومن ثم وضع
اشارة / وتسمية الصور التي اريد

كود HTML:
"images/yasminah107.jpg"
ماذا لو كان الفايل الذي اريد جلب صفحة منه في ارتباط تشعيبي خارج
حدود الفايل الذي اعمل فيه كل ما علي اضافته لتحديد المسار هو /..
على سبيل المثال هنا اردت احضار صفحة من فايل اسمه mysite واردت من داخله
صفحة اسمها index.htm فيكون المسار كالتالي :

كود HTML:
<a href="../mysite/index.htm">click here!</a>
وهكذا ... لا اعتقد انه صعب . كل ما عليك هو التدريب
والمحاولة ..
حتى نلتقي في الفقرة التالية لكم مني اطيب التحايا .

[/size]

هناك
اضافة بسيطة على الفقرة السابقة فيما يخص النص التشعبي قم بفتح الصفحة
التالية ستجد فيها كلمتين اضغط هنا قم بتجربتهم :

http://www.freewebtown.com/jordan_am/yasminah22.htm

الجملة الاولى " انقر هنا 1 " ان قمت بالنقر عليها فانها ستاخذك الى الى
منتديات طقس الاردن ولكن بصفحة اكسبلورر منفصلة ..
لو نظرنا الى الشيفرة المسؤولة عن هذه العملية لوجدناها كتبت هكذا :

كود HTML:
<a target="_top" title= منتدى href="http://www.jordanweather.jo/forum/index.php">انقر هنا</a></font><a href="http://www.jordanweather.jo/forum/index.php">
وطبعا الذي يهمنا من السيفرة السابقة هو هذه الكلمة التي جاءت بعد
معرّف ال a :

كود HTML:
a target="_blank"

نلاحظ المعرّف target يتم استخدامها لتحديد
الايطار الهدف ضمن صفحة ويب نحن هنا اخترنا الايطار الهدف هو blank مسبوقا بالشخطة السفلية _ وهو
تعني ان الايطار الهدف مستقل فتخرج صفحة الاكسبلورر المحددة بايطار مستقل
منفصل عن الصفحة الاصلية .. مع انها هذه الايام استعمالاتها اصبحت محدودة
لانها تسبب نوعا ما ارباك لمتصفحي الويب .. لكنها مفيدة في بعض المواضع
كعرض البوم الصور عندما تخرج الصورة كبيرة في ايطار مستقل عائم وستاتي معنا
لاحقا ان شاء الله بموضوع الايطارات .
ايضا عد الى نفس الصفحة قم بتمرير الماوس على العناوين الموجودين في الصفحة
فستجد انه يخرج لك عنوان بجانب الماوس انقر هنا الاولى يكتب بجانب الماوس
منتدى والثانية يكتب بجانب الماوس كلمة عنوان .. المسؤول هنا هو معرّف

كود HTML:
title= منتدى
title اي اننا اضفنا للنص التشعبي هذه
عنوان شرح للموجود داخل النص التشعبي يظهر عند تمرير الماوس عليه .

طيب كلمة " انقر هنا 2 " التي في صفحة ان ضغطنا عليها يخرج لنا صندوق
الايميل جاهز للتعبئة والارسال مضاف اليه تلقائيا عنوان المرسل اليه ..
وانا قمت بكتابة عنوان وهمي طبعا هو فقط للتجربة ..
اذا القينا نظرة على الشيفرة الموجودة وجدناها هذه :

كود HTML:
<a href="mailto:1234567@mail.com" title= عنوان>انقر هنا</a>
الذي يهمنا فيها والجديد هو كلمة

كود HTML:
mailto:
mailto المتبوعة بنقطتين :
التي سبقت عنوان الايميل . بمجرد وضعها قبل اي ايميل يخرج لك في المتصفح
عند الضغط على الايقونة المخصصة صندوق الارسال .

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

الان سنبدأ في تنسيق الصور في
صفحات ويب والتعرف على وسائطها ..
[size=16]jpg او gif او png
ايا كانت خياراتك من تلك التنسيقات فمعها سنبدأ رحلة وسائط الصور في صفحات
ويب .. بقيادة الكابتن img
ومساعده src .
تتعمل المستعرضات مع عناصر <img> بشكل مختلف عن العناصر الاخرى ..
فالمتصفح عندما يقرأ شيفرة اي صفحة ويب ويمر على عناصر مثل h1 مثلا او غيره
فهو لن يحتاج الا الى عرضه وهو امر بسيط .. لكن عندما يقرا المستعرض عنصر
ال img فستكون قرائته مختلفة اذ سيكون على المستعرض ان يجلب الصورة
المحددة في الكود حتى يتم ترجمته على شاشة المستعرض .
لنأخذ مثال عليه حتى نتمكنمن الشرح اكثر .. عند ضغطك على اللينك التالي
ستشاهد صفحة فيها صورة وهي مجال تمريننا الان :

http://www.freewebtown.com/jordan_am/yasminah23.htm

قم بحفظ الصورة في فايلك الخاص بهذه التمارين :
http://fwt.txdnl.com/4-10/j/o/jordan_am/12.jpg

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

كود HTML:
<html>

<head>
<title>تنسيق الصور</title>
</head>

<body bgcolor="#FFCC66">

<p align="center">
<img src="12.jpg" border="2" width="303" height="280"></p><br><br>

</body>

</html>
ابتدنا المستند بنص ال html وال head و ال title ثم اغلقنا ال head
وافتتحنا ال body حددنا الخلفية بقيمة لون ست عشري من خلال السمة bgcolor

كود HTML:
<html>

<head>
<title>تنسيق الصور</title>
</head>

<body bgcolor="#FFCC66">
هيئت المتصفح للفقرة التالية بإني اريد محتواها ان يأخذ محتوها اتجاه
التوسط في الصفحة عن طريق الامر التالي :

كود HTML:
<p align="center">

بعدها عند وجد المستعرض المعرّف img فقد تهيأ الان لاستقبال صورة وعرضها
على المتصفح حتى يترجم هذا الكود ولنلقي نظرة مقربة :

كود HTML:
<img src="12.jpg" border="2" width="303" height="280">
كما ترى ابتدأت الكود ب بعد فتح القوس >
بمعرّف ال img هذا المعرّف يتم استخدامه لاضافة الصور الى المستند ويب .
والمعرّف img معرّف خالي اي لا يملك معرّف نهاية او اقفال </> .
ثم السمة src وهي بوصلة القبطان img نحدد فيها موضع ملف الصورة التي سيتم
عرضها على صفحة الويب . وبمنى اخر تحدد اسم الملف او عنوان URL لملف الصورة
.
اتبعناها طبعا باشارة = لتحديد المكان والاسم
وهي هنا بطبيعة الحال موجودة بنفس الفايل فهي = اسم الصورة وهو 12 بالامتداد .JPG ..
طبعا عند تنسيق فايلات اي موقع نقوم عادة بوضع فايل داخل الفايل الاساسي
نسميه بالعادة images اي الفايل الخاص بالصور نحفظ بداخله كل الصور الخاصة
بهذا الموقع " عندما نبدأ بتصميم موقع لاحقا ان شاء الله سنتعلم كيفية
ترتيب الفايلات الداخلية لفايل الموقع " فان كانت الصورة بداخله فيكون
عنوان src هو :

كود HTML:
src="images/12.jpg"
حددنا فيها اسم الفايل اولا images متبعا باشارة /
وهي اشارة متابعة الامتداد المؤدي الى مكان الصورة ثم اسم الصورة
التي بداخله وهي

كود HTML:
12.jpg
وايضا ينطبق اذا كان عنوان الصورة من موقع في الانترنت فعلينا احضار
اللينك الخاص بها url ووضعه ضمن هذه السمة فيكون هكذا :

كود HTML:
src="http://fwt.txdnl.com/4-10/j/o/jordan_am/12.jpg"
ال url يمثل المسار الى الصورة ضمن موقع ويب .. مع
انه من الافضل لك دائما ان تستخدم المسارات للصور بان تكون موجودة على نفس
موقعك وبنفس الفايل الخاص به ..
لماذا ؟! لانه سيكون مشوار طويل على المتصفح عندما يترجم شيفرتك فهوة عند
المرور علىهذا اللينك المتضمن url في ال src ان يحضر الصورة من الموقع
الاخر اي يستلزم ان يقوم بتحمليها من موقع اخر وهذا قد يعمل عملية تأخير
للمستعرض في جلب هذه الصورة اذا عليه ان يقرا شيفرة الصفحة الاخرى التي
جلبتها من موقع ويب الاخر حتى يصل الى هذه الصورة ويقوم بترجمتها على
الصفحة . هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ 29

الصورة اسمها 12 دوت اي نقطة . ومن ثم jpg وهو
نوع تنسيق الصورة .
قبل ان نبدأ بالحديث عن التنسيقات كيف اعرف ماهو نوع تنسيق الصور لدي ..
اتجه الى الصورة المرادة اضغط عليها بمين الماوس ثم اتجه الى خصاص الصورة
Properties :

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ Yasminah109

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ Yasminah109

لاحظ معي رقم 1 اظهر لك في اعلى صورة العين تنسيق الصورة وهو jpg رقم 2 هو
اسم الصورة ورقم 3 هو نوع تنسيق الصورة وهو JPEG اي JPG .

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

نتابع الان شرح الكود السابق ادرجنا ايطار للصورة محيط بها وذلك عن طريق
السمة BORDER وكما قلنا سابقا انه لجمالية الصور في اضافة التنسيقات
الجميلة للصفحة حددنا عرض الايطار ب 2 بكسل .

كود HTML:
border="2"
وقلنا ايضا سابقا انه من الافضل ان تحدد طول وعرض للصورة فهي تساعد
في عملية جلب الصورة بشكل اسرع اذ ان المتصفح يقوم مسبقا بحجز هذه المساحة
للصورة مما يسرع في العملية اكثر
هنا حددنا الwidth اي العرض ب 303 بمقدرة بعناصر الصورة اي البكسل والطول
height
280 مقدرة بعناصر الصورة اي البكسل ..
في الفقرة التالية لنا وقفة مع التنسيقات انواعها وسمات كل واحدة منها
ومواطن الضعف والقوة فيها ان شاء الله .
تحياتي

[/size]

» كيفية انشاء موقع خاص لك على النت مجانا
» تريد ان يكون لك منتداك الشخصي ؟ تفضل
» للمغاربة "موقع هام جدا"
» تصميم موقع خاص بالتعريف عن الرسول صلى الله عليه وسلم
» درس تصميم موقع بالفوتوشوب بالتفصيل الممل