آرشیو خرداد ماه 1400

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 روي صفحه ي وب خود كار سختي نيست، اما اين كار ممكن است باعث بروز مشكل اسپم هاي غيرضروري در اكانت ايميل شما شود. افرادي هستند كه مي توانند برنامه هايي را براي جمع آوري چنين ايميل هايي اجرا كنند و سپس آنها را با راه هاي مختلف براي اسپم كردن استفاده كنند.
مي توانيد از گزينه ديگري استفاده كنيد تا افراد به راحتي بتوانند به شما ايميل ارسال كنند. يك گزينه مي تواند استفاده از فرم هاي 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 

 

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

آموزش لينك هاي متني

sali جمعه ۰۷ خرداد ۰۰ ۱۳:۱۹ ۱ بازديد

آموزش طراحي سايت - آموزش لينك هاي متني

لينك هاي متن HTML

يك صفحه ي وب مي تواند لينك هاي متنوعي داشته باشد كه شما را مستقيما به صفحات ديگر يا حتي بخش هايي خاص از يك صفحه ي ارائه شده مي برد. اين لينك ها هايپرلينك ناميده مي شوند.
هايپرلينك ها به بازديدكنندگان اجازه مي دهند تا با كليك كردن روي لغات، اصطلاحات و تصاوير بين صفحات وب مسيريابي كنند. شما مي توانيد هايپرلينك ها را روي صفحه ي وب با استفاده از متن يا تصاوير موجود ايجاد كنيد.

 

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

يك لينك با استفاده از برچسب < a> در HTML تعيين مي شود. اين برچسب anchor tag ناميده مي شود و هر چيزي بين برچسب آغازين < a> و پاياني < /a> بخشي از لينك مي شود و يك يوزر مي تواند آن بخش را كليك كرده تا به داكيومنت لينك شده برسد. در زير تركيب ساده ي استفاده از برچسب < a> را مي بينيد.

 

<a href="Document URL" ...="" attributes-list="">Link Texta>

مثال:

اجازه دهيد مثال زير را امتحان كنيم كه http://www.tahlildadeh.com را در صفحه ي شما لينك مي كند.

 

نمونه يك

 

 

 

  Hyperlink Example

 

 

Click following link

   

 

Tahlildadeh

 

 

اين مثال نتيجه ي زير را توليد خواهد كرد كه شما مي توانيد روي لينك توليد شده ي tahlildadeh كليك كنيد تا به صفحه ي اصلي tahlildadeh برسيد.
Click following link

 

tahlildadeh

ويژگي target

ما از ويژگي target در مثال قبلي خود استفاده كرديم . اين ويژگي براي مشخص كردن موقعيتي كه داكيومنت لينك شده باز مي شود، مورد استفاده قرار مي گيرد. در زير گزينه هاي ممكن را مشاهده مي كنيد.

 

Option                                                                               Description
                                                                                                                         _blank
داكيومنت لينك شده را در يك پنجره يا تب جديد باز مي كند.
                                                                                                                           _self
داكيومنت لينك شده را در همان چارچوب باز مي كند.
                                                                                                                       _parent
داكيومنت لينك شده را در چارچوب اصلي باز مي كند.
                                                                                                                       _top
داكيومنت لينك شده در كل بدنه ي پنجره باز مي شود.
                                                                                                                 targetframe
داكيومنت لينك شده را در يك targetframe نام گذاري شده باز مي كند.

 مثال:

براي درك تفاوت اصلي در برخي گزينه هاي ارائه شده در ويژگي target مثال زير را امتحان كنيد.

 

نمونه دو

 

 

 

Hyperlink Example

 

 

 

 

Click any of the following links

 

 

  Opens in New | 

  Opens in Self | 

  Opens in Parent |

    Opens in Body

 

 

اين مثال نتيجه ي زير را توليد خواهد كرد كه مي توانيد روي لينك هاي مختلف كليك كنيد تا تفاوت بين گزينه هاي مختلف ارائه شده براي ويژگي target را درك كنيد.

Click any of the following links

Opens in New | Opens in Self | Opens in Parent | Opens in Body

 

استفاده از مسير پايه

وقتي كه شما داكيومنت هاي HTML را متناسب با همان وب سايت لينك مي كنيد، ارائه ي يك URL كامل براي هر لينك ضروري نيست. اگر از برچسب در تيتر داكيومنت HTML خود استفاده مي كنيد، مي توانيد از دست آن خلاص شويد. اين برچسب براي ارائه ي يك مسير پايه براي همه ي لينك ها استفاده مي شود. بنابراين مرورگر شما مسير ارائه شده ي مرتبط را به مسير پايه پيوند خواهد داد و يك URL كامل ايجاد خواهد كرد.


 مثال:

مثال زير از برچسب < base> براي مشخص كردن URL پايه استفاده مي كند و پس از آن ما مي توانيم به جاي ارائه ي URL كامل براي هر لينك از مسيرهاي مرتبط استفاده كنيم.

 

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

نمونه سه

 

 

  Hyperlink Example   

 

 

 

Click following link

   

 

HTML tahlildadeh

 

 

اين مثال نتيجه ي زير را توليد خواهد كرد كه مي توانيد روي لينك توليد شده ي HTML tahlildadeh كليك كنيد تا به آموزش HTML برسيد.
اكنون URL ارائه شده ي < a href="http:/WebsiteNews/TahlildadeNews.aspx> باعنوان < a href=" http //www.tahlildadeh.com/WebsiteNews /TahlildadeNews.aspx"> در نظر گرفته مي شود

 

لينك شدن به بخشي از صفحه

مي توانيد براي بخش خاصي از صفحه ي وب ارائه شده، با استفاده از ويژگي name يك لينك ايجاد كنيد. اين امر يك فرايند دو مرحله اي مي باشد.
نخست اينكه در مكاني كه مي خواهيد به داخل صفحه ي وب برسيد يك لينك ايجاد كنيد و آن را با استفاده از برچسب < a...> نام گذاري كنيد

<h1>HTML Text Links <a name="top">a>h1>

مرحله ي دوم ايجاد يك هايپر لينك مي باشد براي لينك كردن داكيومنت و قرار دادن در مكاني كه مي خواهيد برسيد.

<a href="/html/html_text_links.htm#top">Go to the Topa>

و اين مثال لينك زير را توليد خواهد كرد كه مي توانيد در آن روي لينك توليد شده ي Go to the Top كليك كنيد تا به نقطه ي بالاي آموزش HTML Text Link برسيد.

 

نمونه پنج

 

 

 

  Hyperlink Example   

 

 

 

 

Click following link

   

 

HTML tahlildadeh

 

 

تنظيم رنگ هاي لينك

شما مي توانيد رنگ لينك هاي خود، لينك هاي فعال و لينكهاي مشاهده شده را با استفاده ازويژگي هاي link و alink و vlink از برچسب < body>تنظيم كنيد.


 مثال:

مثال زير را در test.htm ذخيره كنيد و سپس مي توانيد آن را در هر مرورگري باز كنيد تا ببينيد كه چگونه ويژگي هاي link, alink و vlink كار مي كنند.

نمونه شش

 

 

 

    Hyperlink Example

 

 

 

download pdf file

 

 

اين مثال نتيجه ي زير را توليد مي كند. فقط رنگ لينك را قبل از كليك كردن روي آن چك كنيد، سپس رنگ ان را در هنگام فعال كردن و بازديد آن چك كنيد.

 

HTML tahlildadeh

دانلود كردن لينك ها

شما مي توانيد لينك متني ايجاد كنيد تا فايل هاي قابل دانلود PDF، ZIP و DOC خود را بسازيد. اين كار بسيار ساده مي باشد، فقط كافيست يك URL كامل از فايل قابل دانلود ارائه بدهيد.

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

 

آموزش List

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

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

 

آموزش List

  • < ul>- ليست بدون ترتيب. اين ليست آيتم ها را با استفاده از bullet هاي ساده ليست مي كند.
  • < ol> - ليست منظم. اين ليست از نمودارهاي عددي مختلف براي ليست كردن آيتم هاي شما استفاده مي كند.
  • < dl>- ليست تعريف. اين ليست آيتم هاي شما را به همان روشي كه در ديكشنري منظم شده اند، منظم مي كند.

ليست هاي بدون ترتيب HTML

ليست بدون ترتيب مجموعه اي از آيتم هاي مربوط به هم مي باشد كه هيچگونه نظم و ترتيب خاصي ندارند. اين ليست با استفاده از برچسب < ul> در HTML ايجاد مي شود. هر آيتم در ليست با يك bullet مشخص مي شود.


 مثال:

نمونه يك

 

HTML Unordered List

  • Beetroot

  • Ginger

  • Potato

  • Radish

ويژگي type

مي توانيد از ويژگي type براي برچسب < ul> استفاده كنيد تا نوع bullet خود را مشخص كنيد، كه به طور پيش فرض يك ديسك مي باشد. در زير گزينه هاي ممكن را مشاهده مي كنيد.

 

<ultype="square">

<ultype="disc">
<ultype="circle">ul>ul>ul>
 
در زير مثالي را ميبينيد كه در آن از < ul type="square"> استفاده مي كنيم.

نمونه دو




HTML Unordered List



  • Beetroot

  • Ginger

  • Potato

  • Radish



 

در زير مثالي را مي بينيد كه در آن از < ul type="disc"> استفاده كرده ايم.

 

نمونه سه

 




HTML Unordered List



  • Beetroot

  • Ginger

  • Potato

  • Radish


 

در زير مثالي را مي بينيد كه در آن از < ul type="circle"> استفاده كرده ايم.

 

نمونه چهار

 




HTML Unordered List



  • Beetroot

  • Ginger

  • Potato

  • Radish



 

ليست هاي منظم HTML

 

اگر تمايل داريد آيتم هاي خود را به جاي قرار دادن در يك ليست داراي bullet، در يك ليست عددگذاري شده قرار دهيد، مي توانيد از ليست منظم HTML استفاده كنيد. اين ليست با استفاده از برچسب < ol> ايجاد مي شود. شماره گذاري از يك شروع شده و براي هر ليست منظم عنصر بعدي با اضافه شدن يك عدد و به همراه برچسب< li>اضافه مي شود.
مي توانيد از ويژگي type براي برچسب < ol> استفاده كنيم تا نوع شماره گذاريمورد نظر خود را مشخص كنيد. به طور پيش فرض شماره گذاري به وسيله ي عدد انجام مي شود. در زير گزينه هاي ممكن را مشاهده مي كنيد.

 

<ol type="1">

    - Default-Case Numerals.
<oltype="I">
        - Upper-Case Numerals.
<oltype="i">
            - Lower-Case Numerals.
<oltype="a">
                - Lower-Case Letters.
<oltype="A"> - Upper-Case Letters.ol>ol>ol>ol>ol>

در زير مثالي را مي بينيد كه در آن از < ol type="1"> استفاده كرده ايم.

نمونه پنج




HTML Ordered List



  1. Beetroot

  2. Ginger

  3. Potato

  4. Radish



در زير مثالي را مي بينيد كه در آن از < ol type="I"> استفاده مي كنيم.

 

نمونه شش




HTML Ordered List



  1. Beetroot

  2. Ginger

  3. Potato

  4. Radish



در زير مثالي را ميبينيد كه در آن از < ol type="i"> استفاده كرده ايم.

 

نمونه هفت

 




HTML Ordered List



  1. Beetroot

  2. Ginger

  3. Potato

  4. Radish



: مثال

در زير مثالي را مي بينيد كه در آن از < ol type="A"> استفاده كرده ايم.

 

نمونه هشت




HTML Ordered List



  1. Beetroot

  2. Ginger

  3. Potato

  4. Radish



 

در زير مثالي را مي بينيد كه در آن از< ol type="a"> استفاده كرده ايم.

 

نمونه نه




HTML Ordered List



  1. Beetroot

  2. Ginger

  3. Potato

  4. Radish



ويژگي start

شما مي توانيد از ويژگي start براي برچسب < ol> استفاده كنيد تا نقطه ي شروع شماره گذاري خود را مشخص كنيد. در زير گزينه هاي ممكن را مشاهده مي كنيد.

<ol type="1" start="4">

    - Numerals starts with 4.
<oltype="I"start="4">
        - Numerals starts with IV.
<oltype="i"start="4">
            - Numerals starts with iv.
<oltype="a"start="4">
                - Letters starts with d.
<oltype="A"start="4">    - Letters starts with D.
ol>ol>ol>ol>ol>
 

در زير مثالي را مي بينيد كه در آن از < ol type="i" start="4"> استفاده مي كنيم.

 

نمونه ده

 




HTML Ordered List



  1. Beetroot

  2. Ginger

  3. Potato

  4. Radish



ليست هاي تعريف HTML

HTML و XHTML ليست هايي به نام ليست هاي تعريف را پشتيباني مي كنند كه در اين ليست ها ورودي ها مانند ترتيب لغات در ديكشنري قرار مي گيرند. اين ليست يك روش ايده آل براي ارائه يك فهرست از معاني يا ليستي از اصطلاحات يا ليستي از نام ها و مقادير مي باشد.
ليست تعريف از سه برچسب زير استفاده مي كند

 

  • < dl> - شروع ليست را تعريف مي كند.

 مثال:

نمونه يازده




HTML Definition List



HTML

This stands for Hyper Text Markup Language

HTTP

This stands for Hyper Text Transfer Protocol



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

 



 

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

آموزش ساخت جدول در html

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

آموزش طراحي سايت - آموزش ساخت جدول در html

آموزش Table در HTML

جدول هاي HTML به نويسندگان وب اجازه مي دهند تا داده هايي مانند متن، تصاوير، لينك ها، جدول هاي ديگر و غيره در رديف ها و ستون ها تنظيم كنيد. جدول هاي HTML با استفاده از برچسب < table> ايجاد مي شوند كه در آن برچسب < tr> براي ايجاد رديف ها و برچسب < td> براي ايجاد داده هاي سلول ها استفاده مي شوند.


 مثال:

نمونه يك

   

HTML Tables

   

 

     

       

   

 

         

       

   

   

   

       

 

         

       

 

 

Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2

ويژگي هاي colspan و rowspan

اگر بخواهيد دو يا بيشتر از دو ستون را با هم تلفيق كنيد از ويژگي colspan استفاده مي كنيد. به طور مشابه اگر بخواهيد دو يا بيشتر از دو رديف را در يك رديف تلفيق كنيد از rowspan استفاده كنيد.


 مثال:

نمونه سه

 

  HTML Table Colspan/Rowspan

   

     

 

       

   

       

   

     

     

     

 

   

   

 

     

 

     

   

Column 1 Column 2 Column 3
Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1

پس زمينه ي جدول

مي توانيد به دو روش زير براي جدول خود زمينه اي تنظيم كنيد.

 

  • ويژگي Bg color: مي توانيد رنگ زمينه را براي همه ي جدول و يا تنها براي يك سلول تنظيم كنيد.
  • ويژگي background: مي توانيد يك تصوير را براي كل جدول يا تنها يك سلول تنظيم كنيد.

همچنين مي توانيد با استفاده از ويژگي bordercolor رنگ حاشيه را نيز تنظيم كنيد.


 مثال:

نمونه چهار

   

HTML Table Background

 

 

   

   

       

   

     

     

   

       

   

   

     

 

       

   

   

 

 

Column 1 Column 2 Column 3
Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1

در اينجا مثالي در رابطه با استفاده از ويژگي background مي بينيد. در اين مثال ما از تصويري موجود در image directory استفاده كرده ايم.

 

نمونه پنج

 

 

  HTML Table Background

 

 

     

 

     

     

     

     

   

       

 

     

       

   

   

       

   

Column 1 Column 2 Column 3
Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1

 

آموزش html css

طول و عرض جدول

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


 مثال:

نمونه شش

   

HTML Table Width/Height

   

 

     

     

     

 

         

     

 

     

 

     

     

   

       

   

   

   

Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2

شرح جدول

برچسب caption يك توضيح يا يك تيتر براي جدول مي باشد كه در بالاي جدول نمايش داده مي شود. اين برچسب در ورژن هاي جديد HTML/XHTML توصيه مي شود.


 مثال:

نمونه هفت

    HTML Table Caption
   

 

     

       

       

   

   

       

 

     

 

     

   

       

           

     

 

   

This is the caption
row 1, column 1 row 1, columnn 2
row 2, column 1 row 2, columnn 2

تيتر، بدنه و پاورقي جدول

جدول ها مي توانند به سه بخش تقسيم شوند: تيتر، بدنه و پاورقي جدول. عنوان و فوت(tfoot) در واقع شبيه به تيتر و پاورقي در يك فايل پردازش word مي باشند كه براي هرصفحه يكي مي باشد، در حاليكه بدنه همان نگه دارنده ي محتواي اصلي جدول مي باشد.
سه عنصر براي مجزا كردن عنوان، بدنه و فوت در يك جدول عبارتند از

 

  • < thead> - براي ايجاد يك تيتر مجزا
  • < tbody>- براي نشان دادن بدنه ي اصلي جدول
  • < tfoot> - براي ايجاد يك پاورقي مجزا در يك جدول

يك جدول براي نشان دادن صفحات و گروه هاي مختلف يك داده، ممكن است داراي عناصر مختلفي باشد، اما ظاهر شدن برچسب هاي و قبل از زياد مهم نيست.


 مثال:

نمونه هشت

  HTML Table

   

   

   

       

   

       

       

           

       

     

 

 

         

         

     

   

       

     

 

     

 

   

       

         

     

   

           

     

         

 

             

     

   

   

   

   

This is the head of the table
This is the foot of the table
Cell 1 Cell 2 Cell 3 Cell 4

جدول هاي تودرتو

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

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


 مثال:

در زير مثالي را از استفاده ي يك جدول و برچسب هاي ديگر در داخل يك سلول مشاهده مي كنيد.

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

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

موضوعات

آرشيو

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

برچسب ها

پيوندها

خلاصه آمار

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