تعليمية HTML الأساسية

وسائط Html5

دليل مرجعي Html

دليل أساسي Html5

API Html5

وسائط Html5

تخطيط HTML

تصميم الصفحة المناسب مهم جدًا، حيث يقرر جمال الصفحة ويتأثر بتجربة المستخدم؛ تصميم الصفحة السيء يؤدي إلى تجربة المستخدم السيئة ويتعذر على المستخدم البقاء على الصفحة.

طرق تنفيذ تصميم Html

1- يمكنك استخدام طريقة جدول Html table لبناء تصميم الصفحة، ثم ملء المحتوى.
2- استخدم div، بالإضافة إلى float أو flex لتصميم الصفحة.

مثال بسيط على تصميم الجدول

مثال

<!DOCTYPE html>
<html>
<head>
　　　　<meta　charset="UTF-8">
　　　　<title>الجدول</title>
</head>
<body>
　　<table　border="1"　cellspacing="1"　cellpadding="1"　align="center">
　　　　　　<tr>
　　　　　　　　　　<td　colspan="2"　align="center"　　style="background:　#0395e1">التصفح العلوية</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　　　<td　style="background:　#f25807"　align="center"　height="300px"　width="100px">
　　　　　　　　　　　　　　المحتوى<br> <br>الجانبية
　　　　　　　　　　</td>
　　　　　　　　　　<td　style="background:　red"　align="center"　width="400px">
　　　　　　　　　　　　　　المحتوى الرئيسي
　　　　　　　　　　</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　　　<td　colspan="2"　style="background:　darkorchid"　align="center">القاعدة</td>
　　　　　　</tr>
　　</table>
</body>
</html>

اختبار الرابط ‹/›

مزيد من الأمثلة على الإنترنت

تصميم الصفحة باستخدام عناصر <div>
كيفية استخدام عناصر <div> لإنشاء تصميم.

تصميم الصفحة باستخدام علامة التبويب <table>
كيفية استخدام علامة التبويب <table> لإنشاء تصميم.

تصميم الموقع

معظم المواقع تقوم بتنظيم المحتوى في عدة أعمدة (مثل المجلات أو الصحف).

معظم المواقع يمكنها استخدام عناصر <div> أو <table> لإنشاء تصميم متعدد الأعمدة. CSS يستخدم لتحديد موقع العناصر أو إنشاء خلفية وألوان غنية للصفحة.

على الرغم من أننا يمكننا استخدام علامة التبويب table لإنشاء تصميمات جميلة، إلا أن علامة التبويب table غير موصى بها كأداة لتصميم التصميم - الجدول ليس أداة تصميم.

تصميم HTML - استخدامه لـ <div>

عنصر div هو عنصر بلوك يستخدم لتجميع عناصر HTML.

السلسلة التالية تستخدم خمس عناصر div لإنشاء تصميم متعدد الأعمدة:

مثال

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>دليل الأساسيات (oldtoolbag.com)</title>　
</head>
<body>
　
<div　id="container"　style="width:520px">
　
<div　id="header"　style="background-color:#FFA300;">
<h1　style="margin-bottom:0;">عنوان رئيسي للصفحة الرئيسية</h1></div>
　
<div　id="menu"　style="background-color:#FF9a00;height:200px;width:120px;float:left;">
<b>القائمة</b><br>
HTML<br>
CSS<br>
JavaScript</div>
　
<div　id="content"　style="background-color:#dddddd;height:200px;width:400px;float:left;">
المحتوى هنا</div>
　
<div　id="footer"　style="background-color:#FFA300;clear:both;text-align:center;">
حقوق النشر © دليل الأساسيات (oldtoolbag.com)</div>
　
</div>
　
</body>
</html>

اختبار الرابط ‹/›

كود HTML المذكور أعلاه سينتج النتيجة التالية:

تسميات ترتيب HTML - استخدام الجداول

استخدام علامة <table> في HTML هو طريقة بسيطة لإنشاء الترتيب.

معظم المواقع يمكنها استخدام عناصر <div> أو <table> لإنشاء أعمدة متعددة. يتم استخدام CSS لتحديد مواقع العناصر أو إنشاء خلفيات للصفحات وأشكال غنية بالألوان.

بالرغم من أن يمكنك استخدام جدول HTML لإنشاء ترتيب جذاب، لكن الغرض من تصميم الجداول هو عرض البيانات المنظمة - الجداول ليست أدوات ترتيب!

في المثال التالي، يتم استخدام جدول ثلاثة أسطر وثلاثة أعمدة - الأسطر الأول والأخير يستخدم خاصية colspan لتشغيله عبر العمودين:

مثال

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>دليل الأساسيات (oldtoolbag.com)</title>　
</head>
<body>
　
<table width="520" border="0">
<tr>
<td colspan="2" style="background-color:#FFB500;">
<h1>عنوان الصفحة الرئيسية الرئيسي</h1>
</td>
</tr>
　
<tr>
<td style="background-color:#FFB700;width:120px;">
<b>القائمة</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#DDDDDD;height:200px;width:400px;">
المحتوى هنا</td>
</tr>
　
<tr>
<td colspan="2" style="background-color:#FFB500;text-align:center;">
حقوق النشر © دليل الأساسيات (oldtoolbag.com)</td>
</tr>
</table>
　
</body>
</html>

اختبار الرابط ‹/›

تسميات ترتيب HTML - CSS لا غنى عنها

من أكبر الفوائد التي يقدمها CSS هو أنه إذا تم تخزين كود CSS في ملفات النمط الخارجية، فإن الموقع سيكون أكثر سهولة في الصيانة وتعديل مرونة النمط. من خلال تعديل ملفات نماط CSS، يمكنك تغيير ترتيب جميع الصفحات. إذا كنت ترغب في تعلم المزيد عن CSS، يرجى زيارةدليل CSS。

تسميات ترتيب HTML

العلامات	وصف
<div>	تحديد منطقة النص، منطقة مستقلة (block-level)
<span>	تحديد span، لدمج عناصر النصوص في المستند.

عرض فيديو HTML كتل HTML