كورس تعلم HTML
اساسيات اللغة
تتألف صفحات HTML من عناصر، والتي تتألف عادةً من وسم بداية ووسم نهاية، ويكون بينهما محتوى نصي عادةً؛ ويمكن أن نضع في وسم البداية بعض الخاصيات التي تُغيّر من سلوك العنصر أو تؤدي إلى ضبطه. لاحظ أنَّ بعض العناصر يمكن أن تتشعب داخل بعضها بعضًا. الأقسام الأساسية للعناصر هي:
.png)
وسم البداية: وهو يحتوي على اسم العنصر، موضوعًا ضمن قوسين على شكل زاوية، وقد يلي الاسم الخاصيات التي تؤثر عليه. مثلًا <p>.
وسم النهاية: وهو يحتوي على اسم العنصر أيضًا مسبوقًا بخطٍ مائل قبله للإشارة إلى نهاية العنصر؛ لاحظ أنَّ نسيان وسم النهاية قد يسبب أخطاءً في بعض الأحيان، لذا خذ حذرك وتذكره. مثلًا: <p/>.
المحتوى: وهو موجودٌ بين وسمَي البداية والنهاية، ويُمثِّل في معظم الأحيان محتوى العنصر.
العنصر: هو وسم البداية ووسم النهاية إضافةً إلى المحتوى.
<p>paragraph content</p>
محتوى العنصر
قد تحتوي العناصر على خاصيات، وهذه الخاصيات بعضها اختياري وبعضها إجباري، وهنالك خاصيات تسمى بالخاصيات العامة والتي يمكن استخدامها على جميع العناصر. تتألف الخاصية في أغلب الحالات من اسم الخاصية ثم قيمة تليها.
<p class="light">paragraph content</p>
يبدأ المثال الآتي بالتصريح عن نوع المستند (DOCTYPE) الخاص بإصدار HTML5.
ثم يعرِف العنصر <html> الذي يشير إلى بدء مستند HTML.
يحتوي العنصر <html> على عنصرين هما العنصر <head> و <body>.
العنصر <head> فيحتوي على البيانات الوصفية التي تصف المستند مثل العنصر <title> الذي ضبط عنوان الصفحة والعنصر <meta> الذي ضبط هنا ترميز محارف المستند والعنصر <link> الذي أشار إلى مستند CSS والعنصر <script> الذي أشار إلى شيفرة JavaScript.
وأما العنصر <body> فيمثِّل محتوى الصفحة نفسها، كالصور (العنصر <img>) والفقرات (العنصر <p>) وغير ذلك. لاحظ كيف ينتهي كل قسم من أقسام المستند بوسوم الإغلاق المناسبة.
< html >
< head >
< meta charset="utf-8" > < / meta >
< title > Page Title < / title >
< link href = "style.css" rel = "stylesheet" > < / link >
< / head >
< body >
< img alt = "My Logo" src = "images/logo.png" / >
< p > Hello World! < / p >
< / body >
< / html >
نظِم هذا الدليل بتخصيص صفحة لكل عنصر من عناصر HTML.
أي يمكن زيارة الصفحة HTML/tagname للحصول على معلومات حول العنصر <tagname>.
فللحصول على معلومات عن العنصر <img> نزور الصفحة HTML/img.
ولمعرفة تفاصيل العنصر <table> نزور الصفحة HTML/table.
أما حقول النماذج فهي موجودة ضمن صفحات فرعية في صفحة HTML/input.
(مثلًا: الصفحة HTML/input/email للحقل <input type="email">).
تحتوي هذه الصفحة على قائمة بعناصر HTML، منظمةً حسب وظيفتها ليسهل عليك الوصول إلي ما تريده من خلال عدة اكواد .
إرسال تعليق