اكاديمية ورشة لونك

أمثلة الأساسيات في HTML

أمثلة أساسية في لغة HTML اتش تي ام ال

هذا الدرس الثالث من دورة تعلم لغة الاتش تي ام ال أو HTML أو هتمل و في هذا الدرس سوف اقدم لكم بعض الأمثلة البسيطة في لغة الاتش تي ام ال HTML .

لا تقلق إذا وجدت في هذه الأمثلة وسوم لم تتعلمها بعد فإنك سوف تتعلمها في الدروس القادمة .

مستندات HTML

يجب على جميع مستندات HTML أن تبدأ مع تعريف نوع الوثيقة: <!DOCTYPE html> , مستند HTML نفسه يبدأ <html> وينتهي بـ </html> و الجزء المرئي من مستند HTML يكون بين وسم <body> و </body> .

مثال

[code]<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>[/code]

و يظهر بهذا الشكل

تعلم html بالعربية
تعلم html بالعربية

العناوين في HTML

يتم تحديد العناوين في HTML من <h1> إلي <h6> و كل عنوان منهم بحجم مختلف و عاده ما يتم إستخدامه لتحديد الأولويات و النقاط فإن العنوان الذي يستخدم <h1> فهو الأهم و <h6> فهو الأقل أهمية و هكذا .

مثال

[code]<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>[/code]

و يظهر بهذا الشكل

تعلم html من الألف الى الياء
تعلم html من الألف الى الياء

الفقرات في HTML

و يتم تعريف الفقرات في HTML بوسم <p> :

مثال

[code]<p>This is a paragraph.</p>
<p>This is another paragraph.</p>[/code]

الروابط في الاتش تي ام ال

يتم تعريف الروابط Links في لغة HTML بوسم <a> :

مثال

[code]<a href="http://www.yourcolor.net">هذا رابط</a>[/code]

و يتم تحديد إلي أين يتوجه الرابط بخاصية herf و يوجد سمات أخري لتقديم معلومات إضافية حول عناصر HTML .

الصور في HTML

يتم تعريف الصور في HTML بوسم <IMG> .

في SRC تقوم بوضع ملف المصدر , و في alt تقوم بوضع النص البديل و لتتحكم في الحجم حدد Height و width .

مثال

[code]<img src="yourcolor.jpg" alt="yourcolor.net" width="104" height="142">[/code]

تظهر هكذا

تعلم html للمبتدئين
تعلم html للمبتدئين

الدرس التالي : عناصر HTML
الدرس السابق : برامج تحرير HTML
باقي الدروس : دورة تعلم HTML اتش تي ام ال مجانا

مهاب البوشي

مهاب البوشي

مهاب البوشي ، مؤسس شركة ترويج 'Trweeg.Com' و مسئول السيو و التسويق في ورشة لونك و مدير اكاديمية ورشة لونك التعليمية .

اضف تعليق

Your Header Sidebar area is currently empty. Hurry up and add some widgets.