تعلم برمجة المواقع الاكترونية A-2
الدرس الثاني: تعلم لغة HTML من الصفر - الوسوم المتقدمة والجداول
تصميم المواقع
January 30, 2025
الدرس الثاني: تعلم لغة HTML من الصفر - الوسوم المتقدمة والجداول
مرحبًا بك في الدرس الثاني من سلسلة تعلم لغة HTML من الصفر حتى الاحتراف! في هذا الدرس، سنتعمق أكثر في لغة HTML ونتعلم كيفية استخدام الوسوم المتقدمة مثل الجداول والنماذج. بالإضافة إلى ذلك، سنتعرف على كيفية إضافة بعض التنسيقات البسيطة باستخدام CSS.
1. الجداول (Tables)
الجداول تُستخدم لعرض البيانات بشكل منظم في صفوف وأعمدة. في HTML، نستخدم الوسوم التالية لإنشاء الجداول:
-
<table>: يحدد بداية ونهاية الجدول. -
<tr>: يحدد صفًا في الجدول. -
<th>: يحدد عنوان العمود (Header Cell). -
<td>: يحدد خلية في الجدول (Data Cell).
مثال بسيط لجدول:
<table border="1">
<tr>
<th>الاسم</th>
<th>العمر</th>
<th>البلد</th>
</tr>
<tr>
<td>أحمد</td>
<td>25</td>
<td>مصر</td>
</tr>
<tr>
<td>محمد</td>
<td>30</td>
<td>السعودية</td>
</tr>
</table>شرح الكود:
-
border="1": يُضيف حدودًا للجدول (يمكن إزالته أو تعديله باستخدام CSS لاحقًا). -
<th>: يستخدم لعناوين الأعمدة. -
<td>: يستخدم لبيانات الجدول.
2. النماذج (Forms)
النماذج تُستخدم لجمع البيانات من المستخدمين، مثل معلومات التسجيل أو البحث. في HTML، نستخدم الوسوم التالية لإنشاء النماذج:
-
<form>: يحدد بداية ونهاية النموذج. -
<input>: يُستخدم لإدخال البيانات (نص، بريد إلكتروني، كلمة مرور، إلخ). -
<label>: يربط النص بحقل الإدخال. -
<button>: يُستخدم لإنشاء أزرار مثل زر الإرسال.
مثال بسيط لنموذج تسجيل:
<form action="/submit" method="post">
<label for="name">الاسم:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">البريد الإلكتروني:</label>
<input type="email" id="email" name="email"><br><br>
<label for="password">كلمة المرور:</label>
<input type="password" id="password" name="password"><br><br>
<button type="submit">تسجيل</button>
</form>شرح الكود:
-
action="/submit": يُحدد المكان الذي سيتم إرسال البيانات إليه. -
method="post": يُحدد طريقة إرسال البيانات. -
<input type="text">: يُستخدم لإدخال النصوص. -
<input type="email">: يُستخدم لإدخال البريد الإلكتروني. -
<input type="password">: يُستخدم لإدخال كلمة المرور.
3. الوسوم الدلالية (Semantic Tags)
الوسوم الدلالية تُستخدم لإعطاء معنى لهيكل الصفحة، مما يجعلها أكثر قابلية للقراءة من قبل المتصفحات ومحركات البحث. بعض هذه الوسوم تشمل:
-
<header>: يُستخدم لرأس الصفحة. -
<nav>: يُستخدم لقسم التنقل. -
<section>: يُستخدم لقسم من الصفحة. -
<article>: يُستخدم لمحتوى مستقل. -
<footer>: يُستخدم لتذييل الصفحة.
مثال باستخدام الوسوم الدلالية:
<header>
<h1>موقعي الشخصي</h1>
<nav>
<a href="#about">عنّي</a> |
<a href="#contact">اتصل بي</a>
</nav>
</header>
<section id="about">
<h2>عنّي</h2>
<p>أنا مطور ويب مبتدئ وأحب تعلم التقنيات الجديدة.</p>
</section>
<footer>
<p>جميع الحقوق محفوظة © 2023</p>
</footer>4. مقدمة إلى CSS
CSS (Cascading Style Sheets) هي لغة تُستخدم لتنسيق صفحات HTML. يمكن إضافة CSS إلى HTML بعدة طرق:
-
طريقة مباشرة (Inline CSS)
<p style="color: blue; font-size: 20px;">هذا النص أزرق.</p>-
طريقة داخلية (Internal CSS):
<head>
<style>
p {
color: blue;
font-size: 20px;
}
</style>
</head>-
طريقة خارجية (External CSS):
<head>
<link rel="stylesheet" href="styles.css">
</head>مثال بسيط لتنسيق النصوص:
<head>
<style>
h1 {
color: green;
text-align: center;
}
p {
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<h1>مرحبًا بالعالم!</h1>
<p>هذا النص مُنسق باستخدام CSS.</p>
</body>5. تمرين عملي
حاول إنشاء صفحة HTML تحتوي على العناصر التالية:
-
جدول يوضح جدولاً زمنياً لأسبوعك (الأيام، الأنشطة).
-
نموذج تسجيل بسيط يحتوي على حقول الاسم، البريد الإلكتروني، وكلمة المرور.
-
استخدام الوسوم الدلالية مثل
<header>و<footer>لتنظيم الصفحة. -
إضافة تنسيقات بسيطة باستخدام CSS لتغيير لون النص وحجم الخط.
ما التالي؟
في الدرس القادم، سنتعمق أكثر في CSS وسنتعلم كيفية تنسيق الصفحات بشكل احترافي. سنغطي مواضيع مثل الألوان، الخطوط، الهوامش، والحاويات. استعد لتطبيق عملي ممتع!
📌 نصيحة: لا تتردد في تجربة الأكواد بنفسك وتعديلها لترى النتائج. الممارسة هي مفتاح الإتقان! 🚀
التعليقات
لا يوجد اي تعليقات
يرجى تسجيل الدخول لترك تعليق
