بيت الكمبيوتر
تعلمنا في الدروس السايقة أشياء جمبلة في لغة HTML ودائمنا ما كنا نري وسم أو tag الـhead ونحن نبرمج وهو ما يأتي بعد tag الـHTML , وكل ما نعرفه عن هذا الـtag هو أنه يوضع بداخلة وسم أو tag الـtitle الخاص بعرض عنوان الموقع أو الصفحة المبرمجة .
في هذا الدرس سنتعلم الكثير عن tag الـhead . نبدأ علي بركة الله .
بداية يجب أن تعرف أن هناك عدة وسوم توضع داخل وسم الـhead وهي الآتي
<title>, <style>, <meta>, <link>, <script>, <base>.
والآن لنفهم ما فائدة هذه الوسوم التي توضع داخل وسم أو tag الـhead
الوسم الأول
<head> <title> هنا عنوان الموقع أو الصفحة </title> </head>وسم الـtitle يوضع داخل وسم الـhead ليعرض عنوان الموقع
الوسم الثاني
<head>وسم الـstyle وهو وسم زوجي لو بداية ونهاية . وأهميته أنه يوضع بداخله أكواد css وسنتعلم كيفية إستخدام css في HTML في الدرس القادم بإذن الله
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
الوسم الثالث - الإستخدام الأول charset="utf-8" الترميز العالمي
<head> <meta charset="utf-8" /> </head>هذا هو الإستخدام الأول لـmeta هناك عدة استخدامات أخري سنفهمها الآن . charset="utf-8"هذا Attribute هو المسؤل عن الترميز العالمي للغة . بشكل أوضح هذا Attribute يتم كتابته لكي يعرض اللغة كما هي مكتوبة . فمثلاً إذا كتبت كلام وجمل عربية دون وضع هذا Attribute سوف يظهر بلغة غريبة جداً , وعند وضعك لهذا Attribute تظهر اللغة العربية كما هي مكتوبة في ملف HTML .
الوسم الثالث - الاستخدام الثاني (الكلمات المفتاحية + وصف الموقع + مؤسس الموقع )
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
كما رأيت فقد فتحت وسم أو tag الـmeta وكتبت name وبداخله keywords ثم content وكتبت بداخله الكلمات الأكثر شيوعاً في موقعي أو الكلمات المفتاحية .
ملاحظة : ما يكتب داخل الـname .يُعرف ما بداخل الـcontent . فمثلاً إذا وضعنا بداخل الـname الـdescription سيكون ما بداخل الـcontent هو الوصف وليس الكلمات المفتاحية . وهذا هو المعني ل(( ما يكتب داخل الـname .يُعرف ما بداخل الـcontent)) .
والآن لنري كيف نضع وصف لموقعنا , لكي تقرأه محركات البحث . الحقيقة كل ما عليك فعله هو أن تضع بداخل الـname الـ((description )) بدل من keywords ونغير ما بداخل الـcontent إلي وصف يليق موقعنا , وإذا أردت أن تضع إسمك كمؤسس للموقع أكتب داخل الـname الـ((author)) وغير ما بداخل الـcontent . هذا كل المهم ما في الـmeta .
كما تعلمنا من قبل أن عند حفظ ملف HTML يحفظ بامتداد .html . أيضاً يحدث ذلك في css فنحفظ الملف بامتداد .css لكي نقول للمتصفح أن ما بداخل هذا الملف أكواد css فطبقها من فضلك . وإذا وضعناها بامتداد آخر لن تعمل .
فكما نري الآن أنشأت ملف بإسم mystyle ووضعت بداخله أكواد css . وقمت بعمل اتصال بين ملف HTML و CSS عبر وسم الـLink . وكنا قد تعلمنا كيفية وضع أكواد css داخل وسم style من وقت قليل في هذه التدوينة . ((الطريقتان صحيحتان . أنصحك بالعمل بوسم الـLink )) .
ثانياً الـrel و type .
الـ rel يكتب بداخله هنا style sheet . لكي نعرف المتصفح أن هذا الملف يحتوي علي أكواد تجميلية . أما عن type ويكتب بداخله text/css فهذا مهم أيضاً , لكي نعرف المتصفح أن الملف css . وستتعلم الكثير عن type في رحلتك البرمجية . كل هذه الأوامر مهمه ولا بد من كتبتها . لكي تحصل علي نتيجة صحيحة .
وسم الـscript يكتب بداخله اكواد لغة javascript جافا سكربت . وهذا ما سنتعلمه في مدونة المبرمج في دروس قادمة بإذن الله وسنتعلم لغة الجافا سكربت بالتفصيل إن شاء الله .
والآن لنفهم ماذا كتبنا داخل وسم الـhead والـbody. !
وسم الـ base يعطي قيمة لشئ لم أكتبه في وسم الـbody . فكما ترون . فقد قمن بكتابة كود رابط داخل وسم الـbase وأعطيته رابط مدونة المبرمج .
وبعد ذلك كتبت كود رابط في وسم الـbody وأعطيته رابط الفيس بوك بعنوان facebook ثم وضعت مسافة سطر بالـbr ثم وضعت كود رابط آخر دون وضع رابط يذهب إليه . فهذه الحالة يأخذ هذا الكود . الكود الموجود في وسم الـbase .
بشكل أوضح وأدق .
إذا طبقنا هذا الكود علي المتصفح , لكي نري نتيجة عملنا . ماذا سنري . سنري الصفحة وبها . رابطين . الأول بإسم الFacebook وإذا ضغتنا عليه يذهب لموقع الفيس بوك .
الرابط الثاني بعنوان Website bmpor وإذا ضغتنا عليه يذهب لمدونة المبرمج مع أننا لم نضع بداخله أي شئ يذهب إليه . لكنه استعان بالقيمة الافتراضية الموجودة في وسم الـbase . ويترتب علي ذلك . أنه إذا وضعنا أكواد روابط دون أن نعطي لها موقع تذهب إليه . ستستعين بالكود المكتوب داخل وسم الـbase وتذهب ل صفحة مدونة المبرمج .
بذلك نكون قد انتهينا من تعلم وسم الـhead وما يكتب داخله من وسوم وأكود .
ملاحظة : ما يكتب داخل الـname .يُعرف ما بداخل الـcontent . فمثلاً إذا وضعنا بداخل الـname الـdescription سيكون ما بداخل الـcontent هو الوصف وليس الكلمات المفتاحية . وهذا هو المعني ل(( ما يكتب داخل الـname .يُعرف ما بداخل الـcontent)) .
والآن لنري كيف نضع وصف لموقعنا , لكي تقرأه محركات البحث . الحقيقة كل ما عليك فعله هو أن تضع بداخل الـname الـ((description )) بدل من keywords ونغير ما بداخل الـcontent إلي وصف يليق موقعنا , وإذا أردت أن تضع إسمك كمؤسس للموقع أكتب داخل الـname الـ((author)) وغير ما بداخل الـcontent . هذا كل المهم ما في الـmeta .
الوسم الرابع الـLink
<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>نبدأ بفهم الـhref .
كما تعلمنا من قبل أن عند حفظ ملف HTML يحفظ بامتداد .html . أيضاً يحدث ذلك في css فنحفظ الملف بامتداد .css لكي نقول للمتصفح أن ما بداخل هذا الملف أكواد css فطبقها من فضلك . وإذا وضعناها بامتداد آخر لن تعمل .
فكما نري الآن أنشأت ملف بإسم mystyle ووضعت بداخله أكواد css . وقمت بعمل اتصال بين ملف HTML و CSS عبر وسم الـLink . وكنا قد تعلمنا كيفية وضع أكواد css داخل وسم style من وقت قليل في هذه التدوينة . ((الطريقتان صحيحتان . أنصحك بالعمل بوسم الـLink )) .
ثانياً الـrel و type .
الـ rel يكتب بداخله هنا style sheet . لكي نعرف المتصفح أن هذا الملف يحتوي علي أكواد تجميلية . أما عن type ويكتب بداخله text/css فهذا مهم أيضاً , لكي نعرف المتصفح أن الملف css . وستتعلم الكثير عن type في رحلتك البرمجية . كل هذه الأوامر مهمه ولا بد من كتبتها . لكي تحصل علي نتيجة صحيحة .
الوسم الخامس الـscript
<head> <script> document.write("java script"); </script> </head>وسم الـscript يكتب بداخل وسم الـhead .
وسم الـscript يكتب بداخله اكواد لغة javascript جافا سكربت . وهذا ما سنتعلمه في مدونة المبرمج في دروس قادمة بإذن الله وسنتعلم لغة الجافا سكربت بالتفصيل إن شاء الله .
الوسم السادس الـbase
<html> <head> <base href="http://bmpor.blogspot.com/" target="_blank" > </head> <body> <a href="https://www.facebook.com" target="_blank">Facebook</a> <br> <a href="" >Website bmpor</a> </body> </html>انتهيت من كتابة الكود !
والآن لنفهم ماذا كتبنا داخل وسم الـhead والـbody. !
وسم الـ base يعطي قيمة لشئ لم أكتبه في وسم الـbody . فكما ترون . فقد قمن بكتابة كود رابط داخل وسم الـbase وأعطيته رابط مدونة المبرمج .
وبعد ذلك كتبت كود رابط في وسم الـbody وأعطيته رابط الفيس بوك بعنوان facebook ثم وضعت مسافة سطر بالـbr ثم وضعت كود رابط آخر دون وضع رابط يذهب إليه . فهذه الحالة يأخذ هذا الكود . الكود الموجود في وسم الـbase .
بشكل أوضح وأدق .
إذا طبقنا هذا الكود علي المتصفح , لكي نري نتيجة عملنا . ماذا سنري . سنري الصفحة وبها . رابطين . الأول بإسم الFacebook وإذا ضغتنا عليه يذهب لموقع الفيس بوك .
الرابط الثاني بعنوان Website bmpor وإذا ضغتنا عليه يذهب لمدونة المبرمج مع أننا لم نضع بداخله أي شئ يذهب إليه . لكنه استعان بالقيمة الافتراضية الموجودة في وسم الـbase . ويترتب علي ذلك . أنه إذا وضعنا أكواد روابط دون أن نعطي لها موقع تذهب إليه . ستستعين بالكود المكتوب داخل وسم الـbase وتذهب ل صفحة مدونة المبرمج .
بذلك نكون قد انتهينا من تعلم وسم الـhead وما يكتب داخله من وسوم وأكود .
بكده يكون انتهي الدرس .
صلي الله وسلم علي سيدنا محمد وعلي آله وصحبه أجمعين . دمتم في رعاية الله :) .
صلي الله وسلم علي سيدنا محمد وعلي آله وصحبه أجمعين . دمتم في رعاية الله :) .
ليست هناك تعليقات:
إرسال تعليق