بناء جملة عنصر HTML
العنصر (Elements) هو احدى مكونات صفحة HTML. وهو يمثل دلالات ، أو معنى. على سبيل المثال ، يمثل عنصر title عنوان صفحة الويب.
تتم كتابة معظم عناصر HTML بإستخدام وسمّي الفتح / البدء < > والإغلاق / النهاية </ > ، مع وجود محتوى بينهما.
يمكن أن تحتوي العناصر أيضًا على سمات attributes تحدد خصائصها الإضافية. على سبيل المثال ، سيتم كتابة فقرة ، يتم تمثيلها بواسطة العنصر p ، على النحو التالي:
العنصر (Elements) هو احدى مكونات صفحة HTML. وهو يمثل دلالات ، أو معنى. على سبيل المثال ، يمثل عنصر title عنوان صفحة الويب.
تتم كتابة معظم عناصر HTML بإستخدام وسمّي الفتح / البدء < > والإغلاق / النهاية </ > ، مع وجود محتوى بينهما.
يمكن أن تحتوي العناصر أيضًا على سمات attributes تحدد خصائصها الإضافية. على سبيل المثال ، سيتم كتابة فقرة ، يتم تمثيلها بواسطة العنصر p ، على النحو التالي:
العناصر الفارغة (Empty Elements)
العناصر الفارغة (وتسمى أيضًا العناصر ذاتية الإغلاق) وهي عناصر لا تحتوي محتوى ، مثل <br> الذي يمثل فاصل أسطر ، وهذا يعني أنه لا يمكنك كتابة :
<hr> some content < /hr>
أو
<br> some content < /br>
بعض العناصر الفارغة الشائعة الأخرى هي <img> ، <input> ، <link> ، <meta> ، <hr> ، إلخ.
العناصر الفارغة (وتسمى أيضًا العناصر ذاتية الإغلاق) وهي عناصر لا تحتوي محتوى ، مثل <br> الذي يمثل فاصل أسطر ، وهذا يعني أنه لا يمكنك كتابة :
<hr> some content < /hr>
أو
<br> some content < /br>
بعض العناصر الفارغة الشائعة الأخرى هي <img> ، <input> ، <link> ، <meta> ، <hr> ، إلخ.
تداخل عناصر HTML
يمكن أن تحتوي معظم عناصر HTML بداخلها على عنصر او أكثر باستثناء العناصر الفارغة التي لا يمكن ان تحتوي بداخلها على عناصر.
تتكون العناصر عادة من وسوم وسمات ومحتوى أو عناصر أخرى.
يوضح المثال التالي بعض العناصر المتداخلة داخل العنصر <p>
يمكن أن تحتوي معظم عناصر HTML بداخلها على عنصر او أكثر باستثناء العناصر الفارغة التي لا يمكن ان تحتوي بداخلها على عناصر.
تتكون العناصر عادة من وسوم وسمات ومحتوى أو عناصر أخرى.
يوضح المثال التالي بعض العناصر المتداخلة داخل العنصر <p>
مثال
<p>This paragraph contains <br> a line break.</p>
<img src="images/sky.jpg" alt="Cloudy Sky">
<input type="text" name="username">
<p>This paragraph contains <br> a line break.</p>
<img src="images/sky.jpg" alt="Cloudy Sky">
<input type="text" name="username">
نصيحة:
وضع عنصر واحد داخل آخر يسمى التداخل Nesting.
يمكن أن يكون العنصر المتداخل ، والمسمى أيضًا عنصراً فرعياً(إبناً) Child element ، عنصرًا أساسيًا(اباً) parent element أيضًا في حالة تداخل عناصر أخرى داخله.
وضع عنصر واحد داخل آخر يسمى التداخل Nesting.
يمكن أن يكون العنصر المتداخل ، والمسمى أيضًا عنصراً فرعياً(إبناً) Child element ، عنصرًا أساسيًا(اباً) parent element أيضًا في حالة تداخل عناصر أخرى داخله.
يجب أن تكون وسوم HTML متداخلة بالترتيب الصحيح. بحيث يتم إغلاقها بالترتيب العكسي لفتحها ، اي أنه يجب إغلاق اخر وسم تم فتحه أولاً.
مثال
مثال
كتابة التعليقات في HTML
عادة ما تضاف التعليقات بهدف جعل الكود أسهل للفهم. مما قد يساعد المطور الآخر (أو أنت في المستقبل عندما تقوم بتحرير الكود المصدري) على فهم ما كنت تحاول القيام به عند كتابة كود صفحة الويب.وهنا يجب ان نأكد على انه لا يتم عرض التعليقات في متصفح الويب وانما توجد فقط في الكود المصدري.
يبدأ تعليق HTML بـ <!-- ، وينتهي بـ --> (من اليسار إلى اليمين) ، كما هو موضح في المثال أدناه:
مثال
عادة ما تضاف التعليقات بهدف جعل الكود أسهل للفهم. مما قد يساعد المطور الآخر (أو أنت في المستقبل عندما تقوم بتحرير الكود المصدري) على فهم ما كنت تحاول القيام به عند كتابة كود صفحة الويب.وهنا يجب ان نأكد على انه لا يتم عرض التعليقات في متصفح الويب وانما توجد فقط في الكود المصدري.
يبدأ تعليق HTML بـ <!-- ، وينتهي بـ --> (من اليسار إلى اليمين) ، كما هو موضح في المثال أدناه:
مثال
يمكننا أيضًا جعل التعليق حول عنصر او اكثر من عناصر لغة HTML لغرض تصحيح الأخطاء ، كما هو موضح بالمثال التالي :
مثال
مثال
ما هي السمات (Attributes)؟
تحدد السمات (Attributes) خصائص إضافية مثل عرض الصورة وارتفاعها. توضع السمات دائمًا في وسم البدء (أو وسم الفتح) < > وعادة ما تكون على شكل أزواج اسم و قيمة وتكتب بالشكل التالي : name = "value". يجب دائمًا إحاطة قيم السمات بعلامات اقتباس.
أيضا ، بعض السمات َضرورية لعمل عناصر معينة. على سبيل المثال ، يجب أن يحتوي الوسم<img> على سمات src و alt
دعنا نلقي نظرة على بعض الأمثلة على استخدامات السمات:
مثال
تحدد السمات (Attributes) خصائص إضافية مثل عرض الصورة وارتفاعها. توضع السمات دائمًا في وسم البدء (أو وسم الفتح) < > وعادة ما تكون على شكل أزواج اسم و قيمة وتكتب بالشكل التالي : name = "value". يجب دائمًا إحاطة قيم السمات بعلامات اقتباس.
أيضا ، بعض السمات َضرورية لعمل عناصر معينة. على سبيل المثال ، يجب أن يحتوي الوسم<img> على سمات src و alt
دعنا نلقي نظرة على بعض الأمثلة على استخدامات السمات:
مثال
في المثال أعلاه src داخل الوسم <img> هو سمة (Attributes)ومسار الصورة المقدمة هو قيمة السمة (value).
ايضا href داخل الوسم <a> هي سمة (Attributes) والرابط المقدم هو قيمته (value)، وهكذا.
ايضا href داخل الوسم <a> هي سمة (Attributes) والرابط المقدم هو قيمته (value)، وهكذا.