السلام عليكم ، سنعرض في هذا المقال مقدمة بسيطة ومدخل إلى عالم تصميم صفحات الانترنت حيث ستكون بعد قراءة و فهم هذا المقال قادرا ًعلى أن تصمم صفحة الانترنت الخاصة بك ولو مبدئيا ًبشكل مبسط ، ولكن هذه ستكون الخطوة الأولى لك في عالم المصممين المحترفين ، وستكتشف بأن الأمر ليس بالتعقيد الذي نتخيله. لكن كل ما أتمنى منك أن تقرأ المقال بتروي دون أن تشعر نفسك بأن الأمر صعب أو معقد.
مقدمة وسمات لغة HTML:
ما هي هذه اللغة ؟ وفيم تستخدم ؟
وهي أحرف اختصار لـ Hyper Text Markup Language ، ومعناها : " لغة ترقية النصوص الحرفية ". وتستخدم هذه اللغة في برمجة وإنشاء صفحات الإنترنت وبالتالي مواقع الإنترنت المختلفة ، وهي من أسهل اللغات وأبسطها في هذا المجال.
ما هي مميزات هذه اللغة عن غيرها؟
لهذه اللغة ميزات عديدة من أهمها :
1- عدم ارتباطها بنظام تشغيل معين ، وبالتالي فهي تعمل على أي جهاز وبأي نظام تشغيل.
2- يتم مباشرة تفسير الأوامر من قبل أي متصفح إنترنت كـ Internet Explorer & Fire Fox & Netscape.
3- بساطة قواعد اللغة فلا توجد بها قيود كثيرة.
4-إمكان إدراج ملفات الوسائط المتعددة أو Multimedia مما يعطي الصفحة حيوية أكثر.
5-إمكان ربط الصفحات ببعضها بأوامر بسيطة مما يسهل التنقل بينها.
6- يمكن الإطلاع على كود أي صفحة مما يعطي الباحث إمكانية معرفة الملايين من الأمثلة والأكواد.
1- عدم ارتباطها بنظام تشغيل معين ، وبالتالي فهي تعمل على أي جهاز وبأي نظام تشغيل.
2- يتم مباشرة تفسير الأوامر من قبل أي متصفح إنترنت كـ Internet Explorer & Fire Fox & Netscape.
3- بساطة قواعد اللغة فلا توجد بها قيود كثيرة.
4-إمكان إدراج ملفات الوسائط المتعددة أو Multimedia مما يعطي الصفحة حيوية أكثر.
5-إمكان ربط الصفحات ببعضها بأوامر بسيطة مما يسهل التنقل بينها.
6- يمكن الإطلاع على كود أي صفحة مما يعطي الباحث إمكانية معرفة الملايين من الأمثلة والأكواد.
ما هي متطلبات العمل بهذه اللغة؟
ليس للعمل بهذه اللغة متطلبات خاصة وإنما متطلباتها متوفرة على كل جهاز وعلى كل نظام تشغيل ومن أهم ما تحتاج:
1- برنامج لكتابة الأوامر ، وهو ليس برنامجا خاصاً، بل أي محرر نصوص كـ Notepad & WordPad.
2- متصفح إنترنت لترجمة الأوامر وعرض التصميم، وقد ذكرنا الأمثلة أعلى.
3- والأهم في ذلك كله ألا وهو : معرفة الأوامر أو الأكواد، و الأكواد أو كما يسميها البعض الوسوم TAGs ما هي إلا مجموعة من الرموز تتيح التحكم في عرض النصوص والصور والجداول وما إلى ذلك ......
1- برنامج لكتابة الأوامر ، وهو ليس برنامجا خاصاً، بل أي محرر نصوص كـ Notepad & WordPad.
2- متصفح إنترنت لترجمة الأوامر وعرض التصميم، وقد ذكرنا الأمثلة أعلى.
3- والأهم في ذلك كله ألا وهو : معرفة الأوامر أو الأكواد، و الأكواد أو كما يسميها البعض الوسوم TAGs ما هي إلا مجموعة من الرموز تتيح التحكم في عرض النصوص والصور والجداول وما إلى ذلك ......
خطوات التصميم باستخدام لغة HTML:
1- إنشاء ملف:
افتح برنامج المفكرة Notepad، واحفظ الملف بحيث تضع اسمه(أي اسم صفحة الانترنت التي تريد تصميمها) لكن لاتنسى أن تكتب اللاحقة .htm في نهاية اسم الملف قبل حفظه. بعد ذلك ستلاحظ أن الملف أصبح قابلاً للفتح باستخدام متصفح الانترنت ولكنه سيكون فارغ عند فتحه.
2- الصفحات:
لكي تكتب الأوامر (الوسوم) فإنه يجب عليك فتح الملف بواسطة المفكرة Notepad ثم تكتب الوسوم كما يلي:
دائماً يجب عليك أن تبدأ الكود بوسم <html> وتنتهي بوسم </html>
يكتب عنوان الصفحة ومعلومات عنها ضمن الوسم <head> والوسم </head>
حيث يكتب عنوان النافذة الذي يظهر في شريط عنوان المتصفح بين الوسم <title> والوسم </title>
تكتب محتويات الصفحة بين الوسم <body> والوسم </body>
كما في الشكل :
دائماً يجب عليك أن تبدأ الكود بوسم <html> وتنتهي بوسم </html>
يكتب عنوان الصفحة ومعلومات عنها ضمن الوسم <head> والوسم </head>
حيث يكتب عنوان النافذة الذي يظهر في شريط عنوان المتصفح بين الوسم <title> والوسم </title>
تكتب محتويات الصفحة بين الوسم <body> والوسم </body>
كما في الشكل :
وبعد حفظ الملف ، وفتحه باستخدام مستعرض الانترنت أو تحديث الصفحة إذا كان المستعرض مفتوحا ً فسوف نرى الصفحة كما في الشكل – باستخدام مستعرض الانترنت IE7 مثلا –
3- الفقرات:
وسم إنشاء فقرة جديدة هو <p> وينتهي بـ </p> .
وتستخدم معه بعض الخواص مثل:
dir وتعني اتجاه الكتابة وتأخذ حالتين فمثلا يمكن أن تكون من اليمين لليسار RTL أو من اليسار لليمين LTR .
<p dir = RTL> وتعني أن الفقرة التي ستتم كتابتها اتجاه النص فيها من اليمين لليسار.
<p dir = LTR> وتعني أن الفقرة التي ستتم كتابتها اتجاه النص فيها من اليسار لليمين.
فمثلا لكتابة فقرة وجعل اتجاهها من اليمين لليسار نكتب الأوامر كما يلي:
وتستخدم معه بعض الخواص مثل:
dir وتعني اتجاه الكتابة وتأخذ حالتين فمثلا يمكن أن تكون من اليمين لليسار RTL أو من اليسار لليمين LTR .
<p dir = RTL> وتعني أن الفقرة التي ستتم كتابتها اتجاه النص فيها من اليمين لليسار.
<p dir = LTR> وتعني أن الفقرة التي ستتم كتابتها اتجاه النص فيها من اليسار لليمين.
فمثلا لكتابة فقرة وجعل اتجاهها من اليمين لليسار نكتب الأوامر كما يلي:
ولو كان الاتجاه من اليسار لليمين ستظهر كما يلي :
align وتعني محاذاة الفقرة
<p align = right> محاذاة لليمين .
<p align = left> محاذاة لليسار
<p align = center> محاذاة للمنتصف .
<br> ويستخدم لبداية سطر جديد .
<hr> لوضع خط فاصل .
فلو أردنا إضافة نص إلى النص السابق ولكن بسطر جديد أمكننا أن نكتب:
<p align = right> محاذاة لليمين .
<p align = left> محاذاة لليسار
<p align = center> محاذاة للمنتصف .
<br> ويستخدم لبداية سطر جديد .
<hr> لوضع خط فاصل .
فلو أردنا إضافة نص إلى النص السابق ولكن بسطر جديد أمكننا أن نكتب:
حيث يأخذ كلا هذين الوسمين خصائص مثل الحجم size و width العرض و color اللون.
<hr size> لتحديد حجم الخط الفاصل.
<hr width> لتحديد عرض الخط الفاصل.
<hr color> لتحديد لون الخط الفاصل.
الوسم <font> وهو الوسم المعني بتحديد نوع وحجم ولون الخط،
<font face> لتغيير نوع الخط.
<font size> لتغيير حجم الخط.
<font color> لتغيير لون الخط.
حيث يتراوح حجم الخط بين 1 و 7.
يعرض المثال التالي تغيير نوع وحجم ولون الخط.
<hr size> لتحديد حجم الخط الفاصل.
<hr width> لتحديد عرض الخط الفاصل.
<hr color> لتحديد لون الخط الفاصل.
الوسم <font> وهو الوسم المعني بتحديد نوع وحجم ولون الخط،
<font face> لتغيير نوع الخط.
<font size> لتغيير حجم الخط.
<font color> لتغيير لون الخط.
حيث يتراوح حجم الخط بين 1 و 7.
يعرض المثال التالي تغيير نوع وحجم ولون الخط.
يجب علينا أن نلاحظ أنه يمكننا وضع قيمة اللون كعدد أو كتابتها ككلمة ، وعندما نريد كتابة الرقم كعدد فإنه يمثل بعدد من ست خانات بالنظام الست عشري، الخانتين العليا للأحمر والوسطى للأخضر والدنيا للأزرق فمثلا لو أردنا الحصول على اللون الأزرق الصافي، سوف نضع قيمة كل من الأخضر والأحمر صفر والأزرق ff كما في المثال:
وسوم أخرى:
<U> لوضع خط تحت النص وينتهي بـ </U>
<I> لجعل النص مائلا ً وينتهي بـ </I>
<B> لجعل النص غامق وينتهي بـ </B>
وسوم خلفية الصفحة:
هناك وسمين هامين بالنسبة لخلفية الصفحة وهما:
<bgcolor> ويعني لون الخلفية.
<background> هذا فيما لو أردنا جعل الخلفية هي عبارة عن صورة .
مثال:
جعل خلفية الصفحة هي عبارة عن صورة، لاحظ أننا يجب أن نحدد مسار مكان ملف الصورة كاملا إلا إذا كانت الصورة موجودة بنفس مكان ملف التصميم الخاص بالصفحة.
<U> لوضع خط تحت النص وينتهي بـ </U>
<I> لجعل النص مائلا ً وينتهي بـ </I>
<B> لجعل النص غامق وينتهي بـ </B>
وسوم خلفية الصفحة:
هناك وسمين هامين بالنسبة لخلفية الصفحة وهما:
<bgcolor> ويعني لون الخلفية.
<background> هذا فيما لو أردنا جعل الخلفية هي عبارة عن صورة .
مثال:
جعل خلفية الصفحة هي عبارة عن صورة، لاحظ أننا يجب أن نحدد مسار مكان ملف الصورة كاملا إلا إذا كانت الصورة موجودة بنفس مكان ملف التصميم الخاص بالصفحة.
4- الجداول:
<table border> لإنشاء جدول وينتهي بالأمر </table>
<tr> لإنشاء صف في الجدول وينتهي بـ </tr> .
<th> لإنشاء خلية عنوان وتنتهي بـ </th> .
<td> لإنشاء خلية عادية .
ويعطي الوسم <caption> عنوان للجدول وينتهي بـ </caption> .
مثال على جدول يضم عمودين الأول يحدد نوع الفواكه والثاني يحد سعرها مثلا ً.
<tr> لإنشاء صف في الجدول وينتهي بـ </tr> .
<th> لإنشاء خلية عنوان وتنتهي بـ </th> .
<td> لإنشاء خلية عادية .
ويعطي الوسم <caption> عنوان للجدول وينتهي بـ </caption> .
مثال على جدول يضم عمودين الأول يحدد نوع الفواكه والثاني يحد سعرها مثلا ً.
<html >
<head >
<title >
Kusay Web Site
</title >
</head >
<body >
<p dir = RTL >
السلام عليكم ورحمة الله
<br >
<font face = "arial" size= 5 color =0000FF >
أهلا وسهلا بكم في موقع ويب قصي طعمة
وأتمنى لكم قضاء وقت ممتع في مفيد معنا .
<table border >
<caption >
الفواكه
</caption >
<tr >
<th >
نوع الفواكة
</th >
<th >
سعر الفواكه
</th >
<tr >
<td >
التفاح
</td >
<td >
50
</td >
</tr >
<tr >
<td >
الموز
</td >
<td >
65
</td >
</tr >
<tr >
<td >
الإجاص
</td >
<td >
40
</td >
</tr >
</table>
</p >
</body >
</html>
<head >
<title >
Kusay Web Site
</title >
</head >
<body >
<p dir = RTL >
السلام عليكم ورحمة الله
<br >
<font face = "arial" size= 5 color =0000FF >
أهلا وسهلا بكم في موقع ويب قصي طعمة
وأتمنى لكم قضاء وقت ممتع في مفيد معنا .
<table border >
<caption >
الفواكه
</caption >
<tr >
<th >
نوع الفواكة
</th >
<th >
سعر الفواكه
</th >
<tr >
<td >
التفاح
</td >
<td >
50
</td >
</tr >
<tr >
<td >
الموز
</td >
<td >
65
</td >
</tr >
<tr >
<td >
الإجاص
</td >
<td >
40
</td >
</tr >
</table>
</p >
</body >
</html>
5- الوسائط المتعددة:
مثل الصور والصوت والفيديو والفلاش.
يؤدي الوسم <img src = “file name”> وظيفة إدراج صورة ضمن صفحة التصميم ، حيث نضم اسم الصورة ومسارها كاملا ، ولها خصائص width و hight .
يؤدي الوسم <img src = “file name”> وظيفة إدراج صورة ضمن صفحة التصميم ، حيث نضم اسم الصورة ومسارها كاملا ، ولها خصائص width و hight .
6- الارتباطات:
إضافة الروابط هي التي تمكننا من الانتقال من صفحة لأخرى ، ويتم إضافة الرابط كما يلي :
<a href = “address” title =”description”>
هنا يتم وضع النص الذي سيظهر كي يتم الضغط عليه للانتقال للصفحة المطلوبة .
</a>
حيث address يعني عنوان الصفحة التي سيتم الانتقال إليها .
و title يعني أن تضع وصف لهذا الارتباط وهذا الوصف يظهر عند وضع الماوس فوق الارتباط .
مثال:
<a href = “address” title =”description”>
هنا يتم وضع النص الذي سيظهر كي يتم الضغط عليه للانتقال للصفحة المطلوبة .
</a>
حيث address يعني عنوان الصفحة التي سيتم الانتقال إليها .
و title يعني أن تضع وصف لهذا الارتباط وهذا الوصف يظهر عند وضع الماوس فوق الارتباط .
مثال:
< a href ="C:\Documents and Settings\kusay\Desktop\connect.htm" title= “connect”>
اتصل بنا
</a>
اتصل بنا
</a>
7- دليل الأوامر:
وهكذا نكون قد حصلنا على غيض من فيض في تصميم الصفحات بواسطة HTML ، حيث أنه يتوجب عليك للحصول على كل الأوامر الخاصة باللغة العودة للمراجع التي تشرح كامل خفايا اللغة.
0 التعليقات:
إرسال تعليق