الخميس، 27 مارس 2014

تعلم استخدام لغة HTML



¨    .
     1-        
     2-       استخدام العناوين :
     3-       تستخدم العناوين Headers لإبراز موضوع معين فإذا كنت تكتب فقرة فمن الطبيعي أن تكتب عنوانا لهذه الفقرة يدل عليها ، كما أنك قد نكتب عنوان رئيسي للموضوع وعنوان فرعي لكل فقرة من فقرات الموضوع وبالتالي فان حجم  العنوان الرئيسي يكون أكبر من العناوين الفرعية التابعة  لنفس الموضوع .
  4-   تستخدم لغة HTML رموزا للعناوين نبدأ من H1 وحتى H6 ولكنها نبدأ بطريقة عكسية حيث أن الرمز H1 يستخدم لأكبر العناوين H2 لعنوان أصغر حتى نصل إلي رمز H6 .
     5-       ونستخدم العناوين بوضع رمز بداية العنوان قبل النص ورمز نهاية العنوان بعض النص . نوضح ذلك:
<H1> This is the largest header </H1>
<H2> While this one is the smallest </H2>
<H3> this is test </H3>
     6-       الآن نصمم صفحة نصية ثم نقوم باستخدام العناوين .   فسوف نستخدم Notepad .
1-   من قائمة Start  بالتأشير علي Programs ثم Accessries ثم النقر علي Notepad يتم فتح Notepad.
2-   يظهر برنامج Natebad وبه صفحة بيضاء نقوم بحفظ هذه الورقة .
3-   من قائمة File  أختر Save As ثم من مربع الحوار Save As أكتب اسما جديدا للملف ولا ننسي الامتداد .HTML  .
4-   ثم أضغط علي Save ثم إبداء في كتابة البرنامج الجديد .
<HTML>
<HEAD>
</TITLE>عنوان الصفحة <TITLE>
</HEAD>
<BADY>
</H1> البحث عن معلومات في إنترنت <H1>
أن الوصول إلي ما تريد عبر شبكة عملاقة مثل إنترنت هو أمر شديد الصعوبة ويستهلك وقتا طويلا في نفس  الوقت.
</H3>أدوات البحث النصية<H3>
أدوات البحث النصية هي أدوات البحث عن الملفات والمعلومات
</BODY>
</HTML>
  7-   نقوم بتشغيل المستعرض وليكن Internet Explorer حيث يساند اللغة العربية بدون مشاكل . ننقر رمز المستعرض من شريط المهام يتم فتح نافذ المستعرض من قائمة File انقر الأمر Open يظهر مربع الحوار Open نقوم بكتابة أسم الملف ثم انقر الزرOpen أو نقر الزر Browse لاختيار الملف من موقعة علي القرص الصلب ويتم فتح الصفحة
     8-        
     9-       إدراج فقرات وفواصل :
 10-  أول أدوات تنسيق النصوص هي إضافة العناوين وتحديد الفقرات والفواصل لتحسين الشكل العام للنص ونتحدث عن الفقرات والفواصل لنري كيف يمكن أن تستخدم .
 11-  يوجد طريقتين لاستخدام رمز الفقرات الطريقة الأكثر شيوعا هي استخدام الرمز <P> في بداية كل فقرة . والطريقة الأكثر تحكما أن تستخدم رمز بداية الفقرة <P> لتحديد الفقرة ثم نستخدم رمز نهاية الفقرة </P> لتحديد نهاية الفقرة ، والطريقة الثانية أكثر تحديدا وتستفيد منها عند إضافة عناصر تنسيق محاذاة لفقرة معينة .
 12-    نقوم بكتابة هذا البرنامج ونلاحظ في الكتابة الفقرة <P>
1-   يمكن استخدام أحد النماذج المعدة سلفا .  من قائمة Start  بالتأشير علي Programs ثم Accessries ثم النقر علي Notepad يتم فتح Notepad.
2-   من قائمة File انقر Open ثم أختر الملف King 1 من قائمة Open يظهر البرنامج في نافذة Notepad.
3-   من قائمة File أختر Save As ثم من مربع الحوار Save As  أختر أسم للملف
4-   بعد سطر <BADY> نكتب العنوان </H2> جهاز الـ Modulator <H2> .
5-   بعد سطر العنوان نكتب باقي النص وهو ------  .
6-   يحفظ الملف ثم نعرض الصفحة باستخدام المستعرض
نلاحظ أن النص مكتوب بدون فواصل بين العنوان والنص
7-   الآن سنحاول إدراج رموز الفقرات داخل النص نقوم بإدراج رمز الفقرة <P> في بداية النص بعد سطر العنوان مباشرة . ثم أدراجها أيضا بعد الفقرة المنتهية  .... كما نري في كتابة البرنامج  :
<HTML>
<HEAD>
</TITLE>   كتابة العنوان<TITLE>
</HEAD>
<BODY>
   </P>  جهاز الـ <P>   Modulator
  يستخدم عند الرغبة فهي إرسال بيانات من الحاسب عبر خط التليفون ، حيث يقوم بتحويل الإشارات الرقمية
الصادرة من الحاسب إلي إشارة تناظرية يمكن نقلها عن طريق خط التليفون .
 </P>جهاز الـ<P> Demodulator
يستخدم في حالة استقبال بيانات واردة إلي الحاسب عبر خط التليفون ، حيث يقوم بالوظيفة العكسية ،
 وهي تحويل الإشارات التناظرية الواردة إلي إشارات رقمية يفهمها الحاسب
 </BODY>
</HTML>
8-   نقوم بحفظ  البرنامج ثم نعرض الصفحة       نلاحظ أن علامة الفقرة تقوم بوضع الفقرة من بداية السطر كما أنها تترك فاصلا بينها وبين الفقرة التي تسبقها.
  13-      
  14-     إدراج الفواصل :
 15-  لاحظنا أن علامة الفقرة تترك فاصلا بين الفقرات كما لاحظنا أن معالج HTML أو المستعرض يتجاهل المسافات والسطور الفارغة التي تتخلل النص كما لو كان النص جملة واحدة مهما كانت المسافات والسطور الفارغة تتخلله .
 16-  نحتاج أحيانا أن نكتب جملة في كل سطر دون ترك سطر فاصل بين الجملتين علامة الفاصل <BR>فسوف تعطينا النتيجة نفسها التي تحصل عليها عند الضغط علي Enter أثناء الكتابة فسوف نبدأ الكتابة من بداية السطر التالي .
  17-     نقوم بإضافة سطر جديد في نهاية النص السابق كما يلي :
الارتباط بصفة مستديمة <BR>
الارتباط الإلكتروني <BR>
محاكاة النهاية الطرفية<BR>
الارتباط المباشر بالطالب <BR>
 18-  الرمز<BR> في بداية كل سطر ومعناها الكتابة في بداية سطر وسوف نحصل علي نفس النتيجة إذا كتبت الرمز في نهاية الجملة السابقة كما سنحصل علي نفس النتيجة إذا كتبت العنوان بالطريقة التالية :
الارتباط بصفة مستديمة <BR> الارتباط الإلكتروني <BR> محاكاة النهاية الطرفية<BR>
  19-     ولكن هذه الطريقة سوف تجعل مراجعة البرنامج أكثر صعوبة .
  20-     نقوم بحفظ البرنامج ونقوم بعرض الصفحة يفتح الملف من خلال المستعرض
  21-      
  22-     النص سابق التنسيق Preformatted :
 23-  سنستخدم الرمز<PRE>...</PRE> وهو اختصار Preformatted وسوف يقوم معالج HTML بعرض النص كما هو وسوف يترك المسافات والفواصل كما هو دون تدخل وقد كان هذا الرمز يستخدم قبل التوسع في استخدام الجداول والقوائم داخل صفحات ويب ولكن بعد مساندة القوائم والجداول أصبح استخدام هذا الرمز <PRE> نادرا ولكنه لا يزال يعمل       لنأخذ مثالا للتجربة
  24-     COM                        منشاة تجارية              Commercialorganization      
  25-     EDU                        منشاة تعليمية                   Educational Institution   
  26-     GOV                       هيئة حكومية                  Governmental Agncy       
  27-     يظهر في نافذة محرر النصوص كما هو  فنكت البرنامج :
<HTML>
<HEAD>
</TITLE>   كتابة العنوان<TITLE>
</HEAD>
<BODY>
<PRE>
  28-     COM                        منشاة تجارية              Commercialorganization      
  29-     EDU                        منشاة تعليمية                   Educational Institution   
  30-     GOV                       هيئة حكومية                  Governmental Agncy       
</PRE>
</BODY>
</HTML>
  31-     نقوم بحفظ الملف ثم تشغيل من خلال المستعرض
  32-     استخدام الأنماط :
 33-  نستخدم كلمة نمط للدلالة علي نوع الكتابة وهي مخصصة في تطبيقات ميكروسوفت لحجم العناوين وطريقة كتابتها ؟ المقصود بكلمة Style هو أدوات التنسيق النصوص مثل الخط الأسود العريض Bold والكتابة المائلة Italic والتسطير أو وضع خط تحت الكتابة Underline وكل هذه أدوات تنسيق للكتابة وليست نمط الكتابة .
 34-  نتحدث الآن عن تنسيق النص حيث سنقوم بتحديد بعض الكلمات ليتم عرضها بالخط الأسود العريض كما سنضع خطا تحت بعض الكلمات وبعض الكلمات يتم عرضها بخط مائل .
  35-      
<HTML>
<HEAD>
</TITLE>   كتابة العنوان<TITLE>
</HEAD>
<BODY>
<B>السرعة الفائقة </B>
<I>خفض الأعمال المكتبية الورقية </I>
<U>الانخفاض الجوهري في التكلفة</U>
</U></I></B>استلام الرسائل الواردة أينما كنت<B><I><U>
</BODY>
</HTML>
 36-  في البرنامج نجد أننا استخدمنا أدوات التنسيق التي يسمونها Styleوهي B من Bold ، U من Underline  ، I من Italic
  37-     محاذاة النصوص :-
  38-     سنتحدث عن محاذاة الفقرات سنعرض هذه العناصر :
¨    أمر <Palign =Right>:  لمحاذاة فقرة إلي يمين الصفحة .
¨    أمر <Palign =Center>:   لتوسيط فقرة في منتصف الصفحة .
¨    أمر <Palign =Left>:  لمحاذاة فقرة إلي يسار الصفحة .
¨    أمر <P>:  إذا لم نضع عنصر المحاذاة فان المحاذاة الافتراضية للفقرة هي إلي يسار الصفحة .
  39-     سنقوم بفتح Notepad جديدة ونحفظها  ونكتب فيها البرنامج الأتي :

<HTML>
<HEAD>
</TITLE>   كتابة العنوان<TITLE>
</HEAD>
<BODY>
حق الاتصال<P ALIGN=RIGHT>
المواصفات الفنية <P ALIGN=CENTER>
برنامج الإنترنت<P ALIGN=LEFT>
</BODY>
</HTML>
  40-      
  41-     استخدام عنصر تقسيم النص DIV  :
 42-  نلقي نظرة علي الصفحات الويب التي تم عملها بيدنا نجد عدم وجود هوامش سوف نجد أن الكتابة نبدأ بمحاذاة حد الصفحة وتنتهي كذلك بجوار الحد دون ترك هوامش .   دعنا نجرب هوامش صفحة الويب نضيف علي الصفحة <BLOCKQUOTE></BLOCKQUOTE> مباشر بعد <BODY></BADY> ثم نعرض الصفحة باستخدام المستعرض
  43-      
  44-     استخدام DIV :
 45-  كلمة Div هي اختصار للفعل Divide بمعني تقسيم أو قسمة Division وهي بالفعل تستخدم لتقسيم النص ولكن هذا الرمز يأتي ومعه عدد من عناصر المحاذاة التي تمكننا من تقسيم ومحاذاة النص بالطريقة التي تروقنا.
 46-  وقد اصبح استخدام الرمز <Div> يستخدم عناصر متقدمة معه من الأدوات الشائعة للتحكم في ضبط وتنسيق النصوص .   يساند هذا الرمز هو عنصر align= والذي يمكننا من محاذاة النص فيما بين بداية الرمز <DIV> ونهايته </DIV> يمكن استخدام الرمز Div عدة مرات داخل البرنامج الواحد .
  47-     سنقوم بعمل برنامج شامل لهذا الفصل يتكون فيه جميع الرموز المستخدمة :

<HTML>
<HEAD>
<TITLE>Testing Headers</TITLE>
</HEAD>
<BODY>
<DIV ALIGN=CENTER>
<H4>The Beginnings of Tragedy, of the History Play ,and of Comedy</H4>
<H3>The Development of the Theatre</H3>
</DIV>
<BLOCKQUOTE>
<DIV ALIGN=JUST>
for 1530 is the probable date of <B><I>Calisto and Melebea and The Play of the Wether</I></B>, while by <U>1588</U> audiences were already familiar with <I><B> Tamburlaine</B></I> . Some influence had incited dramatists to far more ambitious achievements, and fortunately their genius was adequate to answer their needs .
<P ALIGN=RIGHT> Summarized<I><B><U>Heda yakoub </U></B></I>
<PRE>
                       HDD                          Hard Disk Drive
                       FDD                           Floppy Disk Drive
</PRE>
</DIV>
</BLOCKQUOTE>
</BOLD>
</HTML>
  48-     استخدمنا في هذا البرنامج الأتي :
1-   الرمز <BLOCKQUOTE> لتحسين الصفحة بإضافة هوامش علي جوانب الصفحة .
2-   الرمز <DIV ALIGN> استعمل مرتين الأولي لتوسيط النص والثانية لمحاذاة النص Just بحيث تتم المحاذاة جهة اليسار .
3-   أدوات التنسيق <B><U><I> ورمز الفقرة <P> في بداية الفقرة .
4-   رموز العناوين <H3> <H4> .
5-   استخدمنا المحاذاة إلي اليمين <P ALIGN= RIGHT>...</P> .
6-   استخدمنا <PRE> لعرض النص كما هو .
  49-     تنبيه هام جدا
1-   الرمز Pre لا يستخدم الآن يوجد رمز أخر يستخدم .
2-   لا يوجد فرق بين كتابة الرموز تحت بعض أو بجوار بعض .
3-   الرمز<TT> يستخدم لتحديد الكتابة بخط مشابه لخط الآلة الكاتبة Typewriter font .
4-   عند كتابة مجموعة الرموز تكتب بأي طريقة وعند الأنهاء نقفل علي حسب نهايتها مثل
                                                                               50-   <P> <B> <U> <I>                           </I> </U> </B> </P>

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

إرسال تعليق