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

به روز ترین مطالب آموزشی و متدلوژی های برنامه نویسی

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

پربازديدترين مطالب

محبوب ترين مطالب

سربرگ HTML

پیمان کلانتری سه شنبه ۱۸ خرداد ۰۰ | ۱۴:۴۳ ۴۸ بازديد

سربرگ HTML‏‏

یاد گرفتیم که یک نمونه داکیومنت HTML دارای ساختار زیر می باشد.

Document declaration tag
< html>
< head>
    Document header related tags
< head>
< body>
    Document body related tags
< body>
< html>

این فصل جزئیات بیشتری در مورد بخش سربرگ در HTML ارائه می دهد که به وسیله ی برچسب< head>نمایش داده می شود. برچسب< head>حاوی برچسب های مهمی می باشد که عبارتند از:< title>, < meta>, < link>, < base>,< style>, < script >, و < noscript > tags.

برچسب < title> در HTML

این برچسب برای تعیین تیتر داکیومنت HTML استفاده می شود. در زیر مثالی می بینید از ارائه ی تیتر به داکیومنت HTML.

نمونه یک

HTML Title Tag Example

Hello, World!

 

برچسب < meta> در HTML

این برچسب برای ارائه ی متادیتا در مورد داکیومنت HTML استفاده می شود که اطلاعاتی از قبیل انقضا صفحه، گردآورنده ی صفحه، لیست کلمات کلیدی، توصیف صفحه و غیره ارائه می دهد.
در ادامه استفاده های مهم برچسب < meta> در داکیومنت HTML ارائه شده اند

 

نمونه دو

HTML Title Tag Example
 
 
 
 
 
 

Hello, World!

برچسب < base> در HTML

این برچسب برای تعیین URL پایه برای همه ی URL های وابسته در صفحه استفاده می شود، که به این معناست که همه ی URL های دیگر هنگامی که برای آیتم ارائه شده قرار می گیرند، دیگر URL ها به URL پایه زنجیر خواهند شد.
به عنوان مثال تمام صفحات و تصاویر ارائه شده، پس از پیشوند دار کردن URL های ارائه شده با URL پایه مسیر prefixing جستجو خواهند شد

 

نمونه سه

HTML Title Tag Example
Logo Images

برچسب < link> در HTML

این برچسب ارتباط بین داکیومنت جاری و منبع خارجی را تعیین می کند. در ادامه مثالی را می بینید از لینک یک فایل style sheet خارجی موجود در مسیر css با یک web root.

 

نمونه چهار

HTML Title Tag Example

Hello, World!

برچسب< style>در HTML

این برچسب برای تعیین style sheet برای داکیومنت جاری HTML استفاده می شود. در ادامه مثالی را می بینید از تعریف برخی قوانین style sheet در داخل برچسب< style>.

 

نمونه پنج




HTML style Tag Example




Hello, World!





 توجه:

برای فراگیری چگونگی کار Cascading Style Sheet یک آموزش مجزای موجود در اینجا را کلیک کنید.

برچسب< script>در HTML

این برچسب برای وارد کردن فایل اسکریپت خارجی و یا تعریف فایل اسکریپت داخلی برای داکیومنت HTML استفاده می شود. در زیر مثالی را می بینید که در آن از جاوا اسکریپت برای تعریف عملکرد ساده ی جاوااسکریپت استفاده می کنیم.

 

نمونه شش




HTML Title Tag Example








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

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

HTML Marquees

پیمان کلانتری دوشنبه ۱۷ خرداد ۰۰ | ۱۵:۳۵ ۵۴ بازديد

HTML Marquees
 
آموزش طراحی سایت 

آموزش HTML Marquee ‏ ‏‏

Marquee در HTML یک قطعه اسکرولینگ می باشد که یا به صورت افقی در عرض متن ویا به صورت عمودی در پایین صفحه ی وب شما نمایش داده می شود، بستگی به تنظیمات دارد وتوسط برچسب < fmarquees>مربوط به HTML ایجاد می شود.

 

 توجه:

ممکن است برچسب < marquees> در HTML توسط مرورگرهای زیادی پشتیبانی نشود، بنابراین توصیه می شود که به این برچسب تکیه نکنید، در عوض می توانید از javascript و CSS برای ایجاد چنین تاثیراتی استفاده کنید.

ترکیب ساده برای استفاده از برچسب< marquees> در HTML مانند زیر می باشد:


< marquee attribute_name="attribute_value" ....more attributes>
    One or more lines or text message or image
< /marquee>


ویژگی های برچسب < marquee>

در زیر لیست مهمی از ویژگی های برچسب < marquee> را می توانید مشاهده کنید.

Attribute                                                                                                             Description
width
  این ویژگی عرض marquee را مشخص می کند. می تواند مقداری مانند 10 یا 20 درصد باشد.                                                                  
height
این ویژگی طول marquee را مشخص می کند. می تواند مقداری مانند 10 یا 20 درصد باشد                                                                    .
direction
این ویژگی مسیری را که marquee باید در آن اسکرول شود، تعیین می کند. می تواند مقداری مانند up، down، left و یا right داشته باشد.       
behavior
این ویژگی نوع اسکرول marquee را تعیین می کند. می تواند مقداری مانند scroll، side و alternate داشته باشد.                                        
scrolldelay
این ویژگی میزان تاخیر بین دو پرش را تعیین می کند. می تواند مقداری مانند 10 داشته باشد.                                                                  
scrollamount
سرعت متن marquee را تععین می کند. می تواند مقداری مانند 10 داشته باشد.                                                                                  
loop
تعداد دفعات loop را تعیین می کند. مقدار پیش فرض INFINITE می باشد که به این معناست که در marquee به طور پایان ناپذیری loop انجام می شود. 
bgcolor
این ویژگی رنگ زمینه را به شکل نام رنگ یا مقدار شش تایی رنگ مشخص می کند.                                                                              
hspace
این ویژگی فضای افقی اطراف marque را تعیین می کند. می تواند مقداری مانند 10 یا 20 درصد داشته باشد.                                              
vspace
این ویژگی فضای عمودی اطراف marquee را تعیین می کند. می تواند مقداری مانند 10 یا 20 درصد داشته باشد.                                           



در ادامه چند مثال از استفاده ی برچسب marquee می بینید.


 مثال:

نمونه یک

HTML marquee Tag
This is basic example of marquee

 مثال:

نمونه دو

HTML marquee Tag
This example will take only 50% width
 مثال:

نمونه سه

HTML marquee Tag
This text will scroll from left to right
 مثال:

نمونه چهار

HTML marquee Tag
This text will scroll from bottom to up
جهت مشاهده کدها برروی دوره آموزش طراحی سایت کلیک نمایید
برچسب ها: آموزش طراحی وب, فیلم اموزش طراحی سایت, آموزش جاوا اسکریپت, آموزش html css,

HTML Embed Multimedia

پیمان کلانتری پنجشنبه ۱۳ خرداد ۰۰ | ۱۸:۰۳ ۴۶ بازديد

HTML Embed Multimedia

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

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

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


 مثال:

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

 

مرحله 1

HTML embed Tag <title></span></div> <div style="direction: ltr;"><span style="font-size: 12px;"><head></span></div> <div style="direction: ltr;"><span style="font-size: 12px;"><body></span></div> <div style="direction: ltr;"><span style="font-size: 12px;"><embed src="/html/yourfile.mid"` width="100%" height="60"></span></div> <div style="direction: ltr;"><span style="font-size: 12px;"><noembed><img src="yourimage.gif" alt="Alternative Media" loading="lazy" decoding="async"><noembed></span></div> <div style="direction: ltr;"><span style="font-size: 12px;"><embed></span></div> <div style="direction: ltr;"><span style="font-size: 12px;"><body></span></div> <div style="direction: ltr;"><span style="font-size: 12px;"><html><br /><br /></span> <h3 class=" InnerTitle1" style="text-align: right;">ویژگی های برچسب < embed></h3> <p style="text-align: right;">در زیر لیستی از ویژگی های مهمی را می بینید که توسط برچسب < embed> استفاده می شود.</p> <span style="font-size: 12px;"><br /></span> <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" style="direction: rtl;">میزان صدا را کنترل می کند که می تواند از 0 (صدا قطع شده) تا 100 (آخرین حد صدا) باشد.</div> </div> </div> </div> <h3 class=" InnerTitle1" style="direction: rtl;">انواع ویدیوهای پشتیبانی شده</h3> <p style="direction: rtl;">می توانید از انواع مدیاهای مختلفی مانند فایل های flash movies، AVi و MOV در داخل برچسب embed استفاده کنید.</p> <span style="font-size: 12px;"><br /></span> <div style="direction: rtl;">فایل های swf – فایل هایی هستند که با برنامه ی macromedia’s flash تولید می شوند.</div> <div style="direction: rtl;">فایل های wmv – انواع فایل های تصویری ویندوز مایکروسافت می باشند.</div> <div style="direction: rtl;">فایل های mov - فرمت Quick time movie در اپل.</div> <div style="direction: rtl;"> فایل های mpeg – فایل های تصویری هستند که توسط گروه تخصصی تصاویر متحرک (Moving Pictures Expert Group) ایجاد می شوند.</div> <div class="example"> <h2 class="example_head" style="direction: rtl; text-align: right;">مرحله2<br /><br /></h2> <div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><!DOCTYPE html></span></div> <div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><html xmlns="http://www.w3.org/1999/xhtml"></span></div> <div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><head></span></div> <div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><title>HTML embed Tag<title></span></div> <div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><head></span></div> <div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><body></span></div> <div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><embed src="/html/yourfile.swf" width="200" height="200"></span></div> <div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><noembed><img src="yourimage.gif" alt="Alternative Media" loading="lazy" decoding="async"><noembed></span></div> <div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><embed></span></div> <div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><body></span></div> <div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><html><br /></span> <h3 class=" InnerTitle1" style="text-align: right;">صدای زمینه</h3> <p style="text-align: right;">شما می توانید از برچسب < bgsound>در html برای اجرای صدا در زمینه ی صفحه ی وب خود استفاده کنید. این برچسب فقط توسط اینترنت اکسپلورر پشتیبانی می شود و دیگر مرورگرها آن را نادیده می گیرند. زمانی که سند اصلی در ابتدا توسط کاربر دانلود شده و نمایش داده می شود، این برچسب یک فایل صدا را دانلود کرده و اجرا می کند. همچنین هروقت کاربر مرورگر را تازه سازی کند، صدای زمینه نیز دوباره اجرا خواهد شد.این برچسب دارای فقط دو ویژگی می باشد، loop و src، که همانطور که در بالا توضیح داده شد هر دوی این ویژگی ها دارای یک معنا می باشند.<br />در اینجا مثال ساده ای از اجرای فایل کوچک midi را می بینید.</p> <span style="font-size: 12px;"><br /></span> <div class="example"> <h2 class="example_head" style="text-align: right;">جهت مشاهده مثالها برروی <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> کلیک نمایید</h2> </div> </div> </div> </div> </div> <div id="gtx-trans" style="position: absolute; left: 639px; top: -11.9236px;"> </div> </div> <div class="post-tags"> <span class="tag"> </span> برچسب ها: <a href="https://tahlildadeh.farsiblog.com/tag/آموزش+طراحی+سایت/">آموزش طراحی سایت</a>, <a href="https://tahlildadeh.farsiblog.com/tag/دوره+طراحی+سایت/">دوره طراحی سایت</a>, <a href="https://tahlildadeh.farsiblog.com/tag/طراحی+سایت+دیجی+کالا/">طراحی سایت دیجی کالا</a>, </div> </div> <div class="post-info"> <ul> <li> <div class="postlike"><a href="https://tahlildadeh.farsiblog.com/prate/upMCzMaLPUzVwOfpL/" class="uplike"><span class="like-up"></span></a><span class="up-result"><span class="fbrateQuery fbrateUp" id="fbrate_upMCzMaLPUzVwOfpL">۰</span></span><a href="https://tahlildadeh.farsiblog.com/prate/downMCzMaLPUzVwOfpL/" class="downlike"><span class="like-down"></span> </a><span class="down-result"><span class="fbrateQuery fbrateDown" id="fbrate_downMCzMaLPUzVwOfpL">۰</span></span></div> </li> <li> <span class="postcmnt"> <a href="https://tahlildadeh.farsiblog.com/post/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.farsiblog.com/post/آموزشIframesدرhtml/" target="_blank" rel="noopener noreferrer"> آموزش Iframes در html </a></h2> </div> <div class="post-body"> <div class="post-details"><span class="postauthor">پیمان کلانتری</span> <span class="postdate"> چهارشنبه ۱۲ خرداد ۰۰ | ۱۲:۴۵ </span> <span class="postviews"> ۴۴ بازديد </span> </div> <div class="post-cnt"> <h2 class=" InnerTitle"><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> - آموزش Iframes</h2> <p>شما می توانید یک frame درون خطی را با استفاده از برچسب < iframe>مربوط به HTML تعریف کنید. این برچسب به برچسب < frameset>ارتباطی ندارد، در عوض می تواند در هرجایی در داکیومنت شما ظاهر شود. برچسب< iframe>یک محدوده ی مستطیلی را در داخل داکیومنت تعریف می کند که در آن مرورگر می تواند یک داکیومنت مجزا را ارائه دهد، مانند نوارهای اسکرول و حاشیه ها.<br />ویژگی src برای مشخص کردن URL مربوط به داکیومنتی استفاده می شود که حاوی frame درون خطی می باشد.</p> <br /><span class="SampleTitle"> مثال:</span><br /> <p>در زیر مثالی را می بینید که چگونگی استفاده از < iframe> را توضیح می دهد.</p> <br /> <div class="example"> <h2 class="example_head">نمونه یک<br /><br /></h2> <div style="direction: ltr;"><span style="font-size: 12px;"><!DOCTYPE html></span></div> <div style="direction: ltr;"><span style="font-size: 12px;"><html></span></div> <div style="direction: ltr;"><span style="font-size: 12px;"><head></span></div> <div style="direction: ltr;"><span style="font-size: 12px;"><title>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

پیمان کلانتری دوشنبه ۱۰ خرداد ۰۰ | ۱۷:۳۷ ۳۷ بازديد

آموزش طراحی سایت - آموزش قابها در html

قاب های HTML

قاب های HTML برای تقسیم پنجره ی مرورگر شما به چند بخش استفاده می شوند که هر بخش می تواند یک داکیومنت مجزای HTML رابارگذاری کند. مجموعه ای از چارچوب ها در پنجره ی مروگر به عناون frameset شناخته می شوند. به روش مشابهی که جدول ها سازماندهی می شوند، پنجره نیز به چارچوب های مختلف تقسیم می شود: در ستون ها و ردیف ها.

 

نقطه ضعف های چارچوب ها:

در استفاده از چارچوب ها نقاط ضعفی وجود دارد، بنابراین هرگز توصیه نمی شود در صفحات وب خود از این چارچوب ها استفاده کنید.
برخی دستگاه های کوچکتر نمی توانند این چارچوب ها را در خود داشته باشند، زیرا صفحه آنها آنقدر بزرگ نیست که تقسیم شود.
گاهی اوقات صفحه ی شما در یک کامپیوتر متفاوت به خاطر وضوح تصویر متفاوت، طور دیگری نمایش داده می شود.
ممکن است دکمه ی بازگشت مرورگر آنطوری که کاربر انتظار دارد کار نکند.
هنوز مرورگرهایی هستند که فن آوری چارچوب را پشتیبانی نمی کنند.

 

ایجاد چارچوب ها:

برای استفاده از چارچوب ها در یک صفحه از برچسب < frameset> به جای < body>استفاده می کنیم. برچسب< frameset> چگونگی تقسیم پنجره به چارچوب را تعریف می کند. ویژگی rows از برچسب < frameset> چارچوب های افقی و ویژگی cols نیز چارچوب های عمودی را تعریف می کنند. هر چارچوب توسط برچسب < frame> نشان داده شده است و تعریف می کند که کدام داکیومنت HTML باید در داخل چارچوب باز شود.

 مثال:

در زیر مثالی را برای ایجاد سه چارچوب افقی می بینید.

 

نمونه یک

 

    HTML Frames

   

   

   

    </span></p> <p style="text-align: left;"><span style="color: #333333; font-family: byekan;">&nbsp; &nbsp; &nbsp; &nbsp; <body></span></p> <p style="text-align: left;"><span style="color: #333333; font-family: byekan;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Your browser does not support frames.</span></p> <p style="text-align: left;"><span style="color: #333333; font-family: byekan;">&nbsp; &nbsp; &nbsp; &nbsp; </body></span></p> <p style="text-align: left;"><span style="color: #333333; font-family: byekan;">&nbsp; &nbsp;

ویژگی های برچسب < frameset>:


Attribute                                                                                                          Description
cols
تعداد ستون ها و اندازه ی هر ستون را در frameset مشخص می کند. شما می توانید عرض هر ستون را به یکی از چهار روش زیر مشخص کنید:
مقادیر مطلق به پیکسل، برای مثال برای ایجاد سه چارچوب عمودی از cols="100, 500,100" استفاده کنید. درصدی از پنجره ی مرورگر، برای مثال برای ایجاد سه چارچوب عمودی از cols="10%, 80%,10%" استفاده کنید.
استفاده از سمبل wildcard ، برای مثال برای ایجاد سه چارچوب عمودی از cols="10%, *,10%" استفاده کنید. در این مورد wildcard باقیمانده ی پنجره را فرا می گیرد.
به عنوان عرض های پنجره ی مرورگر، به عنوان مثال برای ایجاد سه چارچوب عمودی از cols="3*,2*,1*" استفاده کنید. این یک جایگزین بری درصدها می باشد. شما می توانید از عرض های مربوط پنجره ی مرورگر استفاده کنید. در اینجا پنجره به شش بخش تقسیم می شود: اولین ستون نصف پنجره را فرا می گیرد، دومین ستون یک سوم و سومین ستون یک ششم آن را.
rows
این ویژگی درست مانند ویژگی cols کار می کند و همان مقادیر را به خود می گیرد، اما برای مشخص کردن ردیف ها در frameset استفاده می شود. برای مثال برای ایجاد دو چارچوب افقی از rows="10%, 90%" استفاده کنید. می توانید طول هر ردیف را به همان روشی که در بالا در مورد ستون ها توضیح داده شد، مشخص کنید.
border
این ویژگی عرض حاشیه ی هر چارچوب را به پیکسل مشخص می کند. برای مثال border="5" . مقدار 0 به معنای بدون حاشیه می باشد.
frameborder
این ویژگی مشخص می کند که آیا بین چارچوب ها باید حاشیه ی سه بعدی نمایش داده شود. این ویژگی مقدار 1 (بله) و 0 (خیر) را به خود می گیرد. برای مثال frameborder="0" به معنای بدون حاشیه می باشد.
framespacing
این ویژگی مقدار فضای بین چارچوب ها را در یک frameset مشخص می کند. این ویژگی می تواند هرمقدار داخلی به خود بگیرد. برای مثال framespacing="10" به معنای وجود 10 پیکسل فضا بین هر چارچوب می باشد.

ویژگی های برچسب < frame>

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

 

مرورگرهایی که frame ها را پشتیبانی می کنند

اگر کاربر از مرورگرهای قدیمی یا مرورگرهایی استفاده کند که frame را پشتیبانی نمی کنند، عنصر < noframes>باید به یوزر نمایش داده شود. بنابراین شما باید یک عنصر < body>را داخل عنصر < noframes>قرار دهید، زیرا تصور می شود که عنصر< frameset>جایگزین عنصر< body>می شود. اما اگر یک مرورگر < frameset>را درک نکند، بنابراین باید آنچه را که داخل عنصر< body>می باشد درک کند که حاوی عنصر < noframes>می باشد.
شما می توانید به یوزرهای خود که از مرورگرهای قدیمی استفاده می کنند، پیام هایی بدهید. برای مثال پیام Sorry!! your browser does not support frames. ، همانطور که در مثال بالا نشان داده شده است.

 

نام frame و ویژگی های target

یکی از محبوب ترین موارد استفاده از frame قرار دادن نوارهای مسیریابی در یک frame و سپس بارگذاری صفحات اصلی در یک frame مجزا می باشد.


 مثال:

اجازه بدهید مثال زیر را بررسی کنیم که داری کد زیر می باشد:

آموزش html css

نمونه دو

 

    HTML Frames

   

   

   

    </p> <p style="direction: ltr;">&nbsp; &nbsp; &nbsp; &nbsp; <body></p> <p style="direction: ltr;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Your browser does not support frames.</p> <p style="direction: ltr;">&nbsp; &nbsp; &nbsp; &nbsp; </body></p> <p style="direction: ltr;">&nbsp; &nbsp;

در اینجا دو ستون ایجاد کرده ایم که قرار است با دو ستون پر شوند. اولین frame دارای عرض 200 پیکسل می باشد و حاوی نوار منوی مسیر یابی می باشد که توسط فایل menu.htm اجرا می شود. دومین ستون فضای باقیمانده را پر کرده و حاوی بخش اصلی صفحه خواهد بود و توسط فایل main.htm اجرا می شود. برای هرسه لینک موجود در نوار منو یک frame هدف به عنوان main_page ذکر کرده ایم، بنابراین هر زمان روی لینک های موجود در نوار منو کلیک کنید، لینک موجود در main_page باز خواهد شد.
در زیر محتوای فایل menu.htm را مشاهده می کنید.


نمونه سه

   Google

 

    Microsoft

   

 

در زیر محتوای فایل main.htm را مشاهده می کنید.

 

نمونه چهار

 

   

This is main page and content from any link will be displayed here.

   

So now click any link and see the result.

اکنون می توانید لینک های موجود در پنل چپ را کلیک کرده و نتیجه را مشاهده کنید. ویژگی target نیز یکی از مقادیر زیر را می گیرد:

 

Option
Description
_self
صفحه را روی frame جاری بارگذاری می کند.
_blank
صفحه را روی یک پنجره ی مرورگر جدید بارگذاری کرده ، در حالیکه یک پنجره ی جدید باز می کند.
_parent
صفحه را روی پنجره ی اصلی بارگذاری می کند که در مورد یک frameset مجزا مرورگر اصلی پنجره می باشد.
_top
صفحه را روی پنجره ی مرورگر بارگذاری می کند، در حالیکه هر frame موجود را جایگزین می کند.
targetframe
صفحه را در یک target frame نام گذاری شده بارگذاری می کند

 

 

برچسب ها: آموزش BootStrap, آموزش سئو در طراحی سایت, آموزش CSS, آموزش HTML5,

آموزش لینک ایمیل در 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

 

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

 

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

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

 

نمونه دو

SendMail
Send Feedback
 

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

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

آموزش لینک های عکس در html

پیمان کلانتری جمعه ۰۷ خرداد ۰۰ | ۱۲:۳۷ ۴۳ بازديد

آموزش لینک های عکس در html

آموزش طراحی سایت - آموزش Image Link

تاکنون مشاهده کردیم که چگونه با استفاده از متن، یک لینک هایپرتکست ایجاد کنیم و همچنین فرا گرفته ایم که چگونه از تصاویر در صفحات وب خود استفاده کنیم. اکنون فرا خواهیم گرفت که چگونه با استفاده از تصاویر هایپرلینک ایجاد کنیم.


 مثال:

استفاده از تصویر به عنوان هایپرلینک بسیار ساده می باشد. لازم است که یک تصویر را در داخل هایپرلینک در محل تصویر قرار دهیم، همانطور که در زیر نشان داده شده است.

 

نمونه یک

 
Image Hyperlink Example

Click following link

tahlildadeh

 

این ساده ترین راه ایجاد هایپرلینک با استفاده از تصاویر می باشد.

 

تصاویر حساس به ماوس

استانداردهای HTML و XHTML یک ویژگی ارائه می دهند که به شما اجازه می دهد لینک های مختلفی را در داخل یک تصویر اجرا کنید. شما می توانید براساس مختصات مختلف موجود روی تصویر، لینک های مختلفی را روی یک تصویر مجزا ایجاد کنید. زمانی که لینک های متفاوت به مختصات متفاوت ضمیمه می شود، می توانیم برای باز کردن داکیومنت های تارگت روی بخش های مختلف تصویر کلیک کنیم. چنین تصاویری که به ماوس حساس می باشند، تصاویر نقشه نامیده میشوند. دو روش برای ایجاد چنین تصاویری وجود دارد.

 

  • Server-side image maps - توسط ویژگی ismap از برچسب < img> فعال می شود و دستیابی به یک سرور و پردازش برنامه های مربوط به تصویر نقشه لازم می باشد.
  •  Client-side image maps - با استفاده از ویژگی usemap از برچسب < img> همراه با برچسب های متناظر< map> و < area> ایجاد می شود.

Server side image maps

آموزش html css

در اینجا به سادگی تصویر خود را داخل یک هایپرلینک قرار داده و از ویژگی ismap استفاده کنید که آن را یک تصویر خاص می سازد و وقتی یوزر در بخشی از تصویر کلیک می کند، مرورگر مختصات اشاره گر ماوس را همراه با URL مشخص شده در برچسب < a>به سرور وب منتقل می کند. سرور از مختصات اشاره گر ماوس استفاده می کند تا تعیین کند کدام داکیومنت باید به مرورگر بازگردانده شود.
زمانی که ismap استفاده می شود، ویژگی href از برچسب < a> باید URL یک برنامه ی سرور را مانند یک cgi یا اسکریپت PHP و غیره در برداشته باشد، تا درخواست ورودی را براساس مختصات انتقال داده شده پردازش کند. مختصات موقعیت ماوس پیکسل های صفحه میباشند که از گوشه ی بالای سمت چپ تصویر شمرده می شوند و با (0,0) شروع می شوند. مختصات دنبال شده با یک علامت سوال، به انتهای URL اضافه می شوند.


 مثال:

نمونه دو

ISMAP Hyperlink Example

Click following link

tahlildadeh

سپس مرورگر پارامترهای جستجوی زیر را به سرور می فرستد که می تواند توسط اسکریپت ismap.cgi یا فایل map پردازش شود و شما می توانید هر داکیومنتی را که دوست داشته باشید به این مختصات لینک کنید.

 

/cgi-bin/ismap.cgi?20,30

از این طریق شما می توانید لینک های مختلفی را به مختصات متفاوت یک تصویر اختصاص دهید، و وقتی این مختصات کلیک می شوند، می توانید داکیومنت های لینک شده ی متناظر را باز کنید.

 

 توجه:

شما برنامه نویسی CGI را زمانی فراخواهید گرفت که برنامه نویسی perl را مطالعه کنید. می توانید اسکریپت خود را بنویسید تا این مختصات انتقال داده شده را با استفاده از PHP یا هر اسکریپت دیگری پردازش کنید. فعلا اجازه بدهید روی یادگیری HTML تمرکز کنیم، می توانید این فصل را بعدا بازبینی کنید.

Client side image maps

این تصاویر به وسیله ی ویژگی usemap از برچسب < img> فعال می شوند و به وسیله ی برچسب های ضمیمه ی< map>و< area> تعریف می شوند.
نقشه ای که قرار است نقشه را طراحی کند، به وسیله ی< img> به عنوان یک تصویرعادی وارد صفحه می شود، به جز اینکه این مورد ویژگی اضافه ای به نام usemap همرا خود دارد. مقدار ویژگی usemap مقداری می باشد که در یک برچسب< map>استفاده می شود تا برچسب های تصویر و نقشه را لینک کند.< map>همراه با برچسب های< area> همه ی مختصات تصویر و لینک های مربوطه را تعریف می کند.
برچسب< area> در داخل برچسب نقشه مختصات و شکل حاشیه های قابل کلیک در داخل تصویر را تعریف می کند. در اینجا مثالی از تصویر نقشه می بینید.

 

نمونه سه

 
Tahlildadeh
 

سیستم مختصات

مقدار حقیقی مختصات کانلا به شکل در سوال وابسته است. در اینجا خلاصه ای می بینید که قرار است با مثال های مفصل دنبال شوند

rect = x1 , y1 , x2 , y2

x1 و y1 مختصات گوشه ی بالای سمت چپ از مستطیل می باشد. x2 و y2 مختصات گوشه ی سمت راست پایین می باشند.

circle = xc , yc , radius

xc و yc مختصات مرکز دایره و radius شعاع دایره می باشد. دایره ای به مرکز200,50 با شعاع 25 دارای ویژگی coords="200,50,25" خواهد بود.

poly = x1 , y1 , x2 , y2 , x3 , y3 ,... xn , yn

جفت های مختلف x-y رئوس چند ضلعی می باشند، با یک خط که از یک نقطه به نقطه ی دیگر کشیده شده. یک چندضلعی لوزی شکل با بالاترین راس آن در نقطه ی 20،20 و 40 پیکسل، در عریض ترین نقطه ی خود دارای ویژگی coords="20,20,40,40,20,60,0,40" می باشد.
تمام مختصات مربوط به بالاترین گوشه ی سمت چپ تصویر می باشند. هر شکل دارای یک URL مربوطه می باشد. می توانید از هر نرم افزار تصویری برای
دانستن مختصات موقعیت های مختلف استفاده کنید.


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

آموزش لینک های متنی

پیمان کلانتری چهارشنبه ۰۵ خرداد ۰۰ | ۱۲:۴۴ ۴۰ بازديد

آموزش طراحی سایت - آموزش لینک های متنی

لینک های متن 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



این مثال نتیجه ی زیر را تولید خواهد کرد که می توانید روی لینک های مختلف کلیک کنید تا تفاوت بین گزینه های مختلف ارائه شده برای ویژگی 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 برسید.
اکنون 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

تنظیم رنگ های لینک

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


 مثال:

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

 

نمونه شش




Hyperlink Example


download pdf file



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


HTML tahlildadeh

دانلود کردن لینک ها

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



جهت مشاهده مثال ها برروی آموزش طراحی سایت کلیک نمایید 

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

آموزش List

پیمان کلانتری سه شنبه ۰۴ خرداد ۰۰ | ۱۶:۵۴ ۴۰ بازديد

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

آموزش List

HTML سه روش برای مشخص کردن لیست هایی از اطلاعات ارائه می دهد. تمام لیست ها باید شامل یک یا بیشتر ازیک عنصر باشند. لیست ها ممکن است شامل موارد زیر شوند.

 

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

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

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

 مثال:

نمونه یک

 

    HTML Unordered List

   

           

  • Beetroot

    •        

  • Ginger

    •        

  • Potato

    •        

  • Radish

    •    

ویژگی type

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

 

?
1
2
3
<ul type="square">
<ul type="disc">
<ul type="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> استفاده کنیم تا نوع شماره گذاریمورد نظر خود را مشخص کنید. به طور پیش فرض شماره گذاری به وسیله ی عدد انجام می شود. در زیر گزینه های ممکن را مشاهده می کنید.

 

?
1
2
3
4
5
6
7
8
9
<ol type="1">
    - Default-Case Numerals.
<ol type="I">
        - Upper-Case Numerals.
<ol type="i">
            - Lower-Case Numerals.
<ol type="a">
                - Lower-Case Letters.
<ol type="A"> - Upper-Case Letters.ol>ol>ol>ol>ol>

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


نمونه پنج

 

    HTML Ordered List

   

           

  1. Beetroot

    2.        

  2. Ginger

    3.        

  3. Potato

    4.        

  4. Radish

    5.    

 

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

 

نمونه شش

 

    HTML Ordered List

   

           

  1. Beetroot

    2.        

  2. Ginger

    3.        

  3. Potato

    4.        

  4. Radish

    5.    

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

 

نمونه هفت

    HTML Ordered List

   

           

  1. Beetroot

    2.        

  2. Ginger

    3.        

  3. Potato

    4.        

  4. Radish

    5.    

مثال:

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


نمونه هشت

 

    HTML Ordered List

   

           

  1. Beetroot

    2.        

  2. Ginger

    3.        

  3. Potato

    4.        

  4. Radish

    5.    

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


نمونه نه

 

    HTML Ordered List

   

           

  1. Beetroot

    2.        

  2. Ginger

    3.        

  3. Potato

    4.        

  4. Radish

    5.    

 

ویژگی start

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

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

 

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

 

نمونه ده

    HTML Ordered List

   

           

  1. Beetroot

    2.        

  2. Ginger

    3.        

  3. Potato

    4.        

  4. Radish

    5.    

 

ست های تعریف HTML

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

 

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

 مثال:

نمونه یازده

 

    HTML Definition List

   

       

HTML

       

This stands for Hyper Text Markup Language

       

HTTP

       

This stands for Hyper Text Transfer Protocol

   

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


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

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

پیمان کلانتری یکشنبه ۰۲ خرداد ۰۰ | ۱۳:۴۳ ۳۸ بازديد
آموزش طراحی سایت - آموزش ساخت جدول در html

آموزش Table در HTML

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

مثال:

نمونه یک




HTML Tables











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




ویژگی های colspan و rowspan

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


 مثال:

نمونه سه


HTML Table Colspan/Rowspan
Column 1 Column 2 Column 3
Row 1 Cell 1Row 1 Cell 2Row 1 Cell 3
Row 2 Cell 2Row 2 Cell 3
Row 3 Cell 1

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

می توانید به دو روش زیر برای جدول خود زمینه ای تنظیم کنید.
  • ویژگی Bg color: می توانید رنگ زمینه را برای همه ی جدول و یا تنها برای یک سلول تنظیم کنید.
  • ویژگی background: می توانید یک تصویر را برای کل جدول یا تنها یک سلول تنظیم کنید.

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


مثال:

نمونه چهار


HTML Table Background
Column 1 Column 2 Column 3
Row 1 Cell 1Row 1 Cell 2Row 1 Cell 3
Row 2 Cell 2Row 2 Cell 3
Row 3 Cell 1

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

نمونه پنج

HTML Table Background
Column 1 Column 2 Column 3
Row 1 Cell 1Row 1 Cell 2Row 1 Cell 3
Row 2 Cell 2Row 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

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


 مثال:

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

 جهت مشاهده مثال بالا برروی دوره آموزش طراحی سایت  کلیک نمایید

 
برچسب ها: آموزش طراحی سایت, آموزش HTML, آموزش CSS, دوره آمورش طراحی سایت,

پربحث ترين مطالب

آخرين نظرات

درباره من

آموزشگاه تحلیل داده ارایه دهنده به روز ترین مطالب آموزشی و متدلوژی های برنامه نویسی است که در این زمینه بی رقیب است
یکشنبه ۲۱ تیر ۰۵

موضوعات

نويسندگان

آرشيو

برچسب ها

خلاصه آمار

  • مجموع نمایش‌ ۲۷,۶۰۹
  • مجموع بازدید ۱۵,۹۱۹
  • بازدید امروز ۵
  • بازدید دیروز ۰
  • مجموع مطالب ۹۴
  • مجموع نظرات ۲۱
  • افراد آنلاین ۱

من در شبكه هاي اجتماعي

پيوندها

فارسي بلاگ : رسـانه وبلاگ نويسان حرفـه اي