سنطرح عليكم في هذا الدرس أمثلة عملية تطبيقية على كتابة الوسوم الرئيسية ثم في الدرس القادم سنتكلم في موضوع تحسين ظهور الوسوم على الصفحة باستخدام الخصائص
<!DOCTYPE html>
<html>
هنا يتم اضافة عنوان الصفحة والوصف والروابط<head>
<title>عنوان الصفحة</title>
<"link rel="stylesheet" href="styles.css>
وصف قصير للصفحة <""=meta name="description" content>
</head>
<body> هنا محتوى الصفحة الفعلي
<h1>مرحبًا بك في موقعنا!</h1>
<p>نص الصفحة او الفقرة هنا</p>
<p>سطر أول <br> سطر ثاني</p>
<"وصف الصورة"=img src="image.jpg" alt>
<a href="https://lobbycode.com">Lobbycode</a>
نستخدم هذا الوسم لانشاء القائمة<ul>
<li>عنصر القائمة 1</li>
<li>عنصر القائمة 2</li>
<li>عنصر القائمة 3</li>
<ul/>
لانشاء جدول والبيانات للاعمدة والصفوف<table>
<tr>
<th>عنوان العمود 1</th>
<th>عنوان العمود 2</th>
</tr>
<tr>
<td>الصف 1، العمود 1</td>
<td>الصف 1، العمود 2</td>
</tr>
<tr>
<td>الصف 2، العمود 1</td>
<td>الصف 2، العمود 2</td>
</tr>
<table/>
هذه الوسوم تستخدم لإنشاء نموذج لارسال للبيانات
<"form action="process.php" method="POST>
<label for="name">الاسم:</label>
<"input type="text" id="name" name="name>
<label for="email">البريد الإلكتروني:</label>
<"input type="email" id="email" name="email>
<button type="submit">إرسال</button>
<form/>
<body/>
<html/>
- <header> و <nav> و <ul> و <li> - هذه الوسوم تستخدم لإنشاء شريط التنقل في رأس الصفحة:
<header>
<nav>
<ul>
<li><a href="#">الصفحة الرئيسية</a></li>
<li><a href="about.html">من نحن</a></li>
<li><a href="contact.html">اتصل بنا</a></li>
<ul/>
<nav/>
<header/>
لانشاء محتوى مقسم ومرتب مع العناصر
<section>
<div class="section">
<h2>عنوان القسم</h2>
<p>هذا هو نص الفقرة الأولى.</p>
<p>هذا هو نص الفقرة الثانية.</p>
<div/>
<section/>
