3 الفصل الأول: أساسيات HTML إنشاء أول صفحة HTML

Byahmed nabel Ahmed Nabel - Html

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

3. إنشاء أول صفحة HTML

الخطوة الأولى نحو تعلم HTML هي كتابة أول صفحة ويب بسيطة. هنتعلم مع بعض إزاي نكتب كود HTML ونعرض الصفحة في المتصفح.

1. كتابة كود HTML بسيط

هتبدأ بكتابة الكود الأساسي لصفحة 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">: تحديد أن الصفحة مكتوبة باللغة العربية.
  • <head>: يحتوي على معلومات الصفحة، مثل العنوان (title) والـ meta tags.
  • <body>: يحتوي على محتوى الصفحة، مثل العناوين، الفقرات، والروابط.

شرح الكود:

  • <h1>: يستخدم لعرض العنوان الرئيسي.
  • <p>: لكتابة فقرة نصية.
  • <a href="...">: لإنشاء رابط يؤدي إلى صفحة أخرى (في المثال ده، رابط إلى example.com).

2. كيفية عرض الصفحة في المتصفح

بعد ما تكتب الكود في محرر النصوص، لازم تعرض الصفحة في المتصفح عشان تشوف النتيجة.

الخطوات:

  1. فتح محرر النصوص:
    استخدم أي محرر نصوص بسيط، زي Notepad (في الويندوز) أو TextEdit (في الماك). لو كنت تستخدم محرر أكواد متقدم زي Visual Studio Code أو Sublime Text، هتقدر تكتب الكود بشكل أسهل.
  2. كتابة الكود:
    افتح محرر النصوص واكتب الكود اللي اتعلمناه قبل كده.
  3. حفظ الملف: بعد ما تكتب الكود، لازم تحفظه بامتداد .html. زي:
    first_page.html
  4. فتح الملف في المتصفح:
    • بعد ما تحفظ الملف، افتحه مباشرة في المتصفح.
    • لو كنت استخدمت Notepad أو محرر نصوص مشابه، تقدر تفتح الملف من خلال المتصفح عن طريق النقر عليه مرتين.
    • لو كنت تستخدم محرر أكواد زي Visual Studio Code، تقدر أيضًا فتحه في المتصفح مباشرة.
  5. مشاهدة الصفحة: عند فتح الملف في المتصفح، هتشوف أول صفحة HTML لكتبتها. هتظهر العنوان الرئيسي (“مرحبًا بك في تعلم HTML!”)، الفقرة النصية (“هذه هي أول صفحة HTML…”)، والرابط اللي بيؤدي إلى موقع آخر.

ملخص كيفية إنشاء أول صفحة HTML:

  • كتابة الكود: نكتب كود HTML أساسي يحتوي على العناصر <html>, <head>, و<body>.
  • حفظ الملف: نحفظ الملف بامتداد .html.
  • عرض الصفحة في المتصفح: نفتح الملف في المتصفح مباشرة لرؤية النتيجة.

تمرين عملي:

  • جرب تكتب كود HTML بنفسك لإنشاء صفحة بسيطة تحتوي على عنوان رئيسي <h1>، فقرة <p>، وصورة باستخدام <img>. بعد ما تكتب الكود، احفظه وافتحه في المتصفح.

مثال:

html
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>صفحة HTML جديدة</title>
</head>
<body>
<h1>مرحبًا في HTML!</h1>
<p>هذه صفحة بسيطة فيها عنوان وفقرة وصورة.</p>
<img src="https://via.placeholder.com/150" alt="صورة عشوائية">
</body>
</html>
  • <img src="..." alt="...">: هذا الوسم يستخدم لإضافة صورة في الصفحة.

    Similar Posts

    اترك تعليقاً

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