docs:html_basics
اختلافات
عرض الاختلافات بين النسخة المختارة و النسخة الحالية من الصفحة.
| جانبي المراجعة السابقةالمراجعة السابقةالمراجعة التالية | المراجعة السابقة | ||
| docs:html_basics [2011/03/20 19:24] – [الألوان] أنس_أحمد | docs:html_basics [2015/04/23 03:19] (حالي) – تحرير خارجي 127.0.0.1 | ||
|---|---|---|---|
| سطر 1: | سطر 1: | ||
| + | {{tag> | ||
| + | ====== بدهيات HTML ====== | ||
| + | لغة HTML أي Hyper Text Markup Language هي لغة توصّف النص وترقمه Marks up لجعله نصا غنيا منسقا مترابطا (ومنها Hyper). | ||
| + | |||
| + | <note warning> | ||
| + | هذه الصفحة لا تزال قيد الإنشاء | ||
| + | </ | ||
| + | |||
| + | ===== مقدمة ===== | ||
| + | |||
| + | لعمل ملف HTML تحتاج محرر نصوص صرفة (أي محرر نصوص صرفة يصلح مهما كان ساذجا مثل المفكرة Notepad في ويندوز). ولعرضه تحتاج متصفح إنترنت (يفضل أن تستخدم متصفح قياسي مثل ثعلب النار firefox) ويفضل أن تجرب الملف على أكثر من متصفح لكل منها محرك عرض خاص به. | ||
| + | |||
| + | <note tip> | ||
| + | |||
| + | يمكنك التعرف على الطريقة التي تمت كتابة الصفحة بها بواسطة الضغط بالزر الأيمن على أي مكان فارغ بالصفحة ثم تختار **إعرض مصدر الصفحة** (ثعلب النار FireFox) -أو ما يشبهها في المتصفحات الأخرى- من القائمة المنسدلة وستظهر لك نافذة تحوى كود الصفحة.</ | ||
| + | |||
| + | ==== مرحبا، يا عالم! ==== | ||
| + | أنشئ ملفا نصيا صرفا وضع فيه ما يلي: | ||
| + | <code html> | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | احفظ الملف باسم hello1.html ثم استخدم متصفح إنترنت لعرض الملف. | ||
| + | |||
| + | ستلاحظ ظهور عبارة Hello, world! في شاشة المتصفح فقط. | ||
| + | |||
| + | عدل الملف ليصبح كما في المثال التالي ثم احفظه باسم hello2.html | ||
| + | |||
| + | <code html> | ||
| + | < | ||
| + | <body dir=" | ||
| + | < | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | لاحظ ظهور " | ||
| + | |||
| + | ==== العلامات الخاصة ==== | ||
| + | |||
| + | كما لاحظت في المثالين السابقين أن هناك علامات تسمى وسوم أو رواقم توسم بها أجزاء من النص. هذه الوسوم تكون عبارة عن اسم الوسم محاط بأقواس زاوية، أي أنها تكون بين علامتي أصغر وأكبر، هكذا <h1> كما في هذا المثال: | ||
| + | <code html> | ||
| + | < | ||
| + | </ | ||
| + | العلامة <h1> تسم كل نص بعدها إلى أن يتم إغلاقها بنفس الوسم مسبوقابعلامة / قبل اسم الوسم داخل الأقواس الزاوية. | ||
| + | |||
| + | أما الوسوم التي ليس لها محتويات فتغلق بوضع / التي تغلقها على نفس الوسم هكذا | ||
| + | <code html> | ||
| + | <img src=" | ||
| + | </ | ||
| + | |||
| + | هذا الوسم img لم يأخذ محتوى لكنه أخذ صفات attributes وقيم مقابلة لها في المثال أعلاه كانت الصفة src قيمتها myimage.jpg والتي هي اسم ملف الصورة. | ||
| + | |||
| + | ==== الوسوم المتداخلة ==== | ||
| + | |||
| + | إذا جاء وسمان متداخلان يجب إغلاق الوسم الداخلي أولا حتى لا يحدث تشابك | ||
| + | مثلا | ||
| + | <code html> | ||
| + | < | ||
| + | </ | ||
| + | |||
| + | ==== الوسوم الأساسية Tags ==== | ||
| + | إن الوسم الأساسي الجذري في ملف html هو html! والفرع الذي يحتوي النص الغني المعروض هو المتن body وداخلهما تأتي العناوين أو التبويبيات h1 ثم التي أصغر منها h2 وهكذا حتى h6. في كل باب يمكنك وضع عدة فقرات والفقرة نحصرها بالوسم p | ||
| + | |||
| + | <code html> | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | <a href=" | ||
| + | <img src=" | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | من الكود السابق يتضح ما يلي: | ||
| + | * **الوسم < | ||
| + | * **الوسم < | ||
| + | * **الوسم < | ||
| + | * **الوسم < | ||
| + | * **الوسم < | ||
| + | * **طريقة إغلاق الوسم: | ||
| + | * **الصفات: | ||
| + | |||
| + | < | ||
| + | |||
| + | ==== الصفات Attributes ==== | ||
| + | كل عناصر HTML لها صفات تزود المتصفح بمعلومات عن هذا الوسم أو العنصر، نضع تلك الصفات في وسم البداية. | ||
| + | |||
| + | تتكون تلك الصفات من زوج من الأسماء والقيم يفصل بينهما علامة الإسناد " | ||
| + | |||
| + | <code html> | ||
| + | <a href=" | ||
| + | </ | ||
| + | |||
| + | <note tip> | ||
| + | |||
| + | < | ||
| + | |||
| + | ==== التخطي escaping والكيانات entities ==== | ||
| + | بما أن القوسين الزاويين < > يستخدمان في وسم النص فلا يجوز أن يستخدما كجزء من النص الموسوم فإن احتجت لهما عليك استخدام الرمزان < و > على الترتيب | ||
| + | <code html> | ||
| + | <pre> | ||
| + | if a < b: print "a is less than b" | ||
| + | if a > b: print "a is greater than b" | ||
| + | </ | ||
| + | </ | ||
| + | وهذا يظهر في المتصفح هكذا | ||
| + | < | ||
| + | if a < b: print "a is less than b" | ||
| + | if a > b: print "a is greater than b" | ||
| + | </ | ||
| + | |||
| + | وحيث أن & استخدمت فهي أيضا رمز خاص يجب تخطيه وذلك بالرمز & هكذا | ||
| + | <code html> | ||
| + | if (a & | ||
| + | </ | ||
| + | والذي يظهر هكذا في المتصفح | ||
| + | < | ||
| + | if (a && b) {echo "a and b is Ture"} | ||
| + | </ | ||
| + | |||
| + | وفي أغلب وسوم html فإنه يتم تسوية كل الفراغات (المسافات وعلامات الجدولة والأسطر الجديدة) إلى مسافة واحدة باستثناء الوسم pre أي pre-formatted text أي نص منسق مسبقا بواسطة المسافات وعلامات الجدولة والأسطر الجديدة. | ||
| + | |||
| + | لذا فإنه يلزمك إحاطة كل فقرة داخل وسم p أي paragraph حتى يتم عرض سطر جديد بعدها. ويمكنك استخدام الوسم خال المحتويات br أي break line لوضع سطر جديد دون بدء فقرة جديدة. | ||
| + | |||
| + | أما المسافات فيمكنك إدراجها من خلال والتي هي اختصار ل non-breaking space لاحظ كيف تستخدم | ||
| + | <code html> | ||
| + | []< | ||
| + | [& | ||
| + | </ | ||
| + | والذي يظهر هكذا في المتصفح | ||
| + | < | ||
| + | [] | ||
| + | [ ] | ||
| + | </ | ||
| + | |||
| + | تسمى طريقة إدراج شيء من خلال اسم بين & و ; الكيانات. وقد ذكرنا إلى الآن أربعة منها وهي | ||
| + | * gt أي greater than وهي علامة أكبر | ||
| + | * lt أي less than وهي علامة أصغر | ||
| + | * amp أي وهي علامة & | ||
| + | * nbsp أي non-breaking space وهي مسافة | ||
| + | |||
| + | وهناك غيرها الكثير. | ||
| + | |||
| + | وليس بالضرورة أن تكون الكيانات تمثل محرف واحد بل يمكنها أن تحتوي ملفات خارجية بكاملها (لن نخوض في ذلك الآن، للمزيد ابحث عن xml entities في محرك البحث) | ||
| + | |||
| + | كذلك يمكن إدراج محرف ما من خلال رقمه في جدول يونيكود | ||
| + | |||
| + | {{ : | ||
| + | |||
| + | ===== وسوم HTML ===== | ||
| + | ==== العناوين ==== | ||
| + | تستطيع تقسيم صفحتك باستخدام وسم العناوين <h> والذي يتدرج من الوسم <h1> وهو الأكبر حجماً ويستخدم في الفقرة الرئيسية (عنوان الصفحة مثلاً) إلى الوسم <h6> وهو الوسم الأصغر حجماً، لاحظ أيضاً أن المتصفحات تضيف سطراً فارغاً قبل وبعد وسم العنوان. | ||
| + | |||
| + | مثال: | ||
| + | |||
| + | <code html> | ||
| + | <h1> بدهيات HTML </h1> | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | |||
| + | ** فائدة العناوين: | ||
| + | |||
| + | * تستخدم محركات البحث وسوم العناوين لفهرسة الصفحة والتعرف على بناءها. | ||
| + | * عندما يتصفح الزوار صفحتك بسرعة يستطيعون الوصول إلى المعلومة التي يريدونها بسرعة من خلال العناوين التي تقسم صفحتك. | ||
| + | |||
| + | <note warning> | ||
| + | |||
| + | ==== الفواصل ==== | ||
| + | يمكنك الفصل بين محتويات صفحتك باستخدام وسم الفاصل الأفقي <hr /> الذي يدرج خطاً أفقياً فاصلاً وذلك كما بالمثال التالي: | ||
| + | |||
| + | <code html> | ||
| + | <p> هذه فقرة. </p> | ||
| + | <hr /> | ||
| + | <p> هذه فقرة أخرى. </p> | ||
| + | <hr /> | ||
| + | <p> هذه فقرة ثالثة. </p> | ||
| + | </ | ||
| + | |||
| + | < | ||
| + | |||
| + | ==== التعليقات ==== | ||
| + | نستخدم التعليقات لجعل كود HTML أكثر فهماً ومقروئية، وهي تفيد المبرمج أو المصمم، أما المتصفح فيتجاهلها ولا يظهرها ضمن الصفحة المعروضة. | ||
| + | |||
| + | تكتب التعليقات بفتح وسم زاوية يعقبه علامة تعجب ثم علامتي -- يليها التعليق ثم علامتي -- مرة أخرى ثم يغلق بقوس زاوي مقابل كما في المثال التالي: | ||
| + | |||
| + | <code html> | ||
| + | <!-- هذا تعليق --> | ||
| + | </ | ||
| + | |||
| + | ==== الفقرات ==== | ||
| + | توسم الفقرات بالوسم <p> ويقوم المتصفح تلقائياً بإضافة سطر فارغ بين كل فقرة وأخرى. | ||
| + | |||
| + | مثال: | ||
| + | |||
| + | <code html> | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | |||
| + | <note warning> | ||
| + | |||
| + | ==== السطور الجديدة ==== | ||
| + | إذا أردت أن تبدأ سطراً جديداً دون بدأ فقرة جديدة فما عليك سوى إستخدام الوسم <br /> كما في المثال التالي: | ||
| + | |||
| + | <code html> | ||
| + | <p> السطر الأول <br /> السطر الثاني <br /> السطر الثالث </p> | ||
| + | </ | ||
| + | |||
| + | ==== تنسيق النصوص ==== | ||
| + | تستخدم وسوم التنسيق لتنسيق النصوص لجعل بعض النصوص **ثخينة** أو // | ||
| + | |||
| + | هذا المثال يوضح معظم وسوم تنسيق النصوص المتوفرة في HTML وعليك فقط أن تجرب وترى النتائج بنفسك: | ||
| + | |||
| + | <code html> | ||
| + | |||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | |||
| + | <!-- عنوان: --> | ||
| + | |||
| + | < | ||
| + | كتبه موقع أعجوبة< | ||
| + | <a href=" | ||
| + | العنوان: | ||
| + | الهاتف: | ||
| + | </ | ||
| + | |||
| + | <!-- إختصارات: | ||
| + | |||
| + | < | ||
| + | التي أسست عام 1948.</ | ||
| + | |||
| + | < | ||
| + | |||
| + | <!-- إقتباسات: | ||
| + | |||
| + | إقتباس طويل: | ||
| + | < | ||
| + | هذا إقتباس طويل. هذا إقتباس طويل. هذا إقتباس طويل. هذا إقتباس طويل.هذا إقتباس طويل. هذا إقتباس طويل. هذا إقتباس طويل. هذا إقتباس طويل. هذا إقتباس طويل. هذا إقتباس طويل. | ||
| + | </ | ||
| + | |||
| + | < | ||
| + | |||
| + | إقتباس قصير: | ||
| + | < | ||
| + | |||
| + | < | ||
| + | |||
| + | <!-- حذف وإدراج: | ||
| + | |||
| + | < | ||
| + | |||
| + | </ | ||
| + | |||
| + | < | ||
| + | |||
| + | ====الروابط التشعبية ==== | ||
| + | الروابط التشعبية هي كلمة أو جملة أو صورة أو أي عنصر HTML آخر تستطيع أن تضغط عليه لتنتقل إلى صفحة أخرى أو حتى إلى قسم معين في نفس الصفحة. | ||
| + | |||
| + | < | ||
| + | |||
| + | نضيف الروابط التشعبية في صفحة HTML بالوسم <a> وذلك بطريقتين: | ||
| + | |||
| + | - باستخدام الصفة href لإنشاء روابط خارجية. | ||
| + | - باستخدام الصفة name لإنشاء روابط داخلية لعلامات أو مراسي في ذات الصفحة. | ||
| + | |||
| + | === الروابط الخارجية === | ||
| + | يمكن عمل رابط إلى http:// | ||
| + | <code html> | ||
| + | <a href=" | ||
| + | </ | ||
| + | === الروابط النسبية === | ||
| + | يمكن عمل رابط إلى صفحة في نفس المجلد أو رابط يكون مكانه نسبة للمجلد الحالي وذلك بأن لا نذكر البروتوكول ولا الموقع بل نبدأ مباشرة مثلا | ||
| + | |||
| + | <code html> | ||
| + | <a href=" | ||
| + | </ | ||
| + | هذا الكود السابق يظهر عبارة " | ||
| + | |||
| + | ويمكن استعمال مسارات أعقد هكذا | ||
| + | |||
| + | <code html> | ||
| + | <a href=" | ||
| + | <a href=" | ||
| + | </ | ||
| + | |||
| + | فالأول يحيل إلى page2.html داخل مجلد subproject الموجود في داخل المجلد الذي توجد فيه الصفحة الحالية. | ||
| + | والثاني يحيل إلى page2.html في project الموجود داخل other الموجود داخل المجلد الوالد للمجلد الذي فيه الصفحة الحالية. | ||
| + | |||
| + | === فتح الرابط في صفحة جديدة === | ||
| + | لعمل رابط يفتح في صفحة جديدة أو لسان تبويب جديد نستعمل الصفحة target هكذا | ||
| + | |||
| + | <code html> | ||
| + | <a target=" | ||
| + | </ | ||
| + | |||
| + | القيمة _blank التي أعطيناها لصفة الهدف target تعني في نافذة جديدة. يمكن إعطاء أسماء للنوافذ مكان _blank عندها ستفتح أول مرة في نافذة جديدة ثم لاحقا أي رابط له نفس اسم الهدف سيفتح في تلك النافذة. | ||
| + | |||
| + | هناك استخدامات أخرى لهذه الصفحة عند العمل في طقم للأطر frame set | ||
| + | لكن هذا خارج أهداف هذه المقالة. | ||
| + | |||
| + | === الروابط الداخلية في نفس الصفحة === | ||
| + | |||
| + | يمكنك تعريف مرساة داخل الصفحة من خلال الصفة name لنفس الوسم a هكذا | ||
| + | <code html> | ||
| + | <a name=" | ||
| + | </ | ||
| + | ثم يمكنك الإحالة لتلك النقطة داخل الصفحة من خلال # ثم قيمة الصفحة name هكذا | ||
| + | <code html> | ||
| + | <a href="# | ||
| + | </ | ||
| + | |||
| + | ويمكن الإحالة إلى نقطة معينة داخل صفحة خارجية أيضا هكذا | ||
| + | |||
| + | <code html> | ||
| + | <a href=" | ||
| + | </ | ||
| + | |||
| + | === التخطي مرة أخرى === | ||
| + | |||
| + | التخطي في تعريف عناوين url مختلف حيث يكون بعلامة % ثم رقمين ست-عشريين مثلا %20 تعني مسافة وغالبا لا تحتاج لعمل ذلك حيث يقوم المتصفح بعمل ذلك باستثناء ورود علامة الاقتباس أو ما شابه. | ||
| + | |||
| + | === أمور عليك مراعاتها === | ||
| + | * انتبه لحالة الحروف الكبيرة والصغيرة. لأنها إن كانت لا تفرق في نظام ويندوز فهي تشكل فارقا عند رفع الملفات على خادم يعمل على يونكس (أو ماك) | ||
| + | * استخدم شرطة مائلة عادية / كما في يونكس وليس معكوسة | ||
| + | * مراعاة الترميز الحالي في العنوان | ||
| + | * مراعاة التخطي في العنوان | ||
| + | * عدم وضع # في بداية الصفحة name ووضعها في href | ||
| + | |||
| + | ==== الصور ==== | ||
| + | نستخدم الوسم <img> لإدراج صورة في صفحة HTML وهو وسم فارغ دون محتوى، ونستخدم الصفة src لتحديد مكان الصورة المطلوب إدراجها في الصفحة، كما نستخدم الصفة alt لإظهار نص محل الصورة حينما يتعذر عرض الصورة. | ||
| + | |||
| + | مثال: | ||
| + | <code html> | ||
| + | <img src=" | ||
| + | </ | ||
| + | |||
| + | === تحجيم الصور === | ||
| + | يمكنك التحكم بحجم الصور المدرجة في الصفحة من خلال الصفتين width للعرض و height للإرتفاع، ويكتب الحجم بالبكسلات. | ||
| + | |||
| + | مثال: | ||
| + | <code html> | ||
| + | <img src=" | ||
| + | </ | ||
| + | |||
| + | === محاذاة الصور === | ||
| + | من خلال الصفة align يمكنك محاذاة الصورة مع النص يميناً أو يساراً بالأعلى أو بالأسفل وهكذا. | ||
| + | |||
| + | مثال: | ||
| + | <code html> | ||
| + | < | ||
| + | <img src=" | ||
| + | مرتفعة عن السطر باستخدام الصفة align=" | ||
| + | |||
| + | < | ||
| + | <img src=" | ||
| + | في وسط السطر باستخدام الصفة align=" | ||
| + | |||
| + | < | ||
| + | <img src=" | ||
| + | منخفضة عن السطر باستخدام الصفةalign=" | ||
| + | |||
| + | <p> | ||
| + | <img src=" | ||
| + | هذه فقرة يحاذيها من اليسار صورة، وذلك باستخدام الصفة align=" | ||
| + | </p> | ||
| + | |||
| + | <p> | ||
| + | <img src=" | ||
| + | هذه فقرة يحاذيها من اليمين صورة، وذلك باستخدام الصفة align=" | ||
| + | </p> | ||
| + | |||
| + | </ | ||
| + | |||
| + | وهذه نتيجة المثال السابق: | ||
| + | |||
| + | {{: | ||
| + | |||
| + | === خريطة الصور === | ||
| + | تستطيع إدراج روابط تشعبية على أجزاء من صورة مدرجة في الصفحة، وذلك من خلال الوسم <map> بالإضافة إلى وسم الصورة < | ||
| + | |||
| + | ويتم تحديد الموضع على الصورة من خلال الوسم < | ||
| + | |||
| + | مثال: | ||
| + | <code html> | ||
| + | <img src=" | ||
| + | |||
| + | <map name=" | ||
| + | <area shape=" | ||
| + | <area shape=" | ||
| + | <area shape=" | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | ==== الجداول ==== | ||
| + | نستخدم الوسم < | ||
| + | |||
| + | مثال: | ||
| + | <code html> | ||
| + | <table border=" | ||
| + | < | ||
| + | <tr> | ||
| + | < | ||
| + | < | ||
| + | </tr> | ||
| + | <tr> | ||
| + | < | ||
| + | < | ||
| + | </tr> | ||
| + | <tr> | ||
| + | < | ||
| + | < | ||
| + | </tr> | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | ونتيجة المثال السابق كالتالي: | ||
| + | |||
| + | {{: | ||
| + | |||
| + | === مباعدة الخلايا وحشوها === | ||
| + | نستطيع من خلال الصفة cellpadding التحكم في حجم المسافة الفارغة التي تفصل وتباعد بين حدود الخلية وحشوها، أما الصفة cellspacing فتتحكم في المسافة الفارغة المباعدة بين حدود الجدول الخارجية وحدود الخلايا بينها وبين بعضها. | ||
| + | |||
| + | مثال: | ||
| + | <code html> | ||
| + | <table border=" | ||
| + | < | ||
| + | <tr> | ||
| + | < | ||
| + | < | ||
| + | </tr> | ||
| + | <tr> | ||
| + | < | ||
| + | < | ||
| + | </tr> | ||
| + | <tr> | ||
| + | < | ||
| + | < | ||
| + | </tr> | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | ونتيجة المثال السابق كالتالي: | ||
| + | |||
| + | {{: | ||
| + | |||
| + | < | ||
| + | |||
| + | ==== القوائم ==== | ||
| + | القوائم هي احدى طرق تنظيم النصوص في صفحات HTML ولها ثلاثة أشكال: | ||
| + | - القائمة الرقمية: | ||
| + | - القائمة النقطية: | ||
| + | - قائمة التعريفات: | ||
| + | |||
| + | وفيما يلي شرح لكل واحدة مما سبق. | ||
| + | |||
| + | === القائمة الرقمية === | ||
| + | هي قائمة ذات تعداد رقمي، تبدأ بالوسم < | ||
| + | |||
| + | مثال: | ||
| + | |||
| + | <code html> | ||
| + | <ol> | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ol> | ||
| + | </ | ||
| + | |||
| + | ونتيجة المثال السابق كالتالي: | ||
| + | - العنصر الأول | ||
| + | - العنصر الثاني | ||
| + | - العنصر الثالث | ||
| + | |||
| + | == أشكالها == | ||
| + | القائمة الرقمية لها أشكال عدة، فالافتراضي هو الأرقام التي سبق الإشارة إليها، وهناك أشكال أخرى للترقيم، مثل: الترقيم بالأحرف الأبجدية الكبيرة والصغيرة، والترقيم بالأرقام الرومانية (I, II, III, ... إلخ). | ||
| + | |||
| + | لتغيير شكل أرقام القائمة الرقمية نستخدم الصفة type متبوعةً بعلامة الإسناد ثم القيمة التي سنتعرف عليها الآن. | ||
| + | |||
| + | **الأحرف الأبجدية الإنجليزية: | ||
| + | |||
| + | **الأحرف الرومانية: | ||
| + | |||
| + | مثال: | ||
| + | |||
| + | <code html> | ||
| + | < | ||
| + | <ol> | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ol> | ||
| + | |||
| + | < | ||
| + | <ol type=" | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ol> | ||
| + | |||
| + | < | ||
| + | <ol type=" | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ol> | ||
| + | |||
| + | < | ||
| + | <ol type=" | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ol> | ||
| + | |||
| + | < | ||
| + | <ol type=" | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ol> | ||
| + | </ | ||
| + | |||
| + | وهذه نتيجة المثال السابق: | ||
| + | |||
| + | {{: | ||
| + | |||
| + | <note warning> | ||
| + | |||
| + | === القائمة النقطية === | ||
| + | هي قائمة ذات تعداد نقطي، تشبه ذات التعداد الرقمي، نبدأها بالوسم < | ||
| + | |||
| + | مثال: | ||
| + | |||
| + | <code html> | ||
| + | <ul> | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ul> | ||
| + | </ | ||
| + | |||
| + | ونتيجة المثال السابق كالتالي: | ||
| + | |||
| + | * العنصر الأول | ||
| + | * العنصر الثاني | ||
| + | * العنصر الثالث | ||
| + | |||
| + | == أشكالها == | ||
| + | كما أن القائمة الرقمية لها عدة أشكال، فإن لنظيرتها النقطية أشكال أيضاً، فالافتراضي هو شكل الدوائر المغلقة (الرصاصات)، ويمكن تغييرها إلى دوائر مفرغة أو مربعات مغلقة (المربعات المغلقة هي المستخدمة في هذه الويكي)، ولتغيير الشكل نستخدم الصفة type أيضاً. | ||
| + | |||
| + | **الدوائر المغلقة (الافتراضية): | ||
| + | |||
| + | **الدوائر المفرغة: | ||
| + | |||
| + | **المربعات المغلقة: | ||
| + | |||
| + | <code html> | ||
| + | < | ||
| + | <ul type=" | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ul> | ||
| + | |||
| + | < | ||
| + | <ul type=" | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ul> | ||
| + | |||
| + | < | ||
| + | <ul type=" | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ul> | ||
| + | </ | ||
| + | |||
| + | ونتيجة المثال السابق كالتالي: | ||
| + | |||
| + | {{: | ||
| + | |||
| + | === قائمة التعريفات === | ||
| + | تستخدم هذه القائمة إذا كنت تكتب تعريفات لمصطلحات أو قاموس مثلاً، نبدأها بالوسم < | ||
| + | |||
| + | مثال: | ||
| + | |||
| + | <code html> | ||
| + | <dl> | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </dl> | ||
| + | </ | ||
| + | |||
| + | ونتيجة المثال السابق كالتالي: | ||
| + | |||
| + | {{: | ||
| + | |||
| + | <note tip> | ||
| + | |||
| + | === القوائم المتداخلة === | ||
| + | يمكنك أن تضع قوائماً في عنصر قائمة من القوائم السابقة، وذلك لتمثل عدة تقسيمات لذاك العنصر، والمثال التالي يوضح ذلك: | ||
| + | |||
| + | <code html> | ||
| + | <ul> | ||
| + | < | ||
| + | < | ||
| + | <ul> | ||
| + | < | ||
| + | < | ||
| + | <ul> | ||
| + | < | ||
| + | < | ||
| + | </ul> | ||
| + | </li> | ||
| + | </ul> | ||
| + | </li> | ||
| + | < | ||
| + | </ul> | ||
| + | </ | ||
| + | |||
| + | وهذه نتيجة المثال السابق: | ||
| + | |||
| + | {{: | ||
| + | |||
| + | < | ||
| + | </ | ||
| + | |||
| + | ==== النماذج والاستمارات ==== | ||
| + | |||
| + | النماذج أو الاستمارات هي الصفحات التي تحتوي صناديق إدخال لتمرير بيانات من المستخدم إلى الخادم لمعالجتها، ونستخدم الوسم < | ||
| + | |||
| + | ويحتوي الوسم < | ||
| + | |||
| + | كما يمكن أن يحتوي النموذج عناصر إدخال أخرى كصندوق الإدخال النصي متعدد الأسطر < | ||
| + | |||
| + | وكل عناصر الإدخال تلك، يجب أن تحتوي على الصفة name التي ستحدد متغيرات المرسل إلى الخادم، مثل: http:// | ||
| + | |||
| + | مثال: | ||
| + | |||
| + | <code html> | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | <meta http-equiv=" | ||
| + | </ | ||
| + | <body dir=" | ||
| + | <form action=" | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | <br /> | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | <br /> | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | <br /> | ||
| + | < | ||
| + | < | ||
| + | <br /> | ||
| + | < | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | والنتيجة تكون كالتالي: | ||
| + | |||
| + | {{: | ||
| + | |||
| + | === حقول الإدخال النصية === | ||
| + | |||
| + | يتم إدراج حقول الإدخال النصية بوضع القيمة text في الصفة type بالوسم < | ||
| + | |||
| + | مثال: | ||
| + | |||
| + | <code html> | ||
| + | <input type=" | ||
| + | </ | ||
| + | |||
| + | === حقول إدخال كلمات السر === | ||
| + | |||
| + | يتم إدراج حقول الإدخال الخاصة بكلمات السر بوضع القيمة password في الصفة type بالوسم < | ||
| + | |||
| + | مثال: | ||
| + | |||
| + | <code html> | ||
| + | <input type=" | ||
| + | </ | ||
| + | |||
| + | === أزرار الراديو === | ||
| + | |||
| + | يتم إدراج أزرار الراديو بوضع القيمة radio في الصفة type بالوسم < | ||
| + | |||
| + | مثال: | ||
| + | |||
| + | <code html> | ||
| + | <input type=" | ||
| + | < | ||
| + | </ | ||
| + | |||
| + | === الخيارات المتعددة === | ||
| + | |||
| + | يتم إدراج أداة الخيارات المتعددة بوضع القيمة checkbox في الصفة type التابعة للوسم < | ||
| + | |||
| + | مثال: | ||
| + | |||
| + | <code html> | ||
| + | <input type=" | ||
| + | < | ||
| + | </ | ||
| + | |||
| + | === زر الإرسال === | ||
| + | |||
| + | يتم إدارج زر الإرسال بوضع القيمة submit في الصفة type التابعة للوسم < | ||
| + | |||
| + | مثال: | ||
| + | |||
| + | <code html> | ||
| + | <input type=" | ||
| + | </ | ||
| + | |||
| + | === القوائم المنسدلة === | ||
| + | |||
| + | يتم إدراج القائمة المنسدلة بالوسم < | ||
| + | |||
| + | <code html> | ||
| + | <select id=" | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | === صندوق النص متعدد الأسطر === | ||
| + | |||
| + | يدرج صندوق النص متعدد الأسطر بالوسم textarea ويحدد عدد أعمدته بالصفة cols ويحدد عدد صفوفه بالصفة rows، كما في المثال الآتي: | ||
| + | |||
| + | <code html> | ||
| + | < | ||
| + | </ | ||
| + | |||
| + | === حقل إدخال الملفات === | ||
| + | |||
| + | حقل إدخال الملفات هو حقل من حقول HTML5 لكنه مدعوم حاليًا من كافة المتصفحات الحديثة، ويستخدم لرفع الملفات من جهاز الحاسب لدى المستخدم إلى موقع الانترنت، ويتم إدراجه بوضع القيمة file للصفة type في الوسم < | ||
| + | |||
| + | <code html> | ||
| + | <input type=" | ||
| + | </ | ||
| + | |||
| + | === النص === | ||
| + | |||
| + | يُدرج النص التابع لأي حقل إدخال من حقول الإدخال السابقة بالوسم < | ||
| + | |||
| + | <code html> | ||
| + | <label for=" | ||
| + | < | ||
| + | </ | ||
| + | |||
| + | === GET أم POST === | ||
| + | |||
| + | في الوسم < | ||
| + | |||
| + | الطريقة GET أسرع وأبسط من الطريقة POST ويمكن إستخدامها في حالات عدة، حيث أن صندوق العنوان في المتصفح يحتوي على المعلومات التي يتم إرسالها (لذا لا تعد آمنة عند إرسال معلومات حساسة). | ||
| + | |||
| + | الطريقة POST لها عدة مميزات أيضًا .. وينصح باستخدامها غالبًا: | ||
| + | - لا تقوم بتسجيل الخبيئة Cache بل تقوم بتحديث الملف أو قاعدة البيانات دائمًا. | ||
| + | - ليس لها حد أعلى في حجم البيانات المرسلة، فيمكن رفع ملفات من خلالها. | ||
| + | - أكثر أمنًا، فهي تُخفي البيانات الواردة منها في صندوق العنوان، كما لا تعبأ بنوع المحارف المرسل، سواءًا كان يونيكود أم أسكي أم غيره. | ||
| + | |||
| + | وفي النهاية، ترتبط الطريقة التي تستخدمها بتطبيق الويب الذي تستعمله ومدى متطلباتك فيه، وهذه الوثيقة ليست مكانًا لشرح تطبيقات الويب. | ||
| + | |||
| + | ==== الإطارات ==== | ||
| + | |||
| + | من خلال الإطارات تستطيع أن تفتح أكثر من صفحة انترنت في صفحة واحدة، كل واحدة منها تسمى إطارًا، وكل إطار يعتمد على البقية. | ||
| + | |||
| + | لكن، للإطارات سلبيات يجب وضعها في الإعتبار: | ||
| + | - لن تكون مدعومة في الإصدارة القادمة من HTML. | ||
| + | - أصعب في التعامل. (من حيث الطباعة مثلًا). | ||
| + | |||
| + | من خلال الوسم < | ||
| + | |||
| + | <note warning> | ||
| + | |||
| + | نستخدم الوسم < | ||
| + | |||
| + | كما نستخدم الوسم < | ||
| + | |||
| + | مثال: | ||
| + | |||
| + | <code html> | ||
| + | < | ||
| + | |||
| + | < | ||
| + | <frame noresize=" | ||
| + | <frame src=" | ||
| + | <frame src=" | ||
| + | |||
| + | < | ||
| + | <body dir=" | ||
| + | </ | ||
| + | |||
| + | </ | ||
| + | |||
| + | </ | ||
| + | </ | ||
| + | |||
| + | === الإطارات العمودية والأفقية والمختلطة === | ||
| + | |||
| + | لإنشاء إطارات عمودية، نستخدم الصفة cols ونسند إليها عرض كل عمود، إما بالنسبة المئوية، أو بالبكسلات أو حتى وضع * والتي تعني بقية حجم الصفحة. | ||
| + | |||
| + | مثال: | ||
| + | |||
| + | <code html> | ||
| + | < | ||
| + | |||
| + | < | ||
| + | |||
| + | <frame src=" | ||
| + | <frame src=" | ||
| + | <frame src=" | ||
| + | |||
| + | </ | ||
| + | |||
| + | </ | ||
| + | |||
| + | </ | ||
| + | |||
| + | أما الإطارات الأفقية فنستخدم لها الصفة rows في الوسم < | ||
| + | |||
| + | مثال: | ||
| + | |||
| + | <code html> | ||
| + | < | ||
| + | |||
| + | < | ||
| + | |||
| + | <frame src=" | ||
| + | <frame src=" | ||
| + | <frame src=" | ||
| + | |||
| + | </ | ||
| + | |||
| + | </ | ||
| + | |||
| + | </ | ||
| + | |||
| + | ويمكن أن تكون الإطارات مختلطة بين عمودية وأفقية من خلال وضع الوسم < | ||
| + | |||
| + | مثال: | ||
| + | |||
| + | <code html> | ||
| + | < | ||
| + | |||
| + | < | ||
| + | |||
| + | <frame src=" | ||
| + | < | ||
| + | <frame src=" | ||
| + | <frame src=" | ||
| + | </ | ||
| + | |||
| + | </ | ||
| + | |||
| + | </ | ||
| + | |||
| + | </ | ||
| + | |||
| + | === الإبحار عبر الإطارات === | ||
| + | |||
| + | يمكنك تحديد اسم لكل إطار، من خلال الصفة name ثم فتح رابط بأحد الإطارات من خلال استهدافه بالصفة target التي تعلمناها من قبل في قسم الروابط التشعبية، ومن هنا يمكن عمل إطارين، أحدهما يكون فهرسًا، والآخر يعرض الصفحات التي يتم اختيارها من الإطار الأول (الفهرس). | ||
| + | |||
| + | مثال: | ||
| + | |||
| + | <code html> | ||
| + | < | ||
| + | |||
| + | < | ||
| + | |||
| + | <frame src=" | ||
| + | <frame src=" | ||
| + | |||
| + | </ | ||
| + | |||
| + | </ | ||
| + | |||
| + | </ | ||
| + | |||
| + | ونجد مكونات صفحة tryhtml_contents.htm تحتوي على: | ||
| + | |||
| + | <code html> | ||
| + | < | ||
| + | < | ||
| + | |||
| + | <a href =" | ||
| + | <a href =" | ||
| + | <a href =" | ||
| + | |||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | كما يمكنك الإبحار عبر المراسي Anchors في صفحة ما في أحد الإطارات، كما في هذا المثال: | ||
| + | |||
| + | <code html> | ||
| + | < | ||
| + | < | ||
| + | |||
| + | <a href =" | ||
| + | <a href =" | ||
| + | |||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | وللتعرف على كيفية إنشاء المراسي، راجع فقرة الروابط التشعبية أعلاه. | ||
| + | |||
| + | === إطار في سياق الصفحة === | ||
| + | |||
| + | يمكنك أيضًا إنشاء أطر في سياق الصفحة، واستهدافها من خلال الروابط، وذلك من خلال الوسم < | ||
| + | |||
| + | ومن خلال الصفة frameborder يمنك أن تحدد ما إذا كنت تريد إظهار حدود الإطار وذلك بإسناد القيمة 1 أو إخفاء الإطار بإسناد القيمة 0. | ||
| + | |||
| + | أما استهدافه بالروابط فيكون بإضافة الصفة name إليه ثم وضع قيمتها في الصفة target في الرابط. | ||
| + | |||
| + | مثال: | ||
| + | |||
| + | <code html> | ||
| + | <iframe src=" | ||
| + | |||
| + | <p> | ||
| + | <a href=" | ||
| + | </p> | ||
| + | </ | ||
| + | |||
| + | < | ||
| + | |||
| + | ==== الألوان ==== | ||
| + | |||
| + | في عالم الحاسوب، تتكون الألوان من الضوء الأحمر، الأخضر، والأزرق، ويتم تحديدهم بما يسمى كود HEX أو كود RGB. | ||
| + | |||
| + | فأما كود HEX فيتكون بالترتيب من اللون الأحمر، الأخضر، ثم الأزرق وكل لون له قيمة صغرى 00 و كبرى FF. على سبيل المثال: | ||
| + | |||
| + | وأما كود RGB فيتبع نفس ترتيب الألوان لكن القيمة الصغرى لكل لون هي 0 والكبرى هي 255، فعلى سبيل المثال: | ||
| + | |||
| + | من هنا نعرف أن كود HEX يتكون من 3 أزواج رقمية، كل زوج يعبر عن أحد الأضواء الثلاثة، ويسبق هذا الكود علامة #. بينما كود RGB يشبه الدوال البرمجية في كونه له ثلاثة معطيات، كل معطى يعبر عن لون من الألوان بنفس الترتيب المعروف. | ||
| + | |||
| + | نتيجة لخلط الأضواء الثلاثة بهذه النسب والقيم، أدى إلى وجود 16 مليون لون (256 * 256 * 256)، يمكنك أن تجربها بكتابة #000000 ثم تغيير قيم أول زوج رقمي (المسؤول عن اللون الأحمر) فتتدرج به من 00 إلى FF مع ثبات قيم الأخضر والأزرق على الصفر. | ||
| + | |||
| + | {{: | ||
| + | |||
| + | === الضوء الرمادي === | ||
| + | |||
| + | يتكون الرمادي من كميات متعادلة من الألوان الثلاثة، الأحمر والأخضر والأزرق. | ||
| + | |||
| + | أمثلة: | ||
| + | |||
| + | <code html> | ||
| + | #000000 | ||
| + | #111111 | ||
| + | #222222 | ||
| + | #121212 | ||
| + | #565656 | ||
| + | #c0c0c0 | ||
| + | #e9e9e9 | ||
| + | </ | ||
| + | |||
| + | {{: | ||
| + | |||
| + | === ألوان الشابكة الآمنة === | ||
| + | |||
| + | منذ عدة سنين مضت، لم تكن الحواسيب تدعم أكثر من 256 لونًا، لذا وضعت قائمة بالألوان التي تدعمها جميع الأنظمة والمتصفحات، وتتكون هذه القائمة من 216 لونًا، وقد وضعت كمعيار قياسي. | ||
| + | |||
| + | لم تعد هنالك حاجة لمثل هذه القائمة، فقد أصبحت جميع المتصفحات والأنظمة تدعم جميع الألوان. | ||
| + | |||
| + | إليك قائمة الألوان الآمنة والمعيارية: | ||
| + | |||
| + | {{: | ||
| + | |||
| + | === أسماء الألوان === | ||
| + | |||
| + | وللتسهيل على مطوري الويب، والمبرمجين، دُعمت بعض أسماء الألوان في HTML وعددهم 147 لونًا تعمل مع كافة المتصفحات الشهيرة. هذه الأسماء ليست معيارية إلا 17 لونًا. | ||
| + | |||
| + | أسماء الألوان المعيارية السبعة عشر: aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. | ||
| + | |||
| + | أما بقية الأسماء فتجدها مرتبة حسب الترتيب الهجائي للأسماء في [[http:// | ||
| + | |||
| + | ===== تعريف الملف وفحصه ===== | ||
| + | |||
| + | ==== HTML أم XML ==== | ||
| + | |||
| + | ==== الإصدارات والأطوار ==== | ||
| + | هناك عدة أطوار لنفس الإصدار من المعايير | ||
| + | * الصارم Strict | ||
| + | * الانتقالي Transitional | ||
| + | * طقم الأطر Frameset | ||
| + | |||
| + | إذا استخدمت الانتقالي فإن المزايا التي ستكون في الإصدار التالي قد تكون مدعومة. | ||
| + | |||
| + | ==== طرق تعريف نوع HTML ==== | ||
| + | إذا قمت بتعريف ملف XHTML بطريقة تقليدية كما تفعل مع ملفات xml هكذا | ||
| + | <code xml> | ||
| + | <?xml version=' | ||
| + | <html xmlns=" | ||
| + | ... | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | فإنك ستحصل على الكثير من المشاكل في بعض المتصفحات. | ||
| + | الطريقة العيارية لعمل ذلك في XHTML (الإصدار 1.0 الانتقالي) هي هكذا | ||
| + | |||
| + | <code html> | ||
| + | < | ||
| + | PUBLIC " | ||
| + | " | ||
| + | <html xmlns=" | ||
| + | ... | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | في حين لو أنّنا أردنا عمل ذلك في HTML الإصدار 4.01 الانتقالي فإنّنا نعمل | ||
| + | |||
| + | <code html> | ||
| + | < | ||
| + | " | ||
| + | < | ||
| + | ... | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | |||
| + | * http:// | ||
| + | * http:// | ||
| + | * http:// | ||
| + | * http:// | ||
| + | |||
| + | ==== فحص الملف عبر الإنترنت ==== | ||
| + | توفر مؤسسة w3.org خدمة فحص سلامة أي موقع عبر زيارة الموقع http:// | ||
| + | |||
| + | * http:// | ||
| + | |||
| + | ==== أدوات فحص الملفات ==== | ||
| + | يمكن فحص سلامة ملفات XML بشكل عام (وبالتالي XHTML) بطريقة عمياء بغض النظر عن إصدار XHTML وبغض النظر عن القواعد التفصيلية عبر أداة xmllint الموجودة في حزمةlibxml2 | ||
| + | |||
| + | <code bash> | ||
| + | xmllint --noout test.html 2>&1 | less | ||
| + | </ | ||
| + | |||
| + | هذا الفحص لا يأخذ بعين الاعتبار خصوصية إصدارات XHTML المختلفة | ||
| + | |||
| + | أما فحص سلامة الملف بشكل أدق لتطبيق إصدار معين علينا تمرير ملف يحتوي على قواعد الإصدارة المستخدمة في الفحص | ||
| + | |||
| + | مثلا لفحص سلامة ملف HTML 4.01 في فيدورا (وبالتالي أعجوبة) بعد تثبيت حزمتي opensp و html401-dtds ثم نفذ | ||
| + | <code bash> | ||
| + | onsgmls -c / | ||
| + | </ | ||
| + | |||
| + | يمكن القيام بذلك عبر xmllint لفحص سلامة ملف transitional xhtml 1 بالأمر | ||
| + | < | ||
| + | xmllint --dtdvalid file:/// | ||
| + | </ | ||
| + | الملف الذي يحتوي قواعد تدقيق سلامة ملف xhtml أتى في فيدورا من حزمة اسمها xhtml1-dtds | ||
| + | |||
| + | ==== مرحبا، يا معايير! ==== | ||
| + | أنشئ ملفا نصيا صرفا وضع فيه ما يلي: | ||
| + | <code html> | ||
| + | < | ||
| + | PUBLIC " | ||
| + | " | ||
| + | <html xmlns=" | ||
| + | <body dir=" | ||
| + | < | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | احفظ الملف باسم hello3.html ثم استخدم متصفح إنترنت لعرض الملف. | ||
| + | |||
| + | ===== ترويس الملف ===== | ||
| + | ==== وسم head و title ==== | ||
| + | الوسم head يحتوي كل العقد nodes التي لا تكون جزء من متن الصفحة مثل وسم title الذي يحدد عنوان الصفحة الذي يظهر في شريط العنوان ويستخدم هكذا | ||
| + | |||
| + | <code html> | ||
| + | < | ||
| + | PUBLIC " | ||
| + | " | ||
| + | <html xmlns=" | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | <body dir=" | ||
| + | < | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | ==== تحديد الترميز ==== | ||
| + | يتم تحديد الترميز مثل utf-8 عبر وسم meta داخل وسم head هكذا | ||
| + | <code html> | ||
| + | <meta http-equiv=" | ||
| + | </ | ||
| + | ==== الكلمات المفتاحية والوصف ==== | ||
| + | يمكنك مساعدة محركات البحث عبر إخبارها الكلمات المفتاحية المرتبطة بالصفحة. وكتابة وصف صغير للموقع. | ||
| + | |||
| + | <code html> | ||
| + | <meta name=" | ||
| + | <meta name=" | ||
| + | </ | ||
| + | |||
| + | ==== أيقونة المفضلة ==== | ||
| + | داخل head يمكنك استعمال الوسم link من نوع " | ||
| + | <code html> | ||
| + | <link rel=" | ||
| + | </ | ||
| + | ==== البدائل ==== | ||
| + | إن كنت توفر الموقع بعدة هيئات متكافئة مثلا pdf أو txt أو حتى ملف HTML آخر يكون مناسب للطباعة يمكنك تحديد هذه البدائل هكذا | ||
| + | |||
| + | <code html> | ||
| + | <link rel=" | ||
| + | <link rel=" | ||
| + | <link rel=" | ||
| + | </ | ||
| + | |||
| + | نفس الطريقة تستخدم في إظهار آخر أخبار الموقع عبر تلقيمات rss | ||
| + | |||
| + | <code html> | ||
| + | <link rel=" | ||
| + | </ | ||
| + | |||
| + | ===== المحتوى والعرض ===== | ||
| + | |||
| + | ==== الفرق بين المحتوى والعرض ==== | ||
| + | المحتوى content يفترض أن يتم تمثيله بعيدا عن طريقة عرضه presentation. | ||
| + | بكلمات أخرى أن لا تقول أن هذا ثخين وهذا مائل وهذا أحمر بل تقول هذا مهم وهذا مصطلح وذاك خطير ... وبناء على المحتوى يتم اختيار طريقة عرض مناسبة يمكن تعديلها بطريقة موحدة ومنفصلة عن المحتوى. | ||
| + | |||
| + | ==== فائدة تعريف تنسيق سمات CSS ==== | ||
| + | إن تم فصل المحتوى عن طريقة العرض يمكننا ضمان اختيار مظهر موحد لكل المحتوى ذي الدلالة الواحدة. | ||
| + | كذلك يمكنك عمل أكثر من تمثيل للمحتوى الواحد مثلا يمكن تحديد تنسيق مختلف يظهر على الأأجهزة الكفية وتنسيق آخر للطباعة وتنسيق آخر يناسب الشاشة وهكذا. | ||
| + | |||
| + | |||
| + | ==== إدراج تنسيقات CSS في الملف ==== | ||
| + | يمكن إدراج أكواد css الخاصة بالتنسيق داخل ترويسة ملف HTML هكذا | ||
| + | <code html> | ||
| + | <style type=" | ||
| + | /* CSS code goes here */ | ||
| + | body{ background: | ||
| + | /* ... */ | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | ==== ربط ملف CSS خارجي ==== | ||
| + | إن الإحالة على ملف css في ملف خارجي تفيد عندما يكون عندك أكثر من صفحة لها نفس التنسيق كذلك تفيد في توفير زمن التحميل فهي تحمل مرة واحدة أي يتم عمل نسخة خبيئة cached منها. | ||
| + | |||
| + | يتم عمل هذا الربط أو الإحالة عبر ذكر الاسم في href في وسم من نوع link داخل ترويسة الملف هكذا | ||
| + | |||
| + | <code html> | ||
| + | <link rel=" | ||
| + | </ | ||
| + | |||
| + | حيث myfile.css هو اسم الملف وجوز أن يكون مسارا مطلقا هكذا | ||
| + | |||
| + | <code html> | ||
| + | <link rel=" | ||
| + | </ | ||
| + | |||
| + | لمزيد من التفاصيل عن CSS راجع وثيقة " | ||