إعداد CSS و HTML لموقعك الإلكتروني: دليل تعليمي

Preslav Dobrev2022-10-28 · 4 min read

إعداد CSS و HTML لموقعك الإلكتروني: دليل تعليمي

إن بناء المواقع الإلكترونية هو الخطوة الأولى للبدء في تطوير الويب. ومن أولى الأشياء التي يجب على المهتمين بتطوير الويب تعلمها هي كيفية إعداد CSS و HTML لموقع إلكتروني. من خلال إعداد الصفحة التعريفية الأساسية، يمكن للمبتدئ الاستعداد لأساسيات تصميم المواقع الإلكترونية، وصقل مهاراته في تطوير الويب، وتعلم كيفية التعاون مع المطورين.

سيقوم هذا البرنامج التعليمي بـ إرشادك خلال أساسيات إعداد ملفات HTML و CSS لموقعك الإلكتروني. لنبدأ!

المتطلبات الأساسية

فهم أساسي لـ HTML و CSS.

الخطوة 1- الإعداد الأولي

في البداية، سنقوم بإنشاء دليل مشروع جديد وتسميته demo-project :

mkdir demo-project

1	mkdir demo-project

بعد ذلك، انتقل إلى الدليل الحالي باستخدام cd الأمر:

cd demo-project

1	cd demo-project

في مجلد المشروع، دعنا نضيف الملفات التالية التي سنحتاجها لإطلاق موقعنا الإلكتروني الأساسي:

index.html : سيحتوي هذا الملف على جميع أكواد HTML.
styles.css : سنحتفظ بجميع ملفات CSS هنا لتنسيق موقعنا الإلكتروني.
images : يجب الاحتفاظ بجميع الصور اللازمة في هذا المجلد.

الآن بعد أن قمنا بإنشاء دليل المشروع وإضافة الملفات اللازمة، دعنا ننتقل إلى الأمام ونضيف محتوى HTML في index.html في الخطوة التالية.

الخطوة 2- إضافة محتوى HTML في index.html ملف

في index.html الذي قمنا بإنشائه في الخطوة السابقة، سنضيف أكواد HTML التعريفية. ستعمل خطوط HTML الأساسية هذه كإرشادات للمتصفح، ولكن لن يتم عرضها على صفحة الويب.

أضف كتلة الكود التالية في ملف index.html الخاص بك:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Welcome to CloudSigma!</title>
<link rel="stylesheet" href="css/styles.css">
</head>

<body>
</body>

</html>

<!DOCTYPE html>

<head>

<title>Welcome to CloudSigma!</title>

</head>

<body>

</body>

</html>

ملاحظة: تأكد من أن ملف index.html فارغ قبل إضافة كتل الأكواد هذه. أيضًا، ضع في اعتبارك تغيير العنوان كما هو موضح في قسم <title> .

دعنا نفهم المصطلحات المستخدمة:

<!DOCTYPE html> : هو إعلان يخبر المتصفح بنوع الـ HTML المستخدم في مستند HTML.
- نظرًا لتوفر إصدارات متعددة من معايير HTML، فإن تحديد DOCTYPE يسهل على المتصفحات تحديد إصدار HTML دون عناء. على سبيل المثال، في هذا الدليل، نستخدم أحدث إصدار من HTML5.
<html> : يخبر هذا الوسم المتصفح بأن المحتويات المضمنة بداخله يجب معاملتها كـ HTML. عند فتح ملف <html> ، تأكد من إغلاقه باستخدام وسم </html> . يدعم هذا الوسم سمات lang ، ويمكنك تحديد لغة صفحة الويب. لقد قمنا بضبط اللغة على الإنجليزية في برنامجنا التعليمي باستخدام وسم اللغة en .
- تفضل بزيارة IANA Language Subtag Registry للتحقق من اللغات الأخرى المتاحة للاستخدام.
<head> : يقوم هذا بإنشاء قسم في مستند HTML ويحتوي على معلومات حول صفحة الويب. ومع ذلك، لا توجد تفاصيل للمحتوى، ولا يعرض المتصفح أي معلومات هنا في قسم الرأس (head).
<meta charset="utf-8"> : يحدد ترميز الأحرف للمستند. يجب أن يكون بتنسيق Unicode format، أي UTF-8، مما يدعم معظم اللغات المكتوبة المعترف بها.
<title> : يخبر وسم <title> المتصفح باسم صفحة الويب. يظهر العنوان على علامة تبويب المتصفح عندما يتم إدراج الموقع في نتائج البحث.
<link rel="stylesheet" href="css/styles.css"> : يخبر المتصفح بتحديد ورقة الأنماط (stylesheet) التي تحتوي على أنماط CSS.
<body> : يحتوي هذا الوسم على المحتويات الرئيسية لصفحة الويب. عند استخدام وسم <body> ، تأكد من إغلاقه باستخدام وسم </body> .

الخطوة 3- التنسيق باستخدام CSS

في ملف styles.css ملف، أضف التنسيق وفقًا لاحتياجات مشروعك. في هذا المثال، أضف أسطر الكود التالية في styles.css ملف:

body {
background-color: red;
}

h1 {
color: yellow;
text-align: centre;
}

p {
font-family: verdana;
font-size: 25px;
}

body {

background-color: red;

}

h1 {

color: yellow;

text-align: centre;

}

p {

font-family: verdana;

font-size: 25px;

}

لقد قمنا أخيرًا بإنشاء ملفات HTML و CSS الأساسية التي سنحتاجها لإطلاق موقعنا الإلكتروني. بالإضافة إلى ذلك، يمكنك إضافة صور والاحتفاظ بها في مجلد الصور. احفظ الملف وأغلقه. بعد ذلك، افتح index.html ملف في متصفح الويب المفضل لديك، وستظهر لك صفحة أساسية على شاشتك.

Conclusion

في هذا الدرس التعليمي التمهيدي، تعلمنا أساسيات إعداد HTML و CSS وأنشأنا موقعًا إلكترونيًا بسيطًا. حان الوقت الآن لإنشاء صفحات جديدة، وضبطها، وإضافة محتوى، وربط كل شيء من شريط التنقل. كخطوة تالية، جرب إضافة المزيد من المحتوى إلى index.html ملف وتنسيقه باستخدام CSS.

علاوة على ذلك، هناك دروس تعليمية أخرى لـ HTML و CSS يمكنك العثور عليها في مدونتنا:

حوسبة سعيدة!

Preslav Dobrev

المؤلف · CloudSigma

Preslav Dobrev هو مصمم إبداعي في CloudSigma، يركز على هوية أعمال متسقة باستخدام قنوات التسويق التقليدية والمبتكرة. هو بارع في دمج الرؤية الفنية مع التسويق الاستراتيجي لخلق سرد قصصي مؤثر للعلامة التجارية.