سلسلة تعلم البرمجة إنشاء ملف html وكتابة النصوص والتأثير عليها بإستخدام الوسوم البرمجية
بعد التعرف على أنواع الوسوم والمقدمة السابقة عن لغة html نبدأ اليوم
التطبيق العملى على إنشاء ملفات html والتعرف على طرق التحكم فيها ،
ونتعرف أيضا على عدد من الوسوم المهمة التى سنستخدمها .
نستخدم برنامج النوت باد العادي أثناء الشرح ،فى الدروس القادمة سيتم إستخدام برنامج دريم ويفر .
إنشاء ملف html بإستخدام
برنامج نوت باد العادى .
أنشئ ملف نوت باد عادى ثم قم بحفظ الملف بصيغة html ،تلقائياً سيتم إنشاء ملف آخر عن طريق المتصفح ،ويبقى ملف النوت باد العادى موجود كما هو وعند التعديل على ملف النوت باد العادى سيتم التعديل التلقائي فى المتصفح .
قم بكتابة أى شيئ فى ملف النوت باد العادى ثم إحفظ التعديل ثم قم بعمل ريفرش لصفحة المتصفح ستظهر التعديلات التى قمت بحفظها على ملف النوت باد .
وتلقائياً عند تعديل أى شيئ داخل ملف النوت باد يتم التعديل على صفحة المتصفح .
لكن ماتم كتابته هى كلمات عادية لا تحمل أى وسومات
برمجية .
سنكتب الآن على ملف النوت باد الوسم التالى لكى ترى
التأثير الناتج على صفحة المتصفح .
فمثلاً الوسم center يستخدم لعمل
التأثيرات على النصوص لجعلها فى منتصف الصفحة لأن المسافات التى يتم كتابتها على
النوت باد لا يتم تطبيقها على المتصفح إلا إذا تم إستخدام لغة برمجة .
سنقوم بكتابة الوسم center لكى يتم كتابة الجملة this is html file فى منتصف صفحة المتصفح .
تماماً مثل المثال السابق يتم إستخدام الوسومات المختلفة
لإحداث التعديلات على النصوص وما هو موجود داخل ملف html لكي يتم
تنفيذها على المتصفح .
بعض الوسوم المهمة
- وسم font :- وسم font من الوسومات
ذات الباراميترات (راجع أنواع الوسوم من هذا المقال).
الوسم
<font color="red" size="8" face="arial" > بداية الوسم
</font> نهاية الوسم
الوسم يحمل 3 باراميترات (color،size،face)
باراميتر color يستخدم لتحديد قيمة اللون على
النص .
باراميتر size يستخدم لتحديد قيمة حجم الخط
على النص .
باراميتر face يستخدم لتحديد قيمة نوع الخط
على النص .
وعند تطبيق الوسم السابق على النص فى ملف النوت باد وملاحظة التغير على صفحة المتصفح .
- وسم break :- يستخدم لبدأ خط جديد حيث أن
لغة html
غير حساسة للمسافات المكتوبة داخل النص .
<br/> بداية ونهاية الوسم (وسم فردي
له بداية وليس له نهاية)
- وسم bold:- يستخدم لكتابة النص بخط سميك
.
<b> بداية الوسم
</b> نهاية الوسم
- وسم i:- يستخدم لكتابة النص بخط مائل
.
<i> بداية الوسم
</i> نهاية الوسم
- وسم u:- يستخدم لكتابة النص وتحته خط .
<u> بداية الوسم
</u> نهاية الوسم
<s> بداية الوسم
</s> نهاية الوسم
- وسم sup:- يستخدم لكتابة النص فى
الأعلى مثل الوضع الأسي .
<sup> بداية الوسم
</sup> نهاية الوسم
<sub> بداية الوسم
</sub> نهاية الوسم
- وسم header :- يستخدم للتحكم فى العناوين
.
<h> بداية الوسم
</h> نهاية الوسم
يتم إعطاء الوسم قيمة مابين 1-6 حيث القيمه 1 تمثل أكبر
حجم للعنوان والقيمة 6 تمثل أصغر حجم للعنوان ويتم كتابة القيمة فى بداية الوسم
وفى نهاية الوسم .
<h1> بداية الوسم
</h1> نهاية الوسم
- وسم hr :- يستخدم لعمل الفواصل
السطرية وهو وسم فردى ذات باراميترات .
<hr color="red" size="40"
width="500" />
بداية ونهاية الوسم (سيتم الشرح على مثال عملي لكل الوسومات السابقة لاحقاً)
البراميترات كما تم شرحها سابقاً ولكن الباراميتر width يمكن أن
يأخذ قيمة رقمية مثل 500 أو أى رقم آخر وممكن أن يأخذ نسبه من حجم صفحة المتصفح
مثل 80% أو أى نسبة أخرى .
تطبيق عملي على كل الوسوم السابقة
تعليقات
إرسال تعليق