آموزش کامل برنامه نویسی
اسلاید 1: آموزش کامل برنامه نویسیشرکت مودال
اسلاید 2: منظور از وب چیستمنظور از وب چيست؟ وب شبکه ای است متشکل از تمامی کامپيوترهای دنيا، شبکه ای از شبکه ها. اينترنت، وب، WWW ، web يا World Wide Web همگی يک چيزند. تمامی کامپيوترهای وب ميتوانند با هم ارتباط داشته باشند. کامپيوترهای موجود در وب با کمک استاندارد ارتباطی يا پروتوکل HTTP با هم ارتباط برقرار ميکنند .
اسلاید 3: نحوه ی کار کرد وب چگونه استنحوه کارکرد وب چگونه است؟اطلاعات وب داخل فايلهائی به نام Web Pages و يا صفحات وب قرار دارند. اين فايلها يا صفحات روی Web Server يا کامپيوترهای سرويس دهنده وب ذخيره شده اند. برای ديدن صفحات وب از نرم افزاری به نام مرورگر و يا Web Browser استفاده ميشود. دو مرورگر Internet Explorer و Netscape Navigator جزو معروفترين مرورگرها حساب ميشوند. مرورگر Internet Explorer متعلق به شرکت مايکروسافت و مرورگر Netscape Navigator متعلق به شرکت نت اسکيپ ميباشد
اسلاید 4: مروره گر ها چگونه به خواندن صفحات وب می پردازنديک مرورگر با کمک يک Request درخواستی برای خواندن يک صفحه از وب سرور ميکند. اين Request يا درخواست بر اساس استاندارد ارتباطی يا پروتوکل HTTP بوده و شامل آدرس صفحه مورد نظر ميباشد. آدرس يک صفحه وب چيزی شبيه http://www.internet.com/faq.html است. بخش //:http نوع پروتوکل و يا استاندارد ارتباطی را تعيين ميکند، www.internet.com نام دومين يا Domain است و faq.html نام صفحه ای است که بايد خوانده شود.
اسلاید 5: مروره گر ها چگونه صفحات وب را نمایش می دهندچگونگی نمايش يک صفحه وب بصورت مستتر در آن وجود دارد. مرورگرها از روی دستورالعملهای داخل صفحات وب و با کمک تگ ها به نمايش صفحات ميپردازند. وظيفه اصلی تگ های اچتمل ( HTML tags ) بيان چگونگی نمايش اطلاعات ميباشد. يک تگ اچتمل چيزی شبيه <p> اين تگ پاراگراف است! </p> است.
اسلاید 6: عناصر اچتملعناصر اچتمل (HTML Elements) مثال بخش مقدمه را در نظر بگيريد:<html><head><title>Title of page</title></head><body>This is my first html page. <b>This text is bold</b></body></html>*** نمونه ای از يک عنصر اچتمل:<b>This text is bold</b>عنصر اچتمل بالا با تگ <b> شروع شده و با تگ <b/> پايان می يابد. محتوای اين عنصر عبارت This text is bold است. لازم به ذکر است که کاربرد تگ <b> نمايش توپر يا bold متون است. *** مثال دوم يک عنصر اچتمل (معلوم الحال) :<body>This is my first homepage. <b>This text is bold</b></body>عنصر اچتمل بالا با تگ <body> شروع شده و با تگ <body/> پايان می يابد. همانطور که ميبينيد گاهی يک عنصر حاوی يک يا چند تگ ديگر ميباشد.وظيفه تگ <body> تعيين بدنه اصلی يا body يک متن اچتمل است.لازم به يادآوری است که تنها اطلاعات بخش <body> يک فايل اچتمل در صفحه مرورگر نمايش داده خواهد شد.
اسلاید 7: شناسه های يک تگ (Tag Attributes) تگ ها ميتوانند حاوی اطلاعات اضافی ديگر باشند، به اين اطلاعات شناسه يا Attribute ميگويند و وظيفه آنها بيان ديگر اطلاعات يک عنصر يا Element ميباشد. مثلا در مورد تگ <body> شناسه ای به نام bgcolor وجود دارد که رنگ زمينه متن (background) را تعيين ميکند برای نمونه اگر ميخواهيد که رنگ زمينه صفحه اچتملتان سياه باشد کافی است که به شکل زير عمل کنيد : <body bgcolor=black> در مثال زير تگ <body> دارای چهار شناسه مختلف با نامهای width، height ، align و border و مقادير center، 60، 100 و 0 ميباشد. <table border=0 width=100 height=60 align=center > ...... </table> شناسه ها به صورت کلی مقدار=نام يا name=value نوشته ميشوند و هميشه به تگ شروع يک عنصر يا Element اضافه ميشوند و نهايتا اگر در يک عنصر يا Element شناسه ها قيد نشوند از مقادير قراردادی يا default آنها استفاده خواهد شد مثلا در تگ body اگر شناسه bgcolor نوشته نشود از رنگ سفيد برای زمينه صفحه استفاده خواهد شد. مقدار يک شناسه را ميتوانيد داخل نويسه های و يا بنويسيد و اختيار دست شما است فقط در مواردی که مقدار يک شناسه شامل نويسه هم ميشود بايد از نويسه استفاده شود.
اسلاید 8: سر تيترها (Headings) سر تيترها با کمک تگ های <h1> تا <h6> تعيين ميشوند. <h1> معرف بزرگترين سر تيتر و <h6> معرف کوچکترين سر تيتر است. مرورگر به هنگام نمايش يک سر تيتر بصورت اتوماتيک يک سطر خالی قبل و بعد از هر سر تيتر اضافه خواهد کرد. <h1>This is a heading</h1><h2>This is a heading</h2><h3>This is a heading</h3><h4>This is a heading</h4><h5>This is a heading</h5><h6>This is a heading</h6>
اسلاید 9: پاراگرافها (Paragraphs) پاراگرافها با کمک تگ <p> معرفی ميشوند.مرورگر به هنگام نمايش يک پاراگراف بصورت اتوماتيک يک سطر خالی قبل و بعد از آن اضافه خواهد کرد. <p>This is a paragraph</p> <p>This is another paragraph</p>مثال
اسلاید 10: سطر جديد (Line Breaks) برای رفتن سر سطر جديد از تگ <br> استفاده ميشود.در اينحالت يک پاراگراف جديد ايجاد نميشود. تگ <br> از نوع تگ های خالی بوده و دارای تگ انتهائی (مثلا <br/> ) نميباشد. <p>This <br> is a para<br>graph with line breaks</p>
اسلاید 11: کامنت ها در اچتمل (Comments برای نوشتن شرح و توضيحات در مورد کدهای اچتمل بايد از تگ خاصی استفاده کنيد. برای اينکار بايد متن و شرحتان را درون علائم <-- و --!> قرار دهيد. مرور تگ های comment را در نظر نگرفته و محتوی آنها را نمايش نخواهد داد و فقط شرح و توضيحات برای برنامه نويس و ديگر افرادی که احتمالا در آينده با کد اچتمل کار خواهند کرد مفيد خواهد بود. (به محل نويسه ! توجه کنيد! فقط يکی و آنهم در ابتدا) <!-- This is a comment -->
اسلاید 12: چند نکته کاربردی: توجه داشته باشيد که بدليل وجود مرورگرهای متفاوت (اکسپلورر، نت اسکيپ، ..) و به دليل تفاوت دقت نمايش صفحه نمايش کامپيوترها، صفحات اچتمل با اندکی تفاوت در حالتهای مختلف نمايش داده ميشوند و هميشه سعی کنيد که صفحاتتان را نه تنها با اکسپلورر که معروفترين مرورگر است بلکه با نت اسکيپ و حتی مرورگرهای کامپيوترهای مکينتاش چک کرده و همچنين در دقت های نمايش 800x600 و 1024X768 آن را امتحان کنيد. از نظر فاصله و سطر بندی، متنی که در صفحه اديتورتان تايپ ميکنيد با چيزی که مرورگر نمايش خواهد داد متفاوت خواهد بود.هميشه به ياد داشته باشيد که فاصله های اضافی (space) و خطهای خالی متن در صفحه اديتور توسط مرورگر در نظر گرفته نشده و نمايش داده نخواهد شد. برای نمايش بيش از يک فاصله خالی بايد از نويسها يا ترکيب کاراکتری خاصی (None Breaking Space) استفاده کنيد. فاصله های اضافی بين کلمات در يک متن اچتمل توسط مرورگرها ديده نخواهد شد و در نمايش هميشه تبديل به يک فاصله (space) خواهد شد. در ضمن يک خط خالی در متن اديتور بصورت يک فاصله يا space نمايش داده خواهد شد. برای ايجاد يک سطر جديد هيچگاه از يک تگ <p> خالی استفاده نکنيد و به جای آن از تگ <br> استفاده کنيد.. مرورگرها به هنگام نمايش بعضی عناصر بصورت اتوماتيک يک سطر خالی قبل و بعد از آن عنصر نمايش خواهند داد. برای نمونه اين گروه از عنصرها ميتوان از پاراگراف (<p>) و سرتيترها (<h..>) نام برد. تگ <hr> يا Horizontal Roler سبب نمايش يک خط افقی خواهد شد و در واقع بخش های مختلف مطالب اين صفحات با کمک اين تگ از هم جدا شده اند.
اسلاید 13: تگهای اصلی در جدول زير عناصر معرفی شده در اين فصل به همراه لينکهای مربوطه جهت مطالعه بيشتر آورده شده است. توجه داشته باشيد که برای هر عنصر فهرستی از شناسه ها يا Attributes موجود است و همچنين به شناسه های کنارگذاشته شده (Deprecated) در نسخه های آينده اچتمل توجه داشته باشيد و سعی کنيد که از آنها استفاده نکنيد. : Start TagPurposeکاربرد<html>Defines a html documentنشان شروع متن اچتمل<body>Defines the documents bodyتعيين بدنه و قسمت اصلی صفحه اچتمل<h1>-<h6>Defines heading 1 to heading 6تعريف سر تيترهای h1 تا h6 <p>Defines a paragraphتعريف پاراگراف<br>Inserts a single line breakرفتن سر خط جديد<hr>Defines a horizontal ruleنمايش خط افقی<!-->Defines a comment in the HTML source codeنوشتن شرح و comment
اسلاید 14: دو نکته بسيار مهم در مورد فارسی نويسی: · روش کدگزاری UTF-8 اکيدا توصيه ميشود که برای تايپ و تمايش متون فارسی از استاندارد يونيکد و روش کدگزاری UTF-8 اسنفاده شود و اين روشی است که مطالب اين سايت و اديتور آنلاينش از آن استفاده ميکند.نکته مهم در نمايش صحيح متون فارسی تعيين نوع کدگزاری يا encoing صفحات فارسی است که برای اينکار بايد از متاتگ خاصی به نام http-equiv در بخش head صفحات اچتمل به شکل زير استفاده شود: <meta http-equiv=Content-Type content=text/html; charset=utf-8> در اينصورت مرورگر يا Browser قبل از نمايش صفحه از روی متاتگ فوق نوع کدگزاری (Encoding) را تشخيص داده و ديگر مثلا نيازی به تعيين دستی (دراکسپلورور 5 : View/Encoing/Unicode / UTF-8 ) نوع Encoing توسط بازديدکننده سايت نخواهد بود. · شناسه يا attribute ی به نام dir جهت نمايش متون لاتين به صورت پيش فرض و default از چپ به راست (ltr) ميباشد.در مورد متون و جملات فارسی بايد با کمک روشی جهت نمايش پيش فرض را به راست به چپ تغيير دهيد. شناسه يا attribute ی به نام dir يا همان direction اين کار را برای شما انجام ميدهد. اين شناسه دارای دو مقدار ممکن ميباشد : dir=ltr , Left-to-right text. - چپ به راست dir=rtl , Right-to-left text. - راست به چپ مثلا برای نمايش جمله فارسی سلام بر دنيای وب! با کمک عناصر p يا div کافی است که به يکی از شکلهای زير عمل شود: <p dir=rtl> سلام بر دنيای وب </p> <div dir=rtl> سلام بر دنيای وب </div> در بسياری از عناصر و تگ های اچتمل امکان استفاده از شناسه dir ميسر بوده و به عنوان نمونه ميتوان از عناصر زير نام برد: <p> , <div> , <html> , <body> , <table> , <tr> , <td> , <h1 ... h6> , <input> , <pre> , <select> , <span> , ...
اسلاید 15: نحوه ديدن سورس کدهای اچتمل (HTML Source) اگر ميخواهيد که سورس کدهای اچتمل صفحات وب را ببينيد کافی است که در منوی View مرورگرتان حالت Source يا Page Source را انتخاب کرده و مرورگر کد اچتمل را درون اديتوری باز کرده و قابل ذخيره توسط شما برای استفاده های بعدی ميباشد. اگر صفحه مورد نظر از مجموعه فريمها (Frameset) استفاده کرده باشد برای ديدن سورس کد اصلی فريمها کافی است که ابتدا با کمک روش بالا به مشاهده سورس کدهای اچتمل پرداخته (لازم به توضيح است که در اين حالت فقط تعاريف کلی فريمها قرار دارند.) و سپس برای ديدن کد اچتمل اختصاصی هر صفحه بايد پس از Right Click روی هر صفحه View Source کرده و کد اچتمل هر فريم را جداگانه ببينيد. اگر طراح سايت با کمک Java Script مانع ديدن سورس توسط شما ميشود، ابتدا در منوی Tools/Internet Options.../Security/Custom Level مرورگرهای اکسپلورر امکانات جاواسکريپت مرورگر را غير فعال کرده (disable) و سپس مراحل بالا را تکرار کنيد!!!
اسلاید 16: چند نکته کاربردی: در استفاده از Underline دقت كنيد چون در اكثر مرورگرها، پيوندها با اين خطوط نشان داده مي شوند و اين مساله ميتواند كاربران را دچار اشتباه كند . به كارگيري تگهاي EM و STRONG كه جايگزين تگهاي I و B هستند ، اين اطمينان را مي دهد كه صفحه شما توسط همه مرورگرها بصورت صحيح نمايش داده خواهد شد . به ترتيب بسته شدن تگهاي پاياني در مثال زير دقت كنيد، همان گونه كه مشاهده مي كنيد عنصر STRONG بعد از عنصر U شروع شده است ، به همين خاطر تگ خاتمه دهنده آن قبل از تگ خاتمه دهنده U قرار مي گيرد. <U>version <STRONG>2.0</STRONG></U>
اسلاید 17: تگهای فرمت دهی متونStart TagPurposeکاربرد<b>Defines bold textنمايش توپر<big>Defines big textنمايش در اندازه بزرگ<em>Defines emphasized text نمايش بصورت تاکيد شده<i>Defines italic textنمايش ايتاليک يا کج<small>Defines small textنمايش در اندازه کوچک<strong>Defines strong textنمايش قوی ؟!<sub>Defines subscripted textنمايش پايين تر از خط افقی<sup>Defines superscripted textنمايش بالاتر از خط افقی<ins>Defines inserted textنمايش به صورت خط زير<del>Defines deleted textنمايش به صورت خط خورده<s>Deprecated. Use <del> insteadاز رده خارج<strike>Deprecated. Use <del> insteadاز رده خارج<u>Deprecated. Use styles insteadاز رده خارجStart TagPurposeکاربرد<code>Defines computer code textنمايش کدهای برنامه نويسی<kbd>Defines keyboard text نمايش متن بصورت صفحه کليدی<samp>Defines sample computer codeنمايش کدهای نمونه برنامه نويسی<tt>Defines teletype textنمايش تله تايپ<var>Defines a variableنمايش متغييرها<pre>Defines preformatted textنمايش متون از قبل فرمت شده
اسلاید 18: Character Entities در اچتمل بعضی از نويسه ها دارای معنی خاصی بوده و برای نمايش آنها در صفحاتتان بايد از character entities ها استفاده کنيد. يک character entities از سه قسمت تشکيل ميشود: 1- نويسه ampersand (&) 2- نام entity يا نويسه # و سپس شماره عددی entity 3 - و نهايتا نويسه semicolon (;) برای مثال برای نمايش نويسه > دو روش وجود دارد، بايد از < يا از < استفاده کنيد. در اين مثال lt نام entity و 60 شماره عددی آن ميباشد. مزيت استفاده از نام entity در مقابل استفاده از شماره عددی آن سهولت يادآوری آن از روی نامش ميباشد و عيب آن اين است که تمامی مرورگرها نام گذاريهای موجود برای Entity ها را قبول ندارند ولی در عوض همگی شماره های عددی entity ها را بخوبی ميشناسند. توجه داشته باشيد که entity ها به کوچک و بزرگي حروف حساس هستند و در واقع Case Sensitive ميباشند. پر کاربردترين character entity در اچتمل، نويسه فاصله يا Space يا Blank ميباشد و نام رسمی آن non-breaking space ميباشد. همانطور که ميدانيد مرورگرها فاصله های اضافی را در نظر نگرفته (truncate spaces) و مثلا از 10 نويسه فاصله، 9 تای آنرا ناديده ميگيرند و برای نمايش فاصله های اضافی بايد از استفاده کنيد.
اسلاید 19: فهرست پرکاربردترين Character Entities ها Result (نمايش)Description (شرح)Entity Name (نام)Entity Number (شماره عددی) non-breaking space  <less than<<>greater than>>&ersand&&quotation mark""apostrophe 'چند Character Entitie با کاربردهای کمترResultDescriptionEntity NameEntity Number¢cent¢¢£pound££¥yen¥¥§section§§©copyright©©®registered trademark®®×multiplication××÷division÷÷
اسلاید 20: تگ Anchor و شناسه href برای ايجاد پيوند به صفحات ديگر از تگ <a> استفاده ميشود. پيوندها ميتوانند به بخش ديگری از همان صفحه، صفحات ديگر وب، تصاوير، فايلهای صوتی يا حتی فيلم ها و ... اشاره کنند. فرم کلی يک پيوند به قرار زير است: <a href=url>Some Text</a> در مثال بالا تگ <a> برای ايجاد پيوندی به صفحه ای ديگر که آدرس اينترنتی آن url ميباشد بکار رفته است. برای تعيين مقصد و يا آدرس صفحه جديد از شناسه ای به نام href که همان hyerlink reference ميباشد، استفاده ميشود و مقدار اين شناسه در واقع همان آدرس اينترنتی صفحه مقصد است. بخش قابل رويت پيوند و در واقع متــنــی (و يا تصويری ) که توسط مرورگر نمايش داده خواهد شد و بازديدکننده روی آن کليک خواهد کرد ميان تگهای <a> و </a> قرار داده ميشود و هر چند که در مثال بالا اين بخش متن Some Text است ولی ميتواند حتی يک تصوير باشد. برای نمونه کد اچتمل زير پيوندی به سايت google.com ايجاد خواهد کرد: <a href=http://www.google.com/>Visit Google Site</a>
اسلاید 21: شناسه target در پيوندها: با کمک شناسه target امکان تعيين مقصد پيوند جديد فراهم ميشود. در مثال بالا پس از کليک روی پيوند، مرورگر سايت google.com را باز کرده و جايگزين سایت فعلی خواهد شد. اگر ميخواهيد که مرورگر پيوند را در صفحه ای جديد باز کند بايد از شناسه target و مقدار _blank برای آن استفاده کنيد . مثال زير سبب باز شدن سايت google.com در پنجره جديدی خواهد شد: <a href=http://www.google.com/ target=_blank>Visit Google Site</a>
اسلاید 22: شناسه Name : با کمک شناسه name ميتوانيد پيوندها را نام گذاری کنيد.پيوندهای نامگذاری شده امکان حرکت ميان قسمتهای مختلف يک صفحه يا page را فراهم ميکنند. در اينصورت مثلا برای رفتن به آخر يک متن ديگر نيازی به Scrool down کردن تمامی صفحه نيست و کافی است که بازديدکننده روی پيوندی که به آخر صفحه اشاره ميکند کليک کند. استفاده از پيوندهای نامگذاری شده شامل دو مرحله است: 1- ايجاد يک پيوند نامگذاری شده (اين قسمت به عنوان لنگر کار خواهد کرد.) : فرم کلی يک پيوند نام گذاری شده به قرار زير است: <a name=label>Text to be displayed</a> وظيفه شناسه name تعيين نام برای پيوند است و مقدارآن همان نام پيوند ميباشد. نام پيوند هم هر نام لاتينی ميتواند باشد. در فرم کلی بالا، نام پيوند label و متنی که بعنوان پيوند نمايش داده ميشود عبارت Text to be displayed خواهد بود. مثال زير به ايجاد يک پيوند نامگذاری شده با نام top ميپردازد: <a name=top>Here is top of my page!</a> 2- ايجاد يک پيوند به پيوند نامگذاری شده ديگر: برای دادن لينک به پيوندی نام گذاری شده، کافی است که پيوندی معمولی ايجاد کرده و در قسمت href آن ابتدا url مقصد و سپس نويسه # و در نهايت نام پيوند نامگذاری شده را درج کنيد. مثال زير ايجاد پيوندی است که به لينک نامگذاری شده ای به نام top اشاره ميکند: <a href=default.aspx#top> Goto Top! </a> در اثر کليک روی پيوند بالا مرورگر مستقيما به ابتدای بخش top صفحه index.htm خواهد رفت. لگر مقصد پيوند در همان صفحه قرار دارد نيازی به قيد url نيست و فقط نويسه # و سپس نام پيوند کافی است: <a href=#top> Goto Top! </a>
اسلاید 23: چند نکته کاربردی در مورد پيوندها: * يکی از کاربردهای رايج پيوندهای نام گذاری شده در صفحات و متونی ميباشد که فهرست و يا ليستی از اقلام نمايش داده شده است، مانند بخش سرفصل مطالب، فهرست FAQ و يا ... در همين صفحه در دو مورد از پيوندهای نامگذاری شده استفاده شده است، آيا ميتوانيد آنها را بيابيد؟! * اگر مرورگر نتواند يک پيوند نامگذاری شده را بيابد ابتدای صفحه مقصد را نمايش خواهد داد.
اسلاید 24: فريمها (Frames) با کمک فريمها قادر به نمايش همزمان بيش از يک صفحه وب در پنجره مرورگر خواهيد شد. هر صفحه يا دريچه، فريم (frame) ناميده شده و فريمها کاملا مستقل از هم ميباشند. محتوای هر فريم هم ميتواند هر صفحه يا وب سايتی باشد. هر چند که فريمها طراحی سايتهای کوچک و متوسط را بسيار آسان ميکنند ولی استفاده از آنها در کارهای حرفه ای توصيه نميشود.(به جز در موارد خاص) معايب استفاده از فريمها: موتورهای جستجو با صفحات طراحی شده با فريمها مشکل دارند. چاپ و print صفحاتی که از فريمها استفاده ميکنند مشکل است. صفحاتی که از فريمها استفاده ميکنند معمولا مبتدی بودن طراح سايت را نشان ميدهد!!
اسلاید 25: تگ فريم ست (Frameset) تگ <frameset> به تعريف فريمها و تقسيم بندی پنجره مرورگر ميپردازد. هر تگ <frameset> مجموعه ای از رديفها يا ستونها را تعريف ميکند. داخل هر فريم ميتواند frameset ديگری قرار دهيد. با کمک شناسه های rows و cols ابعاد و نسبت هر فريم تعيين ميگردد. تگ <frameset> درون تگهای <html> و <html/> قرار ميگيرد.(نيازی به قيد تگ body هنگام معرفی يک frameset نيست.)
اسلاید 26: تگ فريم (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 و فايل کد اچتمل بالا.
اسلاید 27: شناسه های 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 دقيقا قراردادهای بالا برقرارند.
اسلاید 28: تگ های فريمStart TagPurposeکاربرد<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)
اسلاید 29: فهرستهای نامرتب(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 در مثال بالا توجه کنيد، امکان تعيين سمت و جهت نمايش متون در تمامی تگهای مربوط به فهرستها ممکن ميباشد
اسلاید 30: فهرستهای مرتب(ordered list) اين نوع فهرست بسيار شبيه فهرستهای نامرتب بوده و فقط مرورگر به هنگام نمايش اقلام اطلاعاتی از اعداد به جای دايره های کوچک سياه رنگ استفاده ميکند. يک فهرست از نوع مرتب با تگ <ol> شروع شده و همانند فهرستهای نامرتب هر رقم اطلاعات با تگ <li> مشخص ميگردد. HTML codeنمايش توسط مرورگر<ol><li>Red</li><li>Blue</li><li>Green</li></ol>Red Blue Green <ol dir=rtl ><li>قهوه</li><li>شير</li><li>چای</li></ol>قهوه شير چای داخل تگهای <li> ميتوانيد از پاراگرافها، تگهای br ، تصاوير و حتي فهرستهای ديگر استفاده کنيد. به شناسه dir در مثال بالا توجه کنيد، امکان تعيين سمت و جهت نمايش متون در تمامی تگهای مربوط به فهرستها ممکن ميباشد.
اسلاید 31: فهرستهای تعريفی(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 در مثال بالا توجه کنيد، امکان تعيين سمت و جهت نمايش متون در تمامی تگهای مربوط به فهرستها ممکن ميباشد.
اسلاید 32: تگهای فهرست تگهای فهرست Start TagPurposeکاربرد<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تعريف معنی و شرح اصطلاح در فهرستهای تعريفی
اسلاید 33: فرمها (Forms) تمامی عناصر و تگهائی که تاکنون ديده ايد فقط به نمايش اطلاعات پرداخته اند و هيچکدام به گرفتن و اخذ اطلاعات از کاربر نپرداخته اند. فرمها که با تگ <form> معرفی ميشوند، طراح سايت را قادر به جمع آوری و اخذ اطلاعات از بازديدکننده سايت خواهند کرد. عنصر فرم و گروهی از عناصر و تگهای درون آن به دريافت و ارسال اطلاعات به سمت وب سرور کمک خواهند کرد و لازم به ذکر است که تمامی تگهای مربوط به فرمها بايد درون تگهای <form> و <form/> قرار ميگيرند. درون تگ فرم گروه زيادی از عناصر و تگهای مختلف قابل استفاده هستند از قبيل عناصر ورود متن يک سطری(text fields)، عناصر ورود متنهای چند سطری (Textarea)، منوهای drop-down و radio buttons و ...
اسلاید 34: تگ Input به عنوان پر مصرف ترين تگ مربوط به ورود اطلاعات بايد از تگ <input> نام برد. در اين تگ شناسه ای به نام type به تعيين نوع اطلاعات ورودی اختصاص دارد. مقادير ممکن برای اين شناسه به قرار زيرند: text , checkbox , radio , password , hidden , submit , reset , button , file , image در ادامه به شرح بعضی از type های کاربردی خواهيم پرداخت:
اسلاید 35: وروديهای متن (Text Fields) اگر ميخواهيد که بازديدکننده اطلاعاتی از قبيل متن، اعداد و ... را وارد کند از شناسه ای با مقدار text استفاده ميشود. کد اچتملنمايش توسط مرورگر<form>First name: <input type=text name=firstname><br>Last name: <input type=text name=lastname></form>First name: Last name: <form dir=rtl >نـــــــــــــــام:<input type=text name=firstname><br>نام خانوادگی:<input type=text name=lastname></form>نـــــــــــــــام: نام خانوادگی: توجه داشته باشيد که تگ <form> چيزی را به نمايش نخواهد گذاشت بلکه تگهای درون آن توسط مرورگر نمايش داده خواهند شد. در مثال فارسی بالا به شناسه dir و مقدار rtl آن توجه داشته باشيد.لازم به يادآوری است که اغلب مرورگرها در حالت پيش فرض برای وروديهای متن اندازه 20 کاراکتر را در نظر ميگيرند و اگر ميخواهيد که اندازه پيش فرض وروديهای متن را تغيير دهيد بايد از شناسه ای به نام size استفاده کنيد.
اسلاید 36: وروديهای Radio Buttons اگر ميخواهيد که بازديدکننده گزينه ای را از بين چند گزينه محدود انتخاب کند، از مقدار radio برای شناسه type استفاده کنيد: کد اچتملنمايش توسط مرورگر<form><input type=radio name=sex value=male> Male<br><input type=radio name=sex value=female> Female</form>Male Female <form dir=rtl><input type=radio name=sex value=male> مرد<br><input type=radio name=sex value=female> زن</form>مرد زن همانطور که مشاهده ميشود فقط امکان يکی از گزينه ها برای کاربر ميسر است.
اسلاید 37: وروديهای Checkboxes اگر ميخواهيد که بازديدکننده يک يا چند گزينه را از بين چند گزينه محدود انتخاب کند، از مقدار checkbox برای شناسه type استفاده کنيد: کد اچتملنمايش توسط مرورگر<form><input type=checkbox name=bike>I have a bike<br><input type=checkbox name=car>I have a car</form>I have a bike I have a car <form dir=rtl><input type=checkbox name=bike>دوچرخه دارم<br><input type=checkbox name=car>ماشين دارم</form>دوچرخه دارم ماشين دارم
اسلاید 38: شناسه Action و دکمه Submit در فرمها ( Forms Action Attribute & Submit Button) در فرمها برای ارسال اطلاعات کسب شده از دکمه ای به نام ارسال يا Submit Button استفاده ميشود و در اثر کليک کاربر بروی اين دکمه Submit ، اطلاعات درون فرم به فايلی ديگر ارسال خواهند شد. برای تعيين مقصد ارسال اطلاعات بايد درون تگ form از شناسه ای به نام action استفاده کنيد. مقدار شناسه action آدرس يا url فايلی است که به دريافت و سپس پردازش اطلاعات دريافتی خواهد پرداخت. معمولا فايلهای بخش action برنامه ها و اسکريپت هائی نوشته شده با ربانهای cgi مانند ASP، Perl ، PHP و ... بوده و وظيفه آنها دريافت اطلاعات فرمها و سپس پردازش آنها ميباشد. تعيين مقدار submit برای شناسه type سبب نمايش دکمه Submit يا ارسال خواهد گرديد. کد اچتملنمايش توسط مرورگر<form name=input action=form_action.cgi>Username: <input type=text name=user><input type=submit value=Submit></form>Username: <form name=input action=form_action.cgi dir=rtl>نام کاربر<input type=text name=user><input type=submit value=Submit></form>نام کاربر در مثال بالا در باکس ورودی متن، کلمه ای را وارد کرده و دکمه ارسال را کليک کنيد. مرورگر به محض کليک دکمه ارسال، اطلاعات درون فرم را که در اين مثال متنی ساده است به سمت فايلی که در شناسه action تعيين شده است ارسال کرده و در اين مثال برنامه ای به زبان Perl با نام form_action.cgi در سمت سرور به ذخيره و سپس نمايش متنی خبری خواهد پرداخت.
اسلاید 39: ورود متن فارسی در عناصری مانند Text field يا Text area: همانطور که در مثالهای بالا مشاهده کردید در مورد المانهای Text field و Textarea با کمک شناسه dir میتوان سمت و جهت ورود اطلاعات را از راست به چپ تعیین کنید. ولی اگر کاربری ویندوز فارسی نداشته باشد، از کامپیوترهای مکینتاش استفاده کند و یا سیستمش را فارسی نکرده باشد قادر به ورود اطلاعات به زبان فارسی نخواهد بود و نویسه های تایپ شده لاتین خواهند بود!، در اینگونه موارد چه باید کرد؟ معمولا برنامه نویسان وب برای فراهم ساختن امکان ورود متن فارسی از یکی از دو روش زیر استفاده میکنند: · استفاده از اپلتهای جاوا با این مزیت که سورس و کد اصلی فارسی سازی قابل استفاده توسط دیگران نیست!! · استفاده از زبان جاوا اسکریپت و با این عیب که سورس و کد اصلی JavaScript قابل مشاهده و استفاده توسط دیگران است!
اسلاید 40: تگهای فرم Start TagPurposeکاربرد<form>Defines a form for user inputتعريف فرم ورود اطلاعات<input>Defines an input fieldتعريف ورودی از نوع Input <textarea>Defines a text-area (a multi-line text input control)تعريف ورودی متن چند سطری يا text-area<label>Defines a label to a controlتعريف برچسب يا label <fieldset>Defines a fieldsetتعريف fieldset<legend>Defines a caption for a fieldsetتعريف عنوان برای fieldset ها<select>Defines a selectable list (a drop-down box)تعريف فهرستهای انتخابی يا drop-down box<optgroup>Defines an option groupتعريف option group ها<option>Defines an option in the drop-down boxتعريف گزينه ای از drop-down box ها<button>Defines a push buttonتعريف دکمه فشاری، متفاوت با button تگ input
اسلاید 41: تگ img و شناسه src يا source در زبان اچتمل تصاوير را با کمک تگ <img> تعريف ميکنند. تگ <img> از نوع تگهای خالی است، بدين معنا که فقط دارای يک يا چند شناسه و attribute بوده و دارای تگ انتهائی يا <img/> نيست. مهمترين شناسه برای درج و تعريف يک تصوير src يا source نام دارد و مقدار اين شناسه آدرس يا URL تصوير ميباشد. تصاويری که مرورگر در يک صفحه وب نمايش ميدهد ميتوانند در همان دايرکتوری صفحه اچتمل، در ديگر دايرکتوريهای همان سايت و يا در فضای بيکران وب قرار داشته باشند.
اسلاید 42: شکل ساده درج يک تصوير:<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 قرار دارد.
اسلاید 43: شناسه های width و height در تگ img کاربرد شناسه های width و height تعيين عرض و ارتفاع نمايش تصوير است. اگر از اين شناسه ها استفاده نکنيد، مرورگر ابتدا تصوير را لود کرده و سپس طول و عرض آنرا يافته و در نهايت نمايش ميدهد. با نوشتن مقاديری غير از مقادير واقعی طول و عرض تصوير ميتوانيد به تغيير شکل و ابعاد آن بپردازيد و آنرا مثلا کوچکتر، بزرگتر و يا کشيده تر نمايش دهيد. مثال زير نحوه درج تصويری را با قيد ابعاد آن شرح ميدهد: <img src=http://www.google.com/images/logo.gif width=276 height=110 > توصيه ميشود که حتما ابعاد تصوير را با کمک شناسه های width و height قيد کنيد، اينکار سبب کمک به مرورگر در تسريع شروع نمايش صفحه خواهد شد.(در واقع با قيد ابعاد تصوير، مرورگر قبل از لود تصوير ميداند که چه مقدار از صفحه نمايش بايد به تصوير بايد اختصاص داده شود و قبل از لوذ شدن
اسلاید 44: شناسه Alt يا alternate text يا متن جايگزيناگر مرورگر به هر دليلی نتواند که يک تصوير را نمايش دهد و يا مرورگر از نوع مرورگرهائی باشد که فقط متن را نمايش ميدهند، متن و text ی که با کمک شناسه alt تعيين شده است نمايش داده خواهد شد. همچنين در اغلب مرورگرها با قرارگرفتن ماوس بروی يک تصوير، متن تعيين شده توسط شناسه alt نمايش داده خواهد شد. با کمک alt اطلاعات اضافی مربوط به تصوير قابل نمايش ميباشد.مثال زير نحوه درج تصويری را با قيد متن جايگزين آن شرح ميدهد: <img src=images/AkseAlaki_88_31.jpg alt=Fake Pic>
اسلاید 45: وبلاگها و اضافه کردن تصاویر: اگر وبلاگی داشته و میخواهید که تصویری به آن اضافه کنید دو حالت مختلف ممکن است که پیش آید: · الف) تصویر روی سایتی دیگر قرار داشته و شما هم میخواهید از آن تصویر که در سایتی دیگر قرار دارد استفاده کنید. در این حالت از آدرس مستقیم تصویر در شناسه src استفاده کنید، مانند : <img src=http://www.google.ca/images/hp0.gif width=258 height=78 > در این مثال تصویر روی سایت google.ca قرار داشته و لزومی به ذخیره آن توسط شما نیست. · ب) تصویر روی هارد کامییوتر شما است و هنوز بروی وب منتقل نشده است. در این حالت چون اغلب سیستم های وبلاگ امکان ذخیره تصاویر را به شما نمی دهند باید ابتدا تصویرتان را با کمک FTP یا روشهای دیگر به روی سایتی دیگر منتقل کنید. شرکتهای مختلفی فضای مجانی برای ساخت صفحات وب و ذخیره اطلاعات و تصاویر در اختیار شما قرار میدهند و در یکی از سؤالهای این FAQ فهرست این شرکتها را میتوانید ببینید. بنابراین ابتدا فضائی در وب تهیه کرده، سپس تصویرتان را Upload کرده (با کمک FTP یا روشهاس دیگر ) و سپس در شناسه src از تگ img آدرس جدید تصویر را قید کنید.
اسلاید 46: چند نکته مهم: اگر در يک صفحه اچتمل از 10 تصوير استفاده شده باشد، مرورگر بايد 11 فايل را لود کند.( خود صفحه به علاوه 10 تصوير) استفاده از تصاوير، سرعت لود شدن صفحات را پايين می آورد.با احتياط از تصاوير استفاده کنيد و به اندازه و حجم تصوير توجه داشته باشيد. لود تصويری با حجم 50 کيلوبايت برای کسی که از مودمی با سرعت 28kbps استفاده ميکند حداقل 15 ثانيه طول خواهد کشيد. برای ديدن مشخصات تصاوير در وب کافی است که روی تصوير Right click کرذه و سپس در بخش properities آدرس،ابعاد و ظرفيت تصوير را ببينيد. برای ذخيره تصاوير در وب کافی است که روی تصوير Right click کرذه و سپس در بخش Save picture as آنرا ذخيره کنيد.
اسلاید 47: تگ های تصاويرStart TagPurposeکاربرد<img>Defines an imageدرج تصوير<map>Defines an image mapتعريف Image map يا ؟؟؟<area>Defines an area inside an image mapتعريف ناحيه ای در داخل Image map
اسلاید 48: رنگ و تصوير زمينه در صفحات اچتمل:تگ <body> دارای دو شناسه مهم برای تعيين رنگ و تصوير پس زمينه ميباشد. پس زمينه صفحات اچتمل رنگ و يا يک تصوير ميتواند باشد. شناسه bgcolor برای رنگ پس زمينه (background color) شناسه bgcolor رنگ پس زمينه را تعيين ميکند. مقدار رنگ پس زمينه ميتواند نام رنگ (مثل red يا blue ) ، مقدار آن بر اساس استاندارد RGB و يا حتی مقدار هگزادسيمال (Hexadecimal) باشد. <body bgcolor=#000000><body bgcolor=rgb(0,0,0)><body bgcolor=black>در تمامی مثالهای بالا با کمک شناسه bgcolor رنگ زمينه صفحه سياه تعيين ميشود.
اسلاید 49: شناسه Background برای تصوير پس زمينه: برای تعيين تصويری که به عنوان پس زمينه صفحه نمايش داده ميشود از شناسه background استفاده ميشود.مقدار اين شناسه URL يا آدر س تصوير (image) ميباشد.اگر ابعاد تصوير کوچکتر از ابعاد صفحه مرورگر باشد، تصوير زمينه تکثير خواهد شد تا حدی که تمام صفحه نمايش از تصوير زمينه پوشانده شود. <body background=bg.gif><body background=http://www.aviny.com/images/b_logo.gif>در مثال اول از آدرس دهی نسبی (relative) برای تعيين URL يا آدرس تصوير استفاده شده و در واقع در اين مثال فايل اچتمل و تصوير bg.gif بايد در يک دايرکتوری قرار گيرند. در مقابل مثال دوم از آدرس دهی مطلق (absolute) برای تعيين آدرس تصوير استفاده شده است و همانطور که ميدانيد آدرس تصوير در هر نقطه از فضای وب ميتواند باشد. نکات مهم: اگر از تصاوير پس زمينه در صفحات اچتمل استفاده ميکنيد به نکات زير توجه کنيد : هرتصويری با فرمت gif و يا jpg قابل استفاده به عنوان تصوير زمينه ميباشد. از تصاوير بزرگتر از ده کيلوبايت ظرفيت به هيچ وجه استفادا نکنيد، در غير اين صورت سرعت load صفحه بشدت پايين خواهد آمد. از تصاوير زمينه هماهنگ با ديگرتصاوير صفحه استفاده کنيد. از تصاوير زمينه هماهنگ با متون صفحه استفاده کنيد. در رزولوشنهای مختلف به ديدن و آزمايش تصاوير پس زمينه بپردازيد. پر مصرف ترين رنگهای زمينه وب سايتها، رنگهای سفيد، سياه و خاکستری ميباشند. اغلب سايتهای وب از تصاوير پس زمينه استفاده نمی کنند! مثلا همين سايت!!!
اسلاید 50: نکته مهم در سازگاری با نسخه های جديد اچتمل و XHTMLشناسه های bgcolor و background در تگ <body> در نسخه 4 اچتمل و XHTML پشتيبانی نميشوند و در واقع از رده خارج محسوب ميشوند. در عوض کنسرسيوم W3C استفاده از Style Sheet ها را توصيه ميکند و در واقع در نسخه 4 اچتمل و استاندارد جديد XHTML تمامی اطلاعات مربوط به نمايش يا presentation و layout بايد در style sheet ها قرار گيرند.
اسلاید 51: تگ <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 و رنگ قرمز
اسلاید 52: شناسه های تگ <font>AttributeExampleکاربردsize=numbersize=2تعیین اندازه قلمsize=+numbersize=+1افزایش اندازه قلمsize=-numbersize=-1کاهش اندازه قلمface=face-nameface=Timesتعیین نام قلمcolor=color-valuecolor=#eeff00تعیین رنگ قلمcolor=color-namecolor=redتعیین رنگ قلم*** بیان مختصر عملکرد تگ <font> در این دروس فقط جهت اطلاع بوده و استفاده از آنها در طراحی صفحات اچتمل توصیه نمیشود.
اسلاید 53: دیگر از تگ <font> استفاده نکنید! تگ <font> از رده خارج محسوب میشود و کنسرسیوم جهانی تعیین استانداردهای وب (World Wide Web Consortium, W3C) این تگ را از مجموعه تگهای استاندارد اچتمل کنار گذاشته است و اکیدا توصیه میشود که از Style Sheet ها برای تعریف هر گونه خواص نمایشی و آرایشی (layout & Presentation) المانها در اچتمل استفاده شود.
اسلاید 54: تگ <span> تگ <span> سبب تعریف محدوده و گستره ای مشخص میشود. تمامی المان هائی که درون تگهای <span> و <span/> قرار خواهند گرفت خواص آنرا به ارث خواهند برد، خواصی از قبیل استیل (Style) و یا سمت و جهت نمایش متون(dir). بر خلاف تگ های <p> و <div> مرورگرها هیچ سطر جدیدی به اول یا آخر المان <span> اضافه نمی کنند.
اسلاید 55: مثال:کد اچتمل نمايش کد روبرو توسط مرورگر<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>
اسلاید 56: تگ <div> تگ <div> سبب تعریف محدوده و گستره ای مشخص میشود. تمامی المان هائی که درون تگهای <div> و <div/> قرار خواهند گرفت خواص آنرا به ارث خواهند برد، خواصی از قبیل استیل (Style) و یا سمت و جهت نمایش متون(dir). بر خلاف تگ <span> مرورگرها یک سطر جدید به اول و آخر المان <div> اضافه می کنند. مثال: کد اچتمل نمايش کد روبرو توسط مرورگر<p>Some text <div style=color:#0000AF;>another text</div> again text...</p> Some text another textagain text... id, class, title, style, dir, lang شناسه های استاندارد المان div تعیین جهت نمایش متون مثالی در مورد استفاده از تگ div و اعمال جهت نمایش متون به بخشی از صفحه اچتمل Start TagPurposeکاربرد<div>Defines a division/section in a documentتعریف بخش و ناحیه ای از صفحه اچتمل <span>Defines a section in a documentتعریف بخش و ناحیه ای از صفحه اچتمل
اسلاید 57: چگونگی استفاده از استایل شیتها: مرورگرها از روی استیلهای تعریف شده توسط استایل شیتها به فرمت دهی و نمایش اطلاعات درون صفحه اچتمل میپردازند. تعریف و استفاده از استایل ها در صفحات اچتمل به سه روش مختلف ممکن میباشد: 1)استایل شیتهای خارجی (external style sheet) : در این روش تمامی استیلها و تعاریف نمایشی درون فایلی جداگانه قرار گرفته و بسیار مناسب حالتهائی است که قرار است که استایلی به بیش از یک صفحه اچتمل اعمال شود. مزیت این روش سهولت در تغییر ظاهر صفحات یک وب سایت میباشد و برای یک تغییر کلی در سایت کافی است که فایل استایل شیت کل سایت که معمولا یک فایل واحد است تغییر داده شود. (باید توجه داشت که در این حالت تمامی صفحات سایت باید به یک فایل استایل شیت واحد لینک شده باشند.) استایل شیتهای خارجی توسط تگ <link> که درون بخش head صفحات اچتمل قرار میگیرد، معرفی میشوند. در مثال زیر با کمک شناسه href از تگ link نام و در حالت کلی url فایل در برگیرنده استایلهای تعریف شده تعیین میگردد: <head><link rel=stylesheet type=text/css href=mystyle.css></head>2)استایل شیتهای داخلی (Internal Style Sheet) : کاربرد این روش در حالتهائی است که صفحه اچتمل نیازمند تعریف استایلی منحصر به فرد و مجزا بوده و استایل طراحی شده فقط بدرد آن صفحه خواهد خورد. در این حالت باید کدهای حاوی تعریف استایل درون تگ های <style> و <style/> قرار گرفته و معمولا نتیجه درون بخش head صفحه اچتمل گذاشته میشود.مثال: <head><style type=text/css>body {background-color: red}p {margin-left: 20px}</style></head>3)استایل شیتهای درجا (Inline Styles) : کاربرد این روش در مواردی است که باید برای یک المان (یا گروهی) خاص استایلی اعمال شود. در این حالت باید از شناسه ای به نام style که تقریبا در تمامی تگها قابل اعمال است استفاده شود. مثال: <p style=color: red; margin-left: 20px>This is a paragraph</p>
اسلاید 58: تگ های استایل Start TagPurposeکاربرد<style>Defines a style in a documentتعریف استیلها درون یک سند<link>Defines the relationship between two linked documents تعیین و تعریف فایل استایل شیت خارجی<font>Deprecated. Use styles insteadکنار گذاشته شده.از استایل شیتها استفاده شود.<basefont>Deprecated. Use styles instead کنار گذاشته شده.از استایل شیتها استفاده شود.<center>Deprecated. Use styles insteadکنار گذاشته شده.از استایل شیتها استفاده شود.
اسلاید 59: تغییرات در نسخه جدید اچتمل (4/0) : هدف اولیه از طراحی زبان اچتمل ایجاد زبانی برای تعریف اطلاعات محض بدون در برداشتن جزئیات مربوط به فرمت و نمایش بود ولی با ایجاد نسخه 3/2 زبان اچتمل و اضافه شدن تگهای فرمت دهی مانند <font> و یا شناسه هائی مانند color و Align محتوا و نمایش در صفحات اچتمل ادغام گردیده و همین امر سبب بروز مشکلات عدیده ای برای طراحان و برنامه نویسان وب گردید. برای رفع این مشکل در نسخه 4/0 اچتمل توصیه بر جداسازی کامل این دو گروه از اطلاعات بوده و در نسخه های آینده اچتمل این جداسازی اجباری خواهد گردید و توصیه مدرسه وب نیز استفاده از استایل شیتها برای هر نوع تعریف فرمت و ترازبندی میباشد. برای مثال در کد اچتمل زیر که بر اساس نسخه 3/2 اچتمل میباشد، ساختار و محتوا (تگی از نوع پاراگراف با محتوای This is a paragraph) با اطلاعات نمایش یعنی رنگ و ترازبندی (رنک قرمز متن و ترازبندی در وسط صفحه) همزمان و در کنار هم آورده شده اند و این ادغام امکان تغییر و توسعه کد را بسیار محدود خواهد کرد: <p align=center><font color=red>This is a paragraph</font></p>
اسلاید 60: کد معادل مثال فوق با استفاده از استایل شیتها شرح داده شده است.(هر چند که این مثال از تمامی امکانات استایل شیتها و ایجاد فایلی کاملا مستقل برای تعریف استایل استفاده نکرده است
اسلاید 61: مدیریت سایتامیدوارم اموزش های فوق به شما کمکی کرده باشدبا تشکر سینا
نقد و بررسی ها
هیچ نظری برای این پاورپوینت نوشته نشده است.