سلسلة دروس الـ Html . الأولى

  • بادئ الموضوع AliM
  • تاريخ البدء
  • الردود 9
  • المشاهدات 1,310

AliM

عضو نشيط
التسجيل
15 يونيو 2005
المشاركات
102
الإعجابات
0
بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاتة
والصلاة والسلام على اشرف المرسلين محمد بن عبدالله .
---------------------

اليوم سوف نقوم بعمل بداية لدروس التي قلت عنها . واكررها هنا
Html – CSS - SQL – PHP

وسوف نتطرق لكل لغة بحدة . ونقوم بها بتطبيقات في كل نهاية درس ..

اليوم سوف نتحدث عن الـ html ولكن بطريقتي . ولن اقول ماهي الـ html . واشرح معنها وكل حرف فيها فأكيد الكل قد قراء عنها . ويقراء عن المقدمة حتى نزهق منها .
سنتحدث عن المهم . وهي لغة ا لـ html . لما ندرسها . لعدة أشياء .
منها معرفة كيفية برمجة صفحات ا لويب . تستطيع تعديلها بأي برنامج محرر نصوص . فالشخص الذي يعتمد على برنامج الـ frontpage . سيكون أي يعمل سيقوم به عن طريق هذا البرنامج حتى ينسى كيفية كتابة كود معين . مثل تكبير خط . تلوين خط . وهذه من أصغر الأمور . فما بالك بتغيير جدول . دمج جدول . إضافة صف . . و هكذا من هذه الأمور .
فمعرفة الكود تعطيك ثقة أكبر بنفسك ..
لا أريد أن اتحدث طويلا ً عن ما سلف . والآن سـنبـداء .

طبعـاً لا نحتاج إلي برنامج . أو ماشابة ذلك . سنستخدم فقط . برنامج المفكرة . او notepad باللغة الإنجليزية . ---
دائمأ في كتابة كود الـ HTML .. يبـداء . بوسمين . همـا
< html > هذا يسمى وسم البداية .
….. </html> وهذا يسمى وسم النهاية .

طبعاً في كتابة أي كود في الـ html . يجب فتح الوسم وأغلاق الوسم .
-----------
الآن قم بفتح برنامج المفكرة . ( notepad ) . وسوف نقوم بإفتتاحية كتابة كود او بالأصح ببناء صفحة ويب صغيرة جداً .

وتكتب فيها التالي .





الآن نقوم بشرح الكود ا لذي عملناه ..

كتبنا في بداية الكود <html> . وهو لنعرف أننا سوف نقوم بكتابة كود html .
بعد ذلك . كتبنا <head> . وهو الـرأس وهو الذي سيكون بداخلة <title> وهو لعرض أسمك في المستعرض او في صفحة الأنترنت .
ثم أغلقنا </title> . أولاً . لأننا كتبنا بداخلة الكلام الذي سيعرض في المتصفح عن طريق الـ <head> .
فبعد ان نكتب كود الـ title . نغلقه . نغلق الآن كود <head> بهذه الطريقة </head> .

الـ <body> .. من خلال أسمه . يقول لنا . الجسم . باللغة ا لإنجليزية . ومعنى برمجياً .

محتويات الصفحة و التي ستكون مكوناتها كل شئ . صور . جداول . حدود . كل شئ .

فعند فتحد وسم الـ <body> ينتظر أي شئ تكتبه بعده مباشرة . لكي يظهر في المتصفح أو في المستعرض . فبعد ما تنتهي . تغلقه </body>

أنا كتبت بعد وسم الـ body . هذا الكود <body dir=rtl> ومعنى dir=rtl . أي أن يظهر الكلام من اليمين إلي اليسار . ولو كتبت dir=ltr . سيظهر الكلام من اليسار إلي اليمين .

R= right ..
T = to
L = left
.

----------
وبعد ذلك كتبت في داخل الـ body . وسم <br> . وطبعاً بعض أكواد ا لـ html لا توجد لديها وسم أغلاق . وعمل هذا الكود هـو إنزال الكلام ا لذي سيأتي بعد ( بسم الله الرحمن الرحيم ) في السطر الثاني .
-----------

فبعد ما أنتهينا من كتابة كل شئ في الـ Body . نريد أن نغلق الآن كود الـ html .
فنغلق الآن كود الـ <html> .

الآن قم بحفظ العمل .
file – save as

ملف – حفظ بإسم

ستظهر نافذة اين تريد أن تحفظها . فقم بتحديد المكان المناسب لك . أو أعمله بداخل مجلد معين .
واكتب الأسم الذي تريدة . مثلاً بإسمك وأسمي صفحتي هذه بإسم index.html .



[frame="7 80"]المطلوب منكم أحبتي
كتابة ثلاثة تعبيرات . متتالية . و السطر الرابع يكون أسفلهم[/frame]--------------


أنا أعلم أن بعض الأخوة لديهم معلومات عن الـ Html . فلذلك يرجى منهم أن يتتدرجوا معنى خطوة خطوة . ولا نريد إبراز المقدرات في مجال تعلمنا . .
وأعلم كذلك أن هذا الدرس بسيط جـداً لبعض الأشخاص الذي لديهم خبرة في html . ولكن تذكر أنك بـدأت من الصفر فلنترك البقية يبـدأون كما بـدأنا



مع خالص تحياتي

أخوكم
AliM ..
 

سامر القباطي

مشرف سابق
التسجيل
3 فبراير 2004
المشاركات
1,894
الإعجابات
0
أبدعت جدا جدا جدا عزيزي اليم
الدرس رائع جدا للمبتدئين والمحترفين معا
فهناك من المحترفين في تصميم المواقع ولكن اعتمادهم على الفرونت بيج ينسيهم الأكواد وطريقة كتابتها والتعديل فيها
عموما لا اطيل عليك
واصل معنا روعة حضورك وعطائك
ولن يضيع الله تعبك سدى
بل ستحصل عليه جبالا من الحسنات يوم القيامة ان شاء الله

بالنسبة لسؤالك لم افهمه
هل تقصد نكتب ثلاث عبارات في جسم الصفحة في السطر الأول
ونكتب عبارة رابعة في السطر الثاني
ان كان كذلك فهذا هو تطبيقي

كود:
<html>
<head>
<title> صفحة نبراس اليماني 
</title>
</head>
<body dir=rtl>
بسم الله الرحمن الرحيم ، هذه صفحتي الأولى ، اتمنى أن تقضوا فيها وقتا ممتعا <br> محبكم في الله نبراس اليماني
</body>
</html>
وهناك ملاحظة أخيرة
في صورة الكود التي أرفقتها لعلك أخطأت حيث نسيت إغلاق منطقة الرأس
لك تحياتي الحارة
محبك في الله
نبراس اليماني
 

AliM

عضو نشيط
التسجيل
15 يونيو 2005
المشاركات
102
الإعجابات
0
أهلاً بك أخي العزيز نبراس اليماني ..

وصحيح أخي كما اسلف سابقاً .

ولقد كان التطبيق كما كتبت الكود صحيح .

وأنا كذلك نسيت بدوري علامة أنهاء الوسم تبع الـ <head> .. إلا وهو </head>

يداً بيد . سنتعلم سوياً .. من رأي منكم خطاء فاليراجعني . وبارك الله فيك أ خي العزيز نبراس ا ليماني على مشاركتك الجميلة ..

تحياتي

أخوك AliM
 

العمراوي

مشرف سابق
التسجيل
24 نوفمبر 2002
المشاركات
7,510
الإعجابات
5
ما شاء الله ...


جزاك الله خيرا في هذا الدرس الرائع ... وإن شاء الله تواصل البقية على نفس المستوى ...
 

نسراليمن

عضو متميز
التسجيل
30 سبتمبر 2003
المشاركات
1,233
الإعجابات
0
بداية طيبة ورائعة
بس اشتي اعرف المعني الكامل لــhtml ؟
 

AliM

عضو نشيط
التسجيل
15 يونيو 2005
المشاركات
102
الإعجابات
0
كلمة HTML إختصار لـ Hyper Text Markup Language

الـ Hyper Text هي الطريقة الخاصة بالتحرك علي صفحات الأنترنت بالضغط علي نص معين يدعي (Hyperlinks ) و هي وسيله للتنقل لأي مكان في شبكة الإنترنت عن طريق الضغط علي الوصلات ( الإرتباطات التشعبيه ) LINKS و تعتمد علي ماذا داخل الأوسمة (TAGS) بمعني أنها تحتوي علي أكواد كأي لغة أخري .
 
التسجيل
18 مارس 2005
المشاركات
70
الإعجابات
0
انا معك بدروس اليم وطبقها حتى اذا هذه الدروس اخذتها بس حلو الواحد يتذكر
 

AliM

عضو نشيط
التسجيل
15 يونيو 2005
المشاركات
102
الإعجابات
0
يا أخت وردة .. هذا يسعدني جداً . ويكون أفضل بأن يجد ا لسائل جوابة بأسرع وقت . حتى وأن لم يكن مني انا .. الشخص الذي يعرف ا لإجابة لا يبخل بها . بالعكس يطرحها .. أولاً لأنه مريح لي .

ثانياً . مريح للعضو ا لي سئل ..

ثالثاً .. أشكرك مع فائق إحترامي ..
 

نسراليمن

عضو متميز
التسجيل
30 سبتمبر 2003
المشاركات
1,233
الإعجابات
0
منتظريـــــــــــــــــــــــــــنك :)