|
   |
| مشرف المنتدى: king |
| مجتمع uCoz العربي للدعم والمساعدة تواصل لديك سؤال؟ اسئل هنا! أسس HTML |
| أسس HTML |
سأحاول شرح الأشياء المهمة، الأشياء الضرورية التي يجب أن يعرفها أي مبتدئ، من الممكن أن أخطئ لكن أرجو منكم تصحيحي إذا وقعت أي أخطاء.
عنصر html يعتبر عنصر جذر لأي مستند HTML. تذكر أن الإعلان DOCTYPE لا يعتبر عنصر لغة HTML. عنصر جذر لغة html <html> </html> فقط وبكل بساطة صح؟
لدينا قاعدة بعنصر جذر. الآن نضيف عنصر head. هذا العنصر يحتوي على كل العناصر، الضرورية لإظهار وإنجاز المستند، التي لا تظهر في نافذة المستعرض. لإنشاء قسم head، لابد من إضافة وسوم head ببساطة في القسم العلوي من النموذج، مباشرة بعد وسم البدء <html> كالتالي: <html> <head> </html>
title - هذا العنصر يسمح بإعطاء عناوين للمستند. العنوان سيظهر في سطر مستعرض العنوان. عنصر title يعتبر إجبارياً. meta - عنصر meta يستخدم لأهداف عديدة، بما في ذلك الإشارة إلى الكلمات والعبارات المفتاحية، ترميز الرموز وكاتب المستند. عنصر meta لا يعتبر إجبارياً واستعماله ممكن أن يتفاوت بحسب المهام المحددة. script - هذا العنصر يسمح بإدخال سكريبتات مباشرة في المستند، أو، أي شيء تفضله أكثر، بمساعدته يتم تحديد الرابط إلى السكريبت الضروري للاستخدام. يستخدم هذا العنصر عند الحاجة. style - عنصر style يسمح بإدخال معلومات عن الأسلوب مباشرة في الصفحة. الأسلوب، معلوماته تتوضع بهذا الشكل.، العنصر يستخدم عند الضرورة. link - عنصر link يستخدم عادة لإنجاز الربط مع جدول الأسلوب الخارجي، على الرغم من أنه ممكن أن يستخدم لأهداف أخرى. هذا هو المكان حيث تتم فيه كل الافعال. هذا هو العنصر ،الذي سيتم فيه إدخال المحتوى و تحديث الصفحة. عنصر body موجود في عنصر html، مباشرة بعد عنصر head. <html> <head> <title>هنا يقع العنوان المناسب</title> </head> <body> </body> </html> عند استعراض الصفحة في المستعرض، المعلومات الموجودة داخل عنصر body، تظهر في نافذة المستعرض. |
أيضاً جزء مهم من لغة html، هو التعليقات. التعليقات تسمح مؤقتاً بإخفاء المحتوى أو حدود الصفحة، تشكيل محتوى العناصر بشكل خاص للإدخال العكسي، يعني الأقسام داخل المستند وإنشاء شرح للأشخاص الآخرين، الضين ،من الممكن، سيعملون في الصفحة. تركيب تعليقات لغة html هو بالشكل التالي: <!-- --> Code </body> <!-- <p>لن يكون هذا المحتوى ظاهراً، بما أنه يعتبر تعليقاً</p> --> <p>هذا المحتوى يعتبر ظاهراً، كونه يقع خارج حدود التعليق</p> </body> ممكن تحديد قسم المستند
Code <body> <!-- بداية المحتوى الرئيسي --> <!-- نهاية المحتوى الرئيسي --> </body> مثال جيد على كود uCoz : < Code !--uCoz Counter--> <script type="text/javascript"><!-- document.write('<a href="http://www.ucoz.ru/main/?a=ustat;u=ucoz;d=0" target=_blank title="uCoz Counter"><img border="0" width="88" height="31" src="http://ucoz.ucoz.ru/stat/'+Math.random()+'?03'+escape(document.referrer)+'"></a>');//--></script><noscript><a href="http://www.ucoz.ru/main/?a=ustat;u=ucoz;d=0" target=_blank title="uCoz Counter"><img border="0" width="88" height="31" src="http://ucoz.ucoz.ru/stat?02"></a></noscript> <!--/uCoz Counter--> التعليقات تستعمل للإشارة لشيء بشكل مريح. |
حسناً القليل عن الإعلانات من نوع مستند، على الرغم من أن uCoz لا يستخدمه.
Quote تذكر أن الإعلان DOCTYPE لا يعتبر عنصر لغة HTML. هذا عنصر لغة SGML. إعلان المستند في المستند من الضروري إضافة جزء صغير من الكود، الذي يساعد على إعلان نوع المستند المستخدم و يحدد نسخة اللغة. هذا يستخدم بمساعدة لغة الترميز القياسية (SGML )، التي تعتبر وريثاً للغة HTML و تستخدم في هذا الإعلان. المشهور ب DOCTYPE مثال XHTML 1.0 Transitional
Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> أنا شخصياً لا أستخدم هذا، على الرغم من أن لاضرورة أحياناً تلح عليّ، لكن هذا فقط يستخدم للحصول على صفحات صحيحة، التي يستطيع المستعرض ترجمتها بشكل مثالي لكل موقف محدد.
Quote في HTML الوسم يكتب بأحرف كبيرة. من الممكن على الرغم أنني كتبت بأحرف صغيرة. |
الاستعمال الصحيح للعناوين
العناوين في اللغات HTML و XHTML تعتبر وسوم. يوجد 6 مستويات للوسوم، ابتداءاً من <h1>....</h1> وانتهاءاً ب <h6>....</h6> .العنوان <h1></h1> يعتبر الأهم، وh2 عنوان فرعي الخ. مثال على إضافة العنوان <h1>Ucoz Web-Services</h1> Code <h2>نظرة جديدة على انشاء المواقع</h2> [b] إضافة الفقرات [/b]التحكم بالفقرة يتم بمساعدة عنصر الفقرة <p></p> <p>نظام التحكم بالمواقع <p>...جيل جديد من خدمة المواقع.أخيراً إنشاء المواقع أصبح سهلاً وممتعاً</p> وسم الفاصل بين السطور تنظيم القائمة <ol></ol> - (ordered list - تنطيم القائمة)
Code <ol> <li>سجل في نظام يوكوز</> <li>إقرأ جيداً النظام</li> <li>أنشئ موقعك</li> </ol> القائمة الغير منظمة
Code <p>قائمة خدمات يوكوز</p> <ul> <li>محرر الموقع</li> <li>سجل الزوار</li> <li>المنتدى</li> <li>كاتالوج المقالات</li> <li>المدونة</li> <li>ألبومات الصور</li> <li>أخبار الموقع</li> <li>كاتالوج الملفات</li> <li>FAQ </li> <li>التصويتات</li> <li>أشكال بريدية</li> </ul> |
التهيئة الهيكلية
التعليقات <COMMENT > العنصر <PRE> العنصر <ADDRESS> العنصر <BLOCKQUOTE> العنص<SPAN> |
العنصر TABLE
إنشاء الجداول يبدأ من العنصر table. هذا العنصر لا يعتبر فارغاً، لذلك هو يُكتب باستخدام وسم الفتح والإغلاق. <table></table> عرض الجدول Code <table width="250"> </table> القيمة المعطاة بالنسبة المئوية، تعتبر قيمة متحركة، بما أن الجدول سيملأ مساحة، معبر عنها بالنسبة المئوية طبقاً للمساحة الفارغة من نافذة المستعرض. Code <table width="90%"> </table> حدود وفواصل الجدول
Code <table width="250" border="1"> نتيجة إنجاز سطر الكود هذا، حول الجدول، وأيضاً كل أسطرها وحقولها ستظهر حدود العرض ب 1 بيكسل.
Code <table width="90%" border="1" cellspacing="5" cellpadding="5"> إضافة أسطر الجدول
Code <table width="90%" border="1" cellspacing="10" cellpadding="10"> <tr> البيانات </tr> </table> الجدول من الممكن أن يحوي أية كمية ضرورية من الأسطر. إضافة أسطر للجدول يتم تشكيل أعمدة عمودية، باستخدام الوسم <td></td> العناصر tr table و td تعتبر ثلاثة مكونات ضرورية للجدول. Code <table width="90%" border="1" cellspacing="10" cellpadding="10"> <tr> <td>البيانات</td> <td>البيانات</td> <td>البيانات</td> </tr> </table> |
إضافة عناوين للجداول
عناوين الجدول تعني عناوين اعمدة أو اسطر الجداول Code <th> </th> لكي تصف العناوين الأعمدة، الواقعة تحتهم، أدخل كل العناوين في سطر واحد، بعدها أضف الأعمدة، التي ستقع تحت العناوين في الأسطر اللاحقة.
Code <table width="90%" border="1" cellspacing="10" cellpadding="10"> <tr> <th>المكان</th> <th>الطقس</th> <th>المنطقة الزمنية</th> </tr> <tr> <td>دبي، الإمارات</td> <td>حار</td> <td>اليوم</td> </tr> </table> ممكن أيضاً استخدام العناوين لوصف عناوين الأسطر Code <table width="90%" border="1" cellspacing="10" cellpadding="10"> <tr> <th>المكان</th> <td>دبي، الإمارات</td> </tr> <tr> <th>الطقس</th> <td>حار</td> </tr> <tr> <th>المنطقة الزمنية</th> <td>يوم</td> </tr> </table> توحيد الأسطر
Code <table width="90%" border="1" cellspacing="10" cellpadding="10"> <tr> <th rowspan="2">[color=red]title (combined 2-line)[/color]</th> <td>[color=red]data[/color]</td> <td>[color=red]data[/color]</td> </tr> <tr> <td>[color=red]data[/color]</td> <td>[color=red]data[/color]</td> </tr> <tr> <th>[color=red]title (No merger)[/color]</th> <td>[color=red]data[/color]</td> <td>[color=red]data[/color]</td> </tr> </table> ممكن توحيد أسطر في داخل الحقول
Code <table width="90%" border="1" cellspacing="10" cellpadding="10"> <tr> <th rowspan="2">[color=red]title (combined 2-line)[/color]</th> <td rowspan="3">[color=red]data (combined 3-line)[/color]</td> <td>[color=red]data[/color]</td> <td>[color=red]data[/color]</td> </tr> <tr> <td>[color=red]data[/color]</td> </tr> <tr> <th>[color=red]title (No merger)[/color]</th> <td>[color=red]data[/color]</td> <td>[color=red]data[/color]</td> </tr> </table> توحيد الأعمدة Code <table width="90%" border="1" cellspacing="10" cellpadding="10"> <tr> <th colspan="2">title (combined 2-line)</th> <th>title (no combined)</th> </tr> <tr> <td>data</td> <td>data</td> <td>data</td> </tr> <tr> <td>data</td> <td>data</td> <td>data</td> </tr> </table> بشكل مماثل ممكن توحيد حقول الجدول
Code <table width="90%" border="1" cellspacing="10" cellpadding="10"> <tr> <th colspan="2">title (combined 2 column)</th> <th>title (no combined)</th> </tr> <tr> <td>data</td> <td>data</td> <td>data</td> </tr> <tr> <td colspan="3">title (combined 3 column)</td> </tr> </table> كن حذراً - الفرق بين colspan و rowspan من الممكن أن يربكك. تذكر، توحيد الأسطر - هو توحيد عمودي، توحيد الأعمدة - هي توحيد أفقي. |
العنصر <IMG>
يستخدم للإدخال في جسم المستند صورة غرافيكس. صورة غرافيكس تعني: إيقونات صغيرة، صور، عناصر غرافيكس وصور بطاقات، التي تشغل قسم كبير من نافذة المستعرض. عدا هذا، العنصر <IMG> يدعم صفات متعددة. مثال: <IMG src="URL" صفات>
هذه الصفة تدل على ملف غرافيكس، بإعطاء URL الخاص به. مثال: <img src="http://ucoz.ae/img/image.jpg">
في عدة حالات، عندما لايكن المستعرض بمقدوره تحميل ملف بصورة، أو عندما يعد المستخدم، بهدف توفير الوقت والنقود، إلى إيقاف تحميل الثور، يظهر على الشاشة نص بديل مثل هنا مرسوم شعار الشركة. مثال: <img src="http://ucoz.ru/img/image.jpg" alt="هنا مرسوم شعار Ucoz">
هذه الصفة تعطي عرض المساحة بالبيكسلات، المدخلة في النافذة تحت الصورة
هذه الصفة تعطي ارتفاع المساحة بالبليكسلات، المدخلة في النافذة حت الصورة |
| |||
| |||