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

تقنيات استخدام برنامج HTML



كيف نستطيع أن نفتح محرر النصوص والمتصفح في وقت واحد علي نفس الملف ؟ وكيف يمكنني التنقل بينهما ؟
فتح برنامج المفكرة Notepad الموجودة علي جهازك والذي سوف يفتح علي ملف جديد ثم أحفظه تحت أسم  {King}  مثلا ، ولكن يجب أن يكون الامتداد HTML  ويمكننا اختيار ذلك من خلال كتابتك الاسم كما يليKing.HTML  وذلك بعد اختيار نوعية الملفات All Files
رغم أننا لم نقم بكتابة أي شئ وذلك تفاديا للوقوع في شرك النسيان و الاندماج ساعات طويلة في العمل ثم تفاجأ بتوقف الجهاز عن الاستجابة أو انقطاع التيار !!!
إذا لم يكن برنامج المفكرة Notepad موجودا ضمن حزمة Windows بتثبيته من لوحة التحكم Control Panel ثم استخدام Add / Remove Programs .
الآن وبعد أن حفظنا عملا بالاسم الذي أتخترنه نذهب إلي المسار الذي ثم الحفظ علية فسنجد الملف يحمل علامة متصفح الإنترنت الخاص بك في صورة ملف إنترنت رغم أنه مازال مفتوحا علي Notepad .
نقوم بالنقر المزدوجة علي أيقونة الملف King والتي تحمل علامة تصفح الإنترنت فستفتح علي المتصفح
للانتقال بين المفكرة والمتصفح ؟
نستخدم مفتاح ALT مع مفتاح التبديل TAB بعد إجراء أي تعديلات في برنامج المفكرة وكتابة الكود لابد أن تحفظ أولا ما قمت بتغيره ثم تذهب إلي المتصفح ونختار أمر التحديث Refresh أو نضغط Ctrl + R لنشاهد نتيجة ما تم كتابته .
بناء البرنامج :-
يتكون البرنامج من هيكل أساسي بحيث يتعرف المستعرض علي بداية البرنامج ونهايته ، في نجد صورة مبسطة لهيكل أي برنامج HTML .
أوامر بناء البرنامج :-
يتم إدخال أوامر HTML بين رمزي <  > مع مراعاة أنه إذا كان أمر البداية هو <START> مثلا فلابد من أن يكون أمر النهاية </START> .
ننصح بكتابة جميع الأوامر بالحروف الكبيرة ALLCAPS لأن ذلك ييسر عليك التميز بين أوامر HTML  وأي نص أخر موجود بالمستند .
برنامج HTML  أو مستند HTML أو سماحة العمل التي يتم فيها كتابة رموز البرنامج يتكون من الرموز الأساسية التالية :
v    أمر HTML            <HTML>...........</HTML>   
شئت أم أبيت فإن أول أمر في مستندك سيكون <HTML> وأخر أمر سيكون </HTML> لأن يحدد نوع المستند بأنه مستند HTML وليس أي نوع آخر من المستندات .
v    أمر HEAD          <HEAD>...............</HEAD>   
ويشمل هذا الأمر المعلومات الخاصة بملف HTML وقد يحتوي أيضا أوامر أخري تحدد هوية صفحتك مثل أمر TITLE .
v    أمر TITLE         <TITLE>...............</TITLE>
وهو المسئول عن إعطاء عنوان محدد لصفحتك وبعرضه في خانة العنوان لديك أثناء استعراضه بالمتصفح مع مراعاة ألا يزيد حجم هذا العنوان عن خمسين حرفا كما أنه من المحبذ أن يكون معبرا عن مضمون صفحتك .
v    أمر BODY        <BODY>...............</BODY>
 تظهر وظيفة هذا الأمر من أسمه : أي يحتوي علي كافة الأوامر الموجودة في المستند والتي تحدد العناصر التي تمثل البنية الأساسية له والتي سوف تظهر علي صفحة الويب .
v    أمر  !           <........................... ! >
هذا الرمز يستخدم في كتابة معلومات داخل البرنامج إرشادية لا يتم تنفيذها من قبل أي مستعرض .
البناء الأساسي :-
يشمل هذا النموذج علي البناء الأساسي لأي برنامج HTML  وهذا النموذج نراه :

<! ... DocType html public { .//W3c//DTD HTML 4.0 Transitional//EN  http ://WWW.W3.org/tr/ rec. html /loose.dtd >
<HTML>
<HEAD>
<TITLE>                </TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>
نلاحظ في النموذج قد استخدمت الرمز <! ...> وهو اختصار لكلمة Informational علي ما يبدو فقد وضحت في مثالي هذا معلومات عن إصدار HTML  والموقع الخاص بجماعة تطوير HTML .
تجهيز نموذج برنامج :-
في العادة فأنا أستخدم برنامج Notepad من Windows Accessories لسهولة البرنامج ولوجود لدي كافة مستخدمي ويندوز ، وقد تسمية ميكروسوفت المذكرة أو المفكرة ولكي نقوم بإنشاء نموذج برنامج HTMLنتبع الخطوات التالية :-
1-   فتح محرر النصوص الخاص بك أو محرر HTML  إذا كان لديك واحدا . أو فسوف تفتح قائمة Start من شريط المهام Task Bar ثم نقوم بالتأشير علي Pragrams ثم Accessor ثم Notepad .
2-   يتم فتح مساحة العمل من المحرر Notepad صفحة جديدة خالية تماما .
3-   بنقر الأمر Save As من قائمة File ثم من مربع الحوار Save As نكتب أسم للملف وليكن King لتحفظه بهذا الاسم ثم ننقر الزر Save لا ننسي  امتداد الملف .HTML  أو .HTM  ويكون الحفظ مثل King.HTML بعد الحفظ سوف نعود إلي نافذة البرنامج والملف المفتوح .
4-   نكتب معلومات عن نوع البرنامج أو بالأخرى نوع المستند وإصدار HTML المستخدم وموقع مجموعة التطوير <!... Doc Type HTML Public...> .
5-   نكتب في السطر التالي رمز بداية البرنامج <HTML> .
6-   نكتب في السطر التالي رمز بداية القسم العلوي من البرنامج <HEAD> .
7-   نكتب في السطر التالي عنوان للصفحة باستخدام الرمز <TITLE> نترك مكان العنوان فارغا .
### ملاحظة: الكتابة التي قمنا بكتبتها وتكون هكذا
<! ... DocType html public { .//W3c//DTD HTML 4.0 Transitional//EN  http ://WWW.W3.org/tr/ rec. html /loose.dtd >
<HTML>
<HEAD>
</TITLE>
  كتابة العنوان         <TITLE>
</HEAD>
### ملاحظة : يجب أقفال </TITLE>  بعد كتاب العنوان وأقفال </HEAD> بعد الانتهاء
8-   نكتب بعد الانتهاء من الجزء الأول من البرنامج في السطر التالي رمز بداية جسم البرنامج <BADY> .
9-   بالنسبة للنصوص المكتوبة ، نكتب رمز بداية فقرة <P> في سطر التالي .
10-       بعد كتابة الجزء الأول من البرنامج وكتابة <BADY>  نكتب بداية الفقرة وهي <P> ويكون الشكل بعد كتابة الجزء الأول يكون :
<BADY>
<P> Starting New Paragraph here
<P> Another Paragrah here
11-       نقوم بإغلاق جسم البرنامج بإضافة الرمز </BADY> .
12-       ثم نقوم بإغلاق البرنامج ككل بإضافة الرمز </HTML> .
13-       نشاهد ما كتبنه :
<! ... DocType html public { .//W3c//DTD HTML 4.0 Transitional//EN  http ://WWW.W3.org/tr/ rec. html /loose.dtd >
<HTML>
<HEAD>
</TITLE>
  كتابة العنوان  <TITLE>
</HEAD>
<BADY>
<P> Starting New Paragraph here
<P> Another Paragrah her
</BADY>
</HTML>
وبعد أن انتهينا من إعداد هذا النموذج ، نقوم بحفظ المستند ولا ننسي امتداد الملف “.HTML” ثم نغلق محرر النصوص الذي نستخدمه .
ولاستخدام هذا النموذج في برنامج جديد .  نقوم بإتباع الآتي :-
1-   من قائمة Start  بالتأشير علي Programs ثم Accessries ثم النقر علي Notepad يتم فتح Notepad.
2-   من قائمة File  ننقر Open  يتم فتح مربع الحوار Open اختر ملف King ثم النقر الزر Open يتم فتح ملف King .
3-   من قائمة File  أختر Save As ثم من مربع الحوار Save As أكتب اسما جديدا للملف مع مراعاة الامتداد .HTML ثم انقر الزر Save  .
4-   نحنو الآن نعمل في الملف بالاسم الجديد بينما الملف King كما هو لم يتغير .


 

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

إرسال تعليق