درس كتابة عنوان الصفحة بلغة html و راس الصفحة وتحديد اتجاهها – الدرس الخامس

| 10 أبريل 2010

السلام عليكم ورحمة الله وبركاته
فى الدرس السابق قمنا بتعريف الوسوم وكيف يتم كتابة الوسم وكيف يتم انهاء عمله وما نحتاج اليه لتعلم واستخدام لغة HTML
وفى هذا الدرس سوف نعرف ان شاء الله كيف نكتب ما نريد فى الشريط العلوى وايضا ما هو وسم head والوسم body وكيف نقوم بتحديد اتجاه الصفحه وكيف نقوم بحفظ العمل

نقوم بفتح محرر النصوص لنبدا العمل

كما تعلمنا فى الدرس السابق لكى نقوم بانشاء ملف HTML يجب ان نقوم بتعريف المتصفح باللغه التى سنستخدمها
اذا اول ما سنكتبه فى محرر النصوص هو وسم HTML التالى

1
2
3

<html>
 
</html>

هنا نريد ان نتفق اننا اذا قمنا بكتابة وسم ننهى عمله قبل ان نكتب اى شيء آخر لكى لا ننسى ان نغلق الوسم ويشكل خطا ومن الممكن ان يشوه التصميم وتضيع وقت كثير فى البحث عن الخطا وتصحيحه
وبالاعلى انا قمت بكتابة الوسم HTML واغلقت الوسم وسوف نكمل العمل بين هذين الوسمين.

شرح الوسم head

والان بعد ان اخبرنا المتصفح باننا نستخدم لغة HTML ناتى للوسم الثانى وهو ياتى دائما بعد وسم HTML مباشرة وهو الوسم head
وهذا الوسم هو المسئول عن الجزء الذى لا يظهر فى الصفحه منها الكلمات الدليليه لمحركات البحث والوصف و اشياء اخرى سوف نقوم بشرحها فى اخر هذه الدوره ان شاء الله
الان سنقوم بكتابة الوسم head لنقوم بعد ذلك بكتابة عنوان للصفحه التى نقوم بتصميمها

1
2
3
4
5

<html>
<head>
 
</head>
</html>

شرح الوسم title لكتابة عنوان الصفحه

بعد ان قمنا بكتابة وسم head لراس الصفحه سوف نقوم بكتابة عنوان للصفحه باستخدام الوسم title
وسنكتب عنوان الصفحه مثلا

بسم الله

وسيكون الكود بهذا الشكل

1
2
3
4
5

<html>
<head>
<title> بسم الله </title>
</head>
</html>

كيف نقوم بحفظ العمل

نقوم بالذهاب الى File ثم Save As كما هو موضح بالصورة التالية

وبعد ان نضغط على save as سيظهر امامنا كما فى الصورة التالية


الارقام التى على الصورة
1- اسم الملف الذى نريد ان نحفظه وسنجعل هنا اسم الملف index.html
يجب حفظ الملف بامتداد html
2 – نوع الملف وهو ملف نصى وسنتركه كما هو
3 – شفرة الكود للملف النصى ويفضل دائما ان تجعلها كما بالصورة UTF-8 وستم شرحها فيما بعد
4 – تضغط على Save ليتم حفظ الملف فى المكان الذى قمت بتحديده كما موضح بالصورة وقد قمنا باختيار سطح المكتب لحفظ الملف عليه
وبعد ان قمنا بحفظ الملف سيكون موجود على سطح المكتب بهذا الشكل

قم بفتح الملف لترى النتيجة وسيظهر كما هو موضح بالصورة التالية

شرح الوسم body للعمل فى محتوى الصفحه

بعد ان قمنا بشرح طريقة عمل عنوان للصفحه الان سوف نبدا العمل فى محتوى الصفحه باستخدام الوسم body
الوسم body هو المسئول عن بدا العمل وانهائه فى محتوى الصفحه اى انك عندما تكتب الوسم body فانك تخبر المتصفح بان كل سوف يكتب بعد هذا الوسم فهو داخل محتوى الصفحه حتى تغلق الوسم واغلاق هذا الوسم يكون قبل اغلاق وسم html مباشرة
والان سنكتب فى محتوى الصفحه بسم الله الرحمن الرحيم
وهذا شكل الكود

1
2
3
4
5
6
7
8

<html>
<head>
<title> بسم الله </title>
</head>
<body>
بسم الله الرحمن الرحيم
</body>
</html>

وهنا قمنا بكتابة الوسم body بعد ما اغلقنا الوسم head لان وظيفة الوسم head تكون قد انتهت وليس لها علاقه بالمحتوى
والان نقوم بحفظ العمل وستكون النتيجه بهذا الشكل ان شاء الله
وستكون النتيجه بهذا الشكل ان شاء الله

تحديد اتجاه الصفحه باستخدام لغة HTML

والان سنقوم بتحديد اتجاه الصفحه من اليمين الى اليسار ام العكس
ونحن بما اننا نكتب العربيه فغالبا سيكون من اليمين الى اليسار
وسيكتب الكود بهذا الشكل

1

 <html dir="rtl">

rtl تعنى right to left من اليمين الى اليسار
واذا اردنا الكتابه من اليسار الى اليمين نستبدلها بـ ltr وتعنى left to right

وهذا شكل الكود كامل

1
2
3
4
5
6
7
8

<html dir="rtl">
<head>
<title> بسم الله </title>
</head>
<body>
بسم الله الرحمن الرحيم
</body>
</html>

نجرب مرة من اليسار الى اليمين ومرة اخرى من اليمين الى اليسار ونلاحظ ما يحدث

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

كلمات البحث الواردة:




مدونات عشوائيه

تحميل...

الاوسمة: , , , ,

التصنيف: دروس html



للاتصال ابوريه: View author profile.



اضافة رد




إذا كنت تريد صوا لتظهر مع تعليقك، الذهاب الحصول على Gravatar.