HTML - mahmuod salah

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

<note tip>ألم تتصفح صفحة إنترنت من قبل وتتساءل متعجباً: “كيف فعلوا هذا؟”

يمكنك التعرف على الطريقة التي تمت كتابة الصفحة بها بواسطة الضغط بالزر الأيمن على أي مكان فارغ بالصفحة ثم تختار إعرض مصدر الصفحة (ثعلب النار FireFox) -أو ما يشبهها في المتصفحات الأخرى- من القائمة المنسدلة وستظهر لك نافذة تحوى كود الصفحة.</note>

مرحبا، يا عالم!

أنشئ ملفا نصيا صرفا وضع فيه ما يلي:

<html>

<body>

<h١>Hello, world!</h١>

</body>

</html>

احفظ الملف باسم hello١.html ثم استخدم متصفح إنترنت لعرض الملف.

ستلاحظ ظهور عبارة Hello, world! في شاشة المتصفح فقط.

عدل الملف ليصبح كما في المثال التالي ثم احفظه باسم hello٢.html

<html>

<h١>مرحبا، يا عالم!</h١>

</body>

</html>

لاحظ ظهور “مرحبا، يا عالم!” على شاشة المتصفح

العلامات الخاصة

كما لاحظت في المثالين السابقين أن هناك علامات تسمى وسوم أو رواقم توسم بها أجزاء من النص. هذه الوسوم تكون عبارة عن اسم الوسم محاط بأقواس زاوية، أي أنها تكون بين علامتي أصغر وأكبر، هكذا <h١> كما في هذا المثال:

<h١>مرحبا، يا عالم!</h١>

العلامة <h١> تسم كل نص بعدها إلى أن يتم إغلاقها بنفس الوسم مسبوقابعلامة / قبل اسم الوسم داخل الأقواس الزاوية.

أما الوسوم التي ليس لها محتويات فتغلق بوضع / التي تغلقها على نفس الوسم هكذا

هذا الوسم img لم يأخذ محتوى لكنه أخذ صفات attributes وقيم مقابلة لها في المثال أعلاه كانت الصفة src قيمتها myimage.jpg والتي هي اسم ملف الصورة.

الوسوم المتداخلة

إذا جاء وسمان متداخلان يجب إغلاق الوسم الداخلي أولا حتى لا يحدث تشابك مثلا

<b><i>هذا نص ثخين ومائل</i></b>

الوسوم الأساسية Tags

إن الوسم الأساسي الجذري في ملف html هو html! والفرع الذي يحتوي النص الغني المعروض هو المتن body وداخلهما تأتي العناوين أو التبويبيات h١ ثم التي أصغر منها h٢ وهكذا حتى h٦. في كل باب يمكنك وضع عدة فقرات والفقرة نحصرها بالوسم p

<html>

<body>

<h١>الكتاب الأول</h١>

<h٢>الباب الأول</h٢>

<a href="http://ojuba.org/">هذا رابط لموقع أعجوبة</a>

<img src="http://www.ojuba.org/wiki/lib/tpl/arctic/images/ojuba.png" /> وهذه صورة.

<h٣>الفصل الأول من الباب الأول</h٣>

<h٣>الفصل الثاني من الباب الأول</h٣>

<h٢>الباب الثاني</h٢>

<h٢>الباب الثالث</h٢>

</body>

</html>

من الكود السابق يتضح ما يلي:

الوسم <html>: يستخدم هذا الوسم في بداية ونهاية جميع الصفحات التي تستخدم لغة HTML وهو الوسم الجذر Root.

الوسم <body>: يستخدم ليحيط متن الصفحة الذي يتم عرضه ولا يعرض على الصفحة إلا ما أحاط به هذا الوسم وإغلاقه.

الوسم <h١>: يستخدم هذا الوسم كتبويب لعنونة الفقرات حسب الترتيب الشجري وكما نرى في المثال فقد تم استخدامه في عنونة الصفحة، كما تم تغيير الرقم ١ إلى ٢ للحصول على حجم أصغر لفقرة فرعية ثم ٣ لحجم أصغر وهكذا، فيمكنك اختيار أي رقم من ١ إلى ٦ لتغيير الحجم لكل عنوان؛ وتستخدمها محركات البحث لتصنيف الصفحة وتقسيمها.

الوسم <p>: يستخدم لتحديد الفقرات ويفصل بينها بسطر فارغ.

الوسم <a>: يستخدم للروابط التشعبية التي تنقلك من صفحة إلى صفحة أو حتى إلى مكان معين في ذات الصفحة (سيأتي شرحه لاحقاُ).

طريقة إغلاق الوسم: نلاحظ أن كل وسم من الوسوم السابقة له وسم إغلاق وذلك بإضافة علامة القسمة قبل اسم الوسم مثل: </html>، وهناك بعض الوسوم التي ليس لها وسوم إغلاق منفصلة مثل: <img> الذي يغلق بوضع علامة القسمة في آخره قبل قوس الزاوية.

الصفات: استخدمنا في المثال الصفة: href الخاصة بالوسم a وذلك لتحديد عنوان الصفحة عبر الإنترنت (سيأتي شرح الصفات لاحقاً).

<note>توصي W٣C باستخدام أحرف إنكليزية صغيرة Small or LowerCase سواءاً في الوسوم أو الصفات </note>

الصفات Attributes

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

تتكون تلك الصفات من زوج من الأسماء والقيم يفصل بينهما علامة الإسناد “=” ويحيط الصفة علامات تنصيص كما في المثال التالي:

<a href="http://ojuba.org/"> بوابة أعجوبة </a>

<note tip>إذا كانت قيمة الصفة تحتوي على علامات تنصيص مزدوحة فعليك أن تبدل علامة التنصيص المحيطة بالقيمة من المزدوجة إلى المفردة والعكس صحيح.</note>

<note>توصي W٣C باستخدام أحرف إنكليزية صغيرة Small or LowerCase سواءاً في الوسوم أو الصفات </note>

التخطي escaping والكيانات entities

بما أن القوسين الزاويين < > يستخدمان في وسم النص فلا يجوز أن يستخدما كجزء من النص الموسوم فإن احتجت لهما عليك استخدام الرمزان < و > على الترتيب

<pre>

if a < b: print "a is less than b"

if a > b: print "a is greater than b"

</pre>

وهذا يظهر في المتصفح هكذا

if a < b: print "a is less than b"

if a > b: print "a is greater than b"

وحيث أن & استخدمت فهي أيضا رمز خاص يجب تخطيه وذلك بالرمز & هكذا

if (a && b) {echo "a and b is Ture"}

والذي يظهر هكذا في المتصفح

if (a && b) {echo "a and b is Ture"}

وفي أغلب وسوم html فإنه يتم تسوية كل الفراغات (المسافات وعلامات الجدولة والأسطر الجديدة) إلى مسافة واحدة باستثناء الوسم pre أي pre-formatted text أي نص منسق مسبقا بواسطة المسافات وعلامات الجدولة والأسطر الجديدة.

لذا فإنه يلزمك إحاطة كل فقرة داخل وسم p أي paragraph حتى يتم عرض سطر جديد بعدها. ويمكنك استخدام الوسم خال المحتويات br أي break line لوضع سطر جديد دون بدء فقرة جديدة.

أما المسافات فيمكنك إدراجها من خلال   والتي هي اختصار ل non-breaking space لاحظ كيف تستخدم

[]<br/>

[    ]<br/>

والذي يظهر هكذا في المتصفح

[]

[ ]

تسمى طريقة إدراج شيء من خلال اسم بين & و ; الكيانات. وقد ذكرنا إلى الآن أربعة منها وهي

gt أي greater than وهي علامة أكبر

lt أي less than وهي علامة أصغر

amp أي وهي علامة &

nbsp أي non-breaking space وهي مسافة

وهناك غيرها الكثير.

وليس بالضرورة أن تكون الكيانات تمثل محرف واحد بل يمكنها أن تحتوي ملفات خارجية بكاملها (لن نخوض في ذلك الآن، للمزيد ابحث عن xml entities في محرك البحث)

كذلك يمكن إدراج محرف ما من خلال رقمه في جدول يونيكود

وسوم HTML

العناوين

تستطيع تقسيم صفحتك باستخدام وسم العناوين <h> والذي يتدرج من الوسم <h١> وهو الأكبر حجماً ويستخدم في الفقرة الرئيسية (عنوان الصفحة مثلاً) إلى الوسم <h٦> وهو الوسم الأصغر حجماً، لاحظ أيضاً أن المتصفحات تضيف سطراً فارغاً قبل وبعد وسم العنوان.

مثال:

<h١> بدهيات HTML </h١>

<h٢>مقدمة</h٢>

<h٣>فقرة فرعية من مقدمة</h٣>

فائدة العناوين:

تستخدم محركات البحث وسوم العناوين لفهرسة الصفحة والتعرف على بناءها.

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

<note warning>لا تستخدم وسوم العناوين لتحديد نص ما على أنه كبير أو ثخين.</note>

الفواصل

يمكنك الفصل بين محتويات صفحتك باستخدام وسم الفاصل الأفقي <hr /> الذي يدرج خطاً أفقياً فاصلاً وذلك كما بالمثال التالي:

<hr />

<hr />

<p> هذه فقرة ثالثة. </p>

<note>نلاحظ أن وسم الفاصل الأفقي ليس له وسم إغلاق لذلك أغلقناه بوضع علامة القسمة / في آخر وسم البداية ذاته.</note>

التعليقات

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

تكتب التعليقات بفتح وسم زاوية يعقبه علامة تعجب ثم علامتي – يليها التعليق ثم علامتي – مرة أخرى ثم يغلق بقوس زاوي مقابل كما في المثال التالي:

الفقرات

توسم الفقرات بالوسم <p> ويقوم المتصفح تلقائياً بإضافة سطر فارغ بين كل فقرة وأخرى.

مثال:

<note warning>لا تنسى وسوم الإغلاق في نهاية كل وسم فالإصدارة القادمة من HTML لن تسمح لك بتجاهل وسوم الإغلاق.</note>

السطور الجديدة

إذا أردت أن تبدأ سطراً جديداً دون بدأ فقرة جديدة فما عليك سوى إستخدام الوسم <br /> كما في المثال التالي:

<p> السطر الأول <br /> السطر الثاني <br /> السطر الثالث </p>

تنسيق النصوص

تستخدم وسوم التنسيق لتنسيق النصوص لجعل بعض النصوص ثخينة أو مائلة وهكذا.

هذا المثال يوضح معظم وسوم تنسيق النصوص المتوفرة في HTML وعليك فقط أن تجرب وترى النتائج بنفسك:

<p>هذا نص <sub>منخفض</sub> وذاك نص <sup>مرتفع</sup></p>

كتبه موقع أعجوبة<br />

<a href="mailto:[email protected]">راسلنا</a><br />

العنوان: الزرقاء، الأردن<br />

الهاتف: 12345679

</address>

<p>من إنتاج شركة فلان <abbr title="شركة مساهمة مصرية">ش.م.م.</abbr>

التي أسست عام 1948.</p>

<p>من إنتاج<acronym title="جمهورية مصر العربية">ج.م.ع.</acronym></p>

إقتباس طويل:

هذا إقتباس طويل. هذا إقتباس طويل. هذا إقتباس طويل. هذا إقتباس طويل.هذا إقتباس طويل. هذا إقتباس طويل. هذا إقتباس طويل. هذا إقتباس طويل. هذا إقتباس طويل. هذا إقتباس طويل.

</blockquote>

<p><b>لاحظ:</b> يدرج المتصفح مسافات بيضاء قبل وبعد عنصر الإقتباس كما يدخل هوامشاً.</p>

إقتباس قصير:

<q>هذا إقتباس قصير.</q>

<p><b>لاحظ أن المتصفح يدرج علامات تنصيص مزدوجة حول الإقتباس القصير (لا يعمل هذا في IE).</b></p>

<p>هذا نص <del>محذوف</del> <ins>وهذا مدرج</ins>!</p>

<note>لاحظ أن هذه التنسيقات توصف النص ولا تعدل خصائص عرضه (اللون، الحجم، الخط … إلخ) بينما تعديل خصائص الشكل تتعلق بملفات العرض CSS والتي سنتعرض لها في آخر الوثيقة.</note>

الروابط التشعبية

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

<note>حينما تمرر مؤشر الفأرة فوق أحد الروابط التشعبية سيتحول شكله من السهم إلى يد صغيرة.</note>

نضيف الروابط التشعبية في صفحة HTML بالوسم <a> وذلك بطريقتين:

باستخدام الصفة href لإنشاء روابط خارجية.

باستخدام الصفة name لإنشاء روابط داخلية لعلامات أو مراسي في ذات الصفحة.

الروابط الخارجية

يمكن عمل رابط إلى http://www.ojuba.org مثلا ويكون النص الظاهر فيه هو عبارة “انقر هنا” هكذا

الروابط النسبية

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

<a href="page٢.html">الصفحة الثانية</a>

هذا الكود السابق يظهر عبارة “الصفحة الثانية” وتكون عبارة عن رابط إذا نقرنا عليه نذهب للملف page٢.html في نفس المجلد.

ويمكن استعمال مسارات أعقد هكذا

<a href="subproject/page٢.html">الصفحة الثانية من مشروع فرعي</a>

<a href="../other/project/page٢.html">الصفحة الثانية من مشروع آخر</a>

فالأول يحيل إلى page٢.html داخل مجلد subproject الموجود في داخل المجلد الذي توجد فيه الصفحة الحالية. والثاني يحيل إلى page٢.html في project الموجود داخل other الموجود داخل المجلد الوالد للمجلد الذي فيه الصفحة الحالية.

فتح الرابط في صفحة جديدة

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

القيمة _blank التي أعطيناها لصفة الهدف target تعني في نافذة جديدة. يمكن إعطاء أسماء للنوافذ مكان _blank عندها ستفتح أول مرة في نافذة جديدة ثم لاحقا أي رابط له نفس اسم الهدف سيفتح في تلك النافذة.

هناك استخدامات أخرى لهذه الصفحة عند العمل في طقم للأطر frame set لكن هذا خارج أهداف هذه المقالة.

الروابط الداخلية في نفس الصفحة

يمكنك تعريف مرساة داخل الصفحة من خلال الصفة name لنفس الوسم a هكذا

ثم يمكنك الإحالة لتلك النقطة داخل الصفحة من خلال # ثم قيمة الصفحة name هكذا

<a href="#top">العودة لرأس هذه الصفحة</a>

ويمكن الإحالة إلى نقطة معينة داخل صفحة خارجية أيضا هكذا

<a href="http://www.ojuba.org/#top">العودة لرأس صفحة خارجية</a>

التخطي مرة أخرى

التخطي في تعريف عناوين url مختلف حيث يكون بعلامة % ثم رقمين ست-عشريين مثلا %٢٠ تعني مسافة وغالبا لا تحتاج لعمل ذلك حيث يقوم المتصفح بعمل ذلك باستثناء ورود علامة الاقتباس أو ما شابه.

أمور عليك مراعاتها

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

استخدم شرطة مائلة عادية / كما في يونكس وليس معكوسة كما في ويندوز \.

مراعاة الترميز الحالي في العنوان

مراعاة التخطي في العنوان

عدم وضع # في بداية الصفحة name ووضعها في href

الصور

نستخدم الوسم <img> لإدراج صورة في صفحة HTML وهو وسم فارغ دون محتوى، ونستخدم الصفة src لتحديد مكان الصورة المطلوب إدراجها في الصفحة، كما نستخدم الصفة alt لإظهار نص محل الصورة حينما يتعذر عرض الصورة.

مثال:

تحجيم الصور

يمكنك التحكم بحجم الصور المدرجة في الصفحة من خلال الصفتين width للعرض و height للإرتفاع، ويكتب الحجم بالبكسلات.

مثال:

محاذاة الصور

من خلال الصفة align يمكنك محاذاة الصورة مع النص يميناً أو يساراً بالأعلى أو بالأسفل وهكذا.

مثال:

<p>صورة

مرتفعة عن السطر باستخدام الصفة align="bottom".</p>

<p>صورة

في وسط السطر باستخدام الصفة align="middle".</p>

<p>صورة

منخفضة عن السطر باستخدام الصفةalign="top".</p>

<p>

هذه فقرة يحاذيها من اليسار صورة، وذلك باستخدام الصفة align="left". ستطفو الصورة محاذية للنص يساراً.

</p>

<p>

هذه فقرة يحاذيها من اليمين صورة، وذلك باستخدام الصفة align="right". ستطفو الصورة محاذية للنص يميناً.

</p>

وهذه نتيجة المثال السابق:

خريطة الصور

تستطيع إدراج روابط تشعبية على أجزاء من صورة مدرجة في الصفحة، وذلك من خلال الوسم <map> بالإضافة إلى وسم الصورة <img>.

ويتم تحديد الموضع على الصورة من خلال الوسم <area> والصفة shape التي تحدد فيها نوع الشكل كالدائرة circle أو المستطيل rect وغيرها، والصفة coords التي تحدد موضع الشكل المراد تحديده من كامل الصورة، ويمكنك الحصول على أبعاد الشكل من أي برنامج رسم مثل: برنامج الرسام في نظام النوافذ (Windows).

مثال:

</map>

الجداول

نستخدم الوسم <table> لإدراج جداول في الصفحة، ونستخدم معه الصفة border لتحديد عرض حدود الجدول وهذه الصفة قيمتها افتراضياً صفر أي أن حدود الجدول مخفية، ونستخدم الوسم <caption> لوضع عنوان للجدول، والوسم <th> لوضع عنوان لكل حقل عمودي، ونقسم الجدول إلى صفوف أفقية باستخدام الوسم <tr>، كما نقسم الصف الواحد إلى خلايا من خلال الوسم <td>، وهذه الخلايا يمكن أن تحتوي على نصوص، عناوين، فقرات، روابط، صور، قوائم، نماذج أو حتى جداولاً أخرى.

مثال:

<caption>جدول ذو حقلين</caption>

<tr>

<th>الحقل الأول</th>

<th>الحقل الثاني</th>

</tr>

<tr>

<td>الخلية الأولى من الحقل الأول</td>

<td>الخلية الأولى من الحقل الثاني</td>

</tr>

<tr>

<td>الخلية الثانية من الحقل الأول</td>

<td>الخلية الثانية من الحقل الثاني</td>

</tr>

</table>

ونتيجة المثال السابق كالتالي:

مباعدة الخلايا وحشوها

نستطيع من خلال الصفة cellpadding التحكم في حجم المسافة الفارغة التي تفصل وتباعد بين حدود الخلية وحشوها، أما الصفة cellspacing فتتحكم في المسافة الفارغة المباعدة بين حدود الجدول الخارجية وحدود الخلايا بينها وبين بعضها.

مثال:

<caption>جدول ذو حقلين</caption>

<tr>

<th>الحقل الأول</th>

<th>الحقل الثاني</th>

</tr>

<tr>

<td>الخلية الأولى من الحقل الأول</td>

<td>الخلية الأولى من الحقل الثاني</td>

</tr>

<tr>

<td>الخلية الثانية من الحقل الأول</td>

<td>الخلية الثانية من الحقل الثاني</td>

</tr>

</table>

ونتيجة المثال السابق كالتالي:

<note>لاحظ: المسافة بين النص داخل الخلية وحد الخلية ذاته وهو الذي تتحكم به الصفة cellpadding، ولاحظ أيضاً: المسافة بين حد الخلية وحد الخلية الأخرى وكذلك المسافة المباعدة بين حد الخلايا والحد الخارجي للجدول والذي تتحكم به الصفة cellspacing.</note>

القوائم

القوائم هي احدى طرق تنظيم النصوص في صفحات HTML ولها ثلاثة أشكال:

القائمة الرقمية: تبدأ بالوسم <ol>.

القائمة النقطية: تبدأ بالوسم <ul>.

قائمة التعريفات: تبدأ بالوسم <dl>.

وفيما يلي شرح لكل واحدة مما سبق.

القائمة الرقمية

هي قائمة ذات تعداد رقمي، تبدأ بالوسم <ol>، وكل عنصر فيها يبدأ بالوسم <li>.

مثال:

<ol>

<li>العنصر الأول</li>

<li>العنصر الثاني</li>

<li>العنصر الثالت</li>

</ol>

ونتيجة المثال السابق كالتالي:

العنصر الأول

العنصر الثاني

العنصر الثالث

أشكالها

القائمة الرقمية لها أشكال عدة، فالافتراضي هو الأرقام التي سبق الإشارة إليها، وهناك أشكال أخرى للترقيم، مثل: الترقيم بالأحرف الأبجدية الكبيرة والصغيرة، والترقيم بالأرقام الرومانية (I, II, III, … إلخ).

لتغيير شكل أرقام القائمة الرقمية نستخدم الصفة type متبوعةً بعلامة الإسناد ثم القيمة التي سنتعرف عليها الآن.

الأحرف الأبجدية الإنجليزية: قيمة الصفة type هي A للأحرف الكبيرة وa للأحرف الصغيرة.

الأحرف الرومانية: قيمة الصفة type هي I للأحرف الكبيرة وi للأحرف الصغيرة.

مثال:

<h٢>القائمة الرقمية الافتراضية</h٢>

<ol>

<li>العنصر الأول</li>

<li>العنصر الثاني</li>

<li>العنصر الثالت</li>

</ol>

<h٢>القائمة الرقمية ذات الأحرف الكبيرة</h٢>

<li>العنصر الأول</li>

<li>العنصر الثاني</li>

<li>العنصر الثالت</li>

</ol>

<h٢>القائمة الرقمية ذات الأحرف الصغيرة</h٢>

<li>العنصر الأول</li>

<li>العنصر الثاني</li>

<li>العنصر الثالت</li>

</ol>

<h٢>القائمة الرقمية ذات الأحرف الرومانية الكبيرة</h٢>

<li>العنصر الأول</li>

<li>العنصر الثاني</li>

<li>العنصر الثالت</li>

</ol>

<h٢>القائمة الرقمية ذات الأحرف الرومانية الصغيرة</h٢>

<li>العنصر الأول</li>

<li>العنصر الثاني</li>

<li>العنصر الثالت</li>

</ol>

وهذه نتيجة المثال السابق:

<note warning>في الفقرة الأخيرة من نتيجة المثال السابق خطأ وجب التنويه عنه؛ حيث كتبتُ القائمة النقطية وأنا أقصد الرقمية.</note>

القائمة النقطية

هي قائمة ذات تعداد نقطي، تشبه ذات التعداد الرقمي، نبدأها بالوسم <ul>، ونبدأ بالوسم <li> كل عنصر فيها.

مثال:

<ul>

<li>العنصر الأول</li>

<li>العنصر الثاني</li>

<li>العنصر الثالث</li>

</ul>

ونتيجة المثال السابق كالتالي:

العنصر الأول

العنصر الثاني

العنصر الثالث

أشكالها

كما أن القائمة الرقمية لها عدة أشكال، فإن لنظيرتها النقطية أشكال أيضاً، فالافتراضي هو شكل الدوائر المغلقة (الرصاصات)، ويمكن تغييرها إلى دوائر مفرغة أو مربعات مغلقة (المربعات المغلقة هي المستخدمة في هذه الويكي)، ولتغيير الشكل نستخدم الصفة type أيضاً.

الدوائر المغلقة (الافتراضية): قيمة الصفة type هي disk.

الدوائر المفرغة: قيمة الصفة type هي circle.

المربعات المغلقة: قيمة الصفة type هي square.

<h٢>الدوائر المغلقة الافتراضية</h٢>

<li>العنصر الأول</li>

<li>العنصر الثاني</li>

<li>العنصر الثالث</li>

</ul>

<h٢>الدوائر المفرغة</h٢>

<li>العنصر الأول</li>

<li>العنصر الثاني</li>

<li>العنصر الثالث</li>

</ul>

<h٢>المربعات المغلقة</h٢>

<li>العنصر الأول</li>

<li>العنصر الثاني</li>

<li>العنصر الثالث</li>

</ul>

ونتيجة المثال السابق كالتالي:

قائمة التعريفات

تستخدم هذه القائمة إذا كنت تكتب تعريفات لمصطلحات أو قاموس مثلاً، نبدأها بالوسم <dl>، ونبدأ كل عنصر فيها بالوسم <dd>، وكل تعريف لعنصر بالوسم <dt>.

مثال:

<dl>

<dd>القهوة</dd>

<dt>-مشروب ساخن أسود.</dt>

<dd>اللبن</dd>

<dt>-مشروب بارد وساخن أبيض.</dt>

</dl>

ونتيجة المثال السابق كالتالي:

<note tip>العنصر الواحد في أي من القوائم السابقة يمكن أن يحتوي على نصوص، صور، روابط تشعبية، سطور جديدة أو قوائم أخرى … إلخ.</note>

القوائم المتداخلة

يمكنك أن تضع قوائماً في عنصر قائمة من القوائم السابقة، وذلك لتمثل عدة تقسيمات لذاك العنصر، والمثال التالي يوضح ذلك:

<ul>

<li>القهوة</li>

<li>الشاي

<ul>

<li>الشاي الأحمر</li>

<li>الشاي الأخضر

<ul>

<li>الصيني</li>

<li>الأفريقي</li>

</ul>

</li>

</ul>

</li>

<li>اللبن</li>

</ul>

وهذه نتيجة المثال السابق:

<note>نلاحظ أن القائمة المتداخلة تتغير أشكال أيقوناتها كلما ازدادت عمقاً في التقسيم. يمكنك تغيير أشكال الأيقونات بالصفة type التي شرحناها سابقاً. </note>

النماذج والاستمارات

النماذج أو الاستمارات هي الصفحات التي تحتوي صناديق إدخال لتمرير بيانات من المستخدم إلى الخادم لمعالجتها، ونستخدم الوسم <form> لإنشاء نموذج، ونستخدم الصفة action لتوجيه البيانات نحو الصفحة المنوطة بالمعالجة مثل: register.php، كما تقوم الصفة method بتحديد الطريقة التي سيتم إرسال البيانات بها .. أهي POST أم GET.

ويحتوي الوسم <form> على عدة وسوم داخلية تمثل عناصر الإدخال للنموذج، ومعظمها يشمله الوسم <input> حيث تحدد الصفة type نوع الإدخال، نص Text أو كلمة سر Password أو اختيارات Checkbox أو زر راديو radio.

كما يمكن أن يحتوي النموذج عناصر إدخال أخرى كصندوق الإدخال النصي متعدد الأسطر <textarea> أو الزر <button>.

وكل عناصر الإدخال تلك، يجب أن تحتوي على الصفة name التي ستحدد متغيرات المرسل إلى الخادم، مثل: http://ojuba.org/?username=anass&password=123456.

مثال:

<html>

<head>

<title>Forms Code</title>

</head>

<label for="username">اسم المستخدم:</label>

<label for="your-car">سيارتك:</label>

<input type="checkbox" id="volvo_car" name="your-car" value="volvo" /><label for="volvo_car">فولفو</label>

<input type="checkbox" id="bmw_car" name="your-car" value="bmw" /><label for="bmw_car">بي إم دبليو</label>

<br />

<label for="gender">النوع:</label>

<br />

<label for="birth_year">سنة الميلاد:</label>

</select>

<br />

<br />

</form>

</body>

</html>

والنتيجة تكون كالتالي:

حقول الإدخال النصية

يتم إدراج حقول الإدخال النصية بوضع القيمة text في الصفة type بالوسم <input>، وعرض هذا الحقل الإفتراضي هو ٢٠ حرفًا ويتم التحكم فيه بالصفة size.

مثال:

حقول إدخال كلمات السر

يتم إدراج حقول الإدخال الخاصة بكلمات السر بوضع القيمة password في الصفة type بالوسم <input>، وتحول المدخلات في هذا الحقل إلى نجوم أو دوائر أو مربعات حسب المتصفح والسمة التي تستخدمها.

مثال:

أزرار الراديو

يتم إدراج أزرار الراديو بوضع القيمة radio في الصفة type بالوسم <input> وتستخدم لتحديد خيار واحد من عدة خيارات محدودة.

مثال:

الخيارات المتعددة

يتم إدراج أداة الخيارات المتعددة بوضع القيمة checkbox في الصفة type التابعة للوسم <input> وتستخدم لتحديد خيار واحد أو أكثر من عدة خيارات محدودة.

مثال:

<input type="checkbox" id="volvo_car" name="your-car" value="volvo" /><label for="volvo_car">فولفو</label>

<input type="checkbox" id="bmw_car" name="your-car" value="bmw" /><label for="bmw_car">بي إم دبليو</label>

زر الإرسال

يتم إدارج زر الإرسال بوضع القيمة submit في الصفة type التابعة للوسم <input> وتستخدم ﻹرسال النموذج بعد ملأه إلى الصفحة المنوطة بالمعالجة في الخادم والتي تحدد في الصفة action التابعة للوسم <form>.

مثال:

القوائم المنسدلة

يتم إدراج القائمة المنسدلة بالوسم <select> وإدراج الخيارات داخل هذا الوسم باستخدام الوسم <option> وتحديد قيمة كل خيار بالصفة value، كما في المثال الآتي:

</select>

صندوق النص متعدد الأسطر

يدرج صندوق النص متعدد الأسطر بالوسم textarea ويحدد عدد أعمدته بالصفة cols ويحدد عدد صفوفه بالصفة rows، كما في المثال الآتي:

حقل إدخال الملفات

حقل إدخال الملفات هو حقل من حقول HTML٥ لكنه مدعوم حاليًا من كافة المتصفحات الحديثة، ويستخدم لرفع الملفات من جهاز الحاسب لدى المستخدم إلى موقع الانترنت، ويتم إدراجه بوضع القيمة file للصفة type في الوسم <input> كما في المثال الآتي:

النص

يُدرج النص التابع لأي حقل إدخال من حقول الإدخال السابقة بالوسم <label> ويضاف إليه الصفة for وقيمتها هي ذات قيمة الصفة id لحقل الإدخال المقابل، ومن ثم عند الضغط على النص تجد المؤشر ينتقل فورًا إلى الحقل المقابل له، كما يوضح هذا المثال:

<label for="username">اسم المستخدم:</label>

GET أم POST

في الوسم <form> نضع الصفة method التي تحدد الطريقة التي يتم إرسال البيانات من خلالها إلى الخادم، يوجد طريقتان، الأولى GET والثانية POST.

الطريقة GET أسرع وأبسط من الطريقة POST ويمكن إستخدامها في حالات عدة، حيث أن صندوق العنوان في المتصفح يحتوي على المعلومات التي يتم إرسالها (لذا لا تعد آمنة عند إرسال معلومات حساسة).

الطريقة POST لها عدة مميزات أيضًا .. وينصح باستخدامها غالبًا:

لا تقوم بتسجيل الخبيئة Cache بل تقوم بتحديث الملف أو قاعدة البيانات دائمًا.

ليس لها حد أعلى في حجم البيانات المرسلة، فيمكن رفع ملفات من خلالها.

أكثر أمنًا، فهي تُخفي البيانات الواردة منها في صندوق العنوان، كما لا تعبأ بنوع المحارف المرسل، سواءًا كان يونيكود أم أسكي أم غيره.

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

الإطارات

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

لكن، للإطارات سلبيات يجب وضعها في الإعتبار:

لن تكون مدعومة في الإصدارة القادمة من HTML.

أصعب في التعامل. (من حيث الطباعة مثلًا).

من خلال الوسم <frameset> نستطيع إنشاء طقم الإطارات في الصفحة، حيث يحتوي هذا الوسم الإطارات ويحدد عدد الصفوف أو الأعمدة التي تحتوي على الإطارات كما يحدد عرض أو ارتفاع كل منها إما بالنسبة المئوية أو بالبكسل وذلك من خلال الصفتين cols و rows.

<note warning>لا يوضع هذا الوسم <frameset> داخل الوسم <body> ولا يكون الوسم <body> موجودًا في الصفحة أصلًا.</note>

نستخدم الوسم <frame> داخل الوسم <frameset> لتعريف الإطار، وتحديد عنوان صفحته من خلال الصفة src، كما نضيف الصفة noresize إلى هذا الوسم لمنع المستخدم من إعادة تحجيم الإطار من حدوده.

كما نستخدم الوسم <noframes> لإظهار محتوىً معين للمتصفحات التي لا تدعم إظهار الإطارات، ويجب أن نضع داخل هذا الوسم وسم <body> لتحديد المحتوى الذي سيظهر مكان الإطارات، ويوضع هذا الوسم داخل الوسم <frameset> أيضًا.

مثال:

<html>

<body dir="rtl">متصفحك لا يدعم الإطارات!</body>

</noframes>

</frameset>

</html>

الإطارات العمودية والأفقية والمختلطة

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

مثال:

<html>

</frameset>

</html>

أما الإطارات الأفقية فنستخدم لها الصفة rows في الوسم <frameset> ونحدد ارتفاع كل صف من الإطارات كما نحدد عرض الأعمدة (كما هو مذكور أعلاه).

مثال:

<html>

</frameset>

</html>

ويمكن أن تكون الإطارات مختلطة بين عمودية وأفقية من خلال وضع الوسم <frameset> كإطار داخل <frameset> الأصلي. ثم نضع فيه إطارات أخرى تختلف من ناحية الأفقية أو العمودية عن <frameset> الأصل.

مثال:

<html>

</frameset>

</html>

الإبحار عبر الإطارات

يمكنك تحديد اسم لكل إطار، من خلال الصفة name ثم فتح رابط بأحد الإطارات من خلال استهدافه بالصفة target التي تعلمناها من قبل في قسم الروابط التشعبية، ومن هنا يمكن عمل إطارين، أحدهما يكون فهرسًا، والآخر يعرض الصفحات التي يتم اختيارها من الإطار الأول (الفهرس).

مثال:

<html>

</frameset>

</html>

ونجد مكونات صفحة tryhtml_contents.htm تحتوي على:

<html>

<body>

<a href ="frame_a.htm" target ="showframe">Frame a</a><br />

<a href ="frame_b.htm" target ="showframe">Frame b</a><br />

<a href ="frame_c.htm" target ="showframe">Frame c</a>

</body>

</html>

كما يمكنك الإبحار عبر المراسي Anchors في صفحة ما في أحد الإطارات، كما في هذا المثال:

<html>

<body>

<a href ="link.htm" target ="showframe">Link without Anchor</a><br>

<a href ="link.htm#C١٠" target ="showframe">Link with Anchor</a>

</body>

</html>

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

إطار في سياق الصفحة

يمكنك أيضًا إنشاء أطر في سياق الصفحة، واستهدافها من خلال الروابط، وذلك من خلال الوسم <iframe>، والذي نضيف إليه الصفة src لتحديد عنوان الصفحة التي ستفتح من خلاله، كما نحدد طوله وعرضه بالصفتين width و height وذلك إما ان يكون بالبكسلات (بدون وضع أي وحدات بعد الرقم) أو أن يكون بالنسبة المئوية (بوضع % بعض الرقم).

ومن خلال الصفة frameborder يمنك أن تحدد ما إذا كنت تريد إظهار حدود الإطار وذلك بإسناد القيمة ١ أو إخفاء الإطار بإسناد القيمة ٠.

أما استهدافه بالروابط فيكون بإضافة الصفة name إليه ثم وضع قيمتها في الصفة target في الرابط.

مثال:

<p>

<a href="http://www.ojuba.org" target="frame_a">موقع أعجوبة</a>

</p>

<note>المتصفحات التي لا تدعم الإطارات، لن تظهر هذا الإطار، ولا توجد طريقة لإظهار محتوى بديل.</note>

الألوان

في عالم الحاسوب، تتكون الألوان من الضوء الأحمر، الأخضر، والأزرق، ويتم تحديدهم بما يسمى كود HEX أو كود RGB.

فأما كود HEX فيتكون بالترتيب من اللون الأحمر، الأخضر، ثم الأزرق وكل لون له قيمة صغرى ٠٠ و كبرى FF. على سبيل المثال: #FFFFFF هو اللون الأبيض!

وأما كود RGB فيتبع نفس ترتيب الألوان لكن القيمة الصغرى لكل لون هي ٠ والكبرى هي ٢٥٥، فعلى سبيل المثال: rgb(٢٥٥, ٠, ٠) تعني اللون الأحمر.

من هنا نعرف أن كود HEX يتكون من ٣ أزواج رقمية، كل زوج يعبر عن أحد الأضواء الثلاثة، ويسبق هذا الكود علامة #. بينما كود RGB يشبه الدوال البرمجية في كونه له ثلاثة معطيات، كل معطى يعبر عن لون من الألوان بنفس الترتيب المعروف.

نتيجة لخلط الأضواء الثلاثة بهذه النسب والقيم، أدى إلى وجود ١٦ مليون لون (٢٥٦ * ٢٥٦ * ٢٥٦)، يمكنك أن تجربها بكتابة #٠٠٠٠٠٠ ثم تغيير قيم أول زوج رقمي (المسؤول عن اللون الأحمر) فتتدرج به من ٠٠ إلى FF مع ثبات قيم الأخضر والأزرق على الصفر.

الضوء الرمادي

يتكون الرمادي من كميات متعادلة من الألوان الثلاثة، الأحمر والأخضر والأزرق.

أمثلة:

#000000

#111111

#222222

#121212

#565656

#c0c0c0

#e9e9e9

ألوان الشابكة الآمنة

منذ عدة سنين مضت، لم تكن الحواسيب تدعم أكثر من ٢٥٦ لونًا، لذا وضعت قائمة بالألوان التي تدعمها جميع الأنظمة والمتصفحات، وتتكون هذه القائمة من ٢١٦ لونًا، وقد وضعت كمعيار قياسي.

لم تعد هنالك حاجة لمثل هذه القائمة، فقد أصبحت جميع المتصفحات والأنظمة تدعم جميع الألوان.

إليك قائمة الألوان الآمنة والمعيارية:

أسماء الألوان

وللتسهيل على مطوري الويب، والمبرمجين، دُعمت بعض أسماء الألوان في HTML وعددهم ١٤٧ لونًا تعمل مع كافة المتصفحات الشهيرة. هذه الأسماء ليست معيارية إلا ١٧ لونًا.

أسماء الألوان المعيارية السبعة عشر: aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

أما بقية الأسماء فتجدها مرتبة حسب الترتيب الهجائي للأسماء في هذه الصفحة، وتجدها مرتبة حسب كود HEX في هذه الصفحة.

تعريف الملف وفحصه

HTML أم XML

الإصدارات والأطوار

هناك عدة أطوار لنفس الإصدار من المعايير

الصارم Strict

الانتقالي Transitional

طقم الأطر Frameset

إذا استخدمت الانتقالي فإن المزايا التي ستكون في الإصدار التالي قد تكون مدعومة.

طرق تعريف نوع HTML

إذا قمت بتعريف ملف XHTML بطريقة تقليدية كما تفعل مع ملفات xml هكذا

<?xml version='١.٠' encoding='utf-٨'?>

...

</html>

فإنك ستحصل على الكثير من المشاكل في بعض المتصفحات. الطريقة العيارية لعمل ذلك في XHTML (الإصدار ١.٠ الانتقالي) هي هكذا

<!DOCTYPE html

PUBLIC "-//W٣C//DTD XHTML ١.٠ Transitional//EN"

"http://www.w٣.org/TR/xhtml١/DTD/xhtml١-transitional.dtd">

...

</html>

في حين لو أنّنا أردنا عمل ذلك في HTML الإصدار ٤.٠١ الانتقالي فإنّنا نعمل

<!DOCTYPE HTML PUBLIC "-//W٣C//DTD HTML ٤.٠١ Transitional//EN"

"http://www.w٣.org/TR/html٤/loose.dtd">

<html>

...

</html>

http://www.w3.org/TR/xhtml1/#h-A1

http://validator.w3.org/docs/help.html#faq-doctype

http://www.htmlhelp.com/tools/validator/doctype.html

http://www.w3.org/QA/2002/04/valid-dtd-list.html

فحص الملف عبر الإنترنت

توفر مؤسسة w٣.org خدمة فحص سلامة أي موقع عبر زيارة الموقع http://validator.w3.org حيث يمكنك تقديم رابط لملف html أو رفع ملف html أو كتابة نص الملف.

http://validator.w3.org - موقع فحص التوافقية

أدوات فحص الملفات

يمكن فحص سلامة ملفات XML بشكل عام (وبالتالي XHTML) بطريقة عمياء بغض النظر عن إصدار XHTML وبغض النظر عن القواعد التفصيلية عبر أداة xmllint الموجودة في حزمةlibxml٢

xmllint --noout test.html ٢>&١ | less

هذا الفحص لا يأخذ بعين الاعتبار خصوصية إصدارات XHTML المختلفة

أما فحص سلامة الملف بشكل أدق لتطبيق إصدار معين علينا تمرير ملف يحتوي على قواعد الإصدارة المستخدمة في الفحص

مثلا لفحص سلامة ملف HTML ٤.٠١ في فيدورا (وبالتالي أعجوبة) بعد تثبيت حزمتي opensp و html٤٠١-dtds ثم نفذ

onsgmls -c /etc/sgml/html401-dtds.soc -s test.html ٢>&١ | less

يمكن القيام بذلك عبر xmllint لفحص سلامة ملف transitional xhtml ١ بالأمر

xmllint --dtdvalid file:///usr/share/xml/xhtml/1.0/xhtml1-transitional.dtd --noout test.html 2>&1 | less

الملف الذي يحتوي قواعد تدقيق سلامة ملف xhtml أتى في فيدورا من حزمة اسمها xhtml١-dtds

مرحبا، يا معايير!

أنشئ ملفا نصيا صرفا وضع فيه ما يلي:

<!DOCTYPE html

PUBLIC "-//W٣C//DTD XHTML ١.٠ Transitional//EN"

"http://www.w٣.org/TR/xhtml١/DTD/xhtml١-transitional.dtd">

<h١>مرحبا، يا معايير!</h١>

</body>

</html>

احفظ الملف باسم hello٣.html ثم استخدم متصفح إنترنت لعرض الملف.

ترويس الملف

وسم head و title

الوسم head يحتوي كل العقد nodes التي لا تكون جزء من متن الصفحة مثل وسم title الذي يحدد عنوان الصفحة الذي يظه

Currently 0/5 Stars.
1 2 3 4 5

0 تصويتات / 309 مشاهدة

نشرت فى 28 يوليو 2016 بواسطة mahmuodcom

html

احفظ

عدد زيارات الموقع

1,595