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

الصفحات

تكوين صفحات لغة HTML وتعريف بالوسوم Tags

 تتكون صفحات HTML من عناصر( Elements) .والتي تتكون عاده من وسم بدايه ووسم نهايه او ما يسمي ب (Tags). ويكون بين وسمي البدايه والنهايه المحتوي النصي (content) .

ويمكن اضافه بعض الخاصيات (ِAttribute) وبعضها اختياري والاخر اجباري داخل وسم البدايه لتغيير شكل العنصر او ضبطه. ويمكن ان تتشعب بعض العناصر داخل بعضها البعض.

تكوين صفحات لغة HTML وتعريف بالوسوم Tags

تكوين الصفحات فى لغة HTML

لكي نقوم بعمل صفحات HTML او التعديل عليها نقوم بتحميل برنامج فيجوال استوديو كود VS Code .

 فيجوال استوديو كود ( vs code ) :

وهو  برنامج  مفتوح المصدر من شركة مايكروسوفت يعمل على الويندوز واللينكس والماك .

1-  الوسم  (Tags) : 

ويكون على هيئة رمز الزاوية أو رموز أكبر من وأصغر من .
ويتكون من  وسم بدايه ( Start tag ) ووسم نهاية ( End tag ) وما بين وسم البداية والنهاية يكون المحتوى النصي Content.


وسم البداية   <p>   محتوى العنصر   </p> وسم النهاية 


2- الخاصيات (Attribute ) : 

قد تحتوي العناصر علي خاصيات. وبعضها اختياري والاخر اجباري داخل وسم البدايه لتغيير شكل العنصر او ضبطه .ويمكن ان تتشعب بعض العناصر داخل بعضها البعض وتكون بكتابه اسم الخاصيه ثم القيمه .


وسم البداية  <p class="lightالخاصية  "> paragraph content محتوى العنصر   </p> وسم النهاية


3-  بنية لغة اتش تي ام ال  HTML Structure : 

الـــ Doctype وهو ما يجعل المتصفح يتعرف علي اكواد HTML .ويليه <html> وهو جذر الصفحه. ويشير أن الصفحه مكتوبه بلغة HTML ثم يأتى بعده وسم الهيد  <head> ويشير الي البيانات الوصفيه التي تعبر عن الصفحه. ويحتوي علي وسم التايتل <title> حيث يقوم بتعريف العنوان للصفحه .

والعنصر <meta> والذي يضبط ترميز الصفحه والعنصر <link> والذي يربط هذه الصفحه بلغة CSS. وأيضا العنصر <script>والذي يربط هذه الصفحه ب Javascript.

  اما العنصر <body> فيشير الي محتوي الصفحه واخيرا </html>يشير الي انتهاء الصفحه ويجب التأكد من وجود ال Slash (/).

4-  التعليق (Comment ):

  لكتابة تعليق فى HTML  نكتب .

<--Ahmed--!>  أو نضغط Ctrl +??

بنية لغة اتش تي ام ال  HTML Structure

وسم Head فى لغة HTML:

<title>/<meta>/<script>/<style>/<link>


<title>: يتم كتابه عنوان الصفحه بداخله   .


<meta>:

meta charset =”utf-8 > : هذا الكود يدعم  العربيه والإنجليزيه ويجعل المتصفح يقرأهم بالشكل الصحيح .

”……”= meta name =”description “content > :  يصف الموقع حيث يتم وضع الكلمات أو النص لتسهيل  البحث ومحتوى الاسم مثل .

keywords,author,description.


<script>: يربط ملف جافا سكريبت ب

script>: <script> alert(“welcome”);</script >: HTML>


<script> ويتم اضافتها اذا كان المتصفح لا يدعم جافا سكريبت HTML   تعرف  احد ع: <noscript>


<style>: يتم كتابة خصائص CSS بداخله :<style> p {color:red;} </style>


<link>: يعبر هذا عن مصدر خارجي سيتم ربطه بالصفحة ومعظم اختصاصها يكون بعنصر CSS:

link rel =”stylesheet” href “Ahmed.css >

لوضع أيقونة على الصفحة : 

link rel =”icon” href =”html.png >


وسم Head فى لغة HTML:



تكوين صفحات HTML

تكوين صفحات HTML



وسم Body فى لغة HTML :                                        


      <header>: يضم العنصر مجموعه من العناصر التمهيدية او المساعده على التنقل ويحتوى علي بعض العناصر مثل شعار الموقع او حقل بحث.


   <main> : تمثل المحتوى الرئيسى لجسم الصفحه او لجزء من الصفحه او يمثل الوظيفه الرئيسيه للصفحة.


   <nav>: تمثل قسم من الصفحه غرضه هو توفير روابط للتنقل سواء كانت ضمن الصفحه نفسها  او صفحات اخري ومن اشهر الامثله هي القوائم المنسدله وجداول المحتويات والفهارس.


<section>  تمثيل قسم مستقل له وظيفة خاصة به ضمن صفحه HTML.


       <article> :يمثل جزء من الصفحه الغرض منها هي القدره علي اعاده توزيعها واستخدامها بشكل مستقل مثل موضوع في منتدي او مقالة في صحيفة.


             <h1- h6> : تمثل هذه العناصر 6 مستويات والعنصر الاول اكبرهم حجما والعنصر الاخير اصغرهم حجما .


 <aside> : يمثل جزء من الصفحه ويكون هذا العنصر علي شكل شريط جانبي .


               <footer> : تمثل تذييل الصفحه وعاده ما تحتوى علي حقوق الطبع والنشر او وصلات لمستندات مفيده.


Text Formating   /    Links    /    Images    /      Lists    /     Tables   



Id&class

الـــ Id يستخدم بمعرف واحد فقط ولا يتم استخدامه اكثر من مره ويكون فريد من نوعه ويكتب في css مسبوقا ب هشتاج #. اما ال class ان يكون معبر عن محتواها ويستخدم لاكثر من عنصر.



reaction:

تعليقات