الموقع العربي الاول للعبة Silkroad Online

الموقع العربي الاول للعبة Silkroad Online (https://silkroad4arab.com/vb/index.php)
-   قسم شروحات لغات البرمجة و التطوير (https://silkroad4arab.com/vb/forumdisplay.php?f=407)
-   -   [HTML/CSS] تعلم HTML : دورة احتراف لغة الـ HTML من الالف الى الياء ( تابع للدرس الثالث ) . (https://silkroad4arab.com/vb/showthread.php?t=567475)

3ashek El7ozn 20-09-2014 05:59 AM
تعلم HTML : دورة احتراف لغة الـ HTML من الالف الى الياء ( تابع للدرس الثالث ) .
 
http://im61.gulfup.com/GBda5Q.png
الجزء الثانى من الدرس الثالث لدورة الـ HTML .
http://im55.gulfup.com/QxQsXY.gif
أهلا وسهلا بكم اعضاء و زوار منتدى Silkroad4arab .
سوف نقوم بتكملة الدرس الثالث { الخطوط } .
http://im55.gulfup.com/QxQsXY.gif
لمتابعة الدرس من بدايته يرجى الضغط على >> تعلم HTML : دورة احتراف لغة الـ HTML من الالف الى الياء ( الدرس الثالث ) .
http://im55.gulfup.com/QxQsXY.gif
انتهينا من توضيح ما تم شرحه فى الدرس السابق ..
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
والآن نعود الى درس اليوم ,,
كنا قد راينا بعض الامثلة على الخطوط فى الدرس السابق >>
اقتباس:
المشاركة الأصلية كتبت بواسطة 3ashek El7ozn (المشاركة 5109171)
والآن دعونا نرى بعض الامثلة على ما سبق شرحه ,,
قم بتطبيق الشرح ولا تقم بنسخ الكود ..
كود بلغة HTML:
<HTML>
<HEAD>
<TITLE>My First  HTML  Page</TITLE>
</HEAD>
<BODY>
<FONT FACE="Andalus" SIZE="6" COLOR="#FF0000">
HTML Guide By 3ashek El7ozn Silkroad4arab Forum
</FONT>
</BODY>
</HTML>
النتيجة ,,
http://im74.gulfup.com/34zp1z.png

http://im55.gulfup.com/QxQsXY.gif

كود بلغة HTML:
<HTML>
<HEAD>
<TITLE>My First  HTML  Page</TITLE>
</HEAD>
<BODY>
<FONT FACE="Andalus" SIZE="+4" COLOR="#FF0000">
HTML Guide By 3ashek El7ozn Silkroad4arab Forum
</FONT>
</BODY>
</HTML>
النتيجة ,,
http://im46.gulfup.com/31wh4r.png
http://im55.gulfup.com/QxQsXY.gif
والآن دعونا نستكمل درسنا اليوم ,,
نص واحد او سطر كامل بالوان و احجام و خطوط و تنسيقات متعددتة ....
كود بلغة HTML:
<HTML>
<HEAD>
<TITLE>My First  HTML  Page</TITLE>
</HEAD>
<BODY>
<FONT FACE="Arial" SIZE="5" COLOR="000000"> HTML </FONT>
<FONT FACE="Andalus" SIZE="3" COLOR="00FF00"> Guide </FONT>
<FONT FACE="Impact" SIZE="4" COLOR="FF0000"> By </FONT>
<FONT FACE="Courier" SIZE="6" COLOR="0000FF"> 3ashek </FONT>
<FONT FACE="Arial" SIZE="5" COLOR="00FF00"> El7ozn </FONT>
<FONT FACE="Andalus" SIZE="2" COLOR="FF00FF"> & </FONT>
<FONT FACE="Impact" SIZE="5" COLOR="808080"> Silk </FONT>
<FONT FACE="Courier" SIZE="4" COLOR="800000"> road </FONT>
<FONT FACE="Arial" SIZE="5" COLOR="00FFF0"> 4 </FONT>
<FONT FACE="Andalus" SIZE="3" COLOR="F23654"> arab </FONT>
</BODY>
</HTML>
النتيجة ,,
http://im82.gulfup.com/wsZFXN.png
http://im55.gulfup.com/QxQsXY.gif
والآن سوف ننتقل الى جزء آخر من درسنا اليوم عن الخطوط ,,
الوسم <BASEFONT> .
دعونا نتعرف على ما يقوم به هذا الوسم !!
يقوم هذا الوسم بتحديد نوع الخط وخصائصه بالنسبة للصفحة كلها , أي أنه يقوم بتعريف نوع الخط الأساسي الذي سيستخدم في الصفحة من بدايتها إلى نهايتها ويحدد لونه وحجمه .
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
ملحوظة :-
هذا الوسم ليس له نهاية اى <BASEFONT/> فقط يتم كتابته بهذا الشكل <BASEFONT> .
ويفضل كتابته مباشرة بعد الوسم <BODY> .
كما اننا نستطيع ان نستخدم معه الخاصية NAME بدلا من FACE .
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
واليكم مثالا حيا على ما تم ذكره .

كود بلغة HTML:
<HTML>
<HEAD>
<TITLE>My First  HTML  Page</TITLE>
</HEAD>
<BODY>
<BASEFONT Name="Andalus" COLOR="#FF0000" SIZE="5">‎
<FONT>HTML Guide By 3ashek El7ozn Silkroad4arab Forum</FONT>
</BODY>
</HTML>
النتيجة ,,
http://im85.gulfup.com/jjjzcr.png

*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
لاحظنا فى المثال السابق اننا قد استخدمنا مع الوسم <BASEFONT> الخط Andalus واللون FF0000 والحجم 5 .
كما ان الوسم <BASEFONT> لا يتعارض مع الخاصية COLOR حيث انك تستطيع بكل سهولة تغيير لون نص ما تريده بعيدا عن النص الاساسى المحدد بلون مع الوسم <BASEFONT> واليك مثال ,,

كود بلغة HTML:
<HTML>
<HEAD>
<TITLE>My First  HTML  Page</TITLE>
</HEAD>
<BODY>
<BASEFONT Name="Andalus" COLOR="#FF0000" SIZE="5">‎
<FONT>HTML Guide By 3ashek El7ozn </FONT>
<FONT COLOR="0000FF">& Silkroad4arab Forum</FONT>
</BODY>
</HTML>
النتيجة ,,
http://im90.gulfup.com/HtYltu.png

http://im55.gulfup.com/QxQsXY.gif

ناتى لطريقة تمييز عناوين الصفحة ,,
هناك وسوم خاصة تستخدم لتمييز العناوين Headings في صفحات الإنترنت وهي <H>___</H> .
حيث يتم اضافة ارقام من 1 الى 6 الى الوسم <H> وهى تعبر عن الحجم حيث 1 هو اكبر حجم بينما 6 هو اصغر حجم واليكم مثال ,,
كود بلغة HTML:
<HTML>
<HEAD>
<TITLE>My First  HTML  Page</TITLE>
</HEAD>
<BODY>
<H1>HTML Guide By 3ashek El7ozn & Silkroad4arab Forum</H1>
<H2>HTML Guide By 3ashek El7ozn & Silkroad4arab Forum</H2>
<H3>HTML Guide By 3ashek El7ozn & Silkroad4arab Forum</H3>
<H4>HTML Guide By 3ashek El7ozn & Silkroad4arab Forum</H4>
<H5>HTML Guide By 3ashek El7ozn & Silkroad4arab Forum</H5>
<H6>HTML Guide By 3ashek El7ozn & Silkroad4arab Forum</H6>
</BODY>
</HTML>
النتيجة ,,
http://im68.gulfup.com/KxVgfh.png
http://im55.gulfup.com/QxQsXY.gif
والآن جاء وقت التنسيقات والتأثيرات فى الخطوط تابع جيدا .
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
الخط العريض ويستخدم معه الوسمين <B>___</B> .
كود بلغة HTML:
<HTML>
<HEAD>
<TITLE>My First  HTML  Page</TITLE>
</HEAD>
<BODY>
HTML Guide By <B>3ashek El7ozn</B> & Silkroad4arab Forum
</BODY>
</HTML>
النتيجة ,,
http://im84.gulfup.com/AE9E83.png
http://im55.gulfup.com/QxQsXY.gif
الخط المائل ويستخدم معه الوسمين <I>___</I> او <EM>___</EM> .
كود بلغة HTML:
<HTML>
<HEAD>
<TITLE>My First  HTML  Page</TITLE>
</HEAD>
<BODY>
HTML Guide By <I>3ashek El7ozn</I> & Silkroad4arab Forum
<BR>
HTML Guide By <EM>3ashek El7ozn</EM> & Silkroad4arab Forum
</BODY>
</HTML>
النتيجة ,,
http://im84.gulfup.com/gQNyGv.png
http://im55.gulfup.com/QxQsXY.gif
الخط المسطر ويستخدم معه الوسمين <U>___</U> .
كود بلغة HTML:
<HTML>
<HEAD>
<TITLE>My First  HTML  Page</TITLE>
</HEAD>
<BODY>
HTML Guide By <U>3ashek El7ozn</U> & Silkroad4arab Forum
</BODY>
</HTML>
النتيجة ,,
http://im78.gulfup.com/O1qz1T.png
http://im55.gulfup.com/QxQsXY.gif
الخط المرتفع ويستخدم معه الوسمين <SUP>___</SUP> .
كود بلغة HTML:
<HTML>
<HEAD>
<TITLE>My First  HTML  Page</TITLE>
</HEAD>
<BODY>
HTML Guide By <SUP>3ashek El7ozn</SUP> & Silkroad4arab Forum
</BODY>
</HTML>
النتيجة ,,
http://im78.gulfup.com/GbL1yv.png
http://im55.gulfup.com/QxQsXY.gif
الخط المنخفض ويستخدم معه الوسمين <SUB>___</SUB> .
كود بلغة HTML:
<HTML>
<HEAD>
<TITLE>My First  HTML  Page</TITLE>
</HEAD>
<BODY>
HTML Guide By <SUB>3ashek El7ozn</SUB> & Silkroad4arab Forum
</BODY>
</HTML>
النتيجة ,,
http://im84.gulfup.com/4yznwR.png
http://im55.gulfup.com/QxQsXY.gif
الخط الكبير ويستخدم معه الوسمين <BIG>___</BIG> .
كود بلغة HTML:
<HTML>
<HEAD>
<TITLE>My First  HTML  Page</TITLE>
</HEAD>
<BODY>
HTML Guide By <BIG>3ashek El7ozn</BIG> & Silkroad4arab Forum
</BODY>
</HTML>
النتيجة ,,
http://im89.gulfup.com/w4L1vp.png
http://im55.gulfup.com/QxQsXY.gif
الخط الصغير ويستخدم معه الوسمين <SMALL>___</SMALL> .
كود بلغة HTML:
<HTML>
<HEAD>
<TITLE>My First  HTML  Page</TITLE>
</HEAD>
<BODY>
HTML Guide By <SMALL>3ashek El7ozn</SMALL> & Silkroad4arab Forum
</BODY>
</HTML>
النتيجة ,,
http://im83.gulfup.com/TExrip.png
http://im55.gulfup.com/QxQsXY.gif
نص يتخلله خط او النص المشطوب ويستخدم معه الوسمين <STRIKE>___</STRIKE> .
كود بلغة HTML:
<HTML>
<HEAD>
<TITLE>My First  HTML  Page</TITLE>
</HEAD>
<BODY>
HTML Guide By <STRIKE>3ashek El7ozn</STRIKE> & Silkroad4arab Forum
</BODY>
</HTML>
النتيجة ,,
http://im84.gulfup.com/3gqhm7.png
http://im55.gulfup.com/QxQsXY.gif
نص الآلة الكاتبة ويستخدم معه الوسمين <TT>___</TT> .
كود بلغة HTML:
<HTML>
<HEAD>
<TITLE>My First  HTML  Page</TITLE>
</HEAD>
<BODY>
HTML Guide By <TT>3ashek El7ozn</TT> & Silkroad4arab Forum
</BODY>
</HTML>
النتيجة ,,
http://im79.gulfup.com/ffoEDb.png
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
كما انه يستخدم الوسمين <TT>___</TT> فى توحيد المسافات بين الاحرف بمعنى انه اذا استخدمنا الحرفين M و I كمثال ,,
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
قبل اضافة الوسم >>

كود بلغة HTML:
<HTML>
<HEAD>
<TITLE>My First  HTML  Page</TITLE>
</HEAD>
<BODY>
IIIIIIIIII
<BR>
MMMMMMMMMM
</BODY>
</HTML>
النتيجة ,,
http://im71.gulfup.com/0U3ioI.png
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*

بعد اضافة الوسم >>
كود بلغة HTML:
<HTML>
<HEAD>
<TITLE>My First  HTML  Page</TITLE>
</HEAD>
<BODY>
<TT>
IIIIIIIIII
<BR>
MMMMMMMMMM
</TT>
</BODY>
</HTML>
النتيجة ,,
http://im86.gulfup.com/gETXCE.png
http://im55.gulfup.com/QxQsXY.gif
وهذا مثال لعدة وسوم لتنسيقات متعددة ,,
كود بلغة HTML:
<HTML>
<HEAD>
<TITLE>My First  HTML  Page</TITLE>
</HEAD>
<BODY>
<FONT COLOR="FF0000" SIZE="5"><U><I>
HTML Guide By 3ashek El7ozn & Silkroad4arab Forum
</I></U></FONT>
</BODY>
</HTML>
النتيجة ,,
http://im73.gulfup.com/xFKozk.png
http://im55.gulfup.com/QxQsXY.gif
ملحوظة :-
عند استخدام الوسوم المتعددة في مقطع واحد يجب مراعاة عدم التداخل بينها , وهذه الصور توضع ما اقصده .

http://im63.gulfup.com/3D7AaC.png
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*

http://im63.gulfup.com/u8eayW.png
http://im55.gulfup.com/QxQsXY.gif
الى هنا اكون قد انتهيت من درس الخطوط ..
http://im55.gulfup.com/QxQsXY.gif
وفى النهاية
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
هذا عمل بشري ,, لا يخلوا من الأخطاء , فإن أصبت فمن الله .. وإن أخطأت فمني ومن الشيطان .
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
وعند النقل يرجى ذكر المصدر
دمتم بود
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**
http://im54.gulfup.com/Zz30Un.png

Hero 20-09-2014 06:24 AM
والله الغة سهلة و شرحك فل الفل
بس تعرف الشرح فيديو صوت ياة حياة تانى خالص والله حتى لو ال ++C هتتفهم بسهولة :]

3ashek El7ozn 20-09-2014 06:40 AM
اقتباس:
المشاركة الأصلية كتبت بواسطة Hero (المشاركة 5112445)
والله الغة سهلة و شرحك فل الفل
بس تعرف الشرح فيديو صوت ياة حياة تانى خالص والله حتى لو ال ++C هتتفهم بسهولة :]
اخلص من الدورة دى وهنزل تصميمات PSD و توزيع HTML و CSS بالفيديو مع حقوق المنتدى :thumbsup:

_Joo 20-09-2014 04:42 PM
رورورورورورورورورورورعه بجد شروحاتك

3ashek El7ozn 20-09-2014 10:10 PM
اقتباس:
المشاركة الأصلية كتبت بواسطة malek4d3wa (المشاركة 5112576)
رورورورورورورورورورورعه بجد شروحاتك
مرورك الاروع يا بطل تسلملى الايد اللى ردت :mf_popcorn:

_Joo 21-09-2014 03:20 PM
اقتباس:
المشاركة الأصلية كتبت بواسطة 3ashek El7ozn (المشاركة 5112712)


مرورك الاروع يا بطل تسلملى الايد اللى ردت :mf_popcorn:
انا روعه ايه بس شرحك بجد جامد جداً


الساعة الآن 03:25 PM.

Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2025, vBulletin Solutions, Inc.