English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

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

وسائط HTML

دليل مرجعي لHTML

دروس أساسية لHTML5

API HTML5

وسائط HTML5

قائمة التحقق السريعة HTML

قائمة مرجعية سريعة لHTML. يمكنك توفيرها محليًا أو طباعتها، مما يسهل التذكر الاستخدام اليومي.

مستند HTML أساسي

<!DOCTYPE html>
<html>
<head>
<title>عنوان الوثيقة</title>
</head>
<body>
نص مرئي...
</body>
</html>

العلامات الأساسية (Basic Tags)

<h1> العنوان الأكبر </h1>
<h2> ... </h2>
<h3> ... </h3>
<h4> ... </h4>
<h5> ... </h5>
<h6> العنوان الأصغر </h6>
 
<p> هذا هو فقرة. </p>
<br> فقرة جديدة (New Line)
<hr> خط أفقي (Horizontal Line)
<!-- هذا هو التعليق -->

تنسيق النص (Formatting)

<b> نص سميك </b>
<code> شفرة الحاسوب </code>
<em> نص مبرز </em>
<i> نص مائل </i>
<kbd> إدخال لوحة المفاتيح </kbd> 
<pre> نص مسبق الت formato </pre>
<small> نص أصغر </small>
<strong> نص مهم </strong>
 
<abbr> اختصار </abbr>
<address> معلومات الاتصال </address>
<bdo> اتجاه النص </bdo>
<blockquote> نص الاستشهاد من مصدر آخر </blockquote>
<cite> اسم العمل </cite>
<del> نص الحذف </del>
<ins> نص الإدراج </ins>
<sub> نص التأسيس </sub>
<sup> نص الرفع </sup>

الروابط (الروابط)

الروابط العادية: <a href="http://www.example.com/">نص الروابط</a>
رابط الصورة: <a href="http://www.example.com/"><img src="URL" alt="نص الاستبدال"></a>
رابط البريد الإلكتروني: <a href="mailto:[email protected]">إرسال بريد إلكتروني</a>
البوكنش:
<a id="tips">جزء الإرشادات</a>
<a href="#tips">الانتقال إلى جزء الإرشادات</a>

الصور (الصور)

<img src="URL" alt="替换文本" height="42" width="42">

النمط/الأقسام (Styles/Sections)

<style type="text/css">
h1 {color:yellow;}
div{background:#f9f9f9;}
p {color:green;}
</style>
<h1>عنوان الصفحة H1</h1>
<div>عناصر الدокумент الكبيرة</div>
<p>عناصر الدокумент المدمجة</p>

القائمة غير المرتبة

<ul>
    <li>العنصر</li>
    <li>العنصر</li>
</ul>

القائمة المرتبة

<ol>
    <li>النقطة الأولى</li>
    <li>النقطة الثانية</li>
</ol>

قائمة التعريفات

<dl>
  <dt>العنصر 1</dt>
    <dd>وصف العنصر 1</dd>
  <dt>العنصر 2</dt>
    <dd>وصف العنصر 2</dd>
</dl>

الجدول (Tables)

<table border="1">
  <tr>
    <th>عنوان الجدول</th>
    <th>عنوان الجدول</th>
  </tr>
  <tr>
    <td>بيانات الجدول</td>
    <td>بيانات الجدول</td>
  </tr>
</table>

النصائح (Iframe)

<iframe src="demo_iframe.htm"></iframe>

نموذج (Forms)

<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="إرسال">
<input type="reset">
<input type="hidden">
<select>
<option>أساسيات javascript</option>
<option selected="selected">أساسيات html</option>
<option>أساسيات css</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
 
</form>

كائنات الحروف (Entities)

< متساوية لـ <
> متساوية لـ >
© متساوية لـ ©