رقم | عنوان الدرس | تصفح |
| 1 | الدرس الاول : أساسيات لغة الــ html |  |
| 2 | الدرس الثاني : الاجزاء الاساسيه في صفحات الــ html | |
| 3 | الدرس الثالث : تنسيق الفقرات و العناوين | |
| 4 | الدرس الرابع : تنسيق الخطوط و ما يتعلق بها | |
| 5 | الدرس الخامس : تنسيق الشكل العام لصفحات الــ html | |
| 6 | الدرس السادس : اضافة روابط تشعبيه في صفحات الــ html | |
| 7 | الدرس السابع : اضافة الصور لصفحات الــ html | |
| 8 | الدرس الثامن : القوائم في لغة الــ html | |
| 9 | الدرس التاسع : الجداول و تنسيقها ( 1 ) | |
| 10 | الدرس العاشر : الجداول و تنسيقها (2) | |
الدرس العاشر : الجداول و تنسيقها (2)
السلام عليكم و رحمة الله و بركاته ..
درست اخي في الدرس الماضي كيف تضع جدول في لغة الـ html و كيف تنسقه ..
أنا فصلت الدرسين عشان اسهل لاني أدري أن هذيله الدرسين معقدات شوي ..
اليوم درسنا راح يركز على شيئين :
الاول : دمج الخلايا باستخدام الامرين colspan و rowspan
الثاني : الخلايا و تنسيقها
و راح نبدي بالثاني ..
بسم الله ..
درست اخي في الدرس الماضي كيف تضع جدول في لغة الـ html و كيف تنسقه ..
أنا فصلت الدرسين عشان اسهل لاني أدري أن هذيله الدرسين معقدات شوي ..
اليوم درسنا راح يركز على شيئين :
الاول : دمج الخلايا باستخدام الامرين colspan و rowspan
الثاني : الخلايا و تنسيقها
و راح نبدي بالثاني ..
بسم الله ..
أولاً : الخلايا و تنسقها
مثل ما عرفنا في الدرس الاول من دروس الجداول أنه عدد الخلايا يتحدد بعدد تكرار الامر و لكن السؤال الان : هل من الممكن أن تضيف عناصر html داخل الامر ؟؟ الاجابه : اوف كورس ممكن ممكن تضيف أي حاجه سواء كلام أو صوره .. الخ
مثل ما عرفنا في الدرس الاول من دروس الجداول أنه عدد الخلايا يتحدد بعدد تكرار الامر
كود PHP:
<td> كود PHP:
<td> تنسيق الخلايا مثل تنسيق الجداول فيه خصائص .. بس الفرق بينهم انه الاول يعمم على الجدول ككل بينما الثاني يعمم على خليه وحده بس .. الخليه ممكن تكون صف أو عمود ..
بداية الخصائص الي ممكن تضيفها لــ الخلايا :
1/ خاصية المحاذاه الافقيه
و تستخدم لمحاذاة الكائنات التي داخل الامر محاذاة أفقياً
و تستخدم كالتالي : طبعا مع الالتزام بتغيير المتغير xxx الى احد القيم التاليه :
center = الوسط
left = اليسار
right = لليمين
بداية الخصائص الي ممكن تضيفها لــ الخلايا :
1/ خاصية المحاذاه الافقيه
و تستخدم لمحاذاة الكائنات التي داخل الامر
كود PHP:
<td> و تستخدم كالتالي :
كود PHP:
<td align="xxxxx"> center = الوسط
left = اليسار
right = لليمين
2/ خاصية المحاذاه الرأسيه
و تستخدم لمحاذاة الكائنات التي داخل امر الخليه محاذاه رأسيه
و تستخدم كالتالي : طبعا مع الالتزام بتغيير المتغير yyyyy الى احد القيم التاليه :
bottom = القاع
middle = الوسط
top = الاعلى
baseline = تبعاً للخط الاساسي او خط القاعده
و تستخدم لمحاذاة الكائنات التي داخل امر الخليه محاذاه رأسيه
و تستخدم كالتالي :
كود PHP:
<td align="yyyyy"> bottom = القاع
middle = الوسط
top = الاعلى
baseline = تبعاً للخط الاساسي او خط القاعده
3/ خاصية الطول width
و تستخدم كالتالي : لا لا مب كل حاجه أنا بشرحها ..
هالمره بعطيك من دون مثال .. يعني أشرحلك بالكلام كيف تستخدم ..
تستخدمها مثل لما تستخدمها مع الجداول .. اذا ما تعرف كيف تستخدمها ارجع للدرس الماضي ..
و تستخدم كالتالي : لا لا مب كل حاجه أنا بشرحها ..
هالمره بعطيك من دون مثال .. يعني أشرحلك بالكلام كيف تستخدم ..
تستخدمها مثل لما تستخدمها مع الجداول .. اذا ما تعرف كيف تستخدمها ارجع للدرس الماضي ..
4/ خاصية العرض height
نفس الكلام هذي الخاصيه تستخدمها مثل لما تستخدمها مع الجداول .. بس طبعاً لا تنسى انته تتعامل مع الخلايا مب مع الجداول يعني تغير أمر الجداول الى امر الخلايا ..
نفس الكلام هذي الخاصيه تستخدمها مثل لما تستخدمها مع الجداول .. بس طبعاً لا تنسى انته تتعامل مع الخلايا مب مع الجداول يعني تغير أمر الجداول الى امر الخلايا ..
5/ خاصية لون الخلفيه
ههه لا تخافوا هالمره أنا بشرح ..
و نستخدمها كالتالي : طبعا مع الالتزام بتغيير المتغير cccc الى أحد اكواد الالوان ..
ههه لا تخافوا هالمره أنا بشرح ..
و نستخدمها كالتالي :
كود PHP:
<td bgcolor="ccccc"> معلومات على الطاير :
1- تتكرر بعض الخصائص مع بعض الاوامر .. ما القصد من الجمله الماضيه ؟؟ القصد أوضحلك أنه اذا ما حطيت الخاصيه bgcolor لــ امر الخليه فــ انه الخليه تلقائيا راح تاخذ اللون الي انته حطيت لما نسقت الصفحه أو تحديداً الي موجود فـ الامر 2- من الممكن أنك تلاحظ حاجه لما تحط .. في بعض الكمبيوترات فيها عدة مستعرضات للانترنت ممكن أنك تلاحظ أنه قياس الجدول في المستعرض الاول يختلف عن المستعرض الثاني .. و ذلك لاختلاف التعامل مع الخاصيتين width و height و أيضا لاختلاف طريقة ترجمة شفرة الــ html من مستعرض لاخر .. و بالنسبه لهذا الامر فــ أنا من وجهة نظري أنك أفضل طريقه عشان تحل هذا النزاع تحط الخصائص width و height مع امر الجدول
1- تتكرر بعض الخصائص مع بعض الاوامر .. ما القصد من الجمله الماضيه ؟؟ القصد أوضحلك أنه اذا ما حطيت الخاصيه bgcolor لــ امر الخليه فــ انه الخليه تلقائيا راح تاخذ اللون الي انته حطيت لما نسقت الصفحه أو تحديداً الي موجود فـ الامر
كود PHP:
<body> كود PHP:
<table> ثانياً : خاصية دمج الخلايا
البعض الحين داخل نفسه يقول : أني أنا خرفت ليش حطيت هذي الخاصيه في جزء لوحدها من الدرس مع أنه ما في فرق بينها و بين الخصائص الثانيه ؟؟ الفرق أنه هذي الخاصيه معقده أكثر من الباقي .. شو يعني معقده ؟ الحين بنشوف
البعض الحين داخل نفسه يقول : أني أنا خرفت ليش حطيت هذي الخاصيه في جزء لوحدها من الدرس مع أنه ما في فرق بينها و بين الخصائص الثانيه ؟؟ الفرق أنه هذي الخاصيه معقده أكثر من الباقي .. شو يعني معقده ؟ الحين بنشوف
أولاً : دمج الصفوف .. او الدمج الافقي ..
و نستخدم فيه الامر colspan لكن كيف نحدد عدد الخلايا الي ندمجهم ؟؟ و هل بيكون الدمج كذيه فوضه ؟؟
نحدد عدد الخلايا عن طريق تحديد المتغير الذي يتعلق بالخاصيه colspan
اما بالنسبه للدمج فيكون بشكل منتظم .. يعني انته اذا سويت للخليه هذي دمج راح تندمج مع الي جنبها ..
و تستخدم هذي الخاصيه كالتالي : مع الالتزام بتغيير الــ n الى عدد الخلايا التي تريد أن تدمجها مع الخليه التي وضعت معها هذي الخاصيه .. طبعاً لا تنسى انه احنا نشتغل الحين أفقياً ..
و نستخدم فيه الامر colspan لكن كيف نحدد عدد الخلايا الي ندمجهم ؟؟ و هل بيكون الدمج كذيه فوضه ؟؟
نحدد عدد الخلايا عن طريق تحديد المتغير الذي يتعلق بالخاصيه colspan
اما بالنسبه للدمج فيكون بشكل منتظم .. يعني انته اذا سويت للخليه هذي دمج راح تندمج مع الي جنبها ..
و تستخدم هذي الخاصيه كالتالي :
كود PHP:
<td colspan="n"> ثانياً : دمج الاعمده .. او الدمج العمودي
و نستخدم معاه الخاصيه rowspan و يطابق في مواصفاته الامر colspan
و يستخدم كالتالي : مثل ما اتفقنا نغير الــ n الى عدد الخلايا الي تريد تدمجهم مع الخليه الي احنا قاعدين نشتغل عليها .. طبعاً رأسياً ..
ملاحظه : الدمج الرأسي أو العمودي يكون للاسفل يعني اذا انته حطيت دمج رأسي فــ وحده من الخلايا راح تندمج تلقائي مع الي تحتها ..
و نستخدم معاه الخاصيه rowspan و يطابق في مواصفاته الامر colspan
و يستخدم كالتالي :
كود PHP:
<td rowspan="n"> ملاحظه : الدمج الرأسي أو العمودي يكون للاسفل يعني اذا انته حطيت دمج رأسي فــ وحده من الخلايا راح تندمج تلقائي مع الي تحتها ..
آخيرا و ليس آخراً .. تطبيق عملي على كل هذا الكلام ..
كود PHP:
<html>
[right]<head> [/right]
[right]<title> الجداول </title> [/right]
[right]</head> [/right]
[right]<table border="3" width="300" height="200"> [/right]
[right]<tr> [/right]
<td colspan="3" bgcolor="ffffff#"> خليه 1 </td>
[right]</tr>
<tr>
<td> خليه 2 </td> <td> خليه 2 </td>
</tr>
<tr>
<td rospan="2"> خليه 3 </td>
</tr>
</table>
</body>
</html>[/right] و مثل ما عودتكم راح تكون نتيجة الشفره بعد فتحها بالمستعرض كذا :
أسئلة الدرس ..
- هل يمكن اضافة علامات تنسيق الفقرات و العناوين الى احدى خلايا الجدول ؟؟
- هل يمكن اضافة علامات تنسيق الفقرات و العناوين الى احدى خلايا الجدول ؟؟
تطبيقات الدرس ..
- غير طول الجدول الي فالتطبيق الى 500
- و أيضاً غير محتوى الخليه 1 .. و اعمل داخلها قائمه عدديه راح يكون مكتوب فالقائمه التالي :
1- سلطنة عمان
2- الامارات العربيه المتحده
3- السعوديه
- و غير حجم الحدود و خليه 2
و سلامتكم .. ولا تنسوا أبي أشوف التطبيقات في المناقشه ..
تحياتي : الوليد الراشدي
الدرس التاسع : الجداول و تنسيقها (1)
شباب تكفون ركزوا عندي
الجداول أصعب شي لكنها مفيده واجد بالاخص لما تسوي ستايل لمنتدى أو مجله ..
تابعوا عندي خطوه خطوه عشان تفهموا زين ..
أولاً : الاوامر الاساسيه لادراج جدول
شوفوا هالشفره ..
كود PHP:
<html>
<head>
<title> الجداول </title>
</head>
<body>
<table>
<tr>
<td> خليه </td> <td> خليه </td>
</tr>
<tr>
<td> خليه </td> <td> خليه </td>
</tr>
</table>
</body>
</html> 
شرح الشفره ..
شوفوا في ثلاث أوامر أساسيه عند وضع أي جدول الي هي ..
كود PHP:
<table> كود PHP:
<tr> كود PHP:
<td> ثانياً : الخصائص التي تستخدم في تنسيق (( الجدول ))
و راح نعددها واحد واحد و بعدين راح أعطيكم مثال يوضحها كلها ان شاء الله ,,
1/ الخاصية border
و هي لاضافة حدود للجدول .. و نستخدمها على هذا الشكل ..
كود PHP:
<table border="x"> و هذا يعني أن حجم الحد سيكون 4 .. ولكن اذا كنا نريد نحط ما فيه حد شو نسوي ؟؟ الجواب : نحط بدل x الرقم 0
2/ خاصية العرض width
و تستخدم كالتالي :
كود PHP:
<table width="xxx"> الاولى :متغير يكون رقم كالتالي :
كود PHP:
<table width="400"> <table width="75%">
2/ خاصية الارتفاع height
حالها حال خاصية العرض ممكن بالنسبه المئويه و ممكن بالارقام ..
ملاحظه : جميع القياسات التي تضعها في كل من خاصية الطول و العرض و الارتفاع و غيرها بالبكسل و ليست بالسنتي متر ..
نرجع لخاصيتنا ..
لاحظ كيف نكتبها ..
كود PHP:
<table height="100"> كود PHP:
<table height="20%"> تطبيق عملي على كل الي قلناه اليوم ..
كود PHP:
<html>
<head>
<title> الجداول </title>
</head>
<body>
<table border="3" width="300" height="75%">
<tr>
<td> خليه </td> <td> خليه </td>
</tr>
<tr>
<td> خليه </td> <td> خليه </td>
</tr>
</table>
</body>
</html> 
لم ننتهي من الجداول الا و هذي البدايه بس ..
يـــــــــــــــــتــــ الجداول ــــــــــــــبـــ و تنسيقها (2) ــــــــــــــــع
للتذكير فقط : يجب حفظ حقوق الكاتب والمصدر عند نقل الدرس من هذه الدورة وتذكر أنه لا يجوز نسب المواضيع لغير كاتبها.
تحت طائلة المحاسبه في الدنيا و العقاب في الاخره ..
تحياتي : الوليد الراشدي
الدرس الثامن : القوائم في لغة الــ html
السلام عليكم و رحمة الله و بركاته
اليوم راح نتبع طريقه جديده للشرح ..
فالبدايه راح اعطيكم مثال يتضمن جميع ما في الدرس و بعدها راح نبدي نشرح المثال شوي شوي أو مثل ما يقولوا الهنود ( توره توره)
لاحظ عندي .. السلام عليكم و رحمة الله و بركاته
اليوم راح نتبع طريقه جديده للشرح ..
فالبدايه راح اعطيكم مثال يتضمن جميع ما في الدرس و بعدها راح نبدي نشرح المثال شوي شوي أو مثل ما يقولوا الهنود ( توره توره)
كود PHP:
<html>
<head>
<title> القوائم </title>
</head>
<body>
<ol>
<li> مسقط <li> الدوحه <li> الرياض <li> أبو ظبي <li> القاهره<li> الدار البيضاء </ol>
<br>
<ul>
<li> بغداد<li> المنامه <li> الكويت <li> دمشق</ul>
</body>
</html> اذا حولنا امتدادها الى htm راح تكون كذا النتيجه :-
في البدايه الامر
كود:
<br>
بسم الله نبدأ نشرح المثال
اولاً : الامر <ol>
هذا الامر يستخدم لوضع قائمه متسلسله أو بالارقام
ثانيا : الامر
كود:
<ul>
ثالثاً : الامر
كود:
<li>
نبدي نتعمق شوي ..
أولاً : القوائم العدديه
توجد للقوائم العددية عدة أنواع .. تقريباً أربعه أو المهمه أربعه
بس السؤال كيف نحدد نوع القائمه هذي ؟
سؤال حله مب صعب ..
شوف حبيبي لما تريد تحدد نوع القائمه تستخدم الخاصيه type
و في ما يلي الانواع الاربعه الي تكلمت عنها :
-
كود:
<ol type="I">
-
كود:
<ol type="i">
-
كود:
<ol type="a">
-
كود:
<ol type="A">
ثانياً : القوائم الغير عدديه
و تعمل على شكلين هما :
كود:
<ul type="circle">
كود:
<ul type="square">
أخر حاجه في درس القوائم
قــوائــ التعريف ـم
قوائم التعريف تختلف كثيراً عن القوائم العاديه
كيف يعني ؟
بنشوف
لاحظ عندي في هذا المثال البسيط
كود PHP:
<html>
<head>
<title> قوائم التعريف </title>
</head>
<body>
<dl>
<dt> مسقط <dd> عاصمة سلطنة عمان <dt> الرياض <dd> عاصمة المملكه العربيه السعوديه <dt> أبو ظبي <dd> عاصمة الامارات العربيه المتحده<dt> موقع مطور <dd> عاصمة المطورين العرب </dl>
</body>
</html> و راح تكون النتيجه كذا:
أولاً : الامر
كود:
<dl>
ثانياً : الامر
كود:
<dt>
و يستعمل لتحديد بداية النقطه أو الجزئيه من القائمه .. و هو أمر مفرد يعني مب لازم يكون له أمر نهايه
ثالثا : الامر
كود:
<dd>
و يستعمل لتحديد بداية شرح النقطه .. و هو أيضاً امر مفرد
فكر في هذا السؤال بعد الانتهاء من تنفيذ الدرس :
هل يجب وضع الخاصيه type عند علامة نهاية أمر القائمه سواء كانت قائمه عدديه أم غير عدديه ؟؟
و فكر ايضاً :
كيف تستطيع أن تعمل تنسيق لخط القائمه ؟؟
تطبيق عملي على الدرس :
اعمل صفحة html و ليكن العنوان " البلدان العربيه "
اكتب التالي مع مراعاة التنسيقات المكتوبه بين الاقواس :
البلدان العربيه و عواصمها (( اعمله خط عريض و خلي حجم الخط 3 و كمان محاذاه لليمين و خليه العنوان الاول))
((اعمل خط أفقي حجمه 3 و لونه أزرق ))
(( اعمل قائمة تعريف غير عدديه و اكتب فيها التالي مع الاخذ بعين الاعتبار أن العبارات المكتوبه بين القوسين هي الشرح و الكلمات في البدايه هي النقاط الاساسيه ))
سلطنة عمان .. (( عاصمتها مسقط ))
الامارات (( عاصمتها ابو ظبي))
مصر (( القاهره))
تونس (( تونس ))
و ارجو ارفاق تطبيقاتكم في المناقشه ..
و بكذا نكون خلصنا درس اليوم ..
و السلام عليكم و رحمة الله و بركاته
تحياتي : الوليد الراشدي
الدرس السابع : اضافة الصور لصفحات الــ html
نبدأ بسم الله ..
شوفوا يا اخوان هذا يمكن يكون واحد من أسهل الدروس ..
لان بس في أمر واحد أساسي و كل الاوامر الباقيه تتعلق بالدروس الثانيه ..
الامر الاساسي لاضافة الصور ..
يلله نشوف هالمثال البسيط ..
كود PHP:
<html>
<head>
<title> الصور </title>
</head>
<body>
<h1 align="center">
<img src="logo.jpg" alt="logo">
</h1>
</body>
</html> 
نبدي نشرحه .. بسم الله ..
أولاً : سبق و ذكرنا تفسير الامر <h1> الي هو أمر لتحديد العناوين و تمييزها عن غيرها
ثانياً :
كود:
<img src="xxxxx.yyy>
الخصائص التي يمكن اضافتها مع أمر الصوره ..
الحين يا اخوان لاحظوا معي في هذي الشفره ..
كود PHP:
<html>
<head>
<title> وضع رابط و خصائص للصوره </title>
</head>
<body>
<a href="http://www.mtwer.com">
<img src="logo.jpg" alt=" موقع مطور " width=90 height=90 border=2>
</a>
</body>
</html> بعد ما نحط الشفره السابقه في امتداد htm راح تصير عندنا كذا ..
نشرح هالشفره من الالف الى الياء ..
أول شي الامر herf تعرفوه و اذا كنت ما تعرفه راجع درس الوصلات التشعبيه
ثاني شي الامر img src شرحناه قبل شوي
ثالث شي الخصائص الي أضفناه الحين أحاول أشرحها بالتفصيل الممل ..
الحين راح ناخذ الاوامر الاضافيه ..
الامر align و يستخدم كالتالي .. width = العرض و تتبعه بعلامة يساوي بعد علامة يساوي تكتب رقم تحددبه عرض الصوره height = الارتفاع و تتبعه بعلامة يساوي بعد علامة يساوي تحط رقم تحددبه ارتفاع الصوره alt = توضيح للصوره لو تحط الشفره هذي بالمفكره و تحفظها بصيغة htm راح تفهم أكثر border = الحدود و عرض الحد
كود:
<img src="logo.jpg" align="top">
bottom
middle
left
right
طبعا تحطها كالتالي .. top
كود:
<img src="logo.jpg" align="xxxxx">
بعد الانتهاء من الدرس فكر في السؤال التالي :
- ما سبب اختلاف الخواص في الامر align عند استخدامه مع النصوص و عند استخدامه مع الصور ؟؟؟
و ايضاً فكر في :
- هل من الممكن عمل الصوره كــ عنوان عن طريق الامر
كود:
<hn>
كود:
<p>
و يلله عاد أبي أشوف الاجابات فالمناقشه ..
و السلام عليكم و رحمة الله و بركاته
تحياتي : الوليد الراشدي
الدرس السادس : اضافة روابط تشعبيه في صفحات الــ html
السلام عليكم و رحمة الله و بركاته
أولاً : اضافة وصله تشعبيه لنص
و يأتي بالشكل التالي ..
كود:
<a href="xxxxxxx.xxx"> yyyyyy </a>
الاول yyyy = تكتب بدلاً منه الكلام الذي تريد اذا ضغطت عليه يوديك لــ الرابط المحدد
الثاني xxxx = و تحط بدله الرابط الي تبيه
ثانياً : اضافة وصله تشعبيه لــ صوره
و يأتي بالشكل التالي ..
كود:
<a href="xxxxxx"> <img src="yyyyyy"> </a>
الاول xxxxx = تحط بدل منه الرابط الي تبيه
الثاني yyyyy = تحط بدله رابط الصوره
الحين نقط اضافيه ..
- اضافة رابط مراسله مباشره ..
و يأتي بالشكل التالي :
كود:
<a href="mailto:xxxxxx@xxxxxx"> yyyyy </a>
xxxxxx = الايميل الذي تريد أن ترسل له الرسائل
yyyyyy = الكلام الي تريد تحط فيه رابط المراسله
- اضافة رابط تشعبي لــ ملف موجود في نفس المجلد ..
و تأتي بالشكل التالي .. على سبيل المثال اسم الصفحه alwaleed.htm و موجوده في نفس المجلد الي فيه الصفحه الي الحين انته تشتغل فيها ..
كود:
<a href="alwaleed.htm">
و هذا رد على السؤال الي طرحته في الدرس الاول .. شفتوا كيف ..
تعالوا نطبق هذا كله على صفحه عشان بالمثال يتضح المقال ..
كود PHP:
<html>
<head>
<title> الروابط التشعبيه </title>
</head>
<body>
<h1> زورونا في <a href="www.mtwer.com"> موقع مطور </a> <br>
<hr>
<h2> الوليد الراشدي </h2>
<br>
<h3> لمراسلتي اضغط <a href="mailto:alwaleed-dos@windowslive.com"> هنا </a> </h3>
</body>
</html> 
اضافة رابط تشعبي لجزء من الصفحه ..
و هذي هي الجزئيه الاصعب في كامل الدرس ..
ركزوا معاي تكفون ..
لما نريد نحط رابط لمكان معين في الصفحه نتبع الخطوات التاليه ..
أول حاجه نروح لاول كلمه في الفقره الي نبي نحط لها الرابط ..
كود:
<a name="xxxxxx"> yyyyy </a>
xxxxxx= تسمية الجزء من الصفحه الي تبي تحطله رابط
yyyyyy= اول كلمه في الفقره
الحين عاد ركز معي كثييييير
لاحظ كيف راح نحط أمر الرابط التشعبي ..
كود:
<a href="xxxx.htm#yyyyy"> zzzzzzz </a>
xxxx.htm= اسم الصفحه
yyyyy= اسم الجزء من الصفحه
zzzzz= النص الذي تريد أن تضيف له الرابط التشعبي
مع الالتزام بوجود علامة الـ # اذ انه لا يتم الاكتفاء باسم الصفحه و الجزء
سؤال في نهاية الدرس :
اذا كنت تود عمل رابط تشعبي لاحدى الصفحات الموجوده لديك في نفس الملف داخل الموقع هل تستخدم طريقة اضافة الروابط التشعبيه القياسيه أم تستخدم طريقة اضافة رابط لصفحه موجوده في نفس الملف ؟؟ و ليش ؟
للتذكير : الدروس خطتها أناملي و هي محفوظة الحقوق لدى موقع مطور
و السلام عليكم و رحمة الله و بركاته
تحياتي : الوليد الراشدي
الدرس الخامس : تنسيق الشكل العام لصفحات الــ html
السلام عليكم و رحمة الله وبركاته ..
أوامر التحكم بالشكل العام للصفحه ..
خلكم معي يا الغالين ..
شوفوا هالامر ..
أولاً : الصيغه الاساسيه لاوامر تنسيق الشكل العام لصفحات الــ htmlأوامر التحكم بالشكل العام للصفحه ..
خلكم معي يا الغالين ..
شوفوا هالامر ..
كود PHP:
<body xxxxx="ffffff"> لاحظ معي أخي / أختي :
المتغيرات الي أنا تكلمت عنها في الدرس الاول تذكروها ؟؟
أبرز مثال عليها متغيرات ( خواص ) الالوان ..
في اخر الدوره ان شاء الله بتكون هناك صفحه فيها كل لون محطوط داخل مربع و داخل المربع مكتوب الرقم او الكود تبعه ..
بس الحين شوفوا هالشفره عندي الحين ..
كود PHP:
<html>
<head>
<title> صفحة تعلم أوامر تنسيق الصفحه </title>
</head>
<body bgcolor="#00ff00"> لون خلفية الصفحه </body>
</html> راح تلاحظوا تغير لون الخلفيه مثل ما هو واضح في الصوره ..
طبعاً البعض يسألني : وين باقي الصفحه يا اخونا ؟ باقي الصفحه مب مهم أهم حاجه لاحظتوا تغير لون الخلفيه ..
ثانياً : جملة أوامر تنسيق الشكل العام للصفحات
ملاحظه : قبل لا نبدي بــ تعديد أوامر تنسيق الشكل العام للصفحات .. إحنا راح نعتمد على الصيغه الاساسيه الي درسناها في الفصل الاول طبعاً مع تغيير الخاصيه الموجوده جنب أمر البودي body الي هو يحدد مضمون الصفحه ..
شوفوا فالكود الي استخدمناه قبل شوي أكبر مثال ..
الحين يلله بعطيكم أهم الاوامر في تنسيق الشكل العام للصفحه ..
ثالثاً : جمع عدة خواص مع الامر body
alink : و تعني تحديد لون الروابط النشطه vlink : و تعني تحديد لون الروابط الغير نشطه text : و تعني تحديد لون النص العام bgcolor : وتعني تحديد لون للخلفيه background : و تعني تحديد صوره للخلفيه ( ملاحظه : الخاصيه أو المتغير الذي سوف تربطه بهذا الامر يجب أن يكون رابط url )
كود PHP:
<body bgcolor="#00ff00 link="#ff0000" alink="#0000ff" vlink="#00ff00""> هالكود واضح على ما أظن ..
بس حبيت أوضح فيه الطريقيه القياسيه لــ كتابة الاوامر الجماعيه لــ تنسيق الشكل العام للصفحه ..
طبعاً أنا ما تأكدت من صحة هذا الكود بس أهم شي عندي تكونوا فهمتوا الطريقه القياسيه .. بس في حاله ثانيه للحاله القياسيه
و الي هي إذا كان خاصية الـ الخلفيه صوره مو لون ..
و تكون فهاذي الصيغه ..
كود PHP:
<body background="5454.jpg link="#ff0000" alink="#0000ff" vlink="#00ff00""> بس يا الحلوين ترا في نقطه بتعرفوها في درس الروابط التشعبيه و راح تلاحظ أن الرابط الي أنا حطيته صح الا و ازيدك من الشعر بيت هذي الطريقه أحسن من الطريقه المعتاده .. ليش ؟؟ تابع درس الروابط التشعبه و بتعرف ان شاء الله ..
سؤال نهاية الدرس ..
ما الفرث بين : 1- alink
2- vlink
وماذا تعني كل منهما ؟؟
يلله يا اخون خلصنا ..
للتذكير : الدروس خطتها أناملي و هي ملك لي و حقوقها محفوظه لدى موقع مطور
تحياتي : الوليد الراشدي
بسم الله الرحمن الرحيم
اللهم علمنا ما ينفعنا و انفعنا بما علتنا
الدرس الرابع : تنسيق الخطوط
اللهم علمنا ما ينفعنا و انفعنا بما علتنا
الدرس الرابع : تنسيق الخطوط
على الله نتوكل
تبدأ جميع الاوامر المتعلقه بــ الخطوط دائما بالامر
كود PHP:
<font> كود PHP:
</font> و هناك أربع خواص أساسيه لــ أوامر الخطوط تابعوا معي يا اخوان .. أولاً : خاصية الوجه face ( نوع الخط ) و تستخدم كالتالي :
كود PHP:
<font face="traditional arabic, arabic transparent, simplified arabic">يوضع النص هنــا ....
</font> لان اذا ما لم يستطع المتصفح عند ترجمة الشفره الى صفحة ويب الخط الاول راح يحط الخط الي بعده
و اذا ما حصل الثاني يحط الي بعده وعلى هذا المنوال
ثانياً : لون الكتابه
وتأتي كالتالي :
كود PHP:
<font color="#ff00000"> يوضع النص هنــا ....
</font> تأتي كالتالي :
كود PHP:
<font size="2">يوضع النص هنــا ....
</font> مثال على تصغير الخط
كود PHP:
<font size="-3"> يوضع النص هنــا ....
</font> مثال على تكبير الخط
كود PHP:
<font size="3">يوضع النص هنــا ....
</font> الفرق بين كلتا الحالتين هو:
وضعنا اشارت سالب
كود PHP:
- لتصبح بهذا الشكل
كود PHP:
-3 كود PHP:
<html>
<head>
<title> الخطوط </title>
</head>
<body>
<font face="arial" size="5" color="#ff0000">دورة لغة النص المتشعب على موقع مطور .. القاء : الوليد الراشدي</font>
<p>
<font face="andalus" size="3" color="#0000ff">www.mtwer.com <br>للتواصل مع ملقي الدوره : عن طريق الهاتف : 0096899804305
عن طريق الايميل : alwaleed-dos@windowslive.com</font>
</body>
</html> تعالو نعمل مناقشه بسيطه للكود
اولا فتحنا بداية كود الـ html
وطبعا الكل بعرف كيف بنفتح كود الـ html لاننا اخذناه في دروس سابقه
وتحديدا في الدرس الاول
الان راح نعمل مناقشه للاكواد اللتي تم شرحها في هذا الدرس
اولا الكود
كود PHP:
<font face="arial" size="5" color="#ff0000">دورة لغة النص المتشعب على موقع مطور .. القاء : الوليد الراشدي</font> عند وضع بداية وسم الخط
كود PHP:
<font> الان نضع شكل الخط مثلا بالخاصيه face
لتصبح هكذا
كود PHP:
<font face="نضع اسم الخط المطلوب هنا بين العلامتين "" "> كود PHP:
</font> يصبح الكود كالتالي
كود PHP:
<font face="tahoma">نضع النص الملطوب هنا</font> نفس الكلام اللي شرحنا في خاصية face ( الشكل )
ليصبح الكود كالتالي
كود PHP:
<font size="4">نضع النص المطلوب هنا</font> الخطوط في لغة ال html
تكون من 1 الى 7
اي رقم نضعه اكبر من الرقم 7 يتعرف عليه كانه خط بحجم 7
الان خاصية اللون color
نفس الكلام وما يتغير اي شيء
ليصبح الكود كالتالي
كود PHP:
<font color="ff0000">نضع النص المطلوب هنا</font> http://mtwer.com/vb/showthread.php?t=3390
اذا حب احد يكتب صفحتو عن طريق اسماء الالوان فهو حر وذلك يسهل عليك معرفة اللون عند المراجعه والوصول اليه بسرعه اكثر
بس يا اخوان احنا تونا ما خلصنا بعد ..
شوفوا في ثلاث أوامر موجوده تندرج تحت نفس الموضوع ونحنا اخذناها في دروس سابقه ..
الي هي أوامر الكتابه بخط عريض أو الكتابه اللي تحتها خط او كتابه بخط مائل
يلله نشوفها مع بعض مره اخرى للتذكير ..
أولاً : الخط العريض ..
كود PHP:
<b> الكتابه هنا </b> كود PHP:
<u> الكتابه هنا </u> كود PHP:
<i> الكتابه هنا </i> ملاحظه : طريقة كتابة الاوامر مع بعضها البعض تأتي كالتالي :
كود PHP:
<b><u><i> ضع الكلام هنا </b></u></i> كود PHP:
<b><i><u><font face="tahoma" color="ffff00" size="5">النص المطلوب هنا </b></i></u></font> اعمل صفحة html كامله بكامل أجزاءها و ليكن العنوان " تنسيق الخطوط باستخدام html "
و أكتب الفقره التاليه في العنوان مع مراعاة التنسيقات الموجوده ما بين الاقواس مثلما يلي :
الحرب العالميه الاولى (( تجعله العنوان الاول و تعمله محاذاه للوسط و تعمله بالخط العريض ))
(( تعمل خط أفقي و لك الحريه في اختيار تنسيقه لكن لازم تعمله محاذاه للوسط ))
مقدمه (( تعمل تحته خط و تجعله العنوان الثاني ))
(( تترك سطر ))
الحرب العالميه بدأت لاسباب مجهوله و بعضها معلومه لكن الاسباب المعلومه لم تكن تبرر الحرب و ما كان فيها من دمار .
الا أن الاطماع الاستعماريه كانت الهدف الاول للدول المتحاربه .
(( تعمل هذا الكلام في فقره وتعمله محاذاه لليمين و تخلي حجم الخط 2 و لونه أزرق مع مراعات كل سطر من الفقره كما هو الان في هذا الموضوع ))
=========================================وبكذا نكون خلصنا ..
و السلام عليكم و رحمة الله و بركاته
تحياتي ملقي الدوره : الوليد الراشدي
وللتذكير : يجب حفوظ حقوقي لــ كتابة الدروس و الموقع
الاشتراك في:
التعليقات (Atom)