تنسيق النصوص

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

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

طريقة كتابة الوسم:

والوسم التعليقات نبدئه بكتابة علامة اصغر من ثم علامة التعجب ثم علامة الشرطة مرتين هكذا <!- - ثم نكتب التعليق ثم مسافة ثم نضع علامة الشرطة مرتين ثم علامة أكبر من هكذا - ->

مثال :

<!- - your comment goes here - -> وهذا التعليق من سطر واحد

<!- -

Multi line comment

Multi line comment - - > وهذا التعليق متعدد السطور

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title> صفحة التعليقات </title>

</head>

<body>

<!-- التعليق المكون من عدة سطور

التعليق المكون من عدة سطور

-->

<h3>نلاحظ عدم ظهور وسم التعليقات من خلال المتصفح لزائر الصفحة وظهورها فقط من خلال صفحة الكود </h3>

</body>

</html>

وسم الفقرة <p>:

وهو الوسم المستخدم لإضافة فقرات في صفحات الويب حيث يكون محتوي ال <p> هو الفقرة نفسها.

مثال ذلك :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<title>اضافة وسم الفقرة </title>

</head>

<body>

<p>

لوريم إيبسوم(Lorem Ipsum)هو ببساطة نص شكلي (بمعنى أن الغاية هي الشكل وليس المحتوى) ويُستخدم في صناعات المطابع ودور النشر. كان لوريم إيبسوم ولايزال المعيار للنص الشكلي منذ القرن الخامس عشر عندما قاعة والتنضيد الإلكتروني. انتشر بشكل كبير في ستينيّات هذا القرن مع إصدار رقائق "ليتراسيت" (Letraset)البلاستيكية تحوي مقاطع من هذا النص، وعاد لينتشر مرة أخرى مؤخراَ مع ظهور برامج النشر الإلكتروني مثل "ألدوس بايج مايكر" (Aldus PageMaker)والتي حوت أيضاً على نسخ من نص لوريم إيبسوم.

</p>

</body>

</html>

وسوم العناوين الرؤؤس <h1>-<h6>:

وهذه الوسوم تستخدم لإعطاء عناوين مثلا لمقال مكتوب صفحة الويب وكذلك عناوين للاقسام ويستخدم بصفة عامة الوسم <h1> لإضافة عنوان رئيسي للصفحة ولا يوضح في الصفحة الواحدة أكثر من كود واحد من هذا الوسم حيث نعتبر كل صفحة وكأنها فصل من كتاب وبالطبع كل فصل من اي كتاب له عنوان واحد فقط. اما عن وسوم العناوين الاخري فهي تستخدم لإعطاء عناوين لأجزاء اخري تدخل في تكوين صفحة الويب كعناوين اقسام داخلية للصفحة ونستخدم فيها وسم <h2> و يمكن وضع عناوين فرعية اسفل منها ونستخدم وقتها الوسم <h3> واذا احتجنا لعناوين اخري تحت العنوان الفرعي يمكن لنا ان نستخدم الوسم <h4> بمعني اننا نحدد ما إذا كان الوسم اي وسم من هذه المجموعة <h2> الي <h6> علي أساس علاقة العنوان بمحتوي الصفحة نفسها.

ولنعرف الفرق بينهما نقوم أولا بعمل المثال التالي لإنشاء صفحة ويب بها عنوان وفقرة :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<title>إضافة نص مكون من عنوان وعدد من العناوين</title>

</head>

<body>

<h1>

انا عنوان رئيسي للصفحة

</h1>

<p>

لوريم إيبسوم(Lorem Ipsum)هو ببساطة نص شكلي (بمعنى أن الغاية هي الشكل وليس المحتوى) ويُستخدم في صناعات المطابع ودور النشر. كان لوريم إيبسوم ولايزال المعيار للنص الشكلي منذ القرن الخامس عشر عندما قامت مطبعة مجهولة برص مجموعة من الأحرف بشكل عشوائي أخذتها من نص، لتكوّن كتيّب بمثابة دليل أو مرجع شكلي لهذه الأحرف. خمسة قرون من الزمن لم تقضي على هذا النص، بل انه حتى صار مستخدماً وبشكله الأصلي في الطباعة والتنضيد الإلكتروني. انتشر بشكل كبير في ستينيّات هذا القرن مع إصدار رقائق "ليتراسيت" (Letraset) البلاستيكية تحوي مقاطع من هذا النص، وعاد لينتشر مرة أخرى مؤخراَ مع ظهور برامج النشر الإلكتروني مثل "ألدوس بايج مايكر" (Aldus PageMaker) والتي حوت أيضاً على نسخ من نص لوريم إيبسوم.

</p>

<h2>

انا عنوان قسم داخل الصفحة

</h2>

<h3>

انا عنوان فرعي داخل القسم

</h3>

<h4>

انا عنوان داخل العنوان الفرعي

</h4>

<h5>

انا أيضا عنوان

</h5>

<h6>

أنا ايضا عنوان

</h6>

</body>

</html>

تعديل مظهر النص:

يوفر اصدار HTML 4.01 العديد من الوسوم والتي يمكن ان تؤثر علي شكل النص، ويوجد طريقتان يمكن استخدامهما لمعالجة الخطوط.

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

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

علي سبيل المثال وسم <em> يعتبر وسم ضمني لانه يفسر بواسطة بعض المتصفحات علي أنه مائل والبعض الاخر علي أنه خط عريض، والوسم <b> و <i> وسم صريح لإنها تشير للمتصفح علي ان الخط سيكون عريض او مائل.

وسم الخط <font>:

في بعض الاوقات تريد التحكم أكثر في شكل النص بإضافة بعض الوسوم لإجبار النص علي ان يستعمل نوع مين من الخط مثلا او ربما حجم معين من الخط او لون معين للخط. ولتحديد مثل هذه الخصائص نستخدم بعض الخصائص مع وسم ال <font> مثل خاصية (face) لكي تحدد بها نوع الخط ، وخاصية (color) لكي تحدد بها لون الخط ، وخاصية (size) لكي تحدد بها حجم الخط.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title> إضافة سطر عنوان وفقرة</title>

</head>

<body>

<h1>

انا عنوان رئيسي للصفحة

</h1>

<p>

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

نلاحظ وضع علامة الفصلة بين اسم كل خط والذي يليه مع عدم وضع الفصلة بعد أخر نوع من الخطوط.

</font>

</p>

</body>

</html>

بعض وسوم تنسيق النص الاخري:

نأتي الان لبعض وسوم تنسيق النصوص الاخري مثل <b> و <strong> و <i> و <em> و <u> و <s> و <small> و <big> و <sup> و <sub> ويوضح الجدول التالي معني ووظيفة كل وسم من هذه الوسوم.

يجعل الخط ذو لون غامق وعريض	<B>
يجعل الخط قوي وأيضا ذو لون غامق	<STRONG>
يجعل الخط مائل	<I>
يرشد المتصفح للتأكيد علي الخط ويظهر كخط مائل	<EM>
يظهر خط تحت النص المحدد	<U>
يظهر الخط وكأنه يتخلله خط او مشطوب عليه أو ملغي مثلا	<S>
ينقص من حجم الخط الحالي	<SMALL>
يزيد من حجم الخط	<BIG>
يظهر الخط أعلي قليلا من السطر الموجود فيه	<SUP>
يظهر الخط منخفض قليلا عن مستوي السطر الموجود فيه	<SUB>

وناخذ مثال عملي حتي يتضح نري هذا التنسيق.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title> Formatting text </title>

</head>

<body>

<p>

This text is <B>bold</B>. This is <STRONG>strong</STRONG>.

This is <I>italics</I>. This is <EM>emphasized</EM>. This

is <U>underlined</U>. This is <S>strikeout</S>. This is

<BIG>bigger</BIG>. This is <SMALL>smaller</SMALL>. This is

<SUP>superscript</SUP>. This is <SUB>subscript</SUB>.

</p>

</body>

</html>

الاحرف الخاصة Special Characters :

وهي بعض الحروف الخاصة التي تحتاج لكود HTML معين حتي نكتبها في صفحة الكود وتظهر معنا في المتصفح وهذه الحروف مثل < و > و & و © و® ¢ والتي تحتاج لكتابتها ان نكتب رموز معينة يوضحها الجدول التالي.

<	>	&	©	®	¢	space
<	>	&	©	®	¢

مثال :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title> Special Characters </title>

</head>

<body>

<p>

This is a greater than sign >

</p>

<p>

This is a less than sign <

</p>

<p>

This is a Registered sign ®

</p>

<p>

This is a Copyright sign sign ©

</p>

<p>

This is a cent sign ¢

</p>

<p>

This is Ampersand sign &

</p>

<p>

The space between A B

</p>

</body>

</html>

التنسيق أحادي المسافة Monospaced Formatting :

في بعض الاوقات تحتاج لإن تظهر كود او قائمة بسيطة من البيانات مستخدما ال HTML لذلك نستخدم مع مثل هذه البينات الوسوم <tt> و <pre> و <code> وهما في الغالب يستخدمان عندما نكتب بيانات باللغة الانجليزية يتضح الفرق في استخدمهما أكثر من اللغة العربية لذلك المثال علي ذلك سوف يكون باللغة الانجليزية. وهذا الوسم يعطي تعليمات للمتصفح بأن يستخدم خط غير متناسق ولكنه يتعامل مع مسافة الحروف بطريقة واحدة فيظهر فيه ان المسافات لكل حرف متساوية مثل الالة الكاتبة، ويستخدم هذا الكود مثلا في إظهار الاكواد في صفحات الويب وكأنها داخل ملف نصي.

المثال :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title> Monospaceing Formate </title>

</head>

<body>

<P>Please note the following code fragment.</P>

<PRE>

Public Function CheckPrice(x) As Integer

If x < 0 Then

CheckPrice = -1

End If

End Function

</PRE>

<P>Resulting Data</P>

<TT>

01/01/99 600<BR>

01/02/99 800<BR>

01/03/99 300<BR>

</TT>

</body>

</html>

محاذاة النصوص:

يوم وجد وسم خاص في هذه اللغة بتوسيط النصوص او الصور مثلا داخل الصفحة هو وسم <center>.

ويوجد خاصية توضع داخل وسم الفقرة لكي تعمل علي محاذاة الفقرة إلي اليمين او اليسار او الوسط وفي كل حاجه تأخذ الخاصية قيم مختلفة والخاصية هي (align) وللمحاذاة إلي اليمين تأخذ القيمة (right) وللمحاذاة إلي اليسار تأخذ القيمة (left) وللمحاذاة في الوسط تأخذ القيمة (center)

مثال :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title> Text Alignment </title>

</head>

<body>

This is right alignment.

</p>

This is a center alignment

</p>

This is a left alignment

</p>

<p>

This is paragraph in a center tag

</p>

<p>

This is paragraph in a center tag

</p></center>

<p>

This is normal paragraph without alignment attribute

</p>

</body>

</html>

وسم الاقتباسات Quotations:

ويستخدم هذا الوسم <blockquote>عندما نضع اقتباس من مقاله معينة او من كتاب معين مثلا ويلاحظ ان المتصفحات ببساطة تزيد من الهامش من علي يمين ويسار الاقتباس. وفي المثال نلاحظ الفرق بينه وبين وسم الفقرة <p>

مثال:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title> Blockquote tag </title>

</head>

<body>

<p>

لوريم إيبسوم(Lorem Ipsum) ويُستخدم في صناعات المطابع ودور النشر. كان لوريم إيبسوم دليل وعاد لينتشر مرة أخرى مؤخراَ مع ظهور برامج النشر الإلكتروني مثل "ألدوس بايج مايكر" (Aldus PageMaker) والتي حوت أيضاً على نسخ من نص لوريم إيبسوم.

</p>

</blockquote>

</body>

</html>

تنسيق النصوص

ليست هناك تعليقات:

إرسال تعليق

الصفحات