٠ا ÙÙ Ù ÙÙ HTMØ
ت٠ث٠اÙÙ ÙÙØ§Øª ذات Ø§ÙØ§Ù تداد **. htm ** ÙØºØ© ØªØ±Ù ÙØ² اÙÙØµ Ø§ÙØªØ´Ø¹Ø¨Ù ÙØ¥Ùشاء ØµÙØØ§Øª ÙÙØ¨ ÙÙØ¹Ø±Ø¶ ÙÙ Ù ØªØµÙØØ§Øª اÙÙÙØ¨ ٠ث٠Google Chrome Ù Internet Explorer Ù Firefox ÙØ¹Ø¯Ø¯ آخر. ØªØØ¯Ø¯ Ø§ÙØ¹Ùا٠ات ÙØ¥Ùشاء ØµÙØØ§Øª ثابتة ÙÙØªÙ ÙØ´Ø±Ùا عÙÙ Ø´Ø¨ÙØ© اÙÙÙØ¨ Ø§ÙØ¹Ø§ÙÙ ÙØ© (WWW) ÙÙØªÙ ÙÙ Ø§ÙØ¢Ø®Ø±Ù٠٠٠اÙÙØµÙ٠إÙÙÙØ§. تخبر ÙØ°Ù Ø§ÙØ¹Ùا٠ات اÙÙ ØªØµÙØØ§Øª بÙÙÙÙØ© عرض Ù ØØªÙÙØ§Øª ØµÙØØ© اÙÙÙØ¨. ÙÙ ÙÙ Ø£Ù ØªØØªÙÙ ÙØ°Ù Ø§ÙØµÙØØ§Øª عÙÙ ÙØµ Ø¹Ø§Ø¯Ù ÙØµÙر ÙØ§Ø±ØªØ¨Ø§Ø·Ø§Øª ØªØ´Ø¹Ø¨ÙØ© ÙØµÙØØ§Øª ÙÙ ÙØ§Ø·Ø¹ ÙÙØ¯ÙÙ Ù٠عÙÙ٠ات ÙØ³Ø§Ø¦Ø· أخرÙ. Ø¹ÙØ¯Ù ا ÙØªÙ ÙØ´Ø± ØµÙØØ© ÙÙØ¨ Ø ÙÙ ÙÙ٠إÙÙØ§Ø¡ ÙØ¸Ø±Ø© عÙ٠ر٠ز Ø§ÙØªØ±Ù ÙØ² اÙÙ ÙØ¬Ùد Ø®ÙÙÙØ§ Ù Ù Ø®ÙØ§Ù عرض ٠صدر Ø§ÙØµÙØØ© Ø§ÙØ®Ø§Øµ Ø¨ÙØ§. ØªØ³Ù Ø Ø§ÙÙ ØªØµÙØØ§Øª Ø§ÙØØ¯ÙØ«Ø© Ø¨ÙØØµ ÙÙ ÙØ³Ù Ù Ù ØµÙØØ© اÙÙÙØ¨ ØÙØ« ÙØªÙ ÙØ¶Ø¹ ÙÙ ÙØ³Ù ÙØ±Ø¹Ù Ø£Ù Ø¹ÙØµØ± ØªØ±Ù ÙØ² Ù٠٠صدر HTM.
ØªØ§Ø±ÙØ® Ù ÙØ¬Ø² ÙÙ HTM
Ù ÙØ° Ø¥ÙØ´Ø§Ø¦Ùا ÙØ¯ÙØ±ÙØ§ Ø§ÙØ£ÙÙ Ø ØªÙ Ø§ÙØÙØ§Ø¸ عÙÙ Ù ÙØ§ØµÙات HTML Ù Ù ÙØ¨Ù Ø§ØªØØ§Ø¯ Ø´Ø¨ÙØ© اÙÙÙØ¨ Ø§ÙØ¹Ø§ÙÙ ÙØ© (W3C) Ù ÙØ° عا٠1996. Ù٠عا٠2000 Ø Ø£ØµØ¨ØØª Ø£ÙØ¶Ùا Ù Ø¹ÙØ§Ø±Ùا دÙÙÙÙØ§ (ISO / IEC 15445: 2000). Ù٠عا٠1999 Ø ØªÙ ÙØ´Ø± HTML 4.01. Ù٠عا٠2004 Ø Ø¨Ø¯Ø£Øª Ù Ø¬Ù ÙØ¹Ø© ع٠٠Web Hypertext Application Technology (WHATWG) Ø§ÙØ¹Ù ٠عÙ٠إصدار HTML5 Ø§ÙØ°Ù Ø£ØµØ¨Ø ØªØ³ÙÙ٠ا٠٠شترÙÙØ§ ٠ع W3C Ù٠عا٠2008. ÙØªÙ Ø§ÙØ§ÙØªÙØ§Ø¡ Ù ÙÙ ÙØªÙØÙد٠ÙÙ 28 Ø£ÙØªÙبر 2014.
ØªÙØ³ÙÙ Ù ÙÙ HTML
ÙØªÙÙÙ Ù Ø³ØªÙØ¯ HTML 4 Ù Ù Ø«ÙØ§Ø«Ø© أجزاء:
- سطر ÙØØªÙ٠عÙ٠٠عÙÙ٠ات إصدار HTML
- ÙØ³Ù رأس ØªØµØ±ÙØÙ
- Ø¬Ø³Ù ÙØØªÙ٠عÙ٠اÙÙ ØØªÙ٠اÙÙØ¹ÙÙ ÙÙÙ Ø³ØªÙØ¯. ÙÙ Ù٠تÙÙÙØ° Ø§ÙØ¬Ø³Ù Ø¨ÙØ§Ø³Ø·Ø© Ø¹ÙØµØ± BODY Ø£Ù Ø¹ÙØµØ± FRAMESET ÙØ§ØØªÙاء Ø§ÙØ¬Ø³Ù Ù٠إطارات
ÙÙ Ù٠أ٠ÙÙÙÙ ÙÙ ÙØ³Ù Ù٠اÙÙ ÙØ¯Ù Ø© Ø£Ù Ù ØªØ¨ÙØ¹Ùا Ø¨Ù Ø³Ø§ÙØ§Øª Ø¨ÙØ¶Ø§Ø¡ ÙØ£Ø³Ø·Ø± Ø¬Ø¯ÙØ¯Ø© ÙØ¹Ùا٠ات تبÙÙØ¨ ÙØªØ¹ÙÙÙØ§Øª. ٠ثا٠عÙÙ Ù Ø³ØªÙØ¯ HTML Ø¨Ø³ÙØ· Ù٠ا ÙÙ Ù ÙØ¶Ø Ø£Ø¯ÙØ§Ù:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Understanding HTML File Format</TITLE>
</HEAD>
<BODY>
<P>Hello World!
</BODY>
</HTML>
٠عÙÙ٠ات Ø§ÙØ¥ØµØ¯Ø§Ø±
Ø§ÙØ³Ø·Ø± Ø§ÙØ£Ù٠٠٠اÙÙÙØ¯ Ø Ø ÙØ³Ù Ù Ø¥Ø¹ÙØ§Ù ÙÙØ¹ اÙÙ Ø³ØªÙØ¯ ÙÙØ®Ø¨Ø± اÙÙ ØªØµÙØ بإصدار HTML Ø§ÙØ°Ù ت٠ت ÙØªØ§Ø¨Ø© Ø§ÙØµÙØØ© بÙ. Ø§Ø¹ØªÙ Ø§Ø¯ÙØ§ عÙ٠إصدار HTML Ø ÙÙØ§Ù عدد Ù Ù ØªØµØ±ÙØØ§Øª ÙÙØ¹ اÙÙ Ø³ØªÙØ¯ اÙ٠ختÙÙØ© Ø§ÙØªÙ تس٠٠تعرÙÙ ÙÙØ¹ اÙÙ Ø³ØªÙØ¯ (DTD) اÙ٠ستخد٠ÙÙÙ Ø³ØªÙØ¯. ÙØ®ØªÙÙ ÙÙ DTD Ø¹Ù Ø§ÙØ¢Ø®Ø± ÙÙ Ø§ÙØ¹Ùاصر Ø§ÙØªÙ ÙØ¯Ø¹Ù ÙØ§ ÙÙØ®ØªÙ٠عÙ٠اÙÙØÙ Ø§ÙØªØ§ÙÙ:
- HTML 4.01 صار٠- ÙØ´Ù Ù Ø¬Ù ÙØ¹ Ø§ÙØ¹Ùاصر ÙØ§Ùس٠ات Ø§ÙØªÙ ÙÙ ÙØªÙ Ø¥Ù٠اÙÙØ§ Ø£Ù ÙØ§ ØªØ¸ÙØ± ÙÙ Ù Ø³ØªÙØ¯Ø§Øª Ù Ø¬Ù ÙØ¹Ø© Ø§ÙØ¥Ø·Ø§Ø±Ø§Øª
- HTML 4.01 Transitional - ÙØªØ¶Ù Ù ÙÙ Ø´ÙØ¡ ÙÙ DTD Ø§ÙØµØ§Ø±Ù Ø¨Ø§ÙØ¥Ø¶Ø§ÙØ© Ø¥ÙÙ Ø§ÙØ¹Ùاصر ÙØ§Ùس٠ات اÙÙ ÙÙ ÙØ© (Ù Ø¹Ø¸Ù ÙØ§ ÙØªØ¹ÙÙ Ø¨Ø§ÙØ¹Ø±Ø¶ اÙ٠رئÙ
- Ù Ø¬Ù ÙØ¹Ø© إطارات HTML 4.01 - تتض٠٠ÙÙ Ø´ÙØ¡ ÙÙ DTD Ø§ÙØ§ÙØªÙØ§ÙÙ Ø¨Ø§ÙØ¥Ø¶Ø§ÙØ© Ø¥ÙÙ Ø§ÙØ¥Ø·Ø§Ø±Ø§Øª
باÙÙØ³Ø¨Ø© Ø¥ÙÙ ** HTML5 ** Ø ØªÙÙ٠٠عÙÙ٠ات Ø§ÙØ¥ØµØ¯Ø§Ø± Ù٠ا Ù٠٠ذÙÙØ± Ø£Ø¯ÙØ§Ù.
<!DOCTYPE html>
٠عÙÙ٠ات Ø§ÙØ±Ø£Ø³
ÙÙ ÙÙ Ø£Ù ÙØªØ¶Ù ٠رأس Ù Ø³ØªÙØ¯ HTML Ø¹Ø¯Ø¯ÙØ§ Ù Ù Ø¹ÙØ§ØµØ± HTML Ø§ÙØªÙ ÙØ§ ÙØªÙ ØªÙØ¯ÙÙ ÙØ§ Ø¨ÙØ§Ø³Ø·Ø© اÙ٠ستعرض. ÙØ°Ù Ø§ÙØ¹Ùاصر Ù٠إ٠ا Ø¨ÙØ§Ùات ÙØµÙÙØ© تص٠٠عÙÙ٠ات ØÙÙ Ø§ÙØµÙØØ© Ø£Ù ØªØªØ¶Ù Ù Ø£ÙØ³Ø§Ù ÙØ§ ØªÙØ³ØªØ®Ø¯Ù ÙØ¬Ùب اÙ٠عÙÙ٠ات ٠٠٠صادر Ø®Ø§Ø±Ø¬ÙØ© Ù Ø«Ù Ø£ÙØ±Ø§Ù Ø£Ù٠اط CSS Ø£Ù Ù ÙÙØ§Øª JavaScript. ÙØªÙ ت٠ثÙ٠رأس Ø§ÙØµÙØØ© ب٠<head> Ø¹ÙØ§Ù Ø© ÙØªÙتÙ٠ب٠</head> Ø¨Ø·Ø§ÙØ© شعار.
٠عÙÙ٠ات Ø§ÙØ¬Ø³Ù
ÙØ°Ø§ Ù٠اÙÙØ³Ù Ø§ÙØ±Ø¦Ùس٠Ù٠اÙÙ ÙÙ Ø§ÙØ°Ù ÙØØªÙ٠عÙÙ Ø¬Ù ÙØ¹ Ù ØØªÙÙØ§Øª اÙÙ ÙÙ Ø§ÙØªÙ ØªØ¹Ø±Ø¶ÙØ§ اÙÙ ØªØµÙØØ§Øª. ÙÙ ÙÙ Ø£Ù ÙØØªÙÙ ÙØµ Html عÙÙ Ø¹ÙØ§Ù ات ÙÙ ÙÙ Ø£Ù ØªØ´ÙØ± Ø¥ÙÙ Ø§ÙØ¹Ø¯Ùد ٠٠اÙÙØªÙ Ø§ÙØ¥ÙØ´Ø§Ø¦ÙØ© ÙÙ Ø´ÙÙ Ø¹ÙØ§Ù ات. ÙÙ ÙÙ Ø£Ù ØªØØªÙ٠عÙ٠عدة Ø£ÙÙØ§Ø¹ ٠ختÙÙØ© ٠٠اÙ٠عÙÙ٠ات ٠ث٠اÙÙØµÙص ÙØ§ÙØµÙØ± ÙØ§ÙØ£ÙÙØ§Ù ÙØ§ÙرسÙ٠ات Ù٠ا Ø¥Ù٠ذÙÙ. Ø¨Ø§ÙØ¥Ø¶Ø§ÙØ© Ø¥Ù٠ذÙÙ Ø ÙÙ ÙÙ Ø£ÙØ¶Ùا تض٠ÙÙ Ø¹ÙØ§ØµØ± Ø§ÙØµÙت ÙØ§ÙÙÙØ¯ÙÙ ÙÙ ÙØµ html ÙØ¹Ø±Ø¶Ùا Ø¨ÙØ§Ø³Ø·Ø© اÙÙ ØªØµÙØØ§Øª. ÙÙ Ø¸Ù ÙØ¬Ùد تطبÙÙ Ø£ÙØ±Ø§Ù Ø§ÙØ£Ù٠اط Ø§ÙØØ¯ÙØ«Ø© ÙÙØªÙ Ø«Ù٠اÙÙ Ø±Ø¦Ù Ø ØªÙ Ø¥Ù٠ا٠س٠ات عرض BODY ٠ث٠ÙÙÙ Ø§ÙØ®ÙÙÙØ© ÙÙÙÙ Ø§ÙØ±Ø§Ø¨Ø· ÙÙÙ٠اÙÙØµ Ù٠ا Ø¥Ù٠ذÙÙ. ÙØ¨Ø§ÙتاÙÙ Ø ÙÙ Ù٠تØÙÙÙ ÙÙØ³ Ø§ÙØªØ£Ø«Ùرات Ø¨Ø§Ø³ØªØ®Ø¯Ø§Ù Ø£ÙØ±Ø§Ù Ø§ÙØ£Ù٠اط Ù٠ا ÙÙ Ù ÙØ¶Ø Ø£Ø¯ÙØ§Ù:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Inline Style Sheets referencing</TITLE>
<STYLE type#"text/css">
BODY { background: white; color: black}
A:link { color: red }
A:visited { color: maroon }
A:active { color: fuchsia }
</STYLE>
</HEAD>
<BODY>
... document body...
</BODY>
</HTML>
Ù Ù Ø§ÙØ³Ù٠تض٠ÙÙ Ø£ÙØ±Ø§Ù Ø§ÙØ£Ù٠اط اÙÙ Ø¶Ù ÙØ© ÙÙÙØªØ·Ø¨ÙÙØ§Øª Ø§ÙØ³Ø±Ùعة ÙÙØªØ£Ø«Ùرات اÙÙ Ø±Ø¦ÙØ© Ø ÙØ¥Ù Ø£ÙØ±Ø§Ù Ø§ÙØ£Ù٠اط Ø§ÙØ®Ø§Ø±Ø¬ÙØ© تجعÙÙØ§ Ø£ÙØ«Ø± Ù ÙØ§Ø¡Ù Ø© ÙÙÙØ´Ø± ٠رة ÙØ§ØØ¯Ø© ÙØ§ÙÙØµÙ٠إÙÙÙØ§ ÙÙ Ø§ÙØ¹Ø¯Ùد Ù Ù Ø§ÙØ£Ù اÙÙ.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Linking to External style sheets</TITLE>
<LINK rel#"stylesheet" type#"text/css" href#"smartstyle.css">
</HEAD>
<BODY>
... document body...
</BODY>
</HTML>
Ø¹ÙØ§ØµØ± HTML
Ù٠ا Ø°ÙØ±Ùا سابÙÙØ§ Ø ÙØªÙ ت٠ثÙ٠اÙÙ ØØªÙÙØ§Øª داخ٠HTML Body Ø¨Ø¹ÙØ§Ù ات Ø ØªÙØ¹Ø±Ù Ø£ÙØ¶Ùا Ø¨Ø§Ø³Ù Ø¹ÙØ§ØµØ± Html. ÙÙ ÙÙ Ø£Ù ØªØØªÙÙ ÙÙ Ø¹ÙØ§Ù Ø© عÙ٠٠عÙÙ٠ات إضاÙÙØ© ÙÙ Ø´Ù٠س٠ات Ù ÙØªÙبة Ø¨ØªÙØ³ÙÙ
<tag attribute1#"value1" attribute2#"value2">
عÙÙ Ø§ÙØ±ØºÙ ٠٠أÙÙ ÙÙØ³ Ù Ù Ø§ÙØ¶Ø±Ùر٠أ٠ÙÙÙÙ ÙØ¯Ù٠س٠ات ٠ع ÙÙ Ø¹ÙØ§Ù Ø©. إذا ÙÙ ÙØªÙ Ø°ÙØ± Ø§ÙØ³Ù ات Ø ÙØªÙ استخدا٠اÙÙÙÙ Ø§ÙØ§ÙØªØ±Ø§Ø¶ÙØ© ÙÙ ÙÙ ØØ§ÙØ©. ÙÙ٠ا ÙÙ٠بعض Ø£Ù Ø«ÙØ© Ø§ÙØ¹Ùصر:
Ø§ÙØ¹ÙÙØ§Ù
<head>
<title>The Title</title>
</head>
Ø§ÙØ¹ÙاÙÙÙ
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
اÙÙÙØ±Ø§Øª
<p>Paragraph 1</p> <p>Paragraph 2</p>