تصنيف الموضوع

دورة قوالب ووردبريس: ماذا تعرف عن html؟

14 يونيو 2009

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

ما هي HTML؟

HTML هي اللغة التي تبنى بها صفحات المواقع، وهي مختصر من التسمية الإنجليزية Hyper Text Mark-up Language، ملفات HTML هي عبارة عن ملفات نصية عادية، يتخللها ما يسمى وسوم HTML، بواسطة هذه الوسوم تقوم المتصفحات بعرض النص بالشكل المناسب لكل وسم، وبالتالي يفهم الزائر (بما في ذلك محركات البحث) ما هو دور هذا الجزء من النص ككل، هل هو عنوان أم فقرة أم رابط لموقع آخر.

لكي نجرب كيف يقرأ المتصفح ملفات HTML، سنبدأ بكتابة النص التالي باستخدام أحد برامج تحرير النصوص، ولا تنسى أن تختار تشفير UTF-8 بدون BOM كما تم شرحه في موضوع محررات النصوص:

ووردبريس لإدارة المحتوى

ووردبريس لم يعد أداة تدوين فقط، قوة برمجته وصداقته مع محركات البحث والدعم الواسع له، جعله برنامجا متكاملا لإدارة المحتوى،

بنية ووردبريس

لكي يكون ووردبريس نظام تدوين متكامل، قام مطوروه بتوفير عدة بنيات لتخزين المحتوى حسب نوعيته

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

المواضيع: هو المكون الاساسي لمفهوم التدوين، ولبرنامج ووردبريس ايضا، عبارة عن تدوينات يتم إضافته حسب خط زمني

لصفحات: لا تختلف كثيرا عن المواضيع في مكوناتها غير أن الصفحات تكون عبارة عن محتوى ثابت في المدونة.

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

حسنا لنكتبه بشكل منظم، العنوان في الأعلى، ونعود للسطر بعد كل فقرة، سيبدو في برنامج notepad++ بهذا الشكل:

نقوم بحفظه بإسم index.html في مجلد تطبيقك للدورة، أنقر عليه ولننظر كيف سيبدو في متصفحنا:

أغلب الظن أن المتصفح سيظهر حروفا هيروغليفية كهذه، وسنعرف السبب فيما بعد، لكن لنقم الآن بتغيير ترميز الصفحة إلى UTF-8 ستظهر اللغة العربية، لكن ليس بالشكل الذي كنا نتوقعه، العنوان ليس في الأعلى، وليس هناك عودة للسطر بعد كل فقرة، وسبب هذا أن المتصفح يقرأ بشكل مسترسل، ولا يفهم مقصودنا إلا من خلال لغته الخاصة لغة HTML

لكي يفهم المتصفح أن عبارة “ووردبريس لإدراة المحتوى” عنوان رئيسي علينا أن نضعه في وسم h1، كذلك الفقرة التي بعده علينا أن نضعها في وسم p، “بنية ووردبريس” عنوان فرعي لذلك نضعه في وسم h2 وعبارة “أنواع المحتوى في ووردبريس” عنوان فرعي من h2 سنضعه إذن في وسم h3، لدينا قائمة، لكي يفهم المتصفح أنها كذلك نبدأ وسم ul ثم نضع كل عنصر من القائمة في وسم li ستكون النتيجة في محرر النصوص كالتالي

<h1>ووردبريس لإدارة المحتوى</h1>
 
<p>ووردبريس لم يعد أداة تدوين فقط، قوة برمجته وصداقته مع محركات البحث والدعم الواسع له، جعله برنامجا متكاملا لإدارة المحتوى، </p>
 
<h2>بنية ووردبريس</h2>
 
<p>لكي يكون ووردبريس نظام تدوين متكامل، قام مطوروه بتوفير عدة بنيات لتخزين المحتوى حسب نوعيته:</p>
 
<h3>أنواع المحتوى في ووردبريس</h3>
 
<ul>
<li>المواضيع: هو المكون الاساسي لمفهوم التدوين، ولبرنامج ووردبريس ايضا، عبارة عن تدوينات يتم إضافته حسب خط زمني</li>
 
<li>الصفحات: لا تختلف كثيرا عن المواضيع في مكوناتها غير أن الصفحات تكون عبارة عن محتوى ثابت في المدونة.</li>
 
<li>التعليقات: هي إحدى أساسيات المدونات، أغلب تعاريف مصطلح المدونة يذكر التعليقات كشرط من الشروط</li>
 </ul>

وهكذا سيظهرها المتصفح، يبدو أن علاقتنا معه أصبحت تتحسن:

في القائمة، نريد كلمات “المواضيع” ، “الصفحات”، “التعليقات” أن تظهر بشكل بارز، لذلك نضعها في الوسم المخصص لذلك، strong، ونريد أيضا أن تكون القائمة مرقمة، في السابق أضفنا وسم ul مختصر من unordred list ويعني قائمة غير خاضعة لترتيب (غير مرقمة)، نستبدله بوسم ol مختصر من ordred list ومعناه قائمة مرتبة (مرقمة).

<h1>ووردبريس لإدارة المحتوى</h1>
 
<p>ووردبريس لم يعد أداة تدوين فقط، قوة برمجته وصداقته مع محركات البحث والدعم الواسع له، جعله برنامجا متكاملا لإدارة المحتوى، </p>
 
<h2>بنية ووردبريس</h2>
 
<p>لكي يكون ووردبريس نظام تدوين متكامل، قام مطوروه بتوفير عدة بنيات لتخزين المحتوى حسب نوعيته:</p>
 
<h3>أنواع المحتوى في ووردبريس</h3>
 
<ol>
<li><strong>المواضيع:</strong> هو المكون الاساسي لمفهوم التدوين، ولبرنامج ووردبريس ايضا، عبارة عن تدوينات يتم إضافته حسب خط زمني</li>
 
<li><strong>الصفحات:</strong> لا تختلف كثيرا عن المواضيع في مكوناتها غير أن الصفحات تكون عبارة عن محتوى ثابت في المدونة.</li>
 
<li><strong>التعليقات:</strong> هي إحدى أساسيات المدونات، أغلب تعاريف مصطلح المدونة يذكر التعليقات كشرط من الشروط</li>
 </ol>

قم بتحديث الصفحة، و تغيير إتجاهها، كما هو موضح:

من خلال ما سبق نستنتج بعض خصائص الوسوم في لغة HTML:
1. أن الوسوم دلالية، أي لكل وسم معنى معين ومكان للإستخدام، h1 لعنوان رئيسي، وh2 فرعي، وهكذا إلى h6، القائمة باستخدام الوسم ul أو ol وبداخلها عناصر li اختصارا لمصطلح list item، الوسم p للفقرات اختصارا لكلمة paragraph، للنص البارز استخدمنا strong، يمكنك أن تجد جميع عناصر html في موقع htmlDog.

2. أن كل وسم له بداية ونهاية، وبينهما يوضع المحتوى، حسب النموذج التالي:

أمثلة

<h1>عنوان رئيسي 1</h1>
<h2>عنوان رئيسي 2</h2>
<p>وسم الفقرة</p>
<strong>نص بارز</strong>

3. أن كل عنصر يمكن أن يحتوي عناصر أخرى بداخله
4. نغلق آخر وسم قمنا بفتحه عند تداخل الوسوم ، (مبدأ التعليب)، بالشكل التالي:

5. أن وسوم h1 و p و ul و li تفرض على المتصفح أن يعود للسطر، بينما الوسم strong لم يفعل ذلك، وبقي في السطر، هذا يعني أن هناك عدة أنواع من العناصر في html

6. أن الوسوم تكتب بحروف صغيرة lowercase.

أنواع العناصر في Html

1. عناصر الصندوق Block
هي عناصر تأخذ مساحة في الصفحة، وتكون متمددة في العنصر الذي يحتويها، ونلاحظ أن العناصر التي تأتي بعدها ترجع للسطر تلقائيا، من أمثلة عناصر الصندوق، p الفقرة، والعناوبن h1 إلى h6

2. عناصر السطر Inline
عناصر لا تأخذ مساحة، وتبقى مندرجة داخل السطر، مثل العنصر strong ، والرابط a والخط المائل em

3. عناصر صندوق داخل السطر Inline-block
بعض المتصفحات تدعم عنصرا آخر يجمع بين خصائص الصندوق، لكنه يبقى داخل السطر، يمكن تغيير أي عنصر من نوع إلى آخر باستخدام css وهذا ما سنراه في موضوع لاحق

استخدام إضافات فايرفوكس لتطوير الويب

لكي نطلع على شكل هذه العناصر والفرق بينها، نستخدم إضافة web developer التي سبق أن قمنا بتثبيتها في موضوع أدوات مطوري الويب، نقوم بإظهار شريط الإضافة، ونختار منه outline، ومن القائمة المنسدلة نختار outline block level element

اعد الكرة، وقم باختيار outline custom elements كما هو موضح في الصورة أعلاه، ثم أدخل أسماء العناصر التي تريد تحديدها، ولندخل الآن العنصر strong و العنصر li ونختار ألوان مغايرة، ستظهر الصفحة بالشكل التالي:

لاحظ الفرق بين العناصر الصندوق، والعنصر strong السطري، لاحظ أيضا أن العناصر li وهي عناصر صندوق، تتمدد فقط داخل العنصر ul المحتوي لها.

أي لغة نستخدم؟

لنعد الآن إلى البداية، لماذا يعرض المتصفح الحروف بترميز خاطئ في البداية؟ ولنتساءل أيضا، كيف نجعل اتجاه الصفحة دائما من اليمين دون أن يضطر الزائر لتغييره مع كل زيارة؟
لنستخدم الآن أحد الإضافة الثانية، FireBug، قم بتحديث الصفحة، ثم أنقر على تلك الحشرة اللطيفة أسفل المتصفح، أو أنقر بيمين الفأر على أي عنصر في الصفحة واختر من القائمة Inspect Element، وستظهر لك بنية الصفحة بالشكل التالي:

ملاحظات:
1. نبدأ من الوسم head ، ذكرنا أن لكل وسم بداية ونهاية، لكن هناك وسوم تحتوي على على البداية والنهاية معا، مثل وسم الصورة img ووسم الرجوع للسطر br، هذه الوسوم ليس لديها محتوى بين وسم النهاية والبداية لذلك يتم إغلاقها ذاتيا، ويمكن كتابتها بالشكل التالي:

<img src="images/mypic.gif" />
<br />

تنبيه: وسم head ليس من الوسوم التي تغلق ذاتيا، في هذه الحالة قام المتصفح بإضافته بهذا الشكل لأننا لم نقم بإضافته

2. نلاحظ أن هناك وسوم جديدة، لم نقم نحن بإضافتها، وإنما أضافها المتصفح، إنها الوسوم الأساسية لكل صفحة html: html و head و body

الوسم Html: هو الوسم الذي يشكل ملف html ككل، وفي هذا الوسم سنجيب على أحد التساؤلين السابقين، هنا نحدد اتجاه الصفحة، بإضافة خاصية dir وتحديدها من اليمين إلى اليسار rtl إختصارا لعبارة right to left، تصبح بداية الوسم كالتالي:

<html dir="rtl">

في هذا الوسم أيضا يتم تحديد أمرين مهمين، لغة html المستخدمة، ولغة المحتوى بإضافة خاصيتي lang و xmlns بالشكل التالي:

<html lang="ar" xmlns="http://www.w3.org/1999/xhtml" dir="rtl">

لعلك تلاحظ اننا حددنا في السطر لغة xHtml وهي آخر نسخة من لغة Html، حاول البحث حول هذا الأمر وعن الفرق بين xHtml و html.

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

<head>
<title>ماذا تعرف عن html؟</title>
</head>

بقي أن نجيب عن السؤال الآخر، تشفير الصفحة لماذا لا يعرفه المتصفح؟ والآن نجيب بأن نضيف نحن نظام التشفير هنا، ونخبر المتصفح أنه utf-8، نقوم بذلك داخل العنصر head باستخدام أحد الوسوم المتعددة الخصائص، الوسم meta، نستخدم خاصيتي content(+charest) وhttp-equiv، ونضيفه داخل head بالشكل التالي:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ماذا تعرف عن html؟</title>
</head>

الوسم body: وابتداء من هذا الوسم يتم عرض الصفحة، العنصر body يحتوي ضمنه على جميع العناصر الظاهرة الأخرى.

DOCTYPE

ذكرنا ان هناك مجموعة من نسخ لغة Html وآخرها xHtml، وفي كل نسخة هناك مجموعة من القواعد مختلفة بعض الشيء عن الأخرى، لذلك لكي يحدد المتصفح (وأي جهاز يقرأ الصفحة) ما هي اللغة المستعملة في ملفك، وبالتالي ما هي القواعد التي يتبعها في ملف الصفحة، ويحدد من الكود مالذي يتوافق مع اللغة المستخدمة والعكس، لكي يحدد المتصفح كل هذا نضيف سطر تعريف DOCTYPE في أول الملف قبل وسم html ونحدد في هذا السطر النسخة والنوع المستعمل من html (أو xml في بعض الحالات)، نضيف السطر بالشكل التالي:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

بعد إضافة هذه العناصر لملف html سيكون بالشكل التالي:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ar" xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ماذا تعرف عن html؟</title>
 
</head>
<body>
<h1>ووردبريس لإدارة المحتوى</h1>
 
<p>ووردبريس لم يعد أداة تدوين فقط، قوة برمجته وصداقته مع محركات البحث والدعم الواسع له، جعله برنامجا متكاملا لإدارة المحتوى، </p>
 
<h2>بنية ووردبريس</h2>
 
<p>لكي يكون ووردبريس نظام تدوين متكامل، قام مطوروه بتوفير عدة بنيات لتخزين المحتوى حسب نوعيته:</p>
 
<h3>أنواع المحتوى في ووردبريس</h3>
 
<ol>
<li><strong>المواضيع:</strong> هو المكون الاساسي لمفهوم التدوين، ولبرنامج ووردبريس ايضا، عبارة عن تدوينات يتم إضافته حسب خط زمني</li>
 
<li><strong>الصفحات:</strong> لا تختلف كثيرا عن المواضيع في مكوناتها غير أن الصفحات تكون عبارة عن محتوى ثابت في المدونة.</li>
 
<li><strong>التعليقات:</strong> هي إحدى أساسيات المدونات، أغلب تعاريف مصطلح المدونة يذكر التعليقات كشرط من الشروط</li>
 </ol>
</body>
</html>

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

تطبيقات على القالب:

حاول أن تستخدم الإضافتين FireBug و WebDeveloper، لتتعرف على هيكلة صفحة القالب، ستلاحظ أسماء وسوم جديدة مثل div و span وabr وأن بعض الوسوم تحتوي على خاصية class أو id، هذا سيفيدك لتجهز نفسك للموضوع اللاحق بإذن الله.

مواضيع مشابهة:

الاوسمة: , , , , , , , ,

  1. 36 تعليق على “دورة قوالب ووردبريس: ماذا تعرف عن html؟”

  2. يسعدني أن أكون أول من يرد على هذه الرائعة :)

    بارك الله فيك أخي الكريم

    وجعله في ميزان حسناتك بإذن الله ,,

    بواسطة ياسر في يونيو 14, 2009

  3. يا سلام على هذا الشرح الرائع،

    بارك الله فيك أخي عمران عليه.

    بواسطة يونس في يونيو 14, 2009

  4. السلام عليكم

    شرح ممتاز جدا , و انا الحمد لله بديت بالتطبيق على قالب موقعي الجديد.

    اشكرك جدا على وقتك في كتابة الموضوع .وعلى المعلومات الجيدة .
    كل الاحترام و التقدير لك.
    متابع

    بواسطة Karar.A.R في يونيو 14, 2009

  5. بارك الله فيك يا أستاذنا، أنت تجعلنا نكتشف من خلال شروحاتك أن الأمر بسيط وليس معقدا بالدرجة التي كنا نظنها :)

    بواسطة أمتون في يونيو 14, 2009

  6. لا زلنا متابعين شكر الله لك سعيك
    لدي مشكلة مع برنامج Notepad++ فعندما وصلت للتطبيق strongالخط العريض وكنت قد كتبت النص سابقا لم استطع اضافته (الوسم) في المكان الذي أريد بمعنى لا أستطيع تحديد الكلمة المرادة
    الحل الذي استخدمته نسخ النص في النوت باد ومن ثم العودة
    هل من حل مع البرنامج و المشكلة مع كلا الواجهتين العربية
    والانجليزية .. قد يكون من سير النص مع الوسوم سويا لكن ماذا لو احتجت إلى التعديل

    بواسطة الأباتشي في يونيو 14, 2009

  7. شرح رائع ومكثف .. :)
    الله يعين على التالي …

    أتوقع أن الوسم في هذه الصورة ناقص (تم التصحيح)

    سأطبق الدرس .. وفقك الله يا غالي

    بواسطة مدونة الصقر في يونيو 14, 2009

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

    بواسطة عمران عماري في يونيو 14, 2009

  9. @مدونة صقر
    شكرا لتنبيهك :)

    بواسطة عمران عماري في يونيو 14, 2009

  10. مرحبا استاذ عمران ، أنا جيدة في xhtml والحمدلله لكن المشكلة أنه لم يسبق لي تطبيق عملي على صفحة كاملة إنما أعرفها كأوامر منفصلة كيف أضيف صورة ، رابط ، وغيرها من الأوامر . لكن بعد ماعرفت ال css اكتشفت أنه لا يوجد الكثير لاكتشافه في هذه ال xhtml فهي بسيطة ويمكن للمرء تعلمها في غضون اسبوع في حال أراد. لكن هي الأساس في كل الاحوال . على كل حال أنا وضعت رد في موضوع تهيئة بيئة العمل حول مشكلة متعلقة بالخادم اليوم لأنه يرفض العمل :( والإشارة حمراء :( . أرغب والله بالتطبيق والحضور دون اسئلة ومشاكل لكن ماباليد حيله :( شكراً لك .

    بواسطة someone في يونيو 14, 2009

  11. ماشاء الله ..

    شرح مفصل ورائع..

    مازلنا متابعين..

    تحياتي لك .. :)

    بواسطة abdullah_kh في يونيو 14, 2009

  12. السلام عليكم ورحمة الله وبركاته..
    مقدمة تفتح الشهية لكل وافد جديد على عالم HTML و XHTML، وأيضا فيها تذكير للعارف لهما..
    شخصيا لا مشكلة لدي ولله الحمد مع xHTML و css ولكنني أستمتع بالمتابعة..
    لدي ملاحظة أخي عمران: حسب معارفي المتواضعة فإن هناك اختلافات بسيطة بين كل من HTML و XHTML، وأن كل واحدة منهما يتم تطويرهما على حدة، رغم أن الثانية مبنية على الأولى لكن بنكهة لغة XML.
    هذا رابط لتدوينة للأخ عبد الملك الثاري يعرف كل لغة على حدة:
    http://www.tech-wd.com/wd/2009/05/04/css-and-xhtml-1/
    أيضا هذه صفحة في موقع w3schools تبرز الفرق بينهما:
    http://www.w3schools.com/XHTML/xhtml_html.asp
    ما أحببت الإشارة إليه هو أن ما أعرفه أن لغة XHTML جاءت بعد HTML لأنها مبنية عليها وهذا أمر طبيعي، فلربما هذا ما جعلك تقول أنها آخر نسخة من HTML حتى لا تعقد الأمور على الإخوة الجدد ^_^
    شكرا لك أخي العزيز عمران وعذرا على طول اللسان ^_^
    مني لك أرق تحية..

    بواسطة عبد الهادي في يونيو 14, 2009

  13. أهلا بجميع الإخوة

    @someone
    أهلا بك أختي، إن شاء الله تكون الأمور ميسرة، تم الرد في الموضوع لعله يساعدك

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

    نعود للموضوع، خلال بحثي اختلط علي الأمر كذلك، لكن بعد أن وقعت عيني على ما قاله المطور Jon Duckett في كتابه Accessible XHTML and CSS Web Sites Problem – Design – Solution

    ذكر ما يلي:

    Reformulating HTML in XML would prepare the language for the next decade and beyond. Therefore, to reflect the change, rather than release HTML 5.0, the W3C decided to highlight the new family of documents by calling it XHTML (rather like Microsoft released Windows XP instead of Windows 2003, or Macromedia released Dreamweaver MX instead of Dreamweaver 6).

    ومعنى هذا أن النسخة الخامسة من html هي نفسها xHtml تماما كما أن النسخة 2003 من ويندوز هي xp

    وعل أية حال فالموضوع برمته متعلق بدعم xml في ملفات html وهذا أمر أصبح من أركان التطوير والتصميم لذلك فلا أحد سيعود ل html بعد xhtml

    شكرا جزيلا أستاذي :)

    بواسطة عمران عماري في يونيو 14, 2009

  14. العفو أخي العزيز عمران، ففي الحقيقة ربما ما كنت لأعرف إضافتك الرائعة تلك لو لم أبد ملاحظتي، وهي إضافة جوهرية برأيي حبذا لو تضاف لصلب الموضوع، لأنه ليس كل من يتساءل مع نفسه يعبر عن ذلك في تعليق، بل هناك من قد يعتقدك مخطئا في الأمر مع أنني أرى الآن أن الحق معك من خلال الدليل الذي استقيته..
    شكرا لك مجددا وجزاك الله عنا كل خير..
    مني لك أرق تحية..

    بواسطة عبد الهادي في يونيو 14, 2009

  15. ما يميز ال HTML برأيي هو عدم حاجتها لأمكانيات أخرى سوى النوتباد أو ماشابهه من البرامج

    بواسطة Ahmad . M . G في يونيو 15, 2009

  16. رائع .. رائع بحق..

    ماشاء الله ..
    مدونتك تفتح النفس ياخي :D

    احترامي، وإلى المزيد من التقدم..

    بواسطة WhisperiN في يونيو 15, 2009

  17. أستاذ عمران
    جزاك الله خيراً على هذه الدورة القيمة ، وجعلها الله فى ميزان حسناتك بإذن الله

    بواسطة المعتصم بالله في يونيو 15, 2009

  18. استاذ عمران أنت قلت للأخ عبدالهادي :الموضوع برمته متعلق بدعم xml في ملفات html وهذا أمر أصبح من أركان التطوير والتصميم لذلك فلا أحد سيعود ل html بعد xhtml أنا اتفق معك تماماً لكني للأسف وحتى اللحظة لا أعرف ماهي الxml بالضبط ؟ وأي لغة تشبه هل هي تتبع الcss & xhtml أم هي أشبه بالجافا سكربت وال php. وشكراً لك مجدداً.

    بواسطة someone في يونيو 15, 2009

  19. شكرا اخي عمران على الشرح الرائع

    تحياتي لك يعطيك الف عافيه يارب

    اخوك محمود قنديل

    بواسطة Master Of Love في يونيو 15, 2009

  20. @someone
    أختي، لا تشغلي بالك كثيرا بلغة xml فهي لن تعرقل طريقنا أبدا إطمئني، فقط أعطيك مثالا بسيطا من دعمها في html
    فيما قبل لنكتب الفقرة نكتب الوسم p دون إغلاقه فقط بداية الوسم
    في xHtml نقوم بإغلاق الوسم.
    الأمر بسيط ولا داعي لنتوغل في حقل xml فلن نخرج منه أبدا إن دخلنا :)

    بواسطة عمران عماري في يونيو 15, 2009

  21. فقط مرور سريع وبإذن الله سوف نقعد له قعده بعد الاختبارات ^_^

    تحياتي

    بواسطة محمد القرني في يونيو 15, 2009

  22. استاذ عمران ، الحين ال xhtml هي نفسها الxml لأني من خلال معرفتي بهاللغات تعلمت بالبداية ال html بعدها عرفت أن هذه اللغة بدأت بالانقراض تقريباً واصبحت أركز على xhtml والي هي مثل ماذكرت نوعاً ما الإصدار الأخير من الhtml والفرق بينهم في أنو نكتب الأوامر في الxhtml بالسمول ليتر ولازم نغلق كل الوسوم ولها طريقة معينة في الترتيب في حال تداخل الوسوم والي فهمته من كلامك الآن أن الxhtml هي نفسها الxml إذا كانت هي فلا داعي للتوغل لأني متوغلة من زمان وخالصة :) …

    بواسطة someone في يونيو 15, 2009

  23. أشكرك أخي عمران على الشرح الأكثر من رائع

    لدي إستفسار مهم:

    قررت بعون الله أن أنطلق في عالم لغات الويب و البرمجة بيها

    و قررت البدء بلغة الـ HTML لأنها حسب معرفتي البسيطة أنها ستكون الأساس الأفضل للتكملة و من ثم الإنتقال للـ XHTML و الـ CSS
    فهل هذا قرار صائب أم هناك نصيحة لديك إن شاء الله تكون عوناً لي في هذا المشوار ؟

    أيضاً: أنا بدأت بالتعلم من خلال موقع http://www.w3schools.com و بالطبع بدأت بالـ HTML. فهل برأيك هذا أفضل موقع ممكن التعلم منه و ما هي الكتاب التي تنصحني بيها للإستزادة الكاملة في كل شئ عن الـ HTML و الـ XHTML؟

    هذا الموقع http://www.ebooksdownloadfree.com/HTML/Free-HTML-Books-CI21P0.html

    فيه الكثير من الكتب و قمت بتنزيل أغلبها من كل الصفحات و لكن كالعادة أجمعهم و لا أعرف بأيهم أبدأ :D ؟

    أتمنى أن أعرف نصيحتك…

    جزاك الله خيراً

    بواسطة أنس الشامي في يونيو 15, 2009

  24. الله يبارك فيك:)

    بواسطة سعود في يونيو 15, 2009

  25. لا يخلو كتاب من فائدة أخي، لكن عليك الإنطلاق من الأساسيات من خلال موقع بسيط، لأن هذه الكتب عادة تكون دسمة، والتوجه إليها مباشرة قد يرهق الفهم
    إبدأ مباشرة ب xhtml ولا تلتفت للhtml ثم css وبعض تقنيات الجافاسكريبت من بعدها

    بواسطة عمران عماري في يونيو 15, 2009

  26. أنا فعلاً وضعتها جانباً أخي الكريم

    لكن المشكلة أخي الكريم بعد الإنتهاء من الأساسيات مثل التي في موقع w3schools هو كيف أنطلق في مسيرة الإحتراف ؟

    يعني أي الكتب قد يكون شاملاً و مجملاً لمعظم الأشياء بحيث أستطيع التركيز فيه و فهم معظم الاشياء ؟

    بالنسبة للـ XHTML

    فهل ينفع الإنتقال إليها حتى لو لم يكن لدي أدني معرفة بالـ HTML حيث أنني أنا أخاف أن يكون المواقع التي تشرحها مجرد تشرح الإختلافات و فيما تختلف عن الـ HTML بدون وجود شرح كامل ؟
    و ايضاً لو إنتقلت إليها فهل تنصحني بالإستمرار في موقع الـ W3Schools ام برأيك هناك مواقع أفضل منه ؟

    جزاكم الله خيراً

    بواسطة أنس الشامي في يونيو 15, 2009

  27. شرح كاف و واف أخي عمران
    تعلمت أشياء جديدة كثيرة لم أكن على علم بها
    شكرا جزيلا

    بواسطة صلاح الدين في يونيو 15, 2009

  28. يااا الله كل هذا
    أسميني صدعت
    وايد صعب
    الله يكون فى عوني
    بحاول أقراه مره ثانيه وثالثه يمكن أفهم شي
    من جد
    ميييييييييييح

    أختكم
    ساره
    روز

    بواسطة Sarah Rose في يونيو 15, 2009

  29. لقد تم التطبيق بنجاح

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

    بواسطة مدونة الصقر في يونيو 15, 2009

  30. مساء الخير
    الحمدلله تم تطبيق الدرس بخذافيره
    وطلع أوكي تماااااام
    فى غلطه سويتها بدل ما أكتب L كنت اكتب رقم واحد
    يتشابهون فى الكتابه
    تم تعديل والتغيير
    وطلع أوكي
    شكلي بفلح
    مشكور أخوي عمران
    فى أمان الله
    أختك
    ساره روز

    بواسطة Sarah Rose في يونيو 16, 2009

  31. ما شاء الله
    افضل من دكتورنا في الجامعة
    الله يعطيك اللف عافية

    اتمنى لك كل التوفيق في هذة الدنيا وفي الآخرة
    ومن هذا الى اكبر مصمم مواقع ان شاء الله

    بواسطة alnassre في يونيو 26, 2009

  32. بارك الله فيكم اخي عمران مجهود مبارك
    من هذا المشاركة سوف أبدا في المتابعة بجد حيث ان معرفتي بما سبق كانت جيده بصراحة موقع http://www.htmldog.com
    اكثر من رائع وكنت أبحث عن موقع يقدم نفس الخدمة من فترة طويلة
    بارك الله فيكم و الحمد لله رب العالين

    بواسطة أبو نور في يونيو 27, 2009

  33. للاسف موقع فلكر محجوب في الامارات و لم تظهر اغلب الصور في الموقع.

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

    شكراً

    بواسطة مرشد في يونيو 30, 2009

  34. مشكور أخوي على هالترتيب الرائع وأن شاء الله راح أخلي هالمدونه الصفحه الرئيسيه لأني بجد ودي أتعلم هاللغات المهمه

    بواسطة ناصر الميزاني في أغسطس 10, 2009

  35. ربي يخليك شرح رائع ليا عوده بفهم هاللغه .. وباين على شرحك مفصل ..
    ماشالله ربي يزيد من امثالك يارب .. حقآ العلم نور والجهل ضلام ..
    وانتم بدورتكم ذي اجربتوني على ان اتابع .. تم الاضافه لمفضلتي وللمدونه ..

    بواسطة abdulmajid في سبتمبر 14, 2009

  1. 2 التنبيهات

  2. يونيو 23, 2009: دورة قوالب ووردبريس: css و xhtml الجزء الأول « فـــادي نـــت
  3. يونيو 30, 2009: رأس الصفحة في قوالب ووردبريس

ارسال تعليق

ووردبريس باون مشغّل بواسطة WordPress التدوينات (RSS) و التعليقات (RSS). القالب بواسطة Bob | تطوير : صالح المطرفي