مقدمة إلى HTML و CSS: إنشاء أول صفحة ويب لك
مقدمة
في هذا الدرس، سنرشدك خلال الأساسيات لإنشاء صفحة ويب بسيطة باستخدام HTML و CSS. ستتعلم كيفية هيكلة محتوى صفحتك باستخدام HTML وتنسيق هذا المحتوى باستخدام CSS. بنهاية هذا الدرس، ستكون قد أنشأت صفحة ويب أساسية تتضمن نصوصًا، صورًا، وروابط، مصممة بالألوان، والخطوط، وتقنيات التخطيط.
ما الذي ستتعلمه
- الهيكل الأساسي لوثيقة HTML
- كيفية استخدام عناصر HTML لإنشاء المحتوى
- مقدمة إلى CSS لتنسيق صفحتك
- ربط ملف CSS بوثيقة HTML
الخطوة 1: إعداد وثيقة HTML الخاصة بك
لنبدأ بإنشاء ملف HTML جديد. افتح محرر الأكواد المفضل لديك (مثل Visual Studio Code, Sublime Text, أو Atom) وأنشئ ملفًا جديدًا باسم index.html. هذا سيكون الملف الرئيسي لصفحتك على الويب.
أضف الهيكل الأساسي التالي إلى ملف index.html الخاص بك:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
</body>
</html>شرح:
<!DOCTYPE html>: يحدد هذا التصريح نوع الوثيقة وإصدار HTML.<html lang="en">: العنصر الجذري لوثيقة HTML. تحدد سمةlangلغة الوثيقة.<head>: يحتوي على معلومات عن وثيقة HTML مثل مجموعة الأحرف، اسم المؤلف، والعنوان.<meta charset="UTF-8">: يحدد ترميز الأحرف للوثيقة إلى UTF-8.
: يضمن عرض صفحة الويب بشكل صحيح على الأجهزة المختلفة.<meta name="viewport" content="width=device-width, initial-scale=1.0"><title>: يحدد عنوان صفحة الويب الذي يظهر في علامة تبويب المتصفح.<body>: يحتوي على المحتوى الفعلي لصفحة الويب، مثل النصوص والصور والروابط.
الخطوة 2: إضافة المحتوى إلى صفحة الويب الخاصة بك
الآن، دعنا نضيف بعض المحتوى داخل علامة <body>. سنضيف عنوانًا، وفقرة، وصورة.
<body>
<h1>Welcome to My First Web Page!</h1>
<p>This is a paragraph of text that gives a brief introduction to the page. HTML stands for HyperText Markup Language.</p>
<img src="https://via.placeholder.com/150" alt="Placeholder Image">
</body>شرح:
<h1>: هذا هو عنصر عنوان من المستوى الأعلى، يستخدم للعناوين الرئيسية.<p>: هذا العنصر يحدد فقرة من النص.<img>: عنصر الصورة. تحدد سمةsrcمسار الصورة، وتوفر سمةaltنصًا بديلاً إذا لم يمكن عرض الصورة.
الخطوة 3: تنسيق صفحة الويب الخاصة بك باستخدام CSS
لتنسيق صفحة الويب الخاصة بك، سنستخدم ملف CSS. أنشئ ملفًا جديدًا في نفس الدليل مع ملف index.html واسم الملف styles.css.
أضف كود CSS التالي إلى ملف styles.css الخاص بك:
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 20px;
padding: 20px;
}
h1 {
color: #333;
}
p {
color: #666;
line-height: 1.6;
}شرح:
body: يطبق الأنماط على الجسم الكامل لصفحة الويب، مثل الخط، لون الخلفية، الهوامش، والحشوة.h1: ينسق عنصر العنوان الرئيسي بلون معين.p: ينسق لون نص الفقرة وارتفاع الخط لتحسين قابلية القراءة.
الخطوة 4: ربط CSS بـ HTML
لتطبيق أنماط CSS على وثيقة HTML الخاصة بك، تحتاج إلى ربط ملف styles.css بملف index.html الخاص بك. أضف السطر التالي داخل علامة <head> من وثيقة HTML:
<link rel="stylesheet" href="styles.css">
الآن، يجب أن يبدو ملف HTML الخاص بك كما يلي:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My First Web Page!</h1>
<p>This is a paragraph of text that gives a brief introduction to the page. HTML stands for HyperText Markup Language.</p>
<img src="https://via.placeholder.com/150" alt="Placeholder Image">
</body>
</html>
الخطوة 5: عرض صفحة الويب الخاصة بك
لعرض صفحة الويب الخاصة بك، افتح ملف index.html في متصفح الويب الخاص بك. يجب أن ترى المحتوى المنسق مع العنوان والفقرة والصورة.
الخاتمة
تهانينا! لقد أنشأت أول صفحة ويب لك باستخدام HTML و CSS. غطى هذا الدرس أساسيات هيكل HTML وكيفية تنسيق صفحتك باستخدام CSS. يمكنك الآن تجربة عناصر HTML وأنماط CSS مختلفة لإنشاء صفحات ويب أكثر تعقيدًا وجمالًا.
للمزيد من التعلم، تحقق من هذه الموارد:
اترك تعليقاً