القائمة الرئيسية

الصفحات

الدرس 1 : خطوات انشاء صفحة و حفظها : دورة HTML من الصفر بداية الاحتراف

بسم الله الرحمن الرحيم

سنبدأ اليوم بإذن الله إفتتاح منهجنا الذي نسأل الله تعالى أن يوفقنا ويعيننا فيه .

سنشرح اليوم خطوات عمل الصفحه وحفظها

نبدأ على بركة الله

تتكون أكواد لغة HTML من قسم واحد رئيسي وهو :

- القسم الكبير : <html></html>

ويتكون هذا القسم من فرعين أو وسمين وهما :

1 - الوسم <head> </head>

ويكتب بداخله عنوان الصفحه ويكون الوسم الخاص به كالتالي

<title>هنا يكتب عنوان الصفحه </title>

2 - الوسم <body> </body>

والذي يتم كتابة نصوص صفحة الويب ضمنه، بالإضافة إلى إدراج الصور والجداول

وباقي محتويات الصفحة. وهو أيضاً يحتاج إلى وسم الإنهاء

دعونا الآن نكتب مثالأ على هذه الأوسام 


هده هي هيكلة صفحة الرئيسية للـ HTML 
 الان طبق التالي


إذهب إلى سطح المكتب ثم بأي منطقه خاليه قم بالضغط بزر الماوس الأيمن

ثم جديد ثم مستند نصي كما هو موضح بالصوره :

ثم نقوم بكتابة القسم الرئيسي أو الوسم الرئيسي وهو

<html> من دون اغلاقه بالكود </html> سنقوم بإغلاقه لاحقاً

ثم نقوم بكتابة الوسم <head> من دون إغلاقه أيضا

ثم نأتي لكتابة العنوان داخل الرأس head
 <title>مدونة مهندسي المعلوميات</title>


الآن سنقوم بإغلاق وسم الرأس head كالتالي

</head>

لتصبح المعادله كاملة كما يأتي

كود:
<html>
<head>
<title>مدونة مهندسي المعلوميات </title>
</head>
هكذا إنتهينا من القسم الأول من السؤال وهو العنوان

مع ملاحظة إلى الآن لم نغلق الوسم </html>

لأن الكود لم ينتهي 
سنستخدم الوسم <body></body>

لانه المطلوب داخل الصفحه ويظهر للزائر . فهذا هو الوسم الذي يطلبه بالسؤال

سنقوم الآن بكتابة الوسم وما يطلبه بالسؤال

ولكن أرجوا التركيز هنا في هذه المنطقه المهم وقد تجد فيها صعوبه إذا لم تفهمها جيداً

في أي نص داخل وسم الجسم body سنستخدم الوسم <p></p> ولكن ركز كيف

سيكتب الكود . لتعريض الخط سنستخدم الوسم <b></b>

وللميلان سنستخدم الوسم <i></i>

ولاتجاهات النصوص سواءاً إلى اليمين او اليسار او التوسيط

right , center , left

نأتي الآن الى كود الأوسام السابقه

ملاحظه هامه جداً

هناك عدة طرق لكتابة الكود

ولكن حالياً عن طريق المفركه سنكتب الكود السهل

وسأضع الكودين الآن

للمفكره والطريقه السهله

كود:
<p><center> <b> <i>هنا الرسالة التي ستظهر للزائر
</b></i></center> </p>
 نتيجة الدرس الاول 
,::::,

reaction: