شرح كيفية استخدام HTML و CSS لتطوير المواقع - أساسيات بناء صفحات الويب
في عالمٍ رقميٍّ مُتّصلٍ تُعدّ المواقعُ الإلكترونيةُ واجهةً أساسيةً للأفرادِ الشركاتِ والمؤسساتِ وراء كلّ موقعٍ إلكترونيٍّ مُذهلٍ تقفُ لُغتانِ أساسيتانِ تُشكّلانِ هيكلَهُ ومظهرَهُ HTML و CSS.
 |
| شرح كيفية استخدام HTML و CSS لتطوير المواقع. |
تُعدّ HTML (HyperText Markup Language) لغة الترميز الرئيسية لبناء هيكل صفحات الويب بينما تُستخدم CSS (Cascading Style Sheets) للتحكم في مظهر صفحات الويب وجعلِها أكثر جاذبية.
في هذا المقال سنُقدّم شرحًا مُفصّلًا لكيفية استخدام هاتين اللغتين الأساسيتين لبناء مواقع إلكترونية بدءًا من فهم أساسياتِهما و مرورًا بِأهمّ عناصرِهما و وصولًا إلى تقديم أمثلةٍ ونصائحَ عمليةٍ.
HTML - هيكل صفحات الويب
تُعدّ HTML لغة الترميز التي تُستخدم لبناء هيكل صفحات الويب تَستخدم HTML مجموعةً منَ "العلامات" (Tags) لتحديد مُختلفِ عناصر الصفحة مثل.
- العناوين (Headings)
- الفقرات (Paragraphs)
- الصور (Images)
- الروابط (Links)
- الجداول (Tables)
- القوائم (Lists)
تُكتبُ علامات HTML بين قوسين مُثلّثين < > و عادةً ما تأتي في أزواج حيث تُحدّدُ العلامة الأولى بدايةَ العنصر و تُحدّدُ العلامة الثانية نهايةَ العنصر.
فمثلًا ، لتعريف عنوانٍ نستخدم العلامة <h1> لبداية العنوان و العلامة </h1> لنهاية العنوان.
```html
<h1>هذا هو العنوان </h1>
```
لعرض فقرة ، نستخدم العلامة <p> لبداية الفقرة ، و العلامة </p> لنهاية الفقرة .
```html
<p>هذه فقرة نصّية . </p>
```
تُوفّر HTML أيضًا علاماتٍ لتعريف.
- العناصر الهيكلية لِلصفحة ، مثل <header> و <nav> و <main> و <footer> .
- عناصر النّماذج (Forms) ، مثل <form> و <input> و <button> .
- عناصر مُتعدّدة الوسائط ، مثل <audio> و <video> .
CSS - مظهر صفحات الويب
تُستخدم CSS للتحكم في مظهر صفحات الويب و جعلِها أكثر جاذبية تُحدّد CSS.
- الألوان (Colors)
- الخطوط (Fonts)
- التّخطيط (Layout)
- و خصائص أخرى لعناصر HTML .
يُمكن كتابة CSS بِثلاثِ طرقٍ.
- داخليًّا (Inline) يُمكن إضافة CSS داخل علامة HTML باستخدام الخاصّية style .
فمثلًا لتغيير لون النّصّ في فقرة نكتب.
```html <p style="color: red;">هذه فقرة نصّية . </p> ``` - داخلَ العنصرِ <style> يُمكن إضافة CSS داخل العنصرِ <style> في رأسِ الوثيقة HTML .
فمثلًا.
```html <head> <style> p { color: blue; } </style> </head> ``` - في ملفٍّ مُنفصلٍ (External) يُمكن كتابة CSS في ملفٍّ مُنفصلٍ و ربطِه بوثيقةِ HTML باستخدام العنصرِ <link>.
فمثلًا.
```html <head> <link rel="stylesheet" href="style.css"> </head> ```
تُعدّ طريقة الملفّ المُنفصل أفضلَ طريقةٍ لِكتابة CSS حيث تُتيح فصلَ شفرة CSS عن شفرة HTML مما يُسهّل إدارةَ و صيانةَ الموقع.
دمج HTML و CSS - بناء صفحات ويب متكاملة
من خلال دمج HTML و CSS يمكنك إنشاء صفحات ويب متكاملة.
فمثلًا لإنشاء صفحة ويب بسيطة تحتوي على عنوانٍ و فقرةٍ ، نكتب شفرة HTML التالية.
```html
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>صفحة ويب بسيطة </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>هذا هو العنوان </h1>
<p>هذه فقرة نصّية . </p>
</body>
</html>
```
فمثلًا لإنشاء صفحة ويب بسيطة تحتوي على عنوانٍ و فقرةٍ ، نكتب شفرة HTML التالية.
ثم نكتب شفرة CSS التالية في الملفّ style.css.
```css
h1 {
color: blue;
text-align: center;
}
p {
color: gray;
font-size: 18px;
}
```
عند فتح هذه الصفحة في متصفّح الويب سَيظهر العنوان باللّون الأزرق و في منتصف الصفحة و ستظهر الفقرة باللّون الرّمادي و بحجم خطٍّ 18 بكسل.
نصائح لتعلم HTML و CSS - ابدأ رحلة تصميم مواقعك بنفسك
تُعدّ HTML و CSS لُغتين سهلتي التعلّم و تتوفر العديد من المصادر المجانية عبر الإنترنت التي تُساعدك على البدء.
إليك بعض النّصائح.
- ابدأ بالأساسيات تعلم أهم علامات HTML و خصائص CSS الأساسية قبل الانتقال إلى المفاهيم المُتقدّمة.
- مارس باستمرار أفضل طريقة لتعلم HTML و CSS هي الممارسة حاول إنشاء صفحات ويب بسيطة في البداية ثم تدرّج إلى مشاريع أكثر تعقيدًا.
- استخدم محرّرَ نصوصٍ مُناسبًا سيساعدك استخدام محرّرَ نصوصٍ مُناسبًا مثل Visual Studio Code أو Sublime Text على كتابة شفرةٍ أنظف و أكثر تنظيمًا.
- استفد من مصادر التعلّم المجانية تتوفر العديد من مصادر التعلّم المجانية عبر الإنترنت مثل.
- اطلع على مواقع إلكترونية أخرى اطلع على مواقع إلكترونية أخرى وحاول فهم كيف تمّ بناؤُها و تصميمُها.
من خلال اتّباع هذه النّصائح و الاستمرار في التعلّم ستتمكّن من إتقان HTML و CSS و بناء مواقع إلكترونية مُميّزة.
الخاتمة تُعدّ HTML و CSS من اللغات الأساسية لِتطوير المواقع الإلكترونية من خلال فهم أساسياتِهما و استخداماتِهما يمكنك بناء مواقع إلكترونية جذّابة و فعّالة ابدأ رحلتك في عالم تطوير الويب و انضمّ إلى ملايينِ المُطورين حول العالم.