°¨™¤I منتدى هندسه كفرالشيخ I¤™¨°

السلام عليكم ورحمة الله
اخى الزائر الكريم
أسعدنا تشريفك للمنتدى
ونأمل فى الاستفادة منك وتقديم الفائددة لك
فلا تحرمنا وإياك من الفائدة
لكى تتمكن من المشاركه معنا
تفضل بالتسجيل فى المنتدى
إدارة المنتدى

•^v^–[ مهندسون تحت الانشاء ]–^v^•


    كل ما تحب ان تعرفه عن لغه html مع الشرح

    شاطر
    avatar
    Ahmed Abd El Salam
    مهندس مميز جدا
    مهندس مميز جدا

    ذكر
    عدد الرسائل : 765
    العمر : 26
    المهنه :
    المزاج :
    تاريخ التسجيل : 28/02/2008

    عاجل كل ما تحب ان تعرفه عن لغه html مع الشرح

    مُساهمة من طرف Ahmed Abd El Salam في 15/08/08, 01:28 pm


    ما هي لغة الهتمل



    - لغة الهتمل هي اللغة الأساسية المستخدمة في تصميم المواقع وهي من أسهل لغات البرمجة
    - الهتمل أو html ترمز إلى hypertext markup language



    متطلبات اللغة


    لتصميم صفحة ويب لن تحتاج سوى برنامجين:
    برنامج للكتابة : مثل برنامج الدفتر أو الnotepad وسوف نستخدمه لكتابة الأوامر فيه.
    أيضا نحتاج لبرنامج تصفح مثلinternet explorer وسوف نستخدمه لمعاينة شغلنا على الموقع.

    وهذان البرنامجان متوافران في أي جهاز حيث أنهما من ملحقات الويندوز.

    لفتح برنامج الدفتر إتبع الآتي:
    start >> programs >> accessories >> notepad

    لفتح برنامج internet explorer:
    start >> programs >> internet explorer.


    الوسوم الأساسية



    هناك أربعة وسوم رئيسة ستجدها تقريبا في كل صفحة وهي:











    وسم البدايةوسم النهايةوظيفة الأمر
    يستخدم هذا الأمر في كل صفحة كوسيلة للتعريف باللغة
    هذا الأمر يختص بإحداث تغييرات في شريط العنوان
    والأمر title ذو الوسمين يوضع بين وسمي البداية والنهاية للأمر head كالآتي :







    تطبيق :
    نريد عمل صفحة يكون عنوان رأس الصفحة بإسم " صفحتي الأولى " .
    لعمل ذلك نتبع الخطوات الآتية:
    1- إفتح المجلد الذي خصصته من قبل كمجلد لموقعك.
    2- من المجلد أفتح صفحة الأنترنت التي سميتها من قبل بالإسم "index".
    إن لم تكن قد قمت بإنشاء المجلد أو الملف فراجع
    هذا الدرس.
    3- بعد فتح الصفحة قم بفتح مصدر الصفحة التي سيتم كتابة الأوامر بها عن طريق إتباع الآتي :
    view >> source .
    4- بعد ذلك سوف تفتح لك برنامج الدفتر الذي ستجد فيه بالطبع مكان للكتابة .. قم بكتابة الأوامر الآتية:













    5- ستكون النتيجة كما في الصورة..






    عمل خلفية للصفحة




    نظريا :
    هناك نوعان من الخلفيات :
    خلفية لون .. وخلفية صورة .

    1- بالنسبة للخلفية اللون نستخدم الأمر ..



    bgcolor ="اسم أو رمز اللون"
    قبل الإستمرار يجب أن تعرف المزيد عن الألوان من هذا الدرس .
    وهذا الأمر يكون موقعه داخل ( واشدد على كلمة داخل ) وسم البداية للأمر body كالتالي :






    background ="إمتدادها . اسم الصورة"
    وهذا الأمر هو الآخر يوضع داخل وسم البداية للأمر body كالآتي :




    ملحوظات :
    1- يجب أن تكون الصورة المراد جعلها خلفية موجودة في مجلد الموقع الذي خصصته من قبل .
    2- لاحظ أن الصورة التي ستجعلها خلفية سوف تتراص في الصفحة بجانب بعضها البعض .. لذلك ينصح باستخدام صور صغيرة لأنها ستفيدنا في هذه النقطة كما سيتبين من المثال فيما بعد.

    تطبيق 1 :
    نريد عمل خلفية للصفحة
    (التي وضعنا عنوانه من قبل) لونها أخضر.

    بعد فتح محرر الكتابة الخاص بالصفحة .. اكتب الأوامر الآتية :













    ويمكن أيضا استخدام الأوامر التالية:













    في كلا الحاتين ستكون النتيجة كما في الصورة..





    تطبيق 2 :
    نريد وضع الصورة التالية كخلفية للصفحة..




    1- لعمل ذلك قم بنسخ هذه الصورة أولا وضعها في المجلد المخصص لموقعك وذلك عن طريق الضغط على الصورة بالزر الأيمن لتظهر لك قائمة اختر منها save picture as ثم حدد مكانها في مجلدك .
    ستجد أن اسم الصورة هو egypt وامتدادها هو gif .. (يمكن معرفة الامتداد من خصائص الصورة properities).

    2- بعد ذلك قم بكتابة الأوامر التالية في محرر الكتابة الخاص بالصفحة..













    لتكون النتيجة بالشكل الآتي :








    كتابة نص وتنسيقه




    نظريا :
    ببساطة شديدة لكتابة أي نص عربي أو إنجليزي يتم كتابة ما نريد بين وسمي البداية والنهاية للأمر body كما يلي :





    النص

    تطبيق1 :
    نريد كتابة الجملة الآتية.. " Web designing is very easy "
    لعمل ذلك ببساطة اكتب العبارة بين قوسي البداية والنهاية للأمر body كم يلي :











    Web designing is very easy


    لتكون النتيجة كما في الصورة



    تطبيق2 :
    نريد كتابة الجملة الآتية.. " لا إله إلا أنت سبحانك إني كنت من الظالمين "
    لعمل ذلك ببساطة اكتب العبارة بين قوسي البداية والنهاية للأمر body كم يلي :











    لا إله إلا أنت سبحانك إني كنت من الظالمين



    لكن هناك مشكلة وهي أن النص المكتوب قد يحتاج بعض التنسيقات وخاصة النص العربي الذي ستجد محاذاته دائما نحو اليسار.
    ــــــــــــــــــــــــــــــــــــــــــــــــــــــ

    تنسيق النص


    تنسيق النص يشمل الآتي:
    - محاذاة النص
    - لون النص
    - حجم النص
    - نوع الخط
    - تأثيرات إضافية

    محاذاة النص

    المحاذاة الإفتراضية لأي نص - عربي أو لاتيني - هي نحو اليسار دائما.. بمعنى أنك إذا كتبت أي نص فإنك ستجده موجودا على يسار الصفحة ..ليس هذا فقط ولكنك أيضا سوف تلاحظ أن إتجاه الكتابة يكون من اليسار لليمين وليس العكس.
    حل هذه المشكلة غاية في البساطة
    كل ما عليك فعله هو إستخدام الأمر p ذو وسمي البداية والنهاية والذي من خلاله يمكنك تعديل محاذاة النص alignment وكذلك اتجاه الكتابة direction .

    مثلا : لو أردنا كتابة جملة باللغة العربية وتعديل اتجاه الكتابة ليكون من اليمين لليسار وكذلك تعديل المحاذاة لتكون على اليمين فسوف نستخدم الكود التالي:






    العربي النص


    التفسير
    تفسير الكود السابق في الجدول الآتي :













    الرمزالتفسير
    pهو أمر يختص بتعديل محاذاة واتجاه النص . والحرف p هو اختصار لكلمة page وهذا الأمر له وسمي بداية ونهاية
    dirهو اختصار لكلمة direction والتي تعني اتجاه . هذا الأمر وظيفته هي التحكم في اتجاه الكتابة من اليمين لليسار والعكس ويأخذ القيمتين "rtl" للكتابة من اليمين لليسار , والقيمة "ltr" للكتابة من اليسار لليمين .
    rtlوهي اختصار للعبارة right to left
    ltrوهي اختصار للعبارة left to right
    alignوهي اختصار لكلمة alignment والتي تعني محاذاة.. وهي تأخذ القيم right .. left .. center .



    تطبيق3 :
    نريد كتابة العبارة الآتية"إدراك العجز عن الإدراك .. إدراك " بحيث يكون اتجاه العبارة من اليمين لليسار ومحاذاة العبارة إلى اليمين .
    لعمل ذلك نكتب الكود التالي بين وسمي البداية والنهاية للأمر body :











    إدراك العجز عن الإدراك .. إدراك





    لتكون النتيجة كالآتي :





    تغيير اللون والحجم ونوع الخط

    لتغيير لون أو حجم أو نوع الخط , نستخدم الأمر font( والذي له وسمين للبداية والنهاية ) وذلك من خلال الأوامر:
    color .. للون
    size .. للحجم
    face .. لنوع الخط
    وهذه الأوامر الثلاثة تكون داخل وسم البداية للأمر font كما في المثال :





    النص

    تطبيق4 :
    نريد كتابة العبارة التالية "اللهم اجعلنا هادين مهتدين لا ضالين ولامضلين " .. بحيث يكون الخط أندلسي , واللون أحمر وحجمه 6 بيكسل .
    لعمل ذلك نستخدم الأكواد التالية











    اللهم اجعلنا هادين مهتدين لا ضالين ولامضلين






    لتكون النتيجة كالآتي:



    لمعرفة المزيد عن حجم الخط ونوعه راجع
    هذا الدرس
    لمعرفة المزيد عن الألوان راجع هذا الدرس

    تنسيقات أخرى

    هنالك بعض التنسيقات الأخرى مثل:
    1- الإنتقال إلى سطر جديد.
    في برامج تحرير النصوص العادية ( مثل وورد وبرنامج الدفتر ) لو أنك أردت كتابة عباراتين بحيث تكون كل عبارة في سطر مستقل فإن ما تقوم به هو كتابة العبارة الأولى ثم تضغط الزر enter من لوحة المفاتيح لتكتب العبارة الثانية في السطر التالي .
    أما في لغة هتمل فإنك إذا أردت فعل ذلك فإنك لن تستخدم الزر enter فذلك لن يؤثر ولن تستطيع كتابة الجملة الثانية في سطر مستقل .. لكن الحل هو استخدام الكود
    وهو وسم بداية ليس له وسم نهاية ..
    ونحن نستخدم الأمر
    في كل مرة نريد فيها الإنتقال لسطر جديد وإذا استخدمناالأمر مرتين متتاليتين

    فإنه ينتقل لسطر جديد تاركا سطر خالي بينهما
    أي أن استخدام الأمر
    يعتبر كبديل للضغط على الزر enter مرة واحدة


    تطبيق5 :
    نريد كتابة العبارتين التاليتين كل واحدة مستقلة في سطر خاص بها.
    العبارتين :
    سبحان الله وبحمده
    سبحان الله العظيم

    لو أنك قمت بكتابة العبارتين باستخدام الزر enter كما في المثال ..












    سبحان الله وبحمده
    سبحان الله العظيم






    ستكون النتيجة على غير المرغوب كما في الصورة ..



    أما لو استخدمنا الكود br كما في المثال ..












    سبحان الله وبحمده

    سبحان الله العظيم






    فستكون النتيجة كما في الصورة :





    .
    avatar
    Ahmed Abd El Salam
    مهندس مميز جدا
    مهندس مميز جدا

    ذكر
    عدد الرسائل : 765
    العمر : 26
    المهنه :
    المزاج :
    تاريخ التسجيل : 28/02/2008

    عاجل رد: كل ما تحب ان تعرفه عن لغه html مع الشرح

    مُساهمة من طرف Ahmed Abd El Salam في 15/08/08, 01:31 pm

    مزيد من تنسيقات النص



    1- لجعل الخط سميك (bold) :
    نضع الكلمة أو العبارة المراد جعلها سميكة بين وسمي البداية والنهاية للأمر b كما في المثال:












    الله

    أكبر






    فستكون النتيجة كما في الصورة :





    سوف تلاحظ أن كلمة الله أسمك من كلمة أكبر

    2- لجعل الخط مائل :
    نستخدم الأمر
    ووسم النهاية له
    مثال : نريد كتابة العبارة الآتية :
    اللهم انصر الإسلام وأعز المسلمين .. بحيث تكون كلمة الإسلام مائلة.
    لعمل ذلك نكتب الأكواد التالية :












    اللهم انصر
    [i]الإسلام
    وأعز المسلمين






    فستكون النتيجة كما في الصورة :





    3- لرسم خط تحت الكلمة :
    نستخدم الأمر
    ووسم النهاية له
    مثال : نريد كتابة العبارة الآتية :
    اللهم حرر المسجد الأقصى من اليهود المغتصبين.. بحيث تكون كلمة المسجد الأقصى تحتها خط.
    لعمل ذلك نكتب الأكواد التالية :












    اللهم حرر
    [u]المسجدالأقصى
    من يداليهود المغتصبين






    فستكون النتيجة كما في الصورة :







    4- لرسم خط وسط الكلمة :
    نستخدم الأمر
    ووسم النهاية له
    مثال : نريد كتابة العبارة الآتية :
    قاطعوا كوكاكولا فهي مصدر دخل يهودي.. بحيث تكون كلمة كوكاكولا وسطها خط (مشطوبة).
    لعمل ذلك نكتب الأكواد التالية :












    قاطعوا
    كوكاكولا
    فهي مصدر دخل يهودي






    فستكون النتيجة كما في الصورة :





    4- للكتابة بخط الآلة الكاتبة :
    ماهو خط الآلة الكاتبة؟؟
    لمعرفة أهمية الكتابة بخط الآلة الكاتبة لاحظ الفرق بين المثالين التاليين :
    مثال1:


    hhhhhhhhhh
    iiiiiiiiii
    مثال2:


    hhhhhhhhhh
    iiiiiiiiii
    أعتقد أن الفرق واضح , ففي المثال الأول كتبت الحروف باللغة العادية والتي فيها لكل حرف عرض معين وطول معين يختلف من حرف لآخر لذلك فالعرض الذي يشغله حرف الh أكبر من العرض الذي يشغله الحرف i .

    أما في المثال الثاني حيث كتبت بخط الآله الكاتبة التي توحد العرض الذي يشغله جميع الحروف أي أن جميع الحروف تشغل نفس العرض فالحرف h يشغل نفس العرض الذي يشغله الحرف i .

    للكتابة بخط الآلة الكاتبة نستخدم الأمر tt ذو وسمي البداية والنهاية .
    مثال :
    اكتب العبارة التالية بخط الآلة الكاتبة :
    ONE APPLE A DAY , KEEPS DOCTORS AWAY
    لعمل ذلك نكتب الكود التالي:












    ONE APPLE A DAY , KEEPS DOCTORS AWAY






    لتكون النتيجة :



    ONE APPLE A DAY , KEEPS DOCTORS AWAY




    الجداول




    ما أهمية الجدول في تصميم المواقع؟
    في الحقيقة الجداول لها أهمية كبرى في تنظيم الموقع ( هذا بجانب إمكانية استخدامها ككائن في الصفحة ) فمعظم المواقع التي تراها يتم استخدام الجداول فيها ( حتى وان لم تستطع أنت ملاحظة ذلك ) .

    مم يتكون الجدول؟؟
    الجدول عبارة عن مجموعة من الخلايا .. إذا رتبت هذه الخلايا في إتجاه أفقي كونت مايسمى بالصف ( row ) .. وإذا رتبت في أتجاه رأسي كونت ما يسمى بالعمود ( column )





    كيف يمكن إنشاء جدول؟
    يمكنك ذلك عن طريق الأمر table ذي وسمي البداية والنهاية.
    الأساس هنا هو الصف .. بمعنى أنه يتم تحديد عدد الصفوف أولا ثم تحديد عدد خلايا كل صف ومن ذلك ينتج لنا عدد الأعمدة .. مثلا جدول به خمسة صفوف في كل صف ستة خلايا فكم عمود لدينا؟؟ ( ليست فزورة ) الإجابة أن لدينا ستة صفوف .
    الأمر كذلك في لغة الهتمل
    أولا تحدد الصف باستخدام الأمر tr بوسمي البداية والنهاية له , ثم تحدد عدد الخلايا في كل صف بواسطة الأمر td بوسمي البداية والنهاية حيث يتم كتابتهما بين وسمي البداية والنهاية للأمر tr . وبذلك نكون قد حددنا أيضا عدد الأعمدة ( وهو يساوي عدد الخلايا في كل صف )
    سوف تتضح الرؤية أكثر من خلال الأمثلة

    مثال 1:
    نريد عمل جدول به صف واحد وعمودان
    لعمل ذلك نتبع الخطوات الآتية :
    نحدد صف واحد باستخدام الأمر tr
    نحدد عمودان باستخدام الأمر td مكرر مرتين وموضوع بين وسمي البداية والتهاية للأمر tr .











    خلية 1 خلية 2



    لو طبقت المثال السابق سوف يظهر لك الشكل التالي :




    ستتساءل .. أين هو الجدول!؟
    أنت أنشأت جدولا بالفعل لكنك لم تحدد سمك الحدود التي تريدها للجدول فوضعها الجهاز بقيمة افتراضية صفر أي أنه بدون حدود .
    لتحديد حدود الجدول نستخدم الكود border=1 والتي يتم وضعها داخل وسم البداية للأمر table كما يلي :











    خلية 1 خلية 2



    ستكون النتيجة بالشكل التالي :




    لكن بالطبع الجدول مازال يحتاج بعض التعديلات






    أنت الآن قمت بعمل جدول وحددت حدوده لكنك تريد إجراء بعض التغييرات عليه ليناسب حاجتك.
    قمت بتلخيص أوامر التعدبلات في هذا الجدول ولاحظ أن
    جميع هذه الأكواد توضع بين وسمي البداية والنهاية للأمر table .
















    التعديلالكود المستخدم
    عمل حدود للجدول
    border = 1
    محاذاة الجدول
    align = "center"
    تحديد ارتفاع الجدول
    height = الرقم
    تحديد عرض الجدول
    width = الرقم
    ترك مسافة بين الخلايا وبعضها
    cellspacing = قيمة من 1 إلى 7
    ترك مسافة بين حدود الخلية ومحتوياتها
    cellpadding = قيمة من 1 إلى 7


    avatar
    Ahmed Abd El Salam
    مهندس مميز جدا
    مهندس مميز جدا

    ذكر
    عدد الرسائل : 765
    العمر : 26
    المهنه :
    المزاج :
    تاريخ التسجيل : 28/02/2008

    عاجل رد: كل ما تحب ان تعرفه عن لغه html مع الشرح

    مُساهمة من طرف Ahmed Abd El Salam في 15/08/08, 01:38 pm



    عمل وصلة تشعبية(ربط الصفحات)



    الوصلة التشعبية :
    س:ما هي الوصلة التشعبية ؟
    عندما دخلت إلى الصفحة الرئيسية لموقعنا وجدت قائمة الدروس , وعند ضغطك على أحد هذه الدروس فإنك تنتقل إلى صفحة الدرس ... هذه تسمى وصلة تشعبية .
    س: ما فائدة الوصلة التشعبية ؟
    فائدتها الربط بين صفحات موقعك , فمثلا في موقعي أنشأت الصفحة الرئيسية , وصفحة لكل درس , وعن طريق الوصلات التشعبية قمت بالربط بين الرئيسية و الدروس .
    س : كيف أعمل وصلة تشعبية ؟
    مثلا : نريد عمل وصلة في هذه الصفحة عند الضغط عليها تنقلنا إلى الصفحة الرئيسية لهذا الموقع .
    سوف نستخدم الوسم التالي :

    في مثالنا السابق سيكون شكل الأمر كاللآتي:

    لتكون النتيجة : ...... الصفحة الرئيسية
    طبعا يمكن استخدام الوصلات التشعبية لتربط بين مواقع بعضها البعض ... مثلا نريد عمل وصلة تشير إلي موقع طريق الإسلام ... سيكون الأمر كالأتي :

    لتكون النتيجة ....... موقع طريق الإسلام
    طبعا يمكنك أنت تجعل الوصلة تشير إلي أي ملف من أي نوع بشرط أن تحدد مكانه بدقة (سيبك من هذه النقطة)
    فتح الوصلة في إطار جديد :
    تلاحظ في الأمثلة السابقة أنك عند الضغط علي الوصلة تفتح الصفحة الجديدة مكان الصفحة الحالية , وأنك تضطر للرجوع للصفحة مرة أخرى .لو أردنا فتح الصفحة الجديدة في إطار جديد مع بقاء الصفحة الحالية مفتوحة فإننا نضيف العبارة
    target="_blank"

    لتكون النتيجة :................ موقع طريق الإسلام
    انتهى بحمد الله.
    avatar
    Ahmed Abd El Salam
    مهندس مميز جدا
    مهندس مميز جدا

    ذكر
    عدد الرسائل : 765
    العمر : 26
    المهنه :
    المزاج :
    تاريخ التسجيل : 28/02/2008

    عاجل رد: كل ما تحب ان تعرفه عن لغه html مع الشرح

    مُساهمة من طرف Ahmed Abd El Salam في 15/08/08, 01:45 pm



    إدراج صورة

    إدراج صورة :
    لإدراج صورة نستخدم الوسم التالي:

    وتلاحظ أن هذا الأمر ليس له وسم نهاية.
    بعد أن أدرجت الصورة يمكنك تنسيقها بتحديد طولها وعرضها وسمك حدودها و موضعها بالنسبة للنص عن طريق الآتي:

    height="x" width="x" border="y" align="z">
    في المثال السابق استبدل x بأي رقم أو نسبة مئوية لتحديد طول وعرض الصورة.
    استبدل y بأي رقم ويفضل من 1 --> 7 لتحديد سمك الصورة .
    استبدل z بواحدة من القيم الموجودة في الجدول الآتي:


















    القيمة
    معناها
    rightمحاذاة الصورة ليمين الصفحة أو الجدول
    centerمحاذاة الصورة لوسط الصفحة أو الجدول
    leftمحاذاة الصورة ليسار الصفحة أو الجدول
    محاذاة النص بالنسبة للصورة
    texttopمحاذاة النص أعلى الصورة النـص
    absmiddleمحاذاة النص وسط الصورة النـص
    absbottomمحاذاة النص أسفل الصورة النص
    avatar
    Ahmed Abd El Salam
    مهندس مميز جدا
    مهندس مميز جدا

    ذكر
    عدد الرسائل : 765
    العمر : 26
    المهنه :
    المزاج :
    تاريخ التسجيل : 28/02/2008

    عاجل رد: كل ما تحب ان تعرفه عن لغه html مع الشرح

    مُساهمة من طرف Ahmed Abd El Salam في 15/08/08, 01:47 pm



    إدراج فلاش

    إدراج فلاش :
    لإدراج فلاش نستخدم الوسم التالي:

    اسم الفلاش.swf">
    وكما لاحظت فإن هذا الأمر ليس له وسم نهاية.
    بعد أن أدرجت الفلاش يمكنك تنسيقه بتحديد طوله وعرضه وسمك حدوده عن طريق الآتي:

    <embed src="اسم الفلاش.swf" height="x" width="x" border="y">
    في المثال السابق استبدل x بأي رقم أو نسبة مئوية لتحديد طول وعرض الفلاش.
    استبدل y بأي رقم ويفضل من 1 --> 7 لتحديد سمك الحدود .
    avatar
    شاعر المنتدى
    مهندس مميز جدا
    مهندس مميز جدا

    ذكر
    عدد الرسائل : 1461
    العمر : 28
    الجنسية : مصرى
    المهنه :
    المزاج :
    تاريخ التسجيل : 17/02/2008

    عاجل رد: كل ما تحب ان تعرفه عن لغه html مع الشرح

    مُساهمة من طرف شاعر المنتدى في 17/10/08, 10:36 am

    مش فاهم حاجه

      الوقت/التاريخ الآن هو 25/09/17, 05:33 am