لغة Html

تابع ...

تعريف
المسافات البيضاء : هي المسافات والأسطر الجديدة وعلامات الجدولة.
ينص بروتوكول http أيضا على أن البيانات ترسل بطريقتين، الأولى تسمى get والثانية تسمى post، يتم إرسال البيانات بطريقة get بصورة بسيطة جدا حيث تكون عبارة عن جزء يضاف إلى إسم البرنامج الذي سيستفيد من البيانات، مثلا إذا كان لديك برنامج يأخذ الإسم والبلد ويخزتها على المزود، وكان عنوان هذا البرنامج هو http://somewhere.com/script.cgi فإن طريقة get ستقوم فقط بعمل إضافة إلى العنوان السابقة هذه الإضافة هي عبارة عن علامة استفهام يليها سطر البيانات الذي جهزته، فيصبح إسم الصفحة http://somewhere.com/script.cgi?name...=United+States ولا بد من أنك صادفت شيئا كهذا وربما أكثر تعقيدا في مربع الوجهة في متصفحك خاصة عندما تزور المواقع الضخمة وتجري عمليات البحث وغيرها، ستجد كل هذه البيانات في شريط العنوان، هذا بالنسبة لطريقة get في إرسال البيانات، أما الطريقة الثانية فهي طريقة post وفيها يتم إرسال لوحدها مع طلب الموقع ولا تظهر البيانات في شريط العنوان، تختلف الطريقتان عن بعضهما البعض في أن الطريقة get أبسط بكثير ويمكنك بسهولة استخدامها كوصلة عادية بأن تركب سطر البيانات بنفسك، ولكن post لا يمكن عملها في صورة وصلة بسهولة، حيث أنها لا تعمل إلى عن طريق النماذج ( الإثنان يعملان بشكل ممتاز بالنماذج )، لكن طريقة post أفضل من get في أنها مناسبة لإرسال كمية كبيرة من البيانات مثل نص رسالة كاملة، حيث يتعسر عرض هذه الأشياء في عنوان الموقع، كذلك البيانات والإتصالات السرية يجب أن تتم بطريقة post ( هذا لا يعني أنها آمنة للشراء عبر الويب وإنما تحتاج إلى تقنيات أخرى ).
مهمة النماذج
بعد أن عرفت كيف يتم إرسال البيانات، يجب أن تعرف مهمة النماذج في كل هذا، تعطيك النماذج واجهة سهلة لإدخال البيانات مثل مربعات النص وقوائم الإختيار ومربعات نعم/لا والأزرار، وغيرها من الأدوات، كل ما عليك فعله هو تحديد مكان البرنامج (http://somewhere.com/script.cgi) في مثالنا السابق، والطريقة التي تريد اتباعها (get أو post)، والبيانات التي تريد إرسالها، وتحدد بعض الألوان والأحجام وتصمم الحقول وتضع زر الإرسال (submit) وانتهى الأمر، كل ما على زائر الصفحة الآن هو أن يملأ بعض الحقول ويختار بعض الخيارات، ويضغط زر الإرسال فيقوم المتصفح بجمع البيانات وتحويلها وتجهيزها ثم إرسالها إلى المكان الذي حددته وحسب الطريقة التي حددتها، النماذج بالفعل هي أفضل طريقة تفاعلية في لغة HTML.
يتم إدراج النموذج بالوسم form ويتم إدراج المعلومات في صورة وسوم input مفردة، يحتوي الوسم form على مجموعة من الخواص أهمها action وفيه تحدد عنوان البرنامج الذي سيستفيد من البيانات، والخاصية الثانية هي method وفيها تحدد طريقة نقل البيانات إما post أو get، أما الوسوم input فأهم خاصية فيها هي type وتحدد فيها نوع الكائن الذي سيأخذ المعلومة من المستخدم، ويأخذ أحد القيم التالية :
· Text : وهو أشهر طرق إرسال المعلومات ويظهر في النموذج في صورة مربع نص يمكن للمستخدم إدخال أي شيء فيه.
· Button : لعمل زر، ويستفاد من الزر في عمل أي شيء.
· Checkbox : لعمل مربع اختيار، إذا تم اختياره فإنه يرسل القيمة on وإذا لم يتم اختياره فإنه لا يرسل أي معلومة.
· File : لإرسال الملفات.
· Hidden : يرسل المعلومة التي تريدها بالقيمة التي تريدها، ولا يظهر أي شيء في صفحة HTML، تستطيع عن طريقه دمج معلومة ما داخل ملف HTML بحيث لا يعلم عنها المستخدم ولا يحتاج إلى تغييرها.
· Image : تستخدم في الكثير من الأمور مثل الزر.
· Password : يستخدم لإرسال كلمة المرور، وهو يرسل كلمة المرور بصورة واضحة دون أية تشفير وإنما يختلف عن مربع النص العادي في أن الحروف تظهر في صورة نجوم ( * ).
· Radio : يستخدم لعمل الدوائر لكي يختار المستخدم قيمة ما من عدة خيارات.
· Reset : يستخدم لمحو محتويات النموذج وإعادته إلى الحالة الأصلية.
· Submit : يظهر في صورة زر يستخدم لإرسال المعلومات الموجودة في النموذج.
يمكنك أيضا إرسال المعلومات مع النموذج بواسطة وسمين آخرين يوضعان أيضا بين وسمي form وهذا الوسمان هما select لعمل قائمة اختيار والوسم textarea لعمل مربع نص متعدد الأسطر، وبين وسمي select نضع عدة وسوم option كل واحد منها يعبر عن بند في القائمة ويكون لكل بند قيمة معينة وترسل قيمة البند الذي تم اختياره.
ملاحظة
لقد قمت بعمل برنامج صغير موجود على المزود يقوم بأخذ المعلومات التي ترسلها بأي من الطريقتين ويعيد لك النتائج في صورة جدول وسنستخدمه لتوجيه جميع الطلبات إليه لمعرفة كيفية عمل النماذج.
إسم البرنامج echo.pl وهو موجود في الدليل الذي به هذا الملف لذا سنقوم باستخدام المسارات النسبية ونحدد الخاصية action في تجاربنا على القيمة echo.pl دائما.
سنقوم في البداية بعمل أمثلة عامة وبعد ذلك سنركز على كل كائن من كائنات النموذج.
أنظر إلى المثال التالي :
<form action="echo.pl">
First Name : <input type="text" name="first_name"><br>
Secound Name : <input type="text" name="secound_name"><br>
<input type="radio" name="exact"> Exact Match
<input type="radio" name="all"> All Words<br>
<input type="hidden" name="todo" value="search">
<input type="submit" value="Search">
</form>


يبو واضحا في المثال السابق كيف يتم نقل المعلومات عبر الويب باستخدام طريقة get، وإذا أعدت التجربة السابقة باستخدام الطريقة post فسوف تحصل على نتائج مطابقة لأن البرنامج الذي أعددته (echo.pl) مجهز للتعامل مع الطريقتين.
مربع النص
نقوم بوضع مربع النص كما ذكرنا سابقا، باستخدام الوسم input مع تغيير الخاصية type له إلى القيمة text، ويمكننا وضع أي محتويات ابتدائية نريدها فيه عن طريق الخاصية value له، ويمكن أيضا التحكم بحجمه عن طريق الخاصية size، لتحديد طول المربع الذي نريده.
<form action="echo.pl" method="get">
Username <input type="text" size="20" name="username"><br>
Email <input type="text" size="40" name="email"><br>
URL <input type="text" size="40" name="url" value="http://"><br>
<input type="submit">
</form>

مربع الإختيار
وهو يوضع بالوسم input أيضا بتحديد الخاصية type لها عند القيمة checkbox، ويمكن بالمعلومات التي سيتم إرسالها عن طريق الإسم بالخاصية name والقيمة بالخاصية value فيمكننا مثلا أن نجعل النموذج يرسل المعلومة do=subscribe إذا قام المستخم باختيار أحد مربعات الخيار، وذلك بضبط الخاصية name له عند القيمة do والخاصية value له عن القيمة subscribe، وعند عدم اختيار مربع الخيار فلن يتم إرسال أي شيء يتعلق به.
أي أنه مثل النوع hidden إلا المستخدم هنا يحدد فقط إذا كانت المعلومة سترسل أو لا.
<form action="echo.pl" method="get">
<input type="checkbox" name="do" value="subscribe"> Subscribe.<br>
<input type="submit">
</form>

الإختيار من متعدد
يمكنك عمل دوائر الإختيار من متعدد بواسطة وسوم input بحيث تضبط خاصيتها type عند القيمة radio، ولعمل مجموعة من الوسوم التي يجب على المستخدم اختيار أحدها قم بعمل وسم input لكل واحد منها واجعل قيمة الخاصية name متساوية فيها جميعا مع تغيير قيمة الخاصية value في كل منها، فيكون عندنا نيابة عن جميع هذه الأزرار معلومة واحدة اسمها يحدد بالقيمة name وقيمتها حسب قيمة الخاصية value للزر الذي تم اختياره.
<form action="echo.pl" action="get">
Age : <br>
<input type="radio" name="age" value="17"> 10 - 17<br>
<input type="radio" name="age" value="50"> 18 - 50<br>
<input type="radio" name="age" value="100"> 51 - 100<br>
Gender : <br>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female<br>
<input type="submit">
</form>



يتبع ..

تابع ...

تلاحظ من المثال السابق أنك تستطيع فقط اختيار Male أو Female من القائمة الثانية، لأنها يمتلكان نفس الإسم name.
القائمة
عند تكوين القائمة نقوم أولا بوضع وسم القائمة select ونعين له خاصية name التي ستظهر في النموذج، وبعد ذلك نقوم بوضع عدة وسوم option لكل منها خاصية value وعند إرسال البيانات سيتم إرسال المعلومة التي إسمها موجود في الخاصية name من الوسم select وقيمتها موجودة في الخاصية value من الوسم option الذي تم اختياره.
<form action="echo.pl" method="get">
<select name="country">
<option value="kw">Kuwait
<option value="sa">Saudia
<option value="ua">Emirates
<option value="qt">Qatar
<option value="bh">Bahrain
<option value="om">Oman
</select>
<input type="submit">
</form>

مربع النص متعدد الأسطر
ويمسى أيضا بالمساحة النصية Textarea، وهو عبارة عن وسم textarea مزدوج ( فتح وإغلاق ) وبينهما تضع المحتويات التي تريدها أن تظهر داخل المربع، وهو يستخدم غالبا مع النماذج التي ترسل معلوماتها بالطريقة post لأنه يستخدم لإرسال كمية كبيرة من البيانات.
يمكنك التحكم في عدد الأسطر بالخاصية rows وعدد الأحرف في كل سطر بالخاصية cols ( عدد الأعمدة ).
<form action="echo.pl" method="get">
<textarea name="message" rows="6" cols="50">
This Text will appear inside the box !
WOW
It's working
</textarea><br>
<input type="submit">
</form>


أمور أضافية
وسوم meta
على الرغم من أن اسمها وسوم meta إلا أنها ليست أكثر من وسم واحد هو الوسم meta !
يستخدم الوسم meta لإعطاء المزيد من المعلومات حول الصفحة، مثل وصف الصفحة والكلمات المفتاحية للصفحة وإسم مؤلف الصفحة وإسم البرنامج المستخدم لتأليف الصفحة وغيرها من المعلومات، وجميع واصفحات meta توضع في ترويسة مستند HTML أي بين وسمي head وهذا أمر طبيعي لأنها ليست جزءا من المحتوى.
تختلف واصفحات meta عن بعضها البعض بالخاصية name أو http-equiv، توجد بعض البرامج تحدد نوع الوسم meta حسب الخاصية name وبرامج أخرى حسب الخاصية http-equiv لذا فمن الأفضل وضع الإثنين.
الخاصية الثانية لوسوم meta هي الخاصية content التي تحدد محتوى المعلومة التي حددت اسمها بكل من الخاصيتين name و http-equiv.
الكلمات المفتاحية مثلا إسمها keywords، فإذا كانت الكلمات المفتاحية في موقعك هي (ألعاب برامج صور مقلات دروس دورات)، فإنك ستحتاج إلى أن يكون لديك الوسم التالي :
<meta name="keywords" http-equiv="keywords"
content="ألعاب,برامج,صور,مقلات,دروس,دورات">
لاحظ من الوسم السابق أن الكلمات المفتاحية يفصل كل منها عن الآخر بفاصلة عادية.
وكما في الطريقة السابقة يتم تحديد معلومات الصفحة بنفس الطريقة، وتأخد الخاصية name أو http-equiv أحد القيم التالية:
· keywords : لتعيين الكلمات المفتاحية للمستند مفصولة بفواصل، ومرتبة حسب أهميتها ولا يجوز التكرار.
· description : لوضع وصف بسيط للصفحة ويفضل أن لا يتعدى العشرون كلمة.
· generator : إسم البرنامج الذي استخدم لإنشاء الصفحة.
· author : إسم مؤلف الصفحة.
· content-type : لتحديد نسق البيانات وصفحة المحارف المستخدمة، لصفحات HTML العربية المكتوبة في الويندوز ضع الوسم كالتالي :
· <meta name="content-type" http-equiv="content-type"
· content="text/html; cahrset=windows-1256">
· copyright : معلومات عن حقوق طبع الصفحة.
تعريب الصفحات
تتلخص إجراءات التعريب في جزئين رئيسيين، أولا إظهار الخطوط بصورة سليمة، وثانيا إظهار الإتجاه بشكل سليم.
لإظهار الخطوط العربية بشكل سليم يجب التأكد من استخدام صفحات المحارف العربية المنتشرة حاليا وهي windows-1256، إذا كنت تكتب صفحاتك في Windows فهذه هي صفحة المحارف القياسية، ما عدا Windows 2000 فهو يستخدم صفحة المحارف العالمية الموحدة Unicode، وأما إذا كنت تكتب صفحاتك في بيئة Unix (Linux مثلا) فإن ذلك يعتمد على البرنامج الذي تستخدمه لتعريب النظام.
وفي جميع الأحوال السابقة فإنك تحتاج لضبط الوسم meta الخاص بنوع المحتوى content-type عند قيمة مناسبة.
أما تغيير اتجاه الصفحات فيتم بعدة طرق، أول طريقة هي استخدام الوسم p وضبط الخاصية align له عند القيمة right، وهي طريقة بسيطة ونافعة، ولكنها تصبح متعبة في المواقع الكبيرة وعندما تريد عمل الكثير من الجداول والتنسيقات، أما الطريقة الثانية وهي الطريقة الأفضل فهي استخدام الخاصية dir في الوسم html وضبطه عند القيمة rtl، يقوم ذلك بجعل الصفحة تتجه كليا من اليمين إلى اليسار، بحيث تصبح الفقرات تتجه من اليمين إلى اليسار، والعناوين تتجه من اليمين إلى اليسار وتصبح الخلية الأولى في الجدول هي الخلية الأولى على اليمين، وهذه الميزة متوفرة تلقائيا في متصفح Internet Explorer وهي غير متوفرة في Netscape Navigator، ولكن عند تركيب Sindbad، فإن هذه الميزة تظهر في صورة زر في على شريط العنوان حيث يحدد المستخدم الإتجاه الذي يريده يدويا ولا تؤثر الخاصية dir على الصفحة تلقائيا.
<html dir="rtl">
ما وراء HTML
الآن وقد انتهيت من تعلم لغة HTML فلا يسعنا أن نقول أنك انتهيت من تعلم مهنة تطوير الويب Web Developing، فلا زال أمامك الكثير لتتعلمه حتى تصل إلى المستوى الإحترافي الذي نطالب به جميع العرب، فتقنيات الويب تتجدد باستمرار ويصبح اللحاق بها كلها أمرا مستحيلا على الضعفاء، أما الأقوياء فهم على الطريق بثبات وبعزمهم وإصرارهم أصبحوا روادا في عالم الكمبيوتر والإنترنت الرائع، بقي علينا أن نعلمك ببعض هذه التقنيات وكيفية الحصول على المزيد من المعلومات عنها، ونعدك بأننا سنواكب جميع هذه التقنيات في دورات مستقبلية إن شاء الله لنؤدي دورنا إلى جميع العرب.
أوراق الأنماط المتتالية
أوراق الأنماط المتتالية أو Casscading Style Sheet أو CSS هي تقنية تستخدم للتحكم في الكيفية التي يجب أن تظهر بها الوسوم في صفحة ويب، فمثلا العنوان الرئيسي H1 يظهر باللون الأسود وبخط عادي وطريقة عادية، ولتغييره كان لا بد من وضع وسم Font داخل كل وسم H1، فماذا لو استطعنا أن نحدد نحن كيف نريد لعنوان الصفحة الرئيسي أن يظهر، وكيف يجب أن تظهر الجداول وكيف يجب أن تظهر جميع الوسوم الأخرى في لغة HTML، الآن يمكننا عمل ذلك باستخدام تقنية CSS، وقد تم تطوير هذه التقنية على المدى الأعوام السابقة حتى وصلنا إلى النسخة الثانية من مواصفات هذه اللغة ويمكن الحصول عليها من مجمع الشبكة العنكبوتية العالمية مع مجموعة كبيرة من الوصلات والكتب والدورات : http://www.w3.org/Style/CSS/
لغة الترميز القابلة للتوسع
لغة الترميز القابلة للتوسع أو eXtensible Markup Language أو XML هي عبارة عن تقنية جديدة بحيث يتم التخلص من الوسوم القياسية ويصبح لكل شخص وسومه الخاصة به، فبد أن ظهرت تقنية CSS أصبح أمر الوسوم غير مهما، فيمكنني مثلا أن أقوم بجعل الوسم h6 الذي لا أستخدمه كثيرا يصبح وسما خاصا له لون خاص وشكل خاص أستخدمه في كتابة الملاحظات مثلا، بحيث يصبح لونها أحمرا وتكون مبروزة ببرواز جميل ولافته للنظر، وهكذا أصبح الإسم h6 لا يشير إلى شيء، فما الفائدة منه الآن !
لذا فقد ظهرت فكرة لغة الترميز .
نسأل الله لكم التوفيق


انتهى ..