دورة HTML - الدرس الثالث ( HTML head رأس الموقع )


عنصر ال <head > :

العنصر <head> في صفحة HTML هو وعاء لجميع عناصر رأس الموقع ، هذه العناصر التي يمكن أن تحوي سكريبتات ،
تعريفات للمتصفح لمعرفة لغة البرمجة و لغة الموقع أيضا ، و كثير من الأمور .
الوسوم التالية يمكن اضافتها الى العنصر <head> :
<title> , <style>, <meta>, <link>, <script>, <noscript>, and <base>.

عنصر <title> 
كما شرحناه في الدروس السابقة يوضح عنوان الصفحة أو الموقع

يفيد الوسم <title>  كثيرا لأنه يجعل موقعك يظهر في نتائج البحث عند كتابة مثل عنوان الموقع
مثلا لو تذهب إلى محرك البحث google و تكتب dzlearning يطلع موقعنا بنتائج البحث

العنصر <base> :
هذا الوسم يحدد عنوان ال URL الرئيسي للروابط الفرعية على الصفحة كمثال سنجعل لكل الروابط الفرعية رابط رئيسي dzlearning.com
<head>
<base href="https://www.dzlearning.com/" target="_blank">
</head>

العنصر <link> 
هذا العنصر يحدد أي رابطة بين الصفحة و صفحات خارجية و يستعمل غالبا لربط صفحة الHTML بلغات محسنة اخرى
مثل لغة CSS و لغة الجافاسكريبت و سنعمل دورة لهما باذن الله

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
هذا مثال لربط صفحة الموقع لصفحة CSS اسمها mystyle.css
العنصر <style> 
هذا العنصر يعرف خصائص صفحة HTML و كيفية ظهورها و يحوي غالبا أيضا أكواد CSS و جافاسكريبت

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

واللون الأزرق بكل الفقرات التي ستكون في الملف

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
عنصر <meta> 

العنصر <meta> هو من أهم العناصر و يحوي معلومات هامة حول ملف HTML مثل توصيف الموقع و الكلمات المفتاحية
مؤلف الموقع أو صاحبه ، آخر تعديل و غيرها من البيانات الوصفية .

الميتا داتا يمكن استخدامها من طرف المتصفحات (كيفية عرض المحتوى أو صفحة تحديث)،
وتنفع كثيرا في الارشفة على محركات البحث (كلمات المفتاحية )، أو خدمات الويب الأخرى.
الميتا تاغ دائما تكون داخل عنصر <head>
مثال عن تعريف الكلمات المفتاحية :
<"meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript>

مثال عن توصيف الموقع :

<meta name="description" content="موقع تعلم المصدر الأول للتعلم ">
تحديث الصفحة كل 30 ثانية :
<meta http-equiv="refresh" content="30">
 تعريف اللغة العربية حتى يعرفها المتصفح :
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
انتهى الدرس ... 

دعواتكم لنا

تعليقات

إرسال تعليق

المشاركات الشائعة من هذه المدونة

دليلك الى فحص الشبكات والسيرفرات عن طريق أداة Nmap

صورة
من المحتمل أن يكون Nmap أحد أشهر أدوات الفحص الأمني. Nmap عبارة عن أداة مسح مجانية ومفتوحة المصدر للشبكات تم إنشاؤها بواسطة Gordon Lyon. يتم استخدامه لفحص السيرفرات للمنافذ المفتوحة والخدمات قيد التشغيل. في هذا المقال، سيكون لديك فهم كبير لأوامر المسح المفيدة للغاية التي تنفذها Nmap. دعنا نغوص🙂 قبل أن نبدأ، يجب أن أذكر أنه لفهم كامل، تحتاج إلى بعض الأساسيات حول الشبكات، TCP / IP ونموذج OSI. سأستخدم Kali Linux على الجهاز المستهدف Metasploitable. التنصيب: من الواضح أنه قبل استخدام Nmap ، يجب عليك تثبيته أولاً. Centos yum install nmap Debian  apt-get install nmap Ubuntu sudo apt-get install nmap Windows  بالنسبة إلى Windows، ما عليك سوى الانتقال إلى موقع الويب وتنزيله وتثبيته مثل برنامج windows المعتاد. على الرابط: https://nmap.org/book/inst-windows.html الأوامر الأساسية: nmap 10.0.0.5 الأمر الأساسي هو أمر مباشر باستخدام الاداة. فقط اكتب nmap متبوعًا بعنوان IP الذي تريد مسحه. مسح بينغ nmap 10.0.2.0/24 استخدام ال...
قراءة المزيد

دورة HTML - الدرس الخامس ( الصور و الجداول )

صورة
<!DOCTYPE html> <html> <body><p> صورة<img src=" https://www.w3schools.com/html/smiley.gif " alt="Smiley face" width="32" height="32"></p><p> صورة متحركة : <img src=" https://www.w3schools.com/html/hackanm.gif " alt="Computer man" width="48" height="48"></p><p> كود وضع صورة متحركة هو نفسه كود وضع صورة ثابتة</p></body> </html> هنا كيفية ظهور الكود :صورة: صورة متحركة :  كود وضع صورة متحركة هو نفسه كود وضع صورة ثابتة صور HTML - وسم <img> :  في لغة ال HTML نعرف الصور عن طريق الوسم <img> هذا الوسم ليس لديه محتوى و ليس لديه وسم اغلاق كما في الوسوم الاخرى من أجل اظهار الصورة داخل الوسم نستعمل src و هي اختصار ل source و يكون داخلها رابط الصورة الصيغة الخاصة بالصور في لغة html :    <img src=" رابط الصورة " alt=" نص "> في رابط الصورة ممكن ...
قراءة المزيد

تعلم برمجة Pascal الدرس الاول - مقدمه

صورة
السلام عليكم ورحمة الله وبركاته سأقدم لكم دروس فعلاً مفيده و سهله و تشرح الاساسيات بالتفصيل بإذن الله , سوف اقوم بإضافة كل درس على حدة برمجه موفقه مع باسكال بإذن الله . تعلم برمجة Pascal الدرس الاول - مقدمه عن باسكال : باسكال لغة برمجه انشئت بواسطة Niklaus Wirth في عام 1970 . كان اسمها سابقاً Blaise Pascal , عالم الرياضيات الفرنسي المشهور . لقد صنعت هذه اللغه لتعليم البرمجه ولكي تكون محل ثقه لدى المبرمجين . منذ ذلك الوقت قد اصبحت لغة البرمجه باسكال اكثر من انها فقط لغه اكاديميه و لكنّها استخدمت تجارياً ايضا . ما الذي احتاجه لأبدأ مع باسكال : قبل بداية تعلم برمجة الباسكال , تحتاج إلى مترجم باسكال (compiler) . هذا الدرس يستخدم (مترجم باسكال المجاني) : https://www.freepascal.org/ .  يمكنك الحصول على قائمه من مترجمات باسكال في https://www.freebyte....ascal_compilers . أو حمل تطبيق turbo pascal من الموقع إليكم الرابط  www.commentcamarche.net/.../telecharger-34096272- turbo - pascal برنامجك الاول : اول شئ يجب ان تفعله ان تفتح مترج...
قراءة المزيد