السلام عليكم و رحمة الله و بركاته
** مقدمة **
إخوانى و أخواتى الكرام أحاول معكم شرح للغات الويب و أبدأها باللغة الأم إن - جاز اللفظ - لغة الترميز المتشعبة و المعروفة لنا بإسم لغة الهتمل 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:
<كود البداية>
هنا توضع الأشياء التى سينفذ عليها الأمر الكود
</كود النهاية>
((((( لا يصلح للتنفيذ هذا الكود فقط للتوضيح )))))
لكى نكتب فى صفحة أو فى ورقة عندنا من المنطقى أن هذه الصفحة لها بداية نراها و أيضاً لها نهاية نراها لكى يعرف متصفح الأنترنت بداية و نهاية الصفحة التى نكتبها نقول له ذلك بوسم بداية و نهاية الصفحة كما يلى طبعا للكتابة نكتب فى الملف ببرنامج النوت باد و للعرض نفتح الملف بمتصفح الأنترنت أوعى تنسى
((((( يصلح للتنفيذ )))))
طبعا عند تنفيذ الكود دا و رؤية النتيجة نجد ان الصفحة فارغة و دا طبعا لأننا لسه مقولناش حاجه غير اننا مجرد وضحنا بداية الصفحة فين و نهايتها فين
أى صفحة أنترنت تنقسم إلى جزئين : الجزء الأول و هو رأس الصفحة 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 فقط
دعمت خواص جديده مثل امكانية تغيير لون خلفية الصفحة - انشاء نماذج محدودة الحقول - عمل جداول - الزائرين يستطيعون تقديم المعلومات - اضافة الخاصية Map
HTML 4.01 : ظهرت فى 24 ديسمبر 1999 و ظهر معها الأنواع css 1.0 , css2.0 , xml 1.0
بعد ذلك توقف التطوير لهذه اللغة و بدأظهور عائلة جديدة تسمى XHTML سنعرفها لاحقا
نحن نعمل على أخر إصدارين و هما HTML 3.2 , HTML 4.01
كيف أعرف و أتأكد أننى قد كتبت الكود صح و بإسلوب علمى 100%
الإجابة : نعرف ذلك من خلال الموقع الرسمى و هو
https://validator.w3.org
ندخل على الرابط السابق و عندما تفتح الصفحة نضغط على الإختيار Validate by Direct Input
أى اختبار الأكواد عن طريق كتابتها فى المربع اللى هيظهر و بعد كتابة الكود نضغط على check إذا ظهر لنا congratulation يبقى احنا كتبنا الكود صح و لو ظهر erorr يبقى احنا كتبنا الكود غلط و هيظهر فى الصفحة من تحت التصحيح اللى الموقع شايفه مناسب بعد اما أعلّم علامة صح على المربع Clean up Markup with HTML Tidy
طيب نطبق على الكود السابق و نشوف ايه الغلط اللى فيه و ياريت تكتبولى التصحيح فى الردود علشان نكون متابعين مع بعض و ياريت كمان لو فيه جزء انا مقصر فى شرحه حد يكمله لى و انتظرونى فى المشاركة الجاية و تكملة الدرس دا
أهم ملحوظة على الإطلاق : اذا استفدت بإذن الله من الشرح يبقا أصبح دين عليك انك تقوم بالشكر و انا الشكر اللى بعترف بيه و اللى هيكون امانه عليك هوه انك تدعيلى و تقول ربنا يرضى عنك و يزيدك فى التعلم
الإجابة على السؤال :
كود PHP:
Line 1, Column 1: no document type declaration; implying "<!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 الإنجليزية
https://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>
ألاحظ أن النتيجة ظهرت التالى :
ككلمتين متلاصقتين لكن عند وضع كل كلمة بين وسم <p> التالى :
كود PHP:
<body>
<p>Text1</p>
<p>Text2</p>
</body>
عند تنفيذ هذا الكود نجد النتيجة كالتالى :
و أجد كل كلمة وضعت فى سطر جديد و ذلك لأن الوسم <p> مثل الكلمة paragraph أى مقطع و معنى ذلك أن الكلمات التى توضع بين علامتى هذا الوسم يعامل هذا الكلام معاملة المقطع
نلاحظ أن لبداية المقطع و نهايته توجد مسافات بين كل مقطع و ما يسبقه أو و ما يليه كما يتضح من خلال الصورة التالية :
إذن عندما نكتب كلمة بين وسمى المقطع فهذا يعنى أننا نكتب مقطع سواء هذا المقطع كان كلمة أو سطر أو عدة سطور
الوسم <br> ( يكتب أحياناً </ br> ) : نستخدم هذا الوسم عندما نريد إنشاء سطر جديد أو الإنتقال إلى سطر جديد
و هذا الوسم ليس له وسم بداية و نهايه و لكن يكتب مرة واحده أو وسم واحد كمثال :
كود PHP:
<body>
Text1<br />Text2
</body>
*** الفرق بين الحرف و الكلمة و السطر و المقطع :
سنوضحه المرة القادمة إن شاء الله
رد مع اقتباس
شرح HTML و لغات الويب
رد: لغة الترميز المتشعبة Hyper Text Markup Language HTML
رد: لغة الترميز المتشعبة Hyper Text Markup Language HTML
المشاركة الأصلية كتبت بواسطة اينشتاين
بعد مراجعة الكود لا يوجد أي أخطاء
رد: لغة الترميز المتشعبة Hyper Text Markup Language HTML
ضوابط المشاركة
المفضلات