دوره آموزش طراحي سايت

http://www.tahlildadeh.com Translate this page شما در اين سايت آموزشي با مقالات,كتاب,PDF,فيلم هاي آموزشي رايگان و همين طور دوره آموزش برنامه نويسي به زبان هاي C#,HTML5,ASP,MVC,SQL,اندرويد,React,وردپرس .. را ياد مي گيريد

دوشنبه ۲۴ شهریور ۰۴

آموزش Iframes در html-آموزش html

sali دوشنبه ۱۷ خرداد ۰۰ ۱۶:۱۹ ۵ بازديد

آموزش Iframes در html 

آموزش طراحي سايت 

شما مي توانيد يك frame درون خطي را با استفاده از برچسب < iframe>مربوط به HTML تعريف كنيد. اين برچسب به برچسب < frameset>ارتباطي ندارد، در عوض مي تواند در هرجايي در داكيومنت شما ظاهر شود. برچسب< iframe>يك محدوده ي مستطيلي را در داخل داكيومنت تعريف مي كند كه در آن مرورگر مي تواند يك داكيومنت مجزا را ارائه دهد، مانند نوارهاي اسكرول و حاشيه ها.
ويژگي src براي مشخص كردن URL مربوط به داكيومنتي استفاده مي شود كه حاوي frame درون خطي مي باشد.


 مثال:

در زير مثالي را مي بينيد كه چگونگي استفاده از < iframe> را توضيح مي دهد.

 

نمونه يك

   

HTML Iframes

 

 

Document content goes here...

 

   

 

Document content also go here...

ويژگي هاي برچسب < iframe>

بسياري از ويژگي هاي برچسب < iframe> شامل نام، گروه، حاشيه، id، longdesk، طول حاشيه، عرض حاشيه، نام، اسكرول كردن، روش و تيتر، درست مانند ويژگي هاي متناظر با برچسب < frame> رفتار مي كنند.

Attribute Description
src
اين ويژگي براي نام گذاري فايلي استفاده مي شود كه بايد در frame بارگذاري شود. مقدار آن مي تواند هر URL باشد. براي مثال src="/html/top_frame.htm" فايل HTML موجود در مسير html را بارگذاري خواهد كرد.
name اين ويژگي به شما اجازه مي دهد تا يك frame را نامگذاري كنيد. اين ويژگي نشان مي دهد كه يك داكيومنت در كدام frame بايد بارگذاري شود. هنگامي كه مي خواهيد لينك هايي را در يك frame ايجاد كنيد كه صفحاتي را در يك frame ديگر بارگذاري مي كند، كه در اين مورد دومين frame براي تشخيص خود به عنوان هدف لينك به نام نياز دارد، در اينجا اين ويژگي بسيار مهم است.
frameborder اين ويژگي مشخص مي كند كه آيا حاشيه هاي frame نشان داده شوند يا خير. اين ويژگي مقدار داده شده به ويژگي frameborder روي برچسب < frameset> را مي گيرد، البته اگر مقداري مشخص شده باشد، اين مقدار مي تواند 1 (بله) و يا 0 (خير) باشد.
marginwidth اين ويژگي به شما اجازه مي دهد تا عرض فضاي بين حاشيه هاي چپ و راست frame و محتواي آن را مشخص كنيد. مقدار به پيكسل داده مي شود. براي مثال marginwidth="10".
marginheight اين ويزگي به شما اجازه مي دهد تا طول فضاي بين بالا و پايين حاشيه ي frame و محتواي آن را مشخص كنيد. مقدار به پيكسل داده مي شود. براي مثال marginheight="10"
noresize به طور پيش فرض هر frame را با كليك كردن و درگ كردن روي حاشيه هاي آن مي توانيد تغيير اندازه دهيد. ويژگي noresize مانع تغيير اندازه ي frame توسط يوزر مي شود. براي مثال noresize="noresize".
scrolling اين ويژگي ظاهر نارهاي اسكرول نمايان شده در frame را كنترل مي كند. اين ويزگي مقادير "yes", "no" يا "auto"را مي گيرد. براي مثال scrolling="no" به معناي نبودن نوارهاي اسكرول مي باشد.
longdesc اين ويژگي به شما اجازه مي دهد تا يك لينك به صفحه اي حاوي يك توصيف طولاني از محتواي frame، ارائه بدهيد. براي مثال longdesc="framedescription.htm"
جهت مشاهده كدها برروي دوره آموزش طراحي سايت كليك نماييد

 

برچسب ها: فيلم اموزش طراحي سايت, آموزش طراحي سايت با html, آموزش html css, دوره آموزش طراحي سايت, آموزش طراحي سايت,

آموزش قالب بندي در HTML

sali چهارشنبه ۱۲ خرداد ۰۰ ۱۴:۰۲ ۱ بازديد

قالب بندي صفحات HTML

در ادامه مباحث آموزشي HTML قبل، مي خواهيم ببينيم چه آيتم هايي در format دادن و قالب بندي صفحات HTML مورد نياز ما هستند.
اگر با پردازشگر word كار مي كنيد بايد با بولد كردن (bold)، ايتاليك كردن و آندرلاين كردن متن آشنا باشيد. اين ها فقط سه گزينه از ده گزينه موجود براي چگونگي ظاهر شدن متن در HTML و XHTML مي باشند.

 

بولد كردن متن

هرچيزي كه بين عناصر< b>...< /b> قرار مي گيرد به صورت بولد ظاهر مي شود، مانند مثال زير:


 مثال:

نمونه يك

 

  Bold Text Example

 

 

The following word uses a

bold

typeface.

ايتاليك كردن متن

هر چيزي كه بين عناصر< i>...< /i>قرار بگيرد به صورت ايتاليك ظاهر مي شود، مانند مثال زير:


 مثال:

نمونه دو

 

  Italic Text Example

 

 

The following word uses a

italicized typeface.

آندرلاين كردن متن

هر چيزي كه بين عناصر < u>...< /u> قرار بگيرد به صورت آندرلاين ظاهر مي شود، مانند مثال زير:

 

نمونه سه

    Underlined Text Example

 

 

The following word uses a

underlined

typeface.

خط كشيدن روي متن

هر چيزي كه بين گزينه هاي < strike>...< /strike> قرار بگيرد، با يك strikethrough نمايش داده مي شود كه خط باريكي مي باشد كه روي متن كشيده مي شود، همانطور كه در مثال زير مشاهده مي كنيد:

 

نمونه چهار

   

Strike Text Example

 

 

The following word uses a strikethrough typeface.

فونت monospaced

محتواي عنصر < tt>...< /tt> به فونت monospaced نوشته مي شود. اكثر فونت ها با عنوان فونت هايي با عرض متغير شناخته شده اند، زيرا حروف مختلف داراي عرضهاي مختلف هستند ( به عنوان مثال حرف m عريض تر از حرف I مي باشد.) به هرحال در فونت monospaced تمام حروف داراي عرض يكسان مي باشند.


 مثال:

نمونه پنج

 

  Monospaced Font Example

   

The following word uses a monospaced typeface.

</body>

متن superscript ( چاپ شده در بالا)

محتواي عنصر < sup>...< /sup> در بالا نوشته مي شود، فونت استفاده شده براي آن همان فونت كاراكترهاي اطراف آن مي باشد، اما به اندازه ي نصف يك كاراكتر بالاتر از ديگر كاراكترها نمايش داده مي شود.


 مثال:

نمونه شش

   

Superscript Text Example

 

 

The following word uses a superscript typeface.

متن subscript (چاپ شده در زير)

محتواي عنصر< sub>...< /sub> در زير نوشته مي شود. اندازه ي فونت استفاده شده براي آن به اندازه ي فونت كاراكترهاي اطراف مي باشد اما به اندازه ي نصف ارتفاع يك كاراكتر زير كاراكترهاي ديگر نمايش داده مي شود.


 مثال:

نمونه هفت

 

  Subscript Text Example

 

 

The following word uses a subscript typeface.

متن مندرج

هرچيزي كه بين عنصر ... قرار بگيرد به عنوان متن مندرج نمايش داده مي شود.


 مثال:

نمونه هشت

 

  Inserted Text Example

 

 

I want to drink cola wine

متن حذف شده

هر چيزي كه بين عنصر < del>...< /del> ظاهر شود با عنوان يك متن حذف شده نمايش داده مي شود.


 مثال:

نمونه نه

 

  Deleted Text Example

   

I want to drink cola wine

متن بزرگتر

محتواي عنصر < big>...< /big> اندازه فونت را بزرگتر از متن اطراف نشان مي دهد. مانند مثال زير:


 مثال:

نمونه ده

 

  Larger Text Example

 

 

The following word uses a big typeface.

متن كوچكتر

محتواي عنصر < small>...< /small> متن را يك سايز كوچكتر از متن اطراف آن نشان مي دهد، مانند مثال زير:


 مثال:

نمونه يازده

   

Smaller Text Example

   

The following word uses a small typeface.

گروه بندي محتوا

عناصر< div>و < span> به شما اجازه مي دهند تا براي ايجاد بخش ها و يا زيرمجموعه هاي يك صفحه، عناصر زيادي را با يكديگر گروه بندي كنيد.
براي مثال ممكن است تمايل داشته باشيد كه تمام پاورقي ها را در يك صفحه در داخل عنصر < div> قرار دهيد تا نشان دهيد كه تمام عناصر موجود در آن عنصر مربوط به پاورقي مي باشند. پس از آن ممكن است طرحي را به عنصر< div> ضميمه كنيد، طوريكه با استفاده از مجموعه اي از قوانين طراحي ظاهر شوند.


 مثال:

نمونه دوازده

 

  Div Tag Example

 

 

 

 

 

     

Content Articles
   

   

Actual content goes here.....

   

از طرف ديگر عنصر < span> فقط مي تواند براي گروه بندي داخل خطي عناصر استفاده شود. بنابراين اگر بخشي از جمله يا پاراگراف را داريد كه مي خواهيد با هم در يك گروه قرار دهيد، مي توانيد از عنصر < span> مانند زير استفاده كنيد:


 مثال:

نمونه سيزده

 

  Span Tag Example

 

 

This is the example of span tag and the

div tag

alongwith CSS

اين برچسب ها عموما با CSS استفاده مي شوند تا به شما اجازه دهند طرحي را به بخشي ازيك صفحه ضميمه كنيد.

برچسب ها: دوره آموزش طراحي سايت, فيلم اموزش طراحي سايت, آموزش html css,

آموزش طراحي سايت -آموزش درج كردن تصويردر HTML

sali جمعه ۳۱ اردیبهشت ۰۰ ۱۳:۰۹ ۴ بازديد

آموزش طراحي سايت -آموزش درج كردن تصويردر HTML

وارد كردن تصاوير در صفحات HTML

در اين آموزش چگونگي استفاده از تصاوير در صفحات HTML را فرا مي گيريم.زيبا سازي تصاوير و همچنين ترسيم بسياري از مفاهيم پيچيده به يك روش ساده روي صفحه ي وب شما، بسيار مهم مي باشد. اين آموزش مراحل ساده ي استفاده از تصاوير در صفحات وب را به شما آموزش خواهد داد.

 

وارد كردن تصوير

شما مي توانيد با استفاده از برچسب هر تصويري را وارد صفحه ي وب خود كنيد. در زير تركيب ساده ي استفاده از اين برچسب را مي بينيد:

برچسب يك برچسب خالي مي باشد، يعني تنها مي تواند داراي ليستي از ويژگي ها باشد و داراي برچسب closing نمي باشد.


 مثال:

براي امتحان كردن مثال، زير اجازه بدهيد فايل html خود يعني test.htm و فايل تصوير خود يعني test.png را در يك مسير قرار دهيم.

 

نمونه يك

 

 

 

Using Image in Webpage

 

 

 

Simple Image Insert

   

 

tahlildadeh Image

 

 

شما مي توانيد از فايل تصوير JPEG، PNG يا GIF متناسب با راحتي خود استفاده كنيد، اما مطمئن شويد كه در ويژگي src نام فايل تصوير را به درستي وارد كرديد. نام تصوير هميشه يك مورد هوشمند مي باشد.
ويژگي alt يك ويژگي مي باشد كه اگر تصوير نمايش داده نشود، يك متن جايگزين را براي آن مشخص مي كند.

 

تنظيم موقعيت تصوير

آموزش html css

معمولا ما تمام تصاوير خود را در يك مسير مجزا قرار مي دهيم. بنابراين اجازه بدهيد فايل test.htm مربوط به HTML را در مسير اصلي نگه داشته و يك مسير فرعي images داخل مسير اصلي، جايي كه تصوير test.png را نگهداري مي كنيم، ايجاد كنيم.
با فرض اينكه موقعيت تصوير ما "image/test.png" مي باشد، مثال زير را امتحان كنيد:


 مثال:

نمونه دو

 

 

 

Using Image in Webpage

 

 

 

Simple Image Insert

   

 

tahlildadeh Image

 

 

تنظيم طول و عرض تصوير

مي توانيد طول و عرض تصوير را براساس نياز خود و با استفاده از ويژگي هاي width و height تنظيم كنيد. شما مي توانيد طول و عرض تصوير را به پيكسل يا براساس درصد اندازه ي واقعي آن تنظيم كنيد.


 مثال:

نمونه سه

 

 

 

Set Image Width and Height

 

 

 

Setting image width and height

 

   

 

 

تنظيم حاشيه ي تصوير

به طور پيش فرض تصوير حاشيه اي در اطراف خود خواهد داشت، شما مي توانيد ضخامت اين حاشيه را با استفاده از ويژگي border و به واحد پيكسل تنظيم كنيد. ضخامت 0 يعني هيچ حاشيه اي در اطراف تصوير وجود ندارد.


 مثال:

نمونه چهار

 

 

 

  Set Image Border

 

 

 

Setting image Border

   

 

 

 

تنظيم همترازي تصوير

به طور پيش فرض تصوير در سمت چپ صفحه تنظيم مي شود، اما مي توانيد از ويژگي align براي تنظيم تصوير در سمت راست يا مركز صفحه استفاده كنيد.


 مثال:

نمونه پنج

 

 

 

  Set Image Alignment

 

 

 

Setting image Alignment

   در اين وبلاگ كدها نمايش داده نمي شود جهت مشاهده كدها برروي آموزش طراحي سايت كليك كنيد

 

Test Image

 

 


برچسب ها: آموزش طراحي سايت, دوره آموزش طراحي سايت, طراحي سايت, آموزش برنامه نويسي,

موضوعات

آرشيو

تازه ترين مطالب

برچسب ها

پيوندها

خلاصه آمار

  • مجموع نمایش‌ ۴۹۹
  • مجموع بازدید ۲۵۱
  • بازدید امروز ۲۵
  • بازدید دیروز ۰
  • مجموع مطالب ۱۸
  • مجموع نظرات ۱
  • افراد آنلاین ۱
رویابلاگ : رسـانه وبلاگ نويسان حرفـه اي