منتديات طلاب جدارا
عزيزي الزائر / عزيزتي الزائرة يرجي التكرم بتسجبل الدخول اذا كنت عضو معنا في منتديات طلاب جدارا
او التسجيل ان لم تكن عضو وترغب في الانضمام الي اسرة المنتدي
سنتشرف بتسجيلك
شكرا
ادارة المنتدي


منتديات طلاب جدارا
 
الرئيسيةالرئيسية  مكتبة الصورمكتبة الصور  س .و .جس .و .ج  التسجيلالتسجيل  دخولدخول  
سيتم بعون الله الانتقال الى رابط شركة ماي جوو العالمية مؤقتا الى حين تجهيز دومين جديد للموقع الكامل الرابط الجديد http://jadara.my-goo.com
نتمنى من جميع الأعضاء الوقوف الى جانب ادارة المنتدى للوصول إلى موافقة رسمية من ادارة الجامعة تؤكد أهمية هذا المنتدى
3-10-2010 بداية السحب والاضافة للفصل الجديد
تثبيت الطعامنة في منصب رئيس الجامعة

شاطر | 
 

 تعلم html الدرس الثاني _ تنسيق الأسطر

اذهب الى الأسفل 
كاتب الموضوعرسالة
Mahmoud_Alzoubi
عضو فريق عمل جدارا
مشرف قسم التكنلوجيا
مصمم مواقع
عضو فريق عمل جدارا  مشرف قسم التكنلوجيا  مصمم مواقع
avatar

الاردن Jordan
ذكر
206
21/06/2009
28
الموقع : www.cs-jadara.weebly.com

مُساهمةموضوع: تعلم html الدرس الثاني _ تنسيق الأسطر   الثلاثاء سبتمبر 15, 2009 11:00 pm

كما قلنا في مبادئ HTML أن الوسمان <BR> و <P> يجعلان المستعرض يبدأ سطراً جديداً. وقد بينا الفرق بينهما. ولكن الوسم <P> له عدة سمات. فبإمكانك أن تجعل الفقرة على اليمين وفي الوسط وعلى اليسار. وذلك باستخدام السمة ALIGN.كما يمكنك أن تجعل النص في الوسط باستخدام الوسم <CENTER>. لنجري هذا الإختبار لنتعرف على كلا الوسمين أكثر:-



<HTML alt=rtl>
<
HEAD>
<
TITLE>إختبار تنسيق فقرةTITLE>
<
BODY>
<
P ALIGN="right">هذا الفقرة على يمين الصفحة.P>
<
P ALIGN="center">هذه الفقرة في منتصف الصفحة.P>
<
P ALIGN="left">هذه الفقرة على يسار الصفحة.P>
<
CENTER>هذا النص في الوسط أيضاً ولكن بوسم آخرCENTER>
BODY>
HTML>
سيكون الناتج ما يلي:-


هذه الفقرة على يمين الصفحة.
هذه الفقرة في منتصف الصفحة.
هذه الفقرة على يسار الصفحة.
هذا النص في الوسط أيضاً ولكن بوسم آخر
لنبدأ الآن التكلم عن وسم آخر. ألا وهو وسم الخط الأفقي<HR> الذي ينشئ خطاً أفقياً على عرض الصفحة. أنظر إلى هذا الخط ..
تستطيع أن تضع الخط أعلاه بمجرد كتابة الوسم <HR> . دعنا الآن نغير خصائص هذا الخط. همممم ... لنعمل على توسيع عرض هذا الخط بنسبة 8 بكسل. ولتوسيعه أكتب الأمر التالي:-


<HR SIZE="8">
سيكون الناتج كالأتي:
ولكن لونه خافت. لنلونه بلون آخر. مثلاً بالأحمر. أكتب الأمر التالي:-


<HR SIZE="8" COLOR="red">
سيكون الناتج كالأتي:
أن لون الخط لم يتغير لماذا؟. إذا لم يتغير لون الخط.. فهذا يعني أنك تستعمل مستعرض Netscape.لأن نتسكايب لا يغير لون الخط الأفقي.
عظيم.. ولكن هذا الخط يبدو كبيراً. أريد أن أصغر حجمه بحيث يأخذ 50% من الصفحة. أكتب الأمر الآتي:-


<HR SIZE="8" COLOR="red" WIDTH="50%">
سيكون الناتج كالآتي:-
أريده أن يكون على جهة اليمين . أكتب الأمر الآتي :-


<HR SIZE="8" COLOR="red" WIDTH="50%" ALIGN="right">
سيكون الناتج كالآتي:-
الآن يمكنك أن تغير كل مواصفات هذا الخط ولا أعتقد أنك بحاجة إلى أمثلة أكثر .. صح؟
لنأتي إلى وسوم أخرى. الوسوم <H1> , <H2> , <H3>, <H4>, <H5>, <H6>. هذه الوسوم تجعل النص عريضاً وكبيراً حسب الرقم. وكلما كان الرقم أصغر كلما كان النص أكبر.ووظيفته كوظيفة عناوين الصحف Heading.. لنجري هذا الإختبار:-



<HTML alt=rtl>
<
HEAD>
<
TITLE>إختبارTITLE>
HEAD>
<
BODY>
<
H1>النمط الأول
<
H2>النمط الثاني
<
H3>النمط الثالث
<
H4>النمط الرابع
<
H5>النمط الخامس
<
H6>النمط السادس
BODY>
HTML>
سيكون الناتج ما يلي:-


النمط الأول


النمط الثاني


النمط الثالث


النمط الرابع


النمط الخامس


النمط السادس

أعتقد أنك فهمت ما تعنيه تلك الوسوم. فالمثال واضح جداً. لنذهب لزيارة وسم آخر.. الوسم <UL>. وهو وسم تشييد اللوائح... أنا لم أفهم ماذا تقصد بتشييد اللوائح! هل هي ألواح خشبية؟! حسناً.. لنجري هذا الإختبار للتعرف عليه. ولا تخف فهو من النوع الذي لا يعض.



<HTML alt=rtl>
<
HEAD>
<
TITLE>تشييد اللوائحTITLE>
HEAD>
<
BODY>
<
UL>
<
LI>اللائحة الأولى
<
LI>اللائحة الثانية
<
UL>
<
LI>اللائحة الأولى من اللائحة الثانية
<
LI>اللائحة الثانية من اللائحة الثانية
UL>
<
LI>اللائحة الثالثة
UL>
BODY>
HTML>
الناتج كالتالي :-


  • اللائحة الأولى
  • اللائحة الثانية

    • اللائحة الأولى من اللائحة الثانية
    • اللائحة الثانية من اللائحة الثانية

  • اللائحة الثالثة
هل عرفت الآن معنى اللوائح؟ لاحظ أنك بعد أن تكتب الوسم <UL> لابد أن تفتح وسم <LI> ثم نص اللائحة. وإذا أردت أن تفتح لائحة داخل لائحة لابد أن تكتب الوسم <UL> مرة أخرى ثم وسم <LI> وبعد ذلك نص اللائحة. وإذا أردت غلق اللائحة أكتب الوسم <UL/>.أوه .. أعتقد أن مخك ومخي قد تصدعا من كلمة لائحة. لنشرب فنجان قهوة.
أنت تشرب قهوتك على مهل.. حسناً سأتحدث عن الجداول بينما أنت تشرب قهوتك. الجداول تساعدك في تنظيم وترتيب وتنسيق النصوص والقواعد. هل تستخدم مايكروسوفت وورد؟ هل استخدمت الجداول فيه؟ يمكنك تنسيق الجداول في إنترنت كتنسيق الجداول في وورد أو إكسل. والوسم الخاص بالجداول هو <TABLE>. وإذا أردت فتح صف أكتب الوسم <TR> إختصار Table Row أي صف الجدول. وكلما كتبت الوسم <TD> إختصارTable Data أي بيانات جدول يبدأ عمود جديد. أخيراً انتهيت من قهوتك. لنبدأ بمثال للجدول.



<HTML dir=rtl>
<
HEAD>
<
TITLE>مثال للجداولTITLE>
HEAD>
<
BODY>
<
TABLE BORDER="1">
<
TR>
<
TD>الصف الأول العمود الأول
<
TD>الصف الأول العمود الثاني
TR>
<
TR>
<
TD>الصف الثاني العمود الأول
<
TD>الصف الثاني العمود الثاني
TR>
TABLE>
BODY>
HTML>
الناتج كالتالي :-





الصف الأول العمود الأول الصف الأول العمود الثاني
الصف الثاني العمود الأول الصف الثاني العمود الثاني
إن السمة BORDER تجعل عرض إطار الجدول قيمته 1. يمكنك زيادة عرضه كيفما شئت. وإذا أردت إخفائه .. دع قيمته صفر.
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://www.cs-jadara.weebly.com
 
تعلم html الدرس الثاني _ تنسيق الأسطر
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1
 مواضيع مماثلة
-
» HTML
» العناصر والوسوم HTML
» كود لوضع خلفية لصفحات html
» البرنامج الذي يحول من PDF, RTF, DOC, PPT, XLS, HTML , MHT إلىtext
» تعلم لغة HTML

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتديات طلاب جدارا :: المنديات التعليمية :: منتدى طلاب (( علم الحاسوب ))-
انتقل الى: