Learn Html5 and Css3 (Arabic)

7/29/2019 Learn Html5 and Css3 (Arabic)

http://slidepdf.com/reader/full/learn-html5-and-css3-arabic 1/180



: ـ اؼ مـ ادع

در دازز اراـ



مHTML5 & CSS3

(واراخطوة او و)

د ر سدنا





اوؽ وظ مؤؼ





اداء

...م ؼ امبإ أم نمف

ظ ال. يداو





وه

اكب ف رت مو كنت قد دتـفار اوذا زـا وط هرادإوكر بك ؿوو ذؾذوذو أـ ( jQuery

)قدفكلاتقأد ظما اظروؼ ا ذؾ ذه

ق ؿ كذا ءؿ رور فأ فؤأ ن و إ م ر فر و ءناأنره-د ك-د رأاوقت )كؿ نمأف نوركا بكا PDF)

أكر ف ك ذه اطر. ب نره ذه ا ط ارف ن كف أد اد ؿ

//اوكؿ





ن دي اب

ـ ا ف ا لا ـا و ةا و آ م و نن م ـأ أو

د: د اػ ر م دـ امو كؿ نWeb ـ وـاـد ـا ف أ ث كوف إ اكؿ و أمواوى برقأ ؾذك و ر ؿأ دف

اػ-رأ-اندر قاو د ن-اوـWebأف ادة قاوا نأ دـ-و ف نواروامدياموت كؿ وع و ر إ إ اكؿ فذا أ

اناػا روط د ىرWebػػ ؼر رظنا ءد وـك اذWeb 2.0ـو ذا أدى ن إ ظور تنك ا را تما و تاودا روط ا

قرة ف ؽ طمت اءWebف دي طوري و واق اػ و ا أت ر بو قاو ؾ فوطاا و نا رأ ف ـق فرروطـد و

إدارات ددة ن أقوى و أكر قم Webواف ؾذ " حنا سأ ر ـمقا."Webـ اػ

كا اوCSSوHTMLأدث إدار كؿ نقش ذا امف راف اطوة يطر وWebإر وـHTML5حر ؿ ف ؾذ دا دHTMLدما

ف ار ـ فXHTMLأ را فك ر بكا دـ ذاCSS3حر ؿ ف ؾذ دا دCSSدماأ را فبكا اذ ف اذ و :مؼ

-HTML5ؿا نقش ذا :( اس فوادار انادث( را اHTMLك م قدر كوف أف ر ف و دج و ؿ كؿ

رده ذف ال. ت وب وى اذي ر و كؿ اذي



-CSS3 نقش ذا :( ادار اث د ا ازا ؿك ؿوف ادث( نا طنا ؽاروأCSS و ط ؿكوم ردق فوك فأ رق و د

ؿ.ت اواوى اذي قد ؿ وا ؿا ك ـ ا

موك كؿ ادث ف- راا ؼرط فClient Sideفأ ب فكو كف و نن ف أنر اداJava Scriptدث ف كوف نؾ ؿ

)وا ك(و راءة ازز ارئ ن را نت مؽ "ـ jQueryقد" ف ثد ر يأ وأ jQueryط و او ؿك

وأ بكا اذ ةءارق دف jQueryم يرا .رأ Java Scriptادؿ

بكا ف طر رض اكر ذا أأ ك تدا و تو د و اكب ا نقش ت ارن ن وى اب اذي كردة و ر رات اطر ارذا اكو كنن أف أقوؿ أفؼ د وا ر

ةركا ضر بومطا ف ركأ ؿط أ ك و فود رق و ةداونك

وؿ ب قو ط دوف أف ؿ أي نب ف اوانب ا وب ر.ر

و ؿا اذ ؿ فأ لا ؿأفأك و ؾرقدرفبن يذا ـما و أف مـ قر اـ و اظ و ار م اـ.

د ر.ـ

//اوكؿ



فصؿ ل ا وا

HTML 5





د

ؿا HTML5نقش ذا ن و بوا قاو ا ر ر اس إنء ف

ندث

أف

كف

HTML5

اؿ

ذا

نقش

رة

HTML

وXHTML

وأ

و اداHTML.

HTML

فإHTMLا abbreviationما ف وا ؼوراHyper Text Markup

Languageؼو ( ر ر ر ن ا ووا ت) ت و و ؿ رMarkup LanguageفHTMLـدف و

وـواTagsووا .

وـوا أTags ةدد ؼرأ و كوف Keywordsكمت أو ن ؿ

اكؿ

ف

قوف

ف

ورة< >

ؿ<b>

و<html>

كؿ

م

اب

وـوا

ؿ<</bو<<bأزواج ؿ وا ـوا د <b>ادا ـوBegin Tagا أو وـOpening Tagا ـوا د و ن</b>نا ـوEnd Tagا وـ أوClosing Tag.

ندات ك )ؿHTMLـ أي رر ن ط دـnotepadداـ أو )ؿ(DreamWaver وأVisual Studioدادا ؿ تم نز ـ و )extensionف

: .نرأوط.htmأو.htmlادادف اف

مق دأ ـق فإ ؼرأ .بنا را نأ رأ ن ر ذه اطر ك



و ف ووـكؿ أ ف وى ن دي إHTMLنداتكوفHTMLتادن ف ا وHTML)بوا ت(ػ دWeb Pages رض اوباداـ ارن ـ اندات رؼ ذا ذه Webرن ص راءة

Browser مأ ف وInternet Explorer وFirefoxوGoogle chrome..إ.

نHTMLادؼ ف رض اوب و قراءة ندات بو ت ؿك ر و وـو ضر بوا ضر فأHTMLجن د ك و ر ؿك صونك

.HTMLوف ند وب كؿ و اوى او

أدأ فمتاد HTML

أد ك ؿكـمتادن كHTMLؿ( وNotepadو رر نوص ))ؿ د ذؾ كنؾ قراءة ارات ا و امـ طوة( Internet Explorerرض وب

رط ؿأ فأ ؾ دكؤأ و ةوطمم –أر-د ا ما ك ؿك

ار داـ رض اوب.ر ـ ف و صونا رر ـاد

ل وا لاHTML

ؿوأ ك فا وـنHTML:ا تاوطا ع

وـنوأةركا كف

و انوص

ررات

أد

Notepad

نكب و اؿ

ؿ

م :ا ةرا

<html>

<head>

<title>

My first HTML page



</title>

</head>

<body>

<p> Welcome to my first HTML page!

</p>

</body>

</html>

ظ امؼ ـ وـن ـ firstPage.html

شرة:اشل ر ارة و ظ ا HTMLأول

ا ف م ؼما ظ : ظوم.txtفرط ؾنتما را رن فأ وااورة أؿ اـ امؼ ـ نSave as typeف ا اند ظ كػ*.* ةرظاو ؼما ـا ب

يد ؿك فأ م أ ا و نا أ ف ومطا ؼما ـا ن

أزدواقس

اورة

و

و

ك

ظ

نر

و.

ه



ـاف امؼ ظ نق أف أدfirstPage.htmlد داـ ار وـن كفاورت انInternet Explorer 8و اكؿ ند اؿ ؿ م

:مك م

ل و خدام اراشل ائ:2اشل HTML

ـاد وا ن ك نق د ىر كHTMLصن م يو ا هذ وـ ود ذا انص داـWelcome to my first HTML page!رب ط و انص

اص ـواpا فوك ط م ا هذ ف يرو و إ ؿودم اوا بHTML

إف.اركز

ف

مؿ

ا

ارات

قرأت

HTMLر

ت ف كؿ انرHTMLكوف ف و إنؤElementsف ـ وـوا ـادTagsوـوا و نمق كؼرأ ؿ ن و كمرة ف

ا ضر نزمنإ تمك تارا ف رة وـوا ءأ فوك و بو ـو<p>صونا ط ضر ف ؿوؤا رنا ءن ـد Paragraphs

مـاذيوHTMLف ت قنؿ م ؿك وـوا قا تا.

اكؿ

ف

أقواس

ف

وـوا

ر< >

ـوا

مأ

ف

و<html>

ـوا

و<head>

و ـوا<title>ـوا و<body>ـوا و<p>.



ووـEnd Tagو وـ نBegin Tagوـ داHTMLكؿ نر ف نر كوف ان كوف ورة< >ادا ورة ف اوف وـو أ فا فوا ف

رز اط اؿ إ/ػ ؼوراSlashؿك</ >ـوا نا وـو مأ ف و

</html>ـوا و</head>ـوا و</title>ـوا و</body>ـوا و</p>ؿك يو و رHTMLنر ف نر د ن ن و اد و فرنا ؿ ك(p

اؽ( ن رن ف رآ كف أف وي أي دد ربHTMLو رط ازاـارب ـ ك وـنظر ار ان ب أف وـو ك دن ادا و نا وـو

ا )ن ـو س يذا( نا ر ادا ـو صا نافأ ف برق برق: ر ا برا

<html>

<body>

<p>

!

ازشع

ػش

ز١

ب

</p>

</body>

</html>

ؿ وا نا ـو ف</p>و و ن ر اد ـو برقأ ءن ء<p>ـ ن

نا ـو ء</body>و و ن ر اد ـو برقأ ءن<body>ـو ء ـ

نا</html>و و ن ر اد ـو برقأ ءن<html>.

: ط ر ا برا ف

<html>

<body>



<p>

ازشع! ػش ز١ ب

</body>

</html>

</p> نا ـو ف</body>ـوا ءن ء<body>نا ر برقا ـوا فك ـ يذا

نا و تررك ن ا و ؼ</html>و</p>.

ا ربكنس: اؽ.وـ اؽ و راع وـو

White Spacesاراغت

HTMLؿ( ند اراضTabو Spaceود أي ق رؼ ارات إخ( .. رض واوات داـ رؼ ارات رض رب ارة دـ إ و

راءة رة ط وأ ؿك ةءور مHTML:ؿا ؿ م ا<html>

<body>

<h1>

Hi!

</h1>

</body>

</html>

اHTML:أؿ كر ف قراءة رة

<html><body><h1>Hi!</h1></body></html>



أ م.بوا ضر ـاد ارا دن

ط راد فم ن و اد و ف دووا ىوا ؿك ازإ ةدا را تادا ف : دةTabار ث راد ازإ ؿ ضا وح م تط ث(Space).

HTMLاشل ام ر

نرض اكؿ اـ نرHTMLنرـ وؼ م و وـوا :HTMLداـ

رن أدHTMLادا ـوBegin Tag.

رن نHTMLنا ـوEnd Tag.رن ىو د نا و ادا و ف ك ـ ؿكHTMLؾن فأ م

.و ا د او وي أي واض انر

دنونا و ادااو ـو .ىوا د رنارن بم صا ف و رر طرؽHTMLـ ادا ف وـ

. Attributesاوات

:ظوم و أد اد ـقرن كHTMLةرا زمنا ؼرLower Case.

:ا ما دن

ا موا ىوادا مو </p>Welcome to my website.<p>

</a>Go to index<a href="index.htm"> <hr />

طر كؿ اؿ ادوؿ رن ف اHTMLنر م كؿ

ـو

دأ

ؿ وا

نر<p>

ـو

ن

و</p>

انوو

اوىWelcome to



my websiteـو نا رنا أد ن<a href="index.htm">ـو ن و</a>

href إ وا index.htmإند اGo to indexاوى انوو

انر اث دـ فأ فداو وـ نا و ادا و اوى كوف ف اد

.</ <hrكؿ

HTMLاشل ام ت

ؿك فوكHTML:ؽطن ث ف

ا د طنBody Section: و ف انط ا</body>و<<bodyو انط اورة و ذه

م رظا ىوا ؿ ا رنا ـ و م نا ؿكا ن و طاوو اذي ظر رض ا اراض ذه ازءند ف

كوف ذه انطHTML.اكر ف نر ا سأر طنHead Section:

و ف اورة طنا و<</headو<<headو طنا ذه و نر ف وHTMLضارا ند اوب رض ظر مأ

ار ذها و كف ا طناىوا ف توم ءطإ د ا و ارى اظرة ر اموت ض إ اوود

ركت اث ف أؿ ار و اث اب.ا طنا:

ورطا ةركا ط دا و إ و أرق ا ارا ف يأ مطا اذ در ـ)أر(.



و ف ةروا طنا و<html>و</html>طنا طنا هذ و ا اذ و دا و سأرا طن ـ ا و ا ن و اد دد

)( .HTMLـ كؿ ند

كمHTML:و ذا كوف اكؿ اـ ي ند

<html>

<head>

ب ى١ ابش اشأط ١ش مخ ز

</head>

<body>

با اظخ زا ب ى١ ١

</body>

</html>

Attributesوات اووم

ف قمنه كؿ فHTMLمص و إنء اوى ر دـ ؾ كؿ نر ف نر رناHTMLؾن ؾ د دد رض ء

ارواط رض نر نؾ و اور رض نر نؾ و انوص رض نر

اLinksوـو انر واط وـ ص ف ـ إنء كؿ نر ف ذه خإ ..HTML رظا رنا ىو فار ن ـو و اد ـو رن ؿك فوك و .ن

ادا و ف اص ا و ا ص موؾ رض وـو ض دوز فكانظر مرة ا م ؿ Attributesانر واه و ـ ذا ر رؼ وات

:

اؿ



<p align="center">

ظا ظش شع ظا زا

</p>

أ وpقن ء دد ذه ارة إ وـ ادا اص نرك ظ د اوا وalignرنا ر يذا صنا ةاذ دد اpا نطأ وcenter

:مك صنا رظ ارا دن و ا ؼن صنا ضر

ر رض او3اشل :<p>اذا او إ دalign

وـو ف اد ـو ؿك دو ف اواتHTMLن م ور و Attributesو او اوا إ دنإ ـ فأ فك ا ـا ف م ور و او ؿك دو

alignادا ـو م ورا تاوا ىدإ <p>فك ا ـا و ؿا ؿ م إ دن فأleftوأ را إ صنا ةاذrightوأ فا إ صنا ةاذcenter

و ـ ط رض وات كؿ وـ ؿ ند ادث ن و طوا إ صنا ةاذو اـnameث أفname="value"ظف أن دا موؿ أف اكؿ اـ موا وأ

دة مؾ اوا و ا ب أف و ف اقسvalueاوا و ا ا .‘ ‘أو اقس ردف""زدوف

وات

و

وـو

ك

ـ

أف

ب:

ظومHTML

رة

إنمز

روؼLower Case.



دث ف نر اف أف ندأ طن نأ فظأHTML ادا ؿ و و كنرض دو و ف اوات اركHeadingsانونر و كف قؿ ذؾ

وـو ن د ف كرار كؿ وـ ف مؾ HTMLف أمب وـو:ؿودا م

اوا ماا مارشا

id)ررك رد)ر اـ اين مند

ر رنا ؿم اـ ذا اداـ ـ jQueryأوJava Scriptداـ و

ادا أرى رضت رةأدـ مادا طاورا

dir ltr

rtl

ةءارا اه ف ltrدد اراءة ن أف اه أ فا إ راrtlف ةءارا ها فأ ن

اف إ ارalignleft

right

center justify

دد ذاة انص

class ـا يأCSSـ و انر إ ا ص ك نCSS3اص ػنق ذا ؿ اؿ

nameر ـا يأ ر رنا ز ـددول اوات اشر ن أغب رادول :HTML



Headingsر اون

روHTML:برا م و فونا ضر رن h1وh2وh3 وh4وh5

وh6

انر فأ ث

h1

انر و

ركأ

و

h6

درج ن

و ار

و رؼ اػ ط و ـا hمك را نHeadingم ا نرب ارة ند

ؿ اؿ:

<html> <head>

<title>

٠با بش خ ازجبس

</title>

</head>

<body dir='rtl'>

<h1> ل ا يرضنا اى ى </h1>

<h2> ونا يرضنا اى ى </h2>

<h3> ننا يرضنا اى ى </h3>

<h4> اناتى ىا انضري </h4>

<h5> شنا يرضنا اى ى </h5>

<h6> سضنا يرضنا اى ى </h6>

</body>

</html>

:ا نا دن بوا ضر ا ا ضارا دن



h6إ h1اخر ر او4:اشل

ـوا دوز نق د ظ ك<body>اوdir و دنا د ةءارق ها دد ا و ا دن نقrtlو ؿن ؾذرا إ فا ف ةءارا هاright to left و و

أ ط ـ اوا ذه أف ؿ و ط را ما انب ف ق اراltr .فا إ را ف ارا ةءارا ها فأ يأ

ادـ :ظومفونا رن<h1>إ<h6>ؿأ فد و ط تارا فونصنا ؿ ر.فرا فذ وـو أو كر اـ نؾ

ا طخا رHorizontal Line

ـدHTMLصا ـوا<hr />:ا ؿم رظنا ا ا طوطا ءن

<html> <head>



<title>

ما اؾ ظش خ ازجبس

</title>

</head>

<body dir='rtl'>

<p>ؾم خثشز ا امشح ز </p>

<hr />

<p>ؾم خثشز اب١خ امشح ز </p>

<hr /> <p>ؾم خثشز ابخ امشح ز </p>

</body>

</html> :مك بوا ضر ا ةرا ود

</ <hrر ار:5اشل



Commentsات

فورا دا و رطأ ك م دما را تر نأ ذإ

ارة ف

زء

رة

د

مد

ود

دن

ارة

زاء

را

ذكر

ط

دـ

إ

اطر رؼ مت و و ذه فزا و أفCommentsف HTMLك و

دـ ا ا ا كقمت تادنا ف تما ك آ رو نأ إ امؽ:



:HTMLند اؿ ا م اداـ امت ف ند

<html> <head>

<title> ب١إ بؼ ما اؾ ظش خ ازجبس اجش١خ از١مبد </title>

</head>

<body dir='rtl'> 

<p>ؾم خثشز ا امشح ز </p> <hr /> انض انرن نهج انوح --!> -->

<p>ؾم خثشز اب١خ امشح ز </p> <hr />

انض انرن نهج اننح --!> --> <p>ؾم خثشز ابخ امشح ز </p>

</body>

</html>



مك ا ةرا ودظ تما فأ دكؤ بوا ضر ءنأ ر اند):(""View->sourceأو"اد>-ر"اراض ا ب ار ار

ات ظر ون اخر ذة رض ادر و ظر ا6اشل :

ب د اوس اوؿ دا وـ امؽ. ا ةرإ نس :ظوم

Paragraphsر اوص

ـ إنء ذه با نا تارا ف و ف قاوا بوا فوكارا ـوا ـاد<p>ـوا ـد و ا ما ادا ن ر يذا و<br />

تارا ؼر ف ؾذ و ا رطا إ ؿوزنمؼرحاEnter س قHTML. نركذ ك

Text Formattingر ق اوص

روHTMLر صنا ؿم صونا ؽن رنا ف وBoldرو انر<<bانر ؿ انص (<strong>أو و )Italicرنا رو<i>وأ(



و و ط أؿ انص ور انر<<emانر )<u>صنا بط و Deleteروند ارة ا م ؿ اؿ:<<delانر

<html> <head>

<title>ظا ر١ك بش <</titleخ ازجبس

</head>

<body>

<p>

This is a sample text to demonstrate

<b>bold</b> ,

<i>italic</i> ,

<u>underline</u> and

<del>delete</del> tags.



<br/>

You may use other tags to generate the same output:

<br/>

This is a sample text to demonstrate

<strong>bold</strong> ,

<em>italic</em> ,

<u>underline</u> and

<del>delete</del> tags.

</p>

</body>



</html> :مك ضرا هأ ةرا ود

اخر ر ق او7اشل :

وـو ر ركذ ازد ف نر نؽ انوص ـ ط نؾ :ظومHTMLاذ ن اؿ.

خا زورا و فراSpecial Characters

ك ؽرط اروز ا كف ر ا ف كؿ رنؾ ض ارؼ و ارت دا زورا ور و رؼ اراؿ ر وHTML آ

ا ا ا ع ؾذ و زورا valueدؿ ا&value;رض ذه اطموب أارؼ ر اوـ ذهرض ف نذج ا ادوؿ و ارؼ:

:ا طارا عا فك ؿكا ؿودا م ؿومhttp://www.w3schools.com/tags/ref_symbols.asp



XHTMLشرةارز

<<

>>

≠

≠™™

©©

;&nbspرؼ اراعHTMLض ارف اخ2:ادول

:

ا

اؿ

ند<html> <head>

<title>

ابخ ابسف جغ خ ازجبس

</title>

</head>

<body>

<p>

3<

5 and 10>

2 and also 3≠

4 ....

all rights reserved for © Mukhtar ™

</p>

</body>

</html>



:مك ضرا ر دن ود يذا و

ل خدام 8اشل :ا خا فرا ض

Hyper Linksر ارواط

روHTMLطاورا وHyper Linksآ نؿ ف ات ام ر نر م رنا دن ؾمن رو وأ صون ف ةر طاوراإ ا ا ف إ

ارواط رض رت اوب ز وـ ىرأ كؤر مرة ند ارة"د ر"وب طاورا و اػ<<aواط اوــ إنء ارواإ أد aػ را هذ Anchor ـ

ا ـ يذا( رض كوى أ اوق ادؼ نؿ إ ند انرزود نر اراط نص اوم زوده ـ ا ار ػ hrefم اراط( ممنظرHyper Referenceو

:ا ؿم

<html> <head>

<title>

اشاثؾ بش خ ازجبس

</title>

</head>



<body>

<a href="http://www.microsoft.com"> ص </a> <br />

<a href="http://www.google.com"> م </a> <br /> <a href="http://www.msn.com" target="_blank" >MSN</a>

<br />

<a href="firstPage.html" target="_self"> ل لأ </a>

</body>

</html> :مك بوا ضر ارا دن ود يذا

اروا اخر:9اشل

ارواط ا ر إ ض اواق ارة و قد د قن زود ن و ف نر دا ذا اؿ و ن نق يذا ؿوا ؿا ؼم ـا ركذ را طارا تد

مط فوك فأ فك طاورا أو ن Absoluteذؾ و أف )وا ك(Relative



و د ن أف اراط اذكور كوف رة ف ر مؼ ا(Pathكراط ار( نسfirstPage.htmlادؼ ن م ا و ن د كنت ا ادؼ

ا ا دم.

ارواط ـ انؿ إ ارا اراhref اذكور اواURLطند انر م أد ذه او طاورا ض زود نق نأ ركذ ردا ف م رنا نر اراط اذي ـ

targetما م ب و ا دد كف رض ا ادؼ ارض ن أ:ا

ا سن ؼدا ا ضر ـ ؿ اوا ق ف ا هذ ( ا؟ ا _self ف ا هذ ( ؿ ـ رض ا ادؼ نذة رض ددة؟ )

اوا ق _blankف ا هذ ( ؿ ـ رض ا ادؼ إطر دد؟ )

طا ؿون ـ و رطا ـا اوا ق.) ؿ ؿك تار

أ كف مراط أف ر إ أي ورد طاورا ورResourceآر ب ذكره ف نوركإ در إ طارا ر فأ فك ك تا ط س و بوا مE-Mailؾذ و

ا ن فmailto::ا ؿا رظنا نرد أف ن راط قؿ ارد اكرون اذي

<html> <head>

<title>

ساثؾ بخ

</title>

ازد ف ارات مـ ؾنكPaths:قوا ةرز ف ؿ http://msdn.microsoft.com/en-us/library/aa365247(VS.85).aspx



</head>

<body>

<a href="http://www.somesite.com/files/file1.zip"> ب امش ا ١ز </a>

<br />

<a href ="mailto:[email protected]">اس </a>

</body>

</html>

ؿ و ظور ر ؿ امؼ وا طارا م رنا دن ثد Save File Dialog و)ؿ نوركا درا رد نر روظ و نا ؼما م رنا دن ثدOutlook

Expressر ؿرإ و ددة إ ارد اكرون اذكور اراط.(

Imagesر اور

انرHTMLور و انر ذا ا ف اور رض نر<img/>ػ را(Imageر م اد ا ف اورة رض وـ يذا )

اوا ر رنم رر يذاsrcػ را(Sourceرنم ن ؿا و ك و ) مؾ أي وـ ن و ذؾ ف كم اـ اب</<imgف انر</<brاص

ند اؿ ا<img src="path" />:كوف

<html> <head>

<title>

اظس بش شع خ

</title>

</head>



<body>

<img src="myPic.jpg" />

<img src="myPic2.gif" alt="حونا جنا" />

<img src="myPic.jpg" alt="خبا اظسح " width="100px"height="50px" />

<img src="ؿب سب " alt="ؿبا ابس سر اد " />

</body>

</html>

ر ارض كم:و اذي دو ند

اخر ر او:1اشل

كؿ وـ نر رض اور رض اور ذات ارات اذكورة قـ ظ د ك<img/>اوا رنا و ف وات ذا alt ر ـ ن ق إ دن ا

ا رذ ؿاوا اورة اذكورة إ ؿووsrcةروا ن تد ا هذ واورة كف رض ك ا رض ذه ط ف قد ر ندوز ا و ارا

و اwidthو ارضheightوا ارعimgس دد و ذؾ ر زود انر



قر ـق إ دنن اذ(ؿك ورا ةروا اـ pxدد رض و ارع اندة ف اواف(.

وي ن فأ ضر م :ظومؿ ج و رض ا كؿ ـ ف رو م قد ب زاد وقؾ ؿمت مؼ ا و مت اور ا و ذا

اراط اداـ اور.

اور د ن وص ارواط

ارواط ور و ذؾ<<aف ا واق اوب أف ـ اداؿ نوص وى نر اورة د ف م رنا دن طارم ؼدا م ؿنا ـ ث قوا ىو ؿ

نرض<<aكوى منر</ <imgانص و ـ ذؾ ف انرانر م م و ذؾ: ط

<html> <head>

<title>

شاثؾ زو سح شع

</title>

</head>

<body>

<a href = "mailto:[email protected]">

<img src="myPic.jpg" alt="ىهصا" />

</a>

</body>

</html>



:مك ضرا ود اذ و

اخدام اور د ن اوص وى روا:اشل

روا طئارخاImage Maps

رواط ورة ف م ث راؿاراط اور ن ؿ أزاء ددة ذا ـ

واـ فأ ـوا ؽرط اورة ا كؿ مدي ف و<img/>نا أ طرا رن ءنإ <map>اوا ق دنإ nameو طرم ـك ا

ف نر و إنء ـ ف<area>و ا ؽطنا تاد طاور إ طرا ـا دن ؾذ و ةروا رط نر ارط و نر و ارم ا ـ ةروا

اوا إusemap:ا ؿا دن ةروا ا نر

<html>

<body>

<p> بد شع اىاوت أ امش </p> <img src="planets.gif" width="145" height="126"

alt="تواىا " usemap="#planetmap" /> <map name="planetmap">



<area shape="rect" coords="0,0,82,126" alt="شنا"href="sun.htm" />

<area shape="circle" coords="90,58,3" alt="نا"href="mercur.htm" />

<area shape="circle" coords="124,58,8" alt="جزنا"href="venus.htm" />

</map> </body>

</html>

:مك ضرا ا ؿا ود

ل خرط ور2اشل :

نطأ و طرا ءن نأد ـ وأ ط ؿك ةروا إ ت د ظ كاطر:

<map name="planetmap">



ـوا ر بكاوكا ف بكوك ؿك طن ءن نق ؾذ دareaوا فاو يذا وshapeتادا او نا أ )خإ .. راد مط( طنا كؿ ددcoordsؿ اطؿ أد دد اطؿ إدات رأ رر ـ ث

اداطا ف يوما را فكرا نا و ؿواارا و ثا فادا ؿ نو ط ـ ذا هدد ؼك اذ و ؿطا ف ما فا فكرافأ را مزكر

مورة ركدا مارا فكرا وطنا ف ذا و ةروا ف اموي

(,( طنا و دداف82,126( )

وـرا نط كوكب اس طؿ ا أ نـ رادا طن

نا و ؿوا ر تادإ ررادارة و ر اث فف نط ركز

.رطق ؼن

اوا إ طرا ـا رر نق نا وusemap.ةرو ا

اوا إ طرا ـا رر ـ :ظومusemapزر #وق

خادا طاوراInternal Linking

و ؿ ذه د إ رك ن ف دووا ىوا فوك أن رو تقوا و دا ض ؽر م ا ف ةدد ةر إ ؿناHTML

مادا طاور ؼر ر ةر ا ف دد ءز إ ؿن آInternal Links

شل خ و ادأ اد رم اط3اشل :



ر اداـ وـ اراط ان<a>و ا ـ إو رر ؼ انر اراد اوم كhref :ا ؿك

<a href="#id"> id ا اظش إ مزا فش </a> و ذهااؿوؿ رؼ انر اراد انؿ إ ف اidث أف

اكرة:

<html> <head>

<title>

اا١خ اشاثؾ بي

</title>

</head>

<body>

<a href="#Para4">خثاشا امشح إ </a>

<h1>ا امشح </h1>

<p>ا امشح ز ب </p>

<h1>خ١با امشح </h1>

<p>خ١با امشح ز ب </p>

<h1>خبا امشح </h1>

<p>خبا امشح ز ب </p>

<h1 id="Para4">خثاشا امشح </h1>

<p>خثاشا امشح ز ب </p>

</body>

</html>



Listsاوائم

روHTML: ـاوا رن ف فون

-را ر ـاواUnordered Listـوا ر<ul>.

-را ـاواOrdered Listـوا ر<ol>.

نرب ن نؼ وا كو ف نر ا ا عون دد وـن فأ د<li>و ن اList Itemو ا ؿا دن :ط ر ر ق ءنإ ك ضر يذا

<html> <head>

<title>خجرش لبخ ١ش بي </title>

</head>

<body dir="rtl">

<p>ةبزىا ا ز </p>

<ul>

<li>HTML</li>

<li>HTML5</li>

<li>XHTML</li>

<li>CSS</li>

<li>CSS3</li>

</ul>

</body>

</html>

:مك ضرا ر دن ود يذا و



ل ئ غر ر ط:4اشل

</ol>و<<olإ</ul>و<<ulر و ادا و ان نر ا ف :ا ؿك ر ا

ل ئ ر ط5اشل :



اؿ ذكرت نذ دا ذا ك و طرن ف رن يأHTMLيو فأ فك ن و اد و فأ ىرأ وطن ننأ ن اذ و رنا فق ءنإ

و اؿ ا ووي رنك ر ـاوق:ةركا هذ

<html> <head>

<title>حم لبخ بي </title>

</head>

<body dir="rtl">

<p>ةبزىا ا ز </p>

<ol>

<li>

HTML

<ul>

<li> طتانا </li> <li> نا </li> <li> ئانا

<ul>

<li> حثذنا </li> <li> حثذنا غ </li>

</ul>

</li>

</ul>

</li>

<li>HTML 5</li>



<li>XHTML</li>

<li>CSS</li>

<li>CSS 3</li>

</ol>

</body>

</html> :مك ضرا هأ ؿا ود

ئ دل 6:اشل

اوا كف اداـ أ ـاوا ف ب ذكره رآtype ا ؿك ر:إ ا ـا ىدإ دنإ فك را ر ـاواsquareوأdiscوأcircleزر و

را م رن ؿك ـأ ةرادا و ا ار كف إندبار أو ارص أو



رقـtypeإ اواiأوIأوaأو Aأوإدى اـ ر ـقر ـقر إ ـقرا وؿ ن ـقر ـقر ةرك ن ـقر ـقر ةر زمنإ ؼر ـقر ةرك زمنإ ؼر

ارب. م ةر

وـوا ـاد اطمت ـ إنؤه ـاو ؼر ـاوا ف ص عون د<dl>رن ـوا و ا<dt>ـوا و مطا رن<dd>ؿا دن مطا ؼر رن

:ا

<html> <head>

<title>دبظ لبخ بي </title>

</head>

<body dir="rtl">

<dl>

<dt>HTML</dt>

<dd>Hyper Text Markup Language</dd>

<dt>XHTML</dt>

<dd>eXtensible Hyper Text Markup Language</dd>

<dt>CSS</dt>

<dd>Cascading Style Sheet</dd> </dl>

</body>

</html> :مك ضرا تمطا ق ود



ذا دو ئ اطت ار7اشل :

Tablesاداول

روHTMLرنا ر ؿوادا ءن آ<table>رنا ءنإ ر ؾذ و ـ<table>ضرا او رر و وأwidthدودا ضر وborder ـ ف و ؿك

داـtable rowsإنء وت ادوؿ ر نر أطر ادوؿ و اذي ـ ـوا<tr> تو ركذ ـ ـ table dataو ىد م ؿودا رطأ ف رط ؿك

ـوا ر ؾذ<td>:مك ر ؿك م فك وـوا و ؿ ظ

شل خ و اووم ا شء ادو8اشل :

نء دوؿ وـ ا ا ةرا دن ند ركأ و م وـا اذ ؽط و

ط:



<html> <head>

<title>ؾ١ث ي إبء بي </title>

</head>

<body dir="rtl">

<table border="1" width="50%">

<tr>

<td> برنا صا </td>

<td> ضنا </td>

</tr>

<tr>

<td> ةنا حت </td>

<td> 051 </td>

</tr>

<tr>

<td> لانا حت </td>

<td> 11 </td>

</tr>

<tr>

<td> بنا حت </td>

<td> 51 </td>

</tr> <tr>

<td> ثنا هذ </td>

<td> 51 </td>



</tr>

</table>

</body>

</html> :مك بوا ضر ر دن ؿودا اذ ود

ل إشء دول 9:اشل

أو نء نر ادوؿ نق د نأر ك<table>ضرwidthمكا ضرا ف %

رض دود !(و ؾذ فأ ظ ضرا نذة ـ )وؿ ر مborder فوا ـاد دد رط ءن نق ـ ؿك<tr></tr>رطا وي ذا

قن"ا"و وي ان ا"اـ اك"وي او ا<td></td>م مف ـ أ عووا أظف أف بكا تن يو ا ىرا اطر بوما سن رارك

اف. او

قس أو ي وادة أ ؿك ؿودا ضر ق ءطإ فك :ظومتاداوا فاود HTML ركذ ـ ا و.



إ أر نطؽ:HTMLـ كؿ دوؿ ف داوؿ

رأس ادوؿ- طنTable Headفوا داـ اـ ذا ن :<thead>و</thead>رط رن م با يو و<tr></tr>و اد و ف يو

انوع ف ادوؿ أدة نوف ن<th>ف د<td>ـ ث

نت<<tdاطح أف م نtable dataأ ف <th>م ن.table headingنواف

ادوؿ- ـ طنTable Bodyفوا داـ اـ ذا ن :<tbody>و

</tbody>ـاد ن ا و تنا روط م يو و<tr> فأ و وـوا .<<tdوي موت ف ا ن داـ

ادوؿ- ذؿ طنTable Footفوا داـ اـ ذا ن :<tfoot>و</tfoot>رط رن م با يو و<tr></tr>و اد و ف ي

انوع .<<thن مت ف أدة ادوؿ ف

ادوؿ- وCaptionنواف ف انواف نص ك ادوؿ نواف ؼ :

<caption> و</caption>:ما ؿودا ؽطن ا ؿكا و

HTMLم ادول رم و21:اشل



اHTML:ؽ ادوؿ اذكور ن نكب رة

<html> <head>

<title>ب ي إبء بي </title>

</head>

<body dir="rtl">


<caption> ةرنا ءا جذ </caption>

<thead>

<tr>

<th> برنا صا </th> <th> ضنا </th>

</tr>

</thead>

<tbody>

<tr>

<td>ت٠ا ثشخ </td> <td>150</td>

</tr>

<tr>

<td>ياا ثشخ </td>



<td>200</td>

</tr>

<tr>

<td>ةبا ثشخ </td> <td>350</td>

</tr>

<tr>

<td>جا ر </td> <td>50</td>

</tr>

</tbody>

<tfoot>

<tr>

<th> عنا </th> <th>750</th>

</tr>

</tfoot>

</table> </body>

</html>

:مك بوا ضر ةرا هذ ود



ل شء دول2اشل :HTML

ك أف اطر اوودة نط ارأس و اذؿ ؿودا مأ رظ فاونا ف ظ كرض .boldظر ط

طا رغ لوادا ؿ ن أ ا ـ ارا ارة ا كف و ط ف ات ف اطر أر ط و كف ذا و و فدو ود ف اراء ورة

ا و ؟ـا و ا فوك ا تا ف ذا ؟داو رطب ؟ا اوافHTMLدد دـ ر ا تؤا وrowspanم ذه

colspan.

و ند إ<th>أو< <tdوـ دا امcolspanوrowspanدـ اواف ( قر قوأوأم ـ م ما ـ ف ر إخ( ف أو ث..

ث أف خإ .. رأ وأrowspan أ ما ضر ـكcolspan.ما عر ـك

ند ارة ا م ؿ اؿ:



<html> <head>

<title>ؾ١ث ش١ ي إبء بي </title>

</head>

<body dir="rtl">


<tbody>

<tr>

<td>ةبزىا ا </td> <td>ر jQuery 021م١ل </td> <td rowspan="3">

<img src="jQuery120.png"> </td>

</tr>

<tr>

<td>ؤا </td> <td>ب ١ سبز </td>

</tr>

<tr>

<td>ساا خ </td> <td>2010</td>

</tr>

<tr>

<td colspan="3">

ىزج بد اىزبة ا م٠jQuery



إثى ..... ػا .جؾ

</td>

</tr>

</tbody>

</table>

</body>

</html> ا ةرا ود:مك ضرا ر دن

اوان22اشل ل إشء دول غر ط خدام :rowspanوcolspan

ن وادة ث م ؿ وا رطا يو روط رأ ف فوك ؿودا ف ىر ك ن اذ( رطأ عرا ؿد عرrowspan="3"ف را رطا أ )

ن

ذا

و(

ا

ادوؿ

أدة

رض

وادة

م

م

وي

ادوؿ



colspan="3"فاوا أظف أف اداـ )rowspanوcolspanو فا او أ ر ووا اورة ن ـ ذر نـ و أنـ أف ـ فذا قد ن

اؿ اؽ و ظوا ارؽ اؿcolspanوrowspanاـ اذكورة اواف

ا ذا د كر كؿ ور أؿ دـ ك أظف. أـ

:ظوممق فطرن ف يأ و ؾنك نأ ؾركذأ فأ بأHTML.ؿودا ىوك

Formsاذج

ف ادـ رInputsؿ ادتForms HTMLدـ انذج نز وأفوا ـاد جذنا ءنإ ـ م ن تم ـا وأ <form>

ادؿ<</formو نر ف و ن وف رت<<inputاذاف ؿ ارtext boxesانوص نر ازرارcheck boxesو اواـbuttonsو و

دناselect lists...خإ

وactionواف أف او اوا<form>ـ زود وـ دا نر انوذج انت ادم انوذج و كوف امؼ وـ يذا را ؼما ـا دد ا

ارر طرؼ ف را ت دى وك راServer SideؿPHPوأ ASP.NETوأJSP( إخ .. ذا اكب(ووع رج نطار ف طرؼ ارروأو

اوا نا اوا أmethodرا ؼما إ تنا ؿرإ رط دد ا و دى طرف: روكذا

-رطا وا رطاget تنا ؿرإ رط انواف ث ـ م ا طارم رظنا ق/ح جاوزأ ؿك را ؼما اـ ارض د

ؿ اؿ:



http://www.site.com/file.php?name=Mukhtar&age=23&job=ComputerEngin

eer

ا و ظ ف امؼ ار ذه كhttp://www.site.com/file.php

أ مرا :اـ

name = Mukhtar وage = 23و job = ComputerEngineer

–رطا نا رطاpost رظ ر ؿك تنا ؿرإ ث ـ

طمب

ور

رإ

ـ

ا

(

انواف

رطHTTP.)

ننأ -كا و ف ننقش ك اطمنـ ك إنء انذج ط- ذاو اركز م ك نء انذج.methodاف ؿ ـ ذكره ف اواكنؾ

انر إنء و<<formد اد و ف ؿدا رن ف و و وـن

نـوا

داـ

<input> رد

ـ

إدؿ

نر

كؿ

زود

ـ

ط

كو

د ـ دد نوع نر ادؿ ر اواidوnameمواف ـ ف و typeؿودا و

:ن ؿك م و نكا ـا و ا

ا

buttonزاوأcheckboxند را

fileقوا إ ر ؼم ر رhidden ؿدإ رن

passwordورا مك ؿدإ رنradioدر را رن

resetرن ارا اـ ط دة زر



ادؿ كم انوذجsubmit)بمطا ؿرإ( زر واؽ

textرن ؿدإ<<inputاخtypeوااخا3:ادول

:ا ةرا و ةد و ةرك مؽ إف دت ؾ اموت

<html> <head>

<title> ث١ؾ إبء بي

</title>

</head>

<body dir="rtl">

<form method="get" action="file.php">

: صا <input type="text" name="nameText" id="nameText" />

<br/>

: نا حه

<input type="password" name="pass" id="pass" />

<br/>

<input type="submit" name="okButton" id="okButton"

value="كا" />

</form> </body>

</html>



كم:ض انإدو دو ا دو ند ر رض اوب

ل إشء وذج 23اشل :

طور نوذن ذا ؿ وـن ند تأر ك ط عووا أرى ف نرن و:ا ةرم رظنا را ؿ م ؿدا

<html> <head>

<title> ١ل مأ إبء بي </title>

</head>

<body dir="rtl">

<form method="get" action="file.php">

:ا <input type="text" name="nameText"

id="nameText" />

<br/>

اشس: وخ <input type="password" name="pass"

id="pass" />

<br/>



اظ١خ: اظسح <input type="file" name="pic"

id="pic">

<br/>

<input type="reset" name="resBtn" id="resBtn"

value="حبزا" />

<input type="submit" name="okButton" id="okButton"

value="كا " />

</form> </body>

</html> :مك بوا ضر ا ةرا ود

إشء وذج أد 24اشل :

.. !را رن ف اذ فك وradioوcheckbox

م ا ف انر انذج كف ادـ اواق ـ اؿ ذه ن) دد و ذؾؤاؿ م تإ ةد ف ط داو باو رنradioوأ )

) دا م ؤاؿ و ـ اداـcheckboxنر أكر ف واب )



ا ذه ا رطا سن رنظومسن إ ؿ ا رنا إطءا ؿاؤااذاومnameاوم م ق وvalue:ا ؿا دن

<html> <head>

<title> radio checkbox ازا بي </title>

</head>

<body dir="rtl">

<form method="post" action="file.php">

<p>؟ بل ذ ٠أ </p> ش٠ح<input type="checkbox" name="wrKnow" value="nPaper" />

شزىإ ل <input type="checkbox" name="wrKnow" value="wbSite" />

٠ك<input type="checkbox" name="wrKnow" value="frnd" />

ث نش <input type="checkbox" name="wrKnow" value="srEng" />

<p>؟بل ب رم١١ه </p> ١ <input type="radio" name="rate" value="good" />

زؾ <input type="radio" name="rate" value="mid" />

ء <input type="radio" name="rate" value="bad" />



</form> </body>

</html>

:مك ضرا ود يذا و

ل اخدام25اشل :checkboxوradio

أرى ؽ ء نر رط ؾنradioنك و ؼدا ث ف ـدكرة كرة م مؤاؿ(وود داؿ وأ(ر ـ و دنا ا رن و و

ـوا<select>ـوا ؿ ف ـ ا رن أ<option>دأ دد ـ و اوا رر ؽرط وـ دا"selected="selectedذه انر كر ارا ف

:ا ؿا دن<html> <head>

<title>select ازا بي </title>

</head>

<body dir="rtl">




<p>؟ذأ اجا أ </p> <select name="nationality">

<option selected="selected"> ص </option>

<option> قانا </option> <option> ىثن </option> <option> ضه </option> <option> ا </option> <option> بنا </option> <option> ئازنا </option>

</select>

</form> </body>

</html>

:مك ضرا ود يذا و

ل اخدام ر26اشل :select



ن قن رأ ؿدإ رن ورنا و<textarea>ق ؿد ـد يذا وو اذي دـ دؿ قtextف انوع<<inputم كس انرن ددة اطرن ودة اطر.

دد ر وrowsوcolsقـ دد ر اواف<<textareaمنررر :ا ةرا رظنا را

<html> <head>

<title>

textarea ازا بي

</title>

</head>

<body dir="rtl">


<p>ه جح لظ١شح <</pاوزت

<textarea cols="30" rows="10" name="bio">

</textarea>

</form> </body>

</html> :مك بوا ضر ارا دن ود يذا و



ل اخدام ار27اشل :textarea

م ر ادخل إ وت

إطر ن كؿ و طن إ أقـ اكرة انذج ادؿ نر كف ـ وره ذا و اوفHTMLؿ امذاف<</fieldsetو<<fieldsetداـ

ن فووز ـ و ؿدا رن وكاون ووـوا ر<legend>ك توما م ؿد كف ن كؿ نر ف نر ادؿ نوان

ـوا ؽرط ف مدا<label>او إ ادؿ نر اـ اfor رردن ند اؿ ا<label>:نر انواف

<html> <head>

<title>

fieldset ازا بي

</title>

</head>



<body dir="rtl">

<form method="get" action="">

<fieldset>

<legend> حنا خوثنا </legend> <label for="nameTXT"> صا </label> <input type="text" name="nameTXT" id="nameTXT"

maxlength="50" />

<br/><br/>

<label for="ageTXT"> نا </label> <input type="text" name="ageTXT" id="ageTXT"

maxlength="2" />

</fieldset>

<br/>

<fieldset>

<legend> منا خا </legend> C#

<input type="checkbox" name="prog" value="cs"/>

VB.NET

<input type="checkbox" name="prog" value="vb"/>

F#

<input type="checkbox" name="prog" value="fs"/>

C++.NET

<input type="checkbox" name="prog" value="cpp"/>



</fieldset> <fieldset>

<input type="submit" value="يبسإ" /> </fieldset>

</form>

</body>

</html>

دو ارة ا كم رض اوب:

ل اخدام28اشل :fieldSet

Framesاطرات

ؾ HTMLـادا ر ذؾ و ىرأ ت ف وب ت ف.Framesاطرات



او نء و اطراؿ اطرات اـ ا فمر مـوا ـاد<frameset>ؿك هذ يذا ـا و ن ـ ا تارطا دد اد دد يذا و

و ـ دد اـ مكا ا ـ ف رطإنا مرا أ وا ن وأ ؿك

إ اط ـرنم نا و ادا و ف تار<frameset>ذ وـاد ـوا<frame>اوم رطا و ا ا ر إند اؿsrcو ند

ؿ ـ قدره وا فرطإ ـ بو اـ نا و مكا ا ـ ف %

:ا ف قا

<html> <frameset cols="30%,*">

<frame src="page_1.htm" />

<frame src="page_2.htm" />

</frameset> </html>

:

مك

اوب

رض

ذا

دو

اخدام اطرا29اشل شل ود:



ا ا ؿ اطرات وي م وـ :ظوم<body>.

طرؽ رؾ اط اؿ ن و اظر ادـ ر ـ اطرات ف وـ فأ فك)انظر اكؿ طرؽ إووح اكؿ اؽ كف إء ذا اموؾ طرات ف )

اواnoresize="noresize"وـو إ<frame>.

اوا ؿا ـ ذا اوـ colsاؿ اؽ كنت اطرات كؿ ودي و <frameset>اوا ؿادا ؽرط و كف ؿ اطرات كؿ أ ف colsاو

rows:بوا ضر مك ا

اخدام اطرات شل أ31اشل :

او إ رطا ـا دنإ ؽرط كف ؿ اراط رض واه إطر ف ف اtargetذكرة:ارواط ا<a>راط (Links.)انظر رة

دف نء أـ ـ و ف<<frameو< <framesetف أف اوف ف ات ارطإ HTMLـوا رو<iframe> بو ف



ـوا دـ و ا وى نؽ كؿ أرى <iframe>:ا

<iframe src="URL"></iframe> فأ ثURLا ر وؽرط و كف ط ـ اطر ف ن ـ ا

كؿ أو ن اوwidth.وheightاواف

ك أف اطرات م آر تارطا ـد تر ؾن فأ ن هركذ ب ف أف ـرا م ما ف خر إ د تاز تراطا هذ .

ـا رMeta

ؼ نط رأس ا ف ر ر رن ؾن فأ ؿا ذكرت دا ذا و<head>و</head>ر و ؾ ؼن ؿأ ف ثا تكر د

و ذه انر نر اػ ثا ن فmeta ا ف ط و ؿ ف زوار وقؾ ادف إر ؼ ؾ كؿ ك ر ظـ ثا تكر

م ث م أد ركت اث.

contentو وىnameو رر اـmetaف ؿ اوـmetaـ ؽ نر اػ

نريmetaنر اػ أـ ؿ و فاوكmeta بو يأ فارنا

وdescriptionوkeywordsامذاف ف اف اذما:مك فد<html>

<head>

<meta name="keywords" content="xhtml website test

meta head"/>

<meta name="description" content="this pagedemonstrates how to use meta elements"/>



</head>

<body>ب ى١ ١ با اظخ ز </body>

</html>

و ف اكمت ا ا ظفKeywordsذو اـMetaث رض نر اػ نر اػ أ ؾ اوودة ف ارض و دأ ف فو فدا فأ

MetaوذـاDescription.ؾ د يذا ىوا ف ر و يو

Metaط ند رض ذه ا رض اوب وق أف د وى نر اػ

رظن ـد و نمق ك رنا هذ .ؾ ف ةدووا ف انت مبHTMLنق- ؿ ا-أننقدنكوفMetaو نء دن ف نر اػ

وـو ضارا ا تا ن و ووHTMLـ ؼر ا و راHTML5رن ؾذ ؿق فك و HTMLػ ؼر وأ واXHTMLا أ رHTMLرض دو ووـرى أف ن ر فوك دماا دن.



HTMLدل ووم

اشراوم

<!-- … مؽ<--<!DOCTYPE>ضر دن ن ثدا ـ( (XHTMLدد نوع اند

<a> طار<abbr>كر يزمنإ مط را

<acronym>مط رازمنإ<address>ا ؾ ؿا توم إ

<applet>ؽط ف Appletا ف<area />روا طرا رؼ نط ف

<b>ر صن<base />اورا رؼ د ارا رات

<basefont />ون ؼر/و/م صون ارا ط ـ

<bdo>نا ها ؼر<big>ك صنا

<blockqoute>وط سقا<body>ا د<br />د رط

<button>رإ رز<caption>ودا فاون<center>وا طو

<cite>قاو<code>ر ةر<col />

دة

كر

وات

ادورؼ <colgroup>م كر تاو ؽط ؿودا ةدأ ف و ؼر



<dd>مطا ق ف مط ؼو<del>وط صن<dfn>مطا ق ف مط ؼر

<dir>ادم ق<div>نا ف ـق<dl>مطا ق<dt>ن ص قمطا

<em>م دد صن<fieldset>

نوذ

وؿ

و <font> ؼر/ون/ صن طا فو<form>ذون

<frame />طإ<frameset>ارطإ و

<h1>إ<h6>رنونا<head>نا سأر<hr />أ ط

<html>رننا اد<i>

<iframe>رطإا رن ف رنك

<img />رو<input />دإ رن

<ins> صن<isindex> ؽم ثم ؿق سر ءنإ

<kbd>ر و ط صن

<label> رن فاون



<legeng>دا رن و فاون<fieldset>

<li>ا رن<link />آ دن دنا طر(ن ر)نا ؿا ا دأ

<map>طر وررؼ <menu>ق ؼر

<meta />نا ىو ف ر تن<noframes>ءنطا ىو ؿدارطا ـد ا ترا <noscript>ركا ىو ؿد رنركا ـد ا ترا

<object>

ر

كف

ف <ol>ر ق<optgroup>دنا ا تار ف طن طرا تارا ف و

<option>ق ردن<p>ن

<param />را فكم طو<pre> ؽن صن

<q>ق سقا<s>وط صن

<samp>ر ةر جذون<script>رك( رJava Scriptوأ jQuery)

<select>دن ق<small> صنا<span>ق ؼررطنا ف<strike>وط صن

<strong>ر صن

<style>)ؿ ـدا ؿا شقن( رؼ ورق أنط



<sub>م صن<sup>وم صن

<table>ود

<tbody>ودا د<td>ود تن م

<textarea>طا دد صن ؿدإ رن<tfoot>ودا ؿذ

<th>اون مأرودا<thead>

ادو

رأس <title>نا فاون<tr>ودا رط<tt>صنteletype

<u> صن<ul>ر ر ق

<var>نا ف ر ءز<xmp> ؽن صن

دل ووم4ادول :HTML



XHTML

فإXHTMLػ را eXtensible HTMLن ا وHTMLضا( وم ما ود

HTML)واف

مؼ

و

HTML

اوو ن

ف

دماف

و اوات نفك و طرا نداتركف ك ار HTMLأكر

او كؿ قواد طXML(eXtensible Markup Languageو ذا و )

وا أكر رت اوب نؿد كر م اراXHTMLازاـأرد ط و ؿا ركأنرك-و ير وطك-ضر رو فأابو

ارةكمنوباص ر رت اوب ا واؼ اذك أو زةؿ دو ننؿنارى و ذا وؿرد م كؿ رت اوبكن:

XHTMLن ا.

مرات ت اوبوك انرنت ف أف كرة نا ذه

م م ؿ اؿ:--كو كؿ رديء<hTml>

<heaD>

<title> ٠س HTML <</titleخ

<BODY>

<h1>Bad HTML

<p>This is a paragraph

</boDy> م ؿ أه رأدنفؤدي إ أنار أف ارة

ؿ نأؿ كف أفو HTMLكس أدن ر كؿ ف قـ ك نظرت و قد ءيدر ؿك وك نأXHTML دم.هأ ك ت رنا ف



XHTMLواد

ند و ف اواد اط ا إف ـ ط ف ك أXHTMLمص HTML

ددن اند

XHTML

و

مص طأاوق

XHTML

و ا نا:

سن .ؽا ـوةر ؼر ؾ تاو و وـو بكاLower Case.

.ا وـو رظن ؽا وـو راع أف كوف رب تاوم ةد ا ـا .سقا توـو .<<headو<<bodyو< <htmlف ف أي ف

دنا عون ؼرDOCTYPE.)ا ةرا ضر( دا ؾ

<<!DOCTYPEرف وع اد

مم أف كؿ ت اوب ب أف وي أوؿ طر نXHTMLنص ر ارؼ اند<<!DOCTYPEطر نوع رؼ ن اذي Document Typeو

DefinitionوأDTDاذ دـ اوب رت أف ذؾ و رارك اطرداوقاكاون او وـواإ إ ادااواxmlns

ادا ـو ا<html>ءأ ء ؼ ا وName Spaceا.

ضرن ا وXHTMLرؼ نوع اند اذي د أمب تارةو ذاxmlnsإ موااذي ب أف ك كوؿ طر ف ؾ ـا ؿكا

كمXHTML:ند

ذكره ف اواد كف قد ر ن ات ا م كؿ موظت. ـ بمأ فإ



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>ب اظخ ز سأط </head>

<body>ب اظخ ز </body>

</html> انوع Transitionalاند و انوعاروض أه أد أنوا<<!DOCTYPEر

ارى. و ارة ا نقش اؼ ن و ف انواع

:ظوم<!DOCTYPE>ف و سنا ؼر ام و إ و طر وـو.

اواع اخ د

XHTMLؾنرأاونأمنم: عاونا هذ و

.XHTML 1.0 Strict:

وـو انوع ذا و<<basefontو<<appletاوودHTMLوي<center>و<dir>و<font>و<iframe>و<isindex>و<menu>و

<noframes>و<s>و<strike>و<u>تارطإ ـاد عونا و ذا <frameset>ر رط وا اذ ف دنا عو:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> .XHTML 1.0 Tansitional:

وـو انوع ذا إطراتHTMLوي داـ ك ك و

<frameset>عونا رؼ اند ف ذا و طر :و



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd"> .XHTML 1.0 Frameset:

وـو يوHTMLاذ ف دنا ؼر رط و تارطا ـاد وانوع و:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

.XHTML 1.1:

)وداتو كStrictؿ انوع ر تادو تإ ؾ Ruby)انوع و:م كس اذكور و طر رؼ اند ف ذا

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> XHTMLاق ن ت

ننف ثداXHTMLكذ)هر و( ر اوب وط فك نأ فأط فر اراط: XHTMLوب ر

http://www.w3schools.com/xhtml/default.asp

:ظومر ا ط ف ؽا طار و سكXHTMLؾارد ا ف ون ؾ ار دي.






HTML5

ترظHTMLا نر ا( ا نا طوا وراادHTML 4.01

ـ

)م

مت

كرة

طورات

ف

ا

نذوـو

اوب ك أ ف اندر أفWeb 2.0و أن ن رؼ ػذؾ اف إ ون ذا

دـ د )أن اواق ادة( ت ؿ ؿ ادو و اوت و ر ذؾند وق وب اوب طور ف اووHTMLإدار دد و ذا و و ددةدا ما إ تاواـ ددا رادا رظHTML 5.

ءت ء ا ازات اددة ف وظوHTML 5و رض ادو وـو ار ات أو ك وـو مراوت و وـو إ إو إ

ا ادؿ نر ف ددة وذنذ ر اراتو رض .دا

ـ ادا بوا ترHTML 5

قرةظرت HTML 5ف ـرة ر و م ؿا )دأ نف )

ؼ د دا بوا تر ـظؿك د ةددا ترا فك وو اؿ ارار نء ت اوكو-رأHTML 5-ػكد

دذا د ارت ض رت:دأت ف ارة ادارات ؿGoogle ChromeوFirefoxوOperaوInternet Explorer وSafari.

ارىHTML 5ذه ارت كؼ ؿد د أف ام ار طور ات نؾ رات رت اوب و ا د ن ر ف د انرنت اف.



Videoر ادو

HTMLدـ 5 ط آددا رنا ـاد بوا ف ودا تم ضر<video>

ارع او

إ

نا

اـ

ند

ذؾ

ـ

و

height

ارض و

width

رر ر مؼ ادو ر انر اف ـ ف و ا<source>او كsrcدا ؼم عون رر واوا رtype:ؿا ؿ م ا ةرا دن

<html> <head>

<title>

٠١ا ظش شع بي

</title> </head>

<body>

<video width="320" height="240" controls="controls">

<source src="movie.mp4" type="video/mp4" />

!نا ى ننا رضنا نصف,

</video>

</body>

</html> نا و ادا و ف )اوود نا اوى <video>منرظر )

أ ارتHTML 5ارت ا دـ ادا:مك ن ود



روولر رض ادو ادد دو رض:3اشل

:ظومرنا ف ظما ذه إ<video>ا و ادو ف أنواع ؿ دـMPEG4وOggوWebM.

:<<videoرض ادوؿ ا وات انر

اواا مارشاaudiomutedـكوا

autoplayautoplayدا ؼم ما ؿاcontrolscontrolsدا ؿ تاودا طر رض

heightك قدا ؿ عراlooploopنا دن م ؿك ودا ؿ ةدإ

poster طارط ف ر ةرو طارؿق رظ و ودام ـدا وـ فأ

src طاردا ؼم طارwidthك قدا ؿ ضر

وات ار5ادول :<video>



توا رAudio

HTML 5وا تم ضردد ط بوا ف فرنا<audio>:

مك ادو

رض

نر

رط

دـ

اذي

و

<html> <head>

<title>دظا ظش شع بي </title> </head>

<body>

<audio controls="controls">

<source src="song.mp3" type="audio/mp3" />

رضنا انن ى انخ!نصف,

</audio>

</body>

</html>

:مك رنا اذ ـد ا ترا ؿا اذ ود

دو رض ول رور رض اوت اد32:اشل



و ادا و ف روكذا صنا رظ رنا ذا ـد ا ترا أو اذي وي ر اذار.<<audioان منر

إ ذه امظ ف انر :ظوم<audio> توا تم ث ؿ ـدMP3وOggوWav.

:<<audioنررض ادوؿ ا وات ا

اواا مارشا

autoplayautoplayوا ؼم ما ؿاcontrolscontrolsؿ تاودا طر اورض

looploopؿ ةدإؼموانا دن م ؿكpreloadpreloadض ا ؿ دن توا ؼما ؿرظنا

ا ؿا فرز ف نر ادـ واؿ

src طارؼم طارواوات ار6ادول :<video>

Formsر اذج

ددHTML 5دـ وجذن ا ؿدا رن فFormsإ

وةددفعاونأندادما<input>

انواع

ف

دث

ند

ندأ

و

و ا ر ادوؿ ا<input>:اددة منر

اوا typeرشا

emailنوركا درا نر ص دؿ urlا طاورا ؿد ص رن

number ص رنقرا دؿ



rangeد ص رنقرو ؿاذ رظ و مرر رط انر م كؿ

dateرند)ن/ر/ـو( رخ

monthرند)ن/ر( رخweekرندو خردنا ف عوأ دد timeرند)قد/( وقت

datetimeرندتقو )نا/را/ وـا/ا( اوقت و رخا

datetime-localرندما تقو تقوا و خرsearchعون و و ثا ر ضر رنtext

color نوما ـا ؿد رنHTML 5أواع ر ادخل اددة 7:ادول

:ا ؿا دن

<!DOCTYPE HTML>

<html>

<body>

<form action="" method="get">

Name:

<input type="text" name="stdnt_name" /><br />

E-Mail:

<input type="email" name="stdnt_email" /><br />

Website:

<input type="url" name="stdnt_url" /><br />

Points:



<input type="range" name="points" min="1"

max="10" /><br />

Date:

<input type="date" name="user_date" /><br />

<input type="submit" />

</form>

</body>

</html>

كم رض اوب:اؿ ادو

ر ادخل اددة دو رض رو33اشل :

ذكره ؽ ـدHTML5ددا انذج وـو ف وـوا ن<datalist>دنا ـاوا نء دـ اذي نرو د ارا إدؿ كرات

ن اوودة و و طر منر<<optionوف وـوى اادؿ )نر<select>ادـ ارا تارا ق ـا رر ـ ك<datalist>رن )

ؿداةددا اوا رlist:ا ؿا دن



<!DOCTYPE HTML>

<html>

<body>

<form action="" method="get">

name:

<input type="text" list="names_list"

name="stdnt_name" /><br /> <datalist id="names_list">

<option label="A" value="nameA" />

<option label="B" value="nameB" />

<option label="C" value="nameC" />

</datalist>

</form>

</body>

</html>

دق ا انHTML5ف انر اددة أا<keygen>و<output> انر ا<<keygenدـ ف اؽ و ادوؿ ؿ مت د Authentication ؾذ و)و )ح و/ح زوج ود رؿ

و دـ كؿ:اطمب دوف دؿ ادـ

<keygen name="security" />

انر أ<output>تر رض نOutputsدـ ؿ م أنواع ف او دأ ف ةدا ـا وأ تاJava Script:مك

<output id="result" onforminput="resCalc()"></output>



Canvasر ارم

ف اوب داـ<<Canvasنر ارـHTML 5دـ ـرا و اذي ؾ Java Script

أ ف

ن

رذؾ

إت

Plugins

اػ كت

Flash

م ؿ اؿ.

ـ إنؤه أو رع ـرا رن ـادheightضر وwidth:مك فدد

<canvas id="myCanvas" width="200" height="100"></canvas>

م داـ ـرا كؿ مJava Script:ـ ـ <script type="text/javascript">

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);

</script> ف طرؽ اػ ـرا رن دد وأ نق ثid:رطا ؾذ و صا

var c=document.getElementById("myCanvas"); ن ادObjectقن نء كفـ ـرم و نه ـرا ف2D:ا رطا


ـ ادء طرؽ ـر ـم و فاMethodsفكاcxtؤنإ ـ يذاك ؿمق ؿق:


cxt.fillRect(0,0,150,75);

دزا رج نطؽ ذا اكب و كنن وؿ رح ادا امJava Script.كنؾ قراءة رآ ر



ا ن )ذا ر ـ اذي مكؿ ون ار اموف دد ـ اوؿ اطر#FF0000) ؿك ما فا و يوما را نكر تادإ رر را ـر ـ ـ

اورد منه ند طرا ؽطن)روا طارا ةر .)انظر

اوب كم:ارة اكم دو اؿ اؽ ف

<!DOCTYPE HTML>

<html>

<body>

<canvas id="myCanvas" width="200" height="100">

صنا ى رض

</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");



cxt.fillRect(0,0,150,75); </script>

</body>

</html>

و وظ كؿ نMethods:رض ادوؿ ا ض طرؽ ـرا فك

ا ـ فاوا وـ ضر نا ؿHTML.



رطاظوا

fillStyleا فو ددcxt.fillStyle="#FF0000"; fillRectط ـرcxt.fillRect(0,0,150,75);

moveToأد ازإتاداcxt.moveTo(10,10);

createLinearGradientنو جرد ءنإcxt.

createLinearGradient(0,0,170,50)

addColorStopإ وف إادرج اموف

cxt .addColorStop(0,"#FF0000");

drawImageرو ـرcxt.drawImage(img,0,0);

lineTo ط ـرcxt.lineTo(150,50);ض طرق ئن ار8ادول :<canvas>

خزن ات ن طرف ال

HTML 5نكؿا ؼرط ف تنا فز فمClient: ودـlocalStorageاكف. اكف: زف انت ف طرؼ اؿ رة رذا

:ا ا ا مزدة و دود

localStorage.varName="value";

ق ذا ار و كف ارعvalueو اـ ار وvarNameث أف:ا ا را ق

localStorage.varName; اكف زف انت ف طرؼ اؿ رة:sessionStorageاكف. ذا دـ

و دـ ا ا ا مزف: ط ةداو م ةدد



sessionStorage.varName="value"; ع ق ذا ار و كف ارvalueو اـ ار وvarNameث أف

:ا ا را ق

sessionStorage.varName; ذاف اكنف دف كزف منت أنء ك رات :ظومJava Script.

ةددا مووا لدHTML 5

ذا اؿ ضرن ود م ةددا وـوHTML 5:

اشراوم

<article><aside>قوا تو ف بن<audio>وا تم ؿ

<canvas>ر ـرم<command>اوأ رز

<datalist>دإ رن ارا تار ق<details> رن ؿ<embed>وأ م رن فpluginر

<figcaption>رن فاون<figure><figure>وا رن ف و<footer>ا ؽطن ف طن ؿذ

<header>ا ؽطن ف طن سأر<hgroup>نا ف ـق ف توم<keygen>

انوذ

اؽ

ود <mark> صن



<meter>دد ىد ةرو تق<nav> طاور

<output> عون ف جر ضر

<progress>طرد عون ف <rp> ـدRuby ضرا فوك ر ـ ف رم

Rubyدـ نر

<rt>اد ن را ـ حرنRuby

<ruby>رنRuby

<section>

ان

ف

قـ <source>وا رد ؼر<summary>رنا ور ؼرdetail

<time>قوا/خرا<video>دا رن ضر

<wbr> دد رطدل اووم اددة 9ادول :HTML 5



ثني ل ا ؿصف ل ا

CSS 3





د

ـاد بوا تادن ك ك ا ؿا نHTML5ـ ننك وطن

مؽ

كرة

اونظدو

ار

ذا

كف

د

ا

و

اندات

مؾ

نؽ

و مؽ كؿ و فظا ف ونا طنا ؽاروأCSSاذ شقن ا

اذي رؼ ػ و ارادإ ثدأ ؿاCSS3و كن-ا قاو -أ طن.امدCSSذؾ ندث قؿ ذؾ فCSS3رة فندث

CSS

و ا رتCascading Style Sheetرؼ او ف ام ارCSSإف نأ م"نا طنا ؽاروأ"فأ ف HTMLبوا تادن رن ؼو ـ

و قد كف ظور أوراؽ انط انظكؿ وـ وؼCSSف رنا هذو روظ ري اوب نوات قؿ وط تاو ا ؿكا ركأ ف مك را ؽا

.مكا هذ ضر ا ةرا

CSSش طوري اوب ل

ـ ـ دنHTML ـ م ركا زكرا فكبوا ت رن ىد و يأ ؾن فك و ـ طHTML ـ فأك و رظىوا

ث كفذه ا رت اوتكراد -از و-ضر ؿكارا ص نر اوب ظكؿ نر ف رت اوب رض

را و ىأر .ا ـ ر ف رظنا ض و

.را ارا م ا را هذ



ـوا مأ ف و ؽن ـ ةدد وـو ت طنا هذ نا ـ<font>يذا)دـ رض نص نوع ذاو كفو ـ و وف دد ف ا) Fontنط

كف نؾ د بوا يروط ن رك ؿو فر نك را ؿوأ

م فأ ن ض اواق ا ؿ دد إ ت أو آؼ ات أن ددا زكرا إ ا ف ؾن فرك د و تقو ج تا هذ ؽنط

موؿ م ت واف و أـ و أنواع طوط ودة و ةروكذا وـوا ص نروظ مكا هذ ت د ظا ف ف و فكCSS.

كن ووـظر و كؼCSSاوؿ أفندأ و ذام دHTMLكؿ وـ ف ى وـ نأ بوا روط ن ن ظ و ؿك ؼو كاو فك ـواةر

طؽ ذوادة ـ ط طرا بوا تادن م ؽناتاذػاCSS.

CSSادء اخدام

ؾ:CSSأوراؽ انط اننؾ ث طرؽ داـ

.CSSرطاInline CSS:

انظر اؿا كؿ نر م دstyleإ اواCSSـ إند رة ى:ا

<p style="color:red;">حشما ز </p>

م ر رطا هذ و- ن-ؿق ؿك ند نCSS.

.CSSمادا)ندا(Embeded CSS:

ر نقا دـ fontروا ما ا ف ردا وما تمط ـ اذك تدرو نك "نط" إكر ػ "ط" اـد ن و وممfont.اذ ك



رة ك اػCSSـ طن Headو ف ا و<<styleف</style>:ؿك ا

<html>

<head>

<style type="text/css">

CSS ى ر رتح اخ </style>

</head>

<body>

ب اظخ ز

</body>

</html>

مواقناطر دة مواق ذات ادد ادود ف ات أو ر ذه.ا رطا ـادا ؿ ةركا اوط و

.CSSراExternal CSS:

ك ـؿكةرCSSدادا ؿ ؿ ؼم .cssاذ طر ـ ـ وأ اوب د ؼماـوا ر رر<<linkاـ ا سأر طن

او إ ؼما رhref ػ قا عون دد وstylesheet:مك<html>

<head>

<link rel="stylesheet" type="text/css"

href="style.css" />

</head>



<body>ب اظخ ز </body>

</html>

.رأCSSو ذه اطر اطر ا داـ

CSSشرات

ظر نر أوRulesف و ف اوادCSSكوف رة ن ؼ كؿ قدة

و اكؿ اـ دة ا رنا ف وCSS:و

selector {

property:value;

property:value;

property:value;

…

}

اذكورة طؽ ص اظر وـ نم ك{و}ف اوفو ذااط اداselector .

:ظومؽط بوا ف رن و وأ رن دد ـد تادد ا ف ود ك و نو مCSSقواد كرة ووـد كوف اCSSاددات د ا طأ دد

HTMLؿh1وأaوأpا فوك دق و ددidؿ رن#link1وأ#header1وأ#searchForm

ا ف و حر ـ ط و ؾذ ر فوك دق ودضر ـ ك ا تارا ن ؿك تاد ن اؿ. ندوؿ ك اددات

اـ/ق كؿ:زوكؿCSSكؿ ف صـ ذكر

property:value;



اظر وpropertyث أف رؼ valueاـ ن و ا ق طونا م اضار أدن و ك.ا ةرا ف را صا

كػذكرة :HTMLفCSSادا ـ نإ رؼ ارات و ق يأ ط رةءارق ؿا ةر.

خئص ظر اوص

و ف اص نؽ ظر انوص و CSS:ور

ةاذا text-align:مك ـد ا وh1 {text-align:center;}

و كف إند ا<h1>ن نرh1ث أف ادد دنا right

ا إtext-alignوأ فم صنا ةاذleftوأ رم صنا ةاذcenter

أو

انص

وط

justify

ارة أطر

ارضوؿ

width.

( و ا دـ كم) text-decoration:اازف

p a {text-decoration:overline;}

ارواطp aث أف ادد اوودة ف أي ف نر<<aن نر

و كفان رض ط أمoverlineو ا اند<p>ارات صون:ا اـ انunderlineأوازءnoneإند أؿ ط أورض

line-throughطنا.

ةءارا ها direction:مك ـد ا و

روف ـDecor .بنا را فزا فأ ىرأ ننأ م فوق ف ثا تدروأ اذ و "أث" نأ م



p {direction:rtl;}

ا ن اذ و را إ فا ف ةءارا ها ؿrtl( راright to

leftا ند مف ار ف اراءة اه ؿ كف و )ltr اوا إ

direction.

را ؿوtext-transformation:مك ـد ا و

p {text-transformation:uppercase;}

ؿرأرن<p>را كا ا هذ ذ فأ فك و أوuppercaseاـ اكرة أوlowercaseمروؼ capitalizeمروؼ ارة

ا ؼرا ؿمك ؿك ف ط ؿو.رك ر

ادا ازإ text-indent:مك ـد ا و

p {text-indent:20px;}

دـ دا راتكزا أوؿ كم ف اط دار ازا و .زمنا ما

فوما color :مك ـد ا و

p {color:red;}

و ـ إن<p>ن انرpث أف ادد ا ةدووافوما مcolor ن إ فوما ـا مؿ زمنredوأgreenوأwhite

أو خإ..دنير تا ـظن فوما قHexadecimalؿ#FF0000وأ

زمنا ؿوا ؼرا ؼرا سن ـر ف ركأ ط ت ؾنـرAو ركا ؼرا فك aإذاارؼ ار.



#00FC00وأ#FFFFFFأ خإ..دنفوما قا كؿrgbرrgb(255,0,0)وأrgb(0,255,0)وأrgb(255,255,255).خإ..

و:كف فو ؿكزف فاوا ؼم و ؽرزا أواف ار و ار و كؿ ن ؼ ا ف/ا/رزاو تا ؿ اموف نظـ

و ـ ار ن نف ف در اموف را فوما رد ف فن ؿوأ را ـ يرو ط درج قـ كؿ ن ف ؽرزا و ـ ار ث نف ف در اموف را00

مFF كدن ق و ق مكفنوما جز ب نا فوما م ؿوم ؿا ؿو#FF00FFذا ق اموف انودوف أي ن ف اموف اازرؽ و ار

ازرؽ م ؿ اؿ و#8B008Bكف اكـ درج اموف ر ؼ در ار و أ ؿ اموكذا ا رrgbفوما نا ؿ و را فوما وا نا ؿ

ازرؽ كف ق كؿ ن درج ف و ؿ ا اموف را0و ندأ دك255.قأ دك

ند اؿ ا و اذي رض اداـ ص ظر انوص:

<html>

<head>

<title>

اظخ ش بظ ازجبس

</title>


p {

text-align:justify; color:#ff0000;

text-decoration:underline; direction:rtl;

}



</style>

</head>

<body>

<p>

خ ازجبس اظخ جبسح إ بظا ا ا إؿبخ رب ل ا١بث١خ ابؽ أساق

١ش ب١خ امشح ب٠خ ثا٠خ ١ث شػب ف زا ابخ مخ .اظاباح

</p>

</body>

</html> ود يذا و:مك بوا ضر

اخدام خئص ظر او34اشل :



Fontsخئص اخطوط

طوطCSSور ف اص مكـ وFonts طوطا ؿا و ـ CSS

ن

كؿ

د

وت

كؿ

م

"طو

م

"font-family

إند ـ

ث

ط ـ و ط ف ركأ ءأ وأؿاcommaإاfont-familyفوك و

و ا ا ذر م ارااط اوؿ و اراطا م روا ارا.اذك و ارا و ا طا ؿ ن

اCSSور ف ارا واؿ ما امSerif طوط و Sans-serifو ماMonospaceزمنا م نا ما ؿ ن وضر دن ا ما و

.ارات او ؿ رات ت ار اوب

ور كCSSا طوط أرى ف اص مكـ وfont-styleو اـ إ وitalicا كف أف ند ا(normalاط اؿ( و )يدا طا(

font-sizeد ا انص كؿ أو وادةو ـ =(emكؿemدد

:ا ؿا دن )ؿك

<html>

<head>

<title>

ا بظ خ ازجبس

</title>


واد. م ا كوف م اطوط كون ف ط ـا طا مط ترا



p {

font-family:"Tahoma","Simplified Arabic",sans-serif; font-size:1.5em;

font-style:italic;

direction:rtl;

}

</style>

</head>

<body>

<p>

بظ خ ازجبس اظخ جبسح إاقاسأ ا١بث١خ. ابؽ

</p>

</body>

</html>

و ا دو كم رض اوب:

اخدام خئص اخطو35اشل :



:ظومو سقا ن ـاsans-serif ننم دنؿ ا و ارا طوطا. sans-serifاـ

خئص ظر ارواط

مرواط ددات ود كف و طاورا ظر ص ود ا : تاددا و ما طارا رظ ؽن ـد

a:linkرا رظ ؽن ـد يذا وددم ك و و دا طaاذإـ وده. ا

a:visited . م رنا ـ يذا طارا رظ ؽن ـد يذا وa:hove.م ةرا رؤ رور دن طارا رظ ؽن ـد يذا وa:active رنا ظ طارا رظ ؽن ـد يذا و.م

:ا تاددا هذ ـادا ضر ا ؿا و

<html>

<head>

<title>

بظ اشاثخ ازجبس ش

</title>


a:link{text-decoration:none;color:blue;}

a:visited{color:green;}

a:hover{text-decoration:underline;}

a:active{font-size:120%;}

</style>



</head>

<body>

<a href="#">normal link</a> <br/>

<a href="www.google.com">visited link</a> <br/>

<a href="#">hover link</a> <br/>

<a href="#">normal link 2</a> <br/>

</body>

</html>

ارواط: زرة ض دو اؿ اؽ اوب د

زرة ا36اشل ارواط ظ ار اراط اث و د ذا دو اخر ظر :

:ظومةدق ركذa:hover دa:linkوa:visitedركذ ب ك a:activeدa:hover .

Backgroundsخئص اخت

فCSSور دث ارا ندأ رنا مت نؽ اص ف و اbackground-color ق انر ند ون د م دد و ا دـ

اموف إ كؿ:



background-color:#CF1A11;

م ةروا ورة كم د انر ر إند ر -backgroundو كف ف

image:ؿك

background-image:url(‘image.jpg’);

أر ف ـ انر ـ دد )ما( اورة اورةو ؿ كوف ـ طر كرار ا رbackground-repeatا دنإ ـrepeat-xوأ أ ؿك ةروا كرار

اrepeat-yأ يدو ؿك ةروا أوrepeatكرار يدو و أ ؿك رارك

no-repeatةروا أ ا ان كف دـ كرار وا ا اذ و راركا ـدو دد وا ؽرط ث ـ إند وادة أو أكرbackground-positionف

أو center centerأوcenter topأوleft bottomأو left centerأوleft topف اـ center bottomوأright topوأright center وأright bottomا ؿا دن و

نرف ضرن يذا<p>رو م را و نو م ؿوا:

<html>

<head>

<title>

ا١خ بظ خ ازجبس

</title>


.firstP {

background-color:black;

color:white;

}

.secondP {



background-image:url(‘image1.jpg’);

background-repeat:no-repeat;

background-position:center center;

}

p {direction:rtl;}

</style>

</head>

<body>

<p class="firstP"> أث١ي ظش اا اء ث١خ

</p>

<p class="secondP"> ا س٠خ ث١خ ج١ با اظش <br/><br/>

اظش ا ثبضي ثؼخ أش ث١خ ل <br/>

<br/>

ا١خ اظسح شع اىب١خ ابخ

</p>

</body>

</html>

نؾ طر دد انر رؼ ـ ادد ت :ظومclassesي ددا ؿادا ـ ث ا ؼر ؼر اذ و طن )دوف نطclassCSS)اـ وق ا هذ ـا دنإ ـ ؾذ د

اوا إclass.ا ةدق ةروكذا صم ط رظ ؿ برن ا رنم

رض اوب كم:اؿ ادو



ذا دو اخر خئص اخ37اشل :

خئص ظر اوائم

اروض أـ كؿ نرنور صCSSص ظر اواـ قـرا/زرا

ا ؿ ف اذ ـ و ا رن فا ف:

list-style-typeعون دد ـد ا و :راف رن ؿك ـأ ـقرا/ا رنـا none وdiscوsquareوcircleو ذ

را ر اـا -lowerوlower-romanوupper-romanو

alphaوupper-alphaوlower-latinوupper-latinوdecimalو.را ا ر

list-style-imageف رن ؿك ـأ ورة و ـد ا و :ا رند و زرك:ؿك

list-style-image:url('image.gif');



:ا ؿا دن

<html>

<head>

<title>

بظ اماخ ازجبس ش

</title>


ul {list-style-type:square;}

ol {list-style-image:url('dot.gif');}

</style>

</head>

<body>

<ul>

<li>item 1</li>

<li>item 2</li>

<li>item 3</li>

</ul>

<ol>

<li>item 1</li>

<li>item 2</li>

<li>item 3</li>

</ol>

</body>

</html>



:مك بوا ضر ؿا اذ ود

ذا دو اخر خئص ظر اوائم 38اشل :وا ضر

خئص ظر اداول

رؼ طور اوب كإذCSSد اHTMLأظف أف اداوؿ أكر نر ند اؿ ا أوCSS:صوظؼ بنا ؿك تر ا

<html>

<head>


table

{ font-family:"Trebuchet MS", sans-serif;

width:100%;

border-collapse:collapse;



direction:rtl;

text-align:center;

} td, th

{ font-size:1em;

border:1px solid #98bf21;

} th

{ font-size:1.1em;

background-color:#A7C942;

color:#ffffff;

} .alt td

{ color:#000000;

background-color:#EAF2D3;

} </style>

</head> <body>

<table>

<tr>

<th>كرا</th>



<th>فاونا</th> <th>دما</th>

</tr>

<tr>

<td> وا كرا</td> <td>ؽد</td> <td>رو</td>

</tr>

<tr class="alt">

<td> وا كرا</td> <td>داد</td> <td>ؽارا</td>

</tr>

<tr>

…

ا إ آش ١شح

…

</table>

</body>

</html>

:مك بوا ضر ؿا اذ ود



وظف39اشل :CSSوادا رظ ق

ند ادث ف اؿ اؽ و مCSS:ف و ب ذكره

border ف ر فو و ؿودا دود ك ف ر ؿك ق إ دن ا و :)ط ؿ ط طsolidوف ادود إ دد نوع ادود dashed

إخ(dottedنط .. ا ؼر ؿ ط و ا هذف ثدا ـ(

) ةر ركأ ؿك ا هذ.

border-collapseداو د دوو و ا دد ؿ ـ ط دود ا و ار :

ا( أـ ـ ار د كؿ م ف ار.collapseف كؿ مف )ا تو ةءارق ؿ :ظومصونا فاوأ و ما فاوأ ون ؿودا رطأ ؿ اد ن ؿود

و ذا نه ر ؽا ن ضورا ؿودا نم كـاداا.altبونا رؼ ذا

Zebra-strippingامون ـ



وا صئخPositioning

وا ص CSSدن رنا ضر ـ ؼك و رنا و دد

كد

كر

واه

ددكوف

أنواع

دة

نؾ

و

أرى

نر

مؼ

نر

و

رنا وCSS: و ا

كا عوناStaticب أي ا ظوره كف انر و ـ :

انوع و ارا.رب و و ظ و ذا ا وـو ور و ف تا كؿFixedانوع دنإ ـ دات ط انر و ـ :

اbottomوrightوleftوtopمص إند fixedا إpositionرا يوما فكرا را ـ ط و م.تاد زكر

نا عوناRelativeؿك دنإ ـ تاد ط رنا و ـ :

اbottomوrightوleftوtopمص إ ا relativeإند

positionـ و را يوما اركف ركزاك منر نار .تادؽ كؿ Absoluteانوع اط دنإ ـ تاد ط رنا و ـ :

إ ا absoluteإند اbottomوrightوleftوtopمص positionيوما ار اركف ار و ـ أ رن ؿوك ر و

اد زكرا ـ ك ر و بأ رن يأ دوو و ؿ ـ ت يوما را فكرارنم<html>.تاد زكر

:ا ؿا دن

<html>

<head>




* {direction:rtl;}

h1

{ position:absolute; left:100px; top:150px; } </style>

</head>

<body>

<h1>خم اا ثئا١بد ا </h1>

<p> اظش ؿجم ٠ز شع امخ بخ اا١بد سس بى اش ظبظ ثغ اشح ا١بد اظخ <١</pشح

</body> </html>

دو رض اوب كم:و اذي

ل اخدام خئص و ار 41اشل :CSS

ادد اص :ظوم*.دنا رن دد وـ



ا طرؽ ف أرى نر مؼ نر و رقـz-indexكف ند ذؾ و ث ـ إظر انر ذو اػ إ z-indexدن ىرا ام أـ انر

:ا ؿا

<html>

<head>

<style type="text/css"> * {direction:rtl;}

img

{ position:absolute;

left:100px;

top:50px;

z-index:-1;

} </style>

</head> <body>

<h1>حشما ا </h1>

<img src="image1.jpg" width="100" height="140" />

<p> ـا ل١خ ا ا اظسح رش ف z-index

رب ش زا بث ابخ ام١خ لأ بث با ثى ازشاػ

</p>



</body>

</html>

:مك بوا ضر ود يذا و

ل اخدام اخ4اشل :z-index

فوك ا ا رر طرأ ضر أ فك ف رك ركأ رنا ىو ا دنإ ؽرط ند اؿ اoverflow:إ اscrollو ذؾ ف

<html>

<head>


* {direction:rtl;}

div

{ background-color:#00FFFF;

width:250px;



height:100px;

overflow:scroll;

} </style>

</head>

<body>

<div>

<p> ا بثأ لأ ىز با اظش بثأ إؿبخ بي ا ازش٠ش ١ز شع أشؿخ ٢ا أشمر ا

.١إ اىبد اػب١خ ا أوش ثئػبخ ثغ </p>

</div>

</body>

</html>

دو اؿ اؽ كم رض اوب:

ل رض أشرط ارر ر ذات اوى ا42اشل :



سا تاداوCSS

heightارwidthارف ؿم ؿ اـ دد أد انر

قـ

ند

وذؾ

:ا

اس

وادات

دى

أو

كؿ

قر

اشراوادة

pxك150px

%وا ن50%

emؿكemيوك1.5em

inنإ1incm ن1cm

mm م100mm

pt= طنا( طن

30ptإنش(

pc= كا( ك= طن

15pcإنش(

وادات اس 1ادول :CSS

CSS Box Modelوذج ادوق

رؼ ند ادث ـ ا ب بوا ت ـ ف"ودنا جذون"وأbox modelزمندن رن ف رن ؿك ؿ ـ ث HTML نإ دن

ف اداؿ إ ارج:ارض ر طت دام كؿ نوذج اندوؽ و

-نا ىوcontentنا ن و اد و ف دوو و ؿك ؿ و :.

-ازاماداpaddingا ؿ و .ام ف وى انر و ف دود:

و ؿ اطر ار منborder ادود- :.

-را ازاmargin ما ا ؿ و انر: و انر دود

.ارى اند



ا ؿكا و:ؽودنا جذون

وذج ا43اشل box modelدوق:

CSSف و ر را ؽطنا ر اوب اكـ اكؿ كؿ نط ف ذه وط.ا تارا رن صا

borderخئص ادود

CSSصا ر انر دود كـ أف اوب وborder-widthطورborder-styleوborder-color ا إ سا تاداو ىد قر ق إند ـborder-widthودا ك راد ف ردودا ؿك ف ر ن ق دنإ ـ و

مborder-styleـا ىدإ ذ فأ فك ا وdottedو طنا دودمdashed

وridgeوgrooveمدود ا وdoubleومدود ادsolidوامدود insetوoutsetدا ندمدود دودا فو ف ر نو ق دنإ و ـ

:ا ؿا

<html>

<head>



<style type="text/css"> * { direction:rtl; }

.one

{ border-style:solid; } .two

{ border-style:dashed; }

</style>

</head> <body>

<p class="one"> ب </p>

<p class="two"> مز </p>

</body>

</html>




كف دد كؿ :ظومborder-styleرأ دنإ ؽرط ص كؿ طرؼ ف أطراؼ ادود و ذؾ ف م تار و ـقborder-styleا و فا دا ؿك نا و يوما دا ؿك وا ؿ

كؿ اد ام و ارا كؿ اد ار كؿ:

border-style: dotted dashed groove double;

اأو طرؽ وborder-top-styleوborder-right-styleوborder-left-styleاردفborder-bottom-styleفوما م ؽطن ظوما هذ ف ط و border-color ضرا و

border-width.

خادا ازا صئخpadding

ا( مادا ازا راد دد ـصا ؽرط ف ف وى انر و دوده(padding-leftو را ؼرطا ازpadding-rightو فا ؼرطا ازpadding-

topو يوما اطرؼ ازpadding-bottomا ؽرط أو ف ما ؼرطا ازpaddingا د إ ذه و ؼارطا ازر سا تاداو ىد ـق ص

:ا ؿا دن مادا ازا راد ف

<html>

<head>


p

{ direction:rtl; background-color:black; color:white; } .padding

{ padding-top:25px;

padding-bottom:25px;

padding-right:50px;



padding-left:50px;

} </style>

</head> <body>

<p> خاصإ امشح ظش اج١خ ابخ ا١خ </p>

<p class="padding"> خاصا امشح ظش بخ اا١ </p>

</body> </html>


ل اخدام خئص ازا اداخ44اشل :

رخا ازا صئخmargin

ف ا( را ازا راد دد ف طرؽدودـ ارى( انر و انر

وmargin-leftاص اطرؼ ار ازmargin-rightو اطرؼ اف از



margin-topو يوما ؼرطا ازmargin-bottomؽرط ف وأ ما ؼرطا از اmargin ـق صا هذ إ د و ؼارطا ازسا تاداو ىد

مادا ازا راد ف را ا وأautoوا ضر ا رؾ ذه

:ا ؿا دن<html>

<head>


p

{ direction:rtl; background-color:black; color:white; } .margin

{ margin-top:100px;

margin-bottom:100px;

margin-right:50px;

margin-left:50px;

} </style>

</head> <body>

<p>خ١سب خاصإ امشح </p> <p class="margin">خ١سب خاصإ حشما أب </p>

</body> </html>




ل اخدام خ ازا اخر45اشل :margin

إخء ار

طرف:CSSداـHTMLنف اكف إء

ا دنإnoneا إdisplay.

ا دنإhiddenا إvisibility.

أ ر م يذا زا م ظا رنا نا رطا فأ ن ؼا و و م رؤ م يذا زا م ظا او انر دـ رطا

انر.

أواع رض ار

رنا ضر ـHTMLرط:



مك ؿكblockو رنا د رط ؿوزنا و رنا ؿق رط ؿوزنا ـ ث :

...إخ.<<divو<<pو<<h1ذه ا نرا نر ؿ يرط ؿكinlineؿوزنم ا فود رطا سن ف رنا و ـ ث :

..إخ..<<spanو<<aطر و ذه ا نرا نر ؿ

CSSف رنم ضرا طرؽ إندinlineإblockر نوع و كس ف .displayإ اinlineوblockإدى اف

شاopacity

CSSا ؽرط ر إندopacityطور اوب اكـ در انر ف ث أف ا1.0و0.0رقـ ري ف إ.ػا و روظا ـد ن. ن

.ط ؿك ـا روظا

اوfloating

ـوا رfloatد ا صا ـأ فCSSؽن و م ظمدد رن ن وادة إ رنا ـو منر ث ـ ـوا و

CSSفا إ إ أ ـوrightرا إ وأleft.

أ

و

و ءـ

)وـ

(و

مؼ

وؼ

م

ا

انر

ف

نر

ـو

ند اؿ ا:ند ـو ر فم مق ا رنا

<html>

<head>


p { direction:rtl; text-align:justify; }



img { float:right; } </style>

</head> <body>

<p>

<img src="picture1.gif" />

ز ب ظ ز ب ظ ز ب ظ ز ب ظ زز ب ظ ز ب ظ ز ب ظب ظ ز ب ظ

ز ب ظ ز ب ظ ز ب ظ ز ب ظ زب ظ ز ب ظ ز ب ظ ز ب ظ ز ب ظ

ز.ب ظ

</p>

</body>

</html> :مك بوا ضر ود يذا و



46اشل floatل اخدام خ اوم:

اورة إ اف ف انص و اؼ ـو ـ د ظ كو ـء م يذا ىوا

ـوا

د

ادد

اورة

وـ

و

دث

كف

ـ

انؽ

اكؿ

ذا

انص

اؼ

و

أرى رط وا اذ ةروا و.

ـ دة: ن ا ظا ظ و ضرا ةذن ـ رف ـوا ؼذ. ؿ كرار ذات اما و ظ ارؽ

ا فأ فا او أ نركذ ك و طfloat إ رنا ـو وـ ـ را إ وأ فاـ وا رنا و و ـء ا رنا رود ـوو

ارى و ذا وا رنا ف ردق يأ ا ـ وا رنا ؽ/وم فأ فك ط CSSا انر وار نر وود نا clear داـ

نرب ا رناراو رن دووـا ىدإ دنإ ـ ثleftندوو



رنوأ را فrightن رن دوووأ فا فbothندوو رن.فا ف

CSSت

نا طنا ؽاروأ را تما ك ـCSSف/*و*/:مك

/* comment */ Media typesأواع اوئط

CSSا ن فك ر وـ م ءن ا ؿك و رظ ص م ك و رظ ن و بوا ضر ارا دن ن ك و رظ

)ط...)إخ. اورؽ م ر دن

ف ؿ وؼ نوع ؽ ذكره ؽ قوادmediaـ و ؿق CSSعون و

mediaداوق و ؿق رآCSSةروكذا ا دن و ؿك ؽط ـ ث ىرأند اؿ ا @media:قد اػ

<html>

<head>


@media screen

{

p{

text-align:justfy

direction:rtl;



color:white;

}

body {

background-color:green;

}

}

@media print

{ p

{

text-align:justfy;

direction:rtl;

color:white;}

}

</style>

</head>

<body>

<p>

١زم٠شث ج٠ ف ا ا٠ت ز ظا زا ا اشع ابخ اشع زب ١ززاجبخ. اسق/

</p>

</body>

</html>



:مك بوا ضر ضرا دن ؽا ؿا ود

اخدام ادة47اشل :@media

:مك )ا طا ؿق نا ةذن ( اورؽ م ود و

اخدام ادة48اشل :@media



إدى اـ ا@media:كف أف ن د

ارشا

allرا ةزأauralطنا ةز

brailleما م ةدا ةزاembossedما م ةدا ةزا تطhandheldكا ةز

printطا ؿك

projection) ؽارا( زة اطscreenاوا ت

ttyد ا ةزا ؿك( (.كرق اكت ذات رض رؼ ت

tvم ا ةزا ؿكم ادةادول :@media

ف ند نء أننMediaاػقواو قد ا-نكوف مبCSSنق-ؿضارا ا تا ن و CSSؼر ا و را

نرض دوCSS3 ـ أ اف رى أف اددCSSدن ر ر فوك دما.ا

CSSدداتدل

شرح اادد

.class.Mukhtar اوا ذات انر كؿclass="Mukhtar "

#id#nameاوا ذات انر كؿ

id="name"



**نا ؿكtagpـوا رن ؿك<p>

tag,taga,pـوا نر كؿ<<aكؿ و

ـوا رن<p>tag tagdiv aـوا نر اوودة<<aكؿ

<<divداؿ

tag>tagdiv>aـوا نر اوودة<<aكؿكؿ <div>داؿ

tag+tagdiv+pـوا نر اوودة<<pكؿ<<divرة د نر

[attribute][src]اوا يو ا رنا ؿكsrc

[attribute=v][src=image.jpg]اوا يو ا رنا ؿكsrc

ا إ image.jpgند

[attribute~=v][target~=_blank]اوا وي ا انر كؿtargetيو ق إ ند

_blank

[attribute|=v][href|=http://]اوا وي ا انر كؿtargetػ دأ ق إ ندhttp://

:linka:linkم رنا ـ ـ ا طاورا كؿ :visiteda:visitedم رنا ـ ا طاورا كؿ :activea:active ؿا طارا:hover a:hover ا ةرا م ر يذا طارا:focusinput:focus ا ؿدا رن ؿك

:first-letter p:first-letter

نر كؿ

ف

رؼ

أوؿ

<p>

:first-linep:first-lineرن ؿك ف رط ؿوأ<p>



:first-childp:first-childرن اوؿ<<pكؿ اف كوفنره اب

:beforep:beforeرن ؿك ؿق ىو جاردإ<p>

:after p:after رن ؿك د ىو جاردإ<p>:lang(language)p:lang(en)رن كؿ ق<p>دد دأ

اوlangenددات2ادول :CSS



CSS 3

ظور اػ و( اوب وـ روط Web 2.0ؽاروأ ف إ ا ترظ )

اداـ

اراط

إ

ا

دوف

اوب

قاو

أؿ

ـ

ؽ

نا

را اـ و ذا د إ ظور ادار ادد ف أوراؽ انط ان و اروؼ انط

.CSS3ػ

مCSSاددة إو ف اددات و اصCSS3ؼ امد و اطو ؿ أـ اودات Moduleكؿ و ف ذه اص أو اددات ـ اودة

: ا

ددا تاددا ةدوددا تما و دودا ةدوودنا جذون ف ةدوددا صونا تارؤ ةدوةدوتوادا تاذ دناا تاذ دنا توا ةدوأكرا ةدودا ةدد تا ةدودا او ةدو

ادا ترا

كاد و كؿ أو دو ف أمب رت اوCSS3ن ػ

ػ

ارت

ذات

دـHTML5.



CSS3 Bordersادود اددة

CSS3( ا ر اوزا تاذ ادود وRound Corner Bordersإنء و )

ؿ

(اـ

ار

ف

أي

داـ

ا

دوف

و ر

Photoshop

ادت ط

ا

)

ا هذ ؽا ةدد رborder-radius ؾذ وإ ق دنرط وازك طا ةرادا ر ا اندة ف نؼ قطر قوس سا تاداو ىد

:ا ؿا دن

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>


div

{ border:2px solid #a1a1a1;

padding:10px 40px;

background:#dddddd;

width:300px;

border-radius:25px;

-moz-border-radius:25px; /* Firefox 3.6 and earlier */

} </style>

</head>

<body>



<div>The border-radius property allows you to add rounded

corners to elements.</div> </body>

</html>


اخدام خ49اشل :border-radiusور ضر

رض :ظومFirefoxو ا ـا فأ ر-moz-border-radius

كCSS3رو م د رنا دود ءنإرفك ؿك رأ ف رطر

طرف:ـ إنء اطو

repeated:روا ف ءز رارك.stretch:روا ف ءز دد.

و نا ؿكا وفرطا ف ؽرااذكورف.

رر ؿ ف روا ادود إنء اطرات اور51 اشلـ :CSS3



ا إ اورة إدى افborder-image-sourceر إند ـ repeatوأstretchا إborder-image-repeatإ كؿ اطر رض إند ـ

اborder-image-widthفا إ كؿ ن قـ إند -borderو

image-sliceوborder-image-outsetهدد أو كراره اذي ـ اورة زء ددن اطر.

كف اداـ ا ارة :ظومborder-image و ا صا border-image:source slice width outside repeat;

ن اطر: تر ا ةروا م د يذا ا ؿا دن<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"


<html>

<head>


div

{ border-width:15px;

width:250px;

padding:10px 20px;

-webkit-border-image:url(border.png) 30 30 stretch;

} </style>

</head>

<body> <div> Here, the image is stretched to fill the area.</div>



</body>

</html>


اطر اوري رض ول رو5اشل :

رض :ظومFirefoxادا ر-moz-دـ و هأ اذكورة اص أء قؿSafariوChromeدا فد-webkit-ضر وOperaدا ـد-o-

CSS3

ا

ر

نر

ظؿ

إنء

أbox-shadow

ق

إ

ند

ا

و ند اؿ ا:ون ر ف وف اظؿ و قـ كؿ ر ف إدات ا ؿظ



<html>

<head>


div

{ width:300px;

height:100px;

background-color:yellow;



-webkit-box-shadow: 10px 10px 5px #888888;

} </style>

</head>

<body> <div></div>

</body>

</html>


خ اظ52اشل رض رو د:

ر ـد :ظومSafariوChromeدا-webkit-ا ـا ؿق

CSS3 Backgroundsاخت اددة

CSS3ؿك تم اوب م اكـ طور ف ددف دة إ ـ ا وا ؿأbackground-sizeةروا أد ا دد امو

مورة و و ـ ما دا ف ؼم اورة كم أد كؿ طء

قؿ ـ اداـ ذه ا كمCSS3:كف كن



background-size: 80px 60px;

.را إ ر نا فأ ف ةروا اوؿ إ رض قـرا ن

:ظومضرFirefoxد ا ؽ-moz-

ا نا ا أbackground-originجذون أزاء أد دد ا و إدى اـ طؽcontext-boxاندوؽ ـ طؽ ام م أ و كف أف ذ

أو وى ادد اطؿ م ماpadding-boxؿطا م ما طؽ أو مادا ازا و ىو دداborder-boxددا ؿطا م ما ؽط

.ا تطا ف ؽرا و ا ؿكا و دود و مادا از و ىو

وذج اد53اشل : خا خ قCSS3

ر :ظومSafariوChromeدا ـادا ـ-webkit-

ما إ تأ ا تنا فCSS3 ةرو اح أكر ف م ىرا و م ؿك ف ؿا ر ؾذ و رنا سن مك تقوا سن:ؿك

background-image:url(back1.gif),url(back2.png);



CSS3اوص اددخئص ق

صونا ؽن ف اص اددة و إ نرCSS3ـ:ا

ادوؿخاا مارشا

hanging-punctuationnoneوأfirstوأlastوأallow-

endوأforce-

end

و دودادد رج ـقر<<pانر

punctuation-trimstartوأendوأallow-endوأ

adjacentوأnone

ا ف دا كؿ ـقرا ؿز<<pطر ف أطر

text-justifyauto

أوinter-

wordوأinter-

ideographوأinter-cluster وأ

distributeوأkashidaوأtrim

كوف

دن

اذاة

ؽ

رط

دد ا قtext-alignػ وJustify

text-outlineر كؿ ق ق و ضرا ف ف ر نو

اموف

را ادود وف و رض ددمنص

text-overflowclipوأellipsisوأ

string

دد اذي ـ م ند طوؿ

يوا رنا ف ؿوطأ صنا



text-shadowو رقف قفنو ق

ؼ ظ منص

text-wrapnoneوأnormal

unrestrictedأوsuppressأو

رط ددونا ؼا

word-breaknormalوأbreak-allوأ

hyphenate

موطا تمكا ـ رط دد

word-wrapnormalوأword-break

ؽ اؼ انوص ر ـ وـاكمت اطوم نء م اطر اددة

ا word-breakخئص ق اوص اددة 3ادول :CSS3

ذه اص:إدرض اؿ ا اداـ



<html>

<head>


h1

{ text-shadow: 5px 5px 5px #FF0000;

} </style>

</head>

<body>



<h1>ا ا </h1> </body>

</html>

ةددا طوطخا صئخCSS3

CSSةدووا امد كف ف واب طوري ت اوب اداـ اطوط ا و م ردق فك ـ ضرا فأ ؾذ و ا راوز باو بمأ ر ط يأ ضر

قوا طوط وب زار أي CSS3وود فأ كف اداـ

ا إ ره إند و و مؼ اط ف مت اوق و اوب د src و ا دـ كم@font-face:دة مك ةددا

وأ- ةدد م ـا ؼر ـةدا ـاد@font-face.

ن-ا إ كؿ مدي.font-familyند اـ ام اذي

رض :ظومInternet Exploer عونا اطوط ذات ق ارت.eotدـ دـ ن ط .otfو .ttfانوف

:ا ؿا دن



<html>

<head>


@font-face

{ font-family: myFont;



src: url('Sansation_Light.ttf')

,url('Sansation_Light.eot') format("opentype"); /* IE */

} div

{ font-family:myFont;

} </style>

</head>

<body> <div>

ا ا ؽ أ ازا ى٠

</div> </body>

</html>

2D Transformationاوت اد ذات ادن

ننكCSS3بنك ا نر م اد ن دن وت إراء فtranslateرودا ر اـrotateو رscaleو اوؿ إو او أد ند

اtransform.

رض :ظومInternet Explorer دا ا-ms-دـ رضقؿ و اFirefox

دا ـد-moz-ضر وOperaدا ـد-o-ر وChromeوSafariفد دا-webkit-

و ادوؿ ا رض وا اوؿ اددة:



ارشا

translate(x,y) ةرا تادا إ رنا ؿنtranslateX(n)روا م رنا ؿنXn

translate(n)روا م رنا ؿنYnscale(x,y) فررا ر دي انر إ ادف scaleX(n)رنا د رXإاn

scaleY(n)رنا د رYا إn

rotate(α)واز رنا رود وـα

skew(Xα,Yα)

ازاوف

وؽ

انراؼ

وؿ

راء

وـXα

وYα

skewX(α)روا م ؼارنا ؿو ءار وـXوازا ؽوα

skewY(α)روا م ؼارنا ؿو ءار وـYوازا ؽوα

وا اول اد ئ اد 4ادول :CSS3

:ا ؿا دن



<html>

<head>


div

{ -webkit-transform:skew(30deg,20deg);

width:100px;

height:75px;

background-color:red;

border:1px solid black;



} </style>

</head>

<body>

<div>It is CSS3 Magic!</div>

</body>

</html>

ود يذا و:مك بوا ضر

رض ول روSkewل ول:54اشل

ارؼ :ظومdegرد ن ؿوا إ ـقرا د رر ذؾ ز فdegreeا ـ و

رز ارؼ radارادف و اذي



3D transformationاوت اد اد

CSS3نا م دا دن تو ـاك و ؽا بوما سن:ا

ادوؿ

ر

ا

اوا

داـارشا

translate3d(x,y,z) ةرا تادا إ رنا ؿنtranslateX(n) رنا ؿنnروا مX

translateY(n) رنا ؿنnروا مY

translateZ(n) رنا ؿنnروا مZscale3d(x,y,z) ةرا دا إ رنا دأ ر

scaleX(n)رنا د رXرادا إn

scaleY(n)رنا د رYرادا إn

scaleZ(n)رنا د رZرادا إn

rotate3d(x,y,z,α)واز ا روا م رنا رود وـ رادα

rotateX(α)روا م رنا رود وـXوازα

rotateY(α)روا م رنا رود وـYوازα

rotateZ(α)روا م رنا رود وـZوازα

perspective(n)ؤرا روظن دداوت اد اد 5ادول :CSS3

Transitionال ارك

طر م و زة نء ر م نر اند رؼ ذا ار اصCSS3ور CSSث ـ طؽ قدةtransitionو اذي ـ ر اـ انؿ ارؾ

م ف ادة ام منر ؿ زف دد ظر انر كؿ رؾ.



:ا ؽرط ف

transition: property duration;

ازف و كف رdurationف اـ ا ا ر وpropertyث ر ر ف : ف ركأ

transition: property1 duration1, property2 duration2,… etc; :ا ؿا دن



<html>

<head>


div

{ width:100px;

height:100px;

background:red;

-webkit-transition:width 2s, height 2s;

} div:hover

{ width:200px;

height:200px;

webkit-transform:rotate(180deg);

}



</style>

</head>

<body>

<div>Hover over me to see the transition effect!</div>

</body>

</html>

ا تدا ركذأ ف :ظوما م تدا ؾنأ ضرا ف ن ةرا ترا دهون وارؼ ازف نsإ أف secondد ا ارق ن أف

CSS3رت

CSS3ـادا ف بوا روط ن بوا تكر إنء

اػ

ور.gif

رات

أو

كراflash

اركت

إنء

ـ

و

ا

ف

ر

و طوف:

وأ-ةدا كرم ص اـ رؼ دد@keyframeـ ر دد و ادا واfromنا وا وtoوا ف ؿنا ـ كرا ؽط دن ط و

نا وا إ رنم ادا.كر رن نم نز ةر ؿ

ن-ا دنإ ـكراذن فز وا إanimation.رن ا

:ا ؿا دن



<html>



<head>


div

{ width:100px;

height:100px;

background:red;

-webkit-animation:myAnimation 5s;

} @-webkit-keyframes myAnimation

{ from {background:red;}

to {background:yellow;}

} </style>

</head>

<body> <div></div>

</body>

</html>

اؿ اؽ رض إنء رك د م ا ادا و ا ان منر أنءرك و ا ان رارك ث أف ا ادا ر ف كؿ انر ظ دء ا

.كرا ن ظ رنا ؿك ف



CSSكف ص كؿ انر كؿ ظ ف ظت ارك ر إنء قدة كؿ:@keyframesذه امظ ف قدة

@-webkit-keyframes myAnimation

{ 0% {background:red;}

15% {backgroung:green;width:150px;color:white;}

50% {height:350px;}

100% {background:yellow;}

}

ر فن ظ ن و اـ ار100%ن ظ دا ارك و0%ث أفأنء دوث ارك.رات

دث ذه ارات أنء ارك و ود :ظومكرا انر إ كم اط ند انء

ةددا ةداCSS3

CSS3ةدد ةدأ ؿك م رنا ىو ضرMulti-Columnsأد م(

طرف:اراد(

وا-

ر

و

ت

أدة

إودد

ادة

دد

إند

ؿ

ف

ذؾ

ـ

و:

ر اcolumn-countضر ر و ةدا ف روكذا ددا إ ىوا ـ اادة ر ـ نذة ارض.

نا-إ داوا و ـ ذؾ ف ؿ رض اود رض ود ت و دد أدة ر: اcolumn-widthا إ فدو ؿك ف ا وcolumn-gapهذ



نذة ـ ر دد ر و ن كؿ ت رض م ادة ظ رطاارض.

ص ادة اددة. ةروكذا تدا سن ـد :ظوم

:وا رط ةددا ةدا ءنإ ضر ا ؿا



<html>

<head>


.newspaper

{ -webkit-column-count:3;

} </style>

</head>

<body> <div class="newspaper">

this is a sample content this is a sample content this is a

sample content this is a sample content this is a sample contentthis is a sample content this is a sample content this is a

sample content this is a sample content this is a sample content







this is a sample content this is a sample content.



</div>

</body>

</html>

رض اوب كم:اؿ ادو

إشء وى دة ددة ددة ادد.55اشل :

ا ؽرط column-ruleكف و واؿ ذات ظر و وف ددف ف ادة ف

:ا ؿم ؿك

column-rule: 4px dotted black;

CSS3 User Interfaceوا اخدم

دق CSS3 ف زات فف و قدت د اوب ت

:ا ؿودا ر ا صا ر م نا ـدم تنا



خاا مارشا

appearancenormalوأiconوأwindowوأbuttonوأ

menuوأfield

)كؿ(دد ك اوب رضف انرض انر

iconautoوأinheritطار وأورة

نوأ ؿك رن ؿ

nav-down

nav-left

nav-rightوnav-up

autoوأinheritوأ أو انر أد رؼ

اـ إطر

ط دن انؿ ـ أف دد و اـ م ادـ

ا

nav-indexو ددتط دد إ اند ادد دد إ انرTabح نؿ زا

أو كؿ أدؽ مؿ انؿ ف انر Tabند اط م ح

resizenoneوأhorizontalوأverticalوأboth

مدـ اوح ف إذاكف ددكؿ دوdivر ـ أد نر

خئص وا اخدم اددة 56اشل :CSS3

CSS3ددات

اددة

اددات

ف

و

إ

ـCSS3

ا

ادوؿ

رن:

شرح اادد

tag1~tag2p~ulؽو ر ر ق نر كؿرة نر

tag[attribute^=v]a[href^="https"]ـق دأ ا ارواط نر كؿ

اوhref https



tag[attribute$=v]a[href$=".xml"]إ ر ا ارواط نر كؿانوع .xmlمت ف

tag[attribute*=v]a[href*="micro"]إ ر ا ارواط نر كؿ

ا يو فونmicro:first-of-typep:first-of-typeرن ؿك دد<p>رنا فوك

اف اوؿ ف نو ن نره اب

:last-of-typep:last-of-typeرن ؿك دد<p>رنا فوكاف ار ف نو ن نره

اب:only-of-typep:only-of-typeرن ؿك دد<p>رنا فوك

اف اود ف نو ن نره اب

:only-childp:only-childرن كؿ اف<<pدد كوف

اود نره اب:nth-child(n)p:nth-child(2)رن كؿ اف<<pدد كوف

ان نره اب:nth-last-child(n)p:nth-last-child(2)رن كؿ اف<<pدد كوف

اب دء اد ف نره نا

اف ار:nth-of-type(n)p:nth-of-type(2)رن كؿ اف<<pدد كوف

ا هرن نا:last-childp:last-childرن كؿ اف<<pدد كوف

ار نره اب:root:rootنم رذا رنا دد

:emptyp:emptyرن كؿ د<p>دد



اوى:target#news:targetرن اؿ#newsدد

اووؿ إ ر انر )اذي ـ

) ماد إ ر طار م :enabledinput:enabledما ؿدا رن ؿك:disabledinput:disabledما ر ؿدا رن ؿك:checkedinput:checkedرا ؿدا رن ؿك

:not(selector):not(p)رن اد رنا ؿك<p>

::selection::selectionـدا قـ اذي انر زءدده

اددات اددة 6ادول :CSS3



خا

رح CSS3ذا نكوف قد ومن إ ن دن ف و ذا كوف اكب قد و وده HTML5CSS3

وار

ا

ر

قطت

قد أنت

كوف

ذا

و ط

و ؼ

ك

و ن قد كؿ بوا ر ـما و ؟د اذ و : (ف اطوة اءؿ ـزأ ك(

ـ اطوة ا مـ إدى ت ار ف jQueryأو Java Scriptأف مـ اطرؽ نو بكوف قد قطت ASP.NETأوPHPؿطرؼ ارر ف طور"%

أ اػ" Web Developerوب قا %ك-أر-مرا و را ضن

.ادا ا و ةرا ةءارا ر ذ و ط فا ردا م ءا و م ـ دق اذ ك فوك فأ أطإ ف ةد ةركHTML5وCSS3ؿأ و

أ اف ركؾ ر ال و ظال أف كوف أمو رض اكر قد راقؾ و أرؾ بوم روطا ـ و د مر أزاؿ أو ـو دو ؾ ن و أنوه أ

نوركا ردي م ار أو اقراح ي أرب و ـ أ و اوب[email protected].كر و لا ر و ـكم ـا و





ارس





رس اشل

.......................اماكررنHTMLرأوك:اك

اكؿ:

داكوواراناكHTML.............

................alignاذاواإن<<pانورن:اكؿ

.................................................انونا:اكؿ

..................................................</ <hrانر:اكؿ

.اظادرنذاموظام:اكؿ

.........................................انوننا:اكؿ

..............................اااردا:اكؿ

...................................................اروانا:اكؿ

..................................................اونا:اكؿ

...........................مرواكوانوداوادا:اكؿ

................................................وررطنم:اكؿ

...........................انطراندادومك:اكؿ

..................................................طر:اكؿ

..................................................طرقم:اكؿ

اكؿ:

مقد.........................................................

...................................اراطمقدكذ:اكؿ

..........................ادوناماووومك:اكؿ

...................................................دوإنم:اكؿ

.....................................HTMLادوقور:اكؿ

..............................................HTMLدون:اكؿ

http://e/%D9%85%D8%A4%D9%84%D9%91%D9%8E%D9%81%D8%A7%D8%AA%D9%8A/%D8%A7%D9%84%D9%85%D8%B9%D9%84%D9%88%D9%85%D8%A7%D8%AA%D9%8A%D9%91%D9%8E%D8%A9/%D8%AA%D8%B9%D9%84%D9%85%20HTML5%20%D9%88%20CSS3%20%D9%81%D9%8A%20120%20%D8%AF%D9%82%D9%8A%D9%82%D8%A9/%D8%AA%D8%B9%D9%84%D9%85%20HTML5%20%D9%88%20CSS3%20%D9%81%D9%8A%20120%20%D8%AF%D9%82%D9%8A%D9%82%D8%A9.docx%23_Toc302559767














.rowspancolspanاوادادوإنم:اكؿ

..................................................نوذإنم:اكؿ

........................................................مأنوذإن:اكؿ

......................................checkboxradioادام:اكؿ

.............................................selectنادام:اكؿ

.........................................textareaانادام:اكؿ

..................................................fieldSetادام:اكؿ

...............................................ودكاطراادا:اكؿ

..................................................أكاطراادا:اكؿ

..............كرووردكادادرن:اكؿ

............كرووردكاداورن:اكؿ

...........................كروردكاددادن:اكؿ

..........................................انوظادا:اكؿ..................................................اطوادا:اكؿ

زراارامانظارواظادكذ:اكؿنا....................................................................................

...................................امادكذ:اكؿ

.........اوراواظادكذ:اكؿ

........................................اداوظنCSSوظ:اكؿ

....................CSSانوادام:اكؿ

......................................z-indexاادام:اكؿ

...............اكاوذامنارأرطرم:اكؿ

...............................................box modelاندونوذ:اكؿ



................................ادامازاادام:اكؿ

..........................marginارازاادام:اكؿ

.....................................floatاوادام:اكؿ

..................................................@mediaادادا:اكؿ

..................................................@mediaادادا:اكؿ

.......................كرورborder-radiusادا:اكؿ

...............................................CSS3اوراطرا:اكؿ

...................................كرووراوراط:اكؿ

...................................كروردكاظ:اكؿ

.........................CSS3امناندونوذ:اكؿ

..........................كروورSkewوم:اكؿ

.....................................اددددددوإن:اكؿ

...............................CSS3اددادوا:اكؿ















رس اداول

...........................HTMLنأماركاوادو:ادوؿ

ادوؿ:

رااHTML...........................................

.........................<<inputناtypeموااما:ادوؿ

.............................................................HTMLوود:ادوؿ

....................................................<<videoانوا:ادوؿ

....................................................<<videoانوا:ادوؿ

..................................HTML 5اددادنأنوا:ادوؿ

.........................................<<canvasانكطر:ادوؿ

.............................................HTML 5ادداوود:ادوؿ

...................................................CSSاوادا:ادوؿ

......................................................@mediaادق:ادوؿ

.............................................................CSSددا:ادوؿ

.............................CSS3اددانون:واد

...............................CSS3انانداووا:ادوؿ

...............................CSS3اانداو:ادوؿ

ادوؿ:

اددادداCSS3..............................................





رس اوت

.........................................................................اداء

ون...........................................................................

...............................................................اكدف

د........................................................................

HTML...............................................................

......................................HTMLنداكمأدكؼ

....................................................HTMLاواؿ

................................................................HTMLنر

WHITEارات SPACES.......................................................

...................................................HTMLنااكؿ

..................................................HTMLااكؿ

................................................... ATTRIBUTESاوووات

....................................................HEADINGSانونر

HORIZONTALاانر LINE..........................................

..........................................................COMMENTSامت

...............................................P ARAGRAPHSانونر



TEXTانوننر FORMATTING....................................

SPECIALااروارؼ CHARACTERS...............................

HYPERاروانر LINKS..................................................

.......................................................IMAGESاونر

..............................................اروانوداور

IMAGEاوراراط M APS.................................................

INTERNALادامارواط LINKING..............................................

ـاواLISTS..................................................................

...............................................................T ABLESاداوؿ

.........................................................اطاداوؿ

...............................................................FORMSانذج

.........................................وإادنـ

.............................................................FRAMESاطرات

..............................................................METAانر

.............................................................HTMLوودؿ

XHTML......................................................................

................................................................XHTMLقواد

.............................................<<!DOCTYPEاننورؼ

.......................................................منامانواع

............................................XHTMLاؽ



HTML5......................................................................

.........................................HTML 5ادااورت

..........................................................VIDEOادنر

........................................................ AUDIOاونر

.......................................................FORMSانذنر

........................................................C ANVASارنر

...............................................اطرانزف

...............................................HTML 5ادداوودؿ

د........................................................................

CSS................................................................

مكروطواقCSS................................................

........................................................CSSاداادء

...............................................................CSSرات

.................................................انوظص

...................................................FONTSاطوص

....................................................ارواظص

...........................................B ACKGROUNDSامص

.....................................................اواظص

...................................................اداوظص

............................................POSITIONINGوص



.....................................................CSSاوادات

CSS BOXاندونوذج MODEL...........................................

...................................................BORDERادوص

..........................................PADDINGادامازاص

..........................................MARGINارازاص

.............................................................انإء

.......................................................انرأنواع

اOPACITY............................................................

ـواFLOATING............................................................

...............................................................CSSمت

..................................................MEDIA TYPESاوأنواع

.........................................................CSSددادؿ

CSS 3.....................................................................

.......................................................اداارت

..............................................CSS3 BORDERSاددادود

.......................................CSS3 B ACKGROUNDSاددامت

................................CSS3اددانونص

........................................CSS3ادداطوص

........................2D TRANSFORMATIONادذاانداوت

3Dاانداوت TRANSFORMATION.......................



................................................TRANSITIONارنا

..............................................................CSS3ركت

..................................................CSS3اددادة

اوداCSS3 USER INTERFACE......................................

.............................................................CSS3ددات

ا.....................................................................

.............................................................اكرس

..............................................................اداورس

...........................................................اورس





ن ؤف اب

)اذ ةر (

دأ

اوت خشا

داؤػػػػػ رػػػػ : رػػػػػا ـػػػ ػ ا د .

روػػ : .-اوكؿ-كػػف و ػػرخ اػػد

ػػراػػـ : ػػدا ؿػػ رػػاكا.

ال ا

بػػوا تػػػن ػػ رػػ-روػػا طػػب ػػػ-اػػ اراػػػر.

دػ دػ ؿدػ ػوما و بوا دن ةزإ-روػا ػا ودا-.

ز نور وكؿ-امارع-نو .-نو

اخرات

ا

بػػػو تػػػ ر سدػػػن-فػػػ ػػػػػػػػػػػػػػػػػػػػػػػو-

ػػػػػػػػػوونكم رـػػػػػػػػػ كرػػػػػػػػػ-

.دؽ

تػػ ر سدػػن-رػػ ؿػػ-ػػػػػػػػػػػػػػػػػػػ فػػػػػػػػػػػػػػػػػػػو

.

ـػػػػ ذػػػػن ادػػػػا ؿػػػػم غ ػػػػ.

ػػػنا ـ ػػػ ػػػرػػدأ ػػػر ػػػ م اد ا.



ن إداراه

ػػػ ػػػروع اراػػػدي ػػػف انظر ػرا ؽػطا -بػك

نػػػػػػػػػ ػػػػػػػػػنوركإ-ؽػػػػػػػػػد

.HTML5 & CSS3ةوػطا

– اوػػػ نػػػو وػػػب اػػػػؿ

نػػػػػػػػػػ ػػػػػػػػػػنوركإ بػػػػػػػػػػك –

.-اوكؿ

ػ jQueryػػقد-ػػػػػػكروػػػػػػكم دروػػػػػػا-

.-دؽ

3D Game Studioؾػرطمػػػؽ-نػػػو رػػػ اػػػب

ػػ ػػ نػػF1 ػػ نا

.-دؽ-فػػػػ ةرػػػػك ػػػػو ػػػػ ترػػػػ

ػػػ ػػػ ػػػدد ػػػف اػػػت اناػػػػػػػػػػػػػػػػػػػػػػػػت اطوػػػػػػػػػػػػػػػػػػػػػػػػ و

ا .اكرون

بػػػا ػػ ػػ-رػػ-ػػػادة قرػػػػػػػػػػ ـػػػػػػػػػػا و ػػػػػػػػػػا-

.

راتال را

Desktop: C#, VB.NET, VB6, Java.

Web:

o Server-Side: ASP.NET classic and ASP.NET MVC,

PHP Classic & PHP MVC using CodeIginiter

framework., JSP.



o Client-Side: HTML 5, CSS 3, java script & jQuery.

o Technologies: XML, JSON.

Smart phones: Android programming.

-Access.

-Word, MS-PowerPoint, Photoshop, Maintenance

skills اوائز واشرت

ـػ و ػر ؿػأ ػ

ػ ن

وػب

قو ASP.NET

ػػػػػػػػػػػقو ؿػػػػػػػػػػػق فػػػػػػػػػػػ ػػػػػػػػػػػظنا- vb4arab.comارف

ػقو عورػ فػ ؿوا زػكرا.ـ– دن أوكؿ

ػػػػػػػزكرا ػػػػػػػوما ػػػػػػػ-ػ اػث-ا رة

.ص

نػػػػػػػػػػػا ػػػػػػػػػػػما رؤػػػػػػػػػػػا –

وـػػمم ػػودا روػػا ػػا وونكا و –ؽد.

ػػػػػػػ اػػػػػػػوري وما دػػػػػػػوأ ػػػػػػػػػػػارا-ػػػػػػػػػػػػما ػػػػػػػػػػػػا

ػػػػػومم روػػػػػا-ؽػػػػػد.

ػػػػػػػزكرا ػػػػػػػوما ػػػػػػػػػ اػػث-ادػػ ػػرة

.ص–

ءارػػا رػػأ فػػر تػػ-

اػػػػػػػػػػػس

ػـػػػػػػػػػػوا-

اػػػػػػػػػػػرات ادة را-.

ػػػػرا عادػػػػ قرػػػػا ةزػػػػ-

اػدة را تارا-زػكرا.-اوؿ

ءارػػا رػػأ فػػر تػػ-

ػػػارا ػـػػوا-ػػػ را تارػػػا.-ادة

زػػػػػػػػمطم يرػػػػ ا عادػػػػا-

ػودا روػا ػا-زػكرا.-اوؿ

رؾ دد كػر ػف اػتارنػػػػػػػػػػت اػػػػػػػػػػر داػػػػػػػػػػؿ و

رو.



ػػػػػػػزكرا ػػػػػػػوما ػػػػػػػػػنا –رػػ ػػ-

.اذق

ػػػت(اػػراعامػػػػػػػػػ اػػػػػػػػػس ػػػػػػػػػداع و را ػػػرو( –

.ة

ثػػػػػػػػػػػػػػػػا ػػػػػػػػػػػػػػػػرا ػػػػػػػػػػػػػػػػما ػػػػػػػػػػرو( مػػػػػػػػػػرف اػػػػػػػػػػب

– مػػػػب– ارػػػػت(

اركز اث ف ػروع نظػـ وا تاوا بك.

يروػػػػػػػا ػػػػػػػ وما دػػػػػػػوأ

Documents

Learn Html5 and Css3 (Arabic)