الخميس، 6 يونيو، 2013

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

س / قم بعمل صفحه خاصه بك ويكون عنوان الصفحه هو (مدونة الكتروني) ويكون ما بداخل الصفحه

رسالة ترحيب للزائر وهي (مرحباً بك عزيزي الزائر .. نتمنى لك قضاء أسعد الأوقات في مدونة الكتروني) مع ملاحظة إستخدام

مايلي في نص رسالة الترحيب بالصفحه :

1 - أن يكون خط الكتابه عريضاً

2 - أن يكون الخط مائلاً

3 - توسيط الكلام بالصفحه


مع ملاحظة : الإجابه عن السؤال عن طريق المفكره txt .

ج / أولاً سنقوم بإنشاء مستند نصي جديد كما يلي

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

ثم جديد ثم مستند نصي

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

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

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

 


ثم نأتي لكتابة العنوان داخل الرأس head

ويكون كالتالي


كود:

<title>مدونة الكتروني</title>


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

</head>

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


كود:
<html>

<head>

<title>مدونة الكتروني</title>

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

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

لأن الكود لم ينتهي أو السؤال لم ينتهي

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


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

رسالة ترحيب للزائر وهي (مرحباً بك عزيزي الزائر .. نتمنى لك قضاء أسعد الأوقات في موقعنا) مع ملاحظة إستخدام

مايلي في نص رسالة الترحيب بالصفحه :

1 - أن يكون خط الكتابه عريضاً

2 - أن يكون الخط مائلاً

3 - توسيط الكلام بالصفحه
ممتاز الآن يطلب أن نقوم بعمل رسالة للزائر , سنستخدم الوسم <body></body>

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

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

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

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

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

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

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

right , center , left

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

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

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

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

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

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


كود:
<p><center> <b> <i>مرحباً بك عزيزي الزائر .. نتمنى لك قضاء أسعد الأوقات في مدونة الكتروني </b></i></center> </p>
للفرونت بيج وسنستخدمها بإذن الله بعد الإنتهاء من المفكره والإنتقال للفرونت بيج

وغير هامه الآن ولكن للتوضيح

كود:
<p align="center" > <i> <b> مرحباً بك عزيزي الزائر .. نتمنى لك قضاء أسعد الأوقات في مدونة الكتروني </b> </i> </p>
سأترك لكم الخيار في كتابة أي الكودين




ليصبح الكود بالكامل كما يلي :

كود:
<html>

<head>

<title>مدونة الكتروني</title>

</head>
<body>
<p><center> <b> <i>مرحباً بك عزيزي الزائر .. نتمنى لك قضاء أسعد الأوقات في موقعنا </b></i></center> </p>
</body>
</html>
نلاحظ بالأخير أغلقنا </html>

بعد ذالك نقوم بحفظ الصفحه على امتداد .html

من قائمة ملف > حفظ باسم > اختيار اسم الصفحه.html
 
ارجوا ان اكون قد اعطيتكم شيء مفيد
وسيكون هناك شروحات اخرى (هي عبارة عن دورس فيها تقريبا 12 درسا)

ليست هناك تعليقات:

إرسال تعليق


من تطوير عبدالرحمان ©2014-2015