توجه ! این یک نسخه آرشیو شده می باشد و در این حالت شما عکسی را مشاهده نمی کنید برای مشاهده کامل متن و عکسها بر روی لینک مقابل کلیک کنید : آموزش مقدماتي و پيشترفته Html
دراين قسمت شما زبان HTML که پايه و اساس طراحي و برنامه نويسی وب ميباشد را مياموزيد. اين مجموعه به دو بخش تقسيم شده که در بخش اول مقدمات وب و اصول برنامه نويسي HTML و در بخش بعدی مطالب پيشرفته واطلاعات جانبی را ياد خواهيد گرفت. اگر شما هيچ آشنايي با HTML و طراحي وب نداريد پس بخش اول متعلق به شماست ، آنرا از دست ندهيد.
http://pnu-club.com/imported/mising.jpg
مروری بر وب
WWW
امروزه شما به هر طرفي که نگاه مي کنيد آدرس هاي اينترنتي را مشاهده مي کنيد که اين آدرس ها شما را به صفحاتي در اينترنت هدايت مي کنند تا اطلاعاتي را در اختيار شما قرار دهند.بيشتر اين آدرس ها با www آغاز شده که مخفف سه کلمه World Wide Web مي باشد. وب قسمتي از دنياي اينترنت است که شامل متن، عکس و تصوير يا حتي صدا مي باشد که بعضي از اين صفحات به هم مرتبط بوده و شما را به صفحه ديگر حرکت مي دهند.
همانطور که ميدانيد براي دسترسي به اين صفحات نياز به چند چيز داريد:
ابتدا شما بايد مشترک يکي از شرکتهاي سرويس دهنده اينترنت شويد که به اين شرکتها ISP مي گويند.ISP مخفف Internet Service Providers است. سپس شما براي مشاهده صفحات نياز به يک برنامه به اسم مرورگر وب Web browser داريد مانند: Internet explorer, Netscape Navigator, Opera, Mozilla تا کدهاي متني اين صفحات را ترجمه کرده و به صورت يک سري اطلاعات قابل فهم براي ما نمايش دهند.
داخل اين مرورگرها کادري(Address bar) است که شما مي توانيد آدرس هاي اينترنتي را وارد کرده و پس از فشار دادن دکمه Enter برروي کيبورد منتظر نمايش يک وب سايت باشيد. اگر دقت کرده باشيد پس از اين عمل کلمه http درجلوي آدرس وارد شده اضافه مي گردد که مخفف HyperText Transport Protocol ميباشد، اين کلمه به مرورگرميفهماند، اين آدرس از چه پيوند و تکنولوژي مي خواهد براي نمايش صفحه استفاده کند، چون پروتکلهاي مختلفي هست مانند: FTP که مخفف File Transfer Protocol .
نام فني آدرسهاي اينترنتي URL مي باشد که اين اصطلاح مخفف سه کلمه Universal Resource Locator است.
HTML چيست؟
زمانيکه شما داخل صفحات يک وب سايت مي گرديد اجزاي گوناگوني را مي بينيد که تمام آنها در يک چيز مشترک هستند و آن زبان يا کدي است که آنها را توليد مي کند که اين زبان HyperText Markup Language يا همان HTML مي باشد.حالا اجازه دهيد تا کلمه به کلمه برايتان توضيح بدهم، البته انتظار يک معني دقيق و سليس را نداشته باشيد ولي درحدي که براي من قابل فهم بود براي شما خواهم گفت.
: Hyper متضاد نوشته هاي خطي( Linear ) است ، اگر شما با زبانهاي برنامه نويسي کامپيوتر آشنايي داشته باشيد مانند ويژوال بيسيک ميبينيد که بايد کدها را خط به خط بنويسيد و تا يک خط اجرا نشود بعدي خوانده نمي شود يعني آنها را بايد به ترتيب بنويسيد تا برنامه اجرا شود ولي HTML اينطوري نيست و الگوي خطي ندارد شما هر کدي را مي توانيد هر جا که بخواهيد بنويسيد.
Text : به همان متني مي گويند که مي نويسيد تا در مرورگر نشان داده شود.
Markup :عملي است که مرورگر برايتان انجام ميدهد يعني يک متن ساده مي نويسيد ولي جور ديگري نمايش داده مي شود.
Language: بالاخره اين هم يک نوع زبان و بايد يک چيزي پيدا کرد تا به حرف L بخوره ديگه (-:
عناصر تشکيل دهندهHTML
HTML زبان وب ميباشد که داراي عناصر( elements ) گوناگوني است که بر روي هم تشکيل يک صفحه از سايت را ميدهند. اين عناصر عبارتند از:
( texts & lists ) متنها و ليست ها : نوشته هاي داخل يک صفحه را در برميگيرد.
( images ) عکسها : عکس هاي داخل يک صفحه که زيبايي خاصي به وب سايتها مي بخشند.
( ( tables جدولها : جدولها بهترين عنصر براي سازمان دهي و مرتب کردن اطلاعات ما هستند که نقش اساسي در طراحي يک سابت دارند.
( ( forms فرمها : عناصري که بيننده سايت به کمک آنها مي تواند اطلاعاتي را وارد کرده تا ذخيره شده يا فرستاده شود.
( ( hyperlinks نقطه پيوند : البته اين معني اصلي لغت نمي باشد و اين عناصر، نقطه پيوند و ارتباط بين دو صفحه از يک سايت يا دو وب سايت متفاوت مي باشد. مانند :
www.yahoo.com (http://www.yahoo.com/)
( frames ) چارچوبها : فريمها يا چارچوبها تنها عناصري هستند که با استفاده از آنها ما مي توانيم چند صفحه اينترنتي را در يک صفحه جاي دهيم. مانند (http://pnu-club.com/examples/frameex.htm)
( multimedia ) چند رسانه اي : شايد بشه آنرا صوت و تصوير هم گفت ، اگرچه از ابتدا صوت و تصوير با HTML نبوده اما در حال حاضر بيشتر مرورگر هاي وب از اين عنصر پشتيباني مي کنند و شما ميتوانيد در وب سايتتان فيلم وموزيک پخش کنيد.
( javascript ) جاوا اسکريپت : يک نوع زبان نوشتاري يا بهتر بگويم يک نوع کد است که ارتباط نزديکي با HTML دارد و البته آنها را بايد داخل کدهاي html بکار برد تا بتوانيد يک وب سايت حرفه اي با جذابيت بالا طراحي کنيد.
( JavaApplets ) جاوا اپلت : اپلتها برنامه هايي هستند که توسط زبان جاوا نوشته مي شوند و مي توان آنها را در يک صفحه جاسازي کرد براي کارآيي بالاي وب سايت مانند عمليات پيچيده رياضيات يا ساختن بازيها. زبان برنامه نويسي جاوا خود يک زبان مجزا و داراي محبوبيت خاصي دردنيا مي باشد که با جاوا اسکريپت فرق دارد.
( style sheets ) استايل شيت : اين عناصر قابليت انتقال اطلاعات به عنوان يک الگوي مشترک در بين صفحات را دارد. به طور مثال شما يک الگو براي رنگ متن مي سازيد و سپس آنرا بين صفحاتي که مي خواهيد به اشتراک مي گذاريد.
( DHTML ) : مخفف دو کلمهDynamic Html مي باشد که وظيفه آن روح بخشيدن به صفحات و بالا بردن جذابيت وب سايت مي باشد، شما مي توانيد با هماهنگي کدهاي javascript وDhtml يک وب سايت پويا و زنده طراحي کنيد.
مقدمه ای برای طراحی سايت
تمامي اين عناصر(( elements که در بخش قبل ذکر شد مي توان همگي يا تک تک آنها را در ميان کدهاي html بکار برد. لازم بذکر است که کليه کدها و عناصر مربوط به زبان html توسط يک کنسرسيوم و انجمني به نام W3C تأييد و به رسميت شناخته مي شود. انجمن W3C که مخفف World Wide Web Consortium مي باشد، به غير از Html بر کدهاي Style sheet, xml, xhtml هم نظارت دارد. اين انجمن پس از بررسي کدهاي جديد آنها را در سايت رسمي خود www.w3.org (http://www.w3.org/) اعلام مي نمايد. در حال حاضر آخرين نسخه html، نسخه html 4.01 ميباشد و بعد از آن نسخه هاي Xhtml به وب معرفي شده است.
هدف از ساخت وب سايت
قبل از هر کاري شما بايد هدف مشخصي داشته باشيد تا مصمم تر آن را دنبال کنيد، پس براي ساختن يک وب سايت هم هدف از ساخت آنرا مشخص کنيد به طور مثال موضوع آن چيست يا چه طرحي مي خواهيد داشته باشه با چه تعداد صفحه. بد نيست که نوع مخاطبين و بيننده ها را هم مشخص کنيد که چه کساني قرار است از سايت شما استفاده کنند. شما مي توانيد در ابتدا از يک سايت شخصي شروع کنيد، فکر کنم با پيشرفت تکنولوژي کامپيوتر و اينترنت در آينده نزديک هر کسي مانند شناسنامه بايد يک سايت براي معرفي خود داشته باشه. هميشه سعي کنيد تا مطالب را متناسب با مضمون سايت انتخاب کنيد و در هر قسمت يک هدف را دنبال کنيد که بيننده گيج و فراري نشود. اگر سايت شما شخصي است و در آن خاطرات ، عکسهاي خود يا دوستانتان را گذاشته ايد پس ديگرنبايد تبليغ محصولات توليدی را اضافه کنيد يا بالعکس.
کجا و چگونه سايت را راه اندازي کنيد
ابتدا بايد يک اسم مناسب براي سايت انتخاب کنيد که به اين اسم domain مي گويند، اسم يک وب سايت از سه قسمت تشکيل مي شود: www که مخفف World Wide Web ميباشد، اسم منتخب شما يا همان Domain و در آخر پسوندهاي مشخص مانند: .com, .net, .org, .info
پس از انتخاب اسم که بايد يک هماهنگي با مطالب سايت داشته باشد، نوبت به ثبت آن ميرسد که شما مجبورهستيد با يک شرکت خدمات اينترنت قرار داد ببنديد، براي ثبت اسم و اجاره فضا تا اطلاعات شما را در اينترنت به معرض نمايش بگذارند. بعد از اينکه تنظيمات اوليه انجام شد، شما مي توانيد با استفاده از سرويسهايي مانند FTP که مخفف File Transfer Protocol ميباشد اطلاعات سايت را حذف ، اضافه يا تغيير دهيد که در مورد اين سرويس در بخش ديگري توضيح خواهم داد.
البته سابتهايي هستند که شما ميتوانيد به طور رايگان سايت خود را راه اندازي کنيد اما معايبي هم دارند که يکي از آنها پخش تبليغات در صفحات شما ميباشد و ديگر اينکه امکانات محدود آنها است ولي براي شروع کار و آشنايي با نصب و راه اندازي يک وب سايت بسيار مناسب ميباشند. يکي از اين سايتها www.geocities.com (http://www.geocities.com/) است که اگر ايميل در سايت ياهو داريد، فضاي رايگان در اختيارتان قرار ميدهد.
اهميت طراحي وب سايت
يک وب سايت موفق در مرحله طراحي جان مي گيرد چون چند چيز مهم در اين قسمت مشخص ميشود مانند، قالب بندي، رنگ، محتوا ومديريت اطلاعات سايت. اگر ما درست کردن وب سايت را به ساختن يک خانه تشبيه کنيم، ميبينيد که انسان منطقي خانه را بدون نقشه و طرح نمي سازد، پس بياييد به اين قسمت اهميت بيشتري بدهيم تا در پايان کار احساس رضايت بکنيم. در ساخت يک خانه نکات مهم ديگري هم هست، ظاهر و نماي آن، مواد ومصالح که قرار است بکار برده شود، در ضمن به راحتي کساني که ميخواهند از آن استفاده کنند هم بايد فکر کرد. پس شما هم اين نکات را مد نظر داشته باشيد که ظاهر صفحات چه شکلي داشته باشد از چه رنگهايي استفاده کنيد و چه مطالبي را بکار بريد تا مخاطبين را مجذوب کرده وهمچنين بتوانند به کليه قسمتهاي سايت دسترسي داشته باشند در هربخشي که هستند. زمان بيشتري را صرف اين قسمت کنيد تا نيازي به تغييرات اساسي در آينده نداشته باشيد.
براي يادگيري HTML به چه چيزهايي نياز داريد
براي ديدن صفحاتي که طراحي مي کنيد نياز به يک مرورگر وب web browser داريد اگر شما اين صفحه را مي بينيد پس يکي از اين مرورگرها را داريد. اما براي نوشتن کدهاي html در حال حاضر به برنامه ساده notepad که درکليه سيستمهاي عامل ويندوز وجود دارد نياز داريد، برنامه هاي پيشرفته ديگري هم هست که محيط گرافيکي دارند مانند: Microsoft frontpage , Macromedia Dreamweaver ولي براي شروع بهتر است که از همان Notepad استفاده کنيد. پس مهمترين چيزي که نياز داريد کمي وقت و علاقه هست.
تاريخچه Html
HTML توسط Tim Berners-Lee در خلال دهه 90 ميلادي همراه با گسترش وب، شکوفا شد. اين زبان توسط مرورگر Mosaic معروفيت خاصي پيدا کرد. در آن زمان HTML در چند مدل منتشر مي شد که آن بستگي داشت به سازنده فايل و انجمنهايي که در زمينه وب فعاليت داشتند.
در نوامبر 1995 نسخه HTML 2.0 گسترش يافت و بلافاصله در همان سال HTML 3.0 منتشر شد، ولي استقبالي از آن نشد. در سال 1996 انجمن W3C شروع به فعاليت بر روي نسخه اين زبان کرد که حاصل کار آنها در 14 ژانويه 1997 انتشار HTML 3.02 بود. اين نسخه توانست رضايت اکثريت را جلب کند چون هماهنگي بيشتري با مرورگرهاي مختلف در سيستمهاي عامل متفاوت داشت. در تمام نسخه هاي اين زبان ، سعي بر اين شده بود تا نظر کساني که در زمينه وب سرمايه گذاري کرده بودند جلب شود و برنامه هاي توليد شده براي وب بتوانند مدت طولاني تري قابل استفاده باشند. به همين منظور HTML براي اهداف گسترده تري ، در وب توسعه يافت تا در کليه سيستمهاي اطلاع رساني و الکترونيکي کوچک و بزرگ با بکار بردن گرافيک و رنگها، قابليت بهره برداري بيشتري داشته باشد.
در 18 دسامبر 1997 نسخه HTML 4.0 در وب منتشر شد و در همين بين شرکتهاي توليد کننده مرورگر وب يکسري مشخصات منحصر بخود را به اين نسخه اضافه کردند که قابل اجرا در مرورگرهاي ديگر نبود. بعضي از اين تغييرات در W3C مورد تاييد قرار گرفت اما بعضي ديگر نه. با تغييرات HTML مرورگرها مجبور به تغيير شدند تا با تحولات جديد سازگار شوند.
در تاريخ 24 آوريل 1998 در اين نسخه تجديد نظر شد و حاصل آن پيدايش HTML 4.01 بود که با کمي تغيير و رفع يکسري مشکلات، در W3C برسميت شناخته شد و اين انجمن استفاده از آنرا به توسعه دهندگان و طراحان وب ، توصيه کرد.
بطور کل مجموعه HTML 4 با قابليت استفاده از embeded objects, frames, scripting, style sheets و با کارآيي بالاتر جدولها و فرمها به وب معرفي شد، همچنين در اين نسخه توجه زيادي به افراد با توانايي کم شده بود تا اين افراد هم بتوانند از محيط وب استفاده کنند. اما مهمترين قدمي که در اين نسخه برداشته شد، پشتيباني HTML از زبانهايي بود که از راست به چپ نوشته ميشدند مانند زبان فارسي، که در اين نسخه با پذيرفتن استاندارد ISO 10646 به هدف بزرگ بين المللي شدن اين زبان نزديک شدند تا همه مردم دنيا در هر کجا و با هر زباني بتوانند اسناد HTML را منتقل کنند.
HTML 4.01 تفاوت کمي با نسخه اصلي خود يعني 4.0 دارد اما در عوض هماهنگي بيشتري با نسل جديد زبان وب يعني XHTML و نسل بعدي يعني XML دارد. در اصل XHTML اساس و مقدمه XML است که براي هماهنگي و سازگاري HTML با XML منتشر شده است.
HTML 4 زبان بسيار قوي است براي طراحان و سازندگان محصولات وب اما در آن توجهي به دستگاههاي اطلاع رساني و الکترونيکي کوچک با قدرت و حافظه کمتر نشده است. به همين منظورW3C در 26 ژانويه 2000 اقدام به معرفي XHTML 1.0 کرد و در 19 دسامبر همان سال آنرا به رسميت شناخت و تاکيد به استفاده از اين نسخه کرد تا با بکارگيري ويژگيهايي که دارد دامنه استفاده از زبان محبوب HTML را گسترش دهد و مقدمات معرفي XML را فراهم کند.
شروع از ابتدا
خسته نباشيد دوستان، در صفحات قبل تا حدودي با مقدمات راه اندازي يک وب سايت آشنا شديد و آموختيد تا هدفتان را با محتواي سايت هماهنگ کنيد، همچنين به اهميت طراحي هم پي برديد. اما حالا کاري که شما بايد انجام دهيد، کمي استراحت کنيد و يک نوشيدني براي خود مهيا کنيد سپس نفس عميقي بکشيد و آماده باشيد تا اولين گام را براي معرفي خودتان به عنوان يک طراح و برنامه نويس حرفه اي وب برداريد. ما ورود شما را به يکي از ساده ترين و جذاب ترين رشته هاي آموزشي وب و کامپيوتر خوش آمد مي گوييم . پس از اينجا جاي ديگر نرويد که بهترين مکان را براي آموزش برنامه نويسي تحت وب و طراحي سايت پيدا کرده ايد. البته اين موضوع را شوخي کرديم، اين ديگه بستگي به شما دارد تا مطالب اين سايت را تا چه حد قابل بدانيد.
تگهاي HTML
اولين چيزي که براي برنامه نويسي html بايد بدانيد، اينست که تگ html چيست و چه کاري انجام ميدهد. تگهاي html دو نوع هستند، تگهاي آغازين و تگهاي پايان دهنده. بطور کل تگها با دو علامت کوچکتر و بزرگتر، يعني < > مشخص ميشوند و بين اين دو علامت کد html نوشته ميشود، مانند:
<b>
اين يک تگ آغازين است و کد داخل آن به مرورگر ما ميفهماند که متن بعد از آن بايد بصورت حروف ضخيم و bold به بيننده صفحه نشان داده شود و بلافاصله متن مورد نظر را مينويسيم و در آخر آن، تگ پايان دهنده که مرورگر بفهمد تا کجا اين متن بايد بصورت ضخيم نمايش داده شود،
<b> This is a bold text. </b>
همانطور که مشاهده ميکنيد، تگهاي پايان دهنده داراي يک علامت Slash ( / ) ميباشد.
اما کار اين تگها چيست؟ مرورگرهاي وب مانند اينترنت اکسپلورر، به علامتهاي < > حساس هستند و به محض اينکه به آنها مي رسند کد داخل آنها را خوانده و عمليات لازم را بر روي متن بعد از آن انجام ميدهند تا به تگ پايان دهنده برسند. در حقيقت مرورگرها حکم مترجم را براي ما دارند و کليه تگها ونوشته هاي داخل آنها را بصورت اطلاعات منظم و قابل فهم در قالب يک صفحه وب براي ما ترجمه کرده و به نمايش ميگذارند. ما با وارد کردن تگهاي مناسب، کنترل نمايش صفحه وب را در مرورگرها به کنترل خود در مي آوريم پس بايد ياد بگيريد که تگهاي html را چگونه و در کجا بنويسيد. زبان html هم مانند هر زبان ديگري ساختار و قواعد خاص خود را دارد که در صفحات بعد با آنها آشنا مي شويد.
Source code
صفحات وب داراي مزيتي هستند و آن مشاهده کدهاي Html در مرورگر است که شما براحتي مي توانيد تگهاي عناصر تشکيل دهنده آن صفحه را ببينيد و با نحوه قرار گرفتن و تکنيکهاي بکار گرفته شده آشنا شويد. براي ديدن سورس کد يا همان کد تشکيل دهنده صفحه وب داخل منوي view در مرورگر مي شويد و بر روي گزينه Source کليک مي کنيد که بطور معمول برنامه Notepad باز شده و تگهاي Html را نشان مي دهد که در حال حاضر فهميدن آنها براي شما مشکل است ولي در آينده نزديک هيچ مشکلي براي درک کدها نخواهيد داشت.
ساخت اولين صفحه وب
در اين بخش شما اولين صفحه وب را خواهيد ساخت تا سادگي زبان html را لمس کنيد. براي شروع ابتدا برنامه Notepad ويندوز را باز کنيد، البته مي توانيد از هر برنامه ويرايشگر متن استفاده کنيد. سپس اين تگها را بنويسيد:
<html>
</html>
اين تگها به مرورگر وب ميفهماند که از کجا کدهاي html شروع و به کجا ختم ميشوند. پس بقيه تگها را ما بايد بين اين دو وارد کنيم. تگها را ما به دو دسته تقسيم ميکنيم: تگهاي قسمت سر head و تگهاي قسمت بدنه body ، بدين صورت:
<html>
<head>
</head>
<body>
</body>
</html>
فرق اين دو قسمت در اينست که هر اطلاعاتي داخل تگهاي قسمت سر head نوشته شود در صفحه مرورگر نشان داده نميشود ولي در قسمت بدنه body هر اطلاعاتي وارد شود در صفحه نمايش داده ميشود.
خب دوستان اين ساختار کلي و اسکلت بندي يک صفحه وب هست که بايد هميشه آنرا در نظر داشته باشيد. حالا يک متني بين تگهاي بدنه body وارد کنيد، مثلاً
<html>
<head>
</head>
<body>
This is my first page!
</body>
</html>
نامگذاری و ذخيره کردن فايل
الان کدنويسي ما تکميل شد و بايد اين فايل متني را ذخيره کنيم تا بتوانيم در مرورگر وب خود امتحانش کنيم. ابتدا منو File را باز کنيد و گزينه Save as را انتخاب کنيد، يک پنجره براي آدرس دهي و نامگذاري آن فايل باز ميشود که آدرس جايي که بايد ذخيره شود را مانند My Documents وارد کنيد
http://pnu-club.com/examples/save.jpg
سپس در پايين پنجره باز شده در قسمت File Name اسم فايل را بنام Firstpage وارد کنيد و دقت کنيد تا در آخر اين اسم يک نقطه بگذاريد و پسوند html را بنويسيد و دکمه Save را بزنيد تا فايل متني ما بصورت يک فايل html ذخيره شود.
http://pnu-club.com/examples/pagename.jpg
دقت کنيد اگر ميخواهيد فايل شما در سيستم عامل DOS هم باز شود بايد پسوند .htm را در آخر اسم وارد کنيد.
حالا به سراغ فايل ذخيره شده ميرويم، اگر در سيستم عامل ويندوز اينکار را انجام داده ايد، آن فايل بايد آيکون مرورگر اينترنت اکسپلورر را داشته باشد، روي فايل کليک کنيد تا باز شود، همانطور که مشاهده ميکنيد مرورگر وب شما باز ميشود تا اطلاعات آن صفحه را نمايش دهد. اگر داخل صفحه فقط نوشتهايي که بين تگ body وارد کرده ايد را مي بينيد پس بايد به شما تبريک بگويم و از اين به بعد بايد به خودتان بيشتر توجه کنيد. اگر هم غير از آن مي بينيد يا چيزي مشاهده نميکنيد، مراحل گفته شده را دوباره انجام دهيد.
افزودن متن به صفحه
همانطور که دربخشهاي قبل گفته شد، هرمتني را بين تگهاي <body>وارد کنيد بعد از ذخيره آن فايل با پسوند.html يا.htm و هنگام نمايش فايل در مرورگر آنرا مشاهده خواهيد کرد که متن مورد نظر با تنظيمات مرورگر نمايان خواهد شد. ولي ما با استفاده از تگهاي اين عنصر کنترل نمايش نوشته ها را بدست خود ميگيريم تا همان چيزي که مورد نظر ما است نشان داده شوند. تگهاي متن را ميتوان به دو دسته تقسيم کرد، تگهاي اوليه که بيشتر وظيفه خط بندي، پاراگراف بندي و يا تنظيمات در ارتباط با متن را به عهده دارند و تگهايي که شکل و آرايش حروف را کنترل ميکنند که به آنها formatting مي گويند. بهتر است که Notepad يا هر برنامه ويرايشگر متن را که داريد باز کنيد و هر کدام از اين تگها را امتحان کنيد تا کاربرد آنها در ذهن شما جاي گيرد.
<br>
براي خط بندي از اين تگ استفاده ميشود و متن بعد از آن به يک خط پايين تر منتقل ميشود که نيازي به تگ پايان دهنده هم ندارد.
line breakThis is an example for
line break tag.
p>
پاراگراف بندي متن را به عهده دارد و فاصله بيشتري را نسبت به <br> بين خطوط ايجاد ميکند. اين تگ داراي خصوصيت align= " " ميباشد که محل قرارگيري پاراگراف را در يک سطر کنترل ميکند و با کلمات "left", "center", "right", "justify"مقداردهي ميشود.
<p align="left">...</p>
<center></center>
همانطور که از اسمش پيداست متن بين اين دو تگ در وسط يک سطر قرار خواهد گرفت، البته اين تگ را براي عناصر ديگر وب نيز ميتوان بکار برد
<pre></pre>
مرورگرها فاصله هر کلمه را در حد استاندارد نشان ميدهند و اگر شما بخواهيد که يک متن با فاصله هاي زيادي نمايش داده شود يعني آنطور که ميخواهيد نشان داده شود از اين تگ استفاده ميکنيد
<h1></h1>
به اين تگHeading مي گويند و براي مشخص کردن سرفصلها و تيترها بکار ميرود. اين تگ از عدد يک تا شش درجه بندي دارد که عدد يک بزرگترين حد و شش کوچکترين حد حروف را نمايش ميدهند. در ضمن داراي خصوصيت " "=align ميباشند و با left, center , right مقداردهي ميشود
hr>
اين تگ روي خود متن کاري صورت نميدهد و فقط با ترسيم يک خط افقي آنها را از هم جدا ميکند که داراي خصوصيات زير ميباشد.
width=" "طول خط را کنترل ميکند که هم با عدد در مقياس پيکسل و هم با درصد ميتوان مقدار دهي کرد.
align=" " که محل قرار گيري خط در يک سطر را کنترل ميکند.
color=" "رنگ خط که ميتوانيد اسم رنگ يا کد هگز رنگ را بنويسيد.
size=" " اين خصوصيت ضخامت خط را تعيين ميکند که هرچه عدد بزرگتر باشد ، ضخامت بيشتر است. بصورت پيش فرض خط داراي سايه ميباشد و اگر خصوصيت noshade را به تگ اضافه کنيد ديگر سايه را نشان نميدهد
<div></div>
اين تگ کاربرد فراواني براي مدل دادن به متن دارد و مانند تگ <br> آن قسمت از متن را جدا ميکند وبه خط بعد منتقل ميکند . خصوصيت style=" " در اين تگ توانايي اعمال يک الگوي خاص در آن قسمت از متن را ميدهد. بطور مثال هر گاه کاربر نشانگر موس را روي آن متن برد ، نوشته هاي ما خط دار شود، البته هر نوع Style که تعريف شود همان را بکار ميبرد.
<span></span>
اين تگ هم مانند تگ بالا ميباشد با اين تفاوت که مخصوص يک کلمه يا حتي يک حرف ميباشد چون مانند div متن را از بقيه جدا نميکند و داراي خصوصيت style=" " ميباشد که بر فرض هنگام قرار گرفتن موس روي يک کلمه زمينه آن رنگي شود
<span></span>
اين تگ هم مانند تگ بالا ميباشد با اين تفاوت که مخصوص يک کلمه يا حتي يک حرف ميباشد چون مانند div متن را از بقيه جدا نميکند و داراي خصوصيت style=" " ميباشد که بر فرض هنگام قرار گرفتن موس روي يک کلمه زمينه آن رنگي شود.
<marquee></marquee>
متن بين اين دو تگ متحرک خواهد شد و داراي خصوصيات زير ميباشد، البته اين تگ ممکن است در همه مرورگرها عمل نکند ولي در مرورگر اينترنت اکسپلورر (IE) مشکلي براي نمايش ندارد. خصوصيات اين تگ عبارتند از :
align=" "محل قرار گرفتن متن را تعيين ميکند که با کلمات top, middle, bottom مقدار دهي ميشود.
behavior=" "اين خصوصيت نحوه حرکت متن را کنترل ميکند که آنرا برابر با scroll اگر قرار دهيم، متن بصورت متناوب از يکطرف صفحه وارد و از طرف ديگر خارج ميشود و اگر برابر با alternate قرار دهيم ، متن از صفحه خارج نميشود و در عرض مرورگر حرکت ميکند، همچنين اگر برابر با slide باشد ، متن از يکطرف وارد صفحه شده و در طرف ديگرميايستد.
bgcolor=" " (http://pnu-club.com/color.htm)رنگ زمينه آن تگ را مشخص ميکند که يا نام رنگ يا کد هگز آنرا مينويسيد.
direction=" "جهت ورود متن به صفحه را کنترل ميکند و با کلمات left, right, top, down که از چپ ، راست، بالا و پايين ميتواند وارد شود.
height=" "ارتفاع کادر marquee را به عدد در مقياس پيکسل يا به درصد تعيين ميکند.
hspace=" " حاشيه چپ و راست را کم وزياد ميکند.
loop=" "تعداد چرخش متن را کنترل ميکند.
scrolldelay=" " سرعت حرکت متن را تعيين ميکند.
vspace=" " حاشيه بالا و پايين متن را مشخص ميکند.
width=" " عرض کادر را کنترل ميکند.
<-- !.....-->
از اين تگ براي افزودن نظريه يا هر نوشته ديگري که نميخواهيد در مرورگر نمايش داده شود و يا عملي را انجام دهد استفاده ميکنيد که بجاي نقطه چين هر متني را ميتوانيد وارد کنيد .
<bdo></bdo>
اين تگ فقط مخصوص مشخص کردن متن ازطرف چپ يا راست که داراي خصوصيت dir=” “ ميباشد و با ltr يعني از چپ به راست و rtl يعني از راست به چپ مقدار دهي ميشود.
در قسمت قبل با تگهايي آشنا شديد که کنترل کلي نمايش متن را به عهده داشتن و در اين صفحه تگهايي را مياموزيد که کنترل نمايش حروف از لحاظ سايز، ضخامت، نوع آرايش و قرارگيري آنها در کلمه را بعهده دارند که به اين نوع تگها formatting ميگويند.
<font></font>
براي مشخص کردن نوع يا شکل حروف ، رنگ و يا اندازه آنها از اين تگ استفاده ميکنيم که داراي خصوصيات زير ميباشد.
face=" " اين خصوصيت نوع فونت را تعيين ميکند که بايد برابر با يکي از فونتهاي استاندارد سيستم عامل قرار دهيد.
size=" "اندازه هر حرف را تعيين ميکند که از اعداد يک تا هفت با علامت مثبت به نشانه افزاينده و با علامت منفي به نشانه کاهش سايز استفاده ميشود.
color=" "براي کنترل و تعيين رنگ حروف اين تگ را ميتوان بکار برد.
<big></big> , <small></small>
براي تعيين اندازه حروف در يک حد خاص از اين تگها استفاده ميشود
<b></b>
متن بين آنها بصورت توپر bold ظاهر ميشود.
<i></i>
براي نوشتن حروف بصورت کج italic اين تگ را بکار ميبريم
<u></u>
اين تگ خطي زير کلمات خواهد کشيد
<s></s>
گاهي اوقات نياز داريم که روي يک حرف يا کلمه خط بکشيم، بطور مثال ميخواهيم روي قيمت قديمي کالا خط بکشيم و قيمت جديد آنرا کنارش بنويسيم که در اينصورت اين تگ را بکار خواهيم برد، همچنين از تگ<strike> ميتوان بجاي آن استفاده کرد
نکته: تگ هايي مانند <b><i><u><s> را physical مينامند يعني متن بکار رفته در آنها بصورت آنچه که انتظار داريم نمايان ميشوند اما در مقابل، تگ هاي logical هم هستند که تنظيمات مرورگرها در آنها موثر خواهند بود.
<sup></sup>
حروف يا اعداد بين آنها بالاتر از سطر ظاهر خواهند شد، مانند عدد توان در رياضيات
<sub><sub>
حروف يا اعداد پايين تر از سطر نوشته ميشوند، مانند عدد ظرفيت در فرمولهاي شيمي
<tt></tt>
نوشته بين آنها بصورت حروف تايپي ظاهر ميشود و خاصيت آن در اينست که کليه حروف به يک اندازه جا اشغال ميکنند
<em></em>
اين تگ مانند تگ <i> عمل ميکند و جزو تگهاي Logical است.
<strong></strong>
اين تگ هم مانند <b> عمل ميکند و در ضمن logical است.
نکته: مزيت استفاده تگهاي logical به تگهاي physical در اينست که در کليه مرورگرها به نمايش در ميايند ولي در بعضي از مرورگرها ممکن است تگ physicalعمل نکند
<cite></cite>
براي جمله هاي نقل قول ميتوان ازش استفاده کرد که مانند <i> عمل ميکند و در ضمن logical هم هست.
<blockquote></blockquote>
اين تگ مانند <p> وظيفه پاراگراف بندي را به عهده دارد با اين تفاوت که حاشيه بيشتري را در نظر ميگيرد و اگر براي دو دفعه متوالي استفاده شود، پاراگراف دوم با حاشيه دو برابر نسبت به اولي نمايان ميشود. در ضمن براي خطوط ساده از <q> ميتوان استفاده کرد.
<acronym></acronym>
کاربرد اين تگ براي مختصرنويسي است يعني اگر يک کلمه مانند HTML داريد با استفاده از آن ميتوانيد کلمات کامل را در يک کادر کوچک به اسم tooltip قرار دهيد و هنگاميکه کاربرموس را روي آن کلمه ببرد اين کادر باز شده و آنها را نمايش دهد.کلمات کامل را بايد در خصوصيت title=" " قرار دهيد.
<acronym title="radiodetecting and ranging"> RADAR </acronym>
<abbr></abbr>
اين تگ هم مانند تگ بالا است با اين تفاوت که در مرورگر چيزي را نمايش نميدهد.
<code></code>
اگر شما نياز داشتيد تا داخل يک صفحه از وب در مورد کد زبانهاي برنامه نويسي صحبت کنيد، ميتوانيد آنها را بين اين دو تگ قرار دهيد، همچنين براي متغيرها هم از تگ <var></var> ميتوان استفاده کرد
<dfn></dfn>
اين تگ نمايانگر کلمه definition و براي توصيف يک متن بکار ميرود که آن متن بصورت مايل ظاهر خواهد شد
<kbd></kbd>
اين هم نمايانگر کلمه keyboard است که حروف را بصورت ساده و تايپي نشان ميدهد
<samp></samp>
نمايانگر کلمه sample است و براي نمايش نمونه کارتوليد شده از يک برنامه بکار ميرود
<del></del>
هنگاميکه بخواهيد يک مطلب را حذف کنيد از اين تگ استفاده ميکنيد و يک خطي روي متن بين آنها کشيده ميشود که بطور معمول با تگ <ins> بکار ميرود. اين تگ داراي دو خصوصيت منحصر ميباشد، cite=" " که ميتواند آدرس يک فايل باشد تا توضيحي راجع به علت حذف آن مطلب بدهد و date=" " که تاريخ و زمان حذف را معين ميکند
<ins></ins>
اين تگ هم بطور معمول با <del> بکار برده ميشود و براي مشخص کردن يک مطلب وارد شده است که داراي خصوصيات درج شده در تگ <del> نيز ميباشد و همچنين اين دو تگ داراي خصوصيت title=" " هم ميباشند که در آن يک پيغام براي بيان علت حذف يا اضافه مطلب ميتوان نوشت
طرز ساختن ليست ها
ليستها هم جزو عنصر متن در html ميباشند که بخاطر زياد بودن تگهاي متن مجبورم آنها را از هم جدا کنم. سه نوع ليست وجود دارد، يکي ليستهاي با ترکيب منظم (Ordered list) و ليست با ترکيب نا منظم (Unordered list) وديگري ليستهاي توصيفي (Definition list) . شايد اين نوع نامگذاري بخاطر وجود اعداد يا حروف بترتيب در ليست منظم است که در ديگري فقط نقطه هاي توپر هست که ترتيبي را نميتوان براي آنها در نظر گرفت. در هر صورت تگهاي آن به شرح زير ميباشند:
<ol><li></ol>
براي درست کردن ليست در يک صفحه از اين تگها بايد استفاده کنيم، بدين صورت که در آغاز قسمتي که ميخواهيم ليست درست کنيم تگ <ol>را که مخفف ordered list ميباشد را مينويسيم تا مرورگر بفهمد ليست از آنجا شروع ميشود و سپس در ابتداي هر گزينه از ليستمان تگ <li>را اضافه ميکنيم و در انتهاي گزينه ها تگ پايان دهنده </ol>را می نويسيم.
(http://pnu-club.com/examples/list01.htm)
اگر دقت کنيد به صورت پيش فرض اعداد 1,2,3 به ابتداي گزينه هاي ليست مان اضافه ميشود. شما ميتوانيد خصوصيت type را به تگ <ol> اضافه کنيد و آنرا با A, a که به صورت حروف کوچک يا بزرگ انگليسي و يا با I, i که با اعداد رومي است مقدار دهي کنيد. به طور مثال اگر ميخواهيد ترتيب ليست شما با اعداد رومي کوچک باشد بدين صورت تگ را کامل ميکنيد:
<ol type="i">
<li> Item 01
<li> Item 02
<li> Item 03
</ol>
<ul><li></ul>
اين تگ را unordered list مينامند و مانند تگهاي بالا براي درست کردن ليست در يک صفحه ميباشد با اين تفاوت که بجاي حروف و اعداد از دايره يا مربع هاي توپر استفاده ميکند که مانند بالا ميتوانيد از خصوصيت type که با کلمات” disc”, “circle”, “square” مقدار دهي ميشود استفاده کنيد.
<ul type="disc">
<li> Item 01
<li> Item 02
<li> Item 03
</ul>
(http://pnu-club.com/examples/list03.htm)
شما ميتوانيد براي درست کردن يک ليست که داراي چند گزينه است و هر گزينه هم چند زير مجموعه دارد از مخلوط اين دو نوع ليست استفاده کنيد که به اين حالت Nested list گفته ميشود.
بر فرض مثال ما يک ليست داريم که چهار گزينه دارد و هر کدام از آنها دو رنگ سفيد و سياه دارند:
<ol type=”I”>
<li> Item 01 <ul type="circle"> <li> Black <li> White </ul>
<li> Item 02 <ul type="circle"> <li> Black <li> White </ul>
<li> Item 03 <ul type="circle"> <li> Black <li> White </ul>
<li> Item 04 <ul type="circle"> <li> Black <li> White </ul>
</ol>
<dl><dt><dd></dl>
آخرين مدل، ليستهاي توصيفي هستند که براي تعريف و توصيف يک کلمه بکار ميروند که کلمه مشخص را با تگ <dt> و توصيف آنرا با <dd> بکار ميبرند.
<dl>
<dt> Html
<dd> HyperText Markup Language.
</dl>
طرز ساختن لينک ها
لينک چيست؟
لينکها يا همان نقاط پيوند صفحات هم، يک نوع متن به حساب مي آيند، فقط تنها فرقي که بين آنها وجود دارد در اين است که هنگاميکه با موس بر روي آنها ميرويم نشانگر موس شکل دست به خود گرفته تا ما بر روي آن کليک کنيم، البته در بيشتر مواقع رنگ آن هم با متن هاي معمولي فرق دارد. پس از کليک کردن روي لينکها، ما به صفحات ديگر يا حتي به سايتي ديگر هدايت ميشويم. تگ مخصوص لينک <a></a> ميباشد که با خصوصيت href آدرس دهي ميشود که آن لينک به کجا وصل خواهد شد. به طور مثال اگر ما بخواهيم يک لينک درست کنيم که به سايت yahoo متصل شود بدين صورت عمل ميکنيم،
<a href="www.yahoo.com">Yahoo website</a>
که در مرورگر لينک زير ظاهر ميشود و ما را به سمت سايت ياهو حرکت ميدهد دقت کنيد فقط متني که مابين دو تگ آغاز کننده يعني <a href=” “>و تگ پايان دهنده </a> نوشته شود در مرورگر به شکل لينک ظاهر ميشود و قابل کليک است
Yahoo website (http://www.yahoo.com/)
همانطور که مشاهده ميکنيد به صورت پيش فرض رنگ لينکها آبي بوده و زير آنها خط کشيده ميشود که در بخش Style Sheet شما ياد خواهيد گرفت تا اين خط را برداشته يا رنگ آن را تغيير دهيد. لينکها را مي توان به دو دسته داخلي و خارجي تقسيم کرد، همانطور که از اسمشان پيداست لينکهاي داخلي نقاط پيوند داخل يک صفحه يا صفحات مختلف يک وب سايت ميباشند و لينکهاي خارجي نقاط پيوند بين دو سايت مختلف ميباشند.
Absolute and Relative
لينکهاي داخلي به دو صورت نوشته ميشوند، يا بايد آدرس کامل وب سايت و فايل را نوشت مانند:
<a href="http://www.mysite.com/page01.htm"> Page01 </a>
به اين مدل لينک absolute ميگويند.
و يا اينکه فقط اسم فايل را بنويسيم البته اگر آن فايل داخل يک دايرکتوري است بايد ابتدا اسم آن دايرکتوري را نوشته سپس نام فايل را مينويسيم. به فرض مثال اگر لينک ما قرار است به يک صفحه به اسم Page01.htm در دايرکتوري بنام htmlpages متصل شود مجموعه کدي که بايد نوشته شود بدين صورت است:
<a href="htmlpages/Page01.htm"> Page01 </a>
به اين مدل relative مي گويند.
دقت کنيد دوستان وقتي صفحه اي که قرار است به اين لينک ما پيوند داده شود دردايرکتوري پايين تر از اين صفحه قرار دارد اينگونه عمل ميشود اما اگر لينک ما در صفحه اي قرار دارد که قرار است به يک صفحه در دايرکتوري بالاتر از آن متصل شود مي توانيم به جاي اسم دايرکتوري بالاتر از دو نقطه کنار هم( .. ) استفاده کنيم،
<a href="../page02.htm"> page02 </a>
به طور ساده مي توان گفت که اگر اين صفحه قرار است به صفحه اي داخل دو فولدر تو در تو متصل شود بايد اسم فولدر اول بعد اسم فولدر داخل فولدر اول سپس اسم آن فايل يا صفحه را مينويسيم ولي اگر در آن صفحه بخواهيم يک لينک بگذاريم که به اين صفحه پيوند داده شود جاي فولدر داخلي و فولدر اول ميتوانيم دو نقطه بگذاريم و سپس اسم اين فايل را بنويسيم يعني بدين شکل:
<a href="../../thispage.htm"> this page </a>
target
تگ لينک خصوصيتي دارد که توسط آن مي توانيد محل باز شدن و يا نمايش صفحه اي که مي خواهيد به آن پيوند دهيد را کنترل کند که آن صفحه در همان پنجره يا در يک پنجره جديد باز شود. اين خصوصيت target نام دارد که بايد برابر با يکي از مقادير _blank , _self , _top , _parent قرار گيرد.
target="_blank"
اين مقدار يک پنجره جديد در مرورگر باز کرده و صفحه مربوط به آن لينک را نمايش ميدهد. _self
اطلاعات صفحه مربوط به آن لينک در همان فريم [/URL]که لينک قرار دارد نمايش داده ميشود.
_parent
صفحه مورد نظر در همان پنجره مرورگر باز خواهد شد ، نه در پنجره جديد.
_top
صفحه مربوط به اين لينک هيچگاه در پنجره اي که (http://pnu-club.com/frames.asp)فريم دارد باز نخواهد شد.
[U]Anchor
يک نوع لينک هم هست که دو نقطه را در داخل يک صفحه بهم متصل ميکند که به آن anchor مي گويند. کاربردهاي گوناگوني دارد ولي بيشترين کاربرد اين نوع لينک براي مواقعي است که طول يک صفحه از سايت زياد شده و در انتهاي همان صفحه شما يک لينک مي گذاريد تا با کليک کردن بر روي آن بيننده سايت شما به بالاي همان صفحه هدايت شود. براي اينکار دو سري تگ لازم است که بايد بنويسيد، يکي جايي است که ميخواهيد لينک به آن متصل شود که بايد آن نقطه از صفحه را نامگذاري کنيد و اين اسم بايد داخل همان صفحه تک باشد يعني در جاي ديگر بکار نبرده باشيد و تگ آن به اين صورت است:
<a name="top">
در بين دو علامت " " و به جاي کلمه top هر اسمي ميتوانيد بکار بريد اين نکته را در ذهن داشته باشيد که اين تگ درمرورگر ظاهر نميشود.اما تگ ديگري که نياز است خود کد لينک است وبجاي نوشتن آدرس فايل در خصوصيت href شما نامي را که انتخاب کرديد به اضافه علامت # را مينويسيد:
<a href="#top">top of the page</a>
در مورد لينکهاي خارجي يعني لينکهايي که به سايتهاي ديگر وصل ميشوند بايد از مدل absolute استفاده کنيد و آدرس کامل را بنويسيد:
<a href="http://www.sitename.com/page01.html"> link to another site </a>
نکته: نوشتن پروتکل http:// اجباري نيست و ميتوانيد از نوشتن آن صرف نظر کنيد.
mailto
علاوه بر اين لينکها شما ميتوانيد براي آدرسهاي ايميل هم لينک درست کنيد که تگ آن به صورت زير ميباشد:
<a href="mailto:email_address"> my email </a>
کلمه mailto: به مرورگر ميفهماند که بايد يک ايميل به آدرس بعد از آن فرستاده شود. البته اين لينکها براي بيننده هايي که ايميل هايشان را با برنامه هايي مانند Outlook express چک ميکنند ، مفيد است چون وقتي که روي اين نوع لينک کليک شود برنامه پيش فرض مديريت ايميل در سيستم عامل کاربر باز ميشود پس براي بيننده هايي که آدرس ايميل ياهو دارند اين کد مفيد نيست بهتر است که آدرس کامل ايميل را نوشته و به صورت يک لينک درست کنيد تا براي کليه بينندگان سايت مفيد باشد، مانند مثال زير:
<a href="mailto:my_email@domain.com"> my_email@domain.com </a>
البته شما ميتوانيد حتي موضوع و متن ايميل را تعيين کنيد. اگر قصد همچين کاري را داريد پس بايد بلافاصله بعد ازآدرس ايميل داخل تگ يک علامت سوال اضافه کنيد تا مرورگر بفهمد که اين آدرس ادامه دارد و بعد از علامت سوال کلمه subject= را مينويسيد که اين کلمه نشانگر موضوع ايميل است و هرچيزي که جلوي آن نوشته شود به عنوان موضوع ايميل در برنامه مشخصه نمايان خواهد شد و اگر متن ايميل هم بخواهيد نوشته شود بايد بعد از موضوعي که نوشتيد علامت & را بگذاريد وسپس کلمه body= را که نشانگر متن ايميل است و در جلوي علامت مساوي هر متني را ميتوانيد وارد کنيد. بر فرض مثال ميخواهيد که ايميل با موضوع Test و متن Hello my friends به آدرس ايميل فرستاده شود:
<a href="mailto:my_email@domain.com?subject=Test&body=Hello my friends"> my_email@domain.com </a>
توجه داشته باشيد که اگر ميخواهيد اين کد را امتحان کنيد اول بايد برنامه پيش فرض مديريت ايميل مانند نرم افزار Outlook را براي آدرس ايميل خود تنظيم کنيد.
قرار دادن عکس در صفحه وب
يکي از عناصري که باعث جذابيت در وب سايت ميشود عنصر عکس يا همان image است. عکسها زيبايي خاصي به صفحات ميبخشند ولي از طرف ديگر توليد دردسر هم ميکنند، اگر شما تعداد زيادي عکس در يک صفحه بگذاريد يا از عکسهايي با حجم زياد استفاده کنيد آن موقع است که بيننده بايد مدت طولاني را صرف کند تا صفحه سايت شما را به طور کامل ببيند و همين موضوع باعث از دست دادن يک بيننده و يک نمره منفي به حساب ميايد. همانطور که ميدانيد در کشور عزيزمان ايران سرعتهاي اينترنت خيلي پايين هست و ديدن صفحات سنگين بسيارعذاب آور است البته بماند که بعضي وقتها همان يک ذره سرعت هم نداريم. پس هميشه تا جايي که ميتوانيد صفحه را سبک کنيد تا براي بيننده خسته کننده نباشد. يک سايت موفق سايتي است که بيننده زياد داشته باشد.
فرمتهاي عکس در وب:
خب بپردازيم به ادامه بحث ، عکسها داراي فرمتهاي زيادي ميباشند ولي فرمتهايي که در وب بکار برده ميشوند، عبارتند از:
.gif (Graphic Interchange Format)
.jpeg (Joint Photographic Experts Group)
.png (Portable Network Graphics)
عکسها با فرمت .gif بيشترين استفاده را در وب دارند و محبوبترين نوع عکس است. اين نوع فرمت 256 رنگ را پشتيباني ميکند و از ويژگيهاي ديگر آن animation, transparency, interlacing است . البته محبوبيت آن بيشتر براي حجم کم آن است.
Transparency به شفافيت يک عکس ميگويند که آنرا پشت نما هم مينامند. اين ويژگي است که يک عکس آنقدر شفاف است که شما ميتوانيد تا تصوير ، متن يا رنگ زير آن عکس را ببينيد.
Interlacing گاهي وقتها شما منتظر ميشويد تا يک عکس به دليل بزرگي اندازه بارگذاري شود بعد آنرا ببينيد اما اگر عکسي اين ويژگي را داشته باشد کم کم عکس کامل خواهد شد يعني خط به خط به عکس اضافه ميشود تا کامل بارگذاري شود.
Animation عکسهاي متحرک را مي گويند وفقط اين فرمت هست که از متحرک سازي عکس حمايت ميکند.
عکسهايي با فرمت .jpeg حدود 16 ميليون رنگ را پشتيباني ميکنند ، نسبت به فرمت .gif از حجم بالاتري برخوردار است ولي کيفيتش بهتر است ، تمام ويژگيهاي gif را دارد به غير از Animation. فرمت .png نسبت به قبليها جديدتر است و مخلوطي از آنهاست يعني کيفيت jpeg و حجم کم gif را دارد.
افزودن عکس به صفحه وب:
مانند همه عناصر داخل صفحه، عنصر عکس هم تگ خاص خودش را دارد که آن تگ <img>و پايان دهنده هم ندارد. اما براي مشخص کردن فايل عکس و آدرس دهي آن بايد از خصوصيت src=" " داخل تگ استفاده کنيم که اگر يک عکس داخل دايرکتوري وب سايت خودتان باشد ديگر نيازي به آدرس کامل نيست و فقط اسم دايرکتوري و اسم فايل با پسوند مشخصه آن عکس نوشته ميشود ولي اگر ميخواهيد که عکسي را از وب سايت ديگري در صفحه خود بگذاريد بايد آدرس آن وب سايت و دايرکتوري که عکس در آن قرار گرفته و اسم کامل آن فايل را بنويسيد مانند:
<img src="images/pic01.gif">
<img src="www.sitename.com/images/pic01.gif">
Height, Width
اين تگ خصوصيات ديگري هم دارد، يکي از آنها که کاربرد زيادي هم دارد خصوصيات طول height و عرض width ميباشد که توسط آنها اندازه يک عکس را داخل صفحه ميتوانيد کنترل کنيد. مقياس اندازه گيري طول و عرض بر حسب پيکسل Pixel ميباشد، اگر شما اين خصوصيات را کنترل نکنيد عکس در اندازه اصلي خود ظاهر ميشود. بطور مثال شما ميخواهيد عکسي را وارد کنيد که در صفحه بايد به اندازه 100×100 فضا اشغال کند:
<img src="images/pic01.gif" height="100" width="100">
(http://pnu-club.com/examples/imagesize.htm)
اين نکته را در نظر داشته باشيد که سرعت کامل شدن عکس يعني download شدن آن در صفحه بستگي به حجم آن دارد نه اندازه عکس، پس ميتوانيد اندازه هاي يک عکس را اضافه کنيد ولي دقت کنيد که کيفيت عکس خراب نشود.
Alignment
شما ميتوانيد محل قرارگرفتن عکس را نسبت به عناصر اطراف خودش با خصوصيت align=” “تعيين کنيد و ميتوانيد کلمات left,right,top,middle,bottom را براي اين خصوصيت بکار بريد. بر فرض ميخواهيد که يک متن بعد از عکس و در وسط قرار گيرد:
<img src="images/pic01.gif" align="middle"> This is a text
(http://pnu-club.com/examples/imagealign.htm)
در ضمن اگر ميخواهيد خود عکس در وسط صفحه قرارگيرد بايد از تگ<center> قبل از تگ <img> استفاده کنيد و بعد از آن </center> را بنويسيد:
<center><img src="pic01.gif"></center>
Border
اگر مايل هستيد براي عکس کادر بگذاريد ميتوانيد از خصوصيت border=” “ استفاده کنيد و آنرا برابر با يک عدد قرار دهيد که هر چه اين عدد بزرگتر باشد ، کادر دور عکس هم ضخيم تر است به صورت پيش فرض border=”0” است يعني هيچ کادري مشاهده نميشود
Alt
تا حالا متوجه شديد که در يک وب سايت هنگاميکه نشانگر موس بر روي يک عکس که قرار ميگيرد يک کادر متني کوچک باز شده بنام tooltip و اطلاعاتي را راجع به آن عکس ميدهد؟ پس شما هم اينکار را انجام دهيد، خصوصيت alt=" " را داخل تگ گذاشته و هر متني را که جلويش بنويسيد در صفحه هنگاميکه موس بر روي عکس قرار گيرد ، زيرنشانگر نمايان ميشود. بهتر است که شما هميشه اين کار را انجام دهيد چون مرورگرهايي وجود دارد که عکس را نمايش نميدهد پس با اينکار بيننده از حضور آن عکس خبر دار ميشود
hspace, vspace
دو خصوصيت ديگر هست که حاشيه و فضاي خالي دور عکس را کنترل می کند، hspace=” “براي حاشيه چپ و راست عکس وvspace=” “ براي بالا و پايين. عددي را که وارد ميکنيد در مقياس پيکسل است
شما ميتوانيد يک عکس را به صورت لينک هم درست کنيد يعني هرگاه بيننده روي عکس کليک کرد به صفحه يا سايت ديگر هدايت شود. در اينجا شما بايد تگ لينک را قبل از تگ عکس بنويسيد و تگ پايان دهنده لينک را بعد از تگ عکس وارد ميکنيد، بدين صورت:
<a href="www.sitename.com"><img src="images/sitelogo.gif"></a>
بر روی لوگوی زير کليک کنيد تا به صفحه اصلی سايت هدايت شويد
http://pnu-club.com/../images/logo.jpg (http://www.iranw3.com/)
در ضمن ميشود براي قسمتهاي مختلف يک عکس لينکهايي به جاهاي مختلف درست کرد. به فرض مثال ما يک عکس از نقشه ايران داريم و ميخواهيم که روي هر استان کليک شود ، آن قسمت لينک شود به صفحه مورد نظر. اين حالت را Image map (http://pnu-club.com/imagemap.asp) مي گويند که در بخش بعد آنرا توضيح خواهم داد.
ساخت نقشه تصويری ( image map )
Image map يکي از تکنيکهاي ساخت عکس بصورت لينک است که گاهي اوقات به کمک ما ميايد. بطور مثال ما نقشه ايران را در صفحه اي قرارداده و ميخواهيم که بيننده سايت هرگاه روي يک استان کليک کرد صفحه مربوط به آن باز شود تا اطلاعات مربوطه را در اختيار کاربر قرار دهد. اين حالت حجم عکس را افزايش نخواهد داد و بهتر است از عکسهايي با حجم بالا استفاده نکنيم که در اين مورد به قسمت عکسها رجوع کنيد.
خب حالا عکس مورد نظر را با استفاده از تگ <img>درصفحه قراردهيد، سپس خصوصيت usemap=" " را به تگ اضافه کنيد که آنرا برابربا يک اسم واحد بايد قرار دهيم تا از آن اسم در جاي ديگر استفاده شود. اين خصوصيت به مرورگر ميفهماند که عکس را بصورت Image map ميخواهيم بکار بريم.
<img src="http://pnu-club.com/images/mypic.gif" usemap="#map01">
به علامت # دقت کنيد که بايد نوشته شود. در حال حاضر عکس آماده است و بايد تگهاي نقشه را وارد کنيم.ابتدا تگ <map name="map01"> وارد ميکنيم تا مرورگر بفهمد که نقشه آغاز شده و با استفاده از خصوصيتname=" " مشخص ميشود که چه عکسي قرار است اين خاصيت را داشته باشد. حالا نوبت به تعيين قسمتهاي مختلف عکس رسيده که هر قسمت در چه اندازه اي و به کجا بايد لينک شود. اين قسمتها ميتوانند اشکال هندسي نظيردايره، چهارگوش وچند ضلعي باشند. اين اطلاعات در تگ <area> مشخص ميشوند، اين تگ داراي سه خصوصيت ميباشد:
Shape=" " مشخص ميکند که هر قسمت داراي چه شکل هندسي ميباشد. اگر چهارگوش rectangle باشد آنرا برابر با "rect" قرار ميدهيم، اگر دايره circle بخواهيم برابر با "circle" و اگر چند ضلعي polygon بخواهيم برابر با "poly" قرار ميدهيم.
Coords=" "اين خصوصيت، مختصات نقاط تشکيل دهنده شکلها را مشخص ميکند که مختصات هر نقطه بر اساس محور x, y در مقياس پيکسل ميباشد. براي تشکيل يک لينک به شکل چهارگوش بايد مختصات دو نقطه گوشه چپ طرف بالاوگوشه راست طرف پايين آنرا بدست بياوريم ، چون هر نقطه داراي دو مختصات ميباشد يکي بر روي محور xها و ديگري yها پس چهار عدد بايد بنويسيم و هر عدد را با علامت کاما جدا کنيم.
Coords="10,10,65,65"
همچنين براي درست کردن يک لينک به شکل دايره مختصات مرکز آن و اندازه طول شعاع را بايد پيدا کنيم که با توجه به گفته بالا سه عدد بايد نوشته شود و براي چند ضلعي به تعداد هر نقطه دو عدد مينويسيم که ديگر محدوديت ندارد.
href=" " که در اين قسمت آدرس صفحه يا سايت مورد نظر را وارد ميکنيم.
<
img src="http://pnu-club.com/images/mypic.gif" usemap="#map01">
<map name="map01">
<area shape="rect" coords="25,25,55,50" href="page.htm">
<area shape="circle" coords="124,243,40" href= "www.yahoo.com">
<area shape="poly" coords="22,30,76,90,147,199,289,270,140,111,44,67" href="pages/first.html">
</map>
خب سوالي که حالا پيش ميايد، اينست که مختصات اين نقاط را چگونه پيدا کنيم؟ دو راه براي آن وجود دارد، يکي استفاده از برنامه هاي مختلف مانند Photoshop و ديگري که برايتان توضيح خواهم داد بدون استفاده از برنامه جانبي است و داخل همان صفحه ، با کمک مرورگر اينترنت اکسپلورراست. بعد از اينکه يک عکس را در صفحه قرار داديم و مراحل تشکيل Image map را انجام داديم يک تگ و يک خصوصيت به اين کدها اضافه ميکنيم و آنچه را که ميخواهيم براحتي بدست مياوريم. ابتدا تگ مخصوص لينک را قبل از<img> قرار ميدهيم تا عکس ما بصورت يک لينک ظاهر شود و سپس خصوصيت ismap را به تگ<img>اضافه ميکنيم و فايل را ذخيره ميکنيم. حالا آنرا باز کرده و همانطور که موس را روي عکس حرکت ميدهيد يک نگاه به نوار وضعيت status bar مرورگر در پايين بياندازيد، اعدادي را که مشاهده ميکنيد مختصات نقاط ميباشند.
<a href=" # "><img src="image.gif" usemap="#newmap" ismap>
<map name="newmap">
</map>
</a>
فراموش نکنيد که بعد از پيدا کردن مختصات نقاط، تمام مراحلي را که اضافه کرديد دوباره برداريد.
(tables)نحوه ساختن جدولها
تگ جدول
جدولها يکي از بهترين و مفيدترين عنصرها در صفحات وب ميباشند، با استفاده از آنها ما مي توانيم اطلاعات و عناصررا در يک صفحه سازمان دهي و مرتب کنيم . کليه اطلاعات يا عناصر ديگر وب را ميتوانيم داخل رديف ها يا ستون هاي يک جدول قرار دهيم بدون آنکه خطوط جدول مشخص باشد و يا در صورت نياز خطوط آنها نمايان ميشود. کمتر کسي را پيدا ميکنيد که از اين عنصر استفاده نکند و زمانيکه تجربه کافي براي طراحي يک سايت بدست آورديد به اهميت اين عنصر پي خواهيد برد.تگ مشخصه جدول <table></table> ميباشد. اما براي اضافه کردن رديف به يک جدول از<tr></tr>و براي ستون از تگ <td></td> استفاده ميکنيم. پس ساختار کلي يک جدول بدين صورت ميباشد:
<table>
<tr><td>this is a table.</td></tr>
</table>
هر چه تگهاي رديف و ستون بيشتر باشد به همان اندازه ما در جدولمان خانه خواهيم داشت. مجموعه کد بالا نشان دهنده يک جدول با يک رديف و يک ستون است يعني اين جدول داراي يک خانه ميباشد. يکي از ويژگيهاي جدول که محبوبيت آنرا زياد ميکند اينست که هر خانه از آن ميتواند به طور مجزا زمينه رنگي و يا عکسي در زمينه آن داشته باشد البته اندازه هاي هر خانه هم ميتواند متفاوت باشد.
border
خب براي اينکه بتوانيم يک جدول را در مرورگر خود ببينيم بايد با خصوصيت border=" " آشنا شويم. اين خصوصيت دور جدول يک کادردرست ميکند البته اگر اين خصوصيت را برابربا صفر قرار دهيم يا آنرا ننويسيم کادر دور جدول در مرورگر نمايان نخواهد شد و هر چه عدد بزرگتري بگذاريم کادر ضخيم تري خواهيم داشت، در ضمن رنگ (http://pnu-club.com/color.htm) کادرهم با bordercolor=" " که برابر با عدد هگز رنگ است تعيين ميشود. border ويژگيهاي ديگري هم دارد، به طور مثال شما ميتوانيد خصوصيت frame=" " را به تگ <table> اضافه کرده و آنرا برابر با يکي از کلمات void, above, below, hsides, vsides,lhs, rhs, box قرار دهيد تا کادر دور جدول را کنترل کنيد. اين کلمات هر کدام يک قسمت از کادر را نمايان ميکنند.
rule
ويژگي ديگري هم هست ولي بهتره اول يک جدول درست کنيد تا مطلب جا بيافتد، برنامه Notepad را باز کنيد و کد زير را وارد کرده و به اسم Table.htm ذخيره کنيد:
<table border="4" bordercolor="#ff0000">
<tr>
<td>cell 01</td><td>cell 02</td>
</tr>
<tr>
<td>cell 03</td><td>cell 04</td>
</tr>
</table>
حالا خصوصيت rules=" "را به تگ<table> اضافه کنيد و هر بار يکي از کلمات all, none, groups, rows, cols را جلوي آن قرار دهيد و فايل را دوباره ذخيره کنيد تا تاثير اين خصوصيت را ببينيد.
Alignment
ميتوانيد با استفاده از خصوصيت align=" "که در تگ <td>مينويسيد محل قرارگرفتن يک عنصر مانند متن را تعيين کنيد که ميتوانيد اين خصوصيت را با کلمات left, right, center, justify مقداردهي کنيد.
height, width
با خصوصيات height=" " , width=" " هم اندازه طول و عرض يک جدول را ميتوان کنترل کرد که بايد آنها را برابر با عدد در مقياس پيکسل قرار دهيد در ضمن شما ميتوانيد از درصد % هم استفاده کنيد مانند width="90%" که اين جدول نود درصد عرض يک صفحه را اشغال ميکند.
bgcolor
براي تعيين رنگ زمينه يک جدول ازbgcolor=" " که با عدد هگز رنگها مقدار دهي ميشود استفاده ميکنيم. اين خصوصيت را در تگ هاي <tr> و <td> هم مي توانيد بکار بريد
cellspacing, cellpadding
تگ <table> دو خصوصيت ديگر هم دارد که شما با بکار بردن آنها ميتوانيد فاصله بين خانه هاي جدول را از هم کنترل کنيد يعني فضاي خالي بين خانه ها اضافه کنيد، اين خصوصيت اين است cellspacing=" "و ديگري فاصله بين متن داخل يک خانه در جدول با لبه هاي چارچوب آن خانه است که خصوصيت cellpadding=" " اين وظيفه را به عهده دارد. هرچه مقداردهي عددي آنها بزرگتر باشد فاصله ها بيشتر خواهد بود.
header: <th></th>
حالا که با درست کردن رديف و ستون در جدول آشنا شديد، ميتوانيد براي هر ستون و رديف عنوان گذاري کنيد و يک تيتر به بالاي ستون يا به ابتداي يک رديف اضافه کنيد. در هر قسمت که شما به يک تيتر و عنوان نياز داشتيد بجاي تگ <td></td> از تگ <th></th> استفاده کنيد که در اين حالت متن نوشته شده در آن خانه بصورت ضخيم ظاهر شده و از بقيه متمايز ميشود
colspan, rowspan
گاهي اوقات شما نياز داريد تا چند خانه در يک رديف يا يک ستون از جدول را ترکيب کنيد تا يک خانه درست شود و بطور مثال يک تيتر و عنوان در آن قرار دهيد که براي ترکيب خانه هاي يک ستون از خصوصيت rowspan=" " و براي يک رديف از colspan=" " در تگ <td> استفاده ميکنيد و مقدار آنرا برابر با تعداد خانه هايي که بايد يکي شوند، قرار ميدهيد
caption
بطور معمول هر جدول داراي يک اسم و يا يک توضيح ميباشد که آنرا با تگ <caption></caption> در ميان تگهاي <table></table> مشخص ميکنند. اين تگ داراي خصوصيت align=" " ميباشد با کلمات top, bottom, left, center, right مقداردهي ميشود
thead, tbody, tfoot
اگر جدول شما داراي ستونها و رديفهاي زيادي است پس تکرار خصوصيات در هر تگ مربوطه بسيار دشوار است. شما ميتوانيد بصورت گروهي اين خصوصيات را کنترل کنيد. براي کنترل رديفها بايد آنها را به سه قسمت تقسيم کرد، قسمت سرشامل فقط خانه هاي رديف اول، بدنه شامل همه رديفهاي وسط و قسمت انتهايي شامل فقط خانه هاي آخرين رديف، که قسمت سر را با <thead></thead> ، قسمت بدنه را با <tbody></tbody> و قسمت انتهايي را با <tfoot></tfoot> کنترل ميکنيم. اين تگ داراي خصوصيت align نيز ميباشد
colgroup
همچنين با تگ <colgroup></colgroup> ميتوانيد خصوصيات کليه ستونهاي يک جدول را کنترل کنيد که اين تگ علاوه بر خصوصيات گفته شده در اين بخش داراي خصوصيت span=" " نيز ميباشد که توسط آن تعداد ستونهايي که بايد کنترل شوند را تعيين ميکنيد
summery
يک خصوصيت ديگر نيز براي تگ <table> هست بنام summery=" " که توصيفي از جدول ميباشد ولي در جايي نمايش داده نميشود. اين خصوصيت براي مرورگرهايي که فقط متن را نمايش ميدهند و يا مرورگرهاي مخصوص افراد ناتوان ، مفيد ميباشد که بهتر است از آن استفاده کنيد.
به اين موضوع هم توجه داشته باشيد که شما ميتوانيد داخل يک جدول، جدول ديگري هم درست کنيد يعني داخل هرخانه جداگانه يک جدول بسازيد که به اين روشNested table گفته ميشود.
ساخت اجزای فرم
فرم چيست؟
فرمها تنها عنصري هستند که بيننده سايت ميتواند اطلاعاتي را بطور مستقيم وارد کرده که اين اطلاعات بعد از تجزيه و تحليل يا در فايلي ذخيره شده يا فرستاده ميشود. شما ميتوانيد داخل يک صفحه يا يک وب سايت چندين فرم داشته باشيد بطور مثال براي چند نوع نظرسنجي از بينندگان که هر کدام از اين فرمها را با استفاده از خصوصيت name=” “در تگ <form> بايد نامگذاري کنيد تا اطلاعات مربوط به هر فرم با نام همان فرم پردازش شود. فرمها داراي اجزاي متفاوتي با وظيفه مشخص ميباشند که بايد قبل از تگ پايان دهنده </form> آنها را بکار برد. بعضي از اين اجزا عبارتند از: کادرهاي متني text fields ، قسمت انتخابات چند گزينه اي checkboxes وتک گزينه اي radio buttons ، ليستهاي پايين کشيدني drop-down lists و دکمه هاي تأييد submit وپاک کننده reset .
فرمها توسط برنامه هايي نظير ASP, CGI و با افزودن خصوصيات action=” “, method=” “, enctype=” “ در تگ <form> اطلاعات وارده را پردازش کرده و به وب سرور ميفهماند که به چه روش و در کجا اطلاعات ذخيره يا فرستاده شود. وب سرور به کامپيوتري که محتواي سايت شما بر روي آن قرار دارد گفته ميشود.
دکمه (button)
کليه اجزاي ساخته شده در يک فرم بدون بودن دکمه تأييد بي فايده هستند، چون بعد از فشردن اين دکمه است که اطلاعات وارده در فرم پردازش ميشوند. پس ابتدا به ساختن اين دکمه ميپردازيم. براي ساختن دکمه ها در يک فرم به دو روش ميتوانيم عمل کنيم:
روش اول: با استفاده از تگ <button></button> که داراي دو خصوصيت name=” “براي نامگذاري و type=” “براي مشخص کردن نوع دکمه که submit و يا reset ميباشد . در بين تگ آغازکننده و پايان دهنده هر چي نوشته شود در ظاهر دکمه نمايان ميشود
<button name="button 01" type="submit"> OK </button>
OK
روش دوم: با استفاده از تگ <input> که مانند روش اول دو خصوصيت name=” “که بايد کلمه button در جلوي آن بيايد و type=” “که ميتواند هم submit باشد و يا reset.
<input name="button" type="submit">
فرقي که اين دو روش با هم دارند در اينست که شما در روش اول هر نوشته اي را بخواهيد در روي دکمه هنگام نمايش صفحه در مرورگر نشان داده ميشود اما در روش دوم شما دخالتي در اين کار نداريد و به صورت پيش فرض کلمه submit , reset نمايان ميشود. البته ميتوانيد بجاي دکمه هاي ساخته شده توسط مرورگراز عکس هم استفاده کنيد يعني شکل يک دکمه را طراحي کنيد و در فرم قرار دهيد که خصوصيت type=” “ را برابر با کلمه image قرار ميدهيد و با خصوصيت src=” “ آن را آدرس دهي ميکنيد:
<input name="button" type="image" src="images/button01.gif">
لازم بذکر است که در اين تکنيک فقط از حالت submit دکمه بايد استفاده کرد.
text field, text area
خب بعد از ساختن دکمه ها ميپردازيم به بقيه اجزاي يک فرم. از اين به بعد ما با تگ
<input name=” “ type=” “>
وخصوصياتش زياد کار داريم . ما براي وارد کردن متن در فرم بسته به نيازمان از دو مدل کادرمتني ميتوانيم استفاده کنيم، يکي براي وارد کردن يک خط متن کوتاه که چند کلمه بيشتر نباشد و کادر ما هم به صورت خطي ميباشد و ديگري براي يک متن بلند است و کادر ما داراي چندين رديف ميباشد.
در مدل اول ازاين تگ استفاده ميکنيم:
<input name="textfield 01" type="text”>
دقت کنيد که کلمه text بايد در جلوي خصوصيت type=” “بيايد تا مرورگر بفهمد چه اجزائي از يک فرم را نمايش ميدهد. توسط خصوصيت size=” “ که با عدد مقدار دهي ميکنيد اندازه نمايش اين کادر خطي در مرورگر را کنترل ميکنيد و توسطmaxlength=” “ حداکثر تعداد حروفي را که بيننده مجاز هست تا وارد کند را کنترل ميکنيد.
Textfield :
اگر قرار باشد که بيننده داخل اين کادر خطي ، کلمه رمز را وارد کند پس بجاي خصوصيت type=”text” بايد از type=”password” استفاده کنيد تا هر متني که وارد شود بصورت ستاره در مرورگر نمايش داده شود.
Password :
اما مدل ديگري هست که متنهاي بلند داخل آن نوشته خواهد شد که بايد از تگ<textarea></textarea> استفاده کنيد که جدا از خصوصيت name=” “از خصوصيات cols=” “ , rows=” “براي کنترل رديفها و ستونهاي کادر بکار ميبريد.
this is a textarea example.
label
زمانيکه شما اجزاي فرم را اضافه مي کنيد، مي توانيد کنار هر کدام يک متني وارد کنيد تا نام آن قسمت درمرورگر مشخص شود. اما با افزودن تگ <label> کنترل بيشتري روي نام واجزاي يک فرم خواهيد داشت چون مي توانيد توسط اين تگ يکي از اجزاي فرم را احاطه کنيد، بدين صورت:
<label> Name :
<input type="text" name="textfield01">
</label>
که اين کد به صورت زير ظاهر مي شود،
Name:
دراين تگ، توسط خصوصيت for مي توانيد مشخص کنيد که label مربوط به کدام قسمت فرم است و در اين حالت نيازي به احاطه کردن اجزاي فرم نيست،
<label for="textfield01"> Name : </label>
<input type="text" name="textfield01">
Tab order
يکي از خصوصيات مفيد تگهاي html بنام tabindex است که کاربرد زيادي در عنصر فرم دارد و به همين خاطر در اين قسمت آنرا توضيح ميدهيم. تاکنون متوجه شده ايد که با زدن دکمه Tab بر روي کيبورد، مکان نما با ترتيب خاصي بر نقاط مختلف صفحه متمرکز مي شود که مي توانيم اين ترتيب حرکت را به کنترل خود در بياوريم. قبول کنيد که حرکت کردن بين اجزاي يک فرم توسط موس مخصوصاً زمانيکه يک فرم طولاني پيش رو داريم، بسيار سخت تر از حرکت با دکمه Tab کيبورد است. با اضافه کردن خصوصيت tabindex به تگهاي يک فرم و مقداردهي اين خصوصيت به ترتيب اعداد مي توانيم تمرکز مکان نما را از يک نقطه به نقطه مورد نظر به کنترل خود در آوريم. دقت کنيد که مقادير اين خصوصيت تکراري نباشد. به کد زير توجه بفرماييد:
<input type="text" name="field1" tabindex="1">
<input type="password" name="pass1" tabindex="2">
<textarea name="area1" cols="10" rows="5" tabindex="3"></textarea>
file field
گاهي اوقات نياز هست که به همراه اطلاعات وارد شده در فرم، فايلي هم ضميمه و به سرور فرستاده شود. براي اين حالت بايد در فرم، تگ <input> را نوشت و خصوصيت type آنرا برابر با کلمه file قرار داد. هنگاميکه اين خصوصيت را وارد مي کنيد، مرورگر بطور اتوماتيک يک کادر متني و يک دکمه براي جستجوي فايل بنام Browse نمايان مي کند. در نظر داشته باشيد که براي اين تگ تنظيمات وب سروربسيار مهم است وگرنه فايل فرستاده شده، خراب خواهد شد و اگر هم فرم قرار است که به ايميل (http://pnu-club.com/form02.asp)فرستاده شود پس به اين نکات بايد دقت کنيد که در تگ اصلي فرم حتماً enctype="multipart/form-data" را نوشته و در تگ file field هم accept="text/plain" را وارد کنيد که در اين حالت فايلهاي متني txt به درستي فرستاده مي شود. کلاً در بيشتر مواقع و با تنظيمات درست هم ممکن است فايل خراب شود.
checkbox
براي درست کردن انتخاب چند گزينه اي checkboxes بايد type=”checkbox” قرار دهيم . براي مواقعي که ما ميخواهيم بيننده يک يا چند گزينه را انتخاب کند از آن استفاده ميکنيم. براي هر گزينه در اين قسمت بايد يکبار اين کد را نوشت و اگر ميخواهيد به صورت پيش فرض يک گزينه تيک خورده باشد بايد کلمه checked را به تگ اضافه کنيد:
<input name="chkbox01" type="checkbox"> Item 01
<input name="chkbox01" type="checkbox"> Item 02
<input name="chkbox01" type="checkbox" checked> Item 03
radio button
براي انتخاب تک گزينه اي از type=”radio” استفاده ميشود و به آنها radio button ميگويند ، در مواردي کاربرد دارد که کاربر حق انتخاب يک گزينه را دارد.
drop-down list
يکي ديگر از اجزاي فرم، ليستهاي انتخابي است که در مرورگر بشکل ليستهاي پايين آمدني (drop-down list) ظاهر ميشوند. با تگ <select> آغاز ميشود و براي هر گزينه داخل اين ليست بايد تگ <option> را بنويسيد و در انتهاي آنها تگ پايان دهنده اين ليست يعني </select> را مينويسيم. در ليست ساخته شده، بيننده و کاربر ميتواند يک گزينه را انتخاب کند ولي اگر خصوصيت multiple را به تگ <select> اضافه کنيد، کاربر ميتواند با پايين نگه داشتن دکمه هاي Ctrl يا Shift بر روي کيبورد، چند گزينه را از آن ليست بطور همزمان انتخاب کند.
<select name="selectList01" multiple>
<option value="item1">Item 01</option>
<option value="item2">Item 02</option>
<option value="item3">Item 03</option>
<option value="item4">Item 04</option>
<option value="item5">Item 05</option>
</select>
Item 01 Item 02 Item 03 Item 04 Item 05
تگ select داراي خصوصيت size هم ميباشد که اگر آنرا برابر با عدد يک قرار دهيم بصورت زير ظاهر ميشود که در اين حالت بهتر است خصوصيت multiple را حذف کنيد. بصورت پيش فرض اولين گزينه در ليست نمايان ميشود ولي اگر خصوصيت selected را به يکي ديگراز تگهاي option اضافه کنيد، در مرورگر آن گزينه نمايش داده ميشود.
Item 01 Item 02 Item 03 Item 04 Item 05
fieldset
بمنظور مرتب کردن و نظم دادن به اجزاي داخل يک فرم ميتوان از تگ<fieldset>در ابتداي کد يکي از اجزاي مورد نظراستفاده کرد و در انتهاي همان کد تگ</fieldset>را نوشت که بااين تگ يک کادر مستطيل نازک دور آن درست خواهد شد و اجزاي يک فرم را از هم جدا خواهد کرد. شما حتي ميتوانيد براي آن قسمت يک اسم بگذاريد که در بالاي آن کادر در مرورگر نمايان ميشود که براي اين کار بعد از تگ<fieldset>بايد تگ<legend> NAME </legend>را بکار برد که هر اسمي را ميتوانيد بجاي کلمهNAMEبکار بريد.
<form>
<fieldset>
<legend> Radio Button fieldset </legend>
<input name="rb" type="radio"> Item 01
<input name="rb" type="radio"> Item 02
<input name="rb" type="radio"> Item 03
<input name="rb" type="radio"> Item 04
</fieldset>
</form>
Radio Button fieldset
Item 01 Item 02 Item 03 Item 04
hidden field
بعضي اوقات، لازم ميشود تا اطلاعاتي از فرم به سرور فرستاده شود که در مرورگر نبايد ديده شود. براي اين منظور بايد تگ input را نوشته و خصوصيت type را برابر با hidden قرار دهيم ، خصوصيت name را هم مقداردهي مي کنيم با يک نام دلخواه و غيرتکراري ، همچنين خصوصيت value را نوشته و هر مقداري که به آن نسبت دهيم بصورت پنهاني به سرور فرستاده خواهد شد.
<input type="hidden" name="hiddenfield01" value="chkName">
elements
اگر يکي از اجزاي فرم را به هردليلي نياز نداشته باشيد اما حذف هم نمي خواهيد کنيد مثلاً در آينده مي خواهيد آنرا بکار گيريد، مي توانيد با افزودن خصوصيت disabled به تگ مورد نظر، آنرا موقتاً غيرفعال کنيد و با حذف آن خصوصيت از تگ دوباره آنرا فعال کنيد. با فراگيري زبان جاوااسکريپت استفاده از اين خصوصيت در کنترل اجزاي فرم، بيشتر کاربرد خواهد داشت.
<textarea name="textarea" cols="20" rows="3" disabled></textarea>
<input type="submit" name="Submit" value="Submit" disabled>
پس از اينکه اجزاي يک فرم ساخته و در صفحه اي از وب سايت قرار داده شدند ، حالا بايد فرآيندي را که روي اطلاعات وارد شده قرار است انجام شود ، مشخص کنيم. يعني معين کنيم که بعد از وارد شدن اطلاعات در خواستي و زدن دکمه تأييد توسط کاربر، به چه نحوي اطلاعات ذخيره يا به آدرس ايميلي فرستاده شوند که در قسمت بعدي توضيح خواهم داد.
نحوه جمع آوری اطلاعات از فرمها
هنگاميکه دکمه تاييد يک فرم زده مي شود اطلاعات وارد شده از صفحه عبور کرده و به سرور ( کامپيوتري که فايلهاي وب سايت شما بر روي آن قرار دارد ) فرستاده مي شوند تا پردازش شود. در اين قسمت بايد با دو خصوصيت action و method در تگ <form> آشنا شويد. اين دو خصوصيت مشخص مي کنند که اطلاعات چگونه و به کجا بايد فرستاده شوند.
در خصوصيت action آدرس فايلي که اطلاعات را تجزيه تحليل مي کند و بر روي سرور قرار دارد وارد مي شود که بطور معمول يا برنامه CGI و يا فايلهاي ASP است. CGI مخفف Common Gateway Interface است که فايلهاي آن با استفاده از زبان Perl, C ويا VB نوشته مي شوند و ASP مخفف Active Server Page است که يک زبان قوي تحت وب است که متعلق به شرکت مايکروسافت مي باشد. شما حتي مي توانيد اطلاعات گرفته شده از يک فرم را به آدرس ايميل هم بفرستيد که در اين حالت بايد خصوصيت action را برابر با”mailto:“ قرار دهيد.
در خصوصيت method تعيين مي شود که اطلاعات گرفته شده از فرم چگونه و به چه صورت به برنامه و فايل پردازشگر اطلاعات برسد. به دو روش اطلاعات را مي توان به سرور فرستاد، يکي روش get و ديگري روش post مي باشد. اين دو روش تفاوتي با هم دارند که روش دوم يعني post استفاده بيشتري دارد. در روش اول بايد خصوصيت method=” “ را برابر با کلمه get قرار دهيم که پس از وارد کردن اطلاعات و زدن دکمه تاييد فرم ، مطالب وارد شده، به انتهاي آدرس درمرورگراضافه مي شود که از لحاظ امنيتي روش خوبي نيست اما در روش دوم اينگونه عمل نمي شود و در ضمن روش post با بيشتر مرورگرها سازگارتر است. خصوصيت ديگري هم هست که در تگ <form> بکار مي رود و براي بالا بردن امنيت يک فرم است که اطلاعات گرفته شده از فرم را رمزدار کرده و به سرور مي فرستد که اين خصوصيت enctype=”application/x-www.form.urlencodeed “ است .
اما همانطور که گفته شد براي فرستادن اطلاعات يک فرم از طريق ايميل به آدرسي مشخص، بايد خصوصيت action=” “ را برابر با mailto: قرار داد و همچنين method=” “ را برابر با post و در خصوصيت enctype=” “ اصطلاح multipart/form-data را مي نويسيم تا هر قسمت از اطلاعات وارد شده در فرم بصورت يک فايل متني جداگانه به ايميل پيوست شود و يا برابر با text/plain قرار ميدهيم. براي وارد کردن آدرس ايميل بايد آنرا در جلوي کلمه “mailto:” نوشت، بدين صورت:
<form method=”post” action=”mailto:emailaddress@domain.com” enctype=”text/plain”>
دقت کنيد که بعد از زدن دکمه تاييد فرم پيغامي ظاهر شده که بيننده را از فرستادن يک ايميل مطلع مي کند و سپس برنامه پيش فرض ايميل کاربر باز مي شود .
امروزه يکي از بهترين و پرکاربرد ترين برنامه براي جمع آوري و پردازش اطلاعات از يک فرم، زبان ASP مي باشد که در بخش مربوطه مي توانيد مطالب مورد نظر و چگونگي ارتباط با بينندگان سايت را از طريق فرم بياموزيد.
استفاده از فريم
فريم چيست؟
هنگاميکه بخواهيد دو يا سه صفحه را در يک صفحه جاي دهيد بايد از عنصر فريم يا چارچوب استفاده کنيد. اين عنصر زماني کارآيي دارد که ميخواهيد يک قسمت، در همه صفحات ثابت باشد. به طور مثال شما در سمت چب صفحه يک ليست ثابت داريد و ميخواهيد هر وقت بيننده روي هر گزينه از اين ليست که کليک کرد توضيحات مربوط به آن در سمت راست نمايان شود. پس ابتدا يک صفحه براي آن ليست درست کنيد و براي اطلاعات هر گزينه هم يک صفحه بسازيد و آنها را در يک فريم بگذاريد.
به مجموعه صفحات گنجانده شده در يک صفحه frameset مي گويند و به هر صفحه از آن يک frame يا يک چارچوب گفته ميشود. در ساختار اصلي کدها، ديگر تگ <body> نوشته نميشود و جاي آن تگ <frameset></frameset> قرارميگيرد، البته هر صفحه يعني هر فريم را که کد نويسي ميکنيد مانند ساختار معمولي است و از تگ <body></body>بايد استفاده کنيد ولي هنگاميکه صفحات را در يک frameset ميگذاريد بايد در ساختار کد آن بجاي <body>از <frameset> استفاده کرد،
<html>
<head>
</head>
<frameset>
</frameset>
</html>
توجه داشته باشيد که براي ديدن source code فريمها بايد بر روي هر فريم کليک راست کرده و گزينه view source را انتخاب کنيد و براي مشاهده کدهاي يک frameset بايد از منو view مرورگر اقدام نماييد.
cols, rows
هر فريم ميتواند عمودي يا افقي در صفحه قرار گيرد يا يک frameset مخلوطي از چند فريم عمودي و افقي باشد که هر کدام از آنها توسط خصوصيتي در تگ<frameset> کنترل ميشوند. به طور مثال اگر دو فريم داشته باشيم و آنها را بخواهيم به صورت عمودي در صفحه قرار دهيم از خصوصيت cols=” “ استفاده ميکنيم و اين خصوصيت را برابر با درصد اشغال هر فريم قرار ميدهيم يعني اگر ما دو فريم داشته باشيم و بخواهيم که يکي از آنها %30 صفحه را اشغال کند پس ديگري %70 را اشغال خواهد کرد و تگ آن بدين صورت ميشود:
<frameset cols=”30%,70%”>
دقت کنيد که اين اعداد با علامت ويرگول از هم جدا ميشوند. اگرهم بخواهيد دو فريم افقي داشته باشيد از خصوصيت rows=” “ استفاده ميکنيد. اما براي قراردادن دو صفحه يا دوفريم درframeset بايد هر کدام از آنها را بطور جداگانه آدرس دهي کنيد و تگ آن براي هر کدام از فريمها به اين صورت است:
<frameset cols=”50%,50%”>
<frame src=”01.htm”>
<frame src=”index.html”>
</frameset>
آدرس دهي و نامگذاري
همانطور که ملاحظه ميفرماييد جلوي خصوصيت src=” “بايد آدرس صفحه را بنويسيد. خصوصيت ديگري هم هست که به غير ازخصوصيت src بايد به اين تگ اضافه شود و آن name=” “ است که براي نامگذاري هر فريم بکار ميرود. اين نامگذاري زماني براي ما مفيد است که هرگاه ما بخواهيم دريکي از فريمها لينک بگذاريم هنگاميکه روي لينک کليک ميشود بايد مشخص شود که اطلاعات آن لينک در کدام فريم نمايش داده شود، به طور مثال فريم سمت چپ داراي يکسري لينک است که اطلاعات هر کدام بايد در فريم سمت راست نمايش داده شود پس به لينکها بايد نام فريم مورد نظر را بدهيم تا مشخص شود که اطلاعات را در کدام فريم نشان دهند. اما جدا از نامگذاري هر فريم براي اينکار بايد به هر لينک خصوصيت target=” “ را اضافه کرد و آنرا برابر با نام منتخب هر فريم قرار داد.
<
frameset cols="30%,70%">
<frame name="left" src="htmlpages/01.html">
<frame name="right" src="htmlpages/index01.htm">
</frameset>
اگر هم يک لينک در فايل 01.html داشته باشيم و بخواهيم درindex01.htm نمايش داده شود، طبق گفته هاي بالا:
<a href="htmlpages/info.html" target="right"> info.html </a>
frame border
شما اگر يک frameset درست کرده باشيد متوجه يک کادر بين فريمهاي داخل آن شده ايد، براي برداشتن اين کادر ميتوانيد frameborder="no" و يا border=”0” رابه تگ <frameset> اضافه کنيد.
(http://pnu-club.com/examples/framesetborder.htm)
noresize
هنگاميکه frameset در مرورگر نمايش داده شود، بيننده سايت شما ميتواند سايز هر فريم را تغيير دهد يعني وقتي که نشانگر موس را روي لبه هر فريم ببرد ميتواند آنرا با drag کردن کم يا اضافه کند که براي جلوگيري از تغيير سايز هر فريم خصوصيت noresize رابه تگ <frame> بيافزاييد.
scrolling
خصوصيت ديگري هم هست که scroll bar هر فريم را کنترل ميکند، هر فريم داراي scroll ميباشد يعني ميتوانيد صفحه داخل فريم را به چپ وراست يا بالاوپايين حرکت دهيد که با خصوصيت scrolling=” “ کنترل ميشود و آنرا برابر با کلمات Yes,no,auto قرار دهيد.
noframes
بعضي از مرورگرها هستند که از اين عنصر پشتيباني نمي کنند و فريم ها را نشان نمي دهند، به همين دليل شما مجبور هستيد تا به کاربراني که از اين گونه مرورگرها استفاده مي کنند، اعلام کنيد که مرورگر آنها اين قابليت را ندارد. پس فراموش نکنيد که اين قطعه کد را هميشه به frameset اضافه کنيد:
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
نحوه ساخت iframe
در اين قسمت به يک مدل ديگري از فريم مي پردازيم که به آن Inline Frame يا iframe مي گويند. در اين مدل يک فريم با ابعاد مشخص داخل يک صفحه معمولي HTML قرار ميگيرد و مانند يک کادر در هر کجاي آن صفحه مي تواند باشد حتي در وسط . تگ کلي آن ،
<iframe src=”page.html”></iframe>
است که شما اين تگ را در هر قسمت از کد html مي توانيد بگذاريد و نيازي به تگ <frameset> نيست. کليه خصوصياتي را که براي فريم بکار مي رود براي iframe هم کاربرد دارد و فقط width=” “ و height=” “ هم به آن ميتوانيد اضافه کنيد تا ابعاد iframe را کنترل کنيد. فراموش نکنيد که از name=” “ استفاده کنيد تا نام آنرا براي ساختن لينک بکار بريد.
شما در يک صفحه مي توانيد چندين iframe داشته باشيد البته ناگفته نماند که اين عنصر در مرورگرهاي قديمي به غير از اينترنت اکسپلورر نمايش داده نمي شود
صدا و تصوير در وب
پيشرفت تکنولوژي در وب و نسخه هاي جديد مرورگرها که توانايي استفاده از مولتي مديا را در اختيار ما مي گذاشتن، انگيزه اي ايجاد شد تا صوت و تصوير هم در صفحات وب گنجانده شوند و سايتها را جذاب تر کنند. در اين صفحه راههاي اضافه کردن فايل صوتي به يک صفحه را مي آموزيد و در صفحه بعد افزودن فايلهاي تصويري را ياد خواهيد گرفت.
اهميت حجم فايل صوتي
فايلهاي صوتي يکي از سنگين ترين عناصر در وب از لحاظ حجم مي باشند که بايد در انتخاب آنها بيشتر دقت کنيد، چون هر چه فايل سنگين تر باشد دانلود شدن آن و همچنين صفحه وب کند تر و خسته کننده تر خواهد شد.
MIME
هنگاميکه يک فايل صوتي به صفحه اضافه شود، مرورگر به تنهايي قادر به پخش آن نمي باشد و بايد به کمک يک برنامه کاربردي ديگر اينکار را انجام دهد. مرورگرها توسط اطلاعاتي که از فايل دريافت مي کنند مي توانند تشخيص دهند که چه برنامه اي را بايد براي پخش آن فايل صدا بزنند که اين اطلاعات را MIME مي گويند.
MIME مخفف Multipurpose Internet Mail Extensions است.
زمانيکه مرورگر با يک MIME ناشناخته مواجه شود، پيغام خطاي “File Not Found” را در صفحه نمايش مي دهد.
فرمتهاي فايلهاي صوتي
WAV يکي از فرمتهاي صوتي که کيفيت بالايي هم دارد و البته حجم زيادي هم اشغال مي کند و در سيستم عامل ويندوز بکار مي رود. نوع MIME اين فرمت برابر است با audio/wav .
AU اين فرمت متعلق به سيستمهاي عامل UNIX, Linux است و خاصيت آن داشتن حجم کم و البته با کيفيت پايين تر، که نوع MIME اين فرمت برابر است با audio/basic .
AIFF اين فرمت هم متعلق به کامپيوترهاي Macintosh است با کيفيت بالا و حجم بسيار بالا. نوع MIME آن برابر است با audio/aiff .
MIDI اين فرمت با فرمتهاي ديگر صوتي تفاوتهايي دارد. در اين فرمت بجاي ذخيره شدن فرکانس صدا، آهنگ صدا يا همان نت هاي موسيقي را ذخيره و پخش مي کند. بزرگترين مزيت آن حجم بسيار پايين و عيب آن، پخش آهنگ بدون گفتار است. نوع MIME اين فرمت audio/midi است.
افزودن فايل صوتي به زمينه صفحه
با اضافه کردن تگ <bgsound> به سورس کد صفحه وب، مي توانيد آهنگ يا صدايي را در زمينه صفحه وارد کنيد تا هنگاميکه بيننده صفحه را باز مي کند آن فايل بدون نياز به برنامه کاربردي ديگري پخش شود. اين تگ در حال حاضر کاربردي ندارد چون فقط مرورگراينترنت اکسپلورر نسخه هاي 5.5 به پايين آنرا پشتيباني مي کنند. اين تگ داراي دو خصوصيت ، src براي آدرس دهي فايل صوتي و loop براي کنترل تکرار دفعات پخش مي باشد.
<bgsound src=”mymusic.mid” loop=”2”>
افزودن فايل صوتي بصورت لينک
يکي ديگر از راههاي اضافه کردن فايل صوتي به صفحه از طريق قرار دادن لينک و تگ <a> است که بيننده با کليک کردن بر روي آن لينک مي تواند هم آن فايل را بر روي هارد ديسک خود ذخيره کند و يا آنرا از همانجا باز کند. البته در مرورگراينترنت اکسپلورر نسخه 6.0 ابتدا پيغامي ظاهر مي شود که اگر دکمه Yes را بزنيد آن فايل توسط خود مرورگر پخش خواهد شد. در تگ لينک بايد از خصوصيت href براي آدرس دهي استفاده کنيد، فقط دقت کنيد که پسوندها را درست بنويسيد.
<a href=”musics/mysong.wav”> music file </a>
افزودن فايل صوتي از طريق object
يکي از بهترين راههايي که مي توان فايل صوتي را به صفحه اضافه کرد، از طريق تگ <object> است. يکي از مزايايي که اين تگ دارد اينست که، شما مي توانيد يک متني را بين تگ آغازين و پايان دهنده اضافه کنيد که اگر مرورگر نتوانست آن فايل را بشناسد، نوشته مذکور در صفحه نمايان شود. در اين تگ براي آدرس دهي از خصوصيت data و براي تعيين MIME آن فايل از خصوصيت type استفاده مي شود، همچنين از خصوصيت height, width براي کنترل طول و عرض لوگوي برنامه پخش کننده فايل استفاده کنيد که در صورت لزوم آنها را برابر با عدد صفر قرار دهيد تا لوگو در صفحه ظاهر نشود.
<
object data=”musics/sound.wav” MIME=”audio/wav”>
Your browser doesn’t support this audio format.
</object>
(http://pnu-club.com/examples/sound02.htm)
نکته: هنگاميکه صفحه داراي اين تگ را باز کنيد يک پيغام هشدار در مورد ActiveX ظاهر خواهد شد که براي اجراي فايل بايد دکمه Yes را بزنيد.
Embed file
تکنيک ديگر براي افزودن يک فايل مولتي مديا به صفحه از طريق تگ embed است. اين تگ استاندارد W3C نيست و در بيشتر مرورگرها اجرا نمي شود. از خصوصيت src براي آدرس دهي فايل و براي کنترل طول و عرض لوگوي برنامه کمکي از خصوصيت height, width مي توانيد استفاده کنيد. اين تگ داراي خصوصيات autostart و loop مي باشد که با کلمات false يا true مقدار دهي مي شوند.
<embed src="godfather.mid" autostart="false"
loop="false" height="40" width="150">
Streaming Audio
احتمالاً متوجه شديد که راههاي ذکر شده در بالا به درستي جواب نمي دهند و به خاطر مشکلات امنيتي ، مرورگرها فايلها را پخش نمي کنند. اما تکنيک ديگري هم هست که کليه مرورگرها از آن پشتيباني کرده و حتي با استفاده از آن مي توانيد فايلهاي سنگين را هم در صفحات بکار بريد بدون آنکه بيننده زمان زيادي را براي دانلود آنها صرف کند. اين تکنيک استفاده از روش Streaming Audio and Video است که در صفحه بعد به آن مي پردازيم.
اگرچه حجم فايلهاي صوتي زياد است، اما در مقايسه با حجم فايلهاي تصويري چندان قابل عرض نيستند چون فايلهاي تصويري بطور معمول مخلوطي از صدا و تصوير مي باشند، داراي حجم بسيار بالايي نيز هستند که بکار بردن آنها در وب سايت ها زياد معقولانه نيست مگر اينکه يک فيلم بسيار کوتاه چند ثانيه اي را بخواهيد در صفحه جاي دهيد که قرار دادن اين فايلها دقيقاً مانند فايلهاي صوتي است که در صفحه قبل توضيح آن آمده است.
اما در اين صفحه مي پردازيم به فرمتهاي فايلهاي تصويري و معرفي تکنولوژي که توسط آن بتوانيد فايلهاي صوتي و تصويري با حجم بالا را در وب سايت قرار دهيد.
فرمتهاي فايلهاي تصويري
MPEG اين فرمت مخفف کلمات Motion Picture Experts Group است که در بيشتر سيستمها قابل اجرا مي باشد. نوع MIME اين فرمت video/mpeg است.
AVI اين فرمت متعلق به سيستم عامل ويندوز مي باشد و نوع MIME آن برابر است با video/avi .
QuickTime (MOV) اين فرمت مخصوص سيستم هاي Macintosh مي باشد که اگر مرورگري در سيستمهاي ديگر Plug-in اين فرمت را داشته باشد آنرا پخش خواهد کرد و نوع MIME آن video/quicktime مي باشد.
Advanced Streaming Format (ASF) اين فرمت متعلق به شرکت مايکروسافت است که MIME آن video/asf مي باشد.
Streaming Audio and Video
اين يک تکنولوژي است که فايلها در هنگام دانلود شدن هم قابل پخش هستند، يعني هنگاميکه فايلهاي صوتي يا تصويري در حال دانلود شدن در سيستم هستند، در همان لحظه هم مي توانيد آنها را مشاهده کنيد يا به آنها گوش دهيد قبل از اينکه بطور کامل در سيستم ذخيره شوند.
همانطور که مي دانيد يک فايل صوتي يا تصويري سنگين ممکن است چندين ساعت طول بکشد تا دانلود شود، اما براي غلبه بر اين مشکل تکنولوژي streaming audio and video بوجود آمد و در پي آن برنامه هايي نظير RealAudio, QuickTime, Microsoft’s streaming format عرضه شد. اين فرمتها قادر به پخش فايل در هنگام دانلود شدن هستند، بدين ترتيب که مقداري از اينگونه فايلها ابتدا در محلي از حافظه بنام بافر Buffer ذخيره شده و از آنجا پخش مي شود. هنگاميکه آن مقدار در حال اجرا است، مقدار ديگري از فايل در بافر ذخيره و پخش مي شود که به همين ترتيب ادامه پيدا مي کند تا کل فايل بطور کامل دانلود شود. البته اين نوع فرمتها، برنامه کاربردي مخصوص خود را مي خواهند و معروفترين برنامه ها RealOne.Player است که اين محصول فرمت RealAudio يعني ra براي فايل صوتي و RealVideo براي پخش فايلهاي تصويري را پشتيباني مي کند. فرمتهاي ديگر هم مانند ASF متعلق به شرکت مايکروسافت و QuickTime براي سيستمهاي Macintosh از اين تکنولوژي استفاده مي کنند.
شما مي توانيد از برنامه هاي ويرايشگر صوتي مانند Sound Forge و تصويري مانند Adobe Premiere براي تبديل به اين تکنولوژي استفاده کنيد.
اگر مايل هستيد از فرمتهاي Real Audio, Real Video در سايت خود استفاده کنيد بايد به چند نکته توجه کنيد، ابتدا مطمئن شويد که سرور ميزبان سايت شما از اين تکنيک پشتيباني مي کند و در آن يکسري تنظيمات بايد انجام شود، مثلاً براي فرمت Real Audio دو نوع MIME بايد در سرور تعريف شود:
audio/x-pn-realaudio (files with a .ra or .ram file extension)
audio/x-pn-realaudio-plugin (files with a .rpm file extension)
سپس بايد يک برنامه براي تبديل فرمتهاي مختلف به اين فرمت و يک برنامه براي پخش اين نوع فرمت در سيستم خود داشته باشيد که مي توانيد آنها را از وب سايت www.real.com (http://www.real.com/) فراهم کنيد و در آخر هم يک فايل بنام متا فايل Meta File بايد درست کنيد براي ذخيره واستفاده از بافر، بدين ترتيب که، ابتدا يک برنامه ويرايشگر متن مانند Notepad را باز کرده وداخل آن آدرس فايل بر روي سايت خود را مي نويسيد، بطور مثال اگر نام فايل realtest.ra است و در دايرکتوري realaudiofile قرار دارد بايد خط زير را وارد کنيد بدون هيچ چيز اضافه،
http://www.yourdomain.com/realaudiofile/realtest.ra
سپس اين فايل متني را با نام دلخواه و با پسوند .ram ذخيره کرده و همراه با فايل صوتي مورد نظر به سرور خود منتقل کنيد. فقط دقت کنيد که براي فراخواني آن فايل بايد يک لينک بسازيد که متا فايل مربوطه را صدا کند نه خود فايل صوتي يا تصويري.
نکته: بيننده سايت بايد برنامه مخصوص پخش اين گونه فرمت را در سيستم خود داشته باشد. اگر MIME به درستي تعريف نشده باشد، فقط متن داخل متا فايل نمايش داده خواهد شد و دقت کنيد تا هنگام منتقل کردن فايلهاي صوتي و تصويري توسط برنامه FTP اگر تنظيمات را به صورت دستي انجام ميدهيد حتماً از گزينه Binary استفاده کنيد.
تگهای قسمت Head
<!doctype>
در اين بخش ميخواهم در مورد تگهاي قسمت <head> برايتان توضيح دهم . همانطور که ميدانيد تگهاي Html را به دو بخش اصلي تقسيم کرديم ، يکي قسمت سر يا همان head ديگري قسمت بدنه يا body که هر دو مابين دو تگ اصلي<html></html> نوشته ميشوند، اما يک تگ هم وجود دارد که خارج از اين قانون عمل ميکند و در اولين خط شروع کدنويسي بايد آنرا بنويسيم يعني قبل از تگ آغاز کننده <html>و آن DTD يک صفحه وب ميباشد که مخفف Document Type Definition است و کار آن معرفي نوع تگها خصوصيات آنها و قوانيني که بايد در آن صفحه وب بکار برده شود که بطور خلاصه در تگ مربوط به آن توصيف ميشود. تگ مشخصه DTD ، <!doctype> ميباشد و مانند بقيه تگها داراي خصوصياتي هست، البته اين تگ اختياري است چون بعضي از مرورگرها بدون آن هم صفحه را نمايش ميدهند ولي بهتر است که نوشته شود.
هر نسخه از HTML يک DTD مخصوص به خود را دارد و نسخه هاي معتبر HTML عبارتند از: 2, 3.2, 4 و نسخه جديد آن Html 4.01 ميباشد و اگر از کدهاي XHTML هم استفاده ميکنيد ، آنرا هم بايد مشخص کنيد. همانطور که در بخشهاي قبل گفتم اعلام و به رسميت شناختن تگهاو نسخه هاي HTML , XHTML به عهده W3C (http://www.w3.org/) ميباشد .
DTD براي HTML 4.0
<!DOCTYPE html public “-//w3c//DTD HTML 4.0//en”>
و براي XHTML 1.0
<!DOCTYPE xhtml public “-//w3c//DTD XHTML 1.0 strict//en”>
بعد از اين تگ روال معمول کدنويسي را انجام ميدهيم. حالا ميپردازيم به تگهاي مربوط به قسمت سر يا همان head .
<head></head>
مابين اين دو تگ اطلاعات مربوط به همان صفحه وارد ميشود که در مرورگر نشان داده نميشود و فقط اسم صفحه است که در نوار عنوان مرورگر نمايش داده ميشود. اين اطلاعات بيشتر براي سايتهاي جستجوگر مانند گوگل مفيد ميباشند که در بخش اين سايتها بيشتر توضيح خواهم داد.
تگهاي لازم براي اين قسمت به شرح زير ميباشند:
<title>, <base>, <meta>, <link>, <script>, <style>
<title></title>
بين اين دو تگ هر چي نوشته شود در نوار عنوان مرورگر title bar نمايان خواهد شد. دقت داشته باشيد که از اسامي کوتاه استفاده کنيد چون جمله طولاني را نصفه نشان ميدهد و همچنين اگر فارسي بنويسيد در سيستمهايي که قابليت فارسي ندارند به صورت علامت سوال نمايان ميشود.
<base>
در مواردي که بخواهيد آدرس اصلي وب سايت را همان ابتدا معرفي کنيد ، از اين تگ استفاده ميکنيد. خاصيت اين تگ اينست که در هنگام درست کردن لينکهاي داخلي وب سايت ديگر نيازي به نوشتن آدرس کامل نيست و فقط ميتوانيد در خصوصيت href=” “ لينکها، اسم دايرکتوري در صورت نياز و اسم خود فايل را بنويسيد.
<base href="http://www.sitename.com">
دقت کنيد که نوشتن پروتکل http اجباري است.
<meta>
متا تگها اطلاعات مربوط به موتورهاي جستجوگر را کنترل ميکنند. در اين تگها هر نوع اطلاعات که براي جستجو نياز باشد را وارد ميکنيد ، مانند کلمات کليدي يا نام سازنده سايت و يا تاريخ راه اندازي و از اين قبيل که در بخش سايتهاي جستجوگر بيشتر توضيح خواهم داد. خصوصياتي را که در اين تگ ميتوانيد بکار بريد،
http-equiv=” “, name=” “ , content=” “
براي معرفي کلمات کليدي سايت بايد خصوصيت http-equiv=”keyword” قرار دهيم و کلمات مورد نظر را در خصوصيت content=” “ وارد کنيم،
<meta http-equiv=”keyword” content=”html, web, amoozesh, amouzesh”>
همچنين ميتوانيد نوع رمزگذاري encoding مرورگر را در اين قسمت معين کنيد که براي بکار بردن حروف فارسي بايد از utf-8 استفاده کنيد که در قسمت فارسي نويسي توضيح خواهم داد.
<meta http-equiv=”content-type” content=”text/html;charset=utf-8”>
اين تگ به مرورگر ميفهماند که بايد از حروف و علامتهاي يونيکد براي نمايش صفحه استفاده کند. براي وارد کردن اطلاعات ديگر هم مانند زير عمل ميکنيد:
<meta name=”author” content=”your-name”>
اگر شما نميخواهيد که صفحه اي در هارد ديسک کاربر سايت شما ذخيره شود تا بتوان آنرا بصورت offline هم ببينند، از اين تگ بايد استفاده کنيد:
<meta name=”pragma” content=”no-cache”>
يا اينکه آن صفحه هر لحظه اطلاعاتش عوض ميشود و ميخواهيد تا بيننده سريع آن اطلاعات را ببيند، از خاصيت refresh مرورگر استفاده کرده و اين تگ را اضافه ميکنيد:
<meta http-equiv=”refresh” content=”5”>
که آن عدد زمان بر حسب ثانيه است. اگر ميخواهيد که بعد زمان معين همان صفحه به يک صفحه ديگر يا يک وب سايت ديگر هدايت شود خصوصيت زير را اضافه کنيد
<meta http-equiv=”refresh” content=”5;url=http://www.sitename.com/page01.htm”>
<link>
اين تگ براي زماني است که ما بخواهيم از اطلاعات يک فايل مانند style sheet در آن صفحه استفاده کنيم،
<link rel=”stylesheet” href=”stylesheets_folder/menu.css”>
<script>
کدهايي مانند javascript را در اين تگ کنترل ميکنيم
<style>
تگ مشخصه Style sheet ميباشد که در بخش مربوطه توضيح داده شده است.
خصوصيات تگ body
همانطور که ميدانيد هر عنصر HTML که بخواهيد در صفحه وب نمايش داده شود بايد ما بين تگ body يعني <body></body> قرار گيرد. در کليه فايلهاي HTML اين تگ وجود دارد مگر اينکه بخواهيد از عنصر فريم استفاده کنيد که در اينصورت بايد <frameset> را بکار بريد.
اما خود تگ body جدا از اهميتي که در فايلهاي HTML دارد، خود داراي خصوصياتي مي باشد که در نمايش صفحه موثر است که به توضيح آنها خواهيم پرداخت.
bgcolor اين خصوصيت وظيفه کنترل رنگ زمينه يک صفحه را به عهده دارد که مي توانيد از کد هگز رنگها ،
<body bgcolor=”#ccff00”>
و يا نام رنگ را بکار بريد، مانند:
<body bgcolor=”black”>
نکته: دقت کنيد که رنگ زمينه با رنگ فونتهاي داخل صفحه يکسان نباشد، چون در اين حالت متن در صفحه محو خواهد شد.
background توسط اين خصوصيت بجاي رنگ مي توانيد از عکس هم در زمينه صفحه استفاده کنيد، فقط کافيست که آنرا برابر با آدرس عکس مورد نظر قرار دهيد،
<body background=”images/filename.gif”>
توجه داشته باشيد که حجم عکس در سنگيني صفحه و پايين آمدن سرعت تکميل شدن آن موثر است. هنگاميکه از اين خصوصيت استفاده مي کنيد آن عکس نسبت به اندازه اي که دارد در صفحه تکرار مي شود تا فضاي آنرا بپوشاند که با استفاده از StyleSheet تکرار آنرا مي توانيد کنترل کنيد.
bgproperties هنگاميکه عکسي به زمينه اضافه مي شود همراه با ديگر عناصر صفحه مانند عنصر متن scroll مي شود يعني به بالا و پايين يا چپ و راست حرکت مي کند که با بکار گرفتن اين خصوصيت و مقدار دادن آن با fixed عکس در زمينه ثابت مي ماند و عناصر بر روي آن حرکت مي کنند.
<body background=”../images/bg.jpg” bgproperties=”fixed”>
لازم بذکر است که اين خصوصيت در حال حاضر فقط در مرورگرهاي اينترنت اکسپلورر و اپرا قابل اجراست.
topmargin توسط اين خصوصيت حاشيه بالاي صفحه کنترل مي شود که مقدار آن عدد در مقياس پيکسل مي باشد.
leftmargin حاشيه سمت چپ صفحه را کنترل مي کند که اگر نيازي به حاشيه نداريد آنرا برابر با عدد صفر قرار دهيد.
<body topmargin=”0” leftmargin=”0”>
text اگر بخواهيد متن يک صفحه بطور کل يک رنگ واحد داشته باشد و خصوصيت رنگ را مرتب در تگها تکرار نکنيد ، مي توانيد اين خصوصيت را به تگ body اضافه کنيد و آنرا برابر با نام رنگ يا کد هگز آن قرار دهيد.
<body text=”#99ccff”>
dir اين خصوصيت براي تعيين جهت نوشتن حروف است که از راست به چپ باشد مانند فارسي که در اينصورت بايد برابر با مقدار rtl و چپ به راست مانند حروف انگليسي که برابر با ltr مي باشد. توجه داشته باشيد که اگر اين خصوصيت را در تگ body بکار بريد و آنرا برابر rtl قرار دهيد محل scroll صفحه مرورگر از سمت راست به چپ منتقل مي شود.
lang اين خصوصيت تعيين زبان بکار گرفته شده براي متن آن صفحه را به عهده دارد که بصورت قراردادي دو حرف از اسم آن زبان را بايد بنويسيد، مثلاً براي زبان فارسي fa و براي انگليسي en را مي نويسيد.
<body lang=”fa” dir=”rtl”>
link در حالت عادي کليه لينکهاي داخل يک صفحه برنگ آبي هستند ولي اگر بخواهيد رنگ آنها را تغيير دهيد اين خصوصيت را بکار مي بريد و مانند هميشه يا نام رنگ و يا کد هگز آنرا مي نويسيد. البته خصوصيت ديگري هم در اين ارتباط هست که بخواهيد رنگ لينک فعال يا همان لينکي که در حال کليک کردن بر روي آن هستيد تغيير کند بايد از خصوصيت alink و اگر رنگ لينکهاي مشاهده شده را بخواهيد تغيير دهيد از خصوصيت vlink استفاده مي کنيد.
<body link=”#990000” alink=”#009900” vlink=”#000099”>
Html 4.01 و تفاوتهاي آن با نسخه 4.0
HTML 4.01 نسخه اصلاح شده 4.0 ميباشد که براي هماهنگي با نسخه جديد يعنيXHTML و نسل بعدي زبان وب که XML باشد، در وب منتشر شد. اين نسخه با تغييرات کمي عرضه شد اما شما مجبور هستيد که اين قوانين را رعايت کنيد اگر ميخواهيد وب سايت شما هماهنگي بيشتري با نسخه جديد داشته باشد. بعضي از اين تغييرات را در اين بخش برايتان ميگويم ولي نکات اساسي در اين زمينه را در بخش XHTML خواهم گفت. بهتر است که شما بعد از فراگيري مجموعه HTML 4 قوانين بکار برده شده در XHTML را رعايت کنيد تا در آينده وب سايت شما به مشکل جدي برنخورد.استفاده يکسري تگها از طرف انجمن W3C ديگر توصيه نميشود وحتي بعضي از آنها ممنوع شدند.
براي شروع کدنويسي در HTML 4.01 اولين چيزيکه بايد رعايت کنيد DTD آن فايل است که در حال حاضر مرورگر ها بدون آن هم صفحه را نمايش ميدهند ولي در آينده ممکن است اينچنين نباشد. همانطور که ميدانيد DTD بايد قبل ازتگ <HTML> نوشته شود. براي اين نسخه سه مدل در نظر گرفته شده است که در مدل اول صفحه شما فقط از تگهاي استاندارد و قابل قبول استفاده خواهد کرد:
<!DOCTYPE HTML PUBLIC
‘’-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
اگر در آن صفحه تگهاي از رده خارج هم بکار برده ايد بايد از اين مدل DTD استفاده کنيد:
<!DOCTYPE HTML PUBLIC
“-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
همچنين اگر از عنصر Frame استفاده ميکنيد اين مدل را بکار بريد:
<!DOCTYPE HTML PUBLIC
“-//W3C//DTD HTML 4.01 Frameset//EN”
“http://www.w3.org/TR/html4/frameset.dtd”>
بعد از مشخص کردن DTD آن صفحه بايد دقت کنيد که در اين نسخه بايد کليه تگها ، پايان دهنده داشته باشند. بعضي از تگها يا تگ پايان دهنده نداشتند و يا نوشتن آنها اجباري نبود مانند <img>,<p> . اما همه بايد بسته شوند و آنهاييکه تگ پايان دهنده نداشتند، در همان تگ و قبل از بستن تگ با علامت > بايد علامت slash يعني/ را بگذارند. مانند:
<img src=”…/images/mypic.gif” />
اين قبيل تگها را بدين صورت بکار بريد:
<meta/>, <br/>, <blockquote/>, <hr/>, <basefont/>, <Q/>, <li/>, <dt/>, <dd/>, <img/>, <area/>, <frame/>, <input/>, <param/>, <bgsound/>
نکته: اگر تگ <a> در حالت Anchor بود يعني حالتيکه لينک به يکي از نقاط داخل همان صفحه پيوند داده خواهد شد، بايد آنرا بصورت <a/> بنويسيد.
اينها قوانيني بودند که در اين نسخه تغيير کردند تا اين نسخه با XHTML سازگار شود.
آموزش Xhtml
زبان XHTML که مخفف EXtensible HyperText Markup Language در تاریخ 26 ژانویه سال 2000 منتشر شد و به قول بعضيها همان HTML 5 میباشد که در واقع اینچنین نیست. این زبان نسل جدید زبان وب ميباشد که داراي یکسري اصول و قوانین خاص است تا کمبودهايHTML را در مورد دستگاههاي کوچک الکترونیکي که به وب هم متصل ميشوند مانند تلفنهاي همراه، را جبران کند.
مدتي است که وب آماده معرفي زبان آينده خود يعني XML است که XHTML اين وظيفه را بعهده دارد. در اين نسخه کدهايHTML بايد در DTD نوشته شوند. هر مرورگر وب ، داخل خود يک نوع DTD دارد و به همين دليل است که يکسري از دستورات نسخه هاي مختلف HTML در بعضي از مرورگرها نمايش داده نميشوند. از اين به بعد شما بايد دستورات HTML را در DTD خاص خود بکار بريد، چون انجمن W3C (http://pnu-club.com/redirector.php?url=http%3A%2F%2Fwww.w3.org%2F) ميخواهد يک استاندارد را معين کند تا هماهنگي لازم بين زبان وب و کليه User-agent ها برقرار شود. User-agent برنامه هاي تحت وب مانند مرورگرها را گويند.
W3C پيشنهاد داده که HTML بايد يک برنامه کاربردي تحت XML باشد تا برنامه نويسان وب مجبور به رعايت استاندارد آن شوند.
با قبول کردن DTD برايXHTML و نوشتن آن ، بايد اصول و قوانين اين نسخه را هم رعايت کنيد البته اگر ميخواهيد صفحات شما سازگاري بيشتري با نسل آينده وب داشته باشد.
پس ابتدا از DTD براي اين نسخه شروع ميکنيم . همانطور که ميدانيد DTD براي نسخه هاي HTML لازم نبود و بدون آن هم صفحات بخوبي نمايش داده ميشدند ولي براي XHTML نوشتن و تعيين آن اجباري است. در حال حاضر سه نوع DTD براي حالتهاي مختلف وجود دارد:
حالت اول براي صفحه اي است که فقط از دستورات صحيح XHTML استفاده شده و براي مرورگرهايي است که از CSS پشتيباني ميکنند،
<! DOCTYPE HTML PUBLIC
“-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
حالت بعدي براي صفحه اي است که مخلوطي از کدهاي HTML و XHTML باشد و مرورگرهاييکه از CSS پشتيباني نميکنند هم آنرا نمايش دهند،
<! DOCTYPE HTML PUBLIC
“-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
و حالت آخر هم براي استفاده عنصر فريم Frame در صفحه است،
<! DOCTYPE HTML PUBLIC
“-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
فراموش نکنيد که نوشتن يکي از آنها اجباري است.
حالا نکاتي را که بايد در اين نسخه رعايت کنيد:
نوشتن تگهاي</head></body> که در HTML اجباري نبود در XHTML اجباري است.
وجود تگهاي پايان دهنده اجباري است مانند: <p>….</p>, <hr/>, <br/>
کليه تگها و خصوصيات آنها بايد بصورت حروف کوچک انگليسي نوشته شود. مانند: <body bgcolor=”#ffcc45”>
مقادير خصوصيات در تگها بايد بين دو علامت “…” قرار گيرند.
ترتيب قرار گرفتن تگها داخل هم بايد رعايت شود،
<b><i> TEXT </b></i> روش غلط
<b><i> TEXT </i></b> روش صحيح
بعضي از خصوصيات در HTML نياز به مقداردهي نداشتند اما در XHTML آنها را بايد مقداردهي کنيم،
<input type=”radio” checked> روش غلط
<input type=”radio” checked=”checked”> xhtml روش صحيح در
در تگ <pre> فقط از متن بايد استفاده کنيد و داخل آن از تگهاي ديگر نميتوانيد استفاده کنيد.
يک فرم را داخل فرم ديگر نبايد بکار بريد.
دستورات فايل CSS بايد به صورت حروف کوچک نوشته شوند و بهتر است که براي Style sheet از فايل خارجي استفاده کنيد.
کليه خصوصياتي را که ميتوان با style sheet کنترل کرد از خصوصيات HTML آنها بهتر است استفاده نشود.
دستورات زبان جاوااسکريپت هم بهتر است در فايل خارجي باشد و توسط تگ <link> فراخواني شوند ولي اگر ميخواهيد داخل XHTML DTD از آنها استفاده کنيد بايد مانند زير عمل کنيد:
<script language=”JavaScript” type=”text/javascript”>
<![CDATA [
document.write(“ Hi Friends “);
] ]>
</script>
ديگر از تگ <!-- ….. --> براي بيان نظريه و توضيح نميتوانيد استفاده کنيد. در صورت نياز مانند زير عمل شود،
<[CDATA […comment…] ]>
همانطور که ميبينيد يکسري محدوديتهايي هست که در HTML نبود و سادگي زبان HTML که باعث محبوبيت فراوان آن شده در نسل جديد دارد از بين ميرود ولي در عوض به گفته W3C دو خاصيت بسيار مهم در نسخه جديد زبان وب وجود دارد، Extensibility و Portability .
Cascading Style Sheet
آموزش استایل شیت
استایل شیت ها یکی از مفید ترین عناصر وب میباشند که یکی از مزیتهای آن ساخت یک فایل و الگوی مشترک و استفاده آن در کلیه صفحات سایت می باشد. همین امر که از تکرار یک سری کد جلوگیری میکند باعث محبوبیت این عنصر در نزد طراحان وب شده است.
با استایل شیت چه کارهایی میتوانید انجام دهید؟
با این عنصر شما میتوانید مدل، اندازه، رنگ و نوع آرایش متن ، رنگ زمینه و حاشیه صفحات و جدولها ، تنظیمات لیستها و همچنین عکسها را کنترل کنید.
تعیین الگو و style
هر style باید برای یک تگ خاص تعریف شود . به محتوای داخل تگی که میخواهیم یک style نسبت دهیم selector یا انتخاب کننده میگویند که الگوی تعریف شده در تگ آغاز کننده یک عنصر تا تگ پایان دهنده آن تاثیر خواهد داشت.
برای تعیین و تعریف یک الگو ابتدا باید selector را مشخص و بنویسیم مانند h1 سپس خصوصیات و مقادیر آنها را بین دو علامت { } بگذاریم که طرز نوشتن خصوصیت و مقدار آن بین { } به این ترتیب میباشد:
ابتدا خصوصیت را نوشته سپس علامت : میگذاریم و بعد مقدار مشخصه آنرا مینویسیم ،
h1 { color:green }
اگر بخواهیم چند خصوصیت را به یک selector نسبت دهیم ، بعد از هر کدام یک ; میگذاریم،
h1 { color:green; text-align:center }
روشهای تعریف الگو و style
Style ها را به سه روش میتوان تعریف کرد:
روش اول: به عنوان یک الگوی خارجی که اطلاعات در یک فایل نوشته میشود و با پسوند .css ذخیره میشود که در تگ <link> داخل قسمت head آدرس دهی و فراخوانده میشود.
روش دوم: style را میتوانیم در قسمت head نوشته و جاسازی کنیم که با تگهای<style></style> مشخص میشوند.
روش سوم: با قرار دادن style به عنوان خصوصیت در یک تگ و مقدار دهی آن. مانند تگ زیر:
<div style=”color:green”>
نکته: اگر برای یک selector به چند روش style تعیین شود، آن الگویی که به تگ نزدیکتر است اجرا خواهد شد، پس طبق این اصل روش سوم نسبت به بقیه مؤثرتر است. در ضمن هیچ محدودیتی در تعیین selector ها ویا خصوصیات آنها نیست. به مثال زیر توجه کنید:
<style>
body { color:yellow; background-color:red }
h1,h2, h3, p { color:green }
</style>
تعریف الگو از طریق class
گاهی اوقات یک style به روشهای اول یا دوم تعریف میشود، اما شما نمیخواهید که آن الگو در همه جا اعمال شود، پس میایید یک اسم واحد برایselector انتخاب میکنید ، بدین ترتیب که بلافاصله بعد از selector یک نقطه میگذارید و اسمی را مینویسید. پس از این کار در هر تگی که نیاز به آن الگو هست خصوصیت class=” “ را مینویسیم و برابر با آن اسم قرار میدهیم،
<head>
<style>
p.name { color:green }
</style>
</head>
<body>
<p class=”name”>……..</p>
</body>
فراخوانی فایل css در تگ <link>
ارزش واقعی style sheet زمانی به چشم میاید که یکبار آنرا تعریف کنید و در تمام صفحات از آن بهره ببرید. برای این منظور شما فقط از طریق روش اول میتوانید اینکار را انجام دهید، بدین ترتیب که style ها را در برنامه ویرایشگر متن مانند notepad مینویسید و سپس آن فایل را با پسوند .css ذخیره کرده و در دایرکتوری اصلی وب سایتتان قرار میدهید. css مخفف Cascading Style Sheet است.
نکته: دراین روش نیازی به نوشتن تگهای<style></style> نیست و فقط selector ها و خصوصیات را مینویسید. در صورت رعایت نکردن این موضوع الگوهای تعریف شده در آن فایل در صفحات اعمال نخواهند شد.
پس از ذخیره فایل style sheet میتوانید برای هر صفحه که میخواهید آنرا فراخوانی کنید، برای انجام این عمل باید تگ <link> را در قسمت head قرار دهید و سه خصوصیت مربوط به آنرا وارد کنید. خصوصیت rel=” “ است که برابر با کلمه stylesheet قرار میدهید و سپس type=” " وبا text/css مقداردهی میشود و در آخر با خصوصیت href=” “ فایل را آدرس دهی میکنید،
<link rel=”stylesheet” type=”text/css” href=”آدرس فایل “>
این تگ نیازی به پایان دهنده ندارد.
Powered by vBulletin™ Version 4.2.2 Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.