المدرب المحترف

السلام عليكم زائرنا الكريم،،،
تشرفنا بزيارتك لنا ونتمنى انضمامكم واذا غادرت المنتدى، تأكد اننا سفتقدك كثيراً
مدير المنتدى
المدرب المحترف

انضم إلى المنتدى ، فالأمر سريع وسهل

المدرب المحترف

السلام عليكم زائرنا الكريم،،،
تشرفنا بزيارتك لنا ونتمنى انضمامكم واذا غادرت المنتدى، تأكد اننا سفتقدك كثيراً
مدير المنتدى
المدرب المحترف

المدرب المحترف

هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.

تدريب وتطوير، كمبيوتر، لغات برمجة، دورات صيانة، ميكروسوفت اوفيس، icdl، فوتوشوب، ديزاين، تصميم، لوجو، تعليم، دورات اونلاين، دورات فيديو

تنبيه: المنتدى في مرحلة الاعداد والتطوير وننتظر مشاركة الزوار والاصدقاء بالمواضيع المفيدة من جميع انحاء الدول العربية
يمكن للاعضاء فقط نشر اعلاناتكم مجاناً بدون اي رسوم، مراسلة الادارة وكتابة نص الاعلان
ارسل نص الاعلان مع اضافة بيانات التواصل الخاص بك، على ايميل مدير المنتدى او ارسلها كرساله شخصية للمدير معنونة ب" اعلان" وبعد مراجعتها يتم النشر فورا

المواضيع الأخيرة

» الدرس التاسع: الصور
الدرس الرابع: إنشاء موقعك Emptyالأحد أكتوبر 16, 2011 2:52 pm من طرف Admin

» الدرس الثامن: الروابط
الدرس الرابع: إنشاء موقعك Emptyالأحد أكتوبر 16, 2011 2:30 pm من طرف Admin

» الدرس السابع: الخصائص
الدرس الرابع: إنشاء موقعك Emptyالأحد أكتوبر 16, 2011 2:28 pm من طرف Admin

» الدرس السادس: المزيد من العناصر
الدرس الرابع: إنشاء موقعك Emptyالأحد أكتوبر 16, 2011 2:25 pm من طرف Admin

» الدرس الخامس: جرب بنفسك
الدرس الرابع: إنشاء موقعك Emptyالسبت أكتوبر 15, 2011 10:03 pm من طرف Admin

» الدرس الرابع: إنشاء موقعك
الدرس الرابع: إنشاء موقعك Emptyالسبت أكتوبر 15, 2011 9:31 pm من طرف Admin

» مجموعة من سكريبتات للمواقع والمدونات والمنتديات
الدرس الرابع: إنشاء موقعك Emptyالسبت أكتوبر 15, 2011 6:24 pm من طرف Admin

» الدرس الثالث: العناصر والوسوم
الدرس الرابع: إنشاء موقعك Emptyالسبت أكتوبر 15, 2011 6:15 pm من طرف Admin

» ما هى HTML؟
الدرس الرابع: إنشاء موقعك Emptyالسبت أكتوبر 15, 2011 6:10 pm من طرف Admin


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

    تصويت

    هل اعجبك الدرس؟

    [ 0 ]
    الدرس الرابع: إنشاء موقعك Bar_right0%الدرس الرابع: إنشاء موقعك Bar_left [0%] 
    [ 0 ]
    الدرس الرابع: إنشاء موقعك Bar_right0%الدرس الرابع: إنشاء موقعك Bar_left [0%] 
    [ 0 ]
    الدرس الرابع: إنشاء موقعك Bar_right0%الدرس الرابع: إنشاء موقعك Bar_left [0%] 

    مجموع عدد الأصوات: 0
    avatar
    Admin
    Admin


    عدد المساهمات : 18
    تاريخ التسجيل : 22/04/2010

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

    مُساهمة من طرف Admin السبت أكتوبر 15, 2011 9:31 pm

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

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

    حاول وجرب .....

    ماذا أفعل؟

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

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

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

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

    <html>

    <head>
    <title>هذا هو موقعي</title>
    </head>

    <body>
    <p>اهلا وسهلا بكم في موقعي</p>
    </body>

    </html>

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

    كل ما عليك فعله الآن هو حفظ الصفحة في مجلد وليكن مثلاً my site ثم عليك أن تستعرضها في متصفحك:

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

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

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

    الآن يجب أن تحوي الصفحة جملة "اهلا وسهلا بكم في موقعي" تهانينا!

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


      الوقت/التاريخ الآن هو الجمعة مارس 29, 2024 2:34 pm