المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : دورة تصميم المواقع (1) تعلم لغة HTML



بخيت
13-09-2003, 06:02 AM
السلام عليكم ورحمة الله وبركاته

بسم الله الرحمن الرحمين والصلاة والسلام على رسول الله صلى الله عليه وسلم وعلى آله وصحبه أجمعين ..

اقسم بالله العظيم بان لا استغل ما اتعلمه من هذه الدورة فيما يغضب الله ورسوله او يسيئ للاسلام والمسلمين ... والله على ما اقول شهيد
هذه الدوره مقامه برعايه موقع تسكين للاسنضافة والتسكين وجميع الحقوق محفوظه لهم ويمنع نسخها او نقلها في موقع غير موقع الدرر او موقع دسم بدون الإذن المسبق من أصحاب تسكين للاستظافه والتسكين ويشهد على ذلك رب العباد

بدايه لغة HTML ومعناها ( Hyper Text Markup Language ) والتي تستخدم لإنشاء صفحات الأنترنت هي لغة عرض فقط وليست لغه تفاعليه كحال لغة php و ASP و perl وغيرها من اللغات الديناميكيه .

وبتعبير بسيط هذه اللغه تتكون من وسوم محدده تقرأها المستعرضات كأنترنت إكسبلولر ( Internet Explorer ) و نتسكايب نفيجيتور ( Netscape Navigator ) لتنتج منها اشكال والوان وخطوط وجداول وخلافه مما نراه في أغلب المواقع على الوب .
ملاحظه : يعتقد الكثيرون ان التعامل مع هذه اللغه يتطلب وجود برنامج فرونت بيج (Microsoft FrontPage) وهذا اعتقاد خاطيء . ولكي تنشيء صفحة انترنت بهذه اللغه لا تحتاج اكثر من محرر نصوص كالمفكره ( Notebad ) .



وسوم لغة HTML :
المقصود هنا بالوسوم هي (TAGS) الخاصه بهذه اللغة
وتستخدم هذه الوسوم كالآتي :
http://www.tasken.com/images/html/tags.jpg
ولو لاحظنا سنجد ان بداية الوسم ونهايته لا يختلفان كثيرا والفرق فقط هو علامة ( / ) واحده تاتي في نهاية الوسم .
كما ان صفحة الوب يتم تعريفها للمتصفح كصفحه مصنوعه بواسطة هذه اللغه بواسطة الوسم الخاص بها وهو <HTML> في البدايه وتنتهي الصفحه بـ <HTML/>
ويتم تقسيم صفحة الوب الى ثلاثه اقسام رئيسه وهي
HTML
ثم
HEAD
ثم
BODY
وبهذه الصوره تتضح اماكن هذه الوسوم
http://www.tasken.com/images/html/page.jpg
وكما هو معلوم كلمة head تعني رأس الصفحه
وكلمة body تعني جسم او متن الصفحه
اما html فكما ذكرنا هي ما تجعل المتصفح يقرا هذه الصفحه كصفحة HTML
ملاحظه : ان وسوم الصفحه متراكبه ومتتاليه فليس وجوبا عليك انهاء وسم ثم فتح التالي وانما تستطيع فتح اكثر من وسم دون اقفال الوسم الاول .



وسم <head> :
هذا الوسم مختص بعدة امور سيأتي ذكرها فيما بعد ولكن ما يهم هنا هو ان ما داخل هذا الوسم لا يتم عرضه في المتصفح اي انه غير مرئي عندما تستعرض الصفحه ..
بإستناء وسم واحد يأتي بداخل هذا الوسم وهو وسم <title> وهذا الوسم هو الوسم الخاص بإسم الصفحه والذي يظهر في رأس المتصفح ( في الشريط الازرق باعلى برنامج انترنت اكسبلولر )
وكمثال : <title>Microsoft Corporation</title>
هذا ما تمت كتابته داخل هذا الوسم في موقع ما يكروسفت إظغط على هذا الرابط لتراه (http://www.microsoft.com/)
هذا هو الوسم الذي من الممكن ان يراه الناظر الي صفحة الوب اما البقيه فهي غير مرئيه ومن تلك وسوم الميتا ( **** TAGS ) وان تيسر لنا ربما شرحنا عنها في دروس أخرى ..



وسم <body> :
في هذا الوسم يتم كتابة كامل محتوى الصفحه من جداول ونصوص وصور والوان وخلافه

من المهم هنا ان نذكر انه عندما نقول افتح وسم فاننا نعني أكتب الوسم كما هو .. وعندما نقول أغلق الوسم فاننا نعني أكتب الوسم وأضف له علامة ( / ) حتى يتم ابطال مفعول الوسم لما ياتي بعده


إذا ما رأيكم أن بدأ العمل ؟
حسنا لنفتح برنامج المفكره ونبدأ بكتابة الآتي :


<html>
<head>
<title/>التمرين الاول<title>
<head/>
<body>
بسم الله الرحمن الرحيم .. هذا هو محتوى الصفحه
<body/>
<html/>


الآن قم بحفظ عملك ولاكن لا تنسى ان تحفظ الصفحه بصيغة HTML اي قم بتغيير اسم الصفحه من ( Untitled.txt ) الى ( page.html )
ملاحظه : لا أعلم ولكن ربما في نظام الوندوز العربي المفكره تحفظ باسم ( txt.مستند جديد ) لذلك قم يتغييره الى ( page.html )
الآن قم بفتح هذه الصفحه في متصفحك لترى النتيجه




تمرين آخر:


<html>
<head>
<title/>التمرين الثاني<title>
<head/>
<body>
بسم الله الرحمن الرحيم
هذا هو محتوى الصفحه
<body/>
<html/>


قم بالحفظ والتجربه ..
والآن لعلك تستغرب وجود نفس النتيجه لكلا التمرينين مع اختلاف عدد السطور !!




اذا قم بعمل التمرين التالي :

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



هذا هو محتوى الصفحه
<body/>
<html/>

احفظ وشاهد النتيجه ..




اذا لافرق ؟؟
نعم فهذا يوضح ان الفراغات وتعدد السطور لا يؤثر على النتيجه في هذه اللغه


الآن اترككم مع هذه التطبيقات لأرى النتائج .. ونلتقي في الدرس التالي ( انفع مدرس نحو :D)

أرجو من الجميع عدم التردد او التحرج من طرح اي استفسار او سؤال هنا او على بريدي الشخصي .. كما أتمنى إن كان هناك اي ملاحظه على الشرح بلفت نظري اليها ..
تحياتي اليكم ..
بريد وماسنجر [email protected]

ناصر الأحمد
13-09-2003, 07:37 AM
صباااااااح الخير بخيتووووه

يعطيك العافيه


والله يقويك

بس بقط معاك شوي

تغير اسم الملف بالوندوز مايضبط

وقت الحفظ لازم يصير الملف بصيغه html
او htm

تحيااااااااتوووووووووووووو

معصوب بالقشطة
13-09-2003, 01:42 PM
ابو الشباب

انا جديد على البرنامج
وببدأ معاك اذا لقيت شيء ماعرفته بسأله
ترى بطفشك|326|

بخيت
14-09-2003, 12:30 AM
اهلين جعجع بيك

والله ما ادري ياناصر بالتمام في الوندوز العربي كيف يتم الحفظ وياليت تفيد الشباب في هذا الموضوع ..
بالنسبه لي احب استخدام برنامج Editplus (http://www.editplus.com) والحقيقه انصح به لمن يستخدم المحررات بكثره ..
مشكور ناصر

معصوب باشا ( ابو الشباب انت )
ياسيدي الموضوع نازل لكم ولمساعدتكم ولا تتحرج من اي سؤال ..
انتظرك ..


تحياتي لكم ..

ملك العالم
15-09-2003, 09:01 PM
حلو

تسلم استاذ بخيتوه ..

:SMIL:

قم للمعلم وفه التبجيلا .. كاد المعلم ان يكون رسولا

يا عيني يا عيني ..

والله وكبرت يا بخيت وصرت تعلم ..

آآآآآه يا زمن ..

:005:

تامي ونحن معك

ايه صح

اررررررررررررررررررررررررررحب

سلام