ما هي HTML؟ شرح لغة توصيف النص التشعبي

في هذه المقالة، سوف نشرح ما هي HTML ، ونقدم أمثلة عن كيفية عملها. HTML هي لغة ترميز تستخدم في إنشاء وتصميم صفحات ومواقع الويب. من الممكن التأكد من أن أكثر من 99.9٪ من المواقع على الإنترنت تستخدم HTML.

محتويات هذه المقاله :

ما هي HTML وكيف تعمل؟

تستخدم لغة توصيف النص التشعبي (أو HTML) لوصف المظهر المرئي للمستند الذي سيتم عرضه في المستعرض. للتوضيح ، من المهم توضيح كيفية عملها بشكل أساسي. تُستخدم وسوم مختلفة لوصف المظهر المرئي لصفحة الويب. يمكننا استخدام مجموعة متنوعة من وسوم HTML لتحديد بنية صفحة الويب. بشكل أساسي ، تحدد HTML بنية صفحة الويب. يتم حفظ ملف HTML بتنسيق .html ويتم استخدام مستعرض ويب لرؤية ملف HTML يعمل كصفحة ويب.

يمكننا استخدام تقنيات مثل CSS ولغات البرمجة النصية مثل Javascript مع HTML. تحدد HTML فقط البنية الأساسية لصفحة الويب ، ونستخدم CSS معها لجعلها تبدو أفضل وبشكل جذاب للمستخدم. تلعب Javascript أيضًا دورًا مهمًا مع CSS. نستخدم Javascript لتفاعل المستخدم مع مستندات HTML. لكن لغة HTML هي التي تلعب الجزء الأكثر أهمية ، أي تحديد البنية الأساسية لصفحات الويب.

كيف تتعلم برمجة HTML ؟

الترميز في HTML سهل جداً. HTML هي لغة توصيف فقط. أو يمكننا القول أنه من الأسهل بكثير تعلم HTML مقارنة باللغات الأخرى مثل Javascript و Java و Python وما إلى ذلك. HTML ليست سوى وسوم فقط. يتم إنشاء وسم في HTML عن طريق كتابة اسم الوسم بين علامة أقل من (>) وأكبر من (<). ، لاغلاق الوسم تتم كتابة اسم الوسم مرة أخرى بين علامة أقل من (>) وعلامة أكبر من علامة (<) ، ولكن هناك اختلاف واحد. نستخدم الشرطة المائلة (/) قبل اسم الوسم أثناء الإغلاق. فيما يلي مثال على علامة HTML أساسية.

<html>
</html>

في السطر الاول قمنا بانشاء وسم html, وفي السطر الثاني قمنا باغلاقة مع ملاحظة اننا اضفنا شرطة مائلة للاغلاق.

يمكننا أيضًا إدراج وسوم HTML داخل الوسوم الموجودة. يُظهر الكود التالي مثالاً للوسوم HTML المتداخلة.

<html>
<body>
</body>
</html>

لاحظ الكود أعلاه. لقد قمنا بإنشاء وسم HTML وبعد ذلك ، قمنا أيضًا بإنشاء وسم body. في السطر التالي ، أغلقنا وسم body الأساسي قبل إغلاق وسم HTML. هذا مهم جدا. يتم إغلاق الوسم الفرعي دائمًا قبل الوسم الأصلي. في الكود أعلاه ، وسم body هو الوسم الفرعي بينما وسم HTML هو الأصل.

هناك أيضًا بعض الوسوم بدون وسم إغلاق. على سبيل المثال ، وسم img. نستخدم وسم img لإدراج صورة في مستند HTML. فيما يلي مثال على وسم img.

<img src="" >

وسوم HTML الاساسية

يوجد الكثير من الوسوم في HTML. نظرًا لأنني لا أستطيع شرح كل وسم موجود في HTML ، فسأشرح الوسوم الأساسية التي تشكل أساس تعلم HTML. كل من يريد أن يعرف ما هي HTML يحتاج إلى معرفة وسوم HTML الأساسية.

وسم Html

الوسم الأساسي هو وسم HTML. شرحت سابقًا كيفية استخدام وسم HTML. تخبر علامة HTML المتصفح أننا نقوم بإنشاء مستند HTML. يحتوي على جميع وسوم HTML الأخرى. فيما يلي تمثيل لمستندات HTML التي تحتوي على وسميين أخريين.

<html>
<head>
..
</head>
<body>
..
</body>
</html>

وسم Head

وسم أخر مهم هو وسم Head . بشكل عام ، نستخدم وسم head مباشرة بعد كتابة وسم HTML. يمكن أن يحتوي وسم Head على عنوان ونصوص وأنماط والمزيد. يمكننا وضع العناصر التالية داخل وسم Head.

<title>
<script>
<style>
<link>

في المثال التالي ، استخدمت وسم head والعنوان المُدرج وسوم النمط فيه.

<html>
<head>
<title> هنا نضع عنوان الصفحة </title>
<style>
body{
background-color: red
}
</style>
</head>
<body>
</body>
</html>

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

توضيح للكود أعلاه.

وسم Body

يحدد وسم Body الأساسي للمستند. إنه وسم الرئيسية لصفحة الويب بتنسيق HTML. نضيف كل المحتوى لصفحة الويب داخل وسم Body. يمكن أن يحتوي على أي شيء مثل الفقرات والصور والعناوين والنماذج والجداول وغيرها الكثير. يُظهر الكود التالي وسم Body مكون من فقرتين وثلاثة عناوين مختلفة. لذلك عندما نتحدث عن ماهية HTML ، فإن وسم Body الأساسي ه, العنصر الرئيسي لصفحة الويب.

<html>
<body>
<p> الفقرة الاولى </p>
<p> الفقرة الثانية </p>
<h1> عنوان كبير </h1>
<h4> عنوان صغير </h4>
</body>
</html>
شورت ميديا للخدمات والاستشارات التقنية
توضيح لمخرجات للكود أعلاه.

وسم img

يُستخدم وسم img لإدراج الصور داخل Body مستند HTML. الصور دائما مهمة ومفيدة في صفحة الويب. حتى نتمكن من استخدام وسم الصور. يحتوي على سمة src التي يتعين علينا فيها إضافة مسار أو عنوان URL للصورة. يمكننا أيضًا ضبط عرض الصورة وارتفاعها باستخدام سمات العرض والارتفاع. تحتوي الأكواد التالية على وسم img داخل وسم Body الأساسي.

<html>
<body>
<img src="https://ashort.xyz/wp-content/uploads/2022/10/%D8%AA%D8%B5%D9%85%D9%8A%D9%85-1024x582.png?background=000000&cropX1=0
&cropX2=1559&cropY1=130&cropY2=1690" width="400px" height="400px" alt="ronaldo">
</body>
</html>

توضيح لمخرجات الكود أعلاه.

في الكود أعلاه ، استخدمت رابطًا لصورة تحتوي على بانر من موقع شورت ميديا . لقد أضفت الرابط في سمة src. لقد استخدمت أيضًا سمات العرض والارتفاع لتعيين المعلمات على 800*400 بكسل. يحتوي وسم img أيضًا على سمة alt التي تحدد ما يجب أن يظهر على الشاشة إذا لم يتم تحميل الصورة لسبب ما.

تاريخ HTML

تم ذكر HTML لأول مرة على الإنترنت بواسطة Tim Berners-Lee في عام 1991. تم تعميم HTML بواسطة متصفح الفسيفساء الذي طوره NCSA. تتألف من ثمانية عشر عنصرا. طورت CERN الموقع الأول. تم وضعه على الإنترنت في السادس من أغسطس عام 1991. في عام 1995 ، تم تطوير HTML 2.0 والتي كانت أساس المستقبل. ظهرت HTML 3.2 في عام 1997. لكنها لم تكن واعدة. مع تقدم التكنولوجيا ، تقدم العمل على HTML أيضًا. كانت HTML 4.0 التي ظهرت في أواخر عام 1997 والتي وسعت آليات أوراق الأنماط ، والبرمجة النصية ، والإطارات ، وكائنات التضمين ، وما إلى ذلك. لقد كانت نسخة جيدة الإنتاج من HTML. كان HTML 4.01 تحسينًا. كان الإصدار الرئيسي لسنوات عديدة حتى ظهر HTML5 في عام 2014. جاء HTML5 مع بعض القواعد والخيارات الجديدة.

الاستنتاج

عندما تسأل عن ماهية HTML ، من المهم أن تشرح ما هي وسوم HTML ، وملاحظة أساسية حول الوسوم الإضافية. هناك العديد من الوسوم مثل الصور والروابط والجداول والأزرار … إذا كنت تريد أن تصبح مطور ويب ، فإن أول شيء تحتاج إلى معرفته هي لغة توصيف النص التشعبي HTML. ليس من الصعب تعلم وفهم HTML. ما عليك سوى فهم كيفية عمل وسوم HTML وكيفية استخدامها بشكل صحيح. يشكل HTML الهيكل الأساسي لصفحة الويب. إلى جانب CSS و Javascript ، تعد HTML تقنية أساسية لشبكة الويب العالمية (www).

انتهت مقالتنا لهذا اليوم اتمنى تكونوا استمتعتوا واستفدتوا وأي احد عنده استفسار او اي سؤال او طلب خدمة نحن في شورت ميديا نقدم الاستشارات مجاناً تواصل معنا على الوسائل المتوفرة وشكراً لكم لوقتكم.

مشاركة على فايسبوك
مشاركة على تويتر
مشاركة على لينك دن
مشاركة على بنترست

التعليقات

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

جميع الحقوق محفوضة لشركة شورت ميديا  ©2022