الدرس الثانى من دورة html + شرح فيديوا بالتوفيق

الدرس الثانى من دورة html + شرح فيديوا بالتوفيق


صفحة 1 من 2 12 الأخيرةالأخيرة
النتائج 1 إلى 10 من 12

الموضوع: الدرس الثانى من دورة html + شرح فيديوا بالتوفيق

  1. #1

    Gadid الدرس الثانى من دورة html + شرح فيديوا بالتوفيق

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

    اقرى الدرس الاول وركز فى الكلام الى فيه وروابط تحميل الفيديوا فى اخر الدرس تحياتى للجميع بالتوفيق

    في الدرس السابق تكلمنا عن القواعد الاساسيه اللي هتكون معانا في كل مره هنعمل صفحه نت مش هطول عليكم نخش في الموضوع علي طول


    مراجع سريعه
    أن كل الصفحات تبدأ بهيكل أساسي ، و لنبدأ الآن لتتعلم أول وسم (Tag) .الأوسمه :- الأوسمه هي الأشياء التي بين هذين القوسين <> بالتأكيد أنت لم تري أكواد تبدأ بهذين الشكلين من قبل حسنن من قائمة View أختار Source ، أنت تري الآن النص الذي تقرأه ومحاط في أغلب الأحوال بـ <> هذه الأكواد هي التي صنعت هذه الصفحة التي أمامك

    هام جداأغلب الأوسمة تبدأ <> من اليسار وتنتهي</> في اليمين
    فالتشاهد الوسوم التالية:
    وسم البداية وسم النهاية
    <HTML> <‎/HTML>
    <HEAD> <‎/HEAD>
    <TITLE> <‎/TITLE>
    <BODY> <‎/BODY>

    ماذا تلاحظ؟ أن كل منها يتألف من زوج من الوسوم أحدهما وسم البداية، والآخر وسم النهاية. ويتميز وسم النهاية بوجود الرمز / . تأمل الرسم التالي، فهو يعطي فكرة عن تركيب ملف Html


    الصوره اللي هنشوفها دلوقتي زي ما هتبقي قدامك ترتيب الاوامر في صفحه التصميم و زي مشفناها في الدر السابق و في الفيديو


    إذن فملف Html يبدأ دائماً بالوسم <HTML> وينتهي بالوسم <‎/HTML>. لا تنسى ذلك!
    أما الوسم <HEAD> فيحدد بداية المقطع الذي يحتوي على المعلومات الخاصة بتعريف الصفحة. كالعنوان الظاهر على شريط عنوان المتصفح. وهذا العنوان بدوره يحتاج لأن يوضع بين الوسمين: <TITLE> … <‎/TITLE> وبالطبع يجب كتابة الوسم <‎/HEAD> لكي ننهي هذا المقطع.
    نأتي إلى الوسم <BODY> والذي يتم كتابة نصوص صفحة الويب ضمنه، بالإضافة إلى إدراج الصور والجداول وباقي محتويات الصفحة. وهو أيضاً يحتاج إلى وسم الإنهاء <‎/BODY>
    و الآن ما رأيك بإنشاء صفحة و الأن قم بفتح برنامج Notepad أو أي برنامج محرر النصوص
    أكتب هذا
    <HTML>

    <HEAD>
    <TITLE>My first HTML page</TITLE>
    <HEAD/>

    <BODY>
    Wow I am Writing My First Page
    <BODY/>
    </HTML>
    والآن قم بحفظ ما كتبته في ملف وبأي اسم تختاره. ولا تنسى أن الامتداد المستخدم في أسماء ملفات HTML هو htm. أو html. مثلاً أنا اخترت الاسم ‎FirstPage.htm ومن الأفضل أن تقوم بإنشاء مجلد مستقل على القرص الصلب لكي تحفظ به ملفاتك فهذا يسهل عليك عملية استرجاعها للعرض أو التحديث وليكن هذا المجلد مثلاً بالاسم C:\htmlfiles (أو بأي اسم تختاره) ولكن لابد وأن يكون الأسم أما حروف ، أرقام ، _ أو - ولا يجوز أستخدام أي علامات أخري في لحفظ الملف.

    و دي كانت مراجعه بسيطه عشانت ننشط المعلومات عندك عشان تكون متابع الدروس مع بعض و متوهش معانا

    التنسيق الأساسي

    توقفنا فيالدرس السابق عند كيفيه التحكم بمقدار النص المكتوب في كل سطر وكيف يمكن تحديد نهاية الفقرة وبداية الفقرة التي تليها؟ و في هذا الفصل سنقوم بشرح هذه الجزئيه وأسس التنسيق
    نهايه سطر وبدايه سطر جديد:-
    وسوف نستخدم الوسم <BR> لتحديد النهاية للسطر. والبدء بسطر جديد (لاحظ أن هذا الوسم مفرد، أي ليس له وسم نهاية).
    ونعود إلى المثال السابق، قم بتعديل الملف لكي يصبح بالشكل التالي
    <HTML>
    <HEAD>
    <TITLE>
    My first HTML page
    <‎/TITLE>
    <‎/HEAD>
    <BODY>
    Wow,
    <BR> I'm writing my
    <BR>‎first page
    <‎/BODY>
    <‎/HTML>


    و الآن كيف أضيف سطر جديد ؟
    ولفعل هذا نستخدم الوسم <P><P/> الذي يقوم تقريباً بنفس عمل الوسم السابق أي أنه ينهي السطر أو الفقرة ويبدأ بسطر جديد لكن مع إضافة سطر إضافي فارغ بين الفقرات. ( يلاحظ ان هذا الوسم لديه وسم نهايه لكن من الممكن أستخدامة بدون وسم النهايه )
    <HTML>
    <HEAD>
    <TITLE>
    My first HTML page
    <‎/TITLE>
    <‎/HEAD>
    <BODY>
    Wow,

    <P> I'm writing my

    <P>first page

    <‎/BODY>
    <‎/HTML>
    الفرغات :- تعتبر رموزاً خاصة لذلك لا نستطيع التحكم بها وبعددها إلا باستخدام الوسم
    ‎ (Non Breakable Space ‎ والأحرف هي اختصار للعبارة ) &nbsp;‎ .
    وإذا أردت إدخال عدة فراغات بين نص وآخر ما عليك إلا كتابة هذا الوسم بنفس عدد الفراغات المطلوب. كما يجب عليك التقيد بالأحرف الصغيرة هنا كما موضح بالشكل التالي
    <HTML>
    <HEAD>
    <TITLE>
    My first HTML page
    <‎/TITLE>
    <‎/HEAD>
    <BODY>
    Wow, &nbsp; &nbsp; &nbsp;‎
    I'm &nbsp; &nbsp; &nbsp; writing &nbsp; &nbsp;‎
    ‎&nbsp; my &nbsp; &nbsp; &nbsp; first &nbsp; &nbsp; &nbsp; First page
    <‎/BODY>
    <‎/HTML>


    الخواص
    و الآن سأشرح جزء متقدم قليلا :- كيف نقوم بتمركز النص أي جعل النص في منتصف الصفحة ، الوسم الأساسي لهذه الخاصيه هو <CENTER> ولكن هذا الوسم قد تم تبديله و لهذا فأن أفصل طريقه هي أستخدام وسم ALIGN وهذا الوسم يعطي للنص خواص معينه داخل الوسم الأخر . فالنفسر أكثر أن وسم ALIGN لوحده يفعل شيء وبإضافته مثلا لوسم <P> فأن المستعرض سيقوم بأداء الوسمين في نفس الوقت وهذا شيء مهم جدا في لغة HTML وتكون صيغتة كالآتي :-
    هام جدا
    <بداية الوسم خواصه="قيمة">ضع النص هنا <نهاية الوسم>
    * و يجب أن تعلم أن كل الأوسمة يمكن أن تأخذ بعض الخواص لكن يوجد خواص تأخذ أوسمه معينة وسنقوم بشرح ذلك أكثر في الفصول القادمة ،
    و لكي تضع خاصية تمركز النص مع الوسم <P> تكون الصيغه هكذا:-
    <P ALIGN="CENTER">النص المتمركز في منتصف الصفحة</P>
    قارن هذا لكي تفهم الصيغه السابقه فال P هو بدايه الوسم ، ALIGN هو خواصه CENTER هي قيمة الخاصية و بالطبع <P/> هو نهايه الوسم،
    و من الواضح طبعا أذا كنا نقدر أن نضع النص في المنتصف أذن نستطيع أن نضع في أي جهة أخري سواء اليسار أو اليمين كل ما عليك فعله هو تغيير قيمة الـ ALIGN إلي RIGHT أو LEFT . لمزيد من التفاصيل والأمثله أقرأ تنسيق الفقرات
    تنسيق النص
    نتحدث الآن عن كيفيه جعل النص عريض أو مائل أو تحته خط
    لقد قمت بشرح كل هذا بالتفصيل في دروس الـ HTML ولكن سريعا نقول الأكواد لهذه التنسيقات
    <B>هذا للخط العريض</B>
    <I>وهذا للخط المائل</I>
    <U>وهذا ما أقصده عن تحته خط</U>
    و الآن أخوانئي الأعزاء يكون قد أنتهين من الفصل الثاني من فصولنا التعليميه


    رابط تحميل الدرس الثانى شرح فيديوا

    ( http://www.multiupload.com/X2M2UXYIZ8 )

    رابط تحميل التطبيقات على الدرس الاول والثانى للتثبيت

    ( http://www.multiupload.com/RCCD1A3YJR )

    وتكون قد تعلمت كيفيه أنشاء صفحات و تنسيقهم ولكن كيف يمكن التنقل بينهم ؟؟؟!!!!! ولمعرفة الإجابه انتظر درسنا القادم انشاء اله
    مع تحيات


    [SIZE="7"أخوكم عفريت الهكر صاحب منضمة الحسام لبرامج الهكر[/SIZE][/CENTER]



    اشتي اشوف الردووووووووووووووووووووو ووووووووووووووووووووووووو ووووووووووووووود

  2. #2

    افتراضي رد: الدرس الثانى من دورة html + شرح فيديوا بالتوفيق

    مشككوور وجزااك الله الف خير علي

    المووووضووع الجميل

    واااصل ابدااعك يا بطل


    ==================================================

  3. #3

    افتراضي رد: الدرس الثانى من دورة html + شرح فيديوا بالتوفيق

    مشكوووووور علئ الموضوع المميز

  4. #4

    افتراضي رد: الدرس الثانى من دورة html + شرح فيديوا بالتوفيق

    يعطيك العافيه دايماً مبدع

  5. #5

    افتراضي رد: الدرس الثانى من دورة html + شرح فيديوا بالتوفيق



    مشكورين مرورك وسام محطوط في صدري مشكوررررررررررررررين


  6. #6

    افتراضي رد: الدرس الثانى من دورة html + شرح فيديوا بالتوفيق

    هاذا الدرس الثاني

  7. #7
    هكر مبتديء الصورة الرمزية الزئبق
    تاريخ التسجيل
    Nov 2010
    الدولة
    بحرين
    المشاركات
    19

    افتراضي رد: الدرس الثانى من دورة html + شرح فيديوا بالتوفيق

    معااااااااااااااااااااااا ااااااك يااااشيخ تسلم مااتقصر

  8. #8

    افتراضي رد: الدرس الثانى من دورة html + شرح فيديوا بالتوفيق

    ..............8...8 8888888...8......... .........
    ............8888.888 88888.8888.......... ....
    ...........88888.888 8888.888888......... ...
    ...........888888888 8888888888.......... ..
    ..............888888 8888888888.......... ....
    ..................88 888888888........... ........
    .................... ..888888............ ............
    .................... ....##.............. ..8................. .
    .................... ....##.............. 8888................ ....
    .................... ...##........8...888 8888...8............ .
    .......#............ .##......8888.888888 88.8888........
    ......###.........## ......88888.8888888. 888888......
    .....#####.....##... ....8888888888888888 888......
    ....######...##..... ......88888888888888 8..........
    ......######.##..... ..........8888888888 ...............
    .........####.##.... ...#...........88888 ....................
    ...........#####.... ..###..........##... .................... .
    ..............###... #####.........##.... .......#............
    ................##.# ####..........##.... .....####.........
    ...............##.## ##.....#.....##..... .#######.......
    ..............##.### ......###..##....### #####.......
    ..............####.. .....####.##..###### ##..........
    .............##..... .....#####.#..###### ....... ........
    .............##..... ......#######....... ...............
    .............##..... ..........###......
    شـكــ وبارك الله فيكم ـــرا لكم ... لكم مني أجمل تحية .
    شـكــ وبارك الله فيكم ـــرا لكم ... لكم مني أجمل تحية .

  9. #9

    افتراضي رد: الدرس الثانى من دورة html + شرح فيديوا بالتوفيق

    مشكور اخي على هذا الموضوع الاكثر من رائع

  10. #10

    افتراضي رد: الدرس الثانى من دورة html + شرح فيديوا بالتوفيق

    مشكور شرحك للدرس تمام يا باشا

    اتمنى لك اطيب التمنيات

    مشكور على المجهود
    ش

صفحة 1 من 2 12 الأخيرةالأخيرة

المواضيع المتشابهه

  1. دروس في لغة html (مقدمة + الدرس الأول)
    بواسطة alnnasr في المنتدى قسم المواضيع المخالفة والمكررة
    مشاركات: 16
    آخر مشاركة: 06-11-2012, 12:35 AM
  2. الدرس الأول في لغة ال html
    بواسطة ASDELY-ScOrPiOn في المنتدى لغات برمجة المواقع
    مشاركات: 27
    آخر مشاركة: 02-16-2012, 04:17 AM
  3. الدرس الاول من دورة html + شرح فيديوا لعيونكم
    بواسطة hussamhack في المنتدى قسم المواضيع المخالفة والمكررة
    مشاركات: 22
    آخر مشاركة: 08-05-2011, 07:00 AM
  4. الدرس الأول : أساسيآت لغة ال html و فيما تستعمل
    بواسطة She!! Access في المنتدى لغات برمجة المواقع
    مشاركات: 3
    آخر مشاركة: 04-29-2010, 12:03 AM
  5. الدرس الثاني تعليم الـ html
    بواسطة ASDELY-ScOrPiOn في المنتدى لغات برمجة المواقع
    مشاركات: 1
    آخر مشاركة: 08-29-2009, 11:35 PM

الكلمات الدلالية لهذا الموضوع

المفضلات

أذونات المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •