عرب هاردوير - نحاكي التطور   سياسة موقع عرب هاردوير اتصل بادارة المنتدى
   


العودة   عرب هاردوير > منتديات عرب سوفتوير > منتدى البرمجة > الدورات التدريبية
اسم العضو
كلمة المرور

موضوع مغلق
 
أدوات الموضوع تقييم الموضوع طرق مشاهدة الموضوع
  #1  
قديم 12-07-2007, 01:06
mzaila mzaila غير متواجد حالياً
مدير أقسام عرب سوفتوير
 
تاريخ التسجيل: Dec 2005
الدولة: فلسطين
المشاركات: 714
معدل تقييم المستوى: 10
mzaila
CPUIntel Centrino
Operating System Windows XP Pro
PC جهاز محمول
CPU Speed 1.7
MotherBoard Asus
Chipset GMS,910GML
Memory Type DDR II
Memory Info شريحتين 750 ميجابايت
Video Card Intel 915GM
Hard Disk FUJITSU MHV2060AT PL ATA Device
PSU MS-Adapter
الدورة رقم 1 لغة (html)

بسم الله الرحمن الرحيم
في هذه الدورة سنتعرف كيف يمكن لنا القيام بتصميم موقع بإستخدام لغة html
وهي لغة سهلة ورائعة وضرورية للجميع ولا يمكن اتقان اللغات المتقدمة بدون ان يتم احتراف هذه اللغة البسطية والسهلة ..
المطلوب برنامج تحرير الصفحات وانا سأستخدم برنامج Expression Web 2007

ارجو مراجة مقال معلومات اكثر عن هذا القسم
كما أرجو وضع اي استفسار في مناقشة الدورة الأولى

بسم الله نبدأ
فهرس الدورة الاولى
- نقاط سريعة المشاركة رقم 2
- تجربة عملية المشاركة رقم 3
- ماذا يحدث بالضبط داخل الجهاز المشاركة رقم 4
- بعض الأسئلة المفيدة للمتدئين مشاركة رقم 5
-مكونات HTML مشاركة رقم 6
- الـAttributes المشاركة رقم 7
- صورة بسيطة عن البرنامج المشاركة رقم 8
- المزيد من الوسوم المشاركة رقم 9 + 10
- إضافة الصور المشاركة رقم 11
- كيفية إضافة الروابط المشاركة رقم 13
- وسائل الإدخال بلغة الـhtml المشاركة رقم 14
- أشكال متعددة للـForms المشاركة رقم 15

تم الإنتهاء من هذه الدورة
سيتم البدء بدور جافا سكريبت ..
قد يتم إضافة المزيد .

 

__________________




اعلانات
  #2  
قديم 12-07-2007, 01:20
mzaila mzaila غير متواجد حالياً
مدير أقسام عرب سوفتوير
 
تاريخ التسجيل: Dec 2005
الدولة: فلسطين
المشاركات: 714
معدل تقييم المستوى: 10
mzaila
CPUIntel Centrino
Operating System Windows XP Pro
PC جهاز محمول
CPU Speed 1.7
MotherBoard Asus
Chipset GMS,910GML
Memory Type DDR II
Memory Info شريحتين 750 ميجابايت
Video Card Intel 915GM
Hard Disk FUJITSU MHV2060AT PL ATA Device
PSU MS-Adapter
ما هو ملف الhtml

نقاط سريعة ..

- هي لغة الوسوم او التوصيف وهي اختصارات Hyper Text Markup Language .
- يحتوي ملف الhtml على وسوم .
- و تلك الوسوم تحدد ما سيقوم متصفح الإنترنت بعرضه على شاشة المستخدم مثل العبارات المختلفة وخطوط النص وألونه .
- ملف الHTML يجب ان يكون له امتدام htm. أو html.
- يمكن تحرير صفحات الHTML بواسطة اي محرر نصوص او كلمات ولكن يفضل استخدام محرر صفحات.

 

  #3  
قديم 12-07-2007, 03:18
mzaila mzaila غير متواجد حالياً
مدير أقسام عرب سوفتوير
 
تاريخ التسجيل: Dec 2005
الدولة: فلسطين
المشاركات: 714
معدل تقييم المستوى: 10
mzaila
CPUIntel Centrino
Operating System Windows XP Pro
PC جهاز محمول
CPU Speed 1.7
MotherBoard Asus
Chipset GMS,910GML
Memory Type DDR II
Memory Info شريحتين 750 ميجابايت
Video Card Intel 915GM
Hard Disk FUJITSU MHV2060AT PL ATA Device
PSU MS-Adapter
رد: الدورة رقم 1 لغة (html)

معا نبدأ التجربة
بإمكانك البدء الان بأي محرر للنصوص وانا سأبد العمل بالبرنامج الخاص بالتصميم
اطبع النص القادم في المحرر
يمكنك نسخه ولصقه .

كود PHP:
<html>
<
head>
<
title>Title of page</title>
</
head>
<
body>
This is my first homepage. <b>This text is bold</b>
</
body>
</
html
احفظ هذه البيانات بأي اسم على ان يكون له امتداد .html
يمكن تخزين الصفحة بإسم mypage.htm او اي اسم آخر .

شرح جمل الHtml السابقة

- الوسم هو كل ما يكون شكله على <????> وهذا الوسم له وظيفة معينة يؤديها في المستعرض كإظهار النص بلون معين أو تغير نوع الخط للنص أو إظهار عنوان الصفحة أو رسم جدول معين.
- بداية الوسم تكون على الشكل <؟؟؟؟> والنهاية للوسم يكون <????/>
- الجمل التي كانت بين <head> و الوسم <head/> هي الجمل الرأسية وهذه الجمل لا تظهر في المستعرض.
- العبارة Title of page الموجود بين الوسم <title> و الوسم <title/> سوف تظهر على الشريط العلوي وكل ما يأتي في الوسم <title> سيظهر في الشريط العلوي للمستعرض .
- الجمل التي بين وسم ال<body> هي الجمل التي ستظهر في مستعرض صفحات الإنترنت.
- الجمل التي بين <b> والوسم <b/> تعني أن النص الذي يقع في منصف هذه الوسوم سيظهر باللون الغامق .

 

  #4  
قديم 12-07-2007, 11:41
mzaila mzaila غير متواجد حالياً
مدير أقسام عرب سوفتوير
 
تاريخ التسجيل: Dec 2005
الدولة: فلسطين
المشاركات: 714
معدل تقييم المستوى: 10
mzaila
CPUIntel Centrino
Operating System Windows XP Pro
PC جهاز محمول
CPU Speed 1.7
MotherBoard Asus
Chipset GMS,910GML
Memory Type DDR II
Memory Info شريحتين 750 ميجابايت
Video Card Intel 915GM
Hard Disk FUJITSU MHV2060AT PL ATA Device
PSU MS-Adapter
رد: الدورة رقم 1 لغة (html)

ماذا يحدث بالضبط داخل الجهاز

الوسم الاول <html> يخبر المتصفح بأن هذه البداية لصفحة انترنت أو صفحة html والوسم الاخير وهو </html> يخبر المتصفح بأن هذه الصفحة قد انتهت .

الوسوم الواقعة في منطقة <head> وهي المعلومات التي تظهر في رأس السفحة وتظهر في الشريط العلوي تماما .

الوسم <title> يخبر المستعرض بكتابة النص في الشريط العلوي تماما.

الوسم <body> المسؤول عن كل ما يظهر في صفحة الإنترنت ..

 

  #5  
قديم 12-07-2007, 11:48
mzaila mzaila غير متواجد حالياً
مدير أقسام عرب سوفتوير
 
تاريخ التسجيل: Dec 2005
الدولة: فلسطين
المشاركات: 714
معدل تقييم المستوى: 10
mzaila
CPUIntel Centrino
Operating System Windows XP Pro
PC جهاز محمول
CPU Speed 1.7
MotherBoard Asus
Chipset GMS,910GML
Memory Type DDR II
Memory Info شريحتين 750 ميجابايت
Video Card Intel 915GM
Hard Disk FUJITSU MHV2060AT PL ATA Device
PSU MS-Adapter
رد: الدورة رقم 1 لغة (html)

إذا كانت هذه المرة الأولى لك في كتابة html فهذه إجابات ضرورية لك

س: بعد أن كتبت الصفحة وخزنتها، لم يظهر شيء؟
تأكد تماماً انك قد خزنت الصفحة بإسم مقبول وان يكون على شريط الرابط العنوان الصحيح لصفحة الإنترنت مثل c:\first_page.htm.

س: لقد قمت بالتعديل على الصفحة، ولكن التعديل لم يظهر؟
بالتأكيد التعديلات سوف تظهر عند الضغط على زر تحديث الصفحة بعد التعديلات.

س: ما نوع المتصفح الذي يجب أن أستخدمه؟
[color="RoyalBlue"] لا يهم نوع المتصفح، جميع انواع المتصفحات تؤدي المهمة في التدريب.[/
COLOR]

س: هل هذه الدورة فقط لنظام ويندوز، ما هو حال الMac؟
يمكنك ان تقوم بهذه الدورة على نظام الMac بنفس الطريقة.

 

  #6  
قديم 12-07-2007, 12:11
mzaila mzaila غير متواجد حالياً
مدير أقسام عرب سوفتوير
 
تاريخ التسجيل: Dec 2005
الدولة: فلسطين
المشاركات: 714
معدل تقييم المستوى: 10
mzaila
CPUIntel Centrino
Operating System Windows XP Pro
PC جهاز محمول
CPU Speed 1.7
MotherBoard Asus
Chipset GMS,910GML
Memory Type DDR II
Memory Info شريحتين 750 ميجابايت
Video Card Intel 915GM
Hard Disk FUJITSU MHV2060AT PL ATA Device
PSU MS-Adapter
رد: الدورة رقم 1 لغة (html)

مكونات HTML

يوجد هناك منطقة الhead ومنطقة الbody
منطقة الhead التي تبدأ بوسم البداية <head> والتي تنتهي بوسم النهاية <head/>
منطقة الbodu التي تبدأ بوسم البداية <body> تنتهي بوسم النهاية <body/>

وقد بينت الفرق بين هذه المناطق بال head الجزء العلوي مثل الشريط العلوي جدا والذي يكتب عليه اسم الصفحة أما بجزء الbody فيظهر جميع ما يمكن ان تراه في الصفحة من نصوص وألوان وجداول وبيانات متعددة.

سوف نأخذ الوسم التالي


<b>This text is bold</b>


عنصر الhtml يبدأ بـوسم البداية مثل <b>
اما محتوى عنصر الhtml في جملة الhtml السابقة هو This text is bold
اما عنصر الhtml ينتهي بوسم النهاية مثل <b/>
أما الهدف من هذه الجملة هو أن يظهر النص This text is bold بالغط العريض.
(يمكنك التجربة بوضع هذه الجملة في منطقة الbody).

 

  #7  
قديم 12-07-2007, 12:25
mzaila mzaila غير متواجد حالياً
مدير أقسام عرب سوفتوير
 
تاريخ التسجيل: Dec 2005
الدولة: فلسطين
المشاركات: 714
معدل تقييم المستوى: 10
mzaila
CPUIntel Centrino
Operating System Windows XP Pro
PC جهاز محمول
CPU Speed 1.7
MotherBoard Asus
Chipset GMS,910GML
Memory Type DDR II
Memory Info شريحتين 750 ميجابايت
Video Card Intel 915GM
Hard Disk FUJITSU MHV2060AT PL ATA Device
PSU MS-Adapter
رد: الدورة رقم 1 لغة (html)

ال Attributes

وهي صفات تكتب داخل وسم البداية لتوضيح بعض الخصائص للوسم مثل اللون او الحجم ...
مثل

<body bgcolor= "blue" > </body>

فالـ Attributes هو bgcolor ومهمة هذا الـAttributes تحديد لون خلفية الشاشة
أما كلمة blue التي جائت بين " " فهي لون الخلفية وهو اللون الأزرق.
يمكنك الان التجربة ووضع صفة bgcolor في صفحة الإنترنت التي قمت بتخزينها مسبقا واستبدل القيمة blue بالقيم التالية yellow red green وشاهد الفرق.

 

  #8  
قديم 12-07-2007, 12:44
mzaila mzaila غير متواجد حالياً
مدير أقسام عرب سوفتوير
 
تاريخ التسجيل: Dec 2005
الدولة: فلسطين
المشاركات: 714
معدل تقييم المستوى: 10
mzaila
CPUIntel Centrino
Operating System Windows XP Pro
PC جهاز محمول
CPU Speed 1.7
MotherBoard Asus
Chipset GMS,910GML
Memory Type DDR II
Memory Info شريحتين 750 ميجابايت
Video Card Intel 915GM
Hard Disk FUJITSU MHV2060AT PL ATA Device
PSU MS-Adapter
رد: الدورة رقم 1 لغة (html)

صورة (صورة عن برنامج بسيط جدا).




اخذت هذه الصورة وانا اجهز الدورة بواسطة برنامج Microsoft Expression Web

 

  #9  
قديم 12-07-2007, 14:08
mzaila mzaila غير متواجد حالياً
مدير أقسام عرب سوفتوير
 
تاريخ التسجيل: Dec 2005
الدولة: فلسطين
المشاركات: 714
معدل تقييم المستوى: 10
mzaila
CPUIntel Centrino
Operating System Windows XP Pro
PC جهاز محمول
CPU Speed 1.7
MotherBoard Asus
Chipset GMS,910GML
Memory Type DDR II
Memory Info شريحتين 750 ميجابايت
Video Card Intel 915GM
Hard Disk FUJITSU MHV2060AT PL ATA Device
PSU MS-Adapter
رد: الدورة رقم 1 لغة (html)

المزيد من الوسوم

اعتقد الان قد اصبح لديك معلومات جيدة حول ترتيب صفحة الـHtml والان سنتحدث عن المزيد من الوسوم ولكن يجب ان تكون قد طبقت ما سبق بطريقة عملية ...

وسم الـHeadings
يمكن تعريف وسم العناوين بواسطة <h1> وهذا يعني ان يكون محتوى هذا الوسم عنوان وهناك 6 درجات لهذا الوسم من الرقم 1 حتى الرقم 6 .

وسم الفقرة <p>
يجب التميز بين الفقرات بالوسم <p> وهذا لضمان ترتيب وجمال الصفحة.

وسم ال سطر جديد <br>
يمكنك استعمال هذا الوسم عندما تريد الكتابة على سطر جديد دون انهاء الفقرة .

أما الصورة التالية توضح لنا المزيد




والصورة التالية هي عند الإستعراض على متصفح الإنترنت

 

  #10  
قديم 12-07-2007, 14:37
mzaila mzaila غير متواجد حالياً
مدير أقسام عرب سوفتوير
 
تاريخ التسجيل: Dec 2005
الدولة: فلسطين
المشاركات: 714
معدل تقييم المستوى: 10
mzaila
CPUIntel Centrino
Operating System Windows XP Pro
PC جهاز محمول
CPU Speed 1.7
MotherBoard Asus
Chipset GMS,910GML
Memory Type DDR II
Memory Info شريحتين 750 ميجابايت
Video Card Intel 915GM
Hard Disk FUJITSU MHV2060AT PL ATA Device
PSU MS-Adapter
رد: الدورة رقم 1 لغة (html)

المزيد من الوسوم مع تعريفها

يجب تجربتها بشكل عملي

<b> كتابة نص غامق
<big> كتابة نص كبير
<i> كتابة نص مائل
<small> كتابة نص صغير
<strong> كتابة نص مميز
<sub> النص يكون على مستوى اقل في السطر
<sup> النص يكون على مستوى اعلى من السطر
<ins> وضع سطر اسفل الكلمة
<u> نفس الدالة السابقة وضع خط اسفل الكلام
<del> وضع الكلام على هيئة حذف
<s> نفس الدالة السابقة وضع خط في منتصف الكلمة
<strike> نفس الدالة السابقة وضع خط اسفل الكلمة


<code> كتابة النص على شكل كود برمجي
<kbd> كتابة نص بنفس الخط الاساسي للكيبورد
<samp> كتابة نص برمجي بسيط
<tt> كتابة نص بخط الطابة
<var> كتابة نص على شكل متغير

<abbr> كتابة نص على شكل مختصر
<address> كتابة النص على شكل عنوان
<bdo> كتابة نص الإتجاهات
<blockquote> كتابة نص مقتبس
<q> نفس التعريف السابق

 

اعلانات
  #11  
قديم 14-07-2007, 02:20
mzaila mzaila غير متواجد حالياً
مدير أقسام عرب سوفتوير
 
تاريخ التسجيل: Dec 2005
الدولة: فلسطين
المشاركات: 714
معدل تقييم المستوى: 10
mzaila
CPUIntel Centrino
Operating System Windows XP Pro
PC جهاز محمول
CPU Speed 1.7
MotherBoard Asus
Chipset GMS,910GML
Memory Type DDR II
Memory Info شريحتين 750 ميجابايت
Video Card Intel 915GM
Hard Disk FUJITSU MHV2060AT PL ATA Device
PSU MS-Adapter
رد: الدورة رقم 1 لغة (html)

إضافة صورة

- يمكن إضافة الصورة للصفحة بواسطة الوسم <img> الخاص بالصور.
- الوسم <img> وسم فارغ بمعنى لا يتم إضافة محتوى له وليس له نهاية.
- من أحد الصفات(الـattribute) الخاصة بالوسم <img> الصفة src المسؤولة عن تحديد مكان الصورة.
- يمكن الكتابة بهذا الشكل <img src="url"> حيث يجب استبدال "url" بمكان الصورة ولا تنسى ان يكون مكان الصورة بين " ".

مثلا السطر التالي
<img src="images/arabsoftware_up_01.gif">
هو إضافة للصورة على الصفحة التي اسمها arabsoftware_up_01.gif ومكانها في المجلد images وهذا المجلد الاخير يوجد في نفس المجلد التي تم تخزين الصفحة فيه

الصورة التالية توضح اكثر



وهذه الصورة عند التفيذ على متصفح الويب

 

  #12  
قديم 14-07-2007, 04:02
mzaila mzaila غير متواجد حالياً
مدير أقسام عرب سوفتوير
 
تاريخ التسجيل: Dec 2005
الدولة: فلسطين
المشاركات: 714
معدل تقييم المستوى: 10
mzaila
CPUIntel Centrino
Operating System Windows XP Pro
PC جهاز محمول
CPU Speed 1.7
MotherBoard Asus
Chipset GMS,910GML
Memory Type DDR II
Memory Info شريحتين 750 ميجابايت
Video Card Intel 915GM
Hard Disk FUJITSU MHV2060AT PL ATA Device
PSU MS-Adapter
رد: الدورة رقم 1 لغة (html)

المزيد عن الصور

في هذا