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

مشاهدة النسخة كاملة : (1) الدرس مفصل الأول "التعريف بلغة Html "



linnou
11-01-2013, بتوقيت غرينيتش 09:45 AM
http://www.dzbatna.com/images/icons/iconrote.gif (1) ط§ظ„ط¯ط±ط³ ط§ظ„ط£ظˆظ„ "ط§ظ„طھط¹ط±ظٹظپ ط¨ظ„ط؛ط© Html " (http://www.dzbatna.com/t633903/)





مرحبــا بكــم إخوانـي الكـرام


نلتقي اليوم مع أولي دروس دورة تعلم لغة HTML تصميم مواقع الويب
.: التعريف بلغة HTML .:
--=--
لنعرف ماهي لغة HTML
==
هي اللغة الأساسية المستخدمة لإنشاء صفحات الإنترنت , وجاءت إختصار لكلمة
Hyper Text Markup Language
فمع تطور البرامج التي تمكنك وتتيح لك الإستغناء عن تلك اللغة إلا أنها غاية في الأهمية وينبغي علي كل مصمم أن يكون يكون علي دراية كافية بكيفية عمل الكود code ..وتعتبر شرط أساسي لأي مصمم حتي يستطيع بعد ذلك التعامل مع اللغات الأخري كال PHP و ********** مثلا ..
==
كيف تعمل لغة HTML وما البرامج اللازمة لتعلمها ؟؟
--=--
أولا يلزم لعمل اللغة متصفح كال Internet Explorer أو Netscape وفائدته : هي أنه سيكون بمثابة الشاشة التي سنعرض عليها عملنا خطوة بخطوة ومع كل تعديل .. وبالنسبة للبرامج المطلوبة يكفي أن يكون لديك جهاز جهاز كمبيوتر مثبت عليه نظام تشغيل .. أي نظام ..ومحرر نصوص مثل ال Notpad بالنسبة لل Windows وال Pico بالنسبة لل Linux
==
الآن سنتعرف علي ماهي مكونــات صفحة الإنترنت ؟
--=--
صفحة الإنترنت تتكون من منطقتين أساسيتين وهما الرأس والجسـم
إنظر للصورة
http://files.w-enter.com/uploadcenter/6563/1.jpg

==
والآن لتبـدأ في تصميم أولي صفحاتك علي شبكة الإنترنت ..


إفتح معي محرر النصوص " Notpad " كيفية فتح محرر النصوص



إذهب وإضغطhttp://files.w-enter.com/uploadcenter/6563/2.jpg ثم إنظر الصورة
لقد تم تصغير الصوره بواسطة المنتدى forum .. لرؤية الصوره بحجمها الطبيعى , اضغط على الشريط .. المقاس الاصلى للصوره 696x656 وحجمها 70KB.
http://files.w-enter.com/uploadcenter/6563/3.jpg


بعد فتح محرر النصوص تفضّل بكتابة الآتي بها
<HTML>
<Head>
<Head/>
<Body>
<Body/>
<HTML/>



ما الذي قمت بكتابته حالا ؟؟
أقول لك :هذا هو التكوين الأساسي لجميع مواقع الويب التي تراها ولنبـدأ بالشرح طريقة التفصيلي ..


أولا: القوسين ..
<> هذا يسمي Start Tag أو وسم البداية , وبداخله يوضع الأمر المراد تنفيذه..






أمـا < /> هذا يسمي End Tag أو وسم النهاية , وبداخله يوضع الأمر نفس الأمر الموجود في وسم البداية للدلالة علي نهاية تنفيذ هذا الأمر .


وأما بالنسبة ل <HTML>
<Head>تكتب هنـا الجملة joomla التي تريد أن تكون عنوانا لصفحتك


<Head/>
<Body>هنـا توضع المحتويات التي تريدها بداخل الصفحة


<Body/>
<HTML/>



لاحظ معي .. في البداية :: في أول كود code :: كتبنا <HTML>كدليل أننا نريد البدء في تنفيذ أمر , وفي النهاية كتبنا <HTML/> للدلالة علي إنتهاء تنفيذ الأمر .. وهذا نفس الكـلام الذي سيتكرر مع كل كود code أو أمر سنقوم بكتابته من الآن .
===

صمم أولي صفحاتــك


إفتح محرر النصوص &quot; Notpad &quot; وإكتب معي كما بالصورة


http://www.9m.com/upload/27-11-2014/0.6839601196148377.jpg




الأكواد هي


<HTML>
<Head>



فريق عمل منتديات *********<title><title/><Head/>
<Body>


بسـم الله الرحمن الرحيم<Body/>
<HTML/>


:: ملحوظـة ::


لا أنصـح بنسخ الأكواد ولصقها في محرر النصوص :: ينبغي أن تكتبها أنت بيديك فيكون أفضل


بعد كتابـة الأكواد في محرر النصوص قم بالذهاب لقائمة File ثم إختر Save As واحفظ الملف مع مراعاة الإمتداد Html. فمثلا احفظه بإسم MyPage.html
http://files.w-enter.com/uploadcenter/6563/5.jpg


الآن أغلق ال Notpad وإذهب إلي الصفحة MrPage.html التي قمت بحفها ستجدها قدإتخذت هذا الشكل إفتح الصفحة الآن ولا حظ معي
http://www.arb-up.com/files/arb-up-Nov2/bQj51164.bmp (http://www.arb-up.com/)

ماذا تري ؟؟
لاحظ أن في مكان الرأس Head عبارة &quot; فريق عمل منتديات توافق&quot; أي أن الكود code أو العنصر title هو المسئول عن منطقة الرأس


وفي منطقة الجسم Body عبارة &quot; بسـم الله الرحمن الرحيم &quot; لكن بالطبع تفتقد التنسيق والجمال لكن أُهنيك فأنت قد توصلت إلي نتيجة رائـعة فمعي لنبـدأ معا في عملية التنسيق
==
لنكن متفقيـن في البداية أن منطقة الرأس Head منتهية أي لا يتم التعديل فيهاإلابتغيير الجملة joomla نهائيا &quot; أي ليس هناك شكل أو لون وكذا..... فسيكون كل عملنا في التنسيق علي منطقة الجسم Body


وهذا ما سنتناوله بالتفصيــل في الدرس مفصل الثاني بإذن اللــه
==
إلي اللقاء مؤقتـا
السـلام عليـكم ورحمة اللــه وبركاته






ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)




https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©

استعمل مربع البحث في الاسفل لمزيد من المواضيع


سريع للبحث عن مواضيع في المنتدى