ما هي ال image و ازاي احط صوره في موقعي

ما هي ال image و ازاي احط صوره  في موقعي 

ما هي ال image و ازاي احط صوره  في موقعي 

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

1. ايه هي لغه html 
2. مين اللي اخترع لغه الhtml
3. ايه هي ال doctype 
4. ايه هو head
5. ايه هو body

   علشان تعرف  احنا بنعمل ايه  بالظبط  علشان  تفهم  اللي احنا هنعمله  انهارده  

بسم الله في الاول كده زي ما حضرتك عارف ان  image يعني صوره 

و انت عايذ تحط صوره معينه في الموقع الخاص بيك صح 

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

الtag ده اسمه <img> و ده بتحطه بعد ال body و ملوش وسم نهايه خالص انت دلوقتي هتقولي يعني انا بمجرد اني اكتب التاج ده 

كده الصوره بتاعتي هتظهر  اكيد طبعا الاجابه لا 

في خاصيه بنكتبها مع التاج ده علشان تظهر الصوره بتاعتنا و هتبقي علي الشكل ده 

<img src="url">

ال url مكان الصوره لو انت جايبها من علي النت اللي هو عنوان الصوره 

طب لو الصوره عندك انت علي الجهاز  هتجبها ازاي  و نفترض ان الصوره عندك علي الجهاز باسم img_chania

 هنجبها بنفس التاج 

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

امتدادات الصور

اللي هو ده<img src="img_chania.jpg">

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

<img src="img_chania.jpg"   alt="Flowers in Chania">

و هنشوف الكلام ده عملي كمان  شويه خليك متابع 

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

و اني  مكنش  طولت عليك في الكلام  و لو  في اي ملحوظه او تعديل او في حاجه غلط  قولتها يا 

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

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

ما هو body

1-ايه هو body 
معناها جسم زي ما قولنا الدرس اللي فات ان head يعني راس  ينفع راس من غير جسم اهو ده بقي جسم الصفحة ال html بتاعتنا و بيبقي فيه كل الوسوم اللي في اللغه بتاعتنا 

اشكال ال heading

هنتكلم انهارده عن 
1-ايه هو body

2-الوسوم  <h1>---<h6>

• heading 1
• heading 2
• heading 3
• heading 4
• heading 5
• heading 6

3 - وسم <p>

________________________________________________________________________________

2-الوسوم <h1>---<h6>

دي بقي اختصار لكلمه heading اللي هي عنوان بالعربي و دي فيها 6 انواع بسم الله مشاء الله يعنيو دول بيبقوا 6 احجام  و ليها وسم  نهايه كمان 

نيدا نشوف مع بعض جزء عملي 

اكتب معايا 

اشكال ال heading
من <h1>----<h6>

شكل ال heading علي المتصفح 

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

و نخش علي الوسم التاني بتاع انهارده  اللي هو 

3-وسم <p>

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

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

لا يا سيدي الفقره ده عامله زي موضوع التعبير اكتب فيه اللي انت عايذه زي ما هنشوف دلوقتي 

شكل الp في المحرر

شكل الp في المتصفح

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

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

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

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

ما هي ال head

ما هي ال head

هنكلم انهارده علي

1-معني head

2-ايه استخدامها

3-ايه العناصر اللي بتبقي جواها 

4-ايه هي  ال title

5-بنستخدمها في ايه

  1-   معني كلمه head في العربي بتاعنا

هي راس زي ما حضرتك عارف  و هو هو نفس المعني اللي معانا انهاره ميختلفش عنه باي حاجه  خالص 
و الوسم ده بيبقي زي الراس بتاعتنا كده بالظبط بيبقي فيها معلومات عنا زي اسمك انت عندك كام سنه منين و معلومات كتير صح 
اهو الوسم ده زي دماغك بالظبط 
بيبقي فيه عنوان الصفحه او اسمها 
بيبقي فيها كلمات مفتاحيه
وصف للمحتوي او للموقع 
ايه الغه اللي الموقع يستخدمها و حاجات تانيه كتير 
فنطلع من كل ده بان 
(head) هي راس الصفحه التي يتم كتابة كل ما هو متعلق براس الصفحه و التي لا يستطيع المستخدم ان يطلع عليها ولا تظهر له نهائيا 
و بيبقي شكلها علي الوضع ده و ليها وسم نهايه 
<head></head>
2-بنستخدمها ليه 
علشان بيبقي فيها وسوم مهمه جدا ليك كمصمم مواقع و للمستخدم 
(ايه الوسوم اللي بتبقي فيها) 
دي بقي فيها وسوم كتير بس طبعا مش زي ال body 
3-ايه الوسوم اللي بتبقي فيها
<title>و دي خاصه بعنوان الصفحه </title>
<style>و دي عامله زي الcss مهندس الديكور بتاعنا </style>
كل انواع الميتا تاج 
تجربه عملي بقي 
افتح محرر النصوص اللي نزلته  من اول دي و لو مكنتش نزلته هتلاقيه هنا "تصميم المواقع "
فتحته 
اقفله و قوم يا راجل بلا تصميم مواقع بلا بتاع 
خد هنا بس رايح فين انت لما بتصدق ولا ايه 
افتح يا جدع انت كمان 
 حدد اللغه من فوق 
يلا اكتب معايا اول حاجه

HEAD

4-ايه هي title 
معناه بالعربي عنوان و هي  فعلا بتبقي عنوان للوثيقه او لصفحه اللي انت هتعملها 
و مينفعش يبقي في اكتر من واحده بس في الوثيقه 
5-بنستخدمها في 
زي ما قولنا من شويه اننا بنستخدمها علشان ندي للصفحه اسم او عنوان علشان المستخجم يعرف هو داخل علي موقع ايه 

في النهايه هتلاقي فوق كلمه file اقف عليها هيظهرلك قايمه كبيره هتلاقي فيها save as اضغط عليها و احفظ الصفحه باي اسم انت عايذه بس يستحسن انك تحفظه بنفس الاسم اللي كتبته فوق 
بس اكتب الكلمه دي (.html)
و دي علشان تعرف الجهاز ان الوثيقه دي مكتوبه بلغة ال html 
و دي  صوره علشان نشوف احنا عملنا ايه  

طريقه حفظ ملف html 

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

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

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

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

يعني ايه الدوك طايب اتش تي ام ال

ال دوك طايب  اتش تي ام ال    <doctype html !>

انهارده هنتكلم عن

 ال <doctype html!>  

<doctype html!>

1-معناها

2-ليه بنستخدمها 

3-تاريخها 

1-معني الدوكوك طايب و ليه بنستخدمها 

كلمه دوك طايب doctype هي اختصار ل "document declaration type" و اللي ترجمتها بالعربي "اننا بنعرف المتصفح بنوع الوثيقه او نوع اللغه اللي حضرتك هتقوم باستعمالها علشان تبني صفحات الويب  سواء كانت اللغه  دي  "html" ,"xhtml"

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

2- في الاول  كده  بس  لازم  نعرف  ان لغه html ليها  5  اصدارات لحد  دلوقتي و زي  ما  حضرتك  عارف  طبعا  ان  كلمه اصدار جديد من حاجه  قديمه يعني  حاجتين لائما شالوا حاجه او خاصيه في الشئ  ده او  ضافوا حاجه او خاصيه للشئ او ممكن يكونوا عملوا  الاتنين شالو و حطو  .

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

و كود تاني بيقول ان فيها كل حاجه بما فيهم الاطارات 

فكانت خايله حضرتك و كانوا بيتعبوا 

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

<doctype html!> و فيها  كل حاجه خطوط و اطارات و ام علي و اللي انت عايذه  

و من يومها يا سيدي و احنا بنستخدمه علي وضعه كده من غير اي  جهد ولا حتي تعب و اظن انك لما تشوف كود زمان اللي كان لازم انك تكتبه زي ما قولنا علشان تعرف المتصفح دي وثيقه ايه و بتعمل ايه زي دي مثل 

1-HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

2-HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

                             3-HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

للي انت هتستعملها دي 

HTML 5

<DOCTYPE html!>

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

و اني  مكنش  طولت عليك في الكلام  و لو  في اي ملحوظه او تعديل او في حاجه غلط  قولتها يا 

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

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

ما هي ال html

ما هي ال html 

ما هي ال html

انهارده هنتكلم علي 
1-ايه هي ال html
2-ايه هي الوسوم 
3-ايه هي الوسوم الرئيسيه 
4-ايه هي الوسوم  الفرعيه 

هي اختصار ل HyperText Markup Language و معناها  هو  لغة ترميز النص التشعبي بنستخدمها علشان نعرف نعمل صفحات علي الانترنت وهي اول لغه  استعملها  انسان  في  بناء او  تصميم  مواقع  علي  الانترنت  و بتبقي عباره عن 
<start tag> و <end tag/>

تم  اختراعها علي ايد الراجل الطيب ده  (تيم بيرنز لي )

و بتدي للمتصفح  وصف انه ازاي  هيعرض  اللي جواه  ف  بتقوله  ان  ده  عنوان رئيسي  وده  فرعي  و  دي  صوره  و  ده فقره  و  هكذا  و  بتقوله  كل  ده  عن  طريق  حاجه  اسمها  وسوم  او  tags و  الوسوم  دي  بيبقي  في  منها اللي ليه  قفل و اللي  ملوش  

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

خليك  معايا  و  انت هتعرف الحاجات اللي  فوق دي

 ⇓⇓⇓⇓⇓⇓

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

 هو كلمة مفتاحية أو عبارة تصنف بها معلومة معينة (صورة، خريطة، تدوينة، مقطع فيديو، إلى آخره) هذه الوسوم يتم إدراجها بغرض وصف المادة أو المعلومة ولتسهيل البحث والتصنيف.

تمام كده 
و بيبقي في منها اللي ليه وسم نهايه بيبقي علي الشكل ده  <h1/> ووسم البدايه بيبيقي علي شكل <h1> 

زي ما قولنا فوق↑↑↑↑↑ ان في وسوم رئيسيه لازم انك تكتبها و هما عباره عن 4 وسوم 

الوسوم الرئيسيه 

1-<DOCTYPE html!> و دي علشان تعرف المتصفح انك بتستخدم  اجدد اصدار في اللغه اللي هو الاصدار ال5 

اه نسيت اقولك  ان  في 5 اصدارات من لغة ال html و دي  ملهاش وسم نهايه 

2-<html></html>   و دي علشان نعرفه ان اللغه html و ليها وسم  نهايه 

3-<head><head/> و دي علشان تعرف ان المنطقه دي راس الصفحه بحيث انه ميعرضش اللي عليها خالص و دي بيبقي فيها كذا حاجه كده اللي هما 

• <meta> و دي علشان محركات البحث و حبة حاجه تانيه هنبقي نعرفها مع بعض في الدروس 
• <title> <title/> و دي علشان  عنوان الصفحه اللي  حضرتك هتكتبها 
• <link> و دي بقي علشان لو في  صفحات خارجيه و عايذ تربطها  بالصفحه اللي انت كتبتها 
• <style></style> اما دي بقي علشان  شكل الصفحه  و دي  بتخليك  ساعات  تستغني  عن  css لو في مواقع بتتكون من صفحه  واحده    تقدر  تقول  كده  ان  دي  مهندس الديكور  بتاعنا

4- <body><body/> و دي  علشان نعرف المتصفح ان  المنطقه دي هي جسم الصفحه و اي حاجه هنكتبها في المنطقه دي هيقوم بعضها  علي طول في المتصفح و دي بردك  ليها وسم نهاية 
و بكده  يبقي انت عرفت ايه هي الوسوم الرئيسيه اللي لازم انك  تكتبها  في محرر النصوص الخاص بيك
استني بس  هنا  احنا لسه  مخلصناش لسه الوسوم الفرعيه انت  نسيتها  ولا ايه 
الوسم الفرعيه هي اللي انت ممكن تستغني عن  حاجه  فيهم  

الوسوم الفرعيه

ودي  بقي  متعدش يا جيمي 

عندك مثلا 

1-<h1> لحد <h6> وكلهم ليهم  وسم نهايه ودي علشان تعرفه انه  ده راس موضوع 

2-<img> ودي ملهاش وسم نهايه  وبنستعملها  علشان نضيف صوره للموقع 

هنكتفي بكده و نكمل في الدوره بتاعت ال html 

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