بدايتك مع اللغة الهيكلية html

الفارس · 09-04-2019, 10:16 AM

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

قائمة المطلحات الوارد ذكرها هنا :

tag : وسم

element : عنصر

attribute : خاصية

value : قيمة

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

المتصفح لا يرى أكواد PHP ولكنه يرى أكواد html وأكواد التنسيق CSS وأكواد لغة javaScript -يمكنك البدء في تعلمها بعد إنهاء هذه الدورة-

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

ماهي مكونات هذه اللغة ؟

- ببساطة تتكون هذه اللغة من الثلاث علامات الأساسية التالية < و > و / ومجموعة وسوم

- الصورة العامة لأي وسم تأخذ الصورة التالية :

<tag>

</tag>
ويسمى الوسم <tag> وسم الفتح والوسم </tag> وسم الإغلاق

الآن نريد إنشاء صفحة ويب

ما عليك إلا أن تفتح أي محرر نصوص وتكتب التالي :

<html>

</html>
ويُعرف الوسم السابق html بوسم تعريف وثيقة html وعند فتح أي وسم يجب إغلاقه وهذا الوسم يحتوي بداخله جميع وسوم html الأخرى

ملاحظة : هناك وسوم لا تحتاج لوسم إغلاق لأنها لايمكن تضمين وسوم أخرى داخلها كوسم السطر الجديد <br>

وبعد هذا نحفظ الصفحة بإمتداد html بهذا أنت أنشأت صفحة ويب فارغة , تستطيع أن تفتحها بإستخدام أي من المتصفحات لديك

ملاحظة: لايهم الكتابة بالأحرف الإنجليزية الكبيرة أو الصغيرة في لغة HTML

كل وسم يمكن أن تكون له بعض الخصائص تختلف من وسم لأخر على سبيل المثال الوسم html له خاصية الـ dir وهي إتجاه الصفحة وتأخذ قيمتين إما "rtl" أي من اليمين إلى اليسار right to left أو

القيمة "ltr" أي من اليسار إلى اليمين left to right

ملاحظة : توضع القيمة بين علامتي إقتباس زوجية أو فردية

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

<html dir="rtl">

</html>
والآن نريد أن نكتب شيئ في الصفحة , وسم جسم الصفحة هو الوسم body فالآمن سنقوم بتضمين وسم الـ body داخل وسم الـ html وداخل وسم الـ body نكتب ما نريد هكذا :

<html dir="rtl">

<body>
بسم الله الرحمن الرحيم
</body>

</html>
ملاحظة : يتم تجاهل أي عدد من الأسطر أو المسافات الفارغة إلى مسافة فارغة واحدة

ملاحظة : من الأفضل تنسيق الكود الذي تكتبه ويفضل إستخدام ذر الـtab من لوحة المفاتيح لإزاحة محتويات الوسم للداخل لتوضيح أن هذه البيانات ضمن هذا الوسم -يمكنك تظليل النطقة المراد إزاحتها وتضعط على مفتاح الـ tab -

الآن إحفظ الملف وجرب هذا الكود على المتصفح ماذا ترى ؟

إذا كنت من مستخدمي متصفح IE ربما سيظهر النص عادي معك , ولكن مع باقي المتصفحات سيظهر النص بشكل غريب , نسأل ما هذه المشكلة ؟

ونجيبك أن هذه المشكلة من ترميز اللغة ولكي تظهر اللغة العربية بشكل جيد يجب عليك إستخدام إستخدام ترميز داعم للغة العربية كـ utf-8

فهناك وسم في لغة html يسمى وسم الرأس head وهو داخل وسم html وأعلى وسم الـ body ويتم تضمين محتويات ومعلومات الصفحة داخله

ما نحتاجه من هذا الوسم حالياً هو وسم تعريف ترميز الوثيقة ويدعى meta وهو وسم لا يحتاج وسم إغلاق

وعلى هذا يصبح الكود كالتالي :

<html dir="rtl">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>

<body>
بسم الله الرحمن الرحيم
</body>

</html>
ملاحظة: يجب أيضاً أن يتم حفظ الملف بترميز utf-8 إذا كنت من مستخدمي Linux فالإفتراضي هو الحفظ بهذا الترميز ولكن مستخدمي Windwos يحتاجون لحفظ الملف بترميز utf-8

ملاحظة: لحفظ الملف بهذا الترميز على windows من خلال notepad العادي إختر Save As ثم إختر من تبويب Encoding الترميز UTF-8 ولكن البيانات العربية في هذا الملف ستتلف ويجب عليك إعادة كتابتها من جديد ولتلاشي هذا إن كان لديك ملفات تخشى على ضياع بياناتها يرجى إستخدام برنامج notepad++ لعملية تحويل الترميز .

ولكن هناك تعديلات جديدة ووسوم جديدة تم إضافتها وتحسينات كثيرة تم إضافتها للغة الهيكلة html في نسختها الجديدة HTML5 فلتعريف وثيقة من نوع HTML5 يجب إضافة الكود التالي في بداية الوثيقة :

<!DOCTYPE HTML>
- وضمن هذه التعديلات تم تعديل وسم الـ meta وأصبح أقصر فقط عليك إعطاء قيمة الترميز التي تريد للخاصية charset وعلى هذا يصبح الكود التالي بهذا الشكل :

<!doctype html>
<html dir="rtl">

<head>
<meta charset="utf-8">
</head>

<body>
بسم الله الرحمن الرحيم
</body>

</html>
وهناك وسم أخر ضمن وسوم الـ head وهو وسم title وهو اسم الصفحة وهو ما تستخدمه للتفريق بين الصفحات إذا كنت تفتح أكثر من تبويب داخل المتصفح , وإن تركت هذا الوسم سيظهر مسار الملف به ويصبح الكود كالتالي :

<!doctype html>
<html dir="rtl">

<head>
<meta charset="utf-8">
<title>
صفحة للتجربة
</title>
</head>

<body>
بسم الله الرحمن الرحيم
</body>

</html>
والآن نريد أن نضيف بعض النصوص والتنسيقات لجسم الصفحة إذاً علينا الإنتقال لداخل وسم الـ body

هناك للعنواين 6 وسوم من h1 إلى h6 يختلفوا عن بعض في حجم الخط

ولدينا وسم الفقرة وهو p ووسم الخط font وكل وسم له خصائصة الخاصة -وهناك خصائص مشتركة طبعاً- ولكل خاصية قيم

بعد تعلمنا لغة التنسيق CSS لن نحتاج لهذه والوسوم

لتطبيق ما سبق من وسوم نفذ وشاهد التغييرات

المصدر: منتديات رحيل لكل العرب - من قسم: قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress

09-04-2019, 10:16 AM	#1
الفارس تاريخ التسجيل: Feb 2019 المشاركات: 1,010 التقييم: 10	الفارس تاريخ التسجيل: Feb 2019 المشاركات: 1,010 التقييم: 10 بدايتك مع اللغة الهيكلية html بدايتك مع اللغة الهيكلية html السلام عليكم ورحمة الله وبركاته قائمة المطلحات الوارد ذكرها هنا : tag : وسم element : عنصر attribute : خاصية value : قيمة سأذكر المصطلح بالعربية وتستطيع الرجوع لهذه القائمة لتعلم ما تدل عليه هذه الترجمة المتصفح لا يرى أكواد PHP ولكنه يرى أكواد html وأكواد التنسيق CSS وأكواد لغة javaScript -يمكنك البدء في تعلمها بعد إنهاء هذه الدورة- هذه اللغة بسيطة التركيب جداً وعند فهمك لكيفية تركيبها إذاً أنت تخطيت أهم جزء في تعلم لغة html والباقي تستطيع التعرف عليه عند الحاجة إليه . ماهي مكونات هذه اللغة ؟ - ببساطة تتكون هذه اللغة من الثلاث علامات الأساسية التالية < و > و / ومجموعة وسوم - الصورة العامة لأي وسم تأخذ الصورة التالية : <tag> </tag> ويسمى الوسم <tag> وسم الفتح والوسم </tag> وسم الإغلاق الآن نريد إنشاء صفحة ويب ما عليك إلا أن تفتح أي محرر نصوص وتكتب التالي : <html> </html> ويُعرف الوسم السابق html بوسم تعريف وثيقة html وعند فتح أي وسم يجب إغلاقه وهذا الوسم يحتوي بداخله جميع وسوم html الأخرى ملاحظة : هناك وسوم لا تحتاج لوسم إغلاق لأنها لايمكن تضمين وسوم أخرى داخلها كوسم السطر الجديد <br> وبعد هذا نحفظ الصفحة بإمتداد html بهذا أنت أنشأت صفحة ويب فارغة , تستطيع أن تفتحها بإستخدام أي من المتصفحات لديك ملاحظة: لايهم الكتابة بالأحرف الإنجليزية الكبيرة أو الصغيرة في لغة HTML كل وسم يمكن أن تكون له بعض الخصائص تختلف من وسم لأخر على سبيل المثال الوسم html له خاصية الـ dir وهي إتجاه الصفحة وتأخذ قيمتين إما "rtl" أي من اليمين إلى اليسار right to left أو القيمة "ltr" أي من اليسار إلى اليمين left to right ملاحظة : توضع القيمة بين علامتي إقتباس زوجية أو فردية إذا أردنا كتابة صفحة ويب باللغة العربية فالأفضل أن يكون إتجاه الصفحة من اليمين إلى اليسار هكذا : <html dir="rtl"> </html> والآن نريد أن نكتب شيئ في الصفحة , وسم جسم الصفحة هو الوسم body فالآمن سنقوم بتضمين وسم الـ body داخل وسم الـ html وداخل وسم الـ body نكتب ما نريد هكذا : <html dir="rtl"> <body> بسم الله الرحمن الرحيم </body> </html> ملاحظة : يتم تجاهل أي عدد من الأسطر أو المسافات الفارغة إلى مسافة فارغة واحدة ملاحظة : من الأفضل تنسيق الكود الذي تكتبه ويفضل إستخدام ذر الـtab من لوحة المفاتيح لإزاحة محتويات الوسم للداخل لتوضيح أن هذه البيانات ضمن هذا الوسم -يمكنك تظليل النطقة المراد إزاحتها وتضعط على مفتاح الـ tab - الآن إحفظ الملف وجرب هذا الكود على المتصفح ماذا ترى ؟ إذا كنت من مستخدمي متصفح IE ربما سيظهر النص عادي معك , ولكن مع باقي المتصفحات سيظهر النص بشكل غريب , نسأل ما هذه المشكلة ؟ ونجيبك أن هذه المشكلة من ترميز اللغة ولكي تظهر اللغة العربية بشكل جيد يجب عليك إستخدام إستخدام ترميز داعم للغة العربية كـ utf-8 فهناك وسم في لغة html يسمى وسم الرأس head وهو داخل وسم html وأعلى وسم الـ body ويتم تضمين محتويات ومعلومات الصفحة داخله ما نحتاجه من هذا الوسم حالياً هو وسم تعريف ترميز الوثيقة ويدعى meta وهو وسم لا يحتاج وسم إغلاق وعلى هذا يصبح الكود كالتالي : <html dir="rtl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> بسم الله الرحمن الرحيم </body> </html> ملاحظة: يجب أيضاً أن يتم حفظ الملف بترميز utf-8 إذا كنت من مستخدمي Linux فالإفتراضي هو الحفظ بهذا الترميز ولكن مستخدمي Windwos يحتاجون لحفظ الملف بترميز utf-8 ملاحظة: لحفظ الملف بهذا الترميز على windows من خلال notepad العادي إختر Save As ثم إختر من تبويب Encoding الترميز UTF-8 ولكن البيانات العربية في هذا الملف ستتلف ويجب عليك إعادة كتابتها من جديد ولتلاشي هذا إن كان لديك ملفات تخشى على ضياع بياناتها يرجى إستخدام برنامج notepad++ لعملية تحويل الترميز . ولكن هناك تعديلات جديدة ووسوم جديدة تم إضافتها وتحسينات كثيرة تم إضافتها للغة الهيكلة html في نسختها الجديدة HTML5 فلتعريف وثيقة من نوع HTML5 يجب إضافة الكود التالي في بداية الوثيقة : <!DOCTYPE HTML> - وضمن هذه التعديلات تم تعديل وسم الـ meta وأصبح أقصر فقط عليك إعطاء قيمة الترميز التي تريد للخاصية charset وعلى هذا يصبح الكود التالي بهذا الشكل : <!doctype html> <html dir="rtl"> <head> <meta charset="utf-8"> </head> <body> بسم الله الرحمن الرحيم </body> </html> وهناك وسم أخر ضمن وسوم الـ head وهو وسم title وهو اسم الصفحة وهو ما تستخدمه للتفريق بين الصفحات إذا كنت تفتح أكثر من تبويب داخل المتصفح , وإن تركت هذا الوسم سيظهر مسار الملف به ويصبح الكود كالتالي : <!doctype html> <html dir="rtl"> <head> <meta charset="utf-8"> <title> صفحة للتجربة </title> </head> <body> بسم الله الرحمن الرحيم </body> </html> والآن نريد أن نضيف بعض النصوص والتنسيقات لجسم الصفحة إذاً علينا الإنتقال لداخل وسم الـ body هناك للعنواين 6 وسوم من h1 إلى h6 يختلفوا عن بعض في حجم الخط ولدينا وسم الفقرة وهو p ووسم الخط font وكل وسم له خصائصة الخاصة -وهناك خصائص مشتركة طبعاً- ولكل خاصية قيم بعد تعلمنا لغة التنسيق CSS لن نحتاج لهذه والوسوم لتطبيق ما سبق من وسوم نفذ وشاهد التغييرات المصدر: منتديات رحيل لكل العرب - من قسم: قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress
	اقتباس

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
كيفية إنشاء جدول أنيق بـ html و css	القيصر	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	1	28-07-2019 07:51 PM
مقدمة إلى تطوير قوالب ووردبريس: تحويل صفحة html	مهرة النجدية	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	1	27-07-2019 11:07 PM
ترجمة معاني القرآن الكريم إلى اللغة الألبانية	الفارس	قسم القرآن الكريم	1	19-07-2019 04:03 PM
نموذج الصندوق في css يصف الصناديق التي تنشأ من خلال عناصر html	الفارس	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	0	09-04-2019 10:34 AM
تأثير اللغة العربية في اللغة الإسبانية	admin	المواضيع العامة	0	17-02-2019 09:30 AM

اسم العضو		حفظ البيانات؟
كلمة المرور

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)