دورة تعلم واحترف HTML


#1

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

ما هى HTML ؟

HTML اختصارل (Hyper Text Markup Language)
وهى ليست لغة برمجة بالمعنى المعروف ك C++ , JAVA وغيرهم فهى لغة سهلة و بسيطة يسهل لاى كان تعلمها و اتقانها و لا تحتوى على شفرات كثيرة و لا تحتاج الى مترجم compiler و لا تحتاج الى نظام تشغيل معين لانه يتم تفسيرها و تنفيذها مباشرة من قبل متصفح الانترنت و لا تحتاج لمعرفة مسبقة باى لغة برمجة لكن تحتاج الى القليل من المنطق و ترتيب الافكار و تطبيق عملى لما سوف ندرسه باذن الله .

كيف نبدأ؟

لايتطلب الHTML اى برامج خاصة بل تحتاج الى محرر نصوص بسيط و برنامج المفكرة Notepad الموجود فى Windows يفى بالغرض و كذلك الى احد متصفحات الانترنت مثل Netscape او Internet Explorer لمعاينة الصفحات التى تقوم بانشائها كل ما عليك فعله هو فتح صفحة Notepad ثم حفظها باى اسم و كتابة الامتداد HTML. او HTM.

اولا : الاساسيات

تكتب لغة HTML برموز تسمى الوسوم اوTAGS و تكتب بالضيغة التالية :
<TAG/> النص يكتب بين الوسمين<TAG>
لكل وسم من وسوم اللغة وسم بداية و وسم نهاية كما موضح فى المثال التالى :
<B>Text </B>
و هناك بعض الوسوم المنفردة مثل<BR> وهذا الوسم لاضافة سطر جديد.
سنقوم الان بمعرفة الوسوم الاساسية لصفحة الويب و مناقشتها واحدا تلو الاخر

اذا فملف ال HTML لابد و ان يبدا ب <HTML > و ينتهى ب <HTML/> لا تنسى هذا ابدا .
اما الوسم <HEAD> فيحدد بداية المقطع الذى يحوى المعلومات الخاصة بالصفحة كالعنوان الظاهر على شريط عنوان المتصفح و حقوق النشر و غيرها من الامور التى سنتطرق اليها لاحقا .
عنوان الصفحة يكتب بين الوسمين <TITLE> و <TITLE/>
ثم نغلق وسم head ب <head/>
ثم ناتى للوسم الاكثر اهمية و هو وسم body حيث يكتب فيه محتوى صفحة الويب و ما يظهر للمستخدم user ويغلق فى النهاية ب <body/> .
ما رايك اذا طبقنا ما قرأنا الى الان ؟ …قم بفتح صفحة فى المفكرة Notepad واكتب بها الاتى :

<html>
<head>
 <title> My first web page </title>
</head>
<body>
I'm writing my first web page 
</body>
</html>

الان قم بحفظ ما كتبت باى اسم تختاره و لا تنسى الامتداد html.
لكى تشاهد ما كتبت ادخل على متصفحك فاذا كان Internet explorer فاختار open من قائمة file و اذا كان Netscape فاختار open file وكذلك فى Mozilla Firefox ثم حدد المسار الذى يوجد به الملف .
ستجد النتيجة كالاتى:

هل حصلت على نفس النتيجة ؟ اذن مبروووووووووك فقد قمت بانشاء اول صفحة لك على الويب .
و الان بعض الملاحظات الهامة التى قد تفيدك عند كتابة اللغة
لا يوجد فرق عند كتابة الوسوم بالحروف الكبيرة Uppercase او بالحروف الصغيرة Lowercase .
المتصفحات لا تاخذ بعين الاعتبار المسافات او اشارات نهاية الفقرات (اى عند الضغط على Enter لن ينتقل لسطر جديد) ولذلك يمكن كتابة البرنامج السابق كله على سطر واحد و ستكون النتيجة كما هى (جرب بنفسك.)

<html><head><title> My first web page </title></head><body>I'm writing my first web page </body></html> 

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

<html>
<head>
 <title> My first web page </title>
</head>
<body>
I'm writing <br>my first <br>web page 
</body>
</html>

وهناك ايضا الوسم <p> ويقوم تقريبا بنفس عمل الوسم السابق

<html>
<head>
 <title> My first web page </title>
</head>
<body>
I'm writing <p>my first </p>web page 
</body>
</html>

اما بالنسبة للفراغات فلها رمز خاص و هو; nbsp& وهى اختصار لNon Breakable SPace و على حسب عددها تكون عدد الفراغات و تكتب فى المكان المراد احداث فراغ فيه مثل :

<html>
<head>
 <title> My first web page </title>
</head>
<body>
I'm writing &nbsp; &nbsp;&nbsp my first&nbsp; &nbsp;&nbsp web page 
</body>
</html>

و بذلك نكون انتهينا من الدرس الاول وفى الدرس القادم باذن الله سنتعلم كيفية اضافة حيوية لصفحة الويب باستخدام الالوان .


#2

الالوان

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

<body bgcolor="red">
........................
</body>

وبذلك حددت لون الخلفية (احمر) للصفحة وتوجد طريقتين لتحديد الالوان اما باسم اللون (blue,red,brown,yellow…) او بدرجة اللون نفسه و هى مزج الالوان الاساسية الثلاث الاحمر و الازرق و الاخضر بنسب مختلفة حيث توجد 256 درجة لونية مختلفة

حيث FFFFFF يمثل اللون الابيض و 000000 يمثل اللون الاسود.
و هذا جدول ببعض الالوان و رمزها المكافئة بالنظام ال Hexadecimal

بيان بالوان الخلفيات

ملاحظة هامة بعض المتصفحات لا تتعرف على رموز الالوان الا اذا وضع # قبل الرمز
<body bgcolor ="#ddec45">
وهناك الالوان المعروفة مثل:

وبذلك نكون قد حددنا لون الخلفية ولكن اذا اردنا صورة للخلفية فنستخدم الخاصية background
<body background="images.jpeg">

تلاحظ ان المتصفح قام بتكرار الصورة بطريقة التجانب و اصبحت تغطى كل الخلفية وحتى اذا اخترت لون للخلفية فلن يظهر اى ان لون الخلفية يظهر فقط فى حالة عدم اختيار صورة للخلفية.

عودة مرة اخرة الى body و خاصية جديدة و هى الوصلات links بالتأكيد دخلت على صفحات ويب من قبل و وجدت وصلات تنقلك الى مواقع او صفحات اخرى وتكون غالبا باللون الازرق وعند الضغط عليها تتحول الى اللون الاحمر فكيف يحدث هذا ؟

و الان نكتب الخصائص السابقة فى جملة واحدة

<body bgcolor="navy"  
text="yellow" link="blue"
vlink="purple" alink="red">

و بذلك نكون جعلنا لون الخلفية ازرق قاتم و النص اصفر و الوصلات ازرق و الوصلات التى تمت زيارتها بالقرمزى و النشطة بالاحمر

اذا ظهر لديك نفس الشكل اذا مبروووووك تستطيع الان تلوين صفحتك باى لون تريد.
انتهينا من الالوان و الخلفيات و موعدنا فى اليوم التالى لتعرف على الخطوط باذن الله .


#3
الخطوط
كما ختمنا فى اليوم السابق باننا سنتحدث اليوم عن الخطوط . راجع صفحتنا السابقة التى عملنا فيها على مدار اليومين السابقين . لم نقم باى تعامل مع الخطوط و اشكالها و تركنا الامر الى الاعدادات الافتراضية لمتصفح الانترنت و هى خط عادى , نوعه Times New Roman و حجمه 3 
لنبدأ بتغيير هذا.
الوسم الاول الخاص بالخطوط هو
<font>.......................</font>
و هو يقوم بالتحكم فى الخطوط من حيث النوع و الحجم و اللون و له الخصائص التالية :
Face
وتقوم هذه الخاصية بتحديد نوع الخط المراد استخدامه و يمكن اختيار اكثر من نوع تحسبا فى حالة عدم وجود الخط المحدد فى جهاز متصفح الموقع يتم اعتماد الخط الثانى ..... و هكذا.
<font face="times new roman,modem,......">
.......................
</font>
و لا تنسى كتابة اسماء الخطوط صحيحة .
 Color:
اما هذه الخاصية فتحدد لون الخط و بنفس مبادئ تحديد الالوان التى تحدثنا عنها مسبقا.
<font color="#4553df">
..........................
</font>
Size:
و هذه لتحديد حجم الخط و هناك 7 احجام للخط فقط 
و يوجد طريقتين لتحديد الخط :
اولهما :
<font size="5">
I choose my text size 
</font>
تعالوا نجربها على الاحجام من 1 الى 7 بالترتيب هنجد النتيجة كالاتى:
 
اما الثانى فهو نسبى حيث تكتب الارقام من 1 الى 6 مرفقة اما بعلامة + او - .
<font size="+4">
...............
</font> 
ما يحدث هنا هو تكبير (+) او تصغير (-) جحم الخط بمقدار الرقم المكتوب و ذلك بالنسبة للخط الافتراضى (3) وحتى فى الاسلوب النسبى لا نستطيع الحصول على اكثر من 7 احجام 
مثال توضيحى على ما سبق :
<body>
<font face="time new roman" color="red" size="5">
My goal 
</font> 
<font face="arial" color="blue" size="5">
is learning
</font>
<font face="courier" color="yellow" size="6">
HTML
</font>
</body>
وستكون النتيجة :
والان ننتقل الى الوسم الثانى وهو <Basefont> ويستخدم لتحديد نوع الخط و لونه وحجمه للصفحة كلها
<basefont name="times new roman" color="red" size="5">
وله نفس خصائص font ما عدا نوع الخط يطلق عليه name بدلا من face .
و هناك وسم اخر يستخدم لتمييز العناوين Headings فى صفحات الانترنت و هى :
<Hn>............. </Hn> 
و n هو رقم بين1 و 6 يحدد مستوى العنوان 
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>
نأتى الان الى مجموعة من الوسوم التى تضيف تأثيرات خاصة
وفيما يلى الوسوم الخاصة متبوعة بمثال عليهم 
* الخط الاسود العريض :
<B>........................</B>
<strong>...............</strong>
*الخط المائل Italic
<I>..........................</I>
<em>....................</em>
*الخط المسطر Underlined
<U>........................</U>
*الخط المرتفع ٍSuperscript
<sup>....................</sup>
*الخط المنخفض ٍ Subscript
<sub>....................</sub>
*الخط الكبير Big
<big>.....................</big>
*الخط الصغير ٍ Small
<Small>.............</Small>
*خط يعترضه خط Strike line
<strike>..............</strike>
*خط الالة الكاتبة Teletype
 <TT>.....................</TT>
وهذا مثال يضم كل الوسوم الخاصة :
<body>
<B>bold text</B>
<strong>Strong text</strong>
<I>Italic text</I>
<em>Emphasized</em>
<u>underlined text</u>
<sup>superscript text</sup>
<sub>subscript text</sub>
<big>big text </big>
<small>small text </small>
<strike>strike text</strike>
<tt>teletype text</tt>
</body>
اذا اردت استخدام اكثر من وسم بمعنى النص يكون اسود عريض ومائل و تحته خط مثال على ذلك :
<body>
<b>
<i>
<u>
This text is bold, italic, underline 
</u>
</i>
</b>
</body>
و بذلك نكون قد انتهينا من الخطوط و فى اليوم التالى نبدأ فى موضوع جديد وهو الفقرات والقوائم .

#4

الفقرات و القوائم 

قولنا فى اليوم السابق سنتحدث اليوم عن الفقرات والقوائم .
تتذكر فى اليوم الاول حينما ذكرت ان الوسم <p> يستخدم لانهاء الفقرة و هذا الوسم له اهمية كبيرة حيث يحدد بداية الفقرات و اتجاه النص فيها .



خواصه: 
تستخدم الخاصيةALIGN لتحديد محاذاة الفقرة و تأخذ القيم Right , Left , Center كالاتى :
<p align="left"> 
This is a left aligned paragraph
</p>
<p align="right">
This is a right aligned paragraph
</p>
<p align="center">
This is a center aligned paragraph
</p>
 و كذلك لتوسيط الفقرات يستخدم الوسم center:
<center>.................</center>
اما الخاصية الثانية وهى DIR و تأخذ القيم :
*LTR (Left To Right) اتجاه النص من اليسار الى اليمين كالانجليزية
*RTL(Right To Left) اتجاه النص من اليمين الى اليسار كالعربية 
وهذه الخاصية مهمة عند كتابة الصفحات باللغة العربية .
ولتنسيق الفقرات ايضا يوجد الوسم Blockquote اى الفقرات المقتبسة .
<blockquote>.................</blockquote>
ووظيفتها تمييز الفقرة وذلك باضافة هوامش على يمين و يسار الفقرة .
و تستطيع ادراج اكثر من هامش للفقرة (جرب بنفسك)
<blockquote>
<blockquote>
........text here.........
</blockquote>
</blockquote>
 و ليس شرطا استخدامها مع الفقرات المقتبسة بل يمكن تستخدم لاضافة تنسيق عام للصفحة لعمل الهوامش .
* الوسم الاخير و هو (PRE (preformated
<pre>............</pre>
لنكتشف ماذا يفعل هذا الوسم فى صفحتك اكتب الوسم السابق و اكتب اى جملة مكان النقط . ماذا وجدت ؟
هل استطعت تفسير ما حدث ؟ نعم الوسم PRE يحول الخطوط الى خطوط موحدة المسافات . 
القوائم 
تحتوى لغة HTML على وسوم خاصة بتنظيم البيانات و وضعها فى قوائم و باستخدام عدة خيارات و هناك نوعين من القوائم :
*القائمة المتسلسلة Ordered Lists
 كالمثال التالى :
1.احمد
2.محمد 
3. على 
4. ابراهيم
5.مصطفى
*القائمة غير المتسلسلة Unordered Lists
كالمثال التالى:
  • احمد 
  • محمد 
  • على 
  • ابراهيم
  • مصطفى
 و عند التعامل مع القوائم بنوعيها يلزمنا وسوم خاصة بتحديد بداية و نهاية القائمة و وسوم تحدد بنود القائمة .
بالنسبة للقوائم المتسلسلة نستخدم الوسوم 
<OL>.............</OL>
اما القوائم غير المتسلسلة نستخدم
<UL>............</UL>
 و لتعيين كل بند من بنود القائمة نستخدم الوسم <LI> و هو وسم منفرد يكتب فى بداية السطر الخاص بكل بند List Item.
اذا لكى نكتب القوائم السابقة بنفس الشكل والترتيب نكتب الاتى :



<OL>
<LI>احمد 
<LI>محمد
<LI>على
<LI>ابراهيم
<LI>مصطفى
</OL>
 والشكل الثانى 
<UL>
<LI>احمد 
<LI>محمد
<LI>على
<LI>ابراهيم
<LI>مصطفى
</UL>

و الخاصية الوحيدة التى تستخدم مع القوائم هى TYPE و ذلك لتحديد شكل الترقيم او الشكل الظاهر بجانب البنود .
وفى القوائم المتسلسلة تأخذ القيم A,a,I,i 
 اما فى القوائم غير المتسلسلة فتأخذ القيم Square , circle و تكتب كالاتى :
<ul type="square">
<ul type="circle">
و هناك وسوم اخرى تستخدم لانشاء القوائم غير المتسلسلة و هى 
<DIR>...........</DIR>
<MENU>............</MENU>
 و هناك نوع خاص من القوائم يدعى قوائم الشرح او التعريف Definition List وهى عبارة عن قائمة من المصطلحات يتبع كل واحد منها شرح او تعليق .
HTML
Hyper Text Markup Language
WWW
World Wide Web
FTP
File Transfer Protocol
CSS
Cascading Style Sheets 
و نحتاج لانشاء هذه القائمة الى 3 وسوم:
 1-<DL>.........</DL> 
لتعريف بداية و نهاية القائمة . 
 2-<DT>
و هو وسم منفرد و يوضع قبل كل مصطلح لتحديده.
3-<DD>
ايضا وسم منفرد ويسمى وسم الشرح او التعليق.
لنقم الان بكتابة القائمة السابقة 
<DL> 
<DT>HTML
<DD>Hyper Text Markup Language
<DT>WWW
<DD>World Wide Web
<DT>FTP
<DD>File Transfer Protocol
<DT>CSS
<DD>Cascading Style Sheets 
</DL> 
و هكذا نكون انتهينا من الفقرات و القوائم و موعدنا فى اليوم التالى للحديث عن الصور و الرسومات .

#5
الصور و الرسومات

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

 مستعد ....... لنبدأ
لادراج صورة يستخدم الوسم IMG و تستخدم معه الخاصيةSRC لتحديد اسم وموقع الصورة المطلوبة 
الصورة التالية اسمها pic و لادراجها نكتب الاتى 
<IMG SRC="pic.jpg">
 هذه الصيغة تفترض ان الصورة موجودة فى نفس المجلد الموجود به ملف HTML , وقمت باستدعاء الصورة من خلاله
و لكن ماذا اذا كانت الصورة موجودة فى مجلد اخر عندها تكون الصيغة مختلفة وهناك حالتين :
 الاولى :ان تكون الصورة موجودة فى مجلد متفرع من المجلد الذى يوجد به ملف html بالشكل التالى :
 
و عندها نقوم بكتابة اسم المجلد متبوعا بعلامة / ثم اسم الصورة 

الحالة الثانية : ان يكون ملف HTML موجود فى مجلد ما و تكون الصورة موجودة فى مجلد اخر بنفس المستوى اى انهما مجلدين متجاوريين و ليسا متفرعين احدهما من الاخر .
وفى هذه الحالة نكتب نقطتين لتوجيه المتصفح للخروج من المجلد الحالى ثم الدخول الى المجلد images حيث توجد الصورة .
و الن الخصائص التى تتحكم فى ابعاد الصورة و هى WIDTH , HEIGHTمتبوعة بارقام تمثل العرض و الارتفاع المطلوبين 
<img src="pic.jpg" width="150" height="70">
<img src="pic.jpg" width="100" height="80">
جرب بنفسك و شوف الاختلاف .
الخاصية التالية التى تستخدم مع IMG هى ALT وهى تستخدم كبديل عن اظهار الصور حيث يكتب نصا بديلا فى حالة عدم ظهور الصورة .
<IMG SRC="PIC.JPG " ALT="there is picture here"> 
عندما نقوم بادراج صورة ضمن فقرة فان موقع ظهورها يكون حسب ترتيبها فى الفقرة و لكن ما شكل النص الذى يليها و لهذا نستخدم الخاصية ALIGN لتحديد محاذاة الصور مع النص الذى يليها و تأخذ القيم : RIGHT , LEFT , TOP , BOTTOM , MIDDLE
 و الان بعد ان قمنا بتحديد محاذاة الصور نحتاج الى تحديد المسافة الفاصلة بينها و بين النص الذى يجاورها و نستخدم لذلك الخصائص الاتية :
VSPACE :لتحديد المسافة العمودية الفاصلة بين النص و الحافتين العليا والسفلى للصورة 
HSPACE: لتحديد المسافة الافقية الفاصلة بين النص و الحافتين اليمنى و اليسرى للصورة .
مثال :
<IMG SRC="PIC.JPG" ALIGN="RIGHT" VSPACE="20" HSPACE="20">
الخاصية الاخيرة التى تستخدم مع IMG هى BORDER و وظيفتها اضافة اطار حول الصور و التحكم بسمكه و القيمة الافتراضية له هى 0 اى لا يوجد اطار حول الصورة .
مثلا لاضافة اطار سمكه 5 بيكسل نكتب الاتى:
<IMG src="pic.jpg" border="5">
 وبذلك نكون قد انتهينا من الصور و غدا نتحدث عن موضوع غاية فى الاهمية و هو الوصلات التشعبية links 

#6
الوصلات التشعبية
 LINKS

ختمنا اليوم السابق بكلمة LINKS او الوصلات التشعبية و هى روح الانترنت و اذا كان الانترنت بمجمله هو الشبكة العنكبوتية فان هذه الوصلات هى الخطوط التى تشكل هذه الشبكة و تؤلف حلقات الاتصال بين الملايين من مواقعها . تنقر على وصلة ما فتنقلك الى صفحة اخرى من الموقع او قد تنقلك الى موقع اخر مختلف تماما . و وصلة تجعلك تحمل ملف و اخرى تعرض لك صورة و هكذا.........

اذا هيا الى العمل .
 كما اشارنا سابقا يوجد العديد من انواع الوصلات التشعبية منها ان تكون الوصلة لموقع اخر او تكون لصفحة فى نفس الموقع او تكون عنوان بريد الكترونى E-mail و فى جميع الحالات المبدأ واحد و لكن تختلف بعض الاختلافات البسيطة .
سوف نناقش كل حالة على حدة.
الوسم الاساسى لادراج اى وصلة تشعبية هو A ويكتب كالاتى :
<A>...........</A> 
وهو اختصار لكلمة Anchor و لها خصائص معينة اولهم Href و هى نحدد من خلالها الموقع الذى نريد الدلالة عليه و يجب ان يكتب عنوان الموقع كامل .

الحالة الاولى :ادراج وصلة تشعبية تشير الى موقع خارجى .
مثلا اذا قمنا بادراج وصلة تشعبية الى Google و عنوانه http://www.google.com
 <a href="http://www.google.com">
go to google
</a>
و ستظهر الوصلة كالاتى : 
go to google 
او 
go to<a href="http://www.google.com">
google
</a> 
و النتيجة :
go to google
 او يمكن صورة بدل النص و يكون كالاتى :
<a href="http://www.google.com">
<img src="logo.jpg">
</a>
بشكل عام اى كان ما يكتب بين الوسمين A فسيكون اشارة او وسيلة تنقلنا الى الموقع المشار اليه فى الوصلة التشعبية .
و يمكن تطبيق كافة الخصائص التى تعلمناها فى الصور هنا ايضا (جرب بنفسك ).
الحالة الثانية : وهى ان تشير الوصلة التشعبية الى ملف موجود فى نفس الموقع سواء كان ملف html او صورة او غير ذلك . و فى هذه الحالة فان ما يكتب مع الخاصية href هو اسم الملف المطلوب الوصول اليه .
لنقم بانشاء وصلة تشعبية تقودنا الى الصفحة الرئيسية لهذا الموقع و لنفترض ان الملف الذى يحتويها اسمه index.html و الشيفرة الخاضة بذلك هى :
<a href="index.html">main page</a>
main page
و اذكرك انك تستطيع ادراج صورة كعنوان للوصلة التشعبية و بنفس التفاصيل التى تعلمتها من قبل .
مثال على ذلك :
<a href="index.html">
<img src="image.jpg" border="5">
</a> 
تنبيه هام اذا كان الملف المطلوب و الذى تريد الاشارة اليه موجود فى مجلد اخر غير المجلد الموجود به ملف html فيجب عليك تحديد المسار الكامل لهذا الملف 
و ذلك بنفس الطريقة التى ناقشناها فى الدرس السابق عندما قمنا بادراج الصور .
الحالة الثالثة : هى ان نقوم بالاشارة الى مكان اخر داخل نفس الصفحة الى اولها او الى اخرها او اى مكان اخر نريده 
المبدأ هنا هو ان تقوم بتعريف او تسمية هذا المكان باسم معين سوف تقوم لاحقا باستخدامه فى الوصلة التشعبية و فى هذه الحالة نستخدم الخاصية name .
لنقم معا بادراج وصلة تشعبية تقوم بنقل الزائر من مكان وجود الوصلة الى فقرة اخرى
اول ما يجب فعله هو الذهاب الى هذه الفقرة و اختيار اول كلمة فيها ثم و ضعها داخل الوسوم <a>......</a>
<a>links</a>
و الان حان الوقت لاستخدام خاصية name فالخطوة الثانية هى تعريف هذه الكلمة باى اسم نريده 
<a name="attrib1">links</a>
لقد اصبحت هذه الفقرة جاهزة لكى نقوم بادراج وصلات تشعبية اليها من اى مكان فى الملف , بل ومن اى ملف اخر ......و اكثر من ذلك انه اذا اراد احد ما فى احد المواقع الاخرى ان يضع وصلة تشعبية لها من موقعه فان باستطاعته ذلك شرط ان يعرف الاسم الذى عرفناها به و هذا ليس صعبا بالطبع .
الخطوة الثالثة : هى ادراج الوصلة التشعبية لهذه الفقرة.
و يلزمنا هنا معرفة اسم الملف الذى توجد به هذه الفقرة و اسمه file.html لانه سيشكل المدخل الاساسى للوصول الى الفقرة المحددة . و تكون شيفرة الوصول الى هذه الفقرة هى كالاتى :
<a href="file.html#attrib1">1st paragraph</a>
1st paragraph
الحالة الاخيرة : و التى نقوم فيها بادراج وصلة تشعبية لعنوان بريد الكترونى , ويؤدى النقر عليها الى اطلاق برنامج البريد الالكترونى للزائر بشكل تلقائى . فالاختلاف الوحيد الذى يطرأ هنا هو كتابة كلمة MAILTO بعد خاصية HREF لكى تدل على ان العنوان الذى يليه هو عنوان EMAIL و ليس عنوان اخر 
<A HREF="MAILTO:ANYONE@YAHOO.COM">
EMAIL ME
</A>
EMAIL ME
و الان نكون قد انتهينا من سرد اساسيات استخدام الوصلات التشعبية و ادراجها فى صفحات الويب . و فى الغد سنتعلم امر جديد و هو الجداول .

#7
الجداول

تحدثنا سابقا عن الوصلات التشعبية link اليوم سنتحدث عن الجداول .
تعد الجداول من اقوى الادوات التى تتضمنها لغة HTML و اكاد اجزم بانه لا يوجد موقع فى الانترنت الا و يستخدمها بصورة او باخرى.

 و الحقيقة ان وضع الجداول فى صفحات الويب لا يقتصر على تلك القوائم من البيانات التى نحتاج لترتيبها فى صفوف او اعمدة , بل يتعدى ذلك استخدامها فى تصميم الصفحات نفسها و تنظيمها , و التحكم بمظهرها بصورة فعالة لا يمكن أداؤها مهما استخدمنا من وسوم خاصة بتنسيق الصفحات .
هل انت مستعد ؟ اذن هيا بنا .............
فى البداية اليك هذا الوصف البسيط للوسوم الاساسية الخاصة بالجداول 
<TABLE>.......</TABLE>
وسم تعريف الجدول
<TR>...................</TR>
Table Row وسوم تعريف الصف فى الجدول.
<TD>cell data</TD>
Table Data وسوم تعريف الخلايا فى الصف و تعريف محتويات كل خلية.
هيا بنا نكتب اول جدول لنا :
<body>
<table>
<tr>
<td>name1</td>
<td>name2</td>
</tr>
<tr>
<td>name3</td>
<td>name4</td>
</tr>
<tr>
<td>name5</td>
<td>name6</td>
</tr>
</table>
</body>
انظر الى نتيجة العمل التى حصلنا عليها.

اولا ادرجنا جدول ثم حددنا عدد الصفوف و بعدد الصفوف نكتب الوسم tr ثم نملأ كل صف على حدة باستخدام الوسم td.
و الان مع الخصائص و لكل من الوسوم السابقة خصائص خاصة به 
اولا الخصائص الخاصة بالوسم table
و هذه هى الخصائص المستخدمة مع الجدول سنحاول تطبيقها فى المثال السابق كما هو الاختلاف فقط فى وسم table :
<table border="5">


<table border="5" cellpadding="5">


<table border="5" cellpadding="5" cellspacing="10"> 


<table border="5" cellpadding="5" cellspacing="10" bgcolor="yellow">


<table border="5" cellpadding="5" cellspacing="10" 
bgcolor="yellow" height="200" width="60">
 نتكلم الان عن الخصائص الخاصة المستخدمة مع الوسم TR
و نعود الان الى جدولنا السابق لتنفيذ هذه الخصائص عليه :
<table border="5" width="25%" height="160">
<tr align="left" valign="top" bgcolor="4945cd">
<td>name1</td>
<td>name2</td>
</tr>
<tr align="right" valign="bottom" bgcolor="dafeca">
<td>name3</td>
<td>name4</td>
</tr>
<tr align="center" valign="middle" bgcolor="cfbade">
<td>name5</td>
<td>name6</td>
</tr>
</table>
اما الخصائص الخاصة بالخلايا فهذا جدول خاص بها :
 كالعادة سننفذ هذه الخصائص على نفس الجدول :
<table border="2">
<tr>
<td align="left" bgcolor="adcb2f">name1</td>
<td align="right" bgcolor="df1acf">name2</td>
</tr>
<tr>
<td colspan="2" height="80" bgcolor="abcdef">name3</td>
<td>name4</td>
</tr>
<tr>
<td width="25%">name5</td>
<td bgcolor="acfbda">name6</td>
</tr>
</table>
و هناك وسم خاص بالخلايا Table Header 
<TH>..........</TH> 
و الفرق الوحيد بينه وبين TD هو ان النص فى الخلية يظهر بخط اسود عريض و فى منتصف الخلية بصورة افتراضية .
الوسم الاخير الخاص بالجداول و هو الوسم CAPTION 
<CAPTION >...............</CAPTION>
و هى تختص باضافة عنوان رئيسى للجدول .
و تكتب بعد الوسم Table و قبل الوسم TR .
و يمكنك ان تجرب الكثير من الجداول و تغير فى اطوالها و اشكالها كما تحب . 
و بذلك نكون قد انتهينا من الجداول و لاحقا نلتقى لمعرفة جديدة و فى الغد سنناقش موضوع هام و هو الاطارات . 

#8
الاطارات


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

فهل تعرف ما هى الاطارات ؟ حسنا ساوضحها لك ..........
 هل سبق و زرت احدى الصفحات لتشاهد انها مقسمة الى عدة اقسام بحيث يظهر فى كل منها صفحة مستقلة , و تبدو بصورة منفصلة عن الاقسام الاخرى .

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


كما تشاهد الصفحة مقسمة الى 3 اقسام :علوى و ايسر و ايمن . و الحقيقة ان كل قسم منها هو عبارة عن ملف html كامل و مستقل بذاته . و هى مجرد صفحات عادية لا تختلف ابدا عن تلك التى تعلمنا انشاءها فى الدروس السابقة ,
و لا علاقة لكل منها بالصفحات الاخرى من حيث التركيب و التعريف .
اما كيف تم جمعها فى صفحة واحدة فهو موضوعنا اليوم الاطارات .
اى ان الموضوع يتلخص فى المعادلة الاتية :
مكونات صفحة الاطارات =عدد ملفات الصفحة نفسها + صفحة الملف الاساسى الذى يجمعها .
اى انى فى المثال السابق احتجت فعليا الى 4 ملفات لتكوين الصفحة .
قبل ان نبدأ لنقم بتحضير الملفات التى سترد فى الدرس لذلك قم بانشاء 3 او 4 ملفات بسيطة لكى تستخدمها فى الامثلة الاتية . انا قمت بانشاء ملفات على النمط التالى و اسميتها frame1.html , frame2.html ,frame3.html , frame4.html.
<html>
<head>
<title>frame1</title>
</head>
<body >
<b>
frame 1
</b>
</body>
</html>
و بقية الملفات بنفس الشكل مع تغيير الرقم من 1 الى 2 و هكذا .
نبدأ الان بتعريف الملف الرئيسى الذى سيضم كافة الاطارات و الملفات .و هو ملف ذو حالة خاصة حيث نقوم باستخدام الوسوم
<FRAMESET>.........</FRAMESET>
بدلا من <BODY>...........</BODY>
<html>
<head>
<title>frames</title>
</head>
<frameset >
...................
</frameset>
</html>
نأتى الان الى الخصائص :
الخاصية الاولى هى COLS و هى تعرف عدد و احجام الاطارات العمودية للصفحة .
و تحدد الاحجام اما بالطريقة المباشرة او الطريقة النسبية او كلاهما معا .
هذا الجدول يوضح مفهوم الاعمدة :
اما الخاصية الثانية فهى ROWS وتحدد عدد و حجم الاطارات الافقية داخل الصفحة بنفس الاسلوب المتبع مع الاعمدة . 

لم ننته بعد من ذكر كل الخصائص المتعلقة بالوسوم <FRAMESET> فلا زال هناك الكثير .
 من الضرورى ان نقوم الان بالانتقال الى وسم اخر للاطارات لانه مرتبط ارتباطا وثيقا بها و هى <FRAME> فما هو عمل هذا الوسم ؟
الوسم <FRAME>وسم منفرد و فيه نقوم بتحديد مصدر و خصائص كل ملف نريد اظهاره داخل احد الاطارات .
ويتم استخدام هذا الوسم بنفس عدد الاطارات المذكورة داخل <FRAMESET> . 
سوف اقوم مباشرة باستخدام الخاصية SRC لتحديد مصدر الملف .
دعنا نقوم باتمام الشيفرة للصورة التى فى الاعلى :
<frameset rows="20%,80%">
<frame src="frame1.html">
<frameset cols="30%,*,">
<frame src="frame2.html">
<frame src="frame3.html">
</frameset>
</frameset>
حصلت على نفس النتيجة اليس كذلك ؟
وتستطيع ايضا ادراج صورة مباشرة داخل الاطار و باستخدام <FRAME SRC> تماما كما ندرجها باستخدام <IMG SRC> و اليك هذا المثال :
<frameset cols="50%,*">
<frame src="frame1.html">
<frame src="image.jpg">
</frameset>
عودة مرة اخرى للوسم <FRAMESET> وخصائصه .
اولى هذه الخصائص FRAMEBORDER و هى تقوم بتحديد ظهور حدود حول الاطار من عدمه و تأخذ القيم 1 للظهور , 0 لعدم الظهور 
<frameset cols="80%,*" frameborder="1">
 .............
</frameset>
0 الخاصية Border و هى تحدد سمك الحدود حول الاطار و تأخذ قيم بالبيكسل .
0 الخاصية bordercolor وتحدد لون الحدود 
0 الخاصية framespacing :لتحديد مسافات فارغة اضافية حول الاطارات و تأخذ قيم بالبيكسل .
 اما الخصائص المستخدمة مع الوسم <frame> فهى :
MARGINHERGHT 0: تحدد مقدار المسافة المتروكة للهوامش العلوية و السفلية للاطار (بالبيكسل).
MARGINWIDTH 0 :تحدد مقدار المسافة الفارغة المتروكة للهوامش اليمنى و اليسرى للاطار بالبيكسل .
SCROLLING 0: تحدد امكانية ظهور او عدم ظهور اشرطة التصفح الافقية و العمودية على جوانب او اسفل الاطار . و تأخذ القيم YES للظهور , NO لعدم الظهور. AUTO التى تحدد ظهور الاشرطة او عدمه تلقائيا حسب الحاجة اليها .
تماما كما يحدث فى معظم تطبيقات Windows .
Scrolling="yes"
Scrolling="no"
Scrolling="auto"
NORESIZE 0 : عند اضافة هذه الخاصية يتم منع عملية التحكم بحجم الاطار بالتصغير او التكبير من خلال السحب و الافلات . و هى لا تأخذ اى قيم .
مثال على ما سبق :
<frameset rows="20%,80%" border="5">
<frame src="frame1.html" norsize>
<frameset cols="30%,*," bordercolor="red">
<frame src="frame2.html" scrolling="yes">
<frame src="frame3.html" marginwidth="80">
</frameset>
</frameset>

و الان بقى لدينا الخاصية NAME و التى تعتبر اهم خاصية لهذا الوسم فهى تحدد طريقة تنسيق العمل بين الاطارات و الصفحات و اسلوب عرضها لذلك فقد فضلت ان افرد لها موضوع خاص وبصورة مستقلة عن باقى الخصائص و ذلك فى اليوم التالى ان شاء الله .
هناك وسم ثالث يتعلق بالاطارات ,ويتم ادراجه داخل الملف الرئيسى و عادة فى النهاية و هو :
<NOFRAMES>..........</NOFRAMES>
يستخدم هذا الوسم لتوفير بديل معين عن صفحة الاطارات فى حالة قيام احد الزوار بدخول الموقع مستخدما متصفحا لا يدعم الاطارات .
فاذا اردت ان تمنح زوارك الذين لا يستخدمون متصفحا حديثا فرصة مشاهدة موقعك , فكل ما عليك فعله هو ادراج هذا الوسم فى نهاية الملف الرئيسى و البدء بكتابة صفحتك كما لو كانت صفحة ويب عادية .
<HTML>
<HEAD>
<TITLE>Main File< /TITLE>
< /HEAD>
<FRAMESET ROWS="50,*,15%,20%" FRAMEBORDER="0">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
<FRAME SRC="frame3.html">
<FRAME SRC="frame4.html">
< /FRAMESET>
<NOFRAMES>
<BODY>
اكتب صفحتك الاعتيادية 
هنا
< /BODY>
< /NOFRAMES>
< /HTML>

ويمكن ان تنشأ الموقع بدونها , و تكتب ملاحظة بسيطة ضمن هذا الوسم تخبر فيها زائرك بان الموقع يحتوى على اطارات و انه يحتاج الى متصفح مناسب .
وبذلك نكون قد قمنا بمناقشة جميع خصائص الاطارات عدا الخاصيةNAME سنبدأ بها يومنا التالى .

(عمارة إسلامية) #9

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
ما شاءا للهُ!
تبارك اللهُ!
موضوع قيّم بحقّ!
منظّمٌ ومُقسّمٌ وبالأمثلة التّطبيقيّة!

جرّبت الدّرس الأوّل ( الوُسوم ).
وإن شاء الله تعالى أتابع البقيّة.
فجزاكم الله تعالى خيرًا أخي م. أحمد، وبارك فيكم،
وجعله في ميزان حسناتكم.