تعلم HTML & HTML5
ما هي لغة HTML ؟
هي إختصار Hyper Text Markup Language وهي ليست لغة برمجية كما يعتقد البعض ولكنها لغة هيكلية بمعنى أننا من خلالها نستطيع وضع محتوى الصفحة وعناصرها والتي قد تتمثل في الصور والعناوين واللينكات وكل شيء موجود بالصفحة فإنه يتم وضعه باستخدام تلك اللغة والتي تجعل من الموقع أشبه بالهيكل العظمي والذي سيحتاج فيما بعد إلى css وذلك لإعطائه الاستايل الخاص به
أنواع الرسوم في HTML
- النوع الأول : هو عبارة عن وسم يقوم بعرض محتواه بشكل مباشر مثل وسم
و وسم بمعنى أنه لا يوجد لها وسم نهاية كما هو في النوع الثاني وتكون على هذا الشكل
هنا نلاحظ أن img هو الوسم الرئيسي بينما src يسمى attribute بمعنى أنه مساعد للتاج ومن خلاله نقوم بتحديد الصورة أياً كانت والمراد إظهارها أما عن alt فهي attribute أيضا ولكن محتواها يظهر في حالة عدم ظهور الصورة لخطأ ما..
- النوع الثاني : هو عبارة عن وسم بداية + وسم نهاية ويتم وضع المحتوى المراد إظهاره بينهما
مثل
welcome
حيث اننا هنا نلاحظ أن
هو وسم البداية و
هو وسم النهاية و welcome هي المحتوى المراد إظهاره وهذه هي فكرة اللغة بوجه عام إذ أن هناك محتوى نريد إظهاره
البدء في إنشاء صفحة HTML
نلاحظ أن إمتداد الملف يجب أن يكون .html وإلا لن يعمل ولكي ننشئ ملف نقوم
- ننقر كلك يمين من خلال الفأرة
- نختار new
- ومنها نختار Text Document
- نقوم بحفظ الملف بامتداد .html فعلى سبيل المثال يمكننا تسميته index.html
- بداخل هذا الملف وحتى نستطيع إستخدام تاجات Html المشار إليها مسبقا لا بد من تهيئة الملف لذلك ويتم عن طريق وضع هذا الجزء في الملف ثم الضغط على control+s لحفظ الملف
هنا عنوان الصفحة
// هنا يتم استخدام التاجات ووضع المحتوى الذي تريده مثل
Hello World!
لاحظ المثال بالأعلى يوضح بنية ملف HTML وهي
- هو الأب لكل التاجات الأخرى ونحن نلاحظ هذا في المثال حيث نجد أن جميع التاجات الأخرى موجودة بداخله
- هذا التاج مخصص لوضع لينكات لملفات أخرى من المفترض أنها مرتبطة بملف HTML الحالي الذي نحن فيه مثل ملفات css و Js كما هو موضح في المثال وبالنسبة للتاج والذي يحتوي على attribute المسمى charset فإنه مسئول عن ترميز الصفحة حتى لا تظهر مشاكل في اللغة الخاصة بالصفحة ونلاحظ أن هناك تاجات أخرى خاصة بالmeta والتي يمكننا من خلالها وضع وصف للموقع وأشياء اخرى
- وهو التاج الرئيسي والذي سوف نكتب فيه محتوى موقعنا بالكامل من عناوين ومقالات وصور ولينكات وغير ذلك ..
وبذلك نكون قد أنشأنا ملف HTML وجعلنها جاهزاً للإستخدام
ماذا عن HTML5
هي تعتبر أحدث إصدار للHTML حيث تم إضافة العديد من المزايا والتاجات الجديدة إليها مثل
وهناك الكثير من التاجات الاخرى .. وفي الصور القادمة سوف نقوم بتوضيح أكثر التاجات إستخداما ووظائفها بشكل مختصر
من خلال الصورتين السابقتين وما قبلها من شرح نجد أن آلية إستخدام اللغة قد تم توضيحها وأيضا كيفية إنشاء الملفات والبدء في الستخدام التاجات
أمثلة عملية على اللغة للمزيد من الفهم
إضافة لينك
عنوان بخط كبير
go to facebook
في المثال الموجود بالأعلى قمنا باستخدام تاج h1 لوضع عنوان كبير ثم إستخدمنا التاج
وهو التاج المستخدم لإدخال فقرات نصية ثم بداخله وضعنا تاج والذي يأخذ ال attribute المسمى href حيث يتم تحديد عنوان ال url الذي نريد الذهاب إليه عند النقر على محتوى تاج ال وهو "go to facebook "
والآن لنعطي صورة توضح الفرق بين ال HTML و ال CSS والتي سيتم شرحها لاحقا لأنه يجب التفريق بينهما
ربما الصورة غريبة بعض الشيء ولكنها تعتبر أفضل مثال يوضح الفرق بين Html و Css حيث أن Html يمثل الهيكل العظمي للموقع أو أساس الموقع وهو يتمثل في المحتوى والذي يتمثل بدوره في الصور والنصوص واللينكات والقوائم وكل شيء بينما ال css تمثل طريقة العرض لهذا المحتوى الذي قمنا بوضعه باستخدام Html أي .. وبالطبع هذه الصورة ربما ستسهل عليك فهم css والتي سوف يتم شرحها في الدرس القادم ...
تسجيل الدخول
دروس اخرى مشابهة
