3: XHTML(تنسيق النصوص).

zak الأربعاء فبراير 22, 2012 5:04 am

تنسيق النصوص

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

الفقرات
من الجيد ملأ صفحاتنا بالنصوص، و الأجود من ذلك تنظيمها و تنسيقها، و من أفضل الوسائل التي تساعدنا على ذلك هي الفقرات و ذلك ينطبق على الكتابة اليدوية.
و لكن كيف يمكنني أن أضع فقرات في صفحتي؟
الأمر بسيط، يمكنك الإستعانة بالوسم <p> و </p> و كما هو مبين من طريقة كتابته فهو وسم زوجي.
لكتابة فقرة في صفحتنا نضع الوسم <p> ثم نكتب الفقرة ثم نضع وسم النهاية للفقرة و بالطبع سيكون </p>، أعتقد أن مثالا سيكون أوضح.
كود:XHTML

<p>This is a paragraph. Don’t care about the text written here it is just written to fill the blanks</p>

شاهد المثال
يجب أن تضع هذا الكود بيت الوسمين <body> و </body> باستعمال الكود الذي رأيناه في الجزء السابق.
ملاحظة : طبعا كما قلت سابقا كل ما يظهر في الصفحة من نصوص و صور يجب أن يكتب بين الوسمين <body> و </body>.
قد يظن البعض أنه من أجل كتابة عدة فقرات يكفي أن يضعها بهذا الشكل.
كود:XHTML

<p>This is a paragraph. Don’t care about the text written here it is just written to fill the blanks.

This is a new paragraph. Don’t care about the text written here it is just written to fill the blanks.</p>

شاهد المثال
إذا كنت تظن ذلك قم بتجريب الكود الذي قمت بكتابته، يبدو أن النتيجة لم ترق لك، لأن المتصفح سيعتبر كل ما يوجد بين الوسمين <p> و </p> فقرة واحدة.
و لكن إذا أردت أن أكتب عدة فقرات فكيف يمكنني ذلك؟.
يبدو و كأني لم أخبرك أنه يمكنك إستعمال الوسمين <p> و </p> في صفحتك قدر ما تشاء (أسف لقد نسيت).
المهم إذا أردت أن تكتب عدة فقرات فما عليك إلا أن تكتب.
كود:XHTML

<p>This is a paragraph. Don’t care about the text written here it is just written to fill the blanks.</p>

<p>This is a new paragraph. Don’t care about the text written here it is just written to fill the blanks.</p>

شاهد المثال
قم بتجريب الكود، إن عمل بشكل جيد فيمكنك إكمال الدرس دون مشاكل، و إن لم يعمل عليك بأول سطر في هذا الدرس أنصحك بإعادة قراءته جيدا.
حسنا و لكن إذا أردت أن أبدء سطرا جديدا دون إنشاء فقرة جديدة هل يمكنني فعل ذلك؟.
أجل، و الوسم المخصص لذلك هو <br /> و يظهر من شكله أنه وسم فردي، و يكفي أن تضع الوسم في المكان الذي تريد أن تبدأ منه سطرا جديدا و أترك له البقية و كما أقول دائما المثال خير من الكلام.
كود:XHTML

<p>This is a paragraph.<br/ >Create a new line, Don’t care about the text written here it is just written to fill the blanks.</p>

شاهد المثال
تحذير : لا أريد أن أسمع أنه لا يعمل.
ملاحظة : <br /> تكتب دائما داخل الفقرات.
قد يتساءل البعض كيف يمكنني أن أضع الفقرة في الوسط أو في اليمين إلخ...
الجواب بسيط، يمكنك إستعمال الخاصية align و هي تأخد أربعة قيم يمكن تلخيصها في النقاط التالية :
• إذا أردت كاتبة فقرة في اليسار فالقيمة التي سيأخدها align هي left.
• إذا أردت كاتبة فقرة في اليمين فالقيمة التي سيأخدها align هي right.
• إذا أردت كاتبة فقرة في الوسط فالقيمة التي سيأخدها align هي center.
• إذا أردت كاتبة فقرة متساوسة الأبعاد فالقيمة التي سيأخدها align هي justify.
و أعتقد أن مثالا سيكون أوضح.
كود:XHTML

<p align="left">This is a paragraph aligned to left. Don’t care about the text written here it is just written to fill the blanks.</p>

<p align="center">This is a centered paragraph. Don’t care about the text written here it is just written to fill the blanks.</p>

<p align="right">This is a paragraph aligned to right. Don’t care about the text written here it is just written to fill the blanks.</p>

<p align="justify">This is a justified paragraph. Don’t care about the text written here it is just written to fill the blanks.</p>

شاهد المثال

العناوين
من الجيد كتابة فقرات و لكن إذا أضفنا إليها عناوين ستكون أفضل.
يمكنك كتابة عناوين بإستعال الوسم <h> و لكن يجب أن تضع بجانب h رقم ما بين 1 إلى 6 ليصبح الوسم بهذا الشكل <h1> و <h2> إلى أخر الأرقام (6).
و هذه الأرقام تعبر عن أهمبة العنوان،حيث يقوم المتصفح بإظهار العنوان الموجود بين الوسمين <h1> و </h1> بخط عريض و بحجم كبير و كلما أرتفعنا بعدد نقص حجم الخط و يمكن تصنيفها كالتالي :
• <h1> عنوان مهم جدا.
• <h2> عنوان مهم.
• <h3> عنون مهم أيضا لكن بدرجة أقل.
• <h4> عنوان أقل أهمية.
• <h5> عنوان غير مهم.
• <h6> عنوان حقير.
ملاحظة : العناوين ما بين 1 إلى 4 هي الأكثر إستعمالا.
حان وقت التطبيق.
كود:XHTML

<h1>Title level 1</h1>
<h2>Title level 2</h2>
<h3>Title level 3</h3>
<h4>Title level 4</h4>
<h5>Title level 5</h5>
<h6>Title level 6</h6>

شاهد المثال
يمكن ملاحظة الفرق من النظرة الأولى للصفحة فالعنوان المكتوب بين <h1> و </h1> أضخم من العنوان المكتوب بين <h6> و </h6> (فعلا حقير).
و ما قلناه بالنسبة للفقرات بمكنك وضع عناوبن بالمئات في صفحتك دون أي مشكل.
و كذلك بالنسبة للخاصية align فهي تعمل بنفس الشكل مع العناوين (و أفسحوا المجال لأن المثال قادم).
كود:XHTML

<h1 align="left">Title level 1 aligned to left</h1>
<h2 align="center">Centered Title level 2 </h2>
<h3 align="right">Title level 3 aligned to right</h3>
<h4 align="justify">Justified Title level 4 </h4>

شاهد المثال
تذكير : أعود و أذكر كل الأكواد التي قمنا بكتابتها لحد الآن يجب أن توضع بين الوسمين <body> و .</body>
و الآن مثال لكيفية إستعمال العناوبن مع الفقرات.
كود:XHTML

<h1 align="center">Welcome Into LearnInArabic</h1>
<p>LearnInArabic is a website created for the people who want to learn about programming languages and don’t know from where to start</p>

<h2>About us</h2>
<p>we are a team of 2 members :<br />
Hassan bengmah.<br />
Zakaria azizi.</p>

<h2>For what</h2>
<p>we have noticed that there are a few website that give lessons on Arabic and well explained.</p>

شاهد المثال

نص محدد الشكل مسبقا
يوفر لنا ال XHTML وسم، شخصيا أحسبه من أقوى الوسوم في لغة XHTML و هو وسم <pre>.
كل ما يكتب ما بين هذبن الوسمين يبقى كما كتب في محرر النصوص و هذا أمر أعتقد أنه مفيد، و إليكم المثال الذي سيوضح ذلك.
كود:XHTML

<pre>
public static void main(String[] ags){
int a,b,s;
a=1;
b=20;
s=a+b;
System.out.println(s);
}
</pre>

شاهد المثال
هذا كود java و إذا أردت أن أكتبه بواسطة الفقرات أو عناوين أو غيرها فلن أستطيع ذلك و لو أمضيت اليوم كاملا أحاول، ولكن في المقابل يمكنني فعل ذلك بواسطة الوسم <pre>.
ملاحظة : الوسم <pre> لا يؤثر على الوسوم الأخرى إذا وضعت بداخله.
كود:XHTML

<pre>
<p>This a paragraph inside the pre tag</p>
</pre>

شاهد المثال

إعطاء أهمية للنص.
في بعض الأحيان نريد إظهار بعض الكلمات بشكل واضح بحيث نلفت إنتباه الزائر لها. فما العمل؟
توفر لنا لغة ال XHTML ثلاث أنواع من الوسوم و يمكن تلخيصها فيما يلي :
• <i> تجعل النص مائل.
• <u> تضع خط تحت النص.
• <b> تجعل النص يظهر بخط عريض.
<i> الخط المائل
يساعد هذا الوسم على إعطاء أهمية للنص بحيث يظهره بخط مائل كما هو مبين في المثال أسفله.
كود:XHTML

<p>LearnInArabic is a website created for the people who want to learn about <i>programming languages</i> and don’t know from where to start</p>

شاهد المثال
كما هو مبين في الكو د فنحن نريد أن نجعل كلمة programming languages مائلة.
<u> وضع خط تحت النص
يساعد هذا الوسم على إعطاء أهمية للنص بحيث يضع خطا تحته كما هو مبين في المثال أسفله.
كود:XHTML

<p>LearnInArabic is a website created for the people who want to learn about <u>programming languages</u> and don’t know from where to start</p>

شاهد المثال
كما هو مبين في الكو د فنحن نريد أن نضع خط تحت كلمة programming languages.
<b> نص عريض
يعتبر هذا الوسم هو أفضل وسم يستعمل لأجل إعطاء أهمية للنص بحيث يظهره بخط عريض كما هو مبين في المثال أسفله.
كود:XHTML

<p>LearnInArabic is a website created for the people who want to learn about <b>programming languages</b> and don’t know from where to start</p>

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

<p>LearnInArabic is a website created for the people who want to learn about <u><i><b>programming languages</b></i></u> and don’t know from where to start</p>

شاهد المثال
ستظهر كلمة programming languages بخط عريض و مائل و تحتها خط.
تحذير : يجب إحترام ترتيب الوسوم.
لا يجوز كتابة الوسوم بهذا الشكل :

<b></i>programming languages</b></i>

و الصحيح هو كتابتها بهذا الشكل :

<b></i>programming languages</i></b>

إلى هنا نكتفي بهذا القدر و سأترك بعض الوسوم النادرة و التي ستساعدنا على تنسيق النصوص إلى الجزء القادم من أجل إعطاء مساحة لإتقان ما رأيناه لحد الآن.
في الختام أستودعكم الله الذي لا تضيع ودائعه، و السلام عليكم و رحمة الله.