الموقع العربي الاول للعبة Silkroad Online - [HTML/CSS] تعلم HTML : دورة احتراف لغة الـ HTML من الالف الى الياء ( مقدمة ) .

http://im61.gulfup.com/GBda5Q.png
مقدمة عن HTML ..
http://im55.gulfup.com/QxQsXY.gif
انها اللغة المستخدمة لانشاء صفحات الويب .
مبدئيا دعونا نتعرف اولا ما هو معنى HTML .

Hyper Text Markup Language

وهى ليست كلغة برمجة بالمعنى الصريح كـ لغة Visual Basic مثلا .. فهذه اللغة لا تحتوى على جمل للتحكم والدوران واذا لزم الامر لاستخدام هذه الجمل يمكن تضمين شفرات من لغات اخرى تستند الى HTML مثل Java Script .
http://im55.gulfup.com/QxQsXY.gif
فهذه اللغة لا تحتاج الى مترجم خاص به Compiler فهى لا ترتبط بنظام تشغيل محدد لانه يتم تفسير اكوادها وتنفيذ التعليمات الخاصة بها مباشرة من قبل متصفح الإنترنت كـ Internet Explorer وبغض النظر عن النظام المستخدم لذلك فهذه اللغة تعتبر بسيطة وسهلة الفهم والتعلم ولا تحتاج الى معرفة سابقة بلغات البرمجة .. بل كل ما تحتاجه هو فنجان شاى وقليل من التفكير المنطقى وبعض الترتيب للافكار قبل التنفيذ .
http://im55.gulfup.com/QxQsXY.gif
من ما تتكون مفردات لغة HTML .
تتكون مفردات هذه اللغة من شفرات تسمى TAGS او بالمسمى العربى الوسوم وهى تستخدم بشكل مزدوج بالمعنى الاصح ( كل وسم له بداية ونهاية ) .
http://im55.gulfup.com/QxQsXY.gif
ويتم كتابة هذه اللغة من اليسار الى اليمين ... دعونا نرى مثالا كما يلى ..

كود بلغة HTML:

<TAGS>هنا يتم كتابة النص المقصود بين الوسمين</TAGS>

وتوضيحا لما سبق فيعتبر الوسم <TAGS> على سبيل المثال هو البداية لكل نص مكتوب .

ويعتبر ايضا الوسم <TAGS/> هو نهاية لكل نص مكتوب .
http://im55.gulfup.com/QxQsXY.gif
ومن ما سبق يجب ان نكون على يقين بان لمعظم الوسوم بداية ونهاية لنفس الوسم والفرق بينهما هو العلامة ( / ) سلاش ..

فعلى سبيل المثال سوف نستخدم الوسم <B> وهو يستخدم للكتابة بخط سميك أى Bold .

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

كود بلغة HTML:

<B>Silkroad4arab Fourm</B>

http://im55.gulfup.com/QxQsXY.gif
هناك بعض الوسوم الخاصة التى تستخدم بصورة مفردة مثل الوسم <BR> وسوف يتم التوضيح اكثر عن هذه الوسوم الخاصة فيما بعد .
http://im55.gulfup.com/QxQsXY.gif
والان سوف نقوم بالافصاح عن متطلبات تلك اللغة فهى كما قلنا مسبقا انها ليست كلغة برمجة بالمعنى الصريح
http://im55.gulfup.com/QxQsXY.gif
1- محرر نصوص وليكن Notepad ولكنى افضل استخدام Notepad++ فهو اكثر دقة من محرر النصوص العادى ويمكنك تحميل آخر اصدار من هذا البرنامج من خلال الموقع الرئيسى له فهو مجانى ولا يحتاج الى ترخيص ومتجدد باستمرار لذلك فعليك تحميله من موقعه الرسمى لتفادى الاخطاء فى الاصدارات السابقة كما قلنا فإصداراته متجددة باستمرار .
2- متصفح ويب وليكن Internet Explorer فلا يفرق اسم او نوع او اصدار البرنامج فجميعهم يقومون بنفس المهمة .
3- كما قلنا سابقا كوبا من الشاى مع صدر رحب ولا تقلق فهذه اللغة لا تعتبر بالصعبة الفهم .
http://im55.gulfup.com/QxQsXY.gif
أقسام الشرح ...

سوف نتناول فى هذه الدورة التعليمية ,,
http://im55.gulfup.com/QxQsXY.gif
الأساسيات :-

تعريف ملف HTML والوسوم الرئيسية فيه وانشاء اول صفحة ويب بسيطة .
http://im55.gulfup.com/QxQsXY.gif
الألوان :-

تنسيق الصفحة وإضافة بعض المنظر الجمالى الى الصفحة .
http://im55.gulfup.com/QxQsXY.gif
الخطوط :-

التحكم بالخطوط داخل الصفحة كاختيار نوع الخط والحجم ومن ثم التنسيق العام .
http://im55.gulfup.com/QxQsXY.gif
الفقرات والقوائم :-

تنسيق الصفحة واستخدام القوائم لترتيب البيانات .
http://im55.gulfup.com/QxQsXY.gif
الصور والرسومات :-

ادراج الصور والتحكم باحجامها وابعادها ومعرفة انواع ملفات الصور داخل عالم الويب عامة .
http://im55.gulfup.com/QxQsXY.gif
الوصلات التشعبية :-

كيفية انشاء روابط الصفحة للتوجيه الى عنوان آخر او صفحة اخرى .
http://im55.gulfup.com/QxQsXY.gif
الجداول وتنقسم الى جزئين :-

1- ترتيب البيانات ضمن الجداول والتحكم بمظهر الصفحة العام بصورة فعالة .
2- تابع لـ ترتيب البيانات ضمن الجداول والتحكم بمظهر الصفحة العام والتعرف على باقى الوسوم الخاصة بها مع امثلة للتطبيق على الجداول .
http://im55.gulfup.com/QxQsXY.gif
الاطارات وتنقسم الى ثلاثة اجزاء :-

1- تقسيم الصفحة الى اطارات افقية و عمودية او الاثنان معاً فليس هناك فرق فى ذلك .
2- تحديد خصائص الاطارات داخل الصفحة .
3- التاكد من ان الاطار الذى تم ادراجه يعمل بالشكل السليم .
http://im55.gulfup.com/QxQsXY.gif
الوسوم :-

وسوما عامة وخصائص إضافية لوسوم ذكرت سابقا
http://im55.gulfup.com/QxQsXY.gif
الخرائط الصورية :-

تقسيم صورة وإضافة عدة وصلات تشعبية على التقسيمات .
http://im55.gulfup.com/QxQsXY.gif
النماذج وتنقسم الى جزئين :-

1- كـ مصمم لموقع ويب تعرف على آراء زوار موقعك .
2- اشكال متعددة لنموذج واحد .
http://im55.gulfup.com/QxQsXY.gif
الوسوم الخاصة :-

الاشياء المزعجة فى لغة HTML .
http://im55.gulfup.com/QxQsXY.gif
الويب واللغات ( اللغة العربية ) :-

لكل لغة على الويب ترميز .
http://im55.gulfup.com/QxQsXY.gif
وسوم الـ Meta :-

كيف تجعل محركات البحث مثل Google و Bing تجد موقعك بسهولة .
http://im55.gulfup.com/QxQsXY.gif
لو فى اى استفسار او حاجة مش مفهومة انا موجود متابع الموضوع بشكل دايم

*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
هذا الموضوع سيظل كـ أرشيف للشروحات وستم اضافة رابط لكل قسم من اقسام الشرح يحولك تلقائيا الى الموضوع الخاص بالشرح عند الانتهاء منه ,,
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*

للأمانة الشرح منقول للإفادة - من بعض الكتب وهذه المواضيع ستكون خلاصة الشروحات + خبرات سابقة -

وفى النهاية

هذا عمل بشري ,, لا يخلوا من الأخطاء , فإن أصبت فمن الله .. وإن أخطأت فمني ومن الشيطان .
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*

وعند النقل يرجى ذكر المصدر

*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*

http://im54.gulfup.com/Zz30Un.png