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

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

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

HTML Embed Multimedia

sali یکشنبه ۱۷ مرداد ۰۰ ۱۳:۰۵ ۶ بازديد

HTML Embed Multimedia 

آموزش چند رسانه اي در HTML‏ ‏

گاهي اوقات تمايل داريد كه موسيقي يا ويدئو به صفحه ي وب خود اضافه كنيد. ساده ترين راه براي افزودن صدا يا ويدئو به وب سايت، وارد كردن برچسب خاص HTML به نام < embed> مي باشد. اين برچسب باعث مي شود كه مرورگر به طور خودكار كنترل هايي را براي مولتي مديا وارد كند كه مرورگر ارائه شده برچسب < embed> و نوع مدياي ارائه شده را پشتيباني مي كند.
همچنين مي توانيد يك برچسب < noembed>براي مرورگرهايي وارد كنيد كه برچسب < embed> را نمي شناسند. به عنوان مثال مي توانيد از < embed> براي نمايش يك فيلم به انتخاب خود استفاده كنيد واگر مرورگر < embed> را پشتيباني نمي كند، از< noembed> براي نمايش يك تصوير JPG مجزا استفاده كنيد.

 مثال:

در اينجا مثال ساده اي مي بينيد از اجراي يك فايل جاسازي شده ي midi.

 

مرحله 1




    HTML embed Tag <title><br /><head><br /><body><br />    <embed src="/html/yourfile.mid"` width="100%" height="60"><br />    <noembed><img src="yourimage.gif" alt="Alternative Media"><noembed><br />    <embed><br /><body><br /><html></p> <div id="BodyContent2_LT_Desc"> <div class="box"> <div class="NewArticle"> <h3 class=" InnerTitle1">ويژگي هاي برچسب < embed></h3> <p>در زير ليستي از ويژگي هاي مهمي را مي بينيد كه توسط برچسب < embed> استفاده مي شود.</p> <br /> <div class="divTable"> <div class="divTableBody"> <div class="divTableRow"> <div class="divTableHead">Attribute</div> <div class="divTableHead">Description</div> </div> <div class="divTableRow"> <div class="divTableCell">align</div> <div class="divTableCell">تعيين مي كند كه چگونه يك آبجكت را تنظيم كرد، كه مي تواند هم در مركز، هم در راست و يا چپ تنظيم شود.</div> </div> <div class="divTableRow"> <div class="divTableCell">autostart</div> <div class="divTableCell">اين ويژگي Boolean نشان مي دهد كه آيا مديا بايد به طور خودكار شروع به كار كند. شما مي توانيد آن را با true يا false تنظيم كنيد.</div> </div> <div class="divTableRow"> <div class="divTableCell">loop</div> <div class="divTableCell">تعيين مي كند كه آيا صدا متداولا پشت سرهم تكرار شود( لوپ را روي true تنظيم كنيد)، يا چند دفعه بايد تكرار شود ( يك مقدار مثبت) و يا اصلا تكرار نشود(false).</div> </div> <div class="divTableRow"> <div class="divTableCell">playcount</div> <div class="divTableCell">تعداد دفعاتي را كه يك صدا بايد تكرار شود تعيين مي كند. اگر در حال استفاده از IE هستيد، اين گزنيه جايگزيني براي loop مي باشد.</div> </div> <div class="divTableRow"> <div class="divTableCell">hidden</div> <div class="divTableCell">مشخص مي كند كه آيا آبجكت مولتي مديا بايد روي صفحه نمايش داده شود.مقدار false يعني نه و مقدار true يعني بله.</div> </div> <div class="divTableRow"> <div class="divTableCell">width</div> <div class="divTableCell">عرض آبجكت به پيكسل.</div> </div> <div class="divTableRow"> <div class="divTableCell">height</div> <div class="divTableCell">عرض آبجكت به پيكسل.</div> </div> <div class="divTableRow"> <div class="divTableCell">name</div> <div class="divTableCell">نامي كه براي اشاره به آبجكت استفاده مي شود.</div> </div> <div class="divTableRow"> <div class="divTableCell">src</div> <div class="divTableCell">URL مربوط به آبجكت كه بايد جاسازي شود.</div> </div> <div class="divTableRow"> <div class="divTableCell">volume</div> <div class="divTableCell">ميزان صدا را كنترل مي كند كه مي تواند از 0 (صدا قطع شده) تا 100 (آخرين حد صدا) باشد.</div> </div> </div> </div> <h3 class=" InnerTitle1">انواع ويديوهاي پشتيباني شده</h3> <p>مي توانيد از انواع مدياهاي مختلفي مانند فايل هاي flash movies، AVi و MOV در داخل برچسب embed استفاده كنيد.</p> <br /> <ul> <li>فايل هاي swf – فايل هايي هستند كه با برنامه ي macromedia’s flash توليد مي شوند.</li> <li>فايل هاي wmv – انواع فايل هاي تصويري ويندوز مايكروسافت مي باشند.</li> <li>فايل هاي mov - فرمت Quick time movie در اپل.</li> <li> فايل هاي mpeg – فايل هاي تصويري هستند كه توسط گروه تخصصي تصاوير متحرك (Moving Pictures Expert Group) ايجاد مي شوند.</li> </ul> <div class="example"> <h2 class="example_head">مرحله 2</h2> <div class="example_code"> <div> <div id="highlighter_810575" class="syntaxhighlighter csharp"> <div class="toolbar"></div> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> <div class="line number2 index1 alt1">2</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"><code class="csharp plain"><embed height=</code><code class="csharp string">"200"</code> <code class="csharp plain">src=</code><code class="csharp string">"/html/yourfile.swf"</code> <code class="csharp plain">width=</code><code class="csharp string">"200"</code><code class="csharp plain">></code></div> <div class="line number2 index1 alt1"><code class="csharp plain"><p><img alt=</code><code class="csharp string">"Alternative Media"</code> <code class="csharp plain">src=</code><code class="csharp string">"yourimage.gif"</code><code class="csharp plain">><embed></p></code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> </div> <h3 class=" InnerTitle1">صداي زمينه</h3> <p>شما مي توانيد از برچسب < bgsound>در html براي اجراي صدا در زمينه ي صفحه ي وب خود استفاده كنيد. اين برچسب فقط توسط اينترنت اكسپلورر پشتيباني مي شود و ديگر مرورگرها آن را ناديده مي گيرند. زماني كه سند اصلي در ابتدا توسط كاربر دانلود شده و نمايش داده مي شود، اين برچسب يك فايل صدا را دانلود كرده و اجرا مي كند. همچنين هروقت كاربر مرورگر را تازه سازي كند، صداي زمينه نيز دوباره اجرا خواهد شد.اين برچسب داراي فقط دو ويژگي مي باشد، loop و src، كه همانطور كه در بالا توضيح داده شد هر دوي اين ويژگي ها داراي يك معنا مي باشند.<br />در اينجا مثال ساده اي از اجراي فايل كوچك midi را مي بينيد.</p> <br /> <div class="example"> <h2 class="example_head">مرحله 3</h2> <div class="example_code"> <div> <div id="highlighter_609461" class="syntaxhighlighter csharp"> <div class="toolbar"></div> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"><code class="csharp plain"><p><img src=</code><code class="csharp string">"yourimage.gif"</code><code class="csharp plain">></p></code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <a rel="nofollow" class="btn btn-danger" href="http://www.tahlildadeh.com/Try/495/3" target="_blank">امتحان كنيد</a></div> <p>اين مثال يك صفحه ي خالي توليد خواهد كرد. اين برچسب هيچ مولفه اي را اجرا نمي كند و مخفي باقي مي ماند.<br />اينترنت اكسپلورر نيز تنها سه فرمت صدا را اجرا مي كند: wav فرمت داخلي كامپيوترها، au فرمت داخلي براي كار </p> <div class="example"> <div class="example_code"> <div> <div id="highlighter_28485" class="syntaxhighlighter csharp"><span style="font-size: 10pt;"><br />در اينجا اگر مرورگر برچسب object را پشتيباني نكند، ويژگي alt وارد تصوير مي شود.</span></div> </div> </div> </div> <br /><span class="SampleTitle"> مثال:</span><br /> <p>شما مي توانيد يك سند PDF را در يك سند HTML اجرا كنيد.</p> <br /> <div class="example"> <h2 class="example_head">مرحله 5</h2> <div class="example_code"> <div> <div id="highlighter_12611" class="syntaxhighlighter csharp"> <div class="toolbar"></div> </div> </div> </div> </div> <p>شما مي توانيد با استفاده از برچسب < param> برخي پارامترهاي متناسب با سند را مشخص كنيد. در اينجا مثالي از اجراي فايل wavرا مي بينيد.</p> <br /> <div class="example"> <h2 class="example_head">مرحله 6</h2> <div class="example_code"> <div> <div id="highlighter_472303" class="syntaxhighlighter csharp"> <div class="toolbar"></div> </div> </div> </div> </div> <span class="SampleTitle"> مثال:</span><br /> <p>شما مي توانيد يك سند flash مانند زير اجرا كنيد.</p> <br /> <div class="example"> <div class="example_code"> <div> <div id="highlighter_492218" class="syntaxhighlighter csharp"> <div class="toolbar"><span style="font-size: 1.5em;"><br />مرحله 7</span></div> </div> </div> </div> </div> <span class="SampleTitle"> مثال:</span><br /> <p>شما مي توانيد يك سند java applet وارد سند HTML كنيد.</p> <br /> <div class="example"> <div class="example_code"> <div> <div id="highlighter_923973" class="syntaxhighlighter csharp"> <div class="toolbar"><span style="font-size: 1.5em;"><br />مرحله 8</span></div> </div> </div> </div> </div> <p>ويژگي classid تعيين مي كند كه چه نسخه اي از java plug-in استفاده شود. شما مي توانيد از ويژگي انتخابي codebase براي مشخص كردن چگونگي دانلود JRE استفاده كنيد.</p> </div> </div> </div> <div class="row"> <div class="MyMsgSendBox"> <div id="NavArticle" class="row text-right text-fa boxcom2"> <div id="BodyContent2_divnext" class="col-xs-12 col-lg-6 NextArticle"></div> </div> </div> <div id="BodyContent2_dlPDF" class="dlPDF"> <div id="widget-div"></div> جهت مشاهده مراحل برروي <a rel="nofollow" title="دوره آموزش طراحي سايت " href="http://www.tahlildadeh.com/CourseDetails/28/%D8%AF%D9%88%D8%B1%D9%87-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-Web-Design.aspx">دوره آموزش  طراحي سايت</a> كليك نماييد </div> <div id="BodyContent2_playvideo"><span class="tv"> </span><a> <h5 class="PlayedFilmLable"></h5> </a></div> <div id="FPack"> <div class="MyMoreInfo hidden-xs hidden-sm"> <div id="FPackLike" class="col-lg-4"><span> <div class="rating-symbol"> <div class="rating-symbol-foreground"></div> </div> </span></div> <div id="FPackVote" class="col-lg-4"> <div></div> </div> </div> <span class="Tabs col-xs-6 "> </span></div> </div></div> <div class="post-tags"> <span class="tag"> </span> برچسب ها: <a href="https://tahlildadeh.royablog.ir/tag/فيلم+آموزش+دوره+طراحي+سايت/">فيلم آموزش دوره طراحي سايت</a>, </div> </div> <div class="post-info"> <ul> <li> <span class="postcmnt"> <a href="https://tahlildadeh.royablog.ir/post/18/HTML+Embed+Multimedia#comments">۰ نظر</a></span> </li> </ul> </div> </div> <div class="post"> <div class="post-title"> <span class="post-title-icon"></span> <h2><a href="https://tahlildadeh.royablog.ir/post/17/فرم+هاي+html" target="_blank"> فرم هاي html </a></h2> </div> <div class="post-body"> <div class="post-cnt"> <div class="post-details"> <span class="postauthor">sali</span> <span class="postdate"> دوشنبه ۲۸ تیر ۰۰ ۱۴:۰۹ </span> <span class="postviews"> ۶ بازديد </span> </div><h1 class="MainTitle"></h1> <p><span style="font-size: 1.5em;">فرم هاي html</span></p> <p>وقتي كه مي خواهيد داده هايي را از سايت بازديدكننده جمع آوري كنيد، به فرم هاي HTML احتياج خواهيد داشت. به عنوان مثال در هنگام ثبت كاربر، اطلاعاتي مانند نام، آدرس ايميل و كارت اعتباري و غيره را جمع آوري مي كنيد. يك فرم داده ها را از بازديدكننده ي سايت مي گيرد و سپس آن را به يك برنامه ي پاياني مانند CGI، اسكريپت ASP يا اسكريپت PHP باز مي گرداند. برنامه ي پاياني فرايندهاي مورد نياز را بر اساس كار تعريف شده در برنامه، روي داده ي منتقل شده انجام مي دهد.<br />عناصر متفاوتي براي فرم در دسترس ميباشند، مانند فيلدهاي متن، فيلدهاي textarea، منوهاي رو به پايين، دكمه هاي راديو، چك باكس ها و غيره.</p> <p style="text-align: left;"> <div style="direction: ltr;"><code class="html plain" style="font-size: 10pt;">< </code><code class="html keyword" style="font-size: 10pt;">form</code><span style="font-size: 10pt;"> </span><code class="html color1" style="font-size: 10pt;">action</code><code class="html plain" style="font-size: 10pt;">=</code><code class="html string" style="font-size: 10pt;">"Script URL"</code><span style="font-size: 10pt;"> </span><code class="html color1" style="font-size: 10pt;">method</code><code class="html plain" style="font-size: 10pt;">=</code><code class="html string" style="font-size: 10pt;">"GET|POST"</code><code class="html plain" style="font-size: 10pt;">></code></div> <div class="line number2 index1 alt1" style="direction: ltr; text-align: left;"><code class="html spaces">    </code><code class="html plain">form elements like input, textarea etc.</code></div> <div class="line number3 index2 alt2" style="direction: ltr; text-align: left;"><code class="html plain">< /</code><code class="html keyword">form</code><code class="html plain">></code></div> </p> <h3 class=" InnerTitle1">ويژگي هاي فرم</h3> <p>علاوه بر ويژگي هاي متداول، در زير ليستي از متداول ترين ويژگي هاي مربوط به فرم را مشاهده مي كنيد .</p> <p> <div class="divTableRow"> <div class="divTableHead">Attribute</div> <div class="divTableHead">Description</div> </div> <div class="divTableRow"> <div class="divTableCell">action</div> <div class="divTableCell">اسكريپت backend براي پردازش داده ي انتقال شده ي شما آماده ميباشد.</div> </div> <div class="divTableRow"> <div class="divTableCell">method</div> <div class="divTableCell">روشي براي بارگذاري داده. متداولترين روش هاي مورد استفاده GET و POST مي باشند.</div> </div> <div class="divTableRow"> <div class="divTableCell">target</div> <div class="divTableCell">پنجره ي هدف يا چارچوب را، جايي كه نتيجه ي اسكريپت نمايش داده خواهد شد، مشخص مي كند. اين ويژگي مقادير _blank, _self, _parent و غيره را به خود مي گيرد.</div> </div> <div class="divTableRow"> <div class="divTableCell">enctype</div> <div class="divTableCell">شما مي توانيد از ويژگي enctype براي مشخص كردن چگونگي برنامه نويسي توسط مرورگر قبل از ارسال به سرور، استفاده كنيد. مقادير ممكن عبارتند از: application/x-www-form-urlencoded - اين روش استانداردي است كه بيشتر فرم ها در سناريو هاي ساده استفاده مي كنند. mutlipart/form-data - اين روش زماني استفاده مي شود كه شما مي خواهيد داده هاي دوتايي را به شكل فايل هايي مانند تصوير بارگذاري كنيد.</div> </div> </p> <h3 class=" InnerTitle1">كنترل هاي فرم HTML</h3> <p>انواع مختلفي از كنترل هاي فرم وجود دارند كه مي توانيد براي جمع آوري داده با استفاده از فرم HTML از آنها استفاده كنيد.</p> <p> </p> <ul> <li>كنترل هاي ورودي متن</li> <li>كنترل هاي چك باكس</li> <li>كنترل هاي راديو باكس</li> <li>كنترل هاي انتخاب باكس</li> <li>باكس هاي انتخاب فايل</li> <li>كنترل هاي مخفي</li> <li>دكمه هاي قابل كليك شدن</li> <li>ثبت و تنظيم مجدد</li> </ul> <h3 class=" InnerTitle1">كنترل هاي ورودي متن</h3> <p>سه نوع ورودي متن وجود دارد كه در فرم ها استفاده مي شوند .</p> <p> </p> <ul> <li>كنترل هاي ورودي متن تك خطي: اين كنترل براي آيتم هايي استفاده مي شود كه فقط يك خط از ورودي كاربر را لازم دارد، مانند باكس هاي جستجو و نام ها. اين كنترل ها با استفاده ازبرچسب < input> مربوطبه HTML ايجاد مي شوند.</li> <li>كنترل ورودي گذرواژه: اين نيز يك متن ورودي تك خطي مي باشد، اما به محض اينكه كاربر كاراكتر را وارد مي كند، اين كنترل آن را مي پوشاند.</li> <li>كنترل هاي متن ورودي چند خطي: زماني استفاده مي شود كه لازم است كاربر جزئياتي را وارد كند كه بيشتر از يك جمله مي باشند. كنترل هاي ورودي چند خطي با استفاده از برچسب < textarea> استفاده مي شوند.</li> </ul> <h3 class=" InnerTitle1">كنترل هاي ورودي تك خطي</h3> <p>اين كنترل ها براي آيتم هايي استفاده مي شوند كه كاربر فقط يك خط ورودي احتياج دارد، مانند باكس هاي جستجو و نام ها و با استفاده از برچسب < input> مربوط به HTML ايجاد مي شوند.</p> <p><br /><span class="SampleTitle"> مثال:</span></p> <p>در اينجا مثال پايه اي مي بينيد از يك ورودي تك خطي كه براي گرفتن نام كوچك و نام خانوادگي به كار مي رود .</p> <p> </p> <div class="example"> <h2 class="example_head" style="direction: ltr; text-align: right;">نمونه يك</h2> </div> <p style="direction: ltr;"><!DOCTYPE html></p> <p style="direction: ltr;"><html></p> <p style="direction: ltr;"><head></p> <p style="direction: ltr;">    <title>Text Input Control

   

   

    First name: 

       
   

    Last name: 

   

ويژگي ها

در زير ليستي از ويژگي هاي برچسب < input>را براي ايجاد فيلد متن مي بينيد.

 

Attribute
Description
type
نوع كنترل ورودي را نشان مي دهد و براي كنترل متن ورودي براي text تنظيم خواهد شد.
name
براي دادن نام به كنترلي استفاده مي شود كه قرار است براي تشخيص به سرور ارسال شود و مقدار بگيرد.
value
مي تواند براي ارائه ي يك مقدار اصلي در داخل كنترل استفاده شود.
size
اجازه مي دهد تا عرض كنترل متن ورودي را متناسب با كاراكترها تعيين كنيد.
maxlength
اجازه مي دهد تا حداكثر تعداد كاراكترهايي را كه يك كاربر مي تواند در يك تكست باكس وارد كند، مشخص كنيد.

كنترل هاي پسورد ورودي

اين كنترل نيز يك كنترل تك خطي مي باشد، اما به محض اينكه كاربر كاراكترها را وارد مي كند، آنها را مي پوشاند. اين ها نيزبا استفاده از برچسب < input> مربوط به HTML ايجاد مي شوند، اما نوع ويژگي با عنوان password تنظيم ميشود.


 مثال:

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

 

نمونه دو

ويژگي ها

در زير ليست مربوط به ويژگي هاي برچسب < input>را براي ايجاد فيلد پسوورد مي بينيد.

 

Attribute
Description
type
نوع كنترل ورودي را نشان مي دهد و براي كنترل ورودي پسوورد، براي password تنظيم خواهد شد.
name
براي نام گذاري كنترلي استفاده مي شود كه براي تشخيص وگرفتن مقدار به سرور فرستاده مي شود.
value
براي ارائه ي يك مقدار اوليه در داخل كنترل استفاده مي شود.
size
اجازه مي دهد تا عرض كنترل متن ورودي را با كاراكترها تعيين كنيد.
maxlength
اجازه مي دهد تا حداكثر تعداد كاراكترهايي را كه يك كاربر مي تواند در يك تكست باكس وارد كند، تعيين كنيد.

كنترل هاي متن ورودي چند خطي

زماني استفاده مي شود كه يك كاربر بايد جزئياتي را ئارد كند كه بيشتر از يك جمله مي باشند. كنترل هاي ورودي چند خطي با استفاده از برچسب < textarea> ايجاد ميشوند.


 مثال:

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

 

نمونه سه

 

ويژگي ها

در زير ليستي از ويژگي هاي برچسب < textarea> ارائه شده اند.

 

Attribute
Description
name
براي نامگذاري كنترلي استفاده مي شود كه به سرور ارسال مي شود تا تشخيص داده شده و مقدار بگيرد.
rows
تعداد رديف هاي area box مربوط به متن را نشان مي دهد.
cols
تعداد ستون هاي area box مربوط به متن را نشان مي دهد.

كنترل چك باكس

چك باكس ها زماني استفاده مي شوند كه بيشتر از يك گزينه قرار است انتخاب شود. آنها نيزبا استفاده از برچسب < input>ايجاد مي شوند، اما نوع ويژگي به checkbox تنظيم مي شود.


 مثال:

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

 

نمونه چهار

در زير ليستي از ويژگي هاي برچسب < checkbox> را مي بينيد:

 

Attribute
Description
type
نوع كنترل ورودي را نشان مي دهد و براي كنترل ورودي چك باكس با checkbox كنترل خواهد شد.
name
براي نامگذاري كنترلي استفاده مي شود كه براي تشخيص و گرفتن مقدار به سرور ارسال مي شود.
value
مقداري كه اگر چك باكس انتخاب شود، استفاده خواهد شد.
checked
اگر بخواهيد آن را به طور پيش فرض انتخاب كنيد، با checked تنظيم مي شود.

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

دكمه هاي راديو زماني استفاده ميشوند كه بين چندين گزينه تنها يك گزينه بايد انتخاب شود. اين كنترل ها نيز با برچسب < input> ايجاد ميشوند، اما نوع ويژگي با radio تنظيم مي شود.


 مثال:

در اينجا مثالي از كد HTML مي بينيد براي يك فرم با دو دكمه ي راديو.

 

نمونه پنج

ويژگي ها

در زير ليستي از ويژگي هاي دكمه ي راديو را مي بينيد.

 

Attribute
Description
type
نوع كنترل ورودي را نشان مي دهد و براي كنترل ورودي چك باكس با عنوان radio تنظيم مي شود.
name
براي نامگذاري كنترلي استفاده مي شود كه براي تشخيص و گرفتن مقدار به سرور ارسال مي شود.
value
مقداري كه radio box انتخاب شود، استفاده خواهد شد.
checked
اگر مي خواهيد آن را به عنوان پيش فرض استفاده كنيد، به checked تنظيم كنيد.

كنترل Select Box

يك Select Boxكه منوي رو به پايين نيز ناميده مي شود، گزينه اي را براي ارائه ي گزينه هاي مختلف به شكل يك ليست رو به پايين ارائه مي دهد، كه كاربر مي تواند از آن يك يا بيشتر از يك گزينه را انتخاب كند.


 مثال:

در اينجا مثالي از كد HTML براي يك فرم با يك جعبه ي رو به پايين مي بينيد.

 

نمونه شش

در زير ليستي از ويژگي هاي برچسب < select> را مي بينيد.

 

Attribute
Description
name
براي نامگذاري كنترلي استفاده مي شود كه براي تشخيص و گرفتن مقدار به سرور انتقال مي شود.
size
براي نمايش يك ليست باكس اسكرولينك استفاده مي شود.
multiple
اگر روي multiple تنظيم شده باشد، به كاربر اجازه مي دهد تا چند آيتم را از منو انتخاب كند.

در زير ليستي از ويژگي هاي مهم برچسب < option> ارائه شده است.

 

Attribute
Description
value
اگر در سلكت باكس يك گزينه انتخاب شده باشد، اين مقدار استفاده خواهد شد.
selected
مشخص مي كند كه اين گزينه رد زمان بارگذاري صفحه، بايد گزينه ي انتخابي باشد.
label
يك روش جايگزين براي برچسب دار كردن گزينه ها.

فايل آپلود باكس

اگر مي خواهيد به كاربر اجازه دهيد تا فايلي را روي وب سايت شما آپلود كند، به يك كنترل فايل آپلود احتياج خواهيد داشت، كه Select Boxنيز ناميده مي شود. اين ويژگي با استفاده از برچسب < input> نيز ايجاد مي شود، اما نوع ويژگي با file تنظيم مي شود.


 مثال:

در اينجا مثالي را مي بينيد از كد HTML براي يك فرم با يك فايل آپلود باكس.

 

نمونه هفت

ويژگي ها

در زير ليستي از ويژگي هاي فايل آپلود باكس را مي بينيد.


Attribute
Description
name
براي نامگذاري كنترلي استفاده مي شود كه براي تشخيص و گرفتن مقدار به سرور انتقال مي شود.
accept
نوع فايل هايي را كه سرور مي پذيرد، تعيين مي كند.

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

راه هاي مختلفي براي ايجاد دكمه هاي قابل كليك شدن وجود دارد. شما با استفاده از برچسب < input> و با تنظيم نوع ويژگي آن به button دكمه هاي قابل كليك شدن ايجاد كنيد. نوع ويژگي مي تواند مقادير زير را بگيرد.


Type
Description
submit
دكمه اي را ايجاد مي كند كه به طور خودكار يك فرم را مي پذيرد.
reset
دكمه اي را ايجاد مي كند كه به طور خودكار كنترل هاي فرم را به مقادير اوليه ي خود بازمي گرداند.
button
دكمه اي را ايجاد مي كند كه براي اجراي اسكريپت كاربر، زماني كه كاربر آن دكمه را كليك مي كند، استفاده مي شود.
image
يك دكمه ي قابل كليك شدن ايجاد مي گند، اما ما مي توانيم از يك تصوير به عنوان زمينه ي دكمه استفاده كنيم.
 مثال:

در اينجا مثالي از كد HTML براي يك فرم با سه نوع دكمه را مي بينيد.


نمونه هشت

كنترل هاي مخفي شده ي فرم

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


 مثال:

در اينجا مثالي از كد HTML براي نمايش كاربرد كنترل مخفي شده مي بينيد.


نمونه نه

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

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

فونت ها

sali چهارشنبه ۲۳ تیر ۰۰ ۱۶:۴۰ ۶ بازديد

فونت ها

فونت ها نقش مهمي در زيبا ساختن و خواناتر كردن وب سايت بازي مي كنند. ظاهرو رنگ فونت به طور كامل بستگي به كامپيوتر و مرورگري دارد كه استفاده مي شود، اما شما مي توانيد از برچسب < font>در HTML براي افزودن استايل، سايز و رنگ به متن خود در وب سايت استفاده كنيد. مي توانيد از يك برچسب< basefont> براي تنظيم تمام متن خود به اندازه، ظاهر و رنگ يكسان استفاده كنيد.
برچسب فونت داراي سه ويژگي به نام هاي size، color و face مي باشد كه فونت شكا را به دلخواه در مي آورد. براي تغيير هركدام از ويژگي هاي فونت در هر زماني در صفحه ي وب خود، به سادگي از برچسب < font> استفاده كنيد. متني كه دنبال مي كند، تغيير يافته با قي مي ماند تا زماني كه شما آن را با < /font> برچسب ببنديد. شما مي توانيد يكي از ويژگي ها يا همه ي ويژگي هاي داخل برچسب < font> را تغيير دهيد.

 

نكته:

برچسب هاي font و basefont استفاده نمي شوند و احتمال مي رود كه در ورژن هاي بعدي HTML حذف شوند. بنابراين نبايد مورد استفاده قرار بگيرند، پيشنهاد مي شود كه براي اجراي فونت هاي خود از استايل هاي CSS استفاده كنيد. اما براي رسيدن به هدف اين فصل برچسب هاي font و basefont رابا جزئيات توضيح مي دهد.

 

تنظيم اندازه ي فونت

شما مي توانيد با استفتده از ويژگي size اندازه فونت محتوا را تنظيم كنيد. دامنه ي مقادير قابل قبول از 1 (كوچكترين) تا 7 (بزرگترين) مي باشد. اندازه ي فونت پيش فرض 3 مي باشد.


 مثال:

نمونه يك

اندازه ي فونت مربوط

شما مي توانيد مشخص كنيد چه تعداد از فونت ها بزرگتر و چه تعداد كوچكتر از اندازه ي فونت حاضر باشند. مي توانيد آن را مانند< font size="+n"> or < font size="-n"> مشخص كنيد.


 مثال:

نمونه دو

تنظيم ظاهر فونت

شما مي توانيد با استفاده از ويژگي face ظاهر فونت را تنظيم كنيد، اما بايد بدانيد كه اگر كاربر بازديدكننده ي صفحه، فونت را نصب نكرده باشد، قادر به ديدن آن نخواهد بود. در عوض كاربر ظاهر فونت پيش فرض را مي بيند كه براي كامپيوترش مناسب مي باشد.


 مثال:

نمونه سه

تعيين ظاهر فونت جايگزين

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

اگر هيچكدام از فونت هاي ارائه شده نصب نشده باشند، بنابراين فونت پيش فرض Times New Roman نمايش داده خواهد شد.

 

تنظيم رنگ فونت

شما مي توانيد با استفاده از ويژگي color هر رنگي رابراي فونت تنظيم كنيد. شما مي توانيد رنگ مورد نظر خود را يا با استفاده از نام رنگ و يا با استفاده از كد هگزادسيمال براي آن رنگ تعيين كنيد.


 مثال:

نمونه چهار

عنصر < basefont>

انتظار مي رود كه عنصر < basefont> يك اندازه، رنگ و ظاهر پيش فرض براي هر بخشي از داكيومنت كه در برچسب < font>قرار نمي گيرند، تنظيم كند. شما مي توانيد از عناصر < font>استفاده كنيد تا تنظيمات < basefont> را انجام دهيد.
برچسب < basefont> همچنين ويژگي هاي رنگ، اندازه و ظاهر را مي گيرد و با دادن مقدار بيشتر از 1+ براي فونت هاي بزرگتر و كمتر از 2- براي فونت هاي كوچكتر، تنظيمات فونت مربوطه را پشتيباني مي كند.


 مثال:

نمونه پنج

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

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

رنگ در html-آموزش html

sali سه شنبه ۲۲ تیر ۰۰ ۱۷:۲۳ ۴ بازديد

رنگ در html-آموزش html 

رنگهاي HTML

رنگ ها براي دادن يك ظاهر و احساس خوب به وب سايت شما بسيار مهم مي باشند. شما مي توانيد رنگ ها را روي لايه ي صفحه با استفاده از برچسب < body>مشخص كنيد، يا مي توانيد رنگ ها را براي برچسب هاي مجزا با استفاده از ويژگي bgcolor مشخص كنيد.
برچسب< body>داراي ويژگي هاي زير مي باشد كه مي تواند براي تنظيم رنگ هاي مختلف استفاده شود.

 

  • bgcolor رنگي را براي زمينه ي صفحه تنظيم مي كند.
  • text رنگي را براي متن تنظيم مي كند.
  • alink رنگي را براي لينك هاي فعال يا انتخاب شده تنظيم مي كند.
  • link رنگي را براي متن لينك شده تنظيم مي كند.

رنگي را براي لينك هاي بازديد شده تنظيم مي كند- يعني براي متن لينك شده كه روي آن كليك كرده ايد.

 

روش هاي كدگذاري رنگ HTML

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

 

  • Color names - مي توانيد نام رنگ ها را به طور مستقيم تعيين كنيد، به عنوان مثال سبز، قرمز، آبي و غيره.
  • Hex codes - يك كد شش رقمي كه نشان دهنده ي مقدار آبي، قرمز و سبز سازنده ي رنگ، مي باشد.
  • Color decimal or percentage values- اين مقدار با استفاده از ويژگي rgb( ) تعيين مي شود.

اكنون اين روش هاي رنگ گذاري را يكي يكي بررسي خواهيم كرد.

 

رنگ هاي HTML – نام رنگ

مي توانيد براي تنظيم رنگ متن يا زمينه به طور مستقيم از نام رنگ استفاده كنيد. W3C ليستي از 16 رنگ پايه را دارد كه توسط يك اعتباز سنج HTML ارزيابي مي شود، اما نام بيشتر از 200 رنگ مختلف وجود داردكه توسط مرورگرهاي مهم پشتيباني مي شوند.

 

16 رنگ استاندارد W3C

در اينجا نام 16 رنگ استاندارد W3C را مشاهده مي كنيد، پيشنهاد مي شود كه از آنها استفاده كنيد.


 

Black

  

Gray

  

Silver

  

White
 

Yellow

  

Lime

  

Aqua

  

Fuchsia
 

Red

  

Green

  

Blue

  

Purple
 

Maroon

  

Olive

  

Navy

  

Teal

 مثال:

در اينجا مثال هايي را ميبينيد از تنظيم زمينه ي يك برچسب HTML به وسيله ي نام رنگ.

 

نمونه يك

 

  HTML Colors by Name

 

 

Use different color names for for body and table and see the result.

   

     

 

         

 

 

     

   

         

      This text will appear white on black background.   

       

رنگ هاي HTML – كدهاي Hex

آموزش html css

هگزادسيمال يك نمايش 6 رقمي از يك رنگ مي باشد. دو رقم اول يعني RR نمايانگر رنگ قرمر (Red) مي باشند، دو رقم بعدي (GG) مقدار سبز (green) را نشان مي دهند و آخرين دو رقم (BB) نيز مقدار آبي (blue) را نشان مي دهند.
هر كد هگزادسيمال به وسيله ي يك علامت # دنبال مي شود. در ادامه رنگ هاي مورد استفاده در نشانه گذاري هگزادسيمال را مشاهده مي كنيد.

 

color

Color HEX

 

#000000

 

#FF0000

 

#00FF00

 

#0000FF

 

#FFFF00

 

#00FFFF

 

#FF00FF

 

#C0C0C0

 

#FFFFFF

در زير مثال هايي را مي بينيند از تنظيم زمينه ي يك برچسب HTML به وسيله ي كد رنگ در هگزادسيمال.

 

نمونه دو

   

HTML Colors by Hex

 

 

Use different color hexa for for body and table and see the result.

   

   

   

         

       

 

 

     

 

This text will appear white on black background.   

       

رنگ هاي HTML – مقادير RGB

مقدار اين رنگ با استفاده از ويژگي rgb( ) مشخص مي شود. اين ويژگي سه مقدار مي گيرد كه هر كدام براي سبز، قرمز و آبي مي باشد. مقدار مي تواند عددي بين 0 و 255 يا يك درصد باشد.


 توجه:

همه ي مرورگرها ويژگي ( )rgb را پشتيباني نمي كنند، بنابراين توصيه مي شود از آن استفاده نكنيد.

در زير ليستي از رنگ ها با مقادير RGB را مشاهده مي كنيد.

Color
Color RGB
rgb(0,0,0)
rgb(255,0,0)
rgb(0,255,0)
rgb(0,0,255)
rgb(255,255,0)
rgb(0,255,255)
rgb(255,0,255)
rgb(192,192,192)
rgb(255,255,255)

در اينجا مثال هايي را مشاهده مي كنيد از تنظيم زمينه ي يك برچسب HTML به وسيله ي برچسب rgb() با كد رنگ.


نمونه سه

 

   

HTML Colors by RGB code

   

Use different color code for for body and table and see the result.

 

 

       

     

     

 

     

   

         

      This text will appear white on black background.   

       

در زير ليستي از 216 رنگ را مشاهده مي كنيد كه تصور مي شود سالم ترين و مستقل ترين رنگ هاي كامپيوتر باشند. اين رنگ ها از كد هگزاي 000000 تا FFFFFF متفاوت مي باشند و توسط همه ي كامپيوترهاي داراي پالت رنگ 256 تايي پشتيباني مي شوند.

 

000000

000033

000066

000099

0000CC

0000FF

003300

003333

003366

003399

0033CC

0033FF

006600

006633

006666

006699

0066CC

0066FF

009900

009933

009966

009999

0099CC

0099FF

00CC00

00CC33

00CC66

00CC99

00CCCC

00CCFF

00FF00

00FF33

00FF66

00FF99

00FFCC

00FFFF

330000

330033

330066

330099

3300CC

3300FF

333300

333333

333366

333399

3333CC

3333FF

336600

336633

336666

336699

3366CC

3366FF

339900

339933

339966

339999

3399CC

3399FF

33CC00

33CC33

33CC66

33CC99

33CCCC

33CCFF

33FF00

33FF33

33FF66

33FF99

33FFCC

33FFFF

660000

660033

660066

660099

6600CC

6600FF

663300

663333

663366

663399

6633CC

6633FF

666600

666633

666666

666699

6666CC

6666FF

669900

669933

669966

669999

6699CC

6699FF

66CC00

66CC33

66CC66

66CC99

66CCCC

66CCFF

66FF00

66FF33

66FF66

66FF99

66FFCC

66FFFF

990000

990033

990066

990099

9900CC

9900FF

993300

993333

993366

993399

9933CC

9933FF

996600

996633

996666

996699

9966CC

9966FF

999900

999933

999966

999999

9999CC

9999FF

99CC00

99CC33

99CC66

99CC99

99CCCC

99CCFF

99FF00

99FF33

99FF66

99FF99

99FFCC

99FFFF

CC0000

CC0033

CC0066

CC0099

CC00CC

CC00FF

CC3300

CC3333

CC3366

CC3399

CC33CC

CC33FF

CC6600

CC6633

CC6666

CC6699

CC66CC

CC66FF

CC9900

CC9933

CC9966

CC9999

CC99CC

CC99FF

CCCC00

CCCC33

CCCC66

CCCC99

CCCCCC

CCCCFF

CCFF00

CCFF33

CCFF66

CCFF99

CCFFCC

CCFFFF

FF0000

FF0033

FF0066

FF0099

FF00CC

FF00FF

FF3300

FF3333

FF3366

FF3399

FF33CC

FF33FF

FF6600

FF6633

FF6666

FF6699

FF66CC

FF66FF

FF9900

FF9933

FF9966

FF9999

FF99CC

FF99FF

FFCC00

FFCC33

FFCC66

FFCC99

FFCCCC

FFCCFF

FFFF00

FFFF33

FFFF66

FFFF99

FFFFCC

FFFFFF

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

برچسب ها: فيلم آموزش طراحي سايت, آموزش طراحي وب, آموزش طراحي سايت, آموزش جاوا اسكريپت,

پس زمينه در html

sali سه شنبه ۱۵ تیر ۰۰ ۱۴:۱۲ ۵ بازديد

background در html

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

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

 

  • زمينه ي HTML با رنگ ها.
  • زمينه ي HTML با تصاوير.

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

 

زمينه ي HTML با رنگها

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

< tagname bgcolor="color_value" ...>

اين color- value مي تواند به هركدام از فرمت هاي زير ارائه شود.

 

< table bgcolor="lime"

< table bgcolor="#f1f1f1">

< table bgcolor="rgb(0,0,120)">

مثال:

در اينجا مثالي را مي بينيد از تنظيم زمينه ي يك برچسب HTML.

 

نمونه يك

 

  HTML Background Colors

   

 

 

 

     

   

       

     

 

 

 

         

      This background is yellow           

   

 

 

   

   

   

       

     

 

 

 

                This background is sky blue           
 

   

 

   

   

       

   

         

 

                This background is green           

زمينه ي HTML با تصاوير

آموزش html css

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

 

 توجه:

ويژگي background به عنوان ويژگي خوبي تلقي نمي شود و توصيه مي شود از style sheet براي تنظيم زمينه استفاده كنيد.

< tagname background="Image URL" ...>

متداول ترين فرمت هاي مورد استفاده ي تصوير عبارتند از JPEG، PNG و GIF.


 مثال:

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

 

نمونه دو

زمينه هاي طرح دار و شفاف

شما ممكن است الگوها و زمينه هاي شفاف بسياري را در وب سايت هاي نختلف ديده باشيد. اين امر به راحتي و با استفاده از تصاوير طرح دار و شفاف در زمينه قابل دستيابي مي باشد. توصيه مي شود در هنگام ايجاد تصاوير طرح دار يا شفاف GIF يا PNG، از كوچكترين ابعاد ممكن آنها استفاده كنيد، حتي به كوچكي 1x1 براي جلوگيري از بارگذاري آهسته.


 مثال:

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

 

نمونه سه

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


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

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



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

 



 

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

موضوعات

آرشيو

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

برچسب ها

پيوندها

خلاصه آمار

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