أهلا وسهلا بك عزيزي الزائر في المدونة التعليمية للحاسوب فما رأيك بالقالب الجديد؟؟

دورة الـ html الدرس الثاني : أهم الدروس "العناصر والوسوم" أساسيات الــ html

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

الآن أنت جاهز لتعلم جوهر لغة HTML وهي العناصر.

العناصر تعطي لوثائق HTML هيكلية محددة وتخبر المتصفح عن كيفية عرض الصفحة، بشكل عام العناصر عبارة عن وسم "tag" للبداية ثم بعض المحتويات ثم وسم الإغلاق.

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

الدرس الثاني : أهم الدروس "العناصر والوسوم" أساسيات الــ 



فهي أساس ومبدأ الــ HTML

ملحوظة مهم قبل البدأ


أولا قبل ما نيدأ قوم بتحميل برنامج NotePad ++
فهو سيسهل عليك عمليات أكثر من المحرر العادي الخاص بالويندوز
ولتجربة ما تعلمته

ادخل للمحرر إضغط Ctrl+N
لإنشاء مستند نصي ثم احفطه عبر
Enregister sous....
ثم اختر الحفظ بامتداد
.html
أو
.htm
المهم أن يكون بالإمتدادين فوق فهما متشابهان وليس بهم أي فرق
وقم يتسميته لأي إسم تريد وأنا أفضل
 index.html

 واللذي لم يفهم هذا الشرح الخاص بعمل ملف index فل يذكر ذللك بتعليق وبدون خجل

فمن يخجل لن يتعلم أي شيئ في حياته حتى ولو كان ذلك الشيء بسيطا جدا جدا

الآن لنبدأ على بركة الله

"وسوم"؟

الوسوم هي توصيفات تستخدمها لكي تضعها في بداية العنصر وعند نهايته.
كل الوسوم لها نفس نفس الشكل، تبدأ مع علامة أصغر من "<" وتنتهي مع علامة أكبر من ">".
بشكل عام هناك نوعان من الوسوم، وسم البداية: <html> ثم وسم الإغلاق </html>. الفرق بين الإثنين هي علامة "/"، توصيف المحتويات يكون بوضعها بين وسم البداية ووسم الإغلاق.
لغة HTML تتكون من هذه العناصر، لكي تتعلم HTML عليك أن تتعلم وتستخدم وسوماً مختلفة.

هل يمكنك أن تريني بعض الأمثلة؟

حسناً، العنصر em يشدد النص "يجعله مائلاً" وكل النصوص بين وسم البداية <em> ووسم الإغلاق </em> ستظهر بشكل مائل في المتصفح. ("em" هي اختصار "emphasis".)

المثال 1:

<em>نص مائل.</em>
 
سيظهر بهذا الشكل في المتصفح:
نص مائل.
العناصر h1، h2، h3، h4، h5 وh6 تستخدم للعناوين (حرف h هو اختصار "heading"), حيث h1 هو المستوى الأول من العناوين وبالتالي الأكبر حجماً، h2 يستخدم للمستوى الثاني من العناوين وهو أصغر حجماً بقليل، وh6 هو المستوى السادس والأخير من هيكلية العناوين وهو الأصغر.

مثال 2:

<h1>هذا عنوان</h1>
<h2>هذا عنوان فرعي</h2>
 
ستظهر بهذا الشكل في المتصفح:

هذا عنوان

هذا عنوان فرعي

هل أنا بحاجة دائماً إلى استخدام وسم بداية ووسم إغلاق؟

كما يقولون، هناك استثناء من كل قاعدة، والاستثناء في HTML هو وجود عناصر تعتبر هي وسم البداية ووسم الإغلاق في نفس الوقت، وهي تسمى العناصر الفارغة لأنها غير مرتبطة بنص معين لكنها عناصر مستقلة تماماً، فمثلاً هناك وسم لكي لكسر النص وإجباره على الظهور في سطر جديد، هذا الوسم يظهر بهذا الشكل: <br />.

هل تكتب الوسوم بأحرف كبيرة أم صغيرة؟

معظم المتصفحات لن تهتم إذا كتبت الوسوم بأحرف كبيرة أو صغيرة أو خليط بين الإثنين، <HTML>، <html> أو <HtMl> كلها ستعطي نفس النتائج، مع ذلك الأسلوب الصحيح هو كتابة الوسوم بالأحرف الصغيرة، لذلك عليك أن تعتاد على كتابة الوسوم بالأحرف الصغيرة.

أين أضع كل هذه الوسوم؟

أكتب الوسوم في وثيقة HTML، المواقع تحوي وثيقة HTML أو أكثر، عندما تتصفح شبكة الويب أنت فقط تقوم بفتح وثائق HTML مختلفة.
إذا انتقلت إلى الدرس اللاحق ستتمكن من إنشاء موقعك خلال عشر دقائق.

كما قلت التجربة هي مفتاح التعلم لذلك

وأي استفسار أنا موجود

الدرس السابق  الدرس التالي 

آخر مقالات المدونة

هناك 4 تعليقات:

  1. اخي اسامه الحقيقه ماقهمت طريقه عمل ملف index

    ردحذف
  2. قم بتحميل برنامج
    Notepad++
    ثم أنشئ ملف .txt قم بتغيير الإمتداد للـ .html
    ثم قم بالبدئ في هيكلة موقعك والملف سيكون إسمه
    index.html

    ردحذف
  3. جزاك الله خير ... انتظر منك الكثير

    ردحذف
  4. شكرآ لك على ما تبذله من مجهود ، وفقك الله

    ردحذف

إذا أردت عزيزي الزائر إدراج فيديو من يوتوب بتعليق قم بالتالي
[youtube]رابط فيديو يوتوب هنا[/youtube]
كما يمكنك إدراج صورة عبر الكود التالي
[img]رابط صورتك هنا[/img]

جميع الحقوق محفوظة لمدونة المدونة التعليمية للكومبيوتر 2013

تصميم : بويردن