تعليم لغةال HTML من الصفر حتى الأحتراف شرح بلعربي ومفصل

تعليم لغةال HTML من الصفر حتى الأحتراف شرح بلعربي ومفصل

نبذة بسيطة عن هذه الغة ماهي HTML5 هي لغة برمجة أي لغة الترميز تستخدم في أنشاء صفحات وواقع الويب, تعتبر هذه الغة من أهم وأقدم لغات البرمجة وأكثرها إستخداماً في إنشاء صفحات الويب.على الرغم من أن لغة HTML5 لم تعتمد رسمياً و ليست مدعومة بشكل كامل من المتصفحات إلا أن المتصفحات الرئيسية ( جوجل كروم , فايرفوكس , سفاري , اوبرا , انترنت اكسبلورر ) متابعة لتحديثات لغة HTML5 حتى النسخة الأخيرة منها . لايلزمك لتعليم هذه الغة سوى حاسوب وأنترنت ودفتر وقلم ومتابعتي.

أنشىء مدونة على منصة بلوجر لإستخدامها كمسودة للتجريب.

فتح ملف TXT على الحاسوب بدء التمرينات وأكتب الأكواد التالية

مثال عنوان HTML

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6> 

أفتح في بلوجر صفحة ثم أنسخ الاكواد والصقها مكان HTML ثم قم بمعاينة الصفحة سوف تظهر لك على الشكل التالي:

مثال عناصر HTML

< tagname > المحتوى يذهب هنا ... < / tagname >

< h1 > العنوان الأول الخاص بي < / h1 >

< p > فقرتي الأولى. < / p >

<a href="https://www.safa83.com">Visit W3Schools</a>على الشكل التالي:

سمة href

<a>تحدد العلامة الارتباط التشعبي. و hrefتحدد السمة URL للصفحة على الرابط يذهب إلى

<a href="https://www.safa83.com">TECKNOLOGY</a>

أفتح في بلوجر صفحة ثم أنسخ الاكواد والصقها مكان HTML ثم قم بمعاينة الصفحة سوف تظهر لك على الشكل التالي:

TECKNOLOGY

سمة src

تُستخدم <img>العلامة لتضمين صورة في صفحة HTML. و srcتحدد السمة المسار إلى الصورة التي سيتم عرضها:

-------------------------------

<img src="img_girl.jpg">

ضع رابط الصورة مكان img_girl.jpg ثم أنقل الى المعاينة ستجد الصورة كاملة

سمات العرض والارتفاع

و <img>يجب أن يحتوي هذا الكود أيضا widthو heightالصفات، التي تحدد العرض والارتفاع للصورة (بالبكسل):

-----------------------------

<img src="img_girl.jpg" width="500" height="600">

--------------------------------------

مثال

انظر ماذا يحدث إذا حاولنا عرض صورة غير موجودة:

------------------------------------

<img src="img_typo.jpg" alt="Girl with a jacket">

----------------------------------

يجب كتابة كل فقرة والمعاينة وثم الحذف عدة مرات لكي تتمكن من الحفظ في حال وجود أي ملا حظات أكتبو لنا بتعليقات هذه دروس مخنصرة لتعلم لغة HTML بأسرع وقت هنا نكون قد أنتهينا من الدرس الاول إلى القاء في الدرس القادم.