• صفحة 1 من%
  • 1
مشرف المنتدى: king  
مجتمع uCoz العربي للدعم والمساعدة » تواصل » لديك سؤال؟ اسئل هنا! » أسس HTML
أسس HTML
mudar
مشاركات: 2131
السمعة: 36
مشاركة # 1 | 12:41 13.05.2009
سأحاول شرح الأشياء المهمة، الأشياء الضرورية التي يجب أن يعرفها أي مبتدئ، من الممكن أن أخطئ لكن أرجو منكم تصحيحي إذا وقعت أي أخطاء.

  • إضافة عنصر html
    عنصر html يعتبر عنصر جذر لأي مستند HTML. تذكر أن الإعلان DOCTYPE لا يعتبر عنصر لغة HTML.
    عنصر جذر لغة html
    <html>
    </html>

    فقط وبكل بساطة صح؟

  • عناصر head وtitle
    لدينا قاعدة بعنصر جذر. الآن نضيف عنصر head. هذا العنصر يحتوي على كل العناصر، الضرورية لإظهار وإنجاز المستند، التي لا تظهر في نافذة المستعرض. لإنشاء قسم head، لابد من إضافة وسوم head ببساطة في القسم العلوي من النموذج، مباشرة بعد وسم البدء <html> كالتالي:

    <html>

    <head>
    </head>

    </html>

  • العناصر في قسم مستند head
    title - هذا العنصر يسمح بإعطاء عناوين للمستند. العنوان سيظهر في سطر مستعرض العنوان. عنصر title يعتبر إجبارياً.
    meta - عنصر meta يستخدم لأهداف عديدة، بما في ذلك الإشارة إلى الكلمات والعبارات المفتاحية، ترميز الرموز وكاتب المستند.
    عنصر meta لا يعتبر إجبارياً واستعماله ممكن أن يتفاوت بحسب المهام المحددة.
    script - هذا العنصر يسمح بإدخال سكريبتات مباشرة في المستند، أو، أي شيء تفضله أكثر، بمساعدته يتم تحديد الرابط إلى السكريبت الضروري للاستخدام. يستخدم هذا العنصر عند الحاجة.
    style - عنصر style يسمح بإدخال معلومات عن الأسلوب مباشرة في الصفحة. الأسلوب، معلوماته تتوضع بهذا الشكل.، العنصر يستخدم عند الضرورة.
    link - عنصر link يستخدم عادة لإنجاز الربط مع جدول الأسلوب الخارجي، على الرغم من أنه ممكن أن يستخدم لأهداف أخرى.
  • عنصر body
    هذا هو المكان حيث تتم فيه كل الافعال. هذا هو العنصر ،الذي سيتم فيه إدخال المحتوى و تحديث الصفحة. عنصر body موجود في عنصر html، مباشرة بعد عنصر head.

    <html>
    <head>
    <title>هنا يقع العنوان المناسب</title>
    </head>
    <body>
    </body>
    </html>

    عند استعراض الصفحة في المستعرض، المعلومات الموجودة داخل عنصر body، تظهر في نافذة المستعرض.
    • mudar
    مشاركات: 2131
    السمعة: 36
    مشاركة # 2 | 13:12 13.05.2009
  • تعليقات لغة HTML
    أيضاً جزء مهم من لغة 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-->

    التعليقات تستعمل للإشارة لشيء بشكل مريح.

    • mudar
    مشاركات: 2131
    السمعة: 36
    مشاركة # 3 | 13:37 13.05.2009
    حسناً القليل عن الإعلانات من نوع مستند، على الرغم من أن 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 الوسم يكتب بأحرف كبيرة.

    من الممكن على الرغم أنني كتبت بأحرف صغيرة.

    mudar
    مشاركات: 2131
    السمعة: 36
    مشاركة # 4 | 14:28 13.05.2009
    الاستعمال الصحيح للعناوين
    العناوين في اللغات 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>...جيل جديد من خدمة المواقع.أخيراً إنشاء المواقع أصبح سهلاً وممتعاً</p>

    وسم الفاصل بين السطور
    هذا الوسم يستخدم لفصل سطور الفقرة. إنه مهم للتشكيل، مثلاً نص شعري. في لغة XHTML هذا النص يبين هكذا
    <br />

    تنظيم القائمة
    ماذا يعني تنظيم القائمة، الإجابة سهلة للغاية - هو قائمة، عناصر لابد من أن تتوضع بتنظيم معين.
    لإنشاء تنظيم القائمة من الضرووري وجود عنصرين.

    <ol></ol> - (ordered list - تنطيم القائمة)
    <li></li> - (list item - عنصر القائمة)

    Code
    <ol>
    <li>سجل في نظام يوكوز</>
    <li>إقرأ جيداً النظام</li>
    <li>أنشئ موقعك</li>
    </ol>

    القائمة الغير منظمة
    عندما لايكون التنظيم مهماً. بشكل عام هذه القوائم اسمى مرمزة. نفس الهيكلية تقريباً لكن في مكان العنصر<ol></ol> يستخدم العنصر <ul></ul>

    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>
    mudar
    مشاركات: 2131
    السمعة: 36
    مشاركة # 5 | 18:30 13.05.2009
    التهيئة الهيكلية

    التعليقات <COMMENT >
    العنصر يسمح بإخفاء التعليقات عن المستخدمين للكود الحالي، وأيضاً لإخفاء سيناريوهات Java Script من المستعرضات، التي لا تدعمها.
    التركيب: <COMMENT> نص التعليقات </COMMENT>
    تماماً بشكل مماثل الخيار القديم لإعطاء التعليقات
    التركيب: <!- - نص التعليقات //- ->
    ستة مستويات لعناوين <Hn>
    حجم الخط وملحقاته المقابلة لكل مستوى تتعلق بالمستعرض، الأسلوب <H1> يعتبر أكبر وأعرض خط، الاسلوب <H6> يعتبر أصغر خط. العنصر من الممكن أن يحوي الصفة align، التي تبين البادئة left, center أو right
    التركيب: <Hn align=بادئة> نص العنوان </Hn>
    الخطوط الفاصلة <HR>
    العنصر <HR> يستخدم لإجراء الخط الأفقي في المستند. من الممكن أن يحوي على الصفات: color، التي تعطي لون الخط، size التي تعطي الارتفاع بالبيكسلات width العرض بالبيكسلات أو النسب المئوية لعرض الشاشة، align نظام التساوي، ولا يملك وسماً نهائياً.
    التركيب: <HR align="center" size=n width=n color="اللون">
    العنصر <P>
    هذا العنصر يعطي واحد من أساليب تقسيم النص لففقرات. إنه يستطيع امتلاك صفة مدمجة align، التي تبين البادئة left, center أوright. كل من الفقرات التالية يتجاهل ، قيمة align المعطاة للفقرة السابقة.
    التركيب: <P align=بادئة> نص الفقرة </P>
    العنصر <BR>
    هذا العنصر يعطي الفاصل بين النص بمرور على صفحة جديدة. يستطيع امتلاك الصفة clear، التي تستطيع امتلاك القيم left, all أو right بهذا الشكل أيضاً تبين النص حول الصور، المدخلة في النص بشكل غير قياسي. كل فقرة لاحقة تتجاهل قيمة clear المعطاة في الفقرة السابقة.
    التركيب: <BR clear=تدفق النص> Текст
    من الممكن حذفه بواسطة الوسم <NOBR> و </NOBR>
    العنصر <WBR>
    هذا العنصر يعطي فاصل للنص في هذا المكان عند الضرورة مع الذهاب إلى سطر آخر.
    التركيب: <WBR >النص

    العنصر <PRE>
    كل نص، المنتهي بالوسوم <PRE> و </PRE>
    سوف يظهر المستعرض تماماً، كما هو ظاهر في الكود الحالي للمستند، بالإضافة ، أن النص يظهر بخط صغير، الأمر الذي يسهل مهمة تهيئة النص بأعمدة. العنصر ليس مدعوماً من كل المستعرضات، يمكن أن يملك الصفة width التي تعطي عرض المساحة الباقية تحت النص بالرموز. العنصر غير العناصر القديمة <XMP>، <LISTING> و <PLAINTEXT>
    التركيب: <PRE width=عدد الرموز >...النص.. .</PRE>
    العنصر <DIV>
    العنصر <DIV> يسمح بتحديد في هيكلية النص عدة أقسام. يعتبر عنصر كتلة، يعمل كعنصر <P> . إذا كان وسم الإغلاق <P> يعمل، فإن <DIV>يقوم بتغييره بشكل فعّال و يبدأ فقرة جديدة. من الممكن أن يملك الصفة align، التي تبين البادئة left, center أوright. كل فقرة لاحقة تتجاهل قيمة align المعطاة في الفقرة السابقة.
    التركيب: <DIV align=بادئة> نص القسم </DIV>
    العنصر<CENTER>
    العنصر <CENTER> نص </CENTER> مشابه تماماً لبناء
    التركيب: <DIV align=center> نص القسم </DIV>

    العنصر <ADDRESS>
    العنصر <ADDRESS> يستخدم لتشكيل معلومات التواصل للمستند الحالي، إما عنوان البريد الإلكتروني أو عنوان بريدي كامل مع رقم الهاتف.
    التركيب: < ADDRESS>معلومات التواصل </ADDRESS>

    العنصر <BLOCKQUOTE>
    العنصر <BLOCKQUOTE> يسمح بتحديد اقتباس نصي من كامل النص
    التركيب: <BLOCKQUOTE> النص </BLOCKQUOTE>

    العنص<SPAN>
    العنصر <SPAN> يسمح بتحديد كمية معينة من النص لتهيئتها لاحقاً، لكن تختلف عن <DIV> لا تبدأ فقرة جديدة.
    التركيب: <SPAN> النص </SPAN>

    mudar
    مشاركات: 2131
    السمعة: 36
    مشاركة # 6 | 12:19 14.05.2009
    العنصر TABLE
    إنشاء الجداول يبدأ من العنصر table. هذا العنصر لا يعتبر فارغاً، لذلك هو يُكتب باستخدام وسم الفتح والإغلاق.
    <table></table>

    عرض الجدول
    ممكن إعطاء عرض الجدول بطريقتين: بالبيكسلات أو بالنسبة المئوية.
    القيمة المعطاة بالبيكسلات تعتبر مثبتة، بما أن عرض الجدول دائماً سيكون كطابقاً لهذه القيمة.

    Code
    <table width="250">
    </table>

    القيمة المعطاة بالنسبة المئوية، تعتبر قيمة متحركة، بما أن الجدول سيملأ مساحة، معبر عنها بالنسبة المئوية طبقاً للمساحة الفارغة من نافذة المستعرض.
    Code

    <table width="90%">
    </table>

    حدود وفواصل الجدول
    لغة HTML تسمح بتشغيل عرض حدود الجداول

    Code
    <table width="250" border="1">

    نتيجة إنجاز سطر الكود هذا، حول الجدول، وأيضاً كل أسطرها وحقولها ستظهر حدود العرض ب 1 بيكسل.
    لإضافة فاصل بين الحقول تستخدم الصفة cellspacing.
    لإضافة فاصلة بين الحقول تستخدم الصفة cellspacing.
    لإضافة فاصل بين محتوى الحقول وبين الحقل نفسه تسستخدم الصفة cellpadding.

    Code
    <table width="90%" border="1" cellspacing="5" cellpadding="5">

    إضافة أسطر الجدول
    يتم إضافة السطر في الجدول بمساعدة العنصر tr

    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>      
    mudar
    مشاركات: 2131
    السمعة: 36
    مشاركة # 7 | 13:03 14.05.2009
    إضافة عناوين للجداول
    عناوين الجدول تعني عناوين اعمدة أو اسطر الجداول
    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>

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

    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>

    توحيد الأعمدة
    تماماً كما يتم توحيد الأسطر ممكن توحيد الأعمدة
    لهذا يستخدم الصفة colspan.

    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 من الممكن أن يربكك. تذكر، توحيد الأسطر - هو توحيد عمودي، توحيد الأعمدة - هي توحيد أفقي.

    mudar
    مشاركات: 2131
    السمعة: 36
    مشاركة # 8 | 13:27 14.05.2009
    العنصر <IMG>
    يستخدم للإدخال في جسم المستند صورة غرافيكس. صورة غرافيكس تعني: إيقونات صغيرة، صور، عناصر غرافيكس وصور بطاقات، التي تشغل قسم كبير من نافذة المستعرض. عدا هذا، العنصر <IMG> يدعم صفات متعددة.
    مثال: <IMG src="URL" صفات>

  • صفة src
    هذه الصفة تدل على ملف غرافيكس، بإعطاء URL الخاص به.
    مثال: <img src="http://ucoz.ae/img/image.jpg">

  • صفة alt
    في عدة حالات، عندما لايكن المستعرض بمقدوره تحميل ملف بصورة، أو عندما يعد المستخدم، بهدف توفير الوقت والنقود، إلى إيقاف تحميل الثور، يظهر على الشاشة نص بديل مثل هنا مرسوم شعار الشركة.

    مثال: <img src="http://ucoz.ru/img/image.jpg" alt="هنا مرسوم شعار Ucoz">

  • صفة width

    هذه الصفة تعطي عرض المساحة بالبيكسلات، المدخلة في النافذة تحت الصورة
    مثال: <img src="http://ucoz.ru/img/image.jpg" alt="هنا مرسوم شعار Ucoz" width="100">

  • صفة height

    هذه الصفة تعطي ارتفاع المساحة بالبليكسلات، المدخلة في النافذة حت الصورة

    مثال: <img src="http://ucoz.ru/img/image.jpg" alt="هنا مرسوم شعار Ucoz" width="100" height="50">

    • Dr-007
    مشاركات: 7
    السمعة: 0
    مشاركة # 9 | 18:58 03.07.2009
    الف شكر لك
    elder
    مشاركات: 1
    السمعة: 0
    مشاركة # 10 | 22:00 07.11.2012
    [quote=Dr-007]الف شكر لك[/quote]
    بزمتك انت فاهم حاجه يا Dr-007
    انت بتشكر على ايه
    انا عاوز اخلى مربع اضافه موضوع
    يكون بسيط مش معقد
    حد يفهمنى وبساطه
    مجتمع uCoz العربي للدعم والمساعدة » تواصل » لديك سؤال؟ اسئل هنا! » أسس HTML
    • صفحة 1 من%
    • 1
    بحث: