تقييم الموضوع :
  • 0 أصوات - بمعدل 0
  • 1
  • 2
  • 3
  • 4
  • 5

دورة تعلم HTML درس 3- أنشأ أول موقع لك

#1
أنشأ موقعك الأول بإستعمال HTML
[صورة مرفقة: %25D8%25AA%25D9%2583%25D9%2584%25D9%2581...9%258A.jpg]

بسم الله الرحمن الرحيم
في الدرس السابق تعرفنا على العناصر و الوسوم و كما وعدتكم إن شاء الله ستتمكنون من إنشاء أول موقع لكم بعد نهاية هذا الدرس
 
كيف ذلك؟ كما أسلفنا في الدروس السابقة فقد ألقينا نظرة على الأدوات التي نحتاجها لإنشاء موقع: متصفح وبرنامج المفكرة أو أي محرر نصي مماثل، وبما أنك تقرأ هذه الصفحة فأنت تستخدم الآن متصفحاً، ما تحتاجه الآن هو أن تفتح نافذة جديدة من المتصفح لكي تستطيع قراءة هذا الدرس بينما تستخدم النافذة الأخرى لترى فيها الموقع الذي تقوم بإنشاءه، كما يجب أيضاً أن تفتح برنامج المفكرة "Notepad" والذي ستجده في قائمة إبدأ ثم برامج ثم أدوات:

لنبدأ بشيء بسيط، سنقوم بإنشاء صفحة تقول "مرحى! هذا هو موقعي الأول." أكمل القراءة وستعرف كم هو بسيط فعل ذلك، كما قلنا سابقا لغة HTML بسيطة ومنطقية، المتصفح يقرأ HTML كما تقرأ أنت اللغة الإنجليزية: من الأعلى إلى الأسفل ومن اليسار إلى اليمين، لذلك صفحة HTML بسيطة تبدأ بما يجب أن تبدأ به أي صفحة HTML وتنتهي بما يجب أن يأتي في نهاية الصفحة، أول شيء عليك فعله هو أن تخبر المتصفح بأنك "ستتحدث" معه بلغة HTML، يمكنك فعل ذلك عن طريق وسم 
[صورة مرفقة: ttt.jpg]
لنبدأ بشيء بسيط، سنقوم بإنشاء صفحة تقول "مرحى! هذا هو موقعي الأول." أكمل القراءة وستعرف كم هو بسيط فعل ذلك، كما قلنا سابقا لغة HTML بسيطة ومنطقية، المتصفح يقرأ HTML كما تقرأ أنت اللغة الإنجليزية: من الأعلى إلى الأسفل ومن اليسار إلى اليمين، لذلك صفحة HTML بسيطة تبدأ بما يجب أن تبدأ به أي صفحة HTML وتنتهي بما يجب أن يأتي في نهاية الصفحة، أول شيء عليك فعله هو أن تخبر المتصفح بأنك "ستتحدث" معه بلغة HTML، يمكنك فعل ذلك عن طريق وسم <html> لا توجد أي مفاجئة هنا، لكن قبل أن تبدأ  أي شيء أكتب "<html>" في أول سطر في برنامج Notepad.
في الدروس الماضية تعلمنا أن <html> هو وسم البداية ويحتاج إلى وسم إغلاق لذلك لا تنسى كتابة وسم الإغلاق بعد سطرين فارغين، وبقية أوامر html سنكتبها بين <html>و</html>.
الأمر التالي الذي تحتاجه إنشاء صفحة الويب خاصتك هو أمر رأس الصفحة "head" والذي يقدم معلومات حول الصفحة للمتصفح، وكذلك تحتاج إلى أمر "body" والذي سيحوي المحتويات التي تريد ان تضعها في الصفحة، أمر head أو رأس الصفحة تكتبه بين الوسمين(<head> و</head>) و يوضع فوق أمر body أي وسط الوسمين (<body> و</body>).
و عليه فإن صفحتك يجب أن تكون بهذا الشكل:

كود :
    <html>

      <head>
      </head>

      <body>
      </body>

    </html>
يمكنك أن تلاحظ كيف قمنا بتنسيق الصفحة بطريقة منطقية حيث وضعنا كل وسم في سطر جديد ووضعنا مسافات فارغة بين كل وسمين من نفس النوع، حقيقة لا يهم كيف تقوم بتنسيق الأوامر في صفحة HTML لكن لتسهل عليك قراءة الأكواد و فهم الصفحة بسهولة لك وللآخرين ينصح بأن تنسق الصفحة بطريقة هيكلية منطقية سهلة الفهم كما ترى في المثال أعلاه.

حسنا هذا أبسط مثال لصفحة ويب فإذا كانت صفحتك تشبه المثال أعلاه فقد قمت بإنشاء موقعك الأول، لكن هل هذا كل شيء طبعا لا  فعملياً الموقع ممل ولا يحوي شيئاً و طبعا لن يكون الموقع الذي كنت تحلم به عندما بدأت في قراءة هذا الدرس، مع ذلك فإن الموقع الذي أنشأته هو الأساس  القالب الذي سيحمل بقية محتويات صفحاتHTML  للمواقع التي ستحررها مستقبلا.
المتعة الحقيقية لم تبدأ بعد فالصفحة فارغة تماما و لا يظهر أي شيء على الموقع و إذا  كيف يمكننا أن نضيف المحتويات للموقع؟ فكما تعلمنا سابقا فإن صفحة HTML تحوي أجزاء محددة، رأس الصفحة و كذا متن الصفحة، و تكتب في رأس الصفحة معلومات عن الصفحة نفسها، أما المتن فيضم المحتويات التي تشكل صفحة الموقع.
فمثلاً، إن أردنا أن نضع عنواناً للصفحة يظهر في الشريط العلوي للمتصفح فيجب أن تفعل ذلك في رأس الصفحة، و العنصر المستخدم لفعل ذلك هو title.  فما علينا إلا أن نكتب عنوانا لصفحتنا بين وسم البداية <title> و وسم الإغلاق  </title>


كود :
<title>
عنوان موقعي الأول
</title>

و يمكن أن تلاحظ أن العنوان لن يظهر في الصفحة نفسها، أي شيء تريده أن يظهر في الصفحة يجب أن يضاف بين وسمي متن الصفحة، حسنا نريد للصفحة أن تقول "رائع لقد أنشأت موقعي الأول"، هذا النص الذي نريد وضعه في الصفحة، لذلك سنكتب على متن الصفحة ما يلي:
كود :
<p>مرحى! هذا هو موقعي الأول.</p>

<p> هو اختصار لكلمة "paragraph" أي فقرة، وهو أمر بسيط في html لإنشاء النصوص.

أخير هكذا سيكون  نص الكود HTML لصفحة الموقع الذي أنجزناه:


كود :
<html>

      <head>
      <title>موقعي الأول</title>
      </head>

      <body>
      <p>مرحى! هذا هو موقعي الأول.</p>
      </body>

    </html>
حسنا هذا أول موقع حقيقي لك و ما عليك فعله الآن هو حفظ الصفحة على القرص الصلب و من ثم فتحها عن طريق المتصفح بدلا من Notepad، إختر "Save as..." من قائمة "File" في القائمة العلوية للبرنامج.

• إدخل في  "All Files" تجد في نافذة "Save as type" وهذا له أهميةً، لأنك إن لم تفعل ذلك ستقوم بحفظه كملف نصي وليس كملف HTML.
• احفظ الصفحة باسم "name1.htm" الأحرف الثلاثة الأخيرة htm تعني أن الملف هو من نوع HTML، بإمكانك أن تحفظ تضع بدلاً منها ".html" وستكون النتيجة متماثلة، شخصياً أستخدم ".htm" دائماً، لكن بإمكانك أن تختار بينهما ما تشاء، فلا فرق بينهما، ولا يهم أين تحفظ الملف في القرص الصلب، ما دمت تتذكر أين حفظته لكي تستطيع إيجاده مرة أخرى عند الحاجة إليه.


[صورة مرفقة: saveas.png]
نقوم الآن بفتح الصفحة التي قمنا بإنشائها:

• نختار من  القائمة العلوية  "Open" ثم نضغط على "File" (CTRL+O).
• نضغط على "Browse" في النافذة التي ستظهر .
• نبحث على الملف الذي قمنا بتحريره و نضغط على "Open".


[صورة مرفقة: open.png]
عند فتح الملف ستظهر لنا صفحة تحوي جملة " رائع لقد أنشأت موقعي الأول" تهانينا لك

و إن أراد أحدنا  أن يعرف العالم بهاته الصفحة فبإمكانه أن يقفز للدرس الثاني عشر ويتعلم كيفية وضع هذه الصفحة على شبكة إنترنت، و لكن أنا أنصحك أن لا تستعجل الأمور فذلك سيضع عليك وقتا كبيرا بدلا من ربحه خلافاً لذلك اصبر و أكمل قراءة الدروس و ستصل إلى نتيجة ترضيك إن شاء الله.


الرد


التنقل السريع :


مستخدمين يتصفحوا هذا الموضوع: 1 ضيف