HTML - الدرس الأول للمبتدين
بسم الله الرحمن الرحيم
لغة ترميز النص الفائق (Hyper Text Markup Langauge) واختصارها HTML من أقدم اللغات وأوسعها استخداما في تصميم صفحات الويب .
وتستخدم الـ HTML مايعرف بالوسوم Tags لإصدار التعليمات إلى المتصفح، هذه الوسوم توضع بين علامتى أكبر من > وأصغر من < التي تنقسم إلى نوعين :
- وسوم البداية كـ <html> , <p> , <h1> , <body> .
- وسوم النهاية كـ <html> , </p> , </h1> , </body/> .
- الوسم <HTML> لبداية الصفحة و الوسم </HTML> لنهاية الصفحة .
- الوسم <HEAD> <HEAD/> لبداية المقطع الذي فيه معلومات تعريف الصفحة كالعنوان .
- الوسم </TITLE> <TITLE> وهو لعنوان الصفحة .
لغة ترميز النص الفائق (Hyper Text Markup Langauge) واختصارها HTML من أقدم اللغات وأوسعها استخداما في تصميم صفحات الويب .
وتستخدم الـ HTML مايعرف بالوسوم Tags لإصدار التعليمات إلى المتصفح، هذه الوسوم توضع بين علامتى أكبر من > وأصغر من < التي تنقسم إلى نوعين :
- وسوم البداية كـ <html> , <p> , <h1> , <body> .
- وسوم النهاية كـ <html> , </p> , </h1> , </body/> .
- الوسم <HTML> لبداية الصفحة و الوسم </HTML> لنهاية الصفحة .
- الوسم <HEAD> <HEAD/> لبداية المقطع الذي فيه معلومات تعريف الصفحة كالعنوان .
- الوسم </TITLE> <TITLE> وهو لعنوان الصفحة .
- الوسم <BODY> <BODY/> وهو لإدراج نصوص وصور وجداول .. الصفحة .
ملاحظة : اثناء شرح الدروس يمكنك كتابة الاكواد في محرر Notepad الموجود في ويندوز وبعد ذلك حفظه بامتداد htm وفتحه بأي متصفح مثل فايرفوكس او جوجل كروم لتجريب الكود .
الأن لنقم بكتابة اول صفحة ويب باستخدام الوسوم السابقة ونقم بترتيبها من اول الصفحة الى اخرها :
<html>
<body>
<h1>my name is khaled</h1>
<p>my name is khaled</p>
</body>
</html>
وكما قلنا نحفظه بمستند نصي بامتداد htm وثم نقوم بفتحه بالمتصفح وسيكون على الشكل التالي :
نلاحظ في الصفحة أن الوسوم لم تظهر فيها أبداً, وكل ما ظهر هو ما بين الوسوم ونلاحظ أن الجملة الأولى جاءت اكبر من الجملة الثانية حيث أن :
<p/> <p> و تستعمل لانشاء فقرة في الصفحة ووضعها في سطر خاص .
<h1/> <h1> هذا الوسم كلما زاد الرقم فيه قل حجم الخط, مثال عليه :
<p/> <p> و تستعمل لانشاء فقرة في الصفحة ووضعها في سطر خاص .
<h1/> <h1> هذا الوسم كلما زاد الرقم فيه قل حجم الخط, مثال عليه :
<h1>my name is khaled 1</h1>
<h2>my name is khaled 2</h2>
<h3>my name is khaled 3</h3>
- الوسم </b> سطر جديد .
- الوسم <hr/> رسم خط أو سطر في الصفحة .
my name is </br> khaled
<hr/>
my name </br> is khaled
- الوسم <ul><li> </ul></li> كتابة نص ذات تعداد نقطي .
- الوسم <ol><li> </ol></li> كتابة نص ذات تعداد رقمي .
<ul><li> my name is khaled </ul></li>
<ol><li> my name is khaled </ol></li>
اذا اعجبك الدرس يمكن ببساطة حفظه على جهازك من متصفح جوجل كروم بالضغط
على ctrl+p وسيتم حفظه على جهازك بصيغة pdf .
شرح وبقلم الاستاذ خالد
0 التعليقات:
إرسال تعليق