تعلم HTML بالعربي | HTML Tables

 

الجداول Tables  

** الجداول Tables : أقوى الأدوات التي تتضمنها لغة HTML لا يوجد موقع في الإنترنت إلا ويستخدمها بصورة أو بأخرى ، وهو يستخدم في تصميم الصفحات نفسها وتنظيمها والتحكم بمظهرها بصورة قوية وفعالة .

لمشاهدة الفيديو من هنا

** <Table> … </Table>  ** تستخدم في تعريف الجدول .

** <Tr> … </Tr>  ** تستخدم في تعريف الصف في الجدول .

**  <Td> … </Td>  ** تستخدم في تعريف الخلايا في الصف وتعريف محتويات كل خلية  .

** Border  ** خاصية تأتي مع وسم <Table> لعمل حدود للجدول

خصائص TABLE

** Width  ** تحدد عرض الجدول ككل ، القيمة ممكن رقم وممكن نسبة مئوية .

** Height  ** تحدد ارتفاع الجدول ككل ، القيمة ممكن رقم وممكن نسبة مئوية .

** Cell Spacing  ** تحديد المسافة بين كل خلية من خلايا الجدول .

**  Cell Padding ** المسافة بين الحدود وبداية النص في كل خلية ( الهوامش ) .

** Align  ** محاذاه الجدول أفقياً على الصفحة يميناً أو يساراً Left  , Right

** BGcolor ** لون خلفية الجدول .

 

خصائص TR

** Align ** محاذاة النص أفقياً داخل الخلايا التي يتكون منها الصف Left-Right-Center

** VAlign  ** محاذاة النص عمودياً داخل الخلايا التي يتكون منها الصف Baseline-Top-Bottom-Middle

** BGcolor  ** لون خلفية خلايا الصف ، وهنا يتم تجاهل لون خلفية الجدول .

 

خصائص TD

**  <TD> ** من الممكن أن تحتوى الخلية على أي عنصر من عناصر لغة HTML ( نصوص – رسوم – قوائم – وصلات تشعبية – جداول .

** Colspan  ** دمج الخلية الحالية مع العدد المطلوب من الخلايا التي تليها أفقياً .

** Rowspan ** دمج الخلية الحالية مع العدد المطلوب من الخلايا التي تليها عمودياً ( أسفلها ) .

تعلم HTML بالعربي | HTML Hyper links

 

HTML – 7

** الوصلات التشعبية ** هي روح الإنترنت ، وإذا كانت الإنترنت هي شبكة العنكبوت فإن Links  هي الخيوط 

التي تشكل هذه الشبكة .

** يتميز الإرتباط التشعبي بـ أنه عند الوقوف عليه بمؤشر الفأرة نجد أن مؤشر الفأرة تغير إلى شكل يد وعند 

الضغط عليه يتم الإنتقال إلي :

1.     مكان آخر في نفس الصفحة . ( وهي أصعب عملية )

2.     صفحة آخرى في نفس الموقع .

3.     صفحة آخرى في موقع آخر .

** <a> … </a> ** يستخدم هذا الوسم في إدراج الوصلات التشعبية ، وهي إختصار لكلمة Anchor  ، هي

 لا تعمل وحدها بل تتطلب إضافة خصائص معينة .

** href ** نحدد من خلالها الموقع الذي نريد الذهاب إليه عند الضغط على الإرتباط التشعبي .

أولاً : لعمل إرتباط تشعبي نصي يكتب كالتالي :

<a href=”ahmed.html” >  home < /a>

لمشاهدة الفيديو من هنا

 

ثانياً : لعمل إرتباط تشعبي كصورة يكتب كالتالي :

<a href=http://www.google.com.eg> Google </a>

** لعمل إرتباط تشعبي للوصول إلى أي مكان في نفس الصفحة ، لا بد من تسمية هذا المكان أولاً بإستخدام 

الخاصية Name  للوسم <a> وذلك كالتالي :

<a name=”Soliman”> Links </a>

هنا تم إعطاء إسم لهذا المكان وهو Soliman ، بهذه الحالة هذه الفقرة أصبحت جاهزة لكي نقوم بإدراج وصلات 

تشعبية إليها من أي مكان في هذا الملف ومن أي ملف آخر .

** لإدراج وصلة تشعبية لهذه الفقرة يلزمنا .. معرفة إسم الملف المحتوي لهذه الفقرة يتبعه الإسم للفقرة كالتالي :

<a href=”ahmed.html # soliman”> Paragraph </a>

** لم نكتف بذكر إسم الفقرة لوحدها بل يجب أن تقرن بإسم الملف الأب الذي يتضمنها من خلال إشارة # .

** يمكن عمل نفس العمل السابق بطريقة آخرى وهي إنشاء علامة مرجعية Bookmarks .

** إنشاء علامة مرجعية bookmarks  أو عنوان يتم الذهاب إليه عند الضغط على الإرتباط التشعبي في نفس 

الصفحة وذلك كالأتي :

<h1 id=”first”> Computer </h1>

وهنا تم وضع إشارة مرجعية بإسم first  وللوصول إليها كالتالي :

<a href=”#first”> Click Her </a>

أتمني أكون وصلت المعلومة بطريقة سهله

لا تنسونا من صالح دعائكم

تعلم HTML بالعربي | HTML Added And Formatted Images

 

HTML – 5

** <IMG> وسم مفرد ، يستخدم في إضافة أو تعريف صورة داخل صفحة الويب ، يضاف إليه الخاصية SRC لتحديد موقع وإسم الصورة .

** ملحوظة ** لو كتبت إسم الصورة فقط فيفترض أن الصورة موجودة في نفس الدليل الفرعي أو المجلد حيث يوجد ملف HTML  ، لكن الصورة لو وجدت في مجلد متفرع عن مجلد HTML يكتفى بكتابة إسم المجلد الفرعي ثم إسم الصورة بدون الحاجة لكتابة عنوان المسار كاملا ، أما إذا كانت الصورة موجودة في مجلد والمجلد الخاص ب HTML بنفس المستوى أي أنهما متجاورين فهنا نكتب ( نقطتين ) للخروج من المجلد الفعري الحالي الخاص ب HTML ونكتب إسم المجلد الجديد متبوعاً باسم الصورة كالتالي :

<Img Src=”..\image\ali.jpg”>

** من الأسهل كتابة المسار كاملا لأي حالة من حالات تواجد الصورة .

** الأبعاد الأساسية للصورة يمكن التحكم بها بإستخدام الخصائص Width , Height  متبوعة بأرقام تمثل الإرتفاع والعرض المطلوبين وذلك بوحدة تسمي Pixel  .

** الخاصية Alt ** تأتي مع الوسم <img> وتستخدم في إظهار نص بديل يظهر مكان الصورة ، عندما يكون خيار " إظهار الصور تلقائياً " غير فعال في المتصفح ، وتستطيع ملاحظته في الفترة التي تسبق تحميل الصور وخاصة في المواقع البطئية التحميل .

** الخاصية Align ** تستخدم لتحديد محاذاه الصورة مع النص المرافق لها ، بمعني تحديد موقع النص الذي يليها وتأخذ القيم (Top-Bottom-Middle-Right-Left) .

لمشاهدة الفيديو من هنا



 

لتحديد المسافة الفاصلة بينها وبين النص الذي بجوارها بإستخدام الخصائص :

** VSpace  ** تحديد المسافة العمودية الفاصلة بين النص والحافتين العليا والسفلى للصورة .

** HSpace **  تحديد المسافة الأفقية الفاصلة بين النص والحافتين اليمنى واليسري للصورة .

** Border  ** تستخدم لإضافة إطار حول الصورة والتحكم بسمكة ، والقيمة الإفتراضية هي 0 أي لا يوجد إطار

 

تعلم HTML بالعربي | الفقرات والقوائم وتنسيقاتها HTML Paragraph & Lists Formatted

 

HTML – 4

 

** الوسم <P> هو وسم مفرد لكنه يستخدم أيضاً كوسم مزدوج  <p> …</p>  وفي هذه الحالة يمكننا من تحديد إتجاه الفقرة وإتجاه النص فيها حيث يستخدم معه الخاصية Align  وهي تأخذ القيم (Right – Left - Center)

** الوسم <Center> … </Center>  تستخدم لتوسيط الفقرات أو الكائنات بشكل عام في الصفحة .

** <P> تستخدم الخاصية Dir معها لتحديد إتجاه قراءة نص الفقرة وتأخذ القيم (LTR – RTL ) وتعني من اليمين من اليسار والعكس من اليسار إلى اليمين .

** تأتي الخاصية Dir  مع الوسم <Body> وذلك لتغيير إتجاه الصفحة ككل بشكل عام يعني سواء صور أو نصوص أو غيرة ، وتأخذ نفس القيم السابقة وهي (LTR – RTL ) .

** الوسم <BlockQuote> … </BlockQuote>  هو وسم الفقرة المقتبسة ، ووظيفتها تمييز الفقرة من خلال إدراج مسافة إضافية على الهامشين الأيمن والأيسر لها .

** ملحوظة ** يمكن إدراج عدة وسوم <BlockQuote> معاً إذا أردت إدراج هوامش أكبر .

**  الوسم <pre> … </pre>  وهو إختصار لكلمة PreFormated  أي النص المنسق مسبقاً ، بمعني أنه يحتفظ بنفس التنسيق المكتوب به في برنامج محرر النصوص Notepad مثل هذا الشكل ::

A   B   C    D    E

F   G   H    I     J

K   L   M   N   O

<<< أي أنه إعتمد المسافات بدون كتابة الأمر &nbsp; وإعتمد نهاية السطر بدون كتابة وسم <br>

** القوائم ** هناك نوعين من القوائم هما ( المتسلسلة – غير متسلسلة ) ويوجد نوع آخر سوف يتم شرحه هنا وهو قوائم الشرح أو التعريفات .

** النوع الأول ** القوائم المتسلسة Order Lists  **  ويتم إنشاء هذه القوائم بإستخدام

الوسم <OL> … </OL>   وهي تعني  التسلسل مثل 1 – 2 – 3 – 4 -  5 - ........ إلخ

** النوع الثاني ** القوائم الغير متسلسلة UnOrdered Lists  ** ويتم إنشاء هذه القوائم بإستخدام

الوسم <UL> … </UL>   وهي تعني الترتيب بالأشكال  سواء مربعات أو علامات معينة خاصة .

** ملحوظة ** لتعيين كل بند من بنود القائمة نستخدم الوسم <LI> وتعني ListItems

لمشاهدة الفيديو من هنا

 

** مثال **

                                                        قائمة غير متسلسلة                              قائمة متسلسلة

<OL>                                             <UL>

            <LI>  القاهرة                               <LI>  القاهرة

            <LI>  الإسكندرية                         <LI>  الإسكندرية  

            <LI> شرم الشيخ                          <LI> شرم الشيخ

</OL>                                           </UL>

** ملحوظة ** الخاصية الوحيدة التي تستخدم مع وسوم القوائم هي Type ووظيفتها تحديد شكل الرموز الظاهر مع بنود القائمة <UL Type=”Square”><OL Type=”A”> هنا في القائمة غير المتسلسلة سيتم تغيير شكل الترتيب إلى مربع ، وفي القائمة المتسلسلة سيتم تغيير شكل ترتيب القائمة المتسلسلة إلى الحروف الإنجليزية الكبيرة A ,B , C, D ,E ,F ……..

*** النوع الثالث والأخير ** قوائم الشرح أو التعريفات Definition Lists  ** وهي نوع خاص من القوائم وتعني إدراج قائمة مصطلحات يتبع كل واحد منها شرح أو تعليق

** الوسم  <DL>  </DL> تستخدم لتعريف بداية ونهاية القائمة

** الوسم <DT> وسم مفرد ، يوضع قبل كل مصطلح لتحديدة .

** الوسم <DD> وسم مفرد ، وهو وسم الشرح أو التعليق .

** مثال **

<DL>

            <DT> HTML

                        <DD> hypertext markup language

            <DT> FTP

                        <DD> file transfer protocol

</DL>

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

JPEG : joint photographic experts group

WWW : world wide web

PDF : portable document format

GIF : graphics interchange format