تعلم اساسيات HTML للمبتدئين

تعلم لغة HTML

وهي اللغة التى يستعملها المبرمجين في تصميم مواقع كالمواقع الشهبرة حاليا على غرار موقع مرسيدس بينز أو bein sports ويمكنك من خلالها تصميم موقع خاص بك باحترافية عالية جدا وأنصح أن لا تبدأ بنشر و الترويج لموقعك بمجرد تمكنك من صنع موقع احترافي ورائع بل عليك على الاقل التدرب على كل خبايا البرمجة لمدة سنة على الاقل ولا تقلق ليست بالصعوبة التى نتوقعها بل هي سهلة وبسيطة وما تحتاج منا الا الى تركيز وترتيب الافكار ويمكن للجميع تعلمها . وانصحكم عند تعلمكم اللغة حاول ان يكون تفكيرك منصب على تعلمها وأن تفتحها لوحدة (بدون فتح اي موقع آخرى وبالاخص مواقع التواصل الاجتماعي ) وهي عبارة عن لغة خاصة مثلها مثل باقي اللغات . فكل أمر يحتاج منا بعض الى كتابة خاصة ولا تقلل ستحفها بمجرد التعود عليها.

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

مفاجأة

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

ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

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

بسم الله الرحمن الرحيم

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

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

إن عدم اهتمام المطورين بهذه اللغة يعود لكثرة البرامج التي تقدم خدمات تصميم صفحات الإنترنت بسهولة للمطور بينما تقدم له في النهاية كود الـ HTML على طبق من ذهب كبرنامج Microsoft ShairPoint Designer و Adobe Dreamweaver. ولكن ني أعتقد بأن المطور الذي يعمل لدى شركة ويب عليه أن يكون ملما بتفاصيل هذه اللغة لكثرة استعمالها و لكونها متواجدة في كافة صفحات الانترنت أيا كان امتداد هذه الصفحة PHP أو ASP.

قبل أن ننتقل إلى الدرس الثاني علينا الإشارة إلى أن لغة الـ HTML لا تحتاج إلى الكثير من الأدوات لإنشاء صفحات ويب عبرها. فهي من اللغات النادرة التي لا تحتاج إلى خادم Server و لا إلى برنامج خاص بها فبرنامج الـ Notepad كفيل بإنجاز صفحة ويب بلغة الـ HTML.

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

أساسيات لغة الـ HTML

رغم اعتقادي بالأهمية البالغة لهذه اللغة إلا أنني لا أستطيع إنكار أنها من أسهل لغات البرمجة إن لم تكن أسهلها على الإطلاق فهي تعتمد على مجموعة من الوسوم Tags و تقدر مدى معرفة المبرمج بلغة الـ HTML بعدد الوسوم التي يعرفها و التي سبق له التعامل معها.

هناك عدد من الوسوم الأساسية في أي صفحة HTML و التي تشكل نواة الصفحة و هي ..

· <html></html>

· <head></head>

· <body></body>

نلاحظ أن الوسم كتب بطريقتين الأولى كانت بكون ( / ) و الثانية معها إذ يشير الـ ( / ) إلى انتهاء الوسم أو إغلاقه. و الآن حاول معي أن تقوم بفتح برنامج المفكرة Notepad على جهازك و كتابة ما يلي ..

<html>

<body>

</body>

</html>

ثم قم بحفظ الصفحة بامتداد ( .html ) سوف تلاحظ أنك أنشأت صفحة ويب ولكنها فارغة تماما و أن عنوان الصفحة الذي يظهر على المتصفح في الأعلى هو امتداد موقع الصفحة. جرب أن تقوم بإضافة ما يلي بين وسمي <head> و </head> ثم شاهد كيف سيتغير عنوان الصفحة الظاهر في أعلى المتصفح.

<title> My Frist Web Page </title>

الوسم <title> هو أحد الوسوم الأساسية بلغة الـ HTML و الذي لا غنى عنه في معظم صفحات الويب. أما الآن فحاول أن تكتب أي شيء تريد بين وسمي <body> و </body> . و شاهد كيف أن ما ستكتبه بين الوسمين سيظهر بداخل صفحة الويب. مما يعني أن كل ما يكتب بين هاذين الوسمين سوف يظهر في داخل صفحة الويب و أن علينا وضع كل ما نريده أن يظهر في صفحتنا بين هاذين الوسمين.

إذا ما أردنا تلخيص ما سبق فإن إمكاننا القول أن أي صفحة HTML تبدأ بالوسم <html> و تنتهي بالوسم </html>. أما الوسمين <head> و </head> فيحتويان بيانات تعريف الصفحة كالعنوان مثلا و أحيانا يمكن أن تكتب بينهما بعض أكواد تصميم الصفحة ( أكواد CSS ). هذا و يضم الوسم body بين ضفتيه كافة محتويات الصفحة من نصوص و جداول و صور و غيرها.

الخطوط بلغة الـ HTML

كما سبق لنا وذكرنا فإن لغة الـ HTML تتألف من عدد من الوسوم و بالتالي فإن كل ما نرغب بالقيام به في الصفحة مرتبط بوسم ما. في هذا الدرس سوف نتحدث عن كيفية التحكم بخطوط صفحة الـ HTML عبرالوسوم الخاصة بالخطوط و أرغب منك قبل أن نبدأ الدرس بالاطلاع على جدول وسوم الخطوط Fonts Tags Table ولو بشكل سريع لتعي ما سنتعامل معه في هذا الدرس..

الجدول السابق يبين معظم الوسوم المستخدمة للتعامل مع خطوط صفحة الـ HTML و أعتقد بأن مجرد اطلاعك على الجدول السابق و معرفتك لأغراض استخدام كل وسم من الوسوم الواردة في الجدول كفيل بجعلك قادرا على التعامل مع الخطوط. ولكن الوسم <font> مثلا يستعمل عددا من الخصائص يوضحها الجدول التالي..

الوظيفة	الخاصية
تستعمل لتحديد نوع الخط للنص الواقع بين وسمي الخط	face
لتحديد لون الخط	color
لتحديد حجم الخط	Size

لتوضيح كيفية التعامل مع الخطوط بشكل أكبر لابد لنا من تطبيق مثال عليها لذلك قم بفتح ملف Notepad جديد واكتب فيه ما يلي..

<html><head><title>Fonts In HTML</title></head><body><font color="#2020769" size="7" face="Calibri"><strong><em><u> I am trying to use Fonts Tags On HTML</u></em></strong></font> Out of tags </body></html>

ثم شاهد النتيجة. أود فق أن أشير إلى أنني حين قمت بإغلاق الوسوم لجأت إلى إغلاق إخر ما قمت بفتحه ثم قمت بإغلاق ما يسبقه على التوالي.

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

الألوان بلغة الـ HTML

كثيرة هي المراجع ذات الصلة بالألوان منها ما يختص ببرامج التصميم كالـ Photoshop و منها ما يختص بلغتي الـ HTML و الـ CSS ولكنني أنصح بالعودة إلى المراجع الخاصة ببرامج التصميم للاستزادة عن الألوان و العودة إلى مراجع البرمجة للاستزادة عن كيفية التعامل معها.

و بما أن هذا المرجع غير متخصص بلغة الـ HTML فإنني في هذا الدرس سو أتحدث بشكل أساسي عن الخصائص ذات الصلة بالألوان و التي تتبع الوسم <body> و الجدول التالي يوضح تلك الخصائص بشكل جلي..

الوظيفة	الخاصية
لتحديد لون الخلفية للصفحة	Bgcolor
لتحديد صورة الخلفية للصفحة	Background
لتحديد لون الوصلات التشعبية في الصفحة	link
لتحديد لون الوصلات التي قمنا بزيارتها سابقا	vlink
لتحديد لون الوصلة عند النقر عليها	alink
لتحديد لون الخط بشكل عام في الصفحة	text

قم بإنشاء صفحة HTML و قم بوضع نص بين ضفتي الوسم body و لا تقم بإعطاء هذا النص أي خصائص خاصة ثم قم بإضافة التالي إلى الوسم <body> و شاهد النتيجة..

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

التعامل مع الفقرات و النصوص بلغة الـ HTML

لا تخلو صفحة ويب على الإطلاق من نص أو فقرة و في هذا الدرس سوف نحاول تعلم كيفية التعامل مع هذه الفقرات و تنسيقها بأوسمة الـ HTML. لا يحتاج هذا الدرس إلى الكثير من الشرح و التفصيل و إنما يحتاج إلى فهم أن هناك وسمين أساسيين للتعاطي مع الفقرات هما الوسم <br> و هو أحد وسوم الـ HTML المفردة و تتمثل وظيفته بالنزول سطر واحد إلى الأسفل و الوسم <p>و الذي يستعمل كوسم مفرد ليقوم بإنهاء الفقرة و يمكن أن يستعمل كوسم مزدوج في حال أردنا إضافة بعض الخصائص للفقرة كاتجاهها مثلا.و حينها يكون الكود كما يلي ..

<p align="center"> Write you Article here</p>

و هنا أشير فقط إلى أن الخاصية align تأخذ القيم (right, left, center).

هناك أوسمة أخرى ذات صلة بالفقرات و لكن ما ذكرته كفيل بخدمتنا في هذا المرجع و مساعدتنا لعلم لغة الـ PHP و التي تعتبر الهدف الأول لهذا الكتاب.

التعامل مع الصور بلغة الـ HTML

يعتبر هذا الدرس رغم بساطته من أكثر دروس الـ HTML التي سوف نلجأ لاستعمالها خلال تعلمنا للغة الـ PHP و خاصة عدما نقوم بشرح بعض البرمجيات مفتوحة المصدر و كيفية التعديل عليها. كل ما أرغب من الطالب استيعابه في هذا الدرس هو السطر البرمجي التالي..

قمنا في السطر البرمجي السابق بتحديد الصورة التي نرغب بجلبها عبر الخاصية SRC و من ثم قمنا بتحديد أبعاد الصورة كما نريدها أن تظهر على الصفحة بمقياس البكسل عبر الخاصيتين width و height و من ثم حددنا اتجاه الصورة في الصفحة عبر الخاصية align و التي سبق لنا استعمالها في أماكن أخرى.

التعامل مع الوصلات التشعبية بلغة الـ HTML

ما من موقع يخلو من الوصلات التشعبية Links سواء أكانت الوصلة كلمة أم صورة و في كلتا الحالتين نستعمل الطريقة ذاتها لإنشاء الوصلة نقوم في البداية بكتابة السطر البرمجي التالي مستعينين بالوسم <A>

ثم نقوم بوضع ما نرغب بأن يتحول إلى وصلة في المنتصف لينقلنا إلى Google بحيث يصبح السطر البرمجي كما يلي ..

<a href="www.google.com">Go to Google</a>

الجداول بلغة الـ HTML

عندما نرغب في الحديث عن كيفية إنشاء صفحة ويب بلغة الـ HTML فلا بد لنا من الحديث عن الجداول بشكل كبير. ولكن و رغم الأهمية البالغة للجداول فإن شرحها في درس خاص و استيعابها أمر مستحيل إذا أن مثال و اثنين لا يكفيان ليصبح المبرمج قادرا على التعامل مع الجداول بشكل جيد. ولكن و كبقية العناوين في لغة الـ HTML فإن للجداول وسوم خاصة بها يوضحها الجدول التالي :

<table>	الوسم الخاص بافتتاح أو تعريف جدول
</table>	وسم إغلاق الجدول
<tr>	وسم يحدد إنشا صف للجدول
</tr>	وسم يحدد مهاية الصف في الجدول
<td>	وسم افتتاح خلية في الصف
</td>	وسم إغلاق خلية في الصف

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

<table>

</table>

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

النماذج في الـ HTML

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

قم بإنشاء صفحة HTML و بعد وسم <body>قم بكتابة ما يلي ..

أعتقد بأنك الآن قادر على قراءة النص البرمجي السابق إذا قمنا بفتح نموذج و إغلاقه و استعملنا الخاصية action لتحديد المكان الذي سوف يقوم النموذج بإرسال البيانات المدخلة إليه. ثم قمنا باستعمال الخاصية method و التي نحدد من خلالها طريقة نقل هذا النموذج للبيانات، و تأخذ الخاصية method إحدى القيم التالية ..

· Post: عندما تكون عملية المعالجة خارجية

· Get: عندما تكون عملية المعلجة داخلية

و الآن كل ما بقي علينا هو إنشاء الحقول للنوذج بحيث يصبح الشكل العام لكود النموذج كما يلي و يوضح الجدول أدناه كيفية كتابة الحقول بأنواعها..

الوظيفة	السطر البرمجي
إنشاء مربع نص	<input type="text">
لإنشاء خانة للرقم السري	<input type="password">
لإنشاء حقل الاختيار من متعدد	<input type="radio">
لإنشاء حقل تحديد الخيارات	<input type="checkbox">
لإنشاء حقل مخفي	<input type="hidden">
لإنشاء زر تفريغ الحقول	<input type="reset">
لإنشاء زر الإرسال	<input type="submit">

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

الخلاصة

أذكر فقط أنني لست بصدد كتابة مرجع للغة الـ HTML و إنما أعمل على تقديم مرجع للغة الـ PHP و بالتالي فإن محتويات الفصل الأول من هذا المرجع تذكر سوى لضرورتها البالغة لمن يريد تعلم الـ PHP و بالتالي فإن هذا الفصل غير كفيل بتعليمك لغة الـ HTML و إنما هو مجرد مقدمة لهذه اللغة و قد تحتاج إلى اللجوء لمراجع أخرى متخصصة في الـ HTML. فيما يلي أضع بين أيديكم مرجعا لعدد من وسوم الـ HTML:

الوظيفة	وسم النهاية	وسم البداية
وسم أساسي	</html>	<HTML>
وسم أساسي	</head>	<head>
وسم أساسي يضم محتويات الصفحة	</body>	<body>
عنوان الصفحة	</title>	<title>
لتحديد خصائص الفقرة	</p>	<p>
لتوسيط النص أو الفقرة	</center>	<center>
للنزور سطر واحد للأسفل	_____________	<br>
التحكم بلون و نوع و حجم الخط	</font>	<font>
لتحديد خصائص الخط للصفحة كاملة	_____________	<basefont>
للكتابة بخط غامق عريض	</b>	<b>
للكتابة بخط غامق عريض	</strong>	<strong>
للكتابة بخط مائل	</I>	<I>
للكتابة بخط مائل	</em>	<em>
للكتابة بخط مسطر	</u>	<u>
للكتابة بخط مرتفع	</sup>	<sup>
للكتابة بخط منخفض	</sup>	<sub>
للكتابة بخط صغير	</small>	<small>
للكتابة بخط كبير	</big>	<big>
لإلغاء النص بخط فوقه	</strike>	<strike>
لإلغاء النص بخط فوقه	</s>	<s>
للكتابة بنص الآلة الطابعة	</tt>	<tt>
لإدراج صورة	_____________	<img src="myimage.png">
لإدراج رابط	</a>	<a href="#">
لإدراج قائمة متسلسلة	</ol>	<ol>
لإدراج قائمة غير متسلسلة	</ul>	<ul>
لإدراج جدول	</table>	<table>
لإدراج صف في جدول	</tr>	<tr>
لإدراج الخلايا في جدول	</td>	<td>

المثال التطبيقي

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

لنقل أنك قمت بافتتاح شركة تصميم مواقع الكترونية و ترغ بتصميم موقع إلكتروني لها فما هي الخطوة الأولى. بطبيعة الحال لن تكون فتح برنامج الـ Notepad و لا تصميم الشعار و لا أي شيء من هذا القبيل و إنما ستكون إنشاء مخطط توضيحي للموقع ... حاول أن تنشيء مخططا توضيحيا لموقع شركتك ثم انظر إلى المخطط الذي رسمته لشركتي ...

بعد أن قمنا بإنشاء الـ Flow Chart سوف نحاول و عبر برنامج الـ Photoshop أو الرسام أو الـ PowerPoint أي برنامج ترغب به و تحسن استخدامه رسم الشكل العام للموقع أو لنقل خريطة الموقع. شاهد ما قمت به لموقع شركتي و حاول تقليده لتخلق تصميما أوليا لموقع شركتك أنت و حقوق تصميمي محفوظة فلا تحاول استعمال نفس الرسمة بل حاول انشاء رسمة خاصة بك.

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

<html>

<head>

</head>

<body>

</body>

</html>

أعتقد بأن الأمر لا يحتاج إلى الشرح و التفسير فنحن لم نفعل شيئا حتى الآن سوى كتبة الوسوم الأساسية لأي صفحة HTML كما تعلمناها في بداية هذا الفصل. وكما تعلمنا في بداية هذا الفصل فإن كل شيء نرغب بظهوره في صفحة الويب يجب علينا أن نكتبه بين وسمي <body> و </body>.

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

< body bgcolor=”#000000”>

و الآن كيف سنقوم بوضع الخلفية البيضاء فوق الخلفية السوداء و نجعلها في منتصف الصفحة ... ألم يكن من المفترض أن نرسم الخلفية كصورة و نضعها في الصفحة فلم يأتي في الأمثلة السابقة طيلة هذا الفصل ما يشبه هذه الحالة .. فما هو الحل برأيك ؟؟

لقد تناولنا في الدرس السابع من هذا الفصل موضوع كيفية إنشاء الجداول بلغة الـ HTML و أعتقد جازما أن الحل هو بإنشاء جدول و إعطائه الخلفية البيضاء التي نريد.بحيث نكتب بين وسمي الـ body ما يلي :

</tr>

</table>

أما الآن إن علينا تقسيم هذا الجدول بحيث يصبح شبيها بالصورة التي أنشأناها. ففي الصورة التي أنشأتها أنا يتوجب علي خلق 5 صفوف لتصبح الصفحة التي أعمل عليها مشابهة للصورة التي أنشأتها. لذلك سوف أقوم في بداية المطاف بكتابة النص البرمجي الكفيل بإنشاء موقع للـ Banner في صفحتي و سوف يكون هذا النص البرمجي كما يلي :

 </td>

و الآن يتوجب علي إنشاء بقية الصفوف بالطريقة ذاتها فيصبح الشكل النهائي للجدول كما يلي :

<tr>

 </td>

</tr>

<tr>

</tr>

 </td> <td> </td> <td valign="top">

 </td>

<tr>

</tr> <tr>

 </td>

</tr>

</table>

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

و بمجرد إنتهائنا من كتابة هذا النص البرمجي نكون قد انهينا 50% من العمل على الموقع إذ لم يتبق علينا سوى تعبئة الخلايا و الصفوف بالمحتوى الذي نريده و سوف نبدأ الآن بملئ القائمة العامودية في الصفحة و لن ألجأ في هذا المثال لاستعمال أسلوب القوائم بل سألجأ لاستعمال الخاصية align و الوسم <br> بحيث يكون النص البرمجي الخاص بإنشاء القائمة كما يلي :

About Us<br><br>

Our Services<br><br>

Our Products<br><br>

Documents<br><br>

</td>

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

<a href="about_us.html">About Us</a>

بعد أن أقوم بتعميم السطر البرمجي السابق على كافة عناصر القائمة سوف أنتقل إلى الصف الخاص بالـ Banner لوضع الصورة التي أرغب فيها أو التي أنشأتها مسبقا لموقعي. سوف أقوم باستدعاء صورة الـ Banner على أنها خلفية للخلية فيكون السطر البرمجي المراد كتبته كما يلي :

هذا و أشير إلى إمكانية استخدامك للخصائص المتعددة التي يمكن استخدامها مع الخلفيات كالخاصية repeat مثلا أو no-repeat ، و بهذا أكون قد انتهيت من كل ما يحتاج إلى سطور برمجية في هذه الصفحة و لم يتبق علي سوى تعبئة البيانات و إدخال النصوص المراد إدخالها في منطقة الـ Body و الـ Footer. و بعد ذلك أقوم بحفظ الصفحة كصفة رئيسة باسم index.html . بعد ذلك أقوم باستخدام نفس النص البرمجي للصفحة لإنشاء صفحة أخرى أحفظها باسم about_us.html مع تغيير المحتويات و النصوص. لأصل إلى صفحة اتصل بنا و التي لا بد لي فيها من إنشاء نموذج إتصال. في لغة الـ HTML لا يمكنني سوى رسم النموذج و ربطه ببريد إلكتروني ما. ولكن ما سنفعله هنا هو رسم النموذج و ترك الخاصية action فارغة حتى نلجأ لاستعمال النموذج ذاته خلال تعلمنا لكيفية ربط النماذج بقاعدة بيانات MYSQL بلغة الـ PHP. و بما أننا نتحدث عن نموذج إتصال لا أكثر فإننا عمليا نتحدث عن 3 أو أربعة خانات كحد أقصى يتوجب على الزائر ملأها ولتكن في هذا المثال اسم الزائر و بريده الإلكتروني و و مدينته و بريده الإلكتروني. بعد كتابة النص البرمجي الخاص بالنوذج فإن النص سيكون كما يلي:

<form method="post" action=""> <table style="width: 100%"> <tr> <td style="width: 118px">Name</td> <td style="width: 6px">:</td> <td><input name="Text1" type="text" /></td> </tr> <tr> <td style="width: 118px">Email</td> <td style="width: 6px">:</td> <td><input name="Text2" type="text" /></td> </tr> <tr> <td style="width: 118px">City</td> <td style="width: 6px">:</td> <td><select name="Select1"> <option>Amman</option> <option>Irbd</option> <option>Al Aqaba</option> </select></td> </tr> <tr> <td style="width: 118px">MSG</td> <td style="width: 6px">:</td> <td><textarea name="TextArea1" cols="20" rows="2"></textarea></td> </tr> <tr> <td style="width: 118px"> </td> <td style="width: 6px"> </td> <td><input name="Submit1" type="submit" value="submit" /><input name="Reset1" type="reset" value="reset" /></td>

</tr>

</table>

</form>

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

كما تعملنا خلال الفصل السابق قمت بافتتاح النموذج عبر وسم الـ Form و استعملت الخاصيتين action التي تركتها فارغة و method التي قمت بإعطائها القيمة post ثم بدأت بتحديد عناصر النموذج فاستعملت الوسم input و حددت قيمة الـ type فيه على أنها text في الحقلين الأولين الخاصين باسم المستخدم و بريده الإلكتروني ثم انتقلت إلى الحقل الثالث في النموذج و هو الحقل الخاص بالمدينة التي يقيم فيها العميل أو المستخدم و استعملت الوسم select لانشاء drop down menu و حددت عناصر هذه القائمة عبر استخدام الوسم المرافق option. انتقلت بعد ذلك لانشاء الحقل الذي سوف يقوم العميل فيه بكتابة نص الرسال فاستخدمت الوسم textarea. و بهذا كنت قد انتهيت من انشاء حقول النموذج فانتقلت لانشاء زر الإرسال و لهذا استعملت مرة أخرى الوسم input و قمت بتحديد القيمة submit للخاصية type و كذلك الأمر فيما يتعلق بزر تفريغ الحقول اذ استعملت كذلك الوسم input و أعطيت القيمة reset للخاصية type. و بهذا كنت قد انتهيت من كتابة النص البرمجي البسيط جدا و الذي سوف ننشيء خلال تماريننا في هذا المرجع ما يفوقه ألف مرة من حيث الحجم و استعمال الخواص.

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

ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

ويمكنكم تحميل الكتاب من هنا :

حمل الأن

ــ لمزيد من المعلومات والاستفسار يمكنكم تركه في تعليق وسأكون متشوق للرد عليكم او التصال على Forever-ad

About Forever ad

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

تعلم اساسيات HTML للمبتدئين

About Forever ad

RELATED POSTS