تعلم ( العلامات tags ) للغة html - ( الدرس الاول )

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

* تمهيد *

عناصر الـ HTML

ملفات HTML هي ملفات نصية مكونة من مكونات HTML. مكونات الـ HTML تحدد وسوم HTML المستخدمة.

وسوم HTML

* وسوم HTML تستخدم لتعليم مكونات الـ HTML.
* وسوم الـ HTML يتم أحاطتها برمزين هما < و > .
* نمازج المحيطة بكود الـ HTML، تدعى أقواس الفئة.
* وسوم الـ HTML العادية تكتب على نحو مزدوج كما بالشكل الأتي:

ذلك هو شكل الوسم

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

مكونات الـ HTML

بالرجوع للمثال الذي درسناه في الفصل الماضي:

<html>

<head>

<title>عنوان الصفحة</title>

</head>

<body>

هذه هي أول صفحة نقوم بتصميمها. <b>ما رأيكم في هذا النص العريض ؟</b>

</body>

</html>

هذا هو عنصر الـ HTML:

<b>ما رأيكم في هذا النص العريض ؟</b>

عنصر الـ HTML يبدأ مع وسم البداية <b> ثم محتويات عنصر الـ HTML و هي في ذلك المثال " ما رأيكم في هذا النص العريض ؟ " ثم إغلاق الوسم بوسم الإغلاق </b>.

الغرض من الوسم <b> هو تحديد عنصر الـ HTML الواجب عرضه كنص عريض.
و هذا أيضاً يعد عنصر HTML:

<body>

هذه هي أول صفحة نقوم بتصميمها. <b>ما رأيكم في هذا النص العريض ؟</b>

</body>

ذلك العنصر يبدأ مع وسم الطليعة و ينتهي مع وسم الخاتمة .

الغاية من ذلك الوسم تحديد مكونات الـ HTML المتواجدة داخل جسد ملف الـ HTML .

لماذا نستخدم الحروف الضئيلة في الوسوم؟

منذ دقائق معدودة قلنا أن وسوم HTML غير حساسة لحالة الأحرف و ذلك يجعل الوسم يقصد ذاته الوسم .
و نحو تصفحك للمواقع العديدة التي تقوم بتفسير دروس الـ HTML سوف تلمح أن غالبية هذه المواقع تستخدم الحروف الهائلة لكتابة وسوم الـ HTML في تفسير أمثلتها... و قد تتساءل لماذا نستخدم نحن الحروف الضئيلة؟
الإجابة طفيفة للغايةً... و هو إذا كنت ترغب في أن تجهز نفسك و تعدها لأن تتعامل مع الأجيال المقبلة من HTML يلزم عليك أن تستخدم الحروف الضئيلة للوسوم.
فجمعية World Wide Web Consortium " W3C " توصي باستعمال الحروف الضئيلة في كتابة الوسوم ضمن توصياتها لـ HTML 4 و إصدارة XHTML تحتاج استعمال الحروف الضئيلة.

ملامح الوسم

الوسوم من الممكن أن تتضمن على ملامح، هذه الملامح تزودنا بمعلومات إضافية بشأن مكونات الـ HTML في صفحتك.

الوسم الذي يحدد عنصر الجسد في صفحتك هو: الوسم . و بإلحاق الملمح bgcolor يمكنها أن تخبر المتصفح أن لون الخلفية لصفحتك هو اللون الأحمر كما بالمثال الأتي:

<body bgcolor="red">

الوسم الذي يحدد الجداول في ملف الـ HTML هو: الوسم <table>. و بإضافة السمة border يمكنك أن تخبر المتصفح أن هذا الجدول بدون حدود كما بالمثال التالي:

<table border="0">

الملامح باستمرارً تأتي على شكل أسم أو مقدار و سواء كانت أسم أو مقدار فكلاهما تأخذ الشكل الأتي:

name="value"

السمات دائماً يتم إضافتها في وسم البداية لعنصر الـ HTML.

شكل الاقواس :

مقدار الملمح باستمرارً يلزم أحاطتها بأقواس الاقتباس " إشارات التنصيص " أقواس الاقتباس المزدوجة هي الأكثر شيوعاً... و إلا أن ذلك لا يمنع استعمال الأقواس المفردة.

في بعض الحالات النادرة مثل أن تكون مقدار الملمح تتضمن على علامة اقتباس يكون من اللازم استعمال إشارات الاقتباس المفردة.

الان بداية الدرس : تعلم العلامات او الوسوم html

وسوم HTML الرئيسية

الوسوم الأهم في لغة الـ HTML هي الوسوم التي تحدد العناوين و الفقرات و فواصل الأسطر.

أفضل كيفية لتعلم الـ HTML يكون بواسطة الأمثلة ... لقد قمنا بوضع أكثر من 100 مثال في ذلك المنهج تَستطيع نقل هذه الأمثلة إلى جهازك و تحديثها لتشاهد التأثيرات على أسلوب عرض الصفحة، لاشك أنها أسلوب جيدة للتعلم.

العناوين

يتم تحديد العناوين عن طريق الوسوم من إلى ، حيث يعد الوسم هو أضخم مقاس للعنوان في حين نجد أن الوسم هو أصغر مقاس للعناوين ، كما يظهر من الكود الأتي:

<h1>عنوان 1</h1>

<h2>عنوان 2</h2>

<h3>عنوان 3</h3>

<h4>عنوان 4</h4>

<h5>عنوان 5</h5>

<h6>عنوان 6</h6>

و بواسطة الوسم نجد أن العناوين في الـ HTML تقوم بأسلوب آلية بإلحاق سطر فارغ قبل و عقب العنوان.

الفقرات

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

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

<p>الحمد لله رب العالمين</p>

و عن طريق الوسم نجد أن الـ HTML تقوم بأسلوب آلية بإلحاق سطر فارغ قبل و عقب البند.

من أول السطر

يستعمل الوسم في وضعية الرغبة في إتمام السطر القائم ، و بالبدء من أول السطر و إلا أن دون طليعة بند حديثة ،

<p>This <br> is a para<br>graph with line breaks</p>

لاحظ أن:

الوسم لا يتطلب إلى وسم إقفال مثل الوسوم الأخرى.

الملاحظات والتعليقات داخل ملفات HTML

يستعمل وسم التعليقات <-- --!> لإدارج تعليقات داخل أكواد HTML ، هذه الملاحظات سيتم تجاهلها من قبل المتصفح بمعنى أنها لن تبدو خلال عرض الصفحات.

تَستطيع استعمال التعليقات أو الملاحظات لتفسير الكود لو كان هناك من يساعدك في تحرير صفحات الـ HTML ، أو لتذكرك بفعل الكود إذا أردت الرجوع إليه عقب مرحلة.

لاحظ أن:

ضع في اعتبارك وضع علامة الدهشة في مطلع الكود ، كما أنه لا يلزم وضعها في عاقبة الكود .

لا حظ أن " بيانات نافعة / معلومات مفيدة "

عندما تقوم بكتابة مقال HTML ، فلن تكون متأكداً من الطريقة التي سوف يتم عرض المقال بها في المتصفح.

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

يقوم الـ HTML باقتطاع المسافات المتواجدة في المقال ... أي عدد للمسافات سوف يعد مسافة واحدة ... و أيضاً سيتم اعتبار السطر الحديث مسافة واحدة.

من الطقوس السيئة استعمال فقرات فارغة لإدراج أسطر فارغة ... استخدم الوسم ( إلا أن لا تستخدمه لتأسيس كشوف انتظر حتى تتعلم " الكشوف في HTML " ) من الممكن أن تكون لاحظت أنه يمكن كتابة الفقرات دون وسم الخاتمة " وسم الإغلاق " .

الإنتاج الآتي من HTML لن يتيح لك بترك وسم الإغلاق ... يضيف الـ HTML تلقائياً سطراً فارغاً إضافياً قبل و عقب بعض المكونات مثل قبل و عقب البند و العنوان ... نحن نستخدم المسطرة الأفقية ( عن طريق الوسم ) لفصل الأقسام في المثال المذكور.

وسوم HTML الرئيسية

Tag	Description
<html>	هذا الوسم يحدد أن الملف المستخدم هو ملف HTML
<body>	هذا الوسم يحدد منطقة جسم الملف
<h1> to <h6>	لتحديد مقاس العنوان من 1 إلى 6
<p>	لتحديد الفقرات
<br>	لتحديد بداية سطر جديد
<hr>	لعرض خط أفقي
<!--->	للتعليقات و الملاحظات

تصميم, تقنية, جميع المنشورات, كورسات, html