-قد يتعجب بعض المدونين المبتدئين من فائدة وجود أكواد تسمى HTML وأخرى تسمى CSS وأخرى تسمىJAVASCRIPT وفى الواقع هذا أساس تعلم لغات الويب, لذلك قررت كتابة هذا الموضوع لعرض الفرق بشكل بسيط دون التمادى فى الشرح, لأن الدخول فى صلب كل لغة من اللغات السابقة يتطلب وقت وجهد لشرحه, لذلك سأعتذر من حضراتكم بتأجيل شرح كل لغة على حدة حتى يقوم الفريق بإعداد الكورسات.
لنبدأ بأكواد HTML
-كلمة HTML إختصار لعبارة Hyper Text Markup Language وذلك لأنها لغة تعتمد بشكل رئيسى على الأوسمة أو Tags مثل <a> و <b> و <li> ..... إلخ.
-تستخدم أكواد HTML لعرض المعلومات, ويراعى فيها الترتيب, فعلى سبيل المثال:إن كنا بصدد إنشاء قائمة فالشئ المسئول عن موضعها هو كود HTML .
-لنتخيل أن لدينا "بناء" فالهيكل عبارة عن أكواد HTML والألوان والمظهر عبارة عن أكواد CSS ومن هنا نفرق بين اللغتين كالاتى.
تصميم قائمة أفقية بسيطة بالـ HTML والـ CSS
يتم كتابة كود HTML هكذا
<div class="menu">
<li>تجريبى</li>
<li>تجريبى</li>
<li>تجريبى</li>
<li>تجريبى</li>
</div>
وكود CSS هكذا
.menu{
background-color:#000;
width:500px;
height:70px;
margin:0 auto;
}
.menu li{
background-color:#666;
width:100px;
height:40px;
float:right;
list-style:none;
margin-left:1px;
color:#fff;
text-align:center;
padding-top:30px;
cursor:pointer;
}
.menu li:hover{
background-color:#555;
}
.menu li:active{
background-color:#444;
margin-top:2px;
}
والان مع معاينة العمل السابق
المعاينة السابقة ناتج إمتزاج أكواد
HTML و
CSS ولتقريب المفهوم الصحيح لكل منهما سنضع كود
HTMLبدون وضع
CSS لنرى ما النتيجة !
ناتج إضافة أكواد HTML مفردةً
تجريبى
تجريبى
تجريبى
تجريبى
نلاحظ إختفاء التنسيق العام والألوان وخاصية الـ
Hover و الـ
Active
يمكنك تجربة ذلك بنفسك .... إضغط هنا وضع الأكواد فى الجزء العلوى وراقب النتيجة فى الجزء السفلى.
ملحوظة:عند وضع أكواد CSS يرجى وضعها بين وسمين
<style/>الكود هنا<style>
ثانيا:أكواد CSS
-كلمة CSS إختصار لعبارة Cascading Style Sheets وهى اللغة التى تتحكم فى مظهر HTML كالألوان والحجم والحركة والكثير من الخواص.
-تعتمد بشكل رئيسى على وجود ما يسمى CLASS وما يسمى ID ولا تحتوى على TAGS كما هو الحال فى لغة HTML.
-يتم تعريفها للمتصفح بثلاث طرق رئيسية..... الأولى: وضع الأكواد بين وسمين
<style>الكود هنا</style>
الطريقة الثانية: وضع الأكواد فى داخل أحد أوسمة HTML .. مثلا.
<div style="الكود هنا"></div>
والطريقة الثالثة المستخدمة فى قوالب بلوجر: وهى وضع الأكواد تحت وسم
<b:skin><
هذا النص للتجريب
ردحذف