U3F1ZWV6ZTMzNzE0NzkxNV9BY3RpdmF0aW9uNDQzNjUxMw==

paragraph , image| (المقالة الرابعة) دورة لغة web html5

paragraph , image| (المقالة الرابعة) دورة لغة  web html5

paragraph, image| (المقالة الرابعة) دورة لغة  web html5


بسم الله الرحمان الرحيم 
مرحبا بكم  في المقالة الرابعة في سلسلة دورة  تعلم لغة langage html5 في دورة 

Html5|دورة Html5 الخطوة الأولى نحو برمجة web


والتي من خلالها سنتعرف على محورين اساسيين 
محور تعلم كل ما يخص الفقرات النصية Paragraph في لغة Html
ومحور تعلم كل ما يخص الصور وكيفية وضع صور في موقعك.

حيت من خلال محور paragraph سنتطرق فيه بالتعرف على عدة معلومات 
  • تعلم html paragraph
  • تنسيق النصوص html
  • كود المسافه في html
  • اتجاه النص html
وفما يخص محور image او photo فسنتطرق الى مجموعة من المميزات 
  • التعامل مع الصور في html
  • كود html لعرض الصور jpg png
  • ايضا الكتابة بجانب الصورة html
  • كيفية ترتيب الصور html
  • توسيط الصورة في html
  • ادراج الصور وكيفية التعامل معها
  • اضافة الصور في html
  • ادراج الصور من الويب

المحور الاول:  الفقرات النصية Paragraph في لغة Html5


 الفقرات النصية Paragraph  ويكتب بهذا الشكل 

<p/>نص<p>
و Paragraph يكون عبارة عن جزء نصي يمكن كتابته في اي مكان في الموقع

ملاحظة 

لا يمكن كتابة Paragraph بدون اقفال وسم <p/>
رغم ان الوسم نفسه سيشتغل لكن ستواجهك مشاكل كثيرة ومشكيل غير متوقعة

paragraph , image| (المقالة الرابعة) دورة لغة  web html5


اذن يجب اقفال الوسم بهذا الشكل <p/>نص<p>
صفحة Html5 عندما تعمل مسافات بهذا الشكل 



paragraph , image| (المقالة الرابعة) دورة لغة  web html5



كل تلك المسافات  المتصفح يضهره كأنه سطر واحد  نفسه لاما اكتبه في  سطر واحد كما في هذا المثال


paragraph , image| (المقالة الرابعة) دورة لغة  web html5


لا يوجد اختلاف بينهم
لجعل مسافة بين الكلمات هناك وسم اسمه <br>
وهو اختصار ل line break وهو الرجوع الى السطر
كما في هذا المثال



paragraph , image| (المقالة الرابعة) دورة لغة  web html5



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

paragraph , image| (المقالة الرابعة) دورة لغة  web html5


ملاحظة 

هذه الامور تتعلمها كا تعليم لاكن بعدا تعلم لغة CSS ستجعلك تستغنى على هذه الامور انك تعمل line break بهذه الطريقة لان خوص CSS ستغنيك عن هذه الامور
يعني الاساسي في هذا المحور انانا تعرفنا على وسم وطريقة كتابة Paragraph
وايضا line break و نعرف ان المسافات الى اقم بعملها المتصفح ليس له علاقة بيها
وأيضا قبل الانتهاء من هذا المحور
المسافات التي تعملها بين الكلمات المتصفح كدالك يعتبرهم مسافة واحدة كما في المثال

paragraph , image| (المقالة الرابعة) دورة لغة  web html5


المحور التاني: الصور وكيفية وضع صور في موقعك

سنتكلم في هذا المحور عن وسم الخاص الصور 
لوضع صورة عندي في التصميم استخد الوسم الخاص باصور وهو <img>
وقد اتفقنا في درس الماضي حين تكلمنا على العناصر وان لكل عنصر له نهاية 
اتفقنا ان وسم <img> و وسوم اخرى كاوسم <br>
عبارة عن عناصر  closing tag تكتب الوسم كما هو ليس هناك شيء اسمه <img/>


اذن وسم الصورة يكتب  <img>

 لاكن يكتب بذاخل هدا الوسم الحجات الخاصة به وهي Attributeالذي تكلمنا عليه في الدرس الماضى 

وهنا موضوع المقالة الماضية 


ماهي Attribute الخاص بالصورة 
Attribute الخاص بالصورة  اول شيء
"رابط الصورة"=src

وsrc يعني مصدر الصورة 
يعني هذه الصورة التي اريد وضعها في الموقع مكان الصورة 
يمكن وضع صور من جهازي او من صفحت انترنت خارجية 
اولا ان كنت من جهازي 
الخاص بك 
نذهب الى الصفحة الخاصة بينا وندخل الى الملف الذي وضعت فيه الصفحة واضع الصورة التي اريد ادراجها الى موقعي  
وضعت صورة pro.jpg
paragraph , image| (المقالة الرابعة) دورة لغة  web html5

اذا اردت ادرجها اضع 
"src="pro.jpg
كتابت اسمه مباشرا لان الصورة في جانب الصفحة الخاصة 


paragraph , image| (المقالة الرابعة) دورة لغة  web html5


الان افترض ان شخص وضع الصورة داخل ملف 
لادخاله وسط الملف يجب كتابة
اسم الملف\اسم الصورة
paragraph , image| (المقالة الرابعة) دورة لغة  web html5

ولي ادرجها كما في الصورة 


paragraph , image| (المقالة الرابعة) دورة لغة  web html5


وهكدا على حسب عدد الملفات 
وعكسها تما لما تكن الصورة خارج صفحة الخاصة  اكتب 

..\اسم  الصورة 
..\ تعني ارجع مرة واحدة 
لو ان اصورة ف تلات ملفات قبل الصفحة اكتب 
..\..\..\اسم الصورة 


الان بعد ان عرفنا كيف تتم كتابة مسار الصورة من الكمبيوتر ننتقل الى كيفية ادراج الصورة من موقع خارجي 

ادخل الى موقع متلا كا موقع Google 

paragraph , image| (المقالة الرابعة) دورة لغة  web html5

بعد نصخ الرابط اقوم بوضعه مباشرة في "رابط الصورة"=src

كما في هذه الصورة 

paragraph , image| (المقالة الرابعة) دورة لغة  web html5


بعد ان تعرفنا على رابط الصورة 
لنتطرق الى تعريف 

""=alt
 و alt هو اختصار alternate text 
وهو يعتبر النص البديل
لو انا هذه الصورة في وقت من الاوقات لم تظهر او مشكيلة في الاتصال 
فا ""=alt يظهر بدل الصورة 
متلا اضع مشكل في رابط الصورة او اسم الصورة لكي لاتظهر واضع "وصف الصورة"=alt 

paragraph , image| (المقالة الرابعة) دورة لغة  web html5

ادن في هذه المقالة تعرفنا عدة خاصيات وف الصور خاصيات اخرى سنتطرق اليها في الدروس المتقدمة 
وفي المقالة الخامسة سنتطرق شرح الروابط المتشعبة Anchor Links وكيفية التعامل معها
وايضا  تعلم ما هي العناصر الموجودة داخل رأس الصفحة Head
و شرح نظام التعليقات وكل ما يخصها في لغة Html و كيفية عمل تعليق

وفي الختام شكرا على المتابعة 

ليست هناك تعليقات
إرسال تعليق

إرسال تعليق