بسم الله الرحمن الرحيم
شرحت مسبقا في تاريخ لغه ال html عن مراحل تطور هذه اللغه
في خلال مراحل التطور كان يجب علي مستخدم اللغه ان يقوم بتعريف ما هو اصدار اللغه الذي يقوم باستخدامه
حتي يفهمه المتصفح بدون اخطاء
ساشرح لكم امثله لهذة التعريفات القديمة وسنتعلم التعريف الجديد ل html 5 وهو اخر اصدارات هذة اللغة
بناء الوثيقه
اذا اردت بناء وثيقة html وانت تستخدم الاصدار الرابع من اللغه يجب عليك ان تضع الكود التالي في اول الصفحة
قبل وسم <html> كما تعلمنا
مثال
اما في اخر اصدارات html 5
الامر اكثر سهولة فقط كما يلي
الخلاصه هي يجب تعريف اصدار ال html الذي تقوم باستخدامه حتي يتعرف المتصفح علي الاكواد بشكل صحيح
سنتعلم الان وسوم جديده لاستخدامها في بناء الوثيقه
العناوين في html
العناوين في html هم سنه انواع يستخدمون
وسوم العنونه هي <h1> <h2> <h3> <h4> <h5> <h6>
ومن خصائص هذا الوسم انه ياخذ سطر جديد من تلقاء نفسه
لاختصار الوقت قم بفتح محرر النصوص الخاص بك واكتب ما يلي :
وقم بفتح الملف ومشاهده النتيجة
الي هنا ننتهي من وسوم العناوين لندخل في اخري وهي وسوم الفقرات
الفقرات في html
وسم الفقرة هو
<p>
ونعلم جميعا طريقه اغلاق الوسم
وايضا الفقرة تنشي سطر جديد من تلقاء نفسها
فيما يلي مثال لاستخدام الفقرات :
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
قم بكتابة هذا المحتوي بيني وسمين body ,وشاهد النتيجة
نتتهي من الفقرات لنتعلم درس جديد وهو الروابط في html
الروابط في html
وسم الروابط هو <a>
لاحظ :
<a>This is a link</a>
ولكن هذا الرابط لن يعمل لانه ببساطة لا يحتوي علي الرابط الذي سيذهب اليه المستخدم اذا ضغط علي هذا الرابط
ياتي هنا تساؤلات كيف نضيف الرابط اذا
الامر بسيط وهو شئ جديد نتعلمه يسمي السمات نضف سمه جديده للكود لنعرف الكود ما هو الرابط
هذة السمة تسمي href وتكتب هكذا في وسم الفتح <"a herf="url>
مع العلم ان ما بين علامتين "" هو الرابط
ليكن الشكل النهائي هكذا
قم بتجربة هذا بنفسك
<a href="http://omarfathy.wordpress.com">This is a link</a>
اعتقد الامر اصبح اكثر سهولة الان ننتقل لدرس جديد
الصور في html
الامور ستبدو اكثر متعه من الان سنتعلم بعد قليل اضافة الصور في وثيقه html
اولا قم بتحميل الصورة التالية وقم باضافتها داخل مجلد الدورة الذي قمنا بانشائة من بداية الدورة من هنا
وسم الصور هو <img>
وسنتوقف هنا قليلا لاضافة معلومات جديده عن الوسوم في html
تعلمنا سابقا طريقه انشاء وسم الفتح ووسم الاغلاق
هنا سوف ناتي للتعامل مع نوع جديد من الوسوم وهو نوع
الاغلاق الذاتي للوسوم
ووسم <img> من هذة الوسوم
وسنتعلم سمات جديد تستخدم مع وسم الصور
حيث ان src يكتب بين "" رابط الصورة
width هو عرض الصورة
height هو طول الصورة
لاحظ هنا ان وسم ال img ليس له وسم اغلاق بل هو اغلاق ذاتي
عن طريق </
الان لنقم بالتجربة قم بتتطبيق ما يلي وشاهد النتيجة
لا تقل لي انها لا تعمل .. تاكد من وجود الصورة المرفقه في مجلد الدورة او بجانب ملف index.html الذي نتعامل معه
الي هنا ننتهي ونلقاكم في درس قادم
