#1
| ||||||||||||||
| ||||||||||||||
Html أساسيات اللغة أنواع الوسوم في HTML بشكل عام, أي شيء يتم إضافته في الصفحة يقال له وسم ( Tag ) و يوجد نوعين من الوسوم:
معلومة تقنية عند استخدام وسم فردي يمكنك عدم وضع الرمز / في آخره إن أردت و لكن يفضّل وضعه للإشارة إلى أنه وسم فردي. كمثال بسيط, سواء قمت بكتابة <br> أو <br/> فالنتيجة هي نفسها تماماً. الوسم الزوجي عبارة وسم له بداية و نهاية. نهاية الوسم الزوجي تكون بإضافة الرمز / في أول إسم الوسم فقط. كمثال بسيط, الوسم الزوجي p نبدأه بالوسم <p> و ننهيه بالوسم </p>. لا تقلق ستتعلم كيف تستخدم جميع الوسوم الفردية و الزوجية لاحقاً و لكننا نعلمك عن هذه الأمور من الآن تجهيزاً لها. التعليقات في HTML التعليق ( Comment ) عبارة عن وسم خاص يمكنك وضعه في أي مكان تريد في الصفحة بهدف كتابة ملاحظات تساعدك في الشرح أو لتذكر سبب استخدام الوسوم في حال أردت مستقبلاً مراجعة كود الصفحة و التعديل عليه. لوضع تعليق إستخدم الوسم <!-- --> مع الإشارة إلى أنك يجب أن تضع الكود بداخله كالتالي. مثال جرب الكود وسوم الصفحة الأساسية في HTML بشكل عام, أي صفحة HTML تتكون من قسمين أساسيين كالتالي:
الآن عند كتابة كود HTML5 يجب ذكر المعلومات التالية على الأقل في الملف.
ستتعرف على جميع الأشياء التي يمكنك إضافتها في الصفحات بتفصيل ممل لاحقاً في الدورة و لكن هدفنا في هذا الدرس تعليمك كيف تكتب كود الصفحة بشكل صحيح و مفهوم و ما كنا نقصده بالضبط حين قلنا أن كل ما تكتبه في القسم Body يراه المستخدم و كل ما تكتبه في القسم Head لا يراه المستخدم. خصائص وسوم HTML أغلب الوسوم التي تضيفها في الكود يمكن إضافة خصائص لها على الشكل التالي. <element attribute="value"> </element>
كمثال بسيط, عند إضافة صورة في الصفحة نستخدم الوسم <img> و بداخله نحدد مسار الصورة التي سيتم عرضها بواسطة الخاصية src كالتالي. مثال جرب الكود أمثلة على الأشياء التي يمكن إضافتها في القسم Head عندما تنشئ ملف HTML على حاسوبك و تقوم بعرضه بواسطة المتصفح, ستلاحظ أنه يعرض لك إسم الملف المفتوح في المتصفح كالتالي. عندما تقوم بتصميم الصفحات بنفسك مستقبلاً قم دائماً بوضع عنوان مناسب للصفحات التي تنشئها كما تفعل أغلب المواقع الإحترافية لأن هذا الأمر يساعد المستخدم في معرفة ما هي الصفحة المفتوحة بدون الحاجة لأن يقرأ محتواها, فمثلاً إذا نظرت لعنوان الصفحة التي تقرأها الآن ستجده "أساسيات لغة HTML" و ستجد بجانبها أيضاً الأيقونة الزرقاء التي نظهرها في جميع الصفحات كالتالي. ملاحظة الأمثلة التالية الموضوعة في هذه الفقرة لا يمكن تجربتها بواسطة محرر هرمش. بمعنى أخر, إذا قمت بتجربتها بواسطة محرر هرمش فلن تجد الكود يعمل و سبب ذلك أن محرر هرمش لا يملك الصلاحية اللازمة التي تسمح له بتعديل معلومات متصفحك. إذاً في متصفح هرمش يمكنك رؤية نتيجة أي كود تكتبه فيه باستثناء الكود الذي يسمح بتغيير عنوان و أيقونة الصفحة التي تظهر في المتصفح. لمشاهدة نتيجة الأمثلة التالية, قم بإنشاء ملف إسمه test.html على حاسوبك و اكتب الكود فيه. طريقة وضع عنوان للملف في حال أردت وضع عنوان للملف حتى يظهر في المتصفح بدلاً من إسم الملف نفسه, قم بوضعه بداخل <title></title> في القسم Head كالتالي. مثال شاهد النتيجة طريقة وضع أيقونة للملف في العادة الصورة التي يتم وضعها كأيقونة للصفحة يكون إسمها favicon.ico و حجمها 16 x 16 و لكن تستطيع وضع مسار أي صورة لديك بشرط أن يكون لها الحجم المذكور. لوضع أيقونة بجانب عنوان الصفحة يجب أن تضع السطر التالي كما هو في القسم Head مع وضع مسار الصورة التي تريد عرضها مكان الكلمة icon-path.
في المثال التالي قمنا بوضع أيقونة موقع هرمش نفسها بجانب عنوان الصفحة. مثال شاهد النتيجة أمثلة على الأشياء التي يمكن إضافتها في القسم Body في صفحة الويب و بالتحديد في القسم Body الذي يراه المستخدم يمكنك إضافة الكثير من الأشياء مثل الصور, القوائم, الأزرار و أي شيء يخطر في بالك. ستتعرف لاحقاً في الدورة على جميع الأشياء التي يمكنك إضافتها في الصفحة و سنطلعك الآن على بعضها. ملاحظة: نتمنى منك التركيز على طريقة ترتيب الكود و ليس طريقة عمله. مثال
جرب الكود طريقة كتابة أسماء الوسوم لا تؤثر في HTML سواء قمت بكتابة أسماء الوسم بأحرف صغيرة ( Small Letters ) أو بأحرف كبيرة ( Capital Letters ) فإن ذلك لا يسبب أي مشكلة. مثال
جرب الكود |
مواقع النشر (المفضلة) |
(مشاهدة الكل) عدد الذين شاهدوا هذا الموضوع : 1 : | |
|
|
المواضيع المتشابهه | ||||
الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
Html المحررات | إسمهان الجادوي | تعليم لغة HTML | 0 | 11-07-2020 02:29 PM |
نظرة عامة على اللغة html | إسمهان الجادوي | تعليم لغة HTML | 0 | 11-07-2020 02:22 PM |
أساسيات هامة في التعبير الأدبي | ناجية عثمان | شعاع اللغة العربية | 6 | 11-03-2014 08:35 PM |
تعلم أساسيات الاعراب | أم يعقوب | شعاع اللغة العربية | 6 | 04-24-2014 02:12 PM |