HTML
إنها اللغة المستخدمة لإنشاء صفحات الإنترنت.
والكلمة إختصار لـ ( Hyper Text Markup Language). وهي ليست لغة برمجة بالمعنى والشكل المتعارف عليه للغات البرمجة الأخرى كلغة C فهي مثلاً لا تحتوي على جمل التحكم والدوران، وعند الحاجة لاستخدام هذه الجمل يجب تضمين شيفرات من لغات أخرى كـ Java, JavaScript, كذلك فهي لا تحتاج إلى مترجم خاص به Compiler وهي غير مرتبطة بنظام تشغيل معين، لأنه يتم تفسيرها وتنفيذ تعليماتها مباشرة من قبل متصفح الإنترنت وبغض النظر عن النظام المستخدم. لذلك فهي لغة بسيطة جداً، وسهلة الفهم والتعلم ولا تحتاج لمعرفة مسبقة بلغات البرمجة والهيكلية المستخدمة فيها. بل ربما كل ما تحتاجه هو القليل من التفكير المنطقي وترتيب الأفكار.
تتكون مفردات لغة Html من شيفرات تسمى TAGS أي الوسوم. وهي تستخدم بشكل أزواج وتكتب بالصيغة التالية (من اليسار إلى اليمين)
: وذلك بالشكل التالي Bold يستخدم لكتابة الكلمات بخط أسود عريض <B> فعلى سبيل
<B> Text </B>
وهناك بعض الوسوم الخاصة التي تستخدم بصورة مفردة مثل وسم نهاية السطر
<P>أو قد تستخدم بكلتا الحالتين مثل وسم الفقرة <BR>
البداية
لا يتطلب كتابة ملف HTML أية برامج خاصة فهي كما قلنا لغة لا تحتوي على برنامج مترجم. بل نحتاج فقط إلى برنامج لتحرير النصوص البسيطة ومعالجتها، وبرنامج المفكرة الموجود فيWindows يفي بهذا الغرض. وكذلك إلى أحد متصفحات الإنترنت لمعاينة الصفحات التي نقوم بتصميمها. وعليك فقط أن نقوم بحفظ النص المكتوب بملف يحمل الاسم الممتد .html أو .htm
والجدير ذكره أنه يوجد العديد من البرامج التي تستخدم لإنشاء صفحات Html. دون الحاجة لمعرفة هذه اللغة حيث يقوم المستخدم من خلالها بكتابة الصفحات وتصميمها بما تحويه من نصوص ورسومات وجداول ثم يقوم البرنامج بتخليق الوسوم المناسبة وتحويل هذه الصفحات من وراء الكواليس تلقائياً وحفظها بتنسيق htmlأي أن دور المستخدم ينحصر في الكتابة والتصميم فقط، دون معرفته للشيفرة التي استخدمت. وبالتالي عدم قدرته على التحكم بأي وسم أو تعديل الشيفرة حسب الحاجة، إلا من خلال إعادته للتصميم الأساسي ثم إعادة التحويل والحفظ من قبل البرنامج.
الأساسيات
وسم البداية وسم النهاية
<HTML></HTML>
<HEAD></HEAD>
<TITLE></TITLE>
<BODY></BODY>
كل منها يتألف من زوج من الوسوم أحدهما وسم البداية، والآخر وسم النهاية. ويتميز وسم النهاية بوجود الرمز /
* ملف Html يبدأ دائماً بالوسم <HTML> وينتهي بالوسم </HTML>.
* الوسم <HEAD> فيحدد بداية المقطع الذي يحتوي على المعلومات الخاصة بتعريف الصفحة. كالعنوان الظاهر على شريط عنوان المتصفح وهذا العنوان بدوره يحتاج لأن يوضع بين الوسمين: <TITLE> … </TITLE> وبالطبع يجب كتابة الوسم
</HEAD> لكي ننهي هذا المقطع
الوسم <BODY> والذي يتم كتابة نصوص صفحة الويب ضمنه، بالإضافة إلى إدراج الصور والجداول وباقي محتويات الصفحة. وهو أيضاً يحتاج إلى وسم الإنهاء </BODY>
<html><head>
<title> This is a test Webpage </title> </head>
<body> I'm writing my first webpage </body>
</html>
<BR> لانهاء السطر وبداية سطر جديد
<P> لانهاء الفقرة وبداية فقرة جديدة ، ويبدأ بسطر جديد لكن مع إضافة سطر إضافي فارغ بين الفقرات
  هذا الوسم لإدخال عدة فراغات بين نص وآخر ما عليك إلا كتابة هذا الوسم بنفس عدد الفراغات المطلوب. كما يجب عليك التقيد بالأحرف الصغيرة والأحرف هي اختصار للعبارة Non Breakable Space).) بالنسبة لاضافة عدد الفراغات فيجب كما يلي :
 
كل واحدة تمثل فراغ والذي يفصل بينهم الفاصلة المنقوطة (
ملاحظة مهمة :
الرموز الخاصة: هناك العديد من هذه الرموز والتي يجب أن تكتب بصورة معينة وباستخدام الوسوم وليس مباشرة بصورتها العاديةخذ مثلا إشارتي اشارتي اكبر او اصغر او الاقتباس كل هذه الإشارات تستخدم HTMLأصلاً مع الوسوم فهي محجوزه ضمن مفردات لغة
ومن الخطأ استخدامها بصورتها الصريحة لئلا يؤدي ذلك إلى حدوث مشاكل في طريقة عرض الصفحة جدول ببعض هذه الرموز ووسومها المكافئة تكتب كما هي في الجدول وبدون إشارتي < > :
اكواد الالوان :
<BODY BACKGROUND="backimag.jpg"
BGCOLOR="#ffff00"
TEXT="#000066"
LINK="#00ff00"
VLINK="#ff0000"
ALINK="#999999>
هذه الاكواد خاصة بالوسم (body) ، background يعني خلفية الصفحة وتكون هنا صورة اما (BGCOLOR) فيعني لون خلفية الصفحة في حالة عدم وجود خلفية ، و(TEXT) لون النص ، و(LINK) لون الاتباط التشعبي و(VLINK) الارتباط الذي تم زيارته اما (ALINK) يعني الارتباط النشط .
بنسبة للرموز التي بين اشارة الاقتباس فيها تعني الالوان وتمثل بنظام السداسي عشر ويمكن الحصول على هذه القيم للالوان من خلال برامج معينة ويضع قبلها (#) .
التعامل مع النصوص
يتم وضع الوسم البداية قبل النص الذي تريده وعند النهاية النص كما في المثال :
<U> writing </U>
سوف يضع خط تحت كلمة writing
الوسم font من الوسوم المستخدمة مع النصوص فهو يوفر لك امكانية تغيير (لون وحجم ونوع) الخط باستخدام الخصائص ( color و size و face ) على الترتيب
لخاصية color وهى المسئولة عن لون النص يمكن التعامل معها بطريقتين:
اما بكتابة اللون مباشرة "color="red وهى طريقة غير فعالة فالالوان المعروف اسمائها محدودة.
او بكتابة اللون فى شكل رقمى سداسى عشرى "color="#336699. لاحظ ان الرقم مسبوق بعلامة # وهى تخبر المتصفح ان اللون مكتوب فى شكل ارقام
لخاصية size وهى المسئولة عن حجم الخط تأخد قيم من 1الى 7 (من الصغير الى الكبير) مثلا "size="4 .
ويمكن كتابة القيمة بشكل اخر وهى اضافة موجب او سالب قبل القيمة + او - مثلا +2 وهى تعنى اضافة 2 الى القيمة الافتراضية وهى 3 فتصبح القيمة النهائية 5 وهكذا
الخاصية face وهى المسئولة عن نوع الخط وهى تاخذ قيم عديدة تمثل اسماء الخطوط المتاحة ولكن يجب ان تلاحظ عند اختيار الخط انه متوافر عند غالبية الزوار
مثال "face="Tahoma.
ملحوظة يمكن كتابة اكثر من خط وبذلك إذا لم يجد المتصفح الخط الاول يتم اللجوء الى الثانى وهكذا
مثال "face="Arial, Helvetica, sans-serif.
مثال على الوسم font وخصائصه
<html><head>
<title> This is a test Webpage </title> </head>
<body>
<font color="="#ff0000" size="4" face="Arial"> I'm writing first webpage </font>
<P>
<font color="blue"> I'm writing first webpage </font>
</body>
</html>
المحاذاة
تاخذ احدى ثلاثة قيم اما right محاذاه لليمين او left محاذاه لليسار او center محاذاه فى المنتصف، والخاصية dir وهى من الخصائص الهامة جدا للمستخدم العربى لانها هى المسئولة عن جعل اتجاه النص من اليمين الى اليسار (اللغة العربية) او من اليسار الى اليمين (اللغات الاخرى) .
وذلك عن طريق القيمتين rtl اى من اليمين الى اليسار او ltr اى من اليسار الى اليمين
يوضع الوسم :
"يجعل الاوامر الموجدة في body من اليسار الى اليمين " <body dir=rtl>
ملحوظة هذه الخاصية تستخدم مع العديد من الوسوم الاخرى ولعل اهمها الوسم html فبجعل قيمتها rtl تجعل اتجاه الصفحة بالكامل من اليمين الى اليسار <"html dir="rtl>
الوسم center ليس له علاقة بالعنواين وانما يستخدم فى التنصيف اى جعل محاذاة النص الى المنتصف
<center>
<font color="blue"> I'm writing first webpage </font>
</center>
العنواين headings ماهى الا نصوص سميكة تكون كبيرة جدا كما فى الوسم h1 او صغيرة جدا كما فى الوسم h6 وتتدرج من الكبر الى الصغر من الوسم h1 وحتى h6 كما ان المتصفح سيضيف سطر فارغ قبل وبعد اى عنوان
<center>
<h1>عنوان 1</h1>
<h2>عنوان 2</h2>
<h3>عنوان 3</h3>
<h4>عنوان 4</h4>
<h5>عنوان 5</h5>
<h6>عنوان 6</h6>
</center>
سؤال هل يمكن استخدام الوسم font مع الوسم b كبديل عن استخدام الوسوم الخاصة بالعنواين
- نعم فالوسم h1 مثلا يمكن استبداله ب "font size="6 مع الوسم b
<font size="6"><b> h1 بديل عن الوسم </b></font>
العناوين لا تتميز عن هذه الطريقة بالسرعة فى الكتابة فقط وانما وسم العنوان يقوم بانهاء السطر الحالى فى النص, ووضع سطر فارغ قبله وبعده
* الوسم basefont وكلمة base معناها الاساس اى انه يقوم بتحديد القيم الافتراضية لتنسيق النص للصفحة بالكامل فمثلا القيمة الافتراضية للون النص هى الاسود والحجم 3 ولتغيير هذه القيم للصفحة بالكامل نستخدم هذا الوسم
<basefont color="#ffoooo" size="5" face="Tahoma">
الوسم له نفس خصائص الوسم font لكنه يقوم بتطيبقها على الصفحة بالكامل وهذا هو الاختلاف بينه وبين الوسم font الذى يطبقها على جزء محدد من النص ، الوسم لا يحتاج الى وسم إغلاق
* هميش جزء من النص, معنى تهميش نص هى منع المتصفح من عرض هذا النص. ويستخدم ذلك لكتابة بعض الجمل التى تذكرك بشئ ما يساعدك إذا اردت تعديل الصفحة بعد ذلك وانت بالطبع لاترغب ان تظهر هذه الجمل للزائر
<!--first -->
العلامة --!> تحدد بداية النص المهمش والعلامة <-- تحدد نهايته. كما هو واضح فى المثال
التعامل مع الصور :
لوسم المستخدم للتعامل مع الصور هو img ولكن الوسم وحده لايكفى يجب استخدام الخاصية src معه والتى نحدد من خلالها مكان الصورة , ملحوظة الوسم img لايحتاج الى وسم اغلاق
صفحات ال HTML لا تحوى الصور وانما باستخدام الخاصية src مع الوسم img نقوم بالاشارة الى مكان الصورة المراد عرضها
مثال
<img src="pic.gif">
الخاصية src خاصية ضرورية لادراج الصور والقيمة التى تأخدها هى المسار للصورة المراد ادراجها فإذا كانت الصورة بجوار ملف ال HTML فالمسار الى الصورة هو اسمها فقط, اما اذا كانت الصورة فى مجلد والمجلد بجوار ملف ال HTML فالمسار هو اسم المجلد بالاضافة الى اسم الصورة مثل "folder/pic.gif" وهذا النوع من المسارات يسمى المسارات النسبية لان المسار يكون بالنسبة لملف ال HTML , وهناك نوع اخر يسمى المسار المطلق وسوف نتطرق اليه عند التعامل مع الوصلات
هناك العديد من الخصائص الملحقة بالوسم img والتى تمكننا من التعامل مع الصور مثل طول وعرض الصورة, محاذاة الصورة وغيرها.
الخاصية width مسئولة عن تحديد عرض الصورة بوحدة البيكسل pixel وإذا لم تحدد قيمة لهذه الخاصية فان المتصفح سيعرض الصورة بعرضها الحقيقى.
الخاصية height مسئولة عن تحديد طول الصورة بوحدة البيكسل pixel وإذا لم تحدد قيمة لهذه الخاصية فان المتصفح سيعرض الصورة بطولها الحقيقى.
وهاتان الخاصيتان تستخدمان اذا اردت تعديل طول وعرض (أبعاد) الصورة بدون استخدام برنامج معالجة صور, وحتى اذا لم ترغب فى تعديل أبعاد الصورة فمن الافضل تحديد الطول والعرض دائما.
<img src="pic.gif" width="50" height="50">
الخاصية align من الخصائص الهامة فى التعامل مع الصور وتأخد قيم كثيرة وهى تستخدم للتحكم فى محاذاة الصورة مع النص, فلك ان تعلم انه يمكنك وضع صورة وسط جملة نصية وستظهر الصورة فى النص مكان ادراجها مباشرة والهدف من هذه الخاصية هو التحكم فى وضعية النص يمين ويسار الصورة, والقيم المتاحة لهذه الخاصية هى top و middle و bottom وهناك قيمتين left و right ولكن عملهم يختلف عن عمل القيم السابقة
هذا جزء من النص قبل ادراج الصورة تكملة النص بعد ادراج الصورة. كما تلاحظ تم محازاة النص يمين ويسار الصورة الى الحافة السفلية للصورة وهذه هى القيمة الافتراضية للخاصية وهى bottom. يمكن جعل النص بمحازاة الحافة العلوية للصورة باستخدام القيمة topو قيمة middle في الوسط
<img src="pic.gif" width="50" height="50" align="top">
استخدام القيمتين right او left :ذكرنا سابقا ان الصورة تظهر فى النص مكان ادراجها مباشرة ولكن عند استخدام احدى هاتين القيمتين مع الخاصية align فإن الصورة تظهر اما فى يمين الصفحة او يسار الصفحة , وفى هذه الحالة يلتف النص حول الصورة.
<img src="pic.gif" width="50" height="50" align="right">
<img src="pic.gif" width="50" height="50" align="left">
التعامل مع الارتباطات التشعبية
<a href="URL">title UTL</a>
تضع مكان URL عنوان الموقع الذي يبدأ بـ http)://) ثم الموقع ومكان title URL تضع اسم الموقع كما في المثال
<a href="http://www.sho3a3.alafdal.net">sho3a3</a>
* تسطيع وضع رابط لتحميل ملف او ارسال ملففقط عليك نسخ الرابط وضضعه مكان (URL) كما في المثال
</span></p>
<div style="mso-element: para-border-div; mso-border-alt: inset windowtext .75pt; border: 1.0pt inset; padding: 5.0pt; background: #F2F6F8">
<pre dir="LTR" style="font-size: 10.0pt; font-family: Courier New; border: medium none; margin-left: 0cm; margin-right: 0cm; margin-top: 0cm; margin-bottom: .0001pt; padding: 0cm; background: #F2F6F8"><span style="font-size: 14.0pt; font-family: Times New Roman; color: black"><a href="abc.mp3"></span><span lang="AR-SA" dir="RTL" style="font-size: 14.0pt; font-family: Times New Roman; color: black">حمل الملف</span><span style="font-size: 14.0pt; font-family: Times New Roman; color: black"></a></span></pre>
</div>
<p class="MsoNormal" dir="RTL" style="margin-right: -.2pt">
<span lang="AR-JO" style="font-size: 14.0pt; color: black">
عمل الجداول
الجداول من اهم مكونات صفحة الويب لأننا بفضلها نستطيع تنظيم المعلومات
ندرج الجدول عن طريق امر <table> </table>
ثم ندرج الصفوف داخل الجدول بأمر <tr> </tr>
(اختياري) اذا اردنا ادراج خلايا للعناوين بالجدول نستخدم امر<th> </th> داخل الصفوف
ثم ندرج خلايا البيانات داخل الصفوف باستخدام امر <td> </td>
- لا تنسوا هنا كل شيء من اليسار الى اليمين
*خصائص الجدول:
-الخاصية border :لعمل حدود للجدول وتحديد سمكها
-الخاصية bgcolor :لتحديد لون لخلفية الجدول
*بامكانك عمل عنوان للجدول يظهر فوق الجدول باستخدام امر <caption> </caption>
<table border="3" bgcolor="green">
<caption>My Address Book</caption>
<tr>
<th>Name</th>
<th>Address</th>
<th>Telephone Number</th>
</tr>
<tr>
<td>mohammad</td>
<td>ABC ST.</td>
<td>12345678</td>
</table>
في النهاية:
تعلمت طريقةالتعامل مع الاكواد والان بسهولة يمكنك وضع اي كود لانك فهمت التعامل معها ، فقط تبحث عن الكود عن طريق الانترنت ثم تضعه في التصميم ....
تحميل PDF
للدخل اضغط هنا اعداد
محمد وائل ابوفارس
لمزيد من المعلومات :
منتديات شعاع الاحساس
www.sho3a3.alafdal.net
موضوع: دورة HTML ..... 
الثلاثاء يونيو 28, 2011 1:58 pm
