سنتعلم :

مستند HTML :

 

لابد لنا من ان نتعرف بداية على الشكل العام لمستند HTML حيث اننا سنستخدم مستند HTML5 بشكله الصحيح والمتوافق مع محركات البحث لنبني دائما صفحات انترنت صديقة لمحركات البحث ولنضمن ان كود HTML خاصتنا خالي من الاخطاء ومتوافق مع المتصفحات الخمسة الشهيرة .

<br />
<!DOCTYPE html><br />
<html><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><br />
<title>Document Title</title><br />
<meta name="keywords" content=", , , , , , , " /><br />
<meta name="description" content="" /><br />
<link rel="stylesheet" href="fileName.css" type="text/css" /><br />
<style type="text/css"><br />
</style><br />
<script type="text/javascript" src="fileName.js"></script><br />
<script type="text/javascript">    <br />
</script><br />
</head><br />
<body></p>
<p></body><br />
</html></p>
<p>

 

 

نلاحظ ان المستند بشكل عام يقسم الى قسمين وهما نوع المستند والجذر الرئيسي في المستند

وهو العنصر htmlوكذلك الجذر الرئيسي يقسم الى قسمين وهما الرأس والجسم

ولنبدأ بشرح المستند السابق سطر بسطر :

 

1 – التصريح عن نوع المستند وهنا مستندنا من النوع HTML 5 .

2 – وسم الفتح للجذر الرئيسي للمستند وهو العنصر html .

3 – وسم الفتح لمنطقة الرأس اي العنصر head .

4 – وسم ميتا لترميز المستند والترميز المتبع هنا هو ترميز اللغات اللاتينية iso-8859-1 .

5 – عنوان المستند ويجب ان يكون ما بين 11 و 30 محرف .

6 – وسم ميتا للكلمات المفتاحية ويجب ان يكون عددها ثمانية فقط .

7 – وسم ميتا لوصف المستند ويجب ان لايزيد عن 250 محرف .

8 – الاسطر من 8 حتى 11 لادراج اكواد css ويتم بطريقتين من ملف خارجي او بالكتابة مباشرة داخل العنصر style .

12 – الاسطر من 12 حتى 15 لادراج اكواد الجافا سكربت .

16 – وسم الاغلاق لمنطقة الرأس .

17 – وسم الفتح لمنطقة الجسم .

19 – وسم الاغلاق لمنطقة الجسم .

20- وسم اغلاق الجذر الرئيسي ونهاية المستند .

 

ملاحظات :

</p>
<p><!DOCTYPE html></p>
<p><html dir="rtl"></p>
<p><head></p>
<p><meta http-equiv="content-type" content="text/html; charset=utf-8" /></p>
<p><title>عنوان المستند</title></p>
<p><meta name="keywords" content=", , , , , , ," /></p>
<p><meta name="description" content="" /></p>
<p><link rel="stylesheet" href="fileName.css" type="text/css" /></p>
<p><style type="text/css"></p>
<p></style></p>
<p><script type="text/javascript" src="fileName.js"></script></p>
<p><script type="text/javascript"></p>
<p></script></p>
<p></head></p>
<p><body></p>
<p></body></p>
<p></html></p>
<p>

</pre>
تسمح لنا الطريقة document.write ايضا بتضمين اكواد HTML ونصوص وجميعها يجب ان تحاط بعلامتي التنصيص :
<pre>

</p> <p>document.write(“&lt;h1&gt;I Love Javascript&lt;/h1&gt;”);</p> <p>

نلاحظ ان التعديل قد تم في كلا من السطر الثاني والرابع , في السطر الثاني قمنا بتغيير اتجاه المستند ليتوافق مع الكتابة باللغة العربية من اليمين الى اليسار rtl وفي السطر الرابع غيرنا ترميز المستند الى ترميز اوسع يشمل اللغة العربية utf-8 .

 

تضمين اكواد الجافا سكربت داخل صفحة الانترنت

 

يتم بطريقتين :

 

1 – ضمن كود HTML مباشرة ويمكن ان يكون في منطقة head او منطقة body ويتم ذلك من خلال استخدام العنصر المزدوج الخاص لتضمين الجافا سكربت وهو script حيث ان هذا العنصر يقوم بأحاطة الكود البرمجي :

<script type=”text/javascript”>

 

</script>

 

نلاحظ ان للعنصر السابق خاصية type وهي تبين نوع السكربت المكتوب ضمن هذا العنصر ويوجد نوعان الاول هو ما نستخدمه وهو الجافا سكربت والثاني هو لغة ترميز اخرى وهي فيجول بايزك سكربت وهي لغة مشابهة للجافا سكربت كما ذكرنا سابقا , ولكن حاليا لاتوجد حاجة لتضمين هذه الخاصية داخل العنصر script لان الجافا سكربت اصبحت هي اللغة الافتراضية في جميع المتصفحات الحديثة وكذلك في HTML 5 .

 

2 – تضمين جافا سكربت من ملف خارجي حيث يتم كتابة كود جافا سكربت في ملف منفصل ولا يوضع داخل العنصر script ويحفظ الملف بالامتداد js ويتم تضمينه (استدعاؤه) داخل صفحة الانترنت على النحو التالي :

 

<script type=”text/javascript” src=”fileName.js”></script>

 

نلاحظ اننا اضفنا خاصية جديدة للعنصر script وهي src وتحدد مصدر الملف المراد تضمينه داخل صفحة الانترنت .

 

يمكن ان نضمِّن اكثر من كود جافا سكربت داخل مستند HTML وبكل الطرق السابقة وفي رأس الصفحة او في جسمها .

مثال :

&amp;lt;/pre&amp;gt;&amp;lt;/pre&amp;gt;&lt;br /&gt;
&amp;lt;!DOCTYPE html&amp;gt;&lt;/p&gt;
&lt;p&gt;&amp;lt;html&amp;gt;&lt;/p&gt;
&lt;p&gt;&amp;lt;head&amp;gt;&lt;/p&gt;
&lt;p&gt;&amp;lt;meta http-equiv=&amp;quot;content-type&amp;quot; content=&amp;quot;text/html; charset=iso-8859-1&amp;quot; /&amp;gt;&lt;/p&gt;
&lt;p&gt;&amp;lt;title&amp;gt;Ways To Insert Javascript&amp;lt;/title&amp;gt;&lt;/p&gt;
&lt;p&gt;&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;filename.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;/p&gt;
&lt;p&gt;&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;/p&gt;
&lt;p&gt;&amp;amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;lt;/script&amp;gt;&lt;/p&gt;
&lt;p&gt;&amp;lt;/head&amp;gt;&lt;/p&gt;
&lt;p&gt;&amp;lt;body&amp;gt;&lt;/p&gt;
&lt;p&gt;&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;/p&gt;
&lt;p&gt;&amp;amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;lt;/script&amp;gt;&lt;/p&gt;
&lt;p&gt;&amp;lt;/body&amp;gt;&lt;/p&gt;
&lt;p&gt;&amp;lt;/html&amp;gt;&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
&amp;lt;pre&amp;gt;