دروس متنوعة في مادة html

تاريخ التسجيل : 30/06/2008

: html دروس متنوعة في مادة

اللمهم انا وعدتكم اني راح انزل دروس عن مادة html وهي خاصة لطلاب المستوى الرابع لكن المادة مررره سهلة يعني ممكن لاي عضو من اي تخصص انه يقرا الدرس وما عليه انه يطبق الكلام المكتوب حرف حرف وان شاء الله يتعلم طبعا المواضيع اللي برفعها مدمجة بصور امممم حاولوا انكم تطبقوا كل موضوع واللي يجد صعوبه في اي شي من الاكواد او ما فهم يعطيني خبر وانا ان شاء الله اوضحها اكثر بسم الله نبدا بالدرس الاول
ملاحظة: اللي ما يعرف شي ابدا عن هالمادة يرجع للرابط التالي ويرجع يكمل معانا http://www.ipaclub.net/vb/showthread.php?t=937
التنسيق الأساسي للصفحة أن كل الصفحات تبدأ بهيكل أساسي ، و لنبدأ الآن لتتعلم أول وسم (Tag) الأوسمه :- الأوسمه هي الأشياء التي بين هذين القوسين <>
بالتأكيد أنت لم تري أكواد تبدأ بهذين الشكلين من قبل حسنن من قائمة View أختار Source ،
أنت تري الآن النص الذي تقرأه ومحاط في أغلب الأحوال بـ <> هذه الأكواد هي التي صنعت هذه الصفحة التي أمامك هام جداأغلب الأوسمة تبدأ <> من اليسار وتنتهي في اليمين فالتشاهد الوسوم التالية:
وسم البداية وسم النهاية
<‎/HTML>
<‎/HEAD>
<‎/TITLE> <br /><BODY> <‎/BODY><br />ماذا تلاحظ؟ أن كل منها يتألف من زوج من الوسوم أحدهما وسم البداية، والآخر وسم النهاية. ويتميز وسم النهاية بوجود الرمز / . <br />تأمل الرسم التالي، فهو يعطي فكرة عن تركيب ملف<br />http://html4arab.com/images/htsketsh.gif<br />إذن فملف Html يبدأ دائماً بالوسم <HTML> وينتهي بالوسم <‎/HTML>. لا تنسى ذلك!<br />أما الوسم <HEAD> فيحدد بداية المقطع الذي يحتوي على المعلومات الخاصة بتعريف الصفحة. كالعنوان الظاهر على شريط عنوان المتصفح. <br />وهذا العنوان بدوره يحتاج لأن يوضع بين الوسمين:<br /><TITLE> … <‎/TITLE> وبالطبع يجب كتابة الوسم <‎/HEAD> لكي ننهي هذا المقطع.<br />نأتي إلى الوسم <BODY> والذي يتم كتابة نصوص صفحة الويب ضمنه، بالإضافة إلى إدراج الصور والجداول وباقي محتويات الصفحة. وهو أيضاً يحتاج إلى وسم الإنهاء <‎/BODY><br />و الآن ما رأيك بإنشاء صفحة <br />قم بفتح برنامج Notepad أو أي برنامج محرر النصوص و أكتب هذا<br /><br /><HTML><br /><HEAD><br /><TITLE>My first HTML page

Wow I am Writing My First Page

والآن قم بحفظ ما كتبته في ملف وبأي اسم تختاره. ولا تنسى أن الامتداد المستخدم في أسماء ملفات HTML هو htm. أو html. مثلاً أنا اخترت الاسم ‎FirstPage.htm
ومن الأفضل أن تقوم بإنشاء مجلد مستقل على القرص الصلب لكي تحفظ به ملفاتك فهذا يسهل عليك عملية استرجاعها للعرض أو التحديث
وليكن هذا المجلد مثلاً بالاسم C:\htmlfiles (أو بأي اسم تختاره)
ولكن لابد وأن يكون الأسم أما حروف ، أرقام ، _ أو - ولا يجوز أستخدام أي علامات أخري في لحفظ الملف.
حان وقت العرض، لكي نشاهد نتيجة ما كتبناه. قم بتشغيل متصفح الإنترنت الذي تستخدمه.
فإذا كان Netscape Navigator اختر الأمر Open File… من قائمة File. أما في MS Internet Explorer فاختر الأمر Open… من قائمة File. ثم حدد المسار الذي يوجد به الملف.
أنا شخصياً قمت بتحديد المسار التالي:
C:\htmlfiles\FirstPage.htm
وذلك طبعاً حسب الافتراضات السابقة التي اتبعتها عند تخزين الملف. وهذا ما حصلت عليه :-
http://html4arab.com/images/mf1.gif
وماذا عنك؟ هل حصلت على نفس النتيجة؟
إذن مبروك :MaM(41):
لقد قمت بإنشاء أول صفحة ويب خاصة بك. وقبل أن نستمر أريد أن أنبهك إلى بعض الملاحظات عند كتابة صفحات الويب:
•لا يوجد فرق بين كتابة الوسوم بالأحرف الإنجليزية الكبيرة UPPERCASE أو الأحرف الصغيرة lowercase. لذلك تستطيع الكتابة بأي شكل منهما أو حتى الكتابة بكليهما.
•إن المتصفحات لا تأخذ بعين الاعتبار الفراغات الزائدة أو إشارات نهاية الفقرات (أي عندما تقوم بضغط مفتاح Enter) التي تجدها هذه المتصفحات في ملف Html.
وبعبارة أخرى فإن باستطاعتك كتابة ملفك السابق بالشكل التالي:
My first HTML page
Wow, I'm writing my first webpage ‎
أو بالشكل التالي:

<br />My first HTML page<br /><‎/TITLE><br /><‎/HEAD><br /><BODY> <br />Wow, I'm writing my First Page<br /><‎/BODY><br /><‎/HTML><br />وفي كل الحالات ستحصل على نفس النتيجة.وإذا كنت من تلك النوعية من الناس التي لا تصدق كل ما يقال… تستطيع أن تجرب ذلك بنفسك!!! هيا جرب. <br />لكن هذا لا يعني أن الفقرة المكونة مثلاً من عشرة أسطر ستمتد إلى عدة أمتار بعرض الشاشة.<br />كلا بالطبع لأن المتصفح سيقوم بعمل التفاف تلقائي لها بحسب عرض الشاشة، مهما كان مقدار هذا العرض.<br />والآن قد تتساءل، إذن كيف يمكن التحكم بمقدار النص المكتوب في كل سطر وكيف يمكن تحديد نهاية الفقرة وبداية الفقرة التي تليها؟<br />في الدرس الثاني راح يتم شرحها بالتفصيل<br />تقبلوا تحياتي<br />حمودي الرياض<br />ولا تنسوني من دعائكم <br />وان شاء الله بنزل الدرس الثاني في موضوع مستقل <br /><br /><br /><br />ملاحظة : <br />سيتم حذف اي رد قبل اكتمال الدروس <br />وسيتم اشعاركم بانتهائها في اخر درس<br /><br /> <br /><br />الدرس الثاني ولكن بدون صور ارجوا منكم التطبيق وملاحظة الفرق بين الاكواد واللي تواجهة مشكله حاضرين في الخدمة <br />بسم الله نبدا <br /><br />نهايه سطر وبدايه سطر جديد:-<br />وسوف نستخدم الوسم <BR> لتحديد النهاية للسطر.<br />والبدء بسطر جديد (لاحظ أن هذا الوسم مفرد، أي ليس له وسم نهاية). ونعود إلى المثال السابق،<br />قم بتعديل الملف لكي يصبح بالشكل التالي<br /><HTML><br /><HEAD><br /><TITLE> <br />My first HTML page<br /><‎/TITLE><br /><‎/HEAD><br /><BODY><br />Wow, <br /><BR> I'm writing my <br /><BR>‎first page<br /><‎/BODY><br /><‎/HTML> <br />و الآن كيف أضيف سطر جديد ؟<br />ولفعل هذا نستخدم الوسم <P><P/> <br />الذي يقوم تقريباً بنفس عمل الوسم السابق أي أنه ينهي السطر أو الفقرة ويبدأ بسطر جديد لكن مع إضافة سطر إضافي فارغ بين الفقرات. ( يلاحظ ان هذا الوسم لديه وسم نهايه لكن من الممكن أستخدامة بدون وسم النهايه )<br /><HTML><br /><HEAD><br /><TITLE> <br />My first HTML page<br /><‎/TITLE><br /><‎/HEAD><br /><BODY><br />Wow,<br /><P> I'm writing my<br /><P>first page<br /><‎/BODY><br /><‎/HTML><br />الفراغات :- تعتبر رموزاً خاصة لذلك لا نستطيع التحكم بها وبعددها إلا باستخدام الوسم ‎ (Non Breakable Space ‎ والأحرف هي اختصار للعبارة ) ‎ .<br />وإذا أردت إدخال عدة فراغات بين نص وآخر ما عليك إلا كتابة هذا الوسم بنفس عدد الفراغات المطلوب.<br />كما يجب عليك التقيد بالأحرف الصغيرة هنا كما موضح بالشكل التالي:<br /><br /><HTML><br /><HEAD><br /><TITLE> <br />My first HTML page<br /><‎/TITLE><br /><‎/HEAD><br /><BODY><br />Wow, ‎<br />I'm writing ‎<br />‎ my first First page<br /><‎/BODY><br /><‎/HTML> <br />الخواص و الآن سأشرح جزء متقدم قليلا :- كيف نقوم بتمركز النص أي جعل النص في منتصف الصفحة ، <br />الوسم الأساسي لهذه الخاصيه هو <CENTER> ولكن هذا الوسم قد تم تبديله و لهذا فأن أفصل طريقه هي أستخدام وسم ALIGN وهذا الوسم يعطي للنص خواص معينه داخل الوسم الأخر .<br />فالنفسر أكثر أن وسم ALIGN لوحده يفعل شيء وبإضافته مثلا لوسم <P> فأن المستعرض سيقوم بأداء الوسمين في نفس الوقت<br />وهذا شيء مهم جدا في لغة HTML وتكون صيغتة كالآتي:-<br />هام جدا<br /><بداية الوسم خواصه="قيمة">ضع النص هنا <نهاية الوسم> <br />* و يجب أن تعلم أن كل الأوسمة يمكن أن تأخذ بعض الخواص لكن يوجد خواص تأخذ أوسمه معينة وسنقوم بشرح ذلك أكثر في الفصول القادمة ،<br />و لكي تضع خاصية تمركز النص مع الوسم <P> تكون الصيغه هكذا:- <br /><P ALIGN="CENTER">النص المتمركز في منتصف الصفحة</P><br />قارن هذا لكي تفهم الصيغه السابقه فال P هو بدايه الوسم ، ALIGN هو خواصه CENTER هي قيمة الخاصية و بالطبع <P/> هو نهايه الوسم، <br />و من الواضح طبعا أذا كنا نقدر أن نضع النص في المنتصف أذن نستطيع أن نضع في أي جهة أخري سواء اليسار أو اليمين كل ما عليك فعله هو تغيير قيمة الـ ALIGN إلي RIGHT أو LEFT .<br />تنسيق النص :<br />نتحدث الآن عن كيفيه جعل النص عريض أو مائل أو تحته خط <br />لقد قمت بشرح كل هذا بالتفصيل في دروس الـ HTML ولكن سريعا نقول الأكواد لهذه التنسيقات<br /><B>هذا للخط العريض</B><br /><I>وهذا للخط المائل</I><br /><U>وهذا ما أقصده عن تحته خط</U><br />و الآن أخواني الأعزاء يكون قد أنتهين من الفصل الثاني من فصولنا التعليميه وتكون قد تعلمت كيفيه أنشاء صفحات و تنسيقهم ولكن كيف يمكن التنقل بينهم ؟؟؟!!!!!<br /><br />انتهى الدرس <br />الان دوركم للتطبيق الاكواد<br />بالتوفيق ان شاء الله<br />تحياتي<br />حمودي الرياض<br />ملاحظة : <br />سوف يتم حذف اي رد لم يتم الانتهاء من شرح الدروس<br /><br />حمودي الرياض<br /><a href="https://jhaf.yoo7.com/livecall:10-25-2008" class="postlink">10-25-2008</a>, 12:57 PM<br /><br />الدرس الثالث<br />السلام عليكم <br />اليوم ان شاء الله راح نتعلم بعض الوسوم المهمة في لغة HTMl تحت الوسم<body> ومنها :<br />الوسم <br><br />الوسم <b><br />الوسم <p><br />الوسم <H><br />الوسم <strong><br />الوسم <big><br />الوسم <tt><br />الوسم <em><br />الوسم <i><br />الوسم < quote ><br />الوسم <u><br />طبعا الدرس موجود في المرفقات مشروح بالتفصيل الممل مع وضيفة كل وسم وطريقة كتابة الكود والنتيجة التي تظهر بعد تطبيق الكود <br />و ان شاء الله في الدرس الرابع راح نتعلم طريقة وضع رابط و كيفية ادراج صورة وادخال مقطع صوتي يشتغل اول ما ندخل على الصفحة وكيفية تقسيم الصفحات وكيفية تغير لون الصفحة والخط<br />تقبلوا تحياتي<br /><br /><br /><br /></span></div><div class="clear"></div><div class="signature_div"></div></div><span class="gensmall"></span></td></tr></table></td></tr><tr><td class="row1 browse-arrows" align="center" valign="middle" width="150"><a href="#top"><img class="sprite-arrow_subsilver_up" src="https://2img.net/i/empty.gif" alt="الرجوع الى أعلى الصفحة" loading="lazy" /></a> <a href="#bottom"><img src="https://2img.net/i/fa/m/arrows_down1.gif" alt="اذهب الى الأسفل" loading="lazy" /></a></td><td class="row1 messaging gensmall" width="100%" height="28"><table border="0" cellspacing="0" cellpadding="0"><tr><td valign="middle"> <a href="http://www.jhaaf.com" title="مُعاينة مُنتدى هذا العضو" target="_blank" rel="nofollow"><img src="https://2img.net/i/fa/empty.gif" alt="http://www.jhaaf.com" /></a> </td></tr></table></td></tr><tr class="post"><td class="row2" valign="top" width="150"><div class="patch_avatar_info"><div class="infouser"><img loading="lazy" src="https://2img.net/u/4111/12/99/20/avatars/gallery/getatt10.jpg" alt="رائد الجحافي" style="max-width: 200px; max-height: 600px" /></div></iframe><span class="name"><a name="198"></a><strong><span style="color:#DE0909"><strong>رائد الجحافي</strong></span></strong></span><span class="postdetails poster-profile"><div class="rotba3">مؤسس الملتقى</div><div class="infouser"><span class="label"><span style="color:#000000;"><img src="https://2img.net/h/www14.0zz0.com/2010/09/11/16/749018299.gif" alt="اس ام اس" /></span></span> <span><marquee behavior="scroll" direction="up" scrollamount="1" height="60"> لا إلـــه إلا الله محمد رسول الله</marquee></span></div><hr /><div class="infouser"><span class="label"><span style="color:#291BF5;">عدد المساهمات</span> : </span> 2797</div><hr /><div class="infouser"><span class="label"><span style="color:#000000;">تاريخ التسجيل</span> : </span> 30/06/2008</div><hr /><div class="infouser"><span class="label"><span style="color:#000000;">العمر</span> : </span> 44</div><hr /><div class="infouser"><span class="label"><span style="color:#000000;">الموقع</span> : </span> الجنوب العربي - عدن</div><hr /></span><img src="https://2img.net/i/fa/empty.gif" alt="دروس متنوعة في مادة html Empty" style="width:150px;height:1px" /></td><td class="row2" valign="top" width="100%" height="28" colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td><span class="postdetails"><img class="sprite-icon_minipost" src="https://2img.net/i/empty.gif" alt="مُساهمة" title="مُساهمة" border="0" />موضوع: : htmlدروس متنوعة في مادة <img class="sprite-icon_miniposted" src="https://2img.net/i/empty.gif" alt="دروس متنوعة في مادة html Empty" border="0" />الجمعة 24 أبريل - 4:03</span></td><td valign="top" nowrap="nowrap" class="post-options"> </td></tr><tr><td colspan="2" class="hr"><hr /></td></tr><tr><td colspan="2"><div class="postbody"><div><u><font color="#0000ff"><span style="font-size: 24px; line-height: normal"> <u><font color="#0000ff">: htmlدروس متنوعة في مادة </font></u><br /><br /><br />اللمهم انا وعدتكم اني راح انزل دروس عن مادة html وهي خاصة لطلاب المستوى الرابع لكن المادة مررره سهلة يعني ممكن لاي عضو من اي تخصص انه يقرا الدرس وما عليه انه يطبق الكلام المكتوب حرف حرف وان شاء الله يتعلم طبعا المواضيع اللي برفعها مدمجة بصور امممم حاولوا انكم تطبقوا كل موضوع واللي يجد صعوبه في اي شي من الاكواد او ما فهم يعطيني خبر وانا ان شاء الله اوضحها اكثر بسم الله نبدا بالدرس الاول <br />ملاحظة: اللي ما يعرف شي ابدا عن هالمادة يرجع للرابط التالي ويرجع يكمل معانا http://www.ipaclub.net/vb/showthread.php?t=937 <br />التنسيق الأساسي للصفحة أن كل الصفحات تبدأ بهيكل أساسي ، و لنبدأ الآن لتتعلم أول وسم (Tag) الأوسمه :- الأوسمه هي الأشياء التي بين هذين القوسين <> <br />بالتأكيد أنت لم تري أكواد تبدأ بهذين الشكلين من قبل حسنن من قائمة View أختار Source ،<br />أنت تري الآن النص الذي تقرأه ومحاط في أغلب الأحوال بـ <> هذه الأكواد هي التي صنعت هذه الصفحة التي أمامك هام جداأغلب الأوسمة تبدأ <> من اليسار وتنتهي</> في اليمين فالتشاهد الوسوم التالية: <br />وسم البداية وسم النهاية<br /><HTML> <‎/HTML><br /><HEAD> <‎/HEAD><br /><TITLE> <‎/TITLE> <br /><BODY> <‎/BODY><br />ماذا تلاحظ؟ أن كل منها يتألف من زوج من الوسوم أحدهما وسم البداية، والآخر وسم النهاية. ويتميز وسم النهاية بوجود الرمز / . <br />تأمل الرسم التالي، فهو يعطي فكرة عن تركيب ملف<br />http://html4arab.com/images/htsketsh.gif<br />إذن فملف Html يبدأ دائماً بالوسم <HTML> وينتهي بالوسم <‎/HTML>. لا تنسى ذلك!<br />أما الوسم <HEAD> فيحدد بداية المقطع الذي يحتوي على المعلومات الخاصة بتعريف الصفحة. كالعنوان الظاهر على شريط عنوان المتصفح. <br />وهذا العنوان بدوره يحتاج لأن يوضع بين الوسمين:<br /><TITLE> … <‎/TITLE> وبالطبع يجب كتابة الوسم <‎/HEAD> لكي ننهي هذا المقطع.<br />نأتي إلى الوسم <BODY> والذي يتم كتابة نصوص صفحة الويب ضمنه، بالإضافة إلى إدراج الصور والجداول وباقي محتويات الصفحة. وهو أيضاً يحتاج إلى وسم الإنهاء <‎/BODY><br />و الآن ما رأيك بإنشاء صفحة <br />قم بفتح برنامج Notepad أو أي برنامج محرر النصوص و أكتب هذا<br /><br /><HTML><br /><HEAD><br /><TITLE>My first HTML page

Wow I am Writing My First Page

والآن قم بحفظ ما كتبته في ملف وبأي اسم تختاره. ولا تنسى أن الامتداد المستخدم في أسماء ملفات HTML هو htm. أو html. مثلاً أنا اخترت الاسم ‎FirstPage.htm
ومن الأفضل أن تقوم بإنشاء مجلد مستقل على القرص الصلب لكي تحفظ به ملفاتك فهذا يسهل عليك عملية استرجاعها للعرض أو التحديث
وليكن هذا المجلد مثلاً بالاسم C:\htmlfiles (أو بأي اسم تختاره)
ولكن لابد وأن يكون الأسم أما حروف ، أرقام ، _ أو - ولا يجوز أستخدام أي علامات أخري في لحفظ الملف.
حان وقت العرض، لكي نشاهد نتيجة ما كتبناه. قم بتشغيل متصفح الإنترنت الذي تستخدمه.
فإذا كان Netscape Navigator اختر الأمر Open File… من قائمة File. أما في MS Internet Explorer فاختر الأمر Open… من قائمة File. ثم حدد المسار الذي يوجد به الملف.
أنا شخصياً قمت بتحديد المسار التالي:
C:\htmlfiles\FirstPage.htm
وذلك طبعاً حسب الافتراضات السابقة التي اتبعتها عند تخزين الملف. وهذا ما حصلت عليه :-
http://html4arab.com/images/mf1.gif
وماذا عنك؟ هل حصلت على نفس النتيجة؟
إذن مبروك :MaM(41):
لقد قمت بإنشاء أول صفحة ويب خاصة بك. وقبل أن نستمر أريد أن أنبهك إلى بعض الملاحظات عند كتابة صفحات الويب:
•لا يوجد فرق بين كتابة الوسوم بالأحرف الإنجليزية الكبيرة UPPERCASE أو الأحرف الصغيرة lowercase. لذلك تستطيع الكتابة بأي شكل منهما أو حتى الكتابة بكليهما.
•إن المتصفحات لا تأخذ بعين الاعتبار الفراغات الزائدة أو إشارات نهاية الفقرات (أي عندما تقوم بضغط مفتاح Enter) التي تجدها هذه المتصفحات في ملف Html.
وبعبارة أخرى فإن باستطاعتك كتابة ملفك السابق بالشكل التالي:
My first HTML page
Wow, I'm writing my first webpage ‎
أو بالشكل التالي:

<br />My first HTML page<br /><‎/TITLE><br /><‎/HEAD><br /><BODY> <br />Wow, I'm writing my First Page<br /><‎/BODY><br /><‎/HTML><br />وفي كل الحالات ستحصل على نفس النتيجة.وإذا كنت من تلك النوعية من الناس التي لا تصدق كل ما يقال… تستطيع أن تجرب ذلك بنفسك!!! هيا جرب. <br />لكن هذا لا يعني أن الفقرة المكونة مثلاً من عشرة أسطر ستمتد إلى عدة أمتار بعرض الشاشة.<br />كلا بالطبع لأن المتصفح سيقوم بعمل التفاف تلقائي لها بحسب عرض الشاشة، مهما كان مقدار هذا العرض.<br />والآن قد تتساءل، إذن كيف يمكن التحكم بمقدار النص المكتوب في كل سطر وكيف يمكن تحديد نهاية الفقرة وبداية الفقرة التي تليها؟<br />في الدرس الثاني راح يتم شرحها بالتفصيل<br />تقبلوا تحياتي<br /><br /><br /><br /><br /><br /><br /> <br /><br />الدرس الثاني <br />بسم الله نبدا <br /><br />نهايه سطر وبدايه سطر جديد:-<br />وسوف نستخدم الوسم <BR> لتحديد النهاية للسطر.<br />والبدء بسطر جديد (لاحظ أن هذا الوسم مفرد، أي ليس له وسم نهاية). ونعود إلى المثال السابق،<br />قم بتعديل الملف لكي يصبح بالشكل التالي<br /><HTML><br /><HEAD><br /><TITLE> <br />My first HTML page<br /><‎/TITLE><br /><‎/HEAD><br /><BODY><br />Wow, <br /><BR> I'm writing my <br /><BR>‎first page<br /><‎/BODY><br /><‎/HTML> <br />و الآن كيف أضيف سطر جديد ؟<br />ولفعل هذا نستخدم الوسم <P><P/> <br />الذي يقوم تقريباً بنفس عمل الوسم السابق أي أنه ينهي السطر أو الفقرة ويبدأ بسطر جديد لكن مع إضافة سطر إضافي فارغ بين الفقرات. ( يلاحظ ان هذا الوسم لديه وسم نهايه لكن من الممكن أستخدامة بدون وسم النهايه )<br /><HTML><br /><HEAD><br /><TITLE> <br />My first HTML page<br /><‎/TITLE><br /><‎/HEAD><br /><BODY><br />Wow,<br /><P> I'm writing my<br /><P>first page<br /><‎/BODY><br /><‎/HTML><br />الفراغات :- تعتبر رموزاً خاصة لذلك لا نستطيع التحكم بها وبعددها إلا باستخدام الوسم ‎ (Non Breakable Space ‎ والأحرف هي اختصار للعبارة ) ‎ .<br />وإذا أردت إدخال عدة فراغات بين نص وآخر ما عليك إلا كتابة هذا الوسم بنفس عدد الفراغات المطلوب.<br />كما يجب عليك التقيد بالأحرف الصغيرة هنا كما موضح بالشكل التالي:<br /><br /><HTML><br /><HEAD><br /><TITLE> <br />My first HTML page<br /><‎/TITLE><br /><‎/HEAD><br /><BODY><br />Wow, ‎<br />I'm writing ‎<br />‎ my first First page<br /><‎/BODY><br /><‎/HTML> <br />الخواص و الآن سأشرح جزء متقدم قليلا :- كيف نقوم بتمركز النص أي جعل النص في منتصف الصفحة ، <br />الوسم الأساسي لهذه الخاصيه هو <CENTER> ولكن هذا الوسم قد تم تبديله و لهذا فأن أفصل طريقه هي أستخدام وسم ALIGN وهذا الوسم يعطي للنص خواص معينه داخل الوسم الأخر .<br />فالنفسر أكثر أن وسم ALIGN لوحده يفعل شيء وبإضافته مثلا لوسم <P> فأن المستعرض سيقوم بأداء الوسمين في نفس الوقت<br />وهذا شيء مهم جدا في لغة HTML وتكون صيغتة كالآتي:-<br />هام جدا<br /><بداية الوسم خواصه="قيمة">ضع النص هنا <نهاية الوسم> <br />* و يجب أن تعلم أن كل الأوسمة يمكن أن تأخذ بعض الخواص لكن يوجد خواص تأخذ أوسمه معينة وسنقوم بشرح ذلك أكثر في الفصول القادمة ،<br />و لكي تضع خاصية تمركز النص مع الوسم <P> تكون الصيغه هكذا:- <br /><P ALIGN="CENTER">النص المتمركز في منتصف الصفحة</P><br />قارن هذا لكي تفهم الصيغه السابقه فال P هو بدايه الوسم ، ALIGN هو خواصه CENTER هي قيمة الخاصية و بالطبع <P/> هو نهايه الوسم، <br />و من الواضح طبعا أذا كنا نقدر أن نضع النص في المنتصف أذن نستطيع أن نضع في أي جهة أخري سواء اليسار أو اليمين كل ما عليك فعله هو تغيير قيمة الـ ALIGN إلي RIGHT أو LEFT .<br />تنسيق النص :<br />نتحدث الآن عن كيفيه جعل النص عريض أو مائل أو تحته خط <br />لقد قمت بشرح كل هذا بالتفصيل في دروس الـ HTML ولكن سريعا نقول الأكواد لهذه التنسيقات<br /><B>هذا للخط العريض</B><br /><I>وهذا للخط المائل</I><br /><U>وهذا ما أقصده عن تحته خط</U><br />و الآن أخواني الأعزاء يكون قد أنتهين من الفصل الثاني من فصولنا التعليميه وتكون قد تعلمت كيفيه أنشاء صفحات و تنسيقهم ولكن كيف يمكن التنقل بينهم ؟؟؟!!!!!<br /><br />انتهى الدرس <br />الان دوركم للتطبيق الاكواد<br />بالتوفيق ان شاء الله<br />تحياتي<br /><br /><br />الدرس الثالث<br />السلام عليكم <br />اليوم ان شاء الله راح نتعلم بعض الوسوم المهمة في لغة HTMl تحت الوسم<body> ومنها :<br />الوسم <br><br />الوسم <b><br />الوسم <p><br />الوسم <H><br />الوسم <strong><br />الوسم <big><br />الوسم <tt><br />الوسم <em><br />الوسم <i><br />الوسم < quote ><br />الوسم <u><br />طبعا الدرس موجود في المرفقات مشروح بالتفصيل الممل مع وضيفة كل وسم وطريقة كتابة الكود والنتيجة التي تظهر بعد تطبيق الكود <br />و ان شاء الله في الدرس الرابع راح نتعلم طريقة وضع رابط و كيفية ادراج صورة وادخال مقطع صوتي يشتغل اول ما ندخل على الصفحة وكيفية تقسيم الصفحات وكيفية تغير لون الصفحة والخط<br />تقبلوا تحياتي<br /><br /><br /><br />الدرس الرابع<br />السلام عليكم <br />الدرس الرابع شرحت فيه المواضيع التالية :<br />وضع رابط لتتنقل بين الصفحات<br />كيفية ادراج صورة<br />ادخال طريقة مقطع صوتي يشتغل اول ما ندخل على الصفحة<br />كيفية تغير لون الصفحة والخط<br />وكيفية تقسيم الصفحات<br />طبعا الدرس موجود في المرفقات مشروح بالتفصيل الممل مع اضافتي لملف مطبق فيه بعض جميع المواضيع فقط اضغطوا على الصفحة main و يا ليت خلال الويك اند الجاي تصممون تصميم وترفعونه على رابط وتكتبون الرابط في البروفايل حقي وانا ان شاء الله اشوفه واعدل عليه اذا كان فيه مشكلة في الكود<br />في الدرس الخامس راح نتعلم طريقة انشاء جدول طبعا هذا الدرس انا خليته مستقل بحد ذاته لانه شوي يبي له تركيييييز <br />تقبلوا تحياتي<br /><br /><br /><br /><br /> <br /><br />السلام عليكم ورحمة الله <br />الان توصلنا لاخر درس في هاللغة <br />في المرفقات يوجد شرح كافي ووافي لطريقة انشاء الجدول و13 مثال عليه<br />واضفت شرح بسيط مع الامثله عن كيفية انشاء القوائم <br />واضفت رابط مفيد جدا جدا جدا للاستزادة <br />اشكر كل من تفاعل معي من خلال الرسائل التي وصلتني على الايميل <br />واسال الله العلي القدير ان ينال الشرح على رضائكم واعجابكم <br />وان يكون هذا العمل خالص لوجهه سبحانه وتعالى<br />واي استفسار او ملاحظات او اي كود في لغة HTML يمكنكم الان المشاركة في الموضوع بالرد عليه <br />وان شاء الله في اقرب فرصة احاول اني ابحث لكم عن الحل <br />تقبلوا خالص تحياتي<br /><br /><br /><br /><br /><br /><br /><br /></span></font></u></div><div class="clear"></div><div class="signature_div"></div></div><span class="gensmall"></span></td></tr></table></td></tr><tr><td class="row2 browse-arrows" align="center" valign="middle" width="150"><a href="#top"><img class="sprite-arrow_subsilver_up" src="https://2img.net/i/empty.gif" alt="الرجوع الى أعلى الصفحة" loading="lazy" /></a> <a href="#bottom"><img src="https://2img.net/i/fa/m/arrows_down1.gif" alt="اذهب الى الأسفل" loading="lazy" /></a></td><td class="row2 messaging gensmall" width="100%" height="28"><table border="0" cellspacing="0" cellpadding="0"><tr><td valign="middle"> <a href="http://www.jhaaf.com" title="مُعاينة مُنتدى هذا العضو" target="_blank" rel="nofollow"><img src="https://2img.net/i/fa/empty.gif" alt="http://www.jhaaf.com" /></a> </td></tr></table></td></tr><tr class="post"><td class="row1" valign="top" width="150"><div class="patch_avatar_info"><div class="infouser"><img src="https://2img.net/i/itest/ranks/default/default3.gif" alt="عضو ماهر" title="عضو ماهر" loading="lazy" /><br /><img loading="lazy" src="https://2img.net/u/4111/12/99/20/avatars/222-4.jpg" alt="شمسان" style="max-width: 200px; max-height: 600px" /></div></iframe><span class="name"><a name="5003"></a><strong><span style="color:#1258A3"><strong>شمسان</strong></span></strong></span><span class="postdetails poster-profile"><div class="rotba7">عضو ماهر</div><div class="infouser"><span class="label"><span style="color:#000000;"><img src="https://2img.net/h/www14.0zz0.com/2010/09/11/16/749018299.gif" alt="اس ام اس" /></span></span> <span><marquee behavior="scroll" direction="up" scrollamount="1" height="60">النص</marquee></span></div><hr /><div class="infouser"><span class="label"><span style="color:#291BF5;">عدد المساهمات</span> : </span> 274</div><hr /><div class="infouser"><span class="label"><span style="color:#000000;">تاريخ التسجيل</span> : </span> 03/01/2010</div><hr /></span><img src="https://2img.net/i/fa/empty.gif" alt="دروس متنوعة في مادة html Empty" style="width:150px;height:1px" /></td><td class="row1" valign="top" width="100%" height="28" colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td><span class="postdetails"><img class="sprite-icon_minipost" src="https://2img.net/i/empty.gif" alt="مُساهمة" title="مُساهمة" border="0" />موضوع: رد: دروس متنوعة في مادة html <img class="sprite-icon_miniposted" src="https://2img.net/i/empty.gif" alt="دروس متنوعة في مادة html Empty" border="0" />الجمعة 15 يناير - 1:24</span></td><td valign="top" nowrap="nowrap" class="post-options"> </td></tr><tr><td colspan="2" class="hr"><hr /></td></tr><tr><td colspan="2"><div class="postbody"><div>انا اشكرك اخي رائد على نشر مثل هذه المواضيع</div><div class="clear"></div><div class="signature_div"></div></div><span class="gensmall"></span></td></tr></table></td></tr><tr><td class="row1 browse-arrows" align="center" valign="middle" width="150"><a href="#top"><img class="sprite-arrow_subsilver_up" src="https://2img.net/i/empty.gif" alt="الرجوع الى أعلى الصفحة" loading="lazy" /></a> <a href="#bottom"><img src="https://2img.net/i/fa/m/arrows_down1.gif" alt="اذهب الى الأسفل" loading="lazy" /></a></td><td class="row1 messaging gensmall" width="100%" height="28"><table border="0" cellspacing="0" cellpadding="0"><tr><td valign="middle"> </td></tr></table></td></tr><tr align="right"><td class="catBottom" colspan="3" height="28"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td width="9%" class="noprint"> </td><td align="center" class="t-title"><a name="bottomtitle"></a><h1 class="cattitle">دروس متنوعة في مادة html</h1></td><td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><a href="/t185n-topic"><img class="sprite-arrow_subsilver_right" src="https://2img.net/i/empty.gif" alt="استعرض الموضوع التالي" loading="lazy" /></a> <a href="/t185p-topic"><img class="sprite-arrow_subsilver_left" src="https://2img.net/i/empty.gif" alt="استعرض الموضوع السابق" loading="lazy" /></a> <a href="#top"><img class="sprite-arrow_subsilver_up" src="https://2img.net/i/empty.gif" alt="الرجوع الى أعلى الصفحة" loading="lazy" /></a> </td></tr></table></td></tr></table><table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_close" style="display:none;margin: 1px 0px 1px 0px"><tr><td class="catBottom" height="28"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td valign="top"><h1 class="cattitle"> مواضيع مماثلة</h1></td><td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img class="sprite-tabs_more" src="https://2img.net/i/empty.gif" alt=" " align="middle" border="0" /></a></span></td></tr></table></td></tr></table><table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_open" style="display:'';margin: 1px 0px 1px 0px"><tr><td class="catBottom" height="28"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td valign="top"><h1 class="cattitle"> مواضيع مماثلة</h1></td><td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img class="sprite-tabs_less" src="https://2img.net/i/empty.gif" alt="-" align="middle" border="0" /></a></span></td></tr></table></td></tr><tr><td class="row2 postbody" valign="top">» <a style="text-decoration:none" href="/viewtopic?t=4786&topic_name" title="مقدمه عن لغة HTML">مقدمه عن لغة HTML</a>» <a style="text-decoration:none" href="/viewtopic?t=6470&topic_name" title=" مواقع دروس فوتوشوب متنوعة "> مواقع دروس فوتوشوب متنوعة </a>» <a style="text-decoration:none" href="/viewtopic?t=4788&topic_name" title="تقسيم الصفحه في لغة HTML">تقسيم الصفحه في لغة HTML</a>» <a style="text-decoration:none" href="/viewtopic?t=4374&topic_name" title="مجموعة قصص متنوعة باللغة الإنجليزية.">مجموعة قصص متنوعة باللغة الإنجليزية.</a>» <a style="text-decoration:none" href="/viewtopic?t=7543&topic_name" title="الاحتلال اليمني يحاصر الجنوب العربي من مادة الديزل وكل المشتقات النفطية ">الاحتلال اليمني يحاصر الجنوب العربي من مادة الديزل وكل المشتقات النفطية </a></td></tr></table><table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td class="row2" valign="top" colspan="2" width="150"><span class="gensmall">صفحة <strong>1</strong> من اصل <strong>1</strong></span></td></tr><tr><td class="row2" colspan="2" align="right" valign="top"><span class="gensmall"></span></td></tr><tr><td class="row2" colspan="2" align="center" style="padding:0px"><a name="quickreply"></a></td></tr><tr><td style="margin:0; padding: 0;" colspan="2"><table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''"><tbody><tr><td class="row2" valign="top" width="25%"><span class="gensmall"><strong>صلاحيات هذا المنتدى:</strong></span></td><td class="row1" valign="top" width="75%"><span class="gensmall"><strong>لاتستطيع</strong> الرد على المواضيع في هذا المنتدى<br /></span></td></tr><tr><td class="catBottom" colspan="2" height="28"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td valign="middle" width="100%"><span class="nav"><a class="nav" href="/forum">ملتقى جحاف</a><a class="nav" href=""></a> :: <a href="/c3-category" class="nav"><span>الملتقيات العلمية والتقنية</span></a> :: <a href="/f31-montada" class="nav"><span>الكمبيوتر</span></a></span></td><td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img class="sprite-tabs_less" src="https://2img.net/i/empty.gif" alt="-" align="middle" border="0" /></a></span></td></tr></table></td></tr></tbody></table></td></tr><tr><td style="margin:0; padding: 0;" colspan="2"><table border="0" cellpadding="0" cellspacing="0" width="100%" id="info_close" style="display:none;"><tbody><tr><td class="catBottom" colspan="2" height="28"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td valign="middle" width="100%"><span class="nav"><a class="nav" href="/forum">ملتقى جحاف</a><a class="nav" href=""></a> :: <a href="/c3-category" class="nav"><span>الملتقيات العلمية والتقنية</span></a> :: <a href="/f31-montada" class="nav"><span>الكمبيوتر</span></a></span></td><td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img class="sprite-tabs_more" src="https://2img.net/i/empty.gif" alt=" " align="middle" border="0" /></a></span></td></tr></table></td></tr></tbody></table></td></tr></table><form action="/viewforum" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}"><table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center"><tr><td align="left" valign="middle" nowrap="nowrap" ><span class="nav"></span></td></tr></table></form><script type="text/javascript">//<![CDATA[ $(resize_images({ 'selector' : '.postbody', 'max_width' : 500, 'max_height' : 200 }));//]]></script><script src="https://illiweb.com/rs3/86/frm/addthis/addthis_widget.js" type="text/javascript"></script><div id="bb92cbbb6" style="clear:both;"><div align="center"><div> <div id="taboola-below-desktop-forum-thumbnails" style="max-width:1000px; background-color: #fffd"></div> <script type="text/javascript"> window._taboola = window._taboola || []; _taboola.push({ mode: 'thumbnails-desktop-a', container: 'taboola-below-desktop-forum-thumbnails', placement: 'Below Desktop Forum Thumbnails', target_type: 'mix' }); </script></div></div></div><div style="height:3px"></div></td><td valign="top" width="0"><div id="emptyidright"></div></td></tr></tbody></table></div></div><div id="page-footer"><div align="center"><div class="gen"><span class="gensmall">©</span><a href="https://www.ahlamontada.com/phpbb" target="_blank">phpBB</a> | <strong><a href="https://www.ahlamontada.com/" target="_blank">منتدى مجاني</a></strong> | <strong><a href="https://www.ahlamontada.com/directory/sciences-and-knowledge" target="_blank">العلم و المعرفة</a></strong> | <strong><a href="https://www.ahlamontada.com/directory/sciences-and-knowledge/history" target="_blank">التاريخ و الأديان</a></strong> | <a name="bottom" href="https://help.ahlamontada.com/" target="_blank">منتدى مجاني للدعم و المساعدة</a> | <a href="/abuse?page=%2Ft185-topic&report=1" rel="nofollow">التبليغ عن محتوى مخالف</a> | <strong><a href="/latest" target="_blank">آخر المواضيع</a></strong></div></div></div></td></tr></table><div id="fb-root"></div><script type="text/javascript">$(document).ready( function() {$('div.fb-login-button, span.fb-login-button').attr({"data-scope": "public_profile email","data-max-rows": "1","data-size": "large","data-show-faces": "false","data-auto-logout-link": "false"});$('div.fb-login-button, span.fb-login-button').each(function() {if(typeof $(this).attr('onlogin') == typeof undefined || $(this).attr('onlogin') === false) {$(this).attr('onlogin', 'onLoginFB');}if($(this).html() == '') {$(this).html('Facebook');}});FB.init({appId : "156643631013856",cookie : 1,xfbml : 1,oauth : 1,version : 'v4.0'});(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/ar_AR/sdk.js";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));});function onLoginFB() {window.location.replace('/facebook_connect.php')}</script><script type="text/javascript">$(document).ready( function() {$('div.ti-connect').attr({'data-loc' : 'https://connect.topicit.net/','data-login' : 'https://jhaf.yoo7.com/topicit/index.php/connect','data-version' : '1','data-lang' : 'ar'});(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "https://connect.topicit.net/scripts/connect.js";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'topicit-connect'));});</script><script type="text/javascript">//<![CDATA[ fa_endpage();//]]></script><script type="text/javascript"> var vglnk = { key: '74bad24252620514d1244cfba01f2ee2' }; (function(d, t) { var s = d.createElement(t); s.type = 'text/javascript'; s.async = true; s.src = '//cdn.viglink.com/api/vglnk.js'; var r = d.getElementsByTagName(t)[0]; r.parentNode.insertBefore(s, r); }(document, 'script')); </script> <script type="text/javascript">window._taboola = window._taboola || []; _taboola.push({flush: true});</script></body></html>