بيت الكمبيوتر
السلام عليكم ورحمة الله , اللهم صلّ علي سيدنا محمد وعلي آله وصحبه وسلم , اللهم انا نسألك علماً نافعاً ونعوذ بك من علم بلا عمل , اللهم انا نسألك علماً ينفعنا وعملاً يرفعنا . أما بعد ...
في هذا الدرس الجميل الذي سيساعدك علي تجميل أكود HTML , سوف نتعلم كيفية كتابة كود CSS داخل ملف HTML .
في الحقيقة هناك ثلاث طرق لكتابة كود CSS داخل ملف HTML , وكنا قد ذكرنا اثنان منهم في الدرس السابق , لكن دعونا نتذكرهم سوياً .و نعرف عنهم أكثر ثم نذكر الطريقة الثالثة ونشرحها .
الطريقة الأولي :
وهي أن نقوم بعمل وسم style داخل وسم الـhead , ونكتب بداخله أكواد CSS . دعونا نطبق ذلك عملياً .
</head>
<body>
<h1>مدونة المبرمج</h1>
<p>تعلم برمجة مواقع الويب </p>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title>مدونة المبرمج</title>
<style>
</style>
</head>
<body>
<h1>مدونة المبرمج</h1>
<p>تعلم برمجة مواقع الويب </p>
</body>
</html>
<head>
<meta charset="utf-8" />
<title>مدونة المبرمج</title>
<style>
</style>
</head>
<body>
<h1>مدونة المبرمج</h1>
<p>تعلم برمجة مواقع الويب </p>
</body>
</html>
كما رأيتم فقد كتبت الكود الخاص بالـHTML . فتحت وسم HTML ثم وسم الـhead , وفي وسم الـhead فعلت ثلاثة أشياء .
الأولي : فتحت وسم الـtitle لوضع عنوان الصفحة .
الثانية : فتحت وسم الـmeta وكتبت بداخله الترميز العالمي للغة , لكي تظهر اللغة العربية بشكل صحيح في الصفحة .
الثالثة : فتحت وسم الـstyle و أغلقته , ولم أكتب بداخله أكواد الـCSS بالتالي ستظهر الصفحة بشكلها الإفتراضي , الكلام باللون الأسود و الخلفية البيضاء والكلام علي جهة اليسار .
والآن نري كيف سنستخدم كود الـCSS وما تأثيره علي الصفحة . نبدأ علي بركة الله .
<html>
<head>
<meta charset="utf-8" />
<title>مدونة المبرمج</title>
<style>
body
{
background-color:#dddddd;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-size:20px;
color:blue;
}
</style>
</head>
<body>
<h1>مدونة المبرمج</h1>
<p>تعلم برمجة مواقع الويب </p>
</body>
</html>
تم الانتهاء من كتابة الكود . ! , والآن لنفهم ماذا كتبنا .
قلت في البداية . أن هناك ثلاث طرق لكتابة كود CSS في ملف HTML . أولها كان كتابة الكود داخل وسم style . ويكتب وسم الـstyle داخل وسم الـhead كما تعلمنا في الدرس السابق , وها نحن قد كتبنا الكود داخل وسم الـstyle داخل وسم head . والآن أحفظ الملف بامتداد .html كما تعلمنا سابقاً , ثم افتحه وقل لي ماذا لاحظت .
نعم ! , ستجد أن الخلفية أصبحت باللون الرمادي . فقد كتبنا في الكود أن وسم الـbdoy يكون له background-color الـ#dddddd وهذا يمثل اللون الرمادي أو الرصاصي .
وبعد ذلك ستجد أن الـh1 مكتوب باللون البرتقالي . وموجود في وسط الصفحة , بناءاً علي الكود . فقد كتبنا في الكود أن الـcolor تكون orange و أيضاً . الكلام يكون في الوسط .
في هذا الدرس ليس عليك إلا أن تفهم شئ واحد فقط . هو كيف نكتب أكواد الـCSS داخل ملف HTML . ليس من المفترض أن تعرف جميع أكواد الـCSS . فقط يجب أن تعرف . أين يكتب في ملف HTML .
كانت هذه هي الطريقة الأولي .
الطريقة الثانية :
هي إنشاء ملف مستقل لوحدة ونكتب بداخله أكواد الـCSS , وبعد ذلك نستخدم وسم الـLink في ملف الـHTML لربطهما ببعض .
نبدأ علي بركة الله , ونطبق هذه الطريقة .
بداية نكتب أكود HTML .
<html>
<head>
<link rel="stylesheet" type="text/css" href="اسم ملف الـCSS " />
<link rel="stylesheet" type="text/css" href="اسم ملف الـCSS " />
<meta charset="utf-8" />
<title>مدونة المبرمج</title>
<body>
<h1>مدونة المبرمج</h1>
<p>تعلم برمجة مواقع الويب </p>
</body>
</html>
بعد ذلك . نقوم بعمل ملف CSS وليكن بإسم style ويجب أن يكون امتداده .css فيكون في النهاية style.css . ونضع بداخله أكواد الـCSS .
<body>
<h1>مدونة المبرمج</h1>
<p>تعلم برمجة مواقع الويب </p>
</body>
</html>
body
{
background-color:#dddddd;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-size:20px;
color:blue;
}
{
background-color:#dddddd;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-size:20px;
color:blue;
}
بعد أن قمنا بكتابة أكواد الـCSS داخل ملف مستقل لوحدة . نقوم بعمل اتصال بين هذا الملف ((ملف الـCSS )) وملف الـHTML . داخل ملف الـHTML .
هذا هو ملف الـHTML .
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css " />
<link rel="stylesheet" type="text/css" href="style.css " />
<meta charset="utf-8" />
<title>مدونة المبرمج</title>
</head><title>مدونة المبرمج</title>
<body>
<h1>مدونة المبرمج</h1>
<p>تعلم برمجة مواقع الويب </p>
</body>
</html>
ها نحن قد فعلنا اتصال بين ملف الـHTML و CSS عبر وسم الـLink .
ستظهر لنا نفس النتائج السابقة . لأني لم أغير شئ في الكود وجماليات الصفحة .
هذه كانت الطريقة الثانية لكتاب كود الـCSS في ملف HTML وتجميل الصفحة .
بكده نكون تعلمنا طريقتين .
الأولي : كتابة كود الـCSS داخل وسم الـstyle .
الثانية : كتابة كود الـCSS في ملف CSS مستقل لوحده. ثم عمل اتصال بينهم عبر وسم الـLink في ملف HTML .
أما الطريقة الثالثة فهي سهله وبسيطة جداً .
الطريقة الثالثة :
الطريقة الثالثة والبسيطة هي أن نفتح attribute بإسم style داخل الـtag أو المعروف بالوسم . وتكتب بداخله الأكواد كما تعودنا .
لنري كيف يتم ذلك !
<body style="background-color:#dddddd;">
<h1 style="color:orange; text-align:center;">مدونة المبرمج</h1>
<p style="font-size:20px; color:blue;">تعلم برمجة مواقع الويب </p>
</body>
</html>
ستظهر لنا نفس النتائج السابقة . لأني لم أغير شئ في الكود وجماليات الصفحة .
هذه كانت الطريقة الثانية لكتاب كود الـCSS في ملف HTML وتجميل الصفحة .
بكده نكون تعلمنا طريقتين .
الأولي : كتابة كود الـCSS داخل وسم الـstyle .
الثانية : كتابة كود الـCSS في ملف CSS مستقل لوحده. ثم عمل اتصال بينهم عبر وسم الـLink في ملف HTML .
أما الطريقة الثالثة فهي سهله وبسيطة جداً .
الطريقة الثالثة :
الطريقة الثالثة والبسيطة هي أن نفتح attribute بإسم style داخل الـtag أو المعروف بالوسم . وتكتب بداخله الأكواد كما تعودنا .
لنري كيف يتم ذلك !
<html>
<head>
<meta charset="utf-8" />
<meta charset="utf-8" />
<title>مدونة المبرمج</title>
</head><body style="background-color:#dddddd;">
<h1 style="color:orange; text-align:center;">مدونة المبرمج</h1>
<p style="font-size:20px; color:blue;">تعلم برمجة مواقع الويب </p>
</body>
</html>
كما رأيتم , فالأمر سهل جداً . style ثم = ثم " هنا الكود " .
بهذا يكون انتهي درس اليوم . لكن هناك بعض الملاحظات يجب أن تعرفها .
1- عند نهاية كل أمر من أوامر الـCSS يجب وضع ; فصلة منقوطة ; لكي لا يحدث أي أخطاء وتظهر النائج بالشكل الصحيح .
2- هناك ثلاث طرق لكتابة أكواد الـCSS ودمجها بالـHTML .
3- أنت الآن تستطيع تجميل صفحة HTML بشكل ابتدائي وجميل .
بكده يكون انتهي الدرس .
صلي الله وسلم علي سيدنا محمد وعلي آله وصحبه أجمعين . دمتم في رعاية الله :) .
ليست هناك تعليقات:
إرسال تعليق