loading...
آموزش ها
تبلیغات ویزه
        sms.mida-co.ir



       
       
M:A بازدید : 179 پنجشنبه 10 اسفند 1391 نظرات (0)
با کمک فريمها قادر به نمايش همزمان بيش از يک صفحه وب در پنجره مرورگر خواهيد شد. در اين درس با مفاهيم فريم ( Frame ) و تگ هاي مربوطه مخصوصا تگهاي Frame و Frameset آشنا خواهيد شد.
________________________________________
مثالها:

مجموعه فريمهاي عمودي
مثالي در مورد ايجاد مجموعه فريمهاي عمودي توسط تگ هاي frameset و frame
مجموعه فريمهاي افقي
مثالي در مورد ايجاد مجموعه فريمهاي افقي توسط تگ هاي frameset و frame
مثالهاي بيشتر
________________________________________

فريمها (Frames)
با کمک فريمها قادر به نمايش همزمان بيش از يک صفحه وب در پنجره مرورگر خواهيد شد. هر صفحه يا دريچه، فريم (frame) ناميده شده و فريمها کاملا مستقل از هم ميباشند. محتواي هر فريم هم ميتواند هر صفحه يا وب سايتي باشد. هر چند که فريمها طراحي سايتهاي کوچک و متوسط را بسيار آسان ميکنند ولي استفاده از آنها در کارهاي حرفه اي توصيه نميشود.(به جز در موارد خاص)
معايب استفاده از فريمها:
• موتورهاي جستجو با صفحات طراحي شده با فريمها مشکل دارند.
• چاپ و print صفحاتي که از فريمها استفاده ميکنند مشکل است.
• صفحاتي که از فريمها استفاده ميکنند معمولا مبتدي بودن طراح سايت را نشان ميدهد!!
________________________________________
تگ فريم ست (Frameset)
• تگ <frameset> به تعريف فريمها و تقسيم بندي پنجره مرورگر ميپردازد.
• هر تگ <frameset> مجموعه اي از رديفها يا ستونها را تعريف ميکند.
• داخل هر فريم ميتواند frameset ديگري قرار دهيد.
• با کمک شناسه هاي rows و cols ابعاد و نسبت هر فريم تعيين ميگردد.
• تگ <frameset> درون تگهاي <html> و <html/> قرار ميگيرد.(نيازي به قيد تگ body هنگام معرفي يک frameset نيست.)
________________________________________
تگ فريم (Frame)
• کاربرد اصلي تگ <frame> تعيين source يا نام صفحه اي است که بايد در فريم ها نمايش داده شود.
مثال زير مجموعه اي از فريمها را که شامل دو فريم عمودي ميباشند معرفي ميکند. از سمت چپ فريم اول 75 درصد و فريم دوم 25 درصد از عرض پنجره مرورگر را به خود نمايش خواهند داد. در ادامه تعريف محتويات هر فريم، درون فريم اول فايل "frame_left.html" و درون فريم دوم فايل "frame_right.html" نمايش داده خواهد شد.
<html>
<frameset cols="75%,25%">
<frame src="frame_left.html">
<frame src="frame_right.html">
</frameset>
</html>
براي نمايش مثال بالا به سه فايل نياز داريد، frame_left.html ،frame_right.html و فايل کد اچتمل بالا.
________________________________________
شناسه هاي cols و rows در تگ frameset
شناسه مقدار شناسه کارکرد
cols عرض پنجره بر اساس پيکسل، درصد يا علامت * تعيين تعداد و اندازه ستونها در فريم ست


rows عرض پنجره بر اساس پيکسل، درصد يا علامت * تعيين تعداد و اندازه رديفها در فريم ست


مثالهاي زير را در نظر بگيريد:
مثال 2 مثال 1
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_3.html">
<frame src="frame_2.html">
<frame src="frame_1.html">
</frameset>
</html>
<html>
<frameset cols="*,200">
<frame src="frame_2.html">
<frame src="frame_1.html">
</frameset>
</html>

نمايش توسط مرورگر
نمايش توسط مرورگر

در مثال يک عرض فريم اول از سمت راست 200 پيکسل تعيين شده و بقيه عرض پنجره که با علامت * مشخص ميشود به فريم دوم اختصاص خواهد يافت.
در مثال دوم عرض پنجره با مقادير درصدي به فريمها اختصاص يافته است.
در مورد شناسه rows دقيقا قراردادهاي بالا برقرارند.
________________________________________
نکات کاربردي:
* اگر فريمهاي طراحي شده مرزهاي قابل مشاهده دارند توسط کاربر قابل تغيير اندازه (resize) خواهند بود و براي جلوگيري از تغيير اندازه فريمها توسط کاربر بايد از شناسه اي به نام noresize در داخل تگ <frame> استفاده شود. در اين مثال noresize نميتوانيد که فريمها را تغيير اندازه بدهيد.
* اگر ميخواهيد که فريمها scroll نشوند (بالا و پايين بردن صفحه توسط ماوس) بايد در تگ frame مقدار شناسه scrolling را برابر "no" قرار دهيد. (مقادير ممکن "yes" ، "no" و "auto" ميباشند.) در اين مثال scrolling صفحات قابل scroll نيستند.
* اگر ميخواهيد که مرز بين فريمها نمايش داده نشوند بايد در تگ frame مقدار شناسه frameborder را برابر "0" قرار دهيد. (مثال frameborder )
* درصد بسيار کمي از مرورگرها از تگهاي مربوط به frame و frameset پشتيباني نميکنند. براي اين موارد بايد از تگ <noframes> جهت نمايش صفحه جايگزين استفاده شود.
________________________________________
مثالهاي بيشتر
مجموعه فريمهاي مرکب
مثالي در مورد ايجاد مجموعه اي مرکب از فريمهاي عمودي و افقي
مثالي کاربردي در مورد فريمها
در اين مثال کاربردي با کمک سه فريم امکان نمايش صفحات مختلف به آساني فراهم ميشود. فريم افقي و بالائي سرتيتر و نام اصلي سايت را نمايش خواهد داد و فريم سمت راست لينکهاي مهم صفحه را در بر گرفته و امکان navigation را فراهم ميسازد و نهايتا فريم اصلي و سمت چپ صفحات مختلف سايت را به نمايش خواهد گذاشت. توجه داشته باشيد که براي اين مثال حداقل به يک فايل براي معرفي مجموعا فريمها(frameset) و سه صفحه اچتمل براي فريمهاي بالائي، سمت چپ و راست احتياج خواهد بود.
فريمهاي شناور و يا درجا (Inline frame)
مثالي در مورد فريمهاي شناور و درجا (iframe)، فريمي درون يک صفحه اچتمل
مثالي کاربردي در مورد فريمهاي درجا (Inline frame)
مثالي کاربردي در مورد فريمهاي شناور و درجا (iframe) با کمک 7 صفحه اچتمل مختلف
شوخي با فريم هاي شناور
مثالي در مورد نمايش درايو لوکال (مثلا c:\ بازديدکنندگان سايت به آنها
فريمها و پيوندهاي نامگذاري شده
مثالي کامل در مورد فريمها و پيوندهاي نامگذاري شده و نحوه استفاده از آنها در طراحي سايتي ساده متشکل از چهار فايل اچتمل
فريمها و پيوندهاي نامگذاري شده کامل
همان مثال بالا در صفحه کامل مرورگر با شناسه هاي کامل در تگ frame
________________________________________
تگ هاي فريم
Start Tag Purpose کاربرد
<frameset>
Defines a set of frames تعريف مجموعه اي از فريم ها


<frame>
Defines a sub window (a frame) تعريف يک فريم


<noframes>
Defines a noframe section for browsers that do not handle frames تعريف جايگزين براي مرورگرهائي که از فريم ها پشتيباني نميکنند.


<iframe>
Defines an inline sub window (frame) تعريف فريم هاي درجا (inline)
M:A بازدید : 321 پنجشنبه 10 اسفند 1391 نظرات (0)
اين درس شما را با نحوه نمايش انواع فهرستها شامل فهرستهاي مرتب(ordered) ، نامرتب(unordered) و فهرستهاي تعريفي(definition lists) و تگ هاي مربوطه يعني li ، ol ، ul ، dl ، dt و dd آشنا خواهد کرد. مثالها:

فهرستهاي نامرتب
مثالي بسيار ساده در مورد فهرستهاي نامرتب
فهرستهاي مرتب
مثالي در مورد فهرستهاي مرتب و نحوه نمايش متون فارسي
مثالهاي بيشتر
________________________________________

فهرستهاي نامرتب(unordered list)
فهرستهائي هستند از يک يا چند قلم اطلاعات که معمولا با دايرهاي کوچک و سياه رنگ در شروع نمايش داده ميشوند. يک فهرست از نوع نامرتب با تگ <ul> شروع شده و هر رقم اطلاعات با تگ <li> مشخص ميگردد.
HTML code نمايش توسط مرورگر
<ul>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ul>
• Red
• Blue
• Green


<ul dir="rtl" >
<li>قهوه</li>
<li>شير</li>
<li>چاي</li>
</ul>
• قهوه
• شير
• چاي


داخل تگهاي <li> ميتوانيد از پاراگرافها، تگهاي br ، تصاوير و حتي فهرستهاي ديگر استفاده کنيد. به شناسه dir در مثال بالا توجه کنيد، امکان تعيين سمت و جهت نمايش متون در تمامي تگهاي مربوط به فهرستها ممکن ميباشد.
________________________________________

فهرستهاي مرتب(ordered list)
اين نوع فهرست بسيار شبيه فهرستهاي نامرتب بوده و فقط مرورگر به هنگام نمايش اقلام اطلاعاتي از اعداد به جاي دايره هاي کوچک سياه رنگ استفاده ميکند. يک فهرست از نوع مرتب با تگ <ol> شروع شده و همانند فهرستهاي نامرتب هر رقم اطلاعات با تگ <li> مشخص ميگردد.
HTML code نمايش توسط مرورگر
<ol>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ol>
1. Red
2. Blue
3. Green


<ol dir="rtl" >
<li>قهوه</li>
<li>شير</li>
<li>چاي</li>
</ol>
1. قهوه
2. شير
3. چاي


داخل تگهاي <li> ميتوانيد از پاراگرافها، تگهاي br ، تصاوير و حتي فهرستهاي ديگر استفاده کنيد. به شناسه dir در مثال بالا توجه کنيد، امکان تعيين سمت و جهت نمايش متون در تمامي تگهاي مربوط به فهرستها ممکن ميباشد.
________________________________________

فهرستهاي تعريفي(definition list)
فهرست تعريفي فهرستي است از اصطلاح ها و تشريح و توصيف آنها.
فهرستهاي تعريفي با <dl> شروع شده و هر ذوج اصطلاح و تعريف مربوط به آن با تگهاي <dt> و <dd> تعريف ميشوند.
HTML code نمايش توسط مرورگر
<dl>
<dt>HTTP</dt>
<dd>Hypertext Transfer Protocol</dd>
<dt>FTP</dt>
<dd>File Transfer Protocol</dd>
<dt>IP</dt>
<dd>Internet Protocol</dd>
</dl>
HTTP
Hypertext Transfer Protocol
FTP
File Transfer Protocol
IP
Internet Protocol


<dl dir="rtl" >
<dt >مقدمه</dt>
<dd>خلاصه اي از مقدمه</dd>
<dt>فصل 2</dt>
<dd>خلاصه اي از فصل 1</dd>
<dt>فصل 2</dt>
<dd>خلاصه اي از فصل 2</dd>
</dl>
مقدمه
خلاصه اي از مقدمه
فصل 1
خلاصه اي از فصل 1
فصل 2
خلاصه اي از فصل 2



داخل تگهاي تشريح يعني <dd> ميتوانيد از پاراگرافها، تگهاي br ، تصاوير و حتي فهرستهاي ديگر استفاده کنيد. به شناسه dir در مثال بالا توجه کنيد، امکان تعيين سمت و جهت نمايش متون در تمامي تگهاي مربوط به فهرستها ممکن ميباشد.
________________________________________
مثالهاي بيشتر
انواع فهرستهاي مرتب
مثالي در مورد فهرستهاي مرتب به همراه استفاده از شناسه type جهت تعيين نوع نمايش فهرست
انواع فهرستهاي نامرتب
مثالي در مورد فهرستهاي نامرتب به همراه استفاده از شناسه type جهت تعيين نوع نمايش فهرست
فهرستهاي تودرتو
مثالي در مورد فهرستهاي ترکيبي. اعضاي فهرست ميتوانند از فهرستهاي ديگر تشکيل شوند.
فهرستهاي تعريفي
مثالي در مورد فهرستهاي تعريفي به همراه استفاده از شناسه dir
________________________________________
تگهاي فهرست
Start Tag Purpose کاربرد
<ol>
Defines an ordered list تعريف فهرستهاي مرتب


<ul>
Defines an unordered list تعريف فهرستهاي نامرتب


<li>
Defines a list item تعريف يک آيتم و قلم از يک فهرست


<dl>
Defines a definition list تعريف فهرستهاي تعريفي


<dt>
Defines a definition term تعريف اصطلاح در فهرستهاي تعريفي


<dd>
Defines a definition description تعريف معني و شرح اصطلاح در فهرستهاي تعريفي
M:A بازدید : 356 پنجشنبه 10 اسفند 1391 نظرات (0)
در اين درس با تگ img ، شناسه src و alt ، تگهاي Map و Area و چگونگي نمايش تصاوير و همچنين تنظيم محل آنها در سندهاي اچتمل آشنا خواهيد شد.
مثالها:

درج تصوير
نحوه درج تصاوير با کمک تگ img
درج تصويري واقع در فضاي آدرسي ديگر
درج تصويري واقع در دايرکتوريي غير از آدر س صفحه اچتمل و يا تصويري واقع در فضاي آدرسي ديگر سايتها
مثالهاي بيشتر
________________________________________
تگ img و شناسه src يا source
در زبان اچتمل تصاوير را با کمک تگ <img> تعريف ميکنند. تگ <img> از نوع تگهاي خالي است، بدين معنا که فقط داراي يک يا چند شناسه و attribute بوده و داراي تگ انتهائي يا <img/> نيست.
مهمترين شناسه براي درج و تعريف يک تصوير src يا source نام دارد و مقدار اين شناسه آدرس يا URL تصوير ميباشد. تصاويري که مرورگر در يک صفحه وب نمايش ميدهد ميتوانند در همان دايرکتوري صفحه اچتمل، در ديگر دايرکتوريهاي همان سايت و يا در فضاي بيکران وب قرار داشته باشند.
شکل ساده درج يک تصوير:

<img src="url">
مقدار url آدرس اينترنتي تصوير ميباشد و مثلا اگر تصويري که قرار است که در صفحه درج شود در همان دايرکتوري قرار دارد و نامش me.jpg ، کافي است که به جاي url فقط نام تصوير يعني me.jpg را بنويسيد و اگر تصوير در سايتي ديکر قرار دارد url کامل آنرا بنويسيد. مثلا تصوير لوگو سايت google.com داراي url ي برابر http://www.google.com/images/logo.gif است.در اين url نام تصوير logo.gif بوده، در دايرکتوري images قرار داشته و روي وب سايت google.com قرار دارد.
________________________________________
شناسه هاي width و height در تگ img
کاربرد شناسه هاي width و height تعيين عرض و ارتفاع نمايش تصوير است. اگر از اين شناسه ها استفاده نکنيد، مرورگر ابتدا تصوير را لود کرده و سپس طول و عرض آنرا يافته و در نهايت نمايش ميدهد. با نوشتن مقاديري غير از مقادير واقعي طول و عرض تصوير ميتوانيد به تغيير شکل و ابعاد آن بپردازيد و آنرا مثلا کوچکتر، بزرگتر و يا کشيده تر نمايش دهيد. مثال زير نحوه درج تصويري را با قيد ابعاد آن شرح ميدهد:

<img src="http://www.google.com/images/logo.gif" width="276" height="110" >

توصيه ميشود که حتما ابعاد تصوير را با کمک شناسه هاي width و height قيد کنيد، اينکار سبب کمک به مرورگر در تسريع شروع نمايش صفحه خواهد شد.(در واقع با قيد ابعاد تصوير، مرورگر قبل از لود تصوير ميداند که چه مقدار از صفحه نمايش بايد به تصوير بايد اختصاص داده شود و قبل از لوذ شدن تمامي تصاوير مرورگر شروع به نمايش قالب و چارچوب کلي صفحه خواهد کرد.)
________________________________________
شناسه Alt يا "alternate text" يا متن جايگزين
اگر مرورگر به هر دليلي نتواند که يک تصوير را نمايش دهد و يا مرورگر از نوع مرورگرهائي باشد که فقط متن را نمايش ميدهند، متن و text ي که با کمک شناسه alt تعيين شده است نمايش داده خواهد شد. همچنين در اغلب مرورگرها با قرارگرفتن ماوس بروي يک تصوير، متن تعيين شده توسط شناسه alt نمايش داده خواهد شد. با کمک alt اطلاعات اضافي مربوط به تصوير قابل نمايش ميباشد.مثال زير نحوه درج تصويري را با قيد متن جايگزين آن شرح ميدهد:
<img src="images/ganjafzar.gif" alt="Iran Developers!" >


________________________________________
وبلاگها و اضافه کردن تصاوير:
اگر وبلاگي داشته و ميخواهيد که تصويري به آن اضافه کنيد دو حالت مختلف ممکن است که پيش آيد:
• الف) تصوير روي سايتي ديگر قرار داشته و شما هم ميخواهيد از آن تصوير که در سايتي ديگر قرار دارد استفاده کنيد. در اين حالت از آدرس مستقيم تصوير در شناسه src استفاده کنيد، مانند :
<img src="http://www.google.ca/images/hp0.gif" width=258 height=78 >
در اين مثال تصوير روي سايت google.ca قرار داشته و لزومي به ذخيره آن توسط شما نيست.


• ب) تصوير روي هارد کامييوتر شما است و هنوز بروي وب منتقل نشده است. در اين حالت چون اغلب سيستم هاي وبلاگ امکان ذخيره تصاوير را به شما نمي دهند بايد ابتدا تصويرتان را با کمک FTP يا روشهاي ديگر به روي سايتي ديگر منتقل کنيد. شرکتهاي مختلفي فضاي مجاني براي ساخت صفحات وب و ذخيره اطلاعات و تصاوير در اختيار شما قرار ميدهند و در يکي از سؤالهاي اين FAQ فهرست اين شرکتها را ميتوانيد ببينيد. بنابراين ابتدا فضائي در وب تهيه کرده، سپس تصويرتان را Upload کرده (با کمک FTP يا روشهاس ديگر ) و سپس در شناسه src از تگ img آدرس جديد تصوير را قيد کنيد.
________________________________________
چند نکته مهم:
• اگر در يک صفحه اچتمل از 10 تصوير استفاده شده باشد، مرورگر بايد 11 فايل را لود کند.( خود صفحه به علاوه 10 تصوير)
• استفاده از تصاوير، سرعت لود شدن صفحات را پايين مي آورد.با احتياط از تصاوير استفاده کنيد و به اندازه و حجم تصوير توجه داشته باشيد.
• لود تصويري با حجم 50 کيلوبايت براي کسي که از مودمي با سرعت 28kbps استفاده ميکند حداقل 15 ثانيه طول خواهد کشيد.
• براي ديدن مشخصات تصاوير در وب کافي است که روي تصوير Right click کرذه و سپس در بخش properities آدرس،ابعاد و ظرفيت تصوير را ببينيد.
• براي ذخيره تصاوير در وب کافي است که روي تصوير Right click کرذه و سپس در بخش "Save picture as" آنرا ذخيره کنيد.
________________________________________
مثالهاي بيشتر
تصاوير زمينه
مثالي در مورد نحوه تعيين تصاوير زمينه با کمک شناسه background در تگ body
ترازبندي تصاوير
اين مثال نحوه ترازبندي تصاوير در کنار متون را نشان ميدهد.
تصاوير شناور در متن
آزاد گذاشتن تصوير در سمت چپ يا راست
نمايش تصاوير در ابعاد مختلف
مثالي در مورد استفاده از شناسه هاي width و height و نمايش تصاوير در ابعاد مختلف
نمايش متن جايگزين براي تصاوير
مثالي در مورد استفاده از شناسه alt
استفاده از تصاوير هنگام ايجاد پيوند ها
مثالي در مورد نحوه استفاده از تصاوير هنگام ايجاد پيوند ها
ايجاد image map ها
مثالي در مورد ايجاد image map . در اين مثال هر بخش از نواحي تعريف شده قابل کليک بوده و به پيوندي اختصاصي اشاره ميکند.
________________________________________
تگ هاي تصاوير
Start Tag Purpose کاربرد
<img>
Defines an image درج تصوير


<map>
Defines an image map تعريف Image map يا ؟؟؟


<area>
Defines an area inside an image map تعريف ناحيه اي در داخل Image map
M:A بازدید : 228 پنجشنبه 10 اسفند 1391 نظرات (0)
با وجوديکه هنوز بعضي از اچتمل کاران از تگ <font> براي تعيين نام و نوع قلم، رنگ و اندازه متون استفاده ميکنند ولي در استاندارد جديد اچتمل (نسخه 4) و همچنين XHTML از تگ <font> پشتيباني نميشود و استفاده از Style Sheet ها به عنوان جايگزين معرفي شده است.
________________________________________
تگ <font>
در نسخه هاي 3.2 و قبلي تر زبان اچتمل از تگ <font> براي تعيين نام قلم، رنگ و اندازه متون استفاده ميشود. در اين تگ شناسه face نام قلم ، شناسه size انداره قلم و شناسه color معرف رنگ متن خواهد بود. مثالهاي زير کاربرد تگ <font> خدابيامرز را نشان ميدهند:
کد اچتمل نمايش کد روبرو توسط مرورگر
<p>
<font size="2" face="Verdana">
This is a paragraph.
</font>
</p> This is a paragraph.


<p dir="rtl">
<font size="1" face="Times" color="#FF9900">
متني با قلم Times و اندازه 1 و رنگ FF9900
</font>
</p> متني با قلم Times و اندازه 1 و رنگ FF9900


<p dir="rtl">
<font size="2" face="Tahoma" color="red">
اين متني با قلم Tahoma و اندازه 2 و رنگ قرمز
</font>
</p> متني با قلم Tahoma و اندازه 2 و رنگ قرمز


شناسه هاي تگ <font>
Attribute Example کاربرد
size="number" size="2" تعيين اندازه قلم


size="+number" size="+1" افزايش اندازه قلم


size="-number" size="-1" کاهش اندازه قلم


face="face-name" face="Times" تعيين نام قلم


color="color-value" color="#eeff00" تعيين رنگ قلم


color="color-name" color="red" تعيين رنگ قلم




*** بيان مختصر عملکرد تگ <font> در اين دروس فقط جهت اطلاع بوده و استفاده از آنها در طراحي صفحات اچتمل توصيه نميشود.
________________________________________
ديگر از تگ <font> استفاده نکنيد!
تگ <font> از رده خارج محسوب ميشود و کنسرسيوم جهاني تعيين استانداردهاي وب (World Wide Web Consortium, W3C) اين تگ را از مجموعه تگهاي استاندارد اچتمل کنار گذاشته است و اکيدا توصيه ميشود که از Style Sheet ها براي تعريف هر گونه خواص نمايشي و آرايشي (layout & Presentation) المانها در اچتمل استفاده شود.
________________________________________
روش صحيح تعيين نام قلم، اندازه و رنگ متون با کمک Style Sheet ها:
هر چند که مبحث و کلاسهاي درس Style Sheet ها در "مدرسه وب" در دست تهيه بوده و اميدواريم که بزودي ارائه شوند ولي تا قبل از آن استفاده از شناسه اي به نام style در بسياري از المانها کار گشا خواهد بود. مثالهاي ساده زير نحوه تعيين نام قلم، اندازه و رنگ متون را با کمک شناسه style به نمايش خواهند گذاشت:
تعيين نام قلم
مثالي در مورد تعيين نام قلم در يک استيل درجا (inline)
تعيين اندازه قلم
مثالي در مورد تعيين اندازه قلم در يک استيل درجا (inline)
تعيين رنگ قلم
مثالي در مورد تعيين رنگ قلم در يک استيل درجا (inline)
تعيين نام، اندازه و رنگ قلم
مثالي در مورد تعيين نام، اندازه و رنگ قلم در يک استيل درجا (inline)
مثال کاربردي در مورد Style Sheet ها
مثالي در مورد نحوه تعريف استيلهاي مختلف نمايش متون در جداول

________________________________________
تگ <span>
تگ <span> سبب تعريف محدوده و گستره اي مشخص ميشود. تمامي المان هائي که درون تگهاي <span> و <span/> قرار خواهند گرفت خواص آنرا به ارث خواهند برد، خواصي از قبيل استيل (Style) و يا سمت و جهت نمايش متون(dir).
بر خلاف تگ هاي <p> و <div> مرورگرها هيچ سطر جديدي به اول يا آخر المان <span> اضافه نمي کنند.
مثال:

کد اچتمل نمايش کد روبرو توسط مرورگر
<p>Some text <span style="color:#0000AF;">another text</span> again text...</p> Some text another text again text...





id, class, title, style, dir, lang شناسه هاي استاندارد المان span




مثالهائي از نحوه استفاده از المان span و Style sheet ها:
روش قديمي روش صحيح
<font color="#FF00FF">Hello!</font> <span style="color:#FF00FF">Hello!</span>


<font color="rgb(255,0,255)">Hello!</font> <span style="color:rgb(255,0,255)">Hello!</span>


<font style="color:Fuchsia">Hello!</font> <span style="color:Fuchsia">Hello!</span>


<font color="#FF00FF" size="3">Hello!</font> <span style="color:#FF00FF;font-size:100%">Hello!</span>




________________________________________
تگ <div>
تگ <div> سبب تعريف محدوده و گستره اي مشخص ميشود. تمامي المان هائي که درون تگهاي <div> و <div/> قرار خواهند گرفت خواص آنرا به ارث خواهند برد، خواصي از قبيل استيل (Style) و يا سمت و جهت نمايش متون(dir).
بر خلاف تگ <span> مرورگرها يک سطر جديد به اول و آخر المان <div> اضافه مي کنند.
مثال:

کد اچتمل نمايش کد روبرو توسط مرورگر
<p>Some text <div style="color:#0000AF;">another text</div> again text...</p> Some text
another text
again text...






id, class, title, style, dir, lang شناسه هاي استاندارد المان div



تعيين جهت نمايش متون
مثالي در مورد استفاده از تگ div و اعمال "جهت نمايش متون" به بخشي از صفحه اچتمل

________________________________________

Start Tag Purpose کاربرد
<div>
Defines a division/section in a document تعريف بخش و ناحيه اي از صفحه اچتمل


<span>
Defines a section in a document تعريف بخش و ناحيه اي از صفحه اچتمل


مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها
تبلیغات
صفحه قبل 1 2 3 4 5 صفحه بعد

تعداد صفحات : 5

درباره ما
Profile Pic
سلام نیاز به همکار:از دوستانی که در برنامه نویسی یا وبلاگ نویسی سررشته دارند دعوت به همکاری در سایت آموزشها می شود لطفا با ما تماس بکیرید و شماره بگذارید.(در قسمت تماس با ما)
اطلاعات کاربری
  • فراموشی رمز عبور؟
    • لینک دوستان
  • اقامت در تهران
  • ساسان اس ام اس
  • آپلود
  • انوار وب
  • اسلام وب
  • فوتبالی
  • کسب در آمد آنی از اینترنت
  • خرید شارژ ایرانسل
  • تبادل لینک خودکار
  • سرگرمی و تفریحی
  • سیستم کلیکی آذر سنتر
  • قیمت خودرو بروز
  • حقوق
  • عکس تیوب
  • مطالب آموزشی و فناوری
  • مرکز کسب درآمد و دانلود رایگان
  • پی سی سلام
  • آموزش روخواني و روانخواني قرآن كريم
  • $گشت و گذار در وب$
  • خرید شارژ ایرانسل
  • دانلودکده
  • شارژ ایرانسل و همراه اول
  • آخرین مطالب ارسال شده
    • آرشیو
  • مرداد 1395
  • مرداد 1392
  • تير 1392
  • خرداد 1392
  • ارديبهشت 1392
  • فروردين 1392
  • اسفند 1391
    • نظرسنجی
    ازکدام بخش بیشتر خوشتان آمد
    خلاصه آمار

    آمار سایت
  • کل مطالب : 610
  • کل نظرات : 63
  • افراد آنلاین : 90
  • تعداد اعضا : 91
  • آی پی امروز : 124
  • آی پی دیروز : 102
  • بازدید امروز : 156
  • باردید دیروز : 188
  • گوگل امروز : 0
  • گوگل دیروز : 0
  • بازدید هفته : 1,075
  • بازدید ماه : 1,075
  • بازدید سال : 76,933
  • بازدید کلی : 747,889
    • کدهای اختصاصی

    رنک الکسا

    وضعیت آب و هوا

    پیچک

    ديكشنري آنلاين
    نرخ ارز
    فال انبیاء



    فال انبیاء



    صفحه اصلی تالار گفتمان ثبت نام ورود آرشیو تماس با ما
    نیرو گرفته : رزبلاگ