آموزش html css

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

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

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

۵ بازديد

آموزش 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

در ادامه مباحث آموزشي 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

۱ بازديد

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

لينك ايميل HTML

قرار دادن يك لينك ايميل HTML روي صفحه ي وب خود كار سختي نيست، اما اين كار ممكن است باعث بروز مشكل اسپم هاي غيرضروري در اكانت ايميل شما شود. افرادي هستند كه مي توانند برنامه هايي را براي جمع آوري چنين ايميل هايي اجرا كنند و سپس آنها را با راه هاي مختلف براي اسپم كردن استفاده كنند.
مي توانيد از گزينه ديگري استفاده كنيد تا افراد به راحتي بتوانند به شما ايميل ارسال كنند. يك گزينه مي تواند استفاده از فرم هاي HTML باشد براي جمع آوري داده هاي يوزر و سپس استفاده ازاسكريپت PHP يا CGI براي ارسال ايميل.
براي يك مثال ساده، فرم Contact Us را چك كنيد. با استفاده از اين فرم يك فيدبك از يوزر گرفته و سپس از يك برنامه ي CGI استفاده مي كنيم كه در حال جمع آوري اين اطلاعات و ارسال ايميل به يك email ID ارائه شده مي باشد.

 

برچسب HTML Email

برچسب < a> در HTML براي مشخص كردن يك آدرس ايميل و ارسال ايميل، گزينه هايي را به شما ارائه مي دهد. در حاليكه از برچسب < a> به عنوان يك email tag استفاده مي كنيد، از mailto:email address همراه با ويژگي href نيز استفاده خواهيد كرد. در زير تركيب استفاده از mailto را به جاي استفاده از http مي بينيد.

 

نمونه يك

 

  SendMail

   

Send Email

اكنون اگر يوزر روي اين لينك كليك كند، email client آغاز به كار خواهد كرد ( مانند lotus notes و outlook express و غيره.) كه روي كامپيوتر شما نصب شده است. ريسك ديگري در استفاده از اين گزينه براي ارسال ايميل وجود دارد، زيرا اگر يوزر email client نصب شده روي كامپيوتر خود نداشته باشد، ارسال ايميل ممكن نحواهد بود.

 

تنظيمات پيش فرض

شما مي توانيد يك موضوع ايميل و يك بدنه ي ايميل پيش فرض همراه با آدرس ايميل خود ايجاد كنيد. در زير مثال استفاده از بدنه و موضوع پيش فرض را مشاهده مي كنيد.

 

نمونه دو

 

  SendMail

   

   

    Send Feedback