تعلم تصميم المواقع HTML (الدرس الاول)

مرحبا بكم 

  في هذا الدرس سنتعلم كيفية تصميم المواقع بلغة HTML و هي لغة بسيطة جدا وممتعة و لا تحتاج الى احتراف او اي شىء اخر يعني هذا الدرس للمبتدئين و المحترفين 

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

                                                                       <body>
                                                                    </body>

                                                                                 </html>

ج-/ نريد للصفحة ان تقول "welcom to my first site" 
 نريد للصفحة أن تقول "welcom to my first site"، هذا النص الذي نريد وضعه في الصفحة، لذلك علينا أن نكتب في متن الصفحة ما يلي::
              <p>مرحى! هذا هو موقعي الأول.</p>
الحرف p في <p> هو اختصار "paragraph" أو فقرة، وهو أمر بسيط لإنشاء فقرات نصية.
صفحة HTML يجب أن تكون لديك بالشكل التالي:الحرف p في <p> هو اختصار "paragraph" أو فقرة، وهو أمر بسيط لإنشاء فقرات نصية.
صفحة HTML يجب أن تكون لديك بالشكل التالي:

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




تعلم تصميم المواقع HTML (الدرس الاول)
مبروك عليك موقعك الاول سوف يظهر هاكذا
اذن كانت هذه هي حلقة اليوم في دورة HTML ترقبو مني الكثير من الدروس في دورة  تصميم المواقع 

تعلم تصميم المواقع HTML (الدرس الاول)

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


ليست هناك تعليقات:

إرسال تعليق