2 الفصل الأول: أساسيات HTML

Byahmed nabel Ahmed Nabel - Html

الفصل الأول: أساسيات HTML

2. الهيكل الأساسي لصفحة HTML

كل صفحة HTML تتكون من مجموعة من العناصر اللي بتحدد بنية الصفحة. بداية من الوسم <html> لغاية العناصر الموجودة في داخله زي <head> و <body>. خلينا نفصل كل جزء.

1. وسم <html>

  • <html> هو الوسم الأساسي في صفحة HTML، وهو اللي يحدد بداية ونهاية محتوى الصفحة.
  • كل شيء في الصفحة، من نصوص وصور وروابط، بيتحط جوا وسم <html>.
  • الصفحة بتبدأ بـ <html> وتنتهي بـ </html>.

الشرح:

  • وسم <html> يخبر المتصفح بأن المحتوى هو صفحة HTML.
  • يمكن تحديد لغة الصفحة باستخدام خاصية lang، على سبيل المثال:
    html
    <html lang="ar">

ده يعني إن الصفحة مكتوبة باللغة العربية، وده بيساعد محركات البحث والمتصفحات في تقديم تجربة أفضل للمستخدم.

2. العنصر <head>

  • <head> هو العنصر اللي يحتوي على معلومات عن الصفحة ولكن مش بيظهر للمستخدم مباشرة.
  • يحتوي عادةً على العناصر التالية:
    • <title>: لتحديد عنوان الصفحة اللي بيظهر في التبويب في المتصفح.
    • <meta>: لتحديد معلومات إضافية عن الصفحة مثل charset أو وصف الصفحة.
    • <link>: لتوصيل ملفات CSS خارجية.
    • <style>: لتضمين أكواد CSS مباشرة داخل الصفحة.
    • <script>: لتضمين أكواد JavaScript مباشرة.

مثال:

html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>صفحة HTML أساسية</title>
<link rel="stylesheet" href="styles.css">
<style>
body {
font-family: Arial, sans-serif;
}
</style>
<script>
console.log('أهلاً بك في HTML!');
</script>
</head>
  • <meta charset="UTF-8">: بتحدد نوع الترميز المستخدم في الصفحة (UTF-8) وهو مهم عشان يضمن أن النصوص تتعرض بشكل صحيح، خصوصًا الحروف العربية.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: هذه الميتا تاج مهمة لصفحات الموبايل، عشان الصفحة تظهر بشكل جيد على الأجهزة المحمولة.

3. العنصر <body>

  • <body> هو الجزء اللي بيحتوي على محتوى الصفحة اللي بيشوفه المستخدم.
  • كل النصوص، الصور، الروابط، النماذج، والجداول وكل العناصر الأخرى بتكون جوا الـ <body>.
  • كل شيء تراه في المتصفح يكون داخل وسم <body>.

مثال:

html
<body>
<h1>مرحبًا بك في تعلم HTML!</h1>
<p>هذه هي أول صفحة HTML تقوم بإنشائها.</p>
<a href="https://www.example.com">اضغط هنا</a>
</body>
  • <h1>: العنوان الرئيسي.
  • <p>: فقرة نصية.
  • <a>: رابط يؤدي إلى صفحة أخرى.

الهيكل الكامل لصفحة HTML

الهيكل الأساسي لصفحة HTML يتكون من 3 أجزاء رئيسية:

  1. <html>: بداية الصفحة.
  2. <head>: يحتوي على معلومات metadata مثل العنوان وتوصيل ملفات CSS وJavaScript.
  3. <body>: يحتوي على المحتوى الذي يظهر للمستخدم.

مثال على هيكل صفحة HTML أساسي:

html
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>صفحة HTML أساسية</title>
</head>
<body>
<h1>مرحبًا بك في تعلم HTML!</h1>
<p>هذه هي أول صفحة HTML تقوم بإنشائها.</p>
<a href="https://www.example.com">اضغط هنا</a>
</body>
</html>
  • <!DOCTYPE html>: هذا السطر في أول الصفحة بيشير إلى أن الصفحة HTML5.
  • <html lang="ar">: الصفحة مكتوبة باللغة العربية.

ملخص الفصل الأول – الجزء الثاني: الهيكل الأساسي لصفحة HTML

  • <html> هو الوسم الأساسي الذي يحدد بداية ونهاية صفحة HTML.
  • <head> يحتوي على معلومات غير مرئية للمستخدم مثل العنوان والروابط وملفات CSS وJavaScript.
  • <body> يحتوي على كل محتوى الصفحة الذي يظهر للمستخدم.

    Similar Posts

    اترك تعليقاً

    لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *