صفحة 1 من 2 1 2 الأخيرةالأخيرة
النتائج 1 إلى 15 من 19

الموضوع: لغة الترميز المتشعبة Hyper Text Markup Language HTML

  1. #1
    عضوية جديدة الصورة الرمزية اينشتاين
    تاريخ التسجيل
    Mar 2009
    المشاركات
    27
    معدل تقييم المستوى
    0

    Lightbulb شرح HTML و لغات الويب



    السلام عليكم و رحمة الله و بركاته


    ** مقدمة **

    إخوانى و أخواتى الكرام أحاول معكم شرح للغات الويب و أبدأها باللغة الأم إن - جاز اللفظ - لغة الترميز المتشعبة و المعروفة لنا بإسم لغة الهتمل HTML و هى مختصر للعبارة الإنجليزية Hyper Text Markup Language و هى لغة بسيطة صدر منها عدة إصدارات تميزت كل إصدارة عن سابقتها بإضافة بعض الإمكانيات و الخواص لتكون أفضل من سابقتها و سوف اسرد هذه الإصدارات و الإختلافات ان شاء الله خلال الشرح
    و لغة الهتمل عندما نحاول تشبيهها بشئ نعرفه فالأفضل أن نشبهها ببرنامج ميكروسوفت ورد مع وجود الإختلافات طبعا حيث ان الـ HTML نكتب بها صفحات انترنت

    {{{{{{هذا الموضوع يضاف إليه و ينقح بإستمرار للإضافة أو لإصلاح خطأ }}}}}}

    ملحوظة هامة جداً : لا تفتكر انى علشان أكتب الموضوع دا إنى محترف لأ انا مازلت أتعلم و سأظل أتعلم ما حييت و لأثبت لك ذلك أنه توجد أسئلة لا أعرف إجابة لها حتى الأن

    ** كيف أكتب هذه اللغة و ما هو متطلبات العمل مع هذه اللغة ؟

    أولا للعمل مع هذه اللغة لابد لنا من توافر المتطلبات التالية كحد أدنى : وجود برنامج لتصفح الإنترنت مثل برنامج Internet Explorer أو أى برنامج نستطيع من خلاله فتح صفحات إنترنت و هذا إن شاء الله موجود طالما أنك تقرأ هذا الموضوع من خلال هذا المنتدى
    برنامج لكتابة الكلام و النصوص و يسمى Notepad و هذا البرنامج نجده إن شاء الله عندما نضغط على مفتاح إبدأ start و الموجود فى أسفل يسار شاشة الكمبيوتر فتظهر لنا قائمة تسمى start menu فى هذه القائمة نجد الكلمة التالية All Programs فنقف عليها بمؤشر الماوس فتظهر لنا قائمة أخرى تحتوى على مجموعة من البرامج و المجلدات نجد من ضمن ما هو موجود مجلد إسمه Accessories و لما نقف بمؤشر الماوس عليه تظهر نافذة أخرى خاصة بالبرامج الملحقة ( يعنى البرامج اللى بتنزل مع تنصيب الويندوز ) نجد من ضمن الموجود البرنامج الذى نريده و هو Notepad
    إذن متطلبات العمل مرة أخرى برنامجين :
    * Internet Explorer * Notepad
    أوكى البرامج موجودة ماذا بعد ذلك ( طرق الكتابة و إستخدام البرنامجين ) الطريقة الأولى للكتابة و هى الطريقة القياسية و ذلك من خلال فتح برنامج Notepad و كتابة اللغة داخلة كما سنعرفها لاحقا ثم الضغط على الكلمة Fileالموجوده فى أى يسار الصفحة ( فى الـ Menu bar ) فتظهر قائمة نجد داخلها كلمة ... Save As فنضغط عليها فيظهر مربع يسأل عن المكان الذى سنقوم بحفظ الملف به و أيضاً يسأل عن إسم لهذا الملف فنختار مثلا مكان الحفظ يكون على سطح المكتب Desktop
    و يتبقى لنا أن نكتب إسم الملف و نلاحظ أن هذا البرنامج ينشئ الملفات من نوع txt لذلك فعند حفظ الملف لابد لنا من كتابة إمتداد لهذا الملف يتوافق مع اللغة التى نكتبها لذا نحفظ الملف بالإسم الذى نريده مع وضع إمتداد للملف html مثال على ذلك : ننشئ ملف بنفس الخطوات السابقة و نجعله فارغ ( يعنى مش نكتب فيه حاجه ) و نحفظة بالإسم التالى
    Allah.html أو Allah.htm
    مع استبدال لفظ الجلالة فقط بالإسم الذى نريده و نحفظ على سطح المكتب
    كيف نتأكد من أن الملف تم حفظه بشكل سليم ؟
    نذهب إلى سطح المكتب فنجد الملف الذى أنشأناه فنضغط عليه بالماوس 2 كليك double click فنجد أن الملف فتح صفحة بيضاء و فتح من خلال البرنامج الخاص بتصفح الإنترنت يعنى ظهر لى صفحة انترنت فارغة
    انا أنشأت ملف و فتح بشكل سليم و أريد الكتابة داخله كيف ذلك ؟؟
    يتم ذلك من خلال فتح برنامج النوت باد Notepad ثم الضغط على القائمة File ( الموجودة فى أعلى يسار الصفحة ) و منها أضغط على كلمة open فيظهر مربع أذهب إلى المكان الذى حفظت فيه الملف و فى مثالنا أفتح سطح المكتب Desktop و لكن لا أرى الملف الخاص بى !!!!!
    لكى أستطيع رؤية كل الملفات ما علىّ إلا أن أضغط على المستطيل الأبيض الموجود فى أسفل المربع و المكتوب داخلة
    (Text Documets (*.txt التهجئة انا كتبتها خطأ لأنى لو كتبتها صح فإنها لا تظهر فى الموضوع و نختار منه كلمة All Files بعد الإختيار سنلاحظ أننا نرى كل الملفات الموجوده على سطح المكتب صح !!
    فنختار الملف الخاص بنا و الذى سبق حفظه بالضغط عليه 2 كليك فيظهر محتويات الملف بعد ذلك نعدل ما نريده ثم نضغط على File ثم Save لحفظ التعديلات أو التغيرات التى أحدثناها و هكذا نفعل كل مرة نريد التعديل و الحفظ
    الطريقة الثانية ( الطريقة العملية ) أذهب للمكان الذى أريد إنشاء الملف الخاص بى داخلة و لنفرض مرة اخرى أننى اريد إنشاء الملف على سطح المكتب فأذهب للمكان و أضغط كليك يمين بالماوس فى مكان فارغ فتظهر قائمة صغيرة إسمها (Shortcut Menu) يظهر بها أهم الأوامر التى أستطيع تنفيذها على المكان الذى ضغطت بداخله و ما نريده نحن أن يكون فى وسط هذه الأوامر كلمة New فنقف بمؤشر الماوس على هذه الكلمة فتظهر قائمة فرعية بها الكلمة Text Documts التهجئة انا كتبتها خطأ لأنى لو كتبتها صح فإنها لا تظهر فى الموضوع أضغط عليها فبيتكون عندى ملف مكتوب تحته إسمه و نقطة و امتداده ( أقصد الإسم و نقطة و الحروف txt) أغير الإسم بالأسم الذى أريده و الإمتداد لابد و لازم أغيره إلى html أو htm ثم نضغط انتر أو كليك فى أى مكان فاضى فتظهر رسالة تخبرنا أن الإمتداد سيتم تغييره فنضغط على yes للموافقة و اننا نعلم أن الإمتداد سيتم تغييره فنرى الملف قد تغير شكله إلى شكل ملف انترنت و عند الضغط عليه 2 كليك فإنه سوف يفتح داخل متصفح الإنترنت
    هذا طبعا فى حالة ما إذا أردنا الرؤية للمحتويات داخل المتصفح أما لرؤية ما نكتبه داخل هذا الملف فنضغط على الملف كليك يمين ثم نختار الأمر open with و من القائمة الفرعية التى تظهر نختار منها برنامج Notepad فيفتح الملف داخل هذا البرنامج
    && الخلاصة اننا كونّا ملف بصيغة html لرؤية ما بداخله على صفحة انترنت نضغط عليه 2 كليك أما لرؤية ما هو مكتوب بداخلة مثل رؤية اللغة التى ندرسها فنفتح الملف بإستخدام النوت باد Notepad


    أوكى كده إحنا عرفنا ازاى نمهد للـ HTML يالا بقا نشمر إيدينا و نملأ حياتنا أكواد


    ++ ملحوظة هامة : لما نقول هنكتب الكود المقصود اننا سوف نفتح الملف بإستخدام برنامج النص Notepad أما لما نقول نشوف نتيجة الكود اللى كتبناه المقصود اننا سوف نفتح الملف بإستخدام برنامج متصفح الإنترنت Internet Explorer

    --- المصطلحات وسم Tag : هو طريقة لكتابة الأكواد أو الأوامر التى نريد تنفيذها بأن نضع هذا الأمر داخل (بين) علامتين هما < >
    ازاى يعنى نكتبه ازاى ؟؟
    نكتبه بالشكل التالى مع استبدال كلمة الكود اللى مكتوبة بالعربى بالكود الفعلى اللى عاوزين نكتبه :
    كود PHP:
    <الكود
    ((((( لا يصلح للتنفيذ هذا الكود فقط للتوضيح )))))
    لكى نكتب وسم يحمل أمر معين لتنفيذه لابد لنا من أن نقول إبدأ تنفيذ هذا الأمر إبتداءً من هذه النقطة أو من هذا المكان و عند وصولك إلى النقطة الثانية أو المكان الثانى أوقف التنفيذ

    يعنى إيه أنا مش فاهم !!!

    يعنى انا مثلا فى كتابة هذا الموضوع ماذا فعلت ؟ استخدمت ألوان متعددة للكتابة صح ؟ ماذا فعلت أتيت على مجموعة كلمات و أعطيتهم أمر أن يظهروا باللون الأحمر مثلا صح ؟؟ لماذا لم يأخذ كل الكلام نفس اللون ؟؟؟؟؟؟؟؟
    لأننى حددت له تنفذ عملية التلوين من الكلمة الأولى حتى الكلمة الأخيرة داخل هذا التحديد أما أى كلمات موجودة خارج هذا التحديد فلا تلونها أظن ان الكلام كده مفهوم !!
    هذا بالضبط ما يقوم به الوسم أعطى أمر داخل الوسم و أضع هذا الوسم قبل الأشياء التى أريد تنفيذ الأمر عليها (زى الكلمة الأولى ) ثم أعطى أمر أخر ينهى عمل هذا الأمر عند الموضع الثانى ( زى الكلمة الأخيرة) وسم بداية الأمر يسمى وسم البداية ووسم نهاية الأمر يسمى وسم النهاية ما بين وسمين البداية و النهاية يوجد الأشياء التى سيتم تنفيذ الأمر عليها

    كيف إذن نكتب وسم البداية و وسم النهاية لأمر معين أو الأصح لكود معين ؟؟

    يكتب التالى :
    كود PHP:
    <كود البداية>
    هنا توضع الأشياء التى سينفذ عليها الأمر      الكود 
    </كود النهاية
    ((((( لا يصلح للتنفيذ هذا الكود فقط للتوضيح )))))
    لكى نكتب فى صفحة أو فى ورقة عندنا من المنطقى أن هذه الصفحة لها بداية نراها و أيضاً لها نهاية نراها لكى يعرف متصفح الأنترنت بداية و نهاية الصفحة التى نكتبها نقول له ذلك بوسم بداية و نهاية الصفحة كما يلى طبعا للكتابة نكتب فى الملف ببرنامج النوت باد و للعرض نفتح الملف بمتصفح الأنترنت أوعى تنسى

    كود PHP:
    <html>
    </
    html
    ((((( يصلح للتنفيذ )))))
    طبعا عند تنفيذ الكود دا و رؤية النتيجة نجد ان الصفحة فارغة و دا طبعا لأننا لسه مقولناش حاجه غير اننا مجرد وضحنا بداية الصفحة فين و نهايتها فين

    أى صفحة أنترنت تنقسم إلى جزئين : الجزء الأول و هو رأس الصفحة HEAD
    الجزء الثانى و هو جسم الصفحة BODY
    يتم تعريف كل من رأس الصفحة و جسم الصفحة من خلال وسم يوضح ذلك يوضع بين وسمين البداية و النهاية للصفحة كما يلى :
    كود PHP:
    <html>
     
    <
    head>
     
    <!-- 
    هنا تكتب الأكواد التى نريد وضعها فى هذا المكان -->
     
    </
    head>
     
    <
    body>
     
    <!-- 
    هنا تكتب الأكواد التى نريد وضعها فى هذا المكان -->
     
    </
    body>
     
    </
    html
    اوكى عندى سؤالين :
    أولا ما هى وظيفة الـ HEAD و وظيفة الـ BODY اللى اتكتب دا
    ثانيا ما هى العلامة التى وضعت فى الكود و هى <-- --!> ( الكود دا كود التعليق يعنى الكلام اللى نكتبه و ميظهرش فى الصفحة خالص لكن يظهر فقط لمصمم الصفحات و مستعرض أكواد الصفحة سندرسه بالتفصيل تباعا )

    - الرأس HEAD هو مكان بالصفحة يحتوى على أكواد تحتوى على عنوان للصفحة و معلومات إضافية عن اللغة التى نكتب بها الصفحة و معلومات عن كاتب أو ناشر تلك الصفحة و معلومات أخرى كثيرة مثل الأنماط styles و الأسكريبتات scripts و كمان الأسكريبتات أشكال و انواع أشهرهم اسكريبتات خاصة بلغة الجافا اسكريبت JavaScriptو لغة البى اتش بى PHP و غيرها من الوسومات التى سنعرفها بالتفصيل بعد ذلك و المعروف عن الأكواد الموضوعة فى الرأس أنها غالبا لا تظهر فى الصفحة
    - الجسم BODY هو المكان الأشهر بالصفحة يوضع بداخلة باقى الأكواد المعروفة تقريبا لنكون بهذه الأكواد جسم الصفحة

    بعد أن تعرفنا على ما سبق الأن نبدأ العمل الحقيقى

    +++++ كتابة صفحة فارغة تحتوى على العناصر أو الوسومات الرئيسية :

    كود PHP:
    <html>
    <
    head>
    <
    title></title>
    </
    head>
    <
    body>
    </
    body>
    </
    html
    تمام أوى كده بس انا عرفت ان الهتمل دا أكتر من إصدار و انت قولت انك هتشرح الأصدارات دى لكن انا معرفش انا شغال على الإصداره ايه بالظبط و عاوز أعرف ؟؟

    ***اصدارات HTML
    HTML 1.0 : نشرت فى 15 يونيو 1993 م ( اصدارة غير قياسية )
    الخلفية رمادية لا تتغير - الخط أسود من نوع Times Roman - الأرتباط التشعبى لصفحات لم يتم زيارتها تكون باللون الأزرق أما الصفحات التى تمت زيارتها تكون باللون الأحمر - تدعم أنواع الصور Jpeg , GIF فقط
    HTML 2.0 : ظهرت فى 22 سبتمبر 1995 و انتشرت فى نوفمبر من نفس العام
    دعمت خواص جديده مثل امكانية تغيير لون خلفية الصفحة - انشاء نماذج محدودة الحقول - عمل جداول - الزائرين يستطيعون تقديم المعلومات - اضافة الخاصية Map
    HTML 3.2 : ظهرت فى 13 أغسطس 1996 م و بدأ التعامل مع css level 1
    HTML 4.01 : ظهرت فى 24 ديسمبر 1999 و ظهر معها الأنواع css 1.0 , css2.0 , xml 1.0
    بعد ذلك توقف التطوير لهذه اللغة و بدأظهور عائلة جديدة تسمى XHTML سنعرفها لاحقا

    نحن نعمل على أخر إصدارين و هما HTML 3.2 , HTML 4.01

    كيف أعرف و أتأكد أننى قد كتبت الكود صح و بإسلوب علمى 100%
    الإجابة : نعرف ذلك من خلال الموقع الرسمى و هو

    http://validator.w3.org

    ندخل على الرابط السابق و عندما تفتح الصفحة نضغط على الإختيار Validate by Direct Input
    أى اختبار الأكواد عن طريق كتابتها فى المربع اللى هيظهر و بعد كتابة الكود نضغط على check إذا ظهر لنا congratulation يبقى احنا كتبنا الكود صح و لو ظهر erorr يبقى احنا كتبنا الكود غلط و هيظهر فى الصفحة من تحت التصحيح اللى الموقع شايفه مناسب بعد اما أعلّم علامة صح على المربع Clean up Markup with HTML Tidy

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

    أهم ملحوظة على الإطلاق : اذا استفدت بإذن الله من الشرح يبقا أصبح دين عليك انك تقوم بالشكر و انا الشكر اللى بعترف بيه و اللى هيكون امانه عليك هوه انك تدعيلى و تقول ربنا يرضى عنك و يزيدك فى التعلم
    الإجابة على السؤال :
    كود PHP:
    Line 1Column 1no document type declarationimplying "<!DOCTYPE HTML SYSTEM>" 
    <html
    و دا طبعا المقصود بية إنى معرفتش نوع الهتمل اللى انا بستخدمه ( ما احنا قولنا ان فيه اصدارات صح؟ )
    و صحح لى الأكواد بتاعتى علشان تكون بالشكل دا
    كود PHP:
        <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
    <
    html>
    <
    head>
    <
    meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org">
    <
    title></title>
    </
    head>
    <
    body>
    </
    body>
    </
    html
    و انا هتجاهل السطر اللى بيقول
    كود PHP:
    <meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org"
    و طبعا انا هتجاهل السطر دا علشان هنشرحه بعد كده
    و دلوقتى الكود بتاعى الجديد هيكون بالشكل دا
    كود PHP:
        <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
    <
    html>
    <
    head>
    <
    title></title>
    </
    head>
    <
    body>
    </
    body>
    </
    html
    نجرب بقا الكود دا تانى فى الموقع بتاعنا و نشوف هل فيه أخطاء تانية و لا لأ ؟؟
    الأجابة :
    This document was successfully checked as -//W3C//DTD HTML 3.2//EN!

    و كمان كلمة
    Congratulations

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

    الأن نريد أن نعرف ما معنى السطر الجديد و المضاف إلى الكود الخاص بنا و هو :
    كود PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN"
    هذا السطر وظيفته إخبار المتصفح الخاص بنا بأننا نستخدم نوع الملف Document Type أو الصفحة التى ننشأها أنها ستكون من عائلة HTML يعنى سيكتب فيها أكواد هتمل عموما و هذا تفسير بسيط للجزء DOCTYPE html PUBLIC
    أما للتخصيص أكثر فى التعريف فإننا نقول فى الجزء الثانى من السطر بإستخدام المعايير القياسية لـ w3c و هى المنظمة المعترف بها عالميا فى تقييم و تطوير هذه اللغة سوف نستخدم من خلال هذه المعايير إسلوب إعلان نوع الصفحة DTD أى document type declaration يعنى بالبلدى بنعرف المتصفح احنا هنستخدم النوع اللى اسمه ايه من أنواع الهتمل و بعد الحروف dtd نخبر المتصفح بأن رقم الإصدارة لأكواد الـ HTML هى 3.2 الإنجليزية
    اللى مش فاهم الشويه دول مش مشكله كل اللى عاوزه انك تعرف ان السطر الأول وظيفته إعلان نوع الصفحة و كل الأنواع المتاحة حتى اليوم سوف تجدها فى الموقع التالى :

    http://devfiles.myopera.com/articles/570/doctype-ci-url.htm



    ***** الدرس الثانى *****

    تعرفنا على البناء الصحيح و السليم لأكواد صفحة HTML و سنستعد الأن للتعرف على الوسومات الأخرى
    قلنا أن الوسم يمثل أمر موضوع بين علامتين <> و أنه يوجد بداية و نهاية لتنفيذ هذا الأمر أى بداية للوسم و نهاية للوسم و لم يتبقى غير أن نتعرف على جزئية جديدة فى الوسم و هى ما نسميه السمات لكل وسم ATTRIBUTES نأخذ مثال على ما هو السمة ؟
    ما الفرق بين الله الله الله الله الله الله الله
    أليست كلها بمعنى واحد ؟؟
    إذن ما هو الإختلاف بين كل كلمة ؟
    الإختلاف هو فى تنسيق الكلمة مرة كبيرة و مرة صغيرة و مرة ملونه و مرة تحتها خط هذا الإختلاف تقرب لنا عملية فهم ما هو الوسم و ما هى السمة الوسم يكون مسؤول عن كتابة الكلمة بالإفتراضات الطبيعية لها يعنى كده كده الكلمة هتتكتب أما السمة فنكتبها لو حبينا تعدّل القيم الإفتراضية للأمر (أو للكلمة )بوضع القيم التى نريدها لتظهر فى النهاية بالمظهر الذى نريده
    السمة تكتب مع إسم الأمر داخل الوسم و يكون بينهما مسافة واحدة خالية ( مسافه واحدة بالمسطرة من لوحة المفاتيح )

    نقطة فاصلة : لو لم تفهم ما سبق لا تقرأ ما سيأتى إلا بعد المراجعة و التأكيد على السابق لتعلقة الشديد بما سنقوله و أى استفسارات انا فى الخدمة ( لوجه الله تعالى)




    الوسم : <title>
    هو وسم يختص بكتابة عنوان الصفحة و الذى يظهر فى منطقة الـ Title Bar أى الشريط الأزرق الموجود فى أعلى الصفحة الخاصة بالمتصفح

    و يكتب هذا الوسم داخل المنطقة HEAD بالشكل التالى
    كود PHP:
        <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
    <
    html>
    <
    head>
     
    <
    title></title>
     
    </
    head>
    <
    body>
    </
    body>
    </
    html
    و نكتب العنوان الذى نريده أن يظهر كعنوان للصفحة داخل الوسم Title مثال على ذلك انا أريد عنوان الصفحة التى أنشئها يكون كلمة الله أكبر فنكتبها بالطريقة التالية
    كود PHP:
        <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
    <
    html>
    <
    head>
     
    <
    title>الله أكبر</title>
     
    </
    head>
    <
    body>
    </
    body>
    </
    html
    جرب كده بنفسك و شوف العنوان إتكتب فى الصفحة من فوق و لا لأ و طبعا قلب الصفحة نفسه لسه فارغ

    تطبيق على السمة Attribute
    الوسم <html> : تعرفنا سابقا إلى هذا الوسم و عرفنا أنه المسؤول عن الإخبار ببداية الصفحة و نهايتها

    الأن سنتعرف على جزئية جديدة عن هذا الوسم و هى السمات التى يمكن وضعها داخل هذا الوسم و هى
    السمة dir : و هى سمة اختصار للكلمة Direction أى الإتجاه




    و المقصود بذلك إتجاه الكتابة فى الصفحة و طبعا من البديهى أن الكتابة نوعين إما الكتابة من اليسار إلى اليمينLeft-To-Right أو العكس من اليمين إلى اليسارRight-To-Left حيث أنها تعتمد على إتجاه اللغة التى نكتب بها الكلام

    لذا فإن هذه الميزة لها قيمتين تتمثل فى (القيم توضع بين علامتى إقتباس أو تنصيص " " )

    rtl يعنى إتجاه الكتابة من اليمين إلى اليسار

    ltr يعنى إتجاه الكتابة من اليسار إلى اليمين









    طيب نكتب السمة دى ازاى داخل الوسم ؟

    يتم ذلك بوضعها بالطريقة التالية

    أردنا إتجاه الكتابة من اليمين إلى اليسار نكتب





    كود PHP:
    <html dir="rtl"

    أما إذا أردنا إتجاه الكتابة من اليسار إلى اليمين نكتب

    كود PHP:
    <html dir="ltr"
    و يكون الكود الكامل كالأتى

    كود PHP:
        <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
    <
    html dir="rtl">
    <
    head>
     
    <
    title>الله أكبر</title>
     
    </
    head>
    <
    body>
    </
    body>
    </
    html

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






    أعرف من خلال تغير مكان شريط التمرير scroll bar بدل ما كان فى مكانه على اليمين من الصفحة أصبح مكانه على اليسار

    نجرب كده مره نخلى الإتجاه يمين و مرة نخلى الإتجاه يسار و نشوف تغيير مكان شريط التمرير





    السمة : lang
    هى إختصار لكلمة Language أى اللغة التى ستستخدم لتحديد اللغة التى ستستخدم فى الصفحة و ترجع أهمية هذه السمة فى :
    - تساعد محركات البحث عند العثور على الصفحة
    - تساعد فى تحديد متغيرات الصور الرمزية من أجل طباعة عالية الجودة
    - تساعد فى إختيار إعداد علامات التنصيص
    - تساعد فى إسلوب علامة الواصلة و الربط و بالمسافات
    - تساعد الأوامر الخاصة بالتحقق من الأخطاء الإملائية و النحوية
    أمثلة
    كود PHP:
    <html lang="en">
    <
    html lang="en-us">
    <
    html lang="ar">
    <
    html lang="ar-sa"
    و خلال الشرح إن شاء الله سنتعرف على المزيد من السمات
    ***** الدرس الثالث ***** ( بداية الدراسة الحقيقية )

    سيتم دراسة الوسومات من حيث الوظائف و مبدئيا بدون أنماط styles لمعرفة طريقة عمل الوسم بدون مؤثرات على أن يتم دراسة الأنماط بعد ذلك

    **** وسومات أساسية
    <DOCTYPE!> سبق شرحه و هو خاص بإعلان عن نوع الصفحة التى سيتم إنشاؤها
    <HTML> سبق شرحة و هو خاص بتحديد بداية و نهاية الصفحة
    <HEAD> سبق شرحة و هو الوسم المسؤل عن تحديد بداية و نهاية رأس الصفحة و يتم وضع بين وسميه أوسمة خاصة سيتم تناولها لاحقا
    <BODY> سبق شرحه و هو الوسم الذى سنكتب بين بدايته و نهايته الوسومات و الكلام الذى سيظهر فى الصفحة كما سنعرف لاحقا
    <TITLE> سبق شرحه و هو المسؤل عن ظهور عنوان للصفحة داخل شريط العنوان Title Bar

    غالبية الأوسمة التالية تكتب بين وسمى البداية و النهاية لجسم الصفحة BODY لذا من الأن و غالبا لن نكتب الكود كامل على أساس أنه تم معرفة البنية العامة للأكواد كما سبق توضيحه

    الوسم <P> : وسم تحديد الفقرات أو مقطع معين مثال أن نكتب
    كود PHP:
    <body>
    <
    p>الله أكبر</p>
    </
    body
    نجرب الكود دا كده بعد كتابة البنية و الكود كاملا و نشوف إيه التأثير ؟؟

    يااااااااه أخيرا بقا فيه كلام فى الصفحه هههههه
    يالا بسرعة نجرب السمة بتاعت إتجاه الكتابة اللى هيه إيه أنا نسيت هههه
    ها الكلام إتغير إتجاهه و لا لسه ؟

    ما الفرق بين أن أكتب الكلام بدون وسوم و الفرق بين أن أكتبه داخل الوسم <p> ??

    إذا حاولت أن أكتب Text1 ثم أكتب Text2 بحيث أن كل كلمة تكون فى سطر :

    بالطريقة الأولى و هى كتابة الكلام داخل جسم الصفحة فقط كالأتى

    كود PHP:
    <body>
    Text1
    Text2
    </body

    ألاحظ أن النتيجة ظهرت التالى :
    كود PHP:
    Text1Text2 
    ككلمتين متلاصقتين لكن عند وضع كل كلمة بين وسم <p> التالى :

    كود PHP:
    <body>
    <
    p>Text1</p>
    <
    p>Text2</p>
    </
    body

    عند تنفيذ هذا الكود نجد النتيجة كالتالى :

    كود PHP:
    Text1
    Text2 

    و أجد كل كلمة وضعت فى سطر جديد و ذلك لأن الوسم <p> مثل الكلمة paragraph أى مقطع و معنى ذلك أن الكلمات التى توضع بين علامتى هذا الوسم يعامل هذا الكلام معاملة المقطع
    نلاحظ أن لبداية المقطع و نهايته توجد مسافات بين كل مقطع و ما يسبقه أو و ما يليه كما يتضح من خلال الصورة التالية :



    إذن عندما نكتب كلمة بين وسمى المقطع فهذا يعنى أننا نكتب مقطع سواء هذا المقطع كان كلمة أو سطر أو عدة سطور



    الوسم <br> ( يكتب أحياناً </ br> ) : نستخدم هذا الوسم عندما نريد إنشاء سطر جديد أو الإنتقال إلى سطر جديد
    و هذا الوسم ليس له وسم بداية و نهايه و لكن يكتب مرة واحده أو وسم واحد كمثال :

    كود PHP:
    <body>
    Text1<br />Text2
    </body

    *** الفرق بين الحرف و الكلمة و السطر و المقطع :
    سنوضحه المرة القادمة إن شاء الله

  2. #2
    عضوية جديدة الصورة الرمزية Eng/AhmedRagab
    تاريخ التسجيل
    Aug 2009
    المشاركات
    40
    الدولة: Egypt
    معدل تقييم المستوى
    0

    رد: لغة الترميز المتشعبة Hyper Text Markup Language HTML

    مجهود رائع و اسلوب شرحك متميز

    استمر علي هذا المنوال

    و الي الامام...

    Contact : AhmedRagab@live.com

    "مشغول جدا"
    "عذرا لقلة تواجدي"



  3. #3
    عضو ذهبي الصورة الرمزية Bahaa Hamam
    تاريخ التسجيل
    Jul 2008
    المشاركات
    2,482
    الدولة: Egypt
    معدل تقييم المستوى
    15

    رد: لغة الترميز المتشعبة Hyper Text Markup Language HTML

    بارك الله فيك
    والي الأمام دائما

  4. #4
    عضوية جديدة
    تاريخ التسجيل
    Oct 2009
    المشاركات
    10
    معدل تقييم المستوى
    0

    رد: لغة الترميز المتشعبة Hyper Text Markup Language HTML

    مشاء الله مجهود جبار زبارك الله فيك

  5. #5
    عضو الصورة الرمزية المبرمج المصرى
    تاريخ التسجيل
    Sep 2009
    المشاركات
    366
    معدل تقييم المستوى
    9

    رد: لغة الترميز المتشعبة Hyper Text Markup Language HTML

    مجهود رائع جدا بارك الله فيك...بس عندى اقتراح بدل ما تتعب نفسك وتقعد تكتب سجل هذا الشرح فيديو أفضل
    قال ابن الجوزي - رحمه الله - : " أتدري من الرجل؟ الرجل والله من إذا خلا بما يحب من المحرم وقدر عليه وتقلقل عطشا إليه نظر إلى نظر الحق إليه، فاستحيا من إجالة همه فيما يكرهه، فذهب العطش"
    استحيا من إجالة همه فيما يكرهه==>أى استحى أن يقضى هذه الشهوة فيما يكرهه الله عز وجل

  6. #6
    عضوية جديدة الصورة الرمزية اينشتاين
    تاريخ التسجيل
    Mar 2009
    المشاركات
    27
    معدل تقييم المستوى
    0

    Smile رد: لغة الترميز المتشعبة Hyper Text Markup Language HTML

    شكرا اخوانى على الردود الجميلة و متنسوش تدعولى بأن يغفر الله لى و لوالدى و لكل المسلمين إن شاء الله

    إخوانى فين حل الخطأ اللى هيحصل فى الكود بتاعى دا

    كود PHP:
    <html>
    <
    head>
    <
    title></title>
    </
    head>
    <
    body>
    </
    body>
    </
    html


    :confused:

  7. #7
    عضو ذهبي الصورة الرمزية Bahaa Hamam
    تاريخ التسجيل
    Jul 2008
    المشاركات
    2,482
    الدولة: Egypt
    معدل تقييم المستوى
    15

    Post رد: لغة الترميز المتشعبة Hyper Text Markup Language HTML

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

    إخوانى فين حل الخطأ اللى هيحصل فى الكود بتاعى دا

    كود PHP:
    <html>
    <
    head>
    <
    title></title>
    </
    head>
    <
    body>
    </
    body>
    </
    html


    :confused:
    بعد مراجعة الكود لا يوجد أي أخطاء

  8. #8
    عضوية جديدة الصورة الرمزية اينشتاين
    تاريخ التسجيل
    Mar 2009
    المشاركات
    27
    معدل تقييم المستوى
    0

    رد: لغة الترميز المتشعبة Hyper Text Markup Language HTML

    اخى الكريم الصقر المصرى الكود دا مش هتلاحظ إن فيه أخطاء إلا أما تجربه فى الموقع دا
    http://validator.w3.org
    لأن الخطأ اللى فيه هو عدم وجود تعريف لنوع أو إصدارة الهتمل
    اللى انا شغال بيها جرب كده تكتب الأكواد فى الصفحة و شوف بنفسك أو راجع الجزء المضاف فى أخر الدرس الأول
    لتصحيح الخطأ نكتب قبل وسم بداية الصفحة السطر التالى
    كود PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN"
    و متشكر أوى ليك على التفاعل الجميل دا معايا

  9. #9
    عضوية جديدة الصورة الرمزية اينشتاين
    تاريخ التسجيل
    Mar 2009
    المشاركات
    27
    معدل تقييم المستوى
    0

    Exclamation رد: لغة الترميز المتشعبة Hyper Text Markup Language HTML

    فيه حد متابع؟؟ :confused:

  10. #10
    عضوية جديدة الصورة الرمزية اينشتاين
    تاريخ التسجيل
    Mar 2009
    المشاركات
    27
    معدل تقييم المستوى
    0

    Smile رد: لغة الترميز المتشعبة Hyper Text Markup Language HTML

    فى الدرس الثالث المثال الأول عن الوسم <p> الكود كامل لتنفيذه هو :

    كود PHP:
    <!DOCTYPE html PUBLIC "-//W3D//DTD HTML 3.2//EN">
    <
    html dir="rtl">
    <
    head>
    <
    title>الله أكبر</title>
    </
    head>
    <
    body>
    <
    p>الله أكبر</p>
    </
    body>
    </
    html
    ها حد جابها كده ؟؟ و لا نسيتوا تعريف نوع الصفحة كالعاده ؟

  11. #11
    عضوية جديدة الصورة الرمزية اينشتاين
    تاريخ التسجيل
    Mar 2009
    المشاركات
    27
    معدل تقييم المستوى
    0

    Exclamation رد: لغة الترميز المتشعبة Hyper Text Markup Language HTML

    اقتباس المشاركة الأصلية كتبت بواسطة اينشتاين مشاهدة المشاركة
    فيه حد متابع؟؟ :confused:
    أتمنى أنه يكون فيه حد بيستفاد !!!!!!!!!

  12. #12
    عضو ذهبي الصورة الرمزية Bahaa Hamam
    تاريخ التسجيل
    Jul 2008
    المشاركات
    2,482
    الدولة: Egypt
    معدل تقييم المستوى
    15

    رد: لغة الترميز المتشعبة Hyper Text Markup Language HTML

    نحن متابعين يا أخي
    استمرررررررررر

  13. #13
    عضوية جديدة
    تاريخ التسجيل
    Feb 2010
    المشاركات
    1
    معدل تقييم المستوى
    0

    رد: لغة الترميز المتشعبة Hyper Text Markup Language HTML

    السلام عليكم عندي مشكلة عندما اكتب باللغة العربية على note pad فانها لا تظهر على التصفح و انما تظهر علامات ??????????? هل من حل و شكرا

  14. #14
    عضوية جديدة
    تاريخ التسجيل
    Mar 2009
    المشاركات
    4
    معدل تقييم المستوى
    0

    رد: لغة الترميز المتشعبة Hyper Text Markup Language HTML

    اقتباس المشاركة الأصلية كتبت بواسطة amin0891 مشاهدة المشاركة
    السلام عليكم عندي مشكلة عندما اكتب باللغة العربية على note pad فانها لا تظهر على التصفح و انما تظهر علامات ??????????? هل من حل و شكرا
    و عليكم السلام و رحمة الله و بركاته
    و أن تكتب أكواد الصفحة على Notepad ضع هذا الكود بين الوسمين <head>
    كود PHP:
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1256"
    <
    meta http-equiv="Content-Language" content="ar-sa"

  15. #15
    عضو ذهبي الصورة الرمزية Bahaa Hamam
    تاريخ التسجيل
    Jul 2008
    المشاركات
    2,482
    الدولة: Egypt
    معدل تقييم المستوى
    15

    رد: لغة الترميز المتشعبة Hyper Text Markup Language HTML



    اقتباس المشاركة الأصلية كتبت بواسطة أينشتاين مشاهدة المشاركة
    و عليكم السلام و رحمة الله و بركاته
    و أن تكتب أكواد الصفحة على Notepad ضع هذا الكود بين الوسمين <head>
    كود PHP:
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1256"
    <
    meta http-equiv="Content-Language" content="ar-sa"
    أهلا بعودتك أخي أينشتاين
    فينك يارب تكون بخير

صفحة 1 من 2 1 2 الأخيرةالأخيرة

المواضيع المتشابهه

  1. تعليم لغة Html فيديو Lynda.com - HTML
    بواسطة seragsamy في المنتدى البرمجه والتصميمات الفنيه ( الجرافيكس )
    مشاركات: 4
    آخر مشاركة: 11-05-2013, 23:05
  2. دورة HTML : شرح إنشاء ملف إتش تي أم ال - how to create HTML File
    بواسطة عالم البرمجة في المنتدى البرمجه والتصميمات الفنيه ( الجرافيكس )
    مشاركات: 1
    آخر مشاركة: 17-03-2013, 13:15
  3. دورة HTML - شرح الأكواد الرئيسية داخل ملف HTML ( head,body,html )
    بواسطة عالم البرمجة في المنتدى البرمجه والتصميمات الفنيه ( الجرافيكس )
    مشاركات: 2
    آخر مشاركة: 26-03-2012, 01:09
  4. سوال مستعجل فى html wrap text area
    بواسطة فارس بلا جواد20 في المنتدى البرمجه والتصميمات الفنيه ( الجرافيكس )
    مشاركات: 1
    آخر مشاركة: 27-10-2011, 22:27
  5. هل يمكن الترجمة من low language الى high language ؟
    بواسطة DIABLO 7 في المنتدى الأرشيف
    مشاركات: 2
    آخر مشاركة: 14-10-2005, 13:41

المفضلات

ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •