أساسيات HTML

مفهوم – لغة ترميز النص الفائق HTML هي إختصار HyperText Markup Language وتُستخدَم لهيكلة صفحة الويب ومحتواها، وهي لا تعتبر لغة برمجة Programming Language.

فيمكن باستخدام HTML بناء صفحة تحوي مجموعة من النصوص، وقائمة نقطية، أو تحوي صور وبعض جداول البيانات.

وتعتبر لغة HTML من اساسيات تعلم لغة البرمجة وخاصة عند الرغبة في برمجة الويب، حيث يجب عليك تعلم أولاً لغة html ومن ثم تعلم css وبعد ذلك يمكنك إختيار لغة البرمجة التي ترغب في تعلمها.

يمكن للغة HTML أن تُضمِّن برامجَ مكتوبةٍ بلغات مثل جافا سكريبت لتعديل سلوك ومحتوى صفحات الويب؛ وإضافة شيفرات أوراق الأنماط المتتالية CSS تؤدي إلى تعريف شكل وتخطيط المحتوى.

HTML هي لغة بسيطة جداً تستخدم لوصف ما تحتويه صفحات الويب ( Web Pages ) و معنى ذلك أنها تستخدم لتحديد العناصر الموجودة في الصفحة مثل العناوين, الفقرات, الأزرار, الصور, القوائم, الجداول و غيرها من الأشياء التي يمكن إضافتها في صفحات الويب.

إذاً نستخدم هذه اللغة لهدف واحد فقط و هو تحديد بنية صفحات الويب ( Pages Structure ).

مكونات صفحة الويب

بشكل عام, لتبني صفحات ويب إحترافية عليك تعلم اللغات التالية و بنفس الترتيب:

لغة HTML من أجل تحديد العناصر التي نريد إضافتها في الصفحة.

لغة CSS من أجل تحسين تصميم العناصر الموجودة في الصفحة.

لغة Javascript و نستخدمها لإضافة مؤثرات في صفحات الويب و لمعالجة البيانات التي يتم إدخالها و عرضها في الصفحات.

يمكنك باستخدام هذه اللغات الثلاث فقط لبناء مواقع إلكترونية كاملة, تطبيقات للهاتف و تطبيقات للحاسوب و ليس فقط لتصميم الصفحات.

وبالتالي فإن البنية الأساسية لصفحات الويب تتكون من ثلاث طبقات:

1ـ طبقة المحتوى (Content): ويبنى بلغة html ، وهذه الطبقة هي التي تظهر محتوى الصفحة من نصوص وروابط وحقول وما إلى ذلك.

2ـ طبقة التنسيق (Presentation): وتنسق بلغة css ، وهذه الطبقة تتحكم في شكل ظهور طبقة المحتوى، مثل تموضع العناصر والألوان وجمالية النصوص وما شاكل.

3ـ طبقة التفاعل (Behavior): والمسؤول عنها لغة JavaScript ، ولغات أخرى مثل php وهذه الطبقة تتحكم في الأحداث التي تقع في الصفحة بمجرد ضغط المستخدم علي رابط أو إرسال بيانات الحقول بعد ملئها، وجعل الموقع ديناميكيا متجددا على مدار اليوم.

أساسيات HTML

الأجزاء الرئيسية من عنصرنا هي:

وسم الفتح: يتألف من اسم العنصر (في حالتنا p)، محاطاً بقوس مفتوح وآخر مغلق، يحدد هذا المكوِّن بداية العنصر، أو بداية التأثير الذي يُضفيه (في حالتنا بداية الفقرة).

وسم الإغلاق: مشابه لسابقه، ما عدا أنَّه يتضمن مائلة أماميّة (/) قبل اسم العنصر، يحدد هذا المكوِّن نهاية العنصر (في حالتنا نهاية الفقرة). يُعد نسيان وضع وسم الإغلاق أحد الأخطاء الشائعة التي يقع بها المبتدئون والتي تؤدي إلى مشاكل مزعجة.

المحتوى: يُمثِّل هذا المكوِّن محتوى العنصر .

العنصر: هو الكيان ككل المؤلَّف من وسم الفتح، ووسم الإغلاق، ويتوسطه محتواه.

اقرأ ايضًا:

قد يحتوي العنصر أيضاً على بعض السِمات (attributes)، تحتوي السِمات على معلومات إضافية حول العنصر لا تظهر في المحتوى الفعلي. في حالتنا، يُعد class اسم السِمَة و editor-note قيمتها. السِمَة class تسمح لك بأن تعطي العنصر مُعرِّف يُمكِن استخدامه لاحقاً للإشارة للعنصر لإعطائه تنسيق معين وأشياء أخرى.

الأكواد المستخدمة في HTML وإستخدامتها:

اي صفحة HTML لابد من ان تبدأ بالوسم < html > وتنتهى < /html >، ويكون جميع الوسوم والاكواد الاخرى بينهما.

وداخل هذين الوسمين تنقسم الصفحة الى قسمين اساسيين هما :

رأس الصفحة : Head وجسم الصفحة : Body

والوسوم الخاصة بها بهذا الشكل :

<head> ……… </head>
<body> ……… </body>
الوسم <B> : وهو يجعل الخط سميك
الوسم <i> : ويجعل الخط مائل

الوسم <u> : وهذا الوسم يجعل الكلمة تحتها خط

اذا اردنا ان نكتب كلمة ونضيف اليها الوسوم السابقة جميعا تكتب بهذا الشكل                                                             <b><i><u>TEST</u></i></b>
الوسم <blockquote> : وهذا الوسم لازاحة النص او عمل مربع اقتباس
الوسم <small> : لجعل حجم الخط صغير
الوسم <Big> : لجعل الكتابة بخط كبير
الوسم <s> : وهذا لجعل الكلمة مشطوبة
 الوسم <br> : لبدء سطر جديد
الوسم <nobr> : ليجعل الجملة كلها فى سطر واحد
الوسم <sup> : وهذا يجعل الكلمة مرتفعة عن السطر قليلا
الوسم <sub> : وتجعل الخط منخفض قليلا عن السطر ( الفرق بين الاولى الثانية حرف P و B )
الوسم <TT> : هذا الوسم يجعل الكتابة مثل الالة الكاتبة

لا يوجد فرق بين كتابة الوسوم بحروف كبيرة او صغيرة ( لا تتأثر الاتش تى ام ال HTML بحالة الاحرف).

شاركها

اترك تعليقاً