random
أخبار ساخنة

كيفية اضافة الروابط و اكواد css و js في Html بكل بساطة

Samouel Ghaly
الصفحة الرئيسية

في موضوع اليوم هنتعرف علي كيفية اضافة الروابط و اكواد css و js في Html بكل بساطة

شرح عناصر قسم <head> في HTML – الجزء الجديد

أهلاً بيكم يا شباب، عاملين إيه؟ يا رب تكونوا دايمًا بخير وبصحة وسلامة.
في فيديو النهاردة، هنكمل شرح عناصر قسم الـ <head> اللي بدأناه قبل كده، وهنعرف عنصر جديد وهنفهم استخدامه بالتفصيل.

مراجعة سريعة

إحنا في الفيديوهات اللي فاتت، شرحنا شوية عناصر موجودة فوق في قسم الهيد، زي:

  • تاج <meta>

  • وبعض العناصر التانية اللي اتكلمنا عنها قبل كده

وقلنا إن التاج <meta> هو تاج سينجل، يعني ملوش تاج نهاية.

وممكن تلاقي تاج <meta> مكرر كذا مرة جوه قسم <head>، وممكن بعض الناس تضيفه أو لا، حسب استخدامهم. يعني الموضوع راجع ليك، تضيفه أو لا، حسب ما يناسب موقعك.

العنصر الأول: <meta name="viewport" content="width=device-width, initial-scale=1.0">

التاج اللي معانا دلوقتي هو تاج <meta> برضو، بس مختلف في الاتربيوتس.

الكود: 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

بيعمل إيه؟

ده مسؤول عن تجاوب الموقع مع حجم شاشة الجهاز.
يعني إيه تجاوب؟ يعني لو فتحت الموقع على موبايل، تابلت، أو كمبيوتر، هيظبط نفسه على حسب حجم الشاشة.

مثال عملي:

جرب تفتح موقع زي Google، وصغّر حجم المتصفح، هتلاقي كل حاجة بتصغر وتترتب عشان تناسب حجم الشاشة. ده اللي بيعمله التاج ده.

العنصر التاني: التحديث التلقائي – <meta http-equiv="refresh">

الكود: 

<meta http-equiv="refresh" content="5">
الاتربيوت هنا بقى اسمه http-equiv، وقيمته refresh.
ده بيخلّي الموقع يعمل تحديث تلقائي كل عدد معين من الثواني.

مثال:

لو كتبنا: 

<meta http-equiv="refresh" content="5">

الموقع هيعمل تحديث تلقائي كل 5 ثواني.

كمان ممكن نحدد URL بعد التحديث: 

<meta http-equiv="refresh" content="5; URL=https://google.com">

وده معناه إن بعد 5 ثواني من تحميل الصفحة، الموقع هيحوّلك تلقائيًا على رابط Google.

⚠️ خد بالك: التحديث التلقائي المستمر (زي لما تحط content="0") مش محبذ في المواقع الحقيقية، لأنه بيأثر على تجربة المستخدم.

العنصر التالت: <link>

ده عنصر بيستخدم في ربط الملفات الخارجية بالموقع، زي ملفات CSS أو خطوط من Google Fonts.

الشكل الأساسي: 

<link rel="stylesheet" href="style.css">

شرح الاتربيوتس:

  • rel="stylesheet": نوع الرابط – هنا ستايل شيت (CSS).

  • href="...": هو مسار الملف الخارجي.

ممكن تلاقي كذا <link> جوه الهيد، وده طبيعي جدًا حسب استخداماتك.

العنصر الرابع: <style>

لو مش هتربط ملف CSS خارجي وعايز تكتب كود CSS مباشر جوا HTML، بتستخدم تاج <style>.

الشكل: 

<style>
    body {
        background-color: blue;
    }
</style>

  • التاج ده ليه بداية ونهاية.

  • بتكتب جواه كود CSS مباشر.

طبعًا لما نوصل لكورس CSS هنتكلم بالتفصيل عن التنسيقات.

العنصر الخامس: <script>

التاج ده بنستخدمه علشان نكتب كود JavaScript سواء جوا التاج نفسه أو نربطه بملف خارجي.

مثال: 

<script>
    alert("أهلاً بيك في الموقع!");
</script>

مش هنشرح جافا سكريبت دلوقتي، لكن هنستخدمه إن شاء الله في الكورس الخاص بيها.

العنصر السادس: <base>

ده تاج سينجل برضو، وبيحدد الأساس اللي الروابط هتتبني عليه.

الشكل: 

<base href="https://example.com/" target="_blank">

شرح الاتربيوتس:

  • href: الرابط الأساسي اللي كل الروابط النسبية هتتبني عليه.

  • target: طريقة فتح الروابط.

أنواع الـ target:

  • _self: يفتح الرابط في نفس التبويب.

  • _blank: يفتح الرابط في تبويب جديد.

وده بيساعد لو عندك قالب HTML ثابت وعايز تتحكم في طريقة فتح الروابط كلها من مكان واحد.

ملخص سريع:

في الفيديو ده اتعلمنا:

  1. الفرق بين الأنواع المختلفة من تاج <meta>.

  2. إزاي نعمل تحديث تلقائي للصفحة.

  3. إزاي نربط ملفات CSS وJavaScript.

  4. الفرق بين <link> و <style>.

  5. استخدام تاج <base> في تحديد المسارات الأساسية.

شاهد فيديو توضيحي

وفي النهاية اتمني يكون الموضوع افادكم فلا تنسي متابعتي علي قناة اليوتيوب
ولكم جزيل الشكر ❤️❤️
google-playkhamsatmostaqltradent