مساء الخير 💙
اليوم راح نتكلم عن لغة الـ HTML تعريفها وأساسياتها وبعض الشروحات والتطبيق العملي ☺️👇🏻💻
اليوم راح نتكلم عن لغة الـ HTML تعريفها وأساسياتها وبعض الشروحات والتطبيق العملي ☺️👇🏻💻
ماهي لغة HTML ؟
هي اختصار لكلمة
(Hyper Text Markup Language )
هي لغة تستخدم لإنشاء وتصميم صفحات الويب
مميزات اللغة ؟
لغة سهلة وغير معقدة لا تحتوي على شيفرات كثيرة ايضاً لا تحتاج الى مترجم
أساسيات لغة ال HTML ؟
تكتب لغة HTML برموز تسمى الTags او الوسوم ولكل وسم من وسوم
هي اختصار لكلمة
(Hyper Text Markup Language )
هي لغة تستخدم لإنشاء وتصميم صفحات الويب
مميزات اللغة ؟
لغة سهلة وغير معقدة لا تحتوي على شيفرات كثيرة ايضاً لا تحتاج الى مترجم
أساسيات لغة ال HTML ؟
تكتب لغة HTML برموز تسمى الTags او الوسوم ولكل وسم من وسوم
لغة ال HTML وسم بداية ووسم نهاية
<TAG>وسم البداية
</TAG>وسم النهاية
💡الأمتداد المستخدم في أسماء ملفات HTML
هو html. او htm.
الوسم الاول هو الوسم <HTML>
يعتبر من أهم الوسوم لأنه يقوم بتعريف للمتصفح ان هذه الصفحة مصنوعه بلغة ال HTML ولولا هذا الوسم لظهرت محتويات الصفحة بصورة
<TAG>وسم البداية
</TAG>وسم النهاية
💡الأمتداد المستخدم في أسماء ملفات HTML
هو html. او htm.
الوسم الاول هو الوسم <HTML>
يعتبر من أهم الوسوم لأنه يقوم بتعريف للمتصفح ان هذه الصفحة مصنوعه بلغة ال HTML ولولا هذا الوسم لظهرت محتويات الصفحة بصورة
باهتة وغير مفهومة
الوسم الثاني هو الوسم <HEAD>
وهذا الوسم يحتوي على معلومات تعريف حول الصفحة
الوسم الثالث هو الوسم <TITLE>
يحدد هذا الوسم عنواناً للصفحة ويظهر في شريط عنون المتصفح أو في علامة تبويب الصفحة
ملاحظة 💡
يوضع هذا الوسم بين الوسمين
<HEAD>و</HEAD>
الوسم الثاني هو الوسم <HEAD>
وهذا الوسم يحتوي على معلومات تعريف حول الصفحة
الوسم الثالث هو الوسم <TITLE>
يحدد هذا الوسم عنواناً للصفحة ويظهر في شريط عنون المتصفح أو في علامة تبويب الصفحة
ملاحظة 💡
يوضع هذا الوسم بين الوسمين
<HEAD>و</HEAD>
تطبيق عملي 👇🏻🕑
الخطوات:
١- افتح ال Notepad🗒
٢- اكتب الاوامر الموجودة بالصورة التالية
٣- احفظ الملف ب امتداد html. او htm. على سطح المكتب او اي مكان تريده
٤- افتح الملف بالمتصفح
الخطوات:
١- افتح ال Notepad🗒
٢- اكتب الاوامر الموجودة بالصورة التالية
٣- احفظ الملف ب امتداد html. او htm. على سطح المكتب او اي مكان تريده
٤- افتح الملف بالمتصفح
الوسم <BR>
نستخدم هذا الوسم لتحديد نهاية السطر وللبدء بسطر جديد
ملاحظة💡(هذا الوسم مفرد، اي ليس له وسم نهاية)
الوسم <P>
يقوم هذا الوسم تقريباً بنفس عمل الوسم السابق
يحدد نهاية السطر ويبدا سطر جديد ولكن مع إضافة سطر آخر فارغ بين الفقرات وايضاً يستخدم هذا الوسم كوسم مفرد
نستخدم هذا الوسم لتحديد نهاية السطر وللبدء بسطر جديد
ملاحظة💡(هذا الوسم مفرد، اي ليس له وسم نهاية)
الوسم <P>
يقوم هذا الوسم تقريباً بنفس عمل الوسم السابق
يحدد نهاية السطر ويبدا سطر جديد ولكن مع إضافة سطر آخر فارغ بين الفقرات وايضاً يستخدم هذا الوسم كوسم مفرد
ويستخدم ايضاً كوسم مزدوج لتحديد اتجاه الفقرة وإتجاه النص فيها حيث يستخدم معه الخصائص التالية : Align,Dir
الخاصية Align تحدد محاذاة الفقرة وهيا تأخذ ثلاث قيم
Center,Right,Left
الخاصية Align تحدد محاذاة الفقرة وهيا تأخذ ثلاث قيم
Center,Right,Left
الخاصية الأخرى Dir نستخدمها تقوم بتحديد إتجاه قراءة النص وتأخذ قيمتين
LTR اي سيكون اتجاه النص من اليسار إلى اليمين
RTL اتجاه النص من اليمين إلى اليسار
تطبيق 💡
LTR اي سيكون اتجاه النص من اليسار إلى اليمين
RTL اتجاه النص من اليمين إلى اليسار
تطبيق 💡
الوسم FONT
دائماً متصفحات الأنترنت تكتب النصوص بخط عادي من نوع New Roman Times
وحجم الخط ٣ ولكي نستطيع تغير خصائص الخطوط نستخدم هذا الوسم وهو يقوم بالتحكم بالخطوط من حيث النوع واللون والحجم وله عدة خصائص :
دائماً متصفحات الأنترنت تكتب النصوص بخط عادي من نوع New Roman Times
وحجم الخط ٣ ولكي نستطيع تغير خصائص الخطوط نستخدم هذا الوسم وهو يقوم بالتحكم بالخطوط من حيث النوع واللون والحجم وله عدة خصائص :
١- Face لتحديد نوع الخط
٢- Color لتحديد لون الخط
٣- Size لتحديد حجم الخط
<FONT Face=“arial” Size=“6” Color=“Red”>
توجد ايضاً وسوم خاصة بأضافة تنسيقات وتأثيرات إلى النصوص جمعتها لكم بصورة 👇🏻
٢- Color لتحديد لون الخط
٣- Size لتحديد حجم الخط
<FONT Face=“arial” Size=“6” Color=“Red”>
توجد ايضاً وسوم خاصة بأضافة تنسيقات وتأثيرات إلى النصوص جمعتها لكم بصورة 👇🏻
خواص للصفحة 👏🏼:
الخاصية الاولى (BGCOLOR)
نستخدم هذه الخاصية لتغير لون خلفية الصفحة وطريقة كتابتها كالتالي
<BODY BGCOLOR=“yellow ”>
او بطريقة أخرى:
<BODY BGCOLOR=“#RRBBGG”>
ملاحظة💡
1- تكتب القيمة التي تمثل اللون داخل إشارتي “ “
الخاصية الاولى (BGCOLOR)
نستخدم هذه الخاصية لتغير لون خلفية الصفحة وطريقة كتابتها كالتالي
<BODY BGCOLOR=“yellow ”>
او بطريقة أخرى:
<BODY BGCOLOR=“#RRBBGG”>
ملاحظة💡
1- تكتب القيمة التي تمثل اللون داخل إشارتي “ “
٢- بعض المتصفحات لا تتعرف على رموز الألوان إلا بوضع إشارة # قبل اهذه الرموز لذلك يُفضل استخدامها دائماً.
الخاصية الثانية (BACKGROUND)
تقوم هذه الخاصية بتحديد صورة لخلفية الصفحة
طريقة كتابتها على النحو التالي:
<BODY BACKGROUND =“IMG.jpg”>
IMG اسم الصورة
jpg امتداد الصورة
ملاحظة مهمة💡
يجب حفظ ملف الصورة في نفس مكان ملف المفكرة .
تقوم هذه الخاصية بتحديد صورة لخلفية الصفحة
طريقة كتابتها على النحو التالي:
<BODY BACKGROUND =“IMG.jpg”>
IMG اسم الصورة
jpg امتداد الصورة
ملاحظة مهمة💡
يجب حفظ ملف الصورة في نفس مكان ملف المفكرة .
اتمنى الشرح كان واضح ومفهوم ، بالتوفيق للجميع❤️✨
راح اكمل شرح الايام الجاية ان شاء الله ☺️👍💡
جاري تحميل الاقتراحات...