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





سلسلة دروس HTML ( الدرس الرابع: إنشاء موقعك الأول )

[CENTER][IMG]_fpclass/images_f/2/8.gif[/IMG] [IMG]_fpclass/images_f/2/13.gif[/IMG] [/CENTER] الدرس الرابع: إن ..



11-11-2011 11:16 صباحا
احمد عادل
rating
الأوسمة:1
وسام عضو مميز
وسام عضو مميز
معلومات الكاتب ▼
تاريخ الإنضمام : 04-06-2011
رقم العضوية : 50
المشاركات : 218
الدولة : DZ
الجنس : ذكر
تاريخ الميلاد : 24-3-1992
قوة السمعة : 263
الدولة : الجزائر
 offline 
[CENTER]8




13


[/CENTER]






الدرس الرابع: إنشاء موقعك الأول


مع كل ما تعلمته في الدروس السابقة أصبحت الآن على بعد دقائق من إنشاء أول موقع لك.

كيف؟


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

أيضاً عليك أن تفتح برنامج المفكرة "Notepad" والذي ستجده في قائمة إبدأ ثم برامج ثم أدوات:

notepad

أنت جاهز الآن!

ماذا أفعل؟


لنبدأ بشيء بسيط، سنقوم بإنشاء صفحة تقول "مرحى! هذا هو موقعي الأول." أكمل القراءة وستعرف كم هو بسيط فعل ذلك.

لغة HTML بسيطة ومنطقية، المتصفح يقرأ HTML كما تقرأ أنت اللغة الإنجليزية: من الأعلى إلى الأسفل ومن اليسار إلى اليمين، لذلك صفحة HTML بسيطة تبدأ بما يجب أن تبدأ به أي صفحة HTML وتنتهي بما يجب أن يأتي في نهاية الصفحة.

أول شيء عليك فعله هو أن تخبر المتصفح بأنك "ستتحدث" معه بلغة HTML، يمكنك فعل ذلك عن طريق وسم <html> لا توجد أي مفاجئة هنا، لذلك قبل أن تبدأ أي شيء أكتب "<html>" في أول سطر في برنامج المفكرة.

كما تتذكر من الدروس الماضية، <html> هو وسم البداية ويحتاج إلى وسم إغلاق لذلك لا تنسى كتابة وسم الإغلاق بعد سطرين فارغين، وبقية الوثيقة ستكتبها بين <html> و</html>.

الشيء التالي الذي تحتاجه صفحتك هو أمر رأس الصفحة "head" والذي يقدم معلومات حول الصفحة للمتصفح، وكذلك تحتاج إلى أمر "body" والذي سيحوي المحتويات التي تريد ان تضعها في الصفحة، أمر head أو رأس الصفحة (<head> و</head>wink_3 يوضع فوق أمر body أو "متن الصفحة" (<body> و</body>wink_3.

صفحتك يجب أن تكون بهذا الشكل:

<html> <head> </head> <body> </body> </html>

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

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

جميل, لكن كيف أضيف المحتويات للموقع؟


كما تعلمت سابقاً، صفحة HTML تحوي جزئياً، رأس الصفحة ومتن الصفحة، في رأس الصفحة تكتب معلومات عن الصفحة نفسها، أما المتن فيضم المحتويات التي تشكل الصفحة..

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

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

لاحظ أن العنوان لن يظهر في الصفحة نفسها، أي شيء تريده أن يظهر في الصفحة يجب أن يضاف بين وسمي متن الصفحة

كما قلنا سابقاً، نريد للصفحة أن تقول "مرحى! هذا هو موقعي الأول"، هذا النص الذي نريد وضعه في الصفحة، لذلك علينا أن نكتب في متن الصفحة ما يلي::

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

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

صفحة HTML يجب أن تكون لديك بالشكل التالي:

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

انتهينا! لديك الآن أول موقع حقيقي!

كل ما عليك فعله الآن هو حفظ الصفحة على القرص الصلب ثم عليك أن تستعرضها في متصفحك:

    saveas

    الآن إذهب إلى متصفحك:

      open

      الآن يجب أن تحوي الصفحة جملة "مرحى! هذا هو موقعي الأول." تهانينا!

      إذا أردت أن يعرف العالم كله عن هذه الصفحة بإمكانك أن تقفز للدرس الثالث عشر وتتعلم كيفية وضع هذه الصفحة على شبكة إنترنت، خلافاً لذلك اصبر وأكمل قراءة الدروس
      [frame=8]يتبع[/frame][CENTER]13

      [/CENTER]
      منقول للفائدة









      11-11-2011 12:12 مساء
      مشاهدة مشاركة منفردة [1]
      رشيد الوهراني
      rating
      معلومات الكاتب ▼
      تاريخ الإنضمام : 06-10-2011
      رقم العضوية : 163
      المشاركات : 348
      الدولة : الجزائر
      الجنس : ذكر
      قوة السمعة : 207
       offline 
      look/images/icons/i1.gif سلسلة دروس HTML ( الدرس الرابع: إنشاء موقعك الأول )
      شكرا على الدروس المفيدة

      تحياتي

      23-01-2012 12:04 مساء
      مشاهدة مشاركة منفردة [2]
      قويدر44444
      rating
      معلومات الكاتب ▼
      تاريخ الإنضمام : 23-01-2012
      رقم العضوية : 254
      المشاركات : 123
      الجنس : ذكر
      قوة السمعة : 106
       offline 
      look/images/icons/i1.gif سلسلة دروس HTML ( الدرس الرابع: إنشاء موقعك الأول )
      شكرا لك




      الكلمات الدلالية
      سلسلة ، دروس ، HTML ، الدرس ، الرابع: ، إنشاء ، موقعك ، الأول ،


       







      الساعة الآن 02:03 صباحا