اختر لونك:
وَقُلِ اعْمَلُوا فَسَيَرَى اللَّهُ عَمَلَكُمْ وَرَسُولُهُ وَالْمُؤْمِنُونَ ۖ وَسَتُرَدُّونَ إِلَىٰ عَالِمِ الْغَيْبِ وَالشَّهَادَةِ فَيُنَبِّئُكُم بِمَا كُنتُمْ تَعْمَلُونَ [ التوبة : ( 105 )] كلمة الإدارة

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

يُمنع كتابة مواضيع السحر والشعوذة والروحانيات والابراج بكافة الأشكال والمخالف سيعاقب بحظر مؤقت وإذا تكرر سيكون حظر دائم تنبيه هام جداً



أضف رد جديد

قديم 09-04-2019, 10:16 AM   #1
تاريخ التسجيل: Feb 2019
المشاركات: 1,010
التقييم: 10
تاريخ التسجيل: Feb 2019
المشاركات: 1,010
التقييم: 10
افتراضي بدايتك مع اللغة الهيكلية 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 لن نحتاج لهذه والوسوم

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

الفارس غير متواجد حالياً   اقتباس
أضف رد جديد

الكلمات الدلالية (Tags)
منتديات رحيل, رحيل, شبكة رحيل, r7il, r7il.com


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

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

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة
Trackbacks are متاحة
Pingbacks are متاحة
Refbacks are متاحة


المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
كيفية إنشاء جدول أنيق بـ 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


الساعة الآن 12:43 PM

 


Content Relevant URLs by vBSEO ©2010, Crawlability, Inc.