nx دارای 67 صفحه می باشد و دارای تنظیمات در microsoft word می باشد و آماده پرینت یا چاپ است
فایل ورد nx کاملا فرمت بندی و تنظیم شده در استاندارد دانشگاه و مراکز دولتی می باشد.
این پروژه توسط مرکز nx2 آماده و تنظیم شده است
توجه : در صورت مشاهده بهم ريختگي احتمالي در متون زير ،دليل ان کپي کردن اين مطالب از داخل فایل ورد مي باشد و در فايل اصلي nx،به هيچ وجه بهم ريختگي وجود ندارد
بخشی از متن nx :
کارگاه آموزشی طراحی صفحات وب
وب 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 : زبان عناصر تشکیل دهندهHTMLبرای شروع کدنویسی در HTML 4.01 اولین چیزی که باید رعایت کنید DTD آن فایل است که در حال حاضر مرورگر ها بدون آن هم صفحه را نمایش میدهند ولی در آینده ممکن است اینچنین نباشد. همانطور که میدانید DTD باید قبل ازتگ <HTML> نوشته شود. برای این نسخه سه مدل در نظر گرفته شده است :
حالت اول برای صفحه ای است که فقط از دستورات صحیح 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”>فراموش نکنید که نوشتن یکی از آنها اجباری است. HTMLزبان وب میباشد که دارای عناصر( elements ) گوناگونی است که بر روی هم تشکیل یک صفحه از سایت را میدهند. این عناصر عبارتند از:( texts & lists ) متنها و لیست ها : نوشته های داخل یک صفحه را در برمیگیرد. ( images ) عکسها : عکس های داخل یک صفحه که زیبایی خاصی به وب سایتها می بخشند(tables) جدولها : جدولها بهترین عنصر برای سازمان دهی و مرتب کردن اطلاعات ما هستند که نقش اساسی در طراحی یک سابت دارند.((forms فرمها : عناصری که بیننده سایت به کمک آنها می تواند اطلاعاتی را وارد کرده تا ذخیره شده یا فرستاده شود.( (hyperlinks نقطه پیوند : البته این معنی اصلی لغت نمی باشد و این عناصر، نقطه پیوند و ارتباط بین دو صفحه از یک سایت یا دو وب سایت متفاوت می باشد. مانند :www.yahoo.com( frames ) چارچوبها : فریمها یا چارچوبها تنها عناصری هستند که با استفاده از آنها ما می توانیم چند صفحه اینترنتی را در یک صفحه جای دهیم. مانند ( 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 اعلام می نماید. در حال حاضر آخرین نسخه html، نسخه html 4.01 میباشد و بعد از آن نسخه های Xhtml به وب معرفی شده است.
هدف از ساخت وب سایتقبل از هر کاری شما باید هدف مشخصی داشته باشید تا مصمم تر آن را دنبال کنید، پس برای ساختن یک وب سایت هم هدف از ساخت آنرا مشخص کنید به طور مثال موضوع آن چیست یا چه طرحی می خواهید داشته باشه با چه تعداد صفحه. بد نیست که نوع مخاطبین و بیننده ها را هم مشخص کنید که چه کسانی قرار است از سایت شما استفاده کنند. شما می توانید در ابتدا از یک سایت شخصی شروع کنید، فکر کنم با پیشرفت تکنولوژی کامپیوتر و اینترنت در آینده نزدیک هر کسی مانند شناسنامه باید یک سایت برای معرفی خود داشته باشه. همیشه سعی کنید تا مطالب را متناسب با مضمون سایت انتخاب کنید و در هر قسمت یک هدف را دنبال کنید که بیننده گیج و فراری نشود. اگر سایت شما شخصی است و در آن خاطرات ، عکسهای خود یا دوستانتان را گذاشته اید پس دیگرنباید تبلیغ محصولات تولیدی را اضافه کنید یا بالعکس.
کجا و چگونه سایت را راه اندازی کنیدابتدا باید یک اسم مناسب برای سایت انتخاب کنید که به این اسم domain می گویند، اسم یک وب سایت از سه قسمت تشکیل می شود: www که مخفف World Wide Web میباشد، اسم منتخب شما یا همان Domain و در آخر پسوندهای مشخص مانند:.com, .net, .org, .infoپس از انتخاب اسم که باید یک هماهنگی با مطالب سایت داشته باشد، نوبت به ثبت آن میرسد که شما مجبورهستید با یک شرکت خدمات اینترنت قرار داد ببندید، برای ثبت اسم و اجاره فضا تا اطلاعات شما را در اینترنت به معرض نمایش بگذارند. بعد از اینکه تنظیمات اولیه انجام شد، شما می توانید با استفاده از سرویسهایی مانند FTP که مخفف File Transfer Protocol میباشد اطلاعات سایت را حذف ، اضافه یا تغییر دهید که در مورد این سرویس در بخش دیگری توضیح خواهم داد. البته سابتهایی هستند که شما میتوانید به طور رایگان سایت خود را راه اندازی کنید اما معایبی هم دارند که یکی از آنها پخش تبلیغات در صفحات شما میباشد و دیگر اینکه امکانات محدود آنها است ولی برای شروع کار و آشنایی با نصب و راه اندازی یک وب سایت بسیار مناسب میباشند. اهمیت طراحی وب سایتیک وب سایت موفق در مرحله طراحی جان می گیرد چون چند چیز مهم در این قسمت مشخص میشود مانند، قالب بندی، رنگ، محتوا ومدیریت اطلاعات سایت. اگر ما درست کردن وب سایت را به ساختن یک خانه تشبیه کنیم، میبینید که انسان منطقی خانه را بدون نقشه و طرح نمی سازد، پس بیایید به این قسمت اهمیت بیشتری بدهیم تا در پایان کار احساس رضایت بکنیم. در ساخت یک خانه نکات مهم دیگری هم هست، ظاهر و نمای آن، مواد ومصالح که قرار است بکار برده شود، در ضمن به راحتی کسانی که میخواهند از آن استفاده کنند هم باید فکر کرد. پس شما هم این نکات را مد نظر داشته باشید که ظاهر صفحات چه شکلی داشته باشد از چه رنگهایی استفاده کنید و چه مطالبی را بکار برید تا مخاطبین را مجذوب کرده وهمچنین بتوانند به کلیه قسمتهای سایت دسترسی داشته باشند در هربخشی که هستند. زمان بیشتری را صرف این قسمت کنید تا نیازی به تغییرات اساسی در آینده نداشته باشید. برای یادگیری 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 تفاوت کمی با نسخه اصلی خود یعنی 40 دارد اما در عوض هماهنگی بیشتری با نسل جدید زبان وب یعنی 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 وارد کنید. سپس در پایین پنجره باز شده در قسمت File Name اسم فایل را بنام Firstpage وارد کنید و دقت کنید تا در آخر این اسم یک نقطه بگذارید و پسوند html را بنویسید و دکمه Save را بزنید تا فایل متنی ما بصورت یک فایل html ذخیره شود. دقت کنید اگر میخواهید فایل شما در سیستم عامل DOS هم باز شود باید پسوند .htm را در آخر اسم وارد کنید. حالا به سراغ فایل ذخیره شده میرویم، اگر در سیستم عامل ویندوز اینکار را انجام داده اید، آن فایل باید آیکون مرورگر اینترنت اکسپلورر را داشته باشد، روی فایل کلیک کنید تا باز شود، همانطور که مشاهده میکنید مرورگر وب شما باز میشود تا اطلاعات آن صفحه را نمایش دهد. اگر داخل صفحه فقط نوشتهایی که بین تگ body وارد کرده اید را می بینید پس باید به شما تبریک بگویم و از این به بعد باید به خودتان بیشتر توجه کنید. اگر هم غیر از آن می بینید یا چیزی مشاهده نمیکنید، مراحل گفته شده را دوباره انجام دهید. همانطور که دربخشهای قبل گفته شد، هرمتنی را بین تگهای <body>وارد کنید بعد از ذخیره آن فایل با پسوند.html یا.htm و هنگام نمایش فایل در مرورگر آنرا مشاهده خواهید کرد که متن مورد نظر با تنظیمات مرورگر نمایان خواهد شد. ولی ما با استفاده از تگهای این عنصر کنترل نمایش نوشته ها را بدست خود میگیریم تا همان چیزی که مورد نظر ما است نشان داده شوند. تگهای متن را میتوان به دو دسته تقسیم کرد، تگهای اولیه که بیشتر وظیفه خط بندی، پاراگراف بندی و یا تنظیمات در ارتباط با متن را به عهده دارند و تگهایی که شکل و آرایش حروف را کنترل میکنند که به آنها formatting می گویند. بهتر است که Notepad یا هر برنامه ویرایشگر متن را که دارید باز کنید و هر کدام از این تگها را امتحان کنید تا کاربرد آنها در ذهن شما جای گیرد.
<br> برای خط بندی از این تگ استفاده میشود و متن بعد از آن به یک خط پایین تر منتقل میشود که نیازی به تگ پایان دهنده هم ندارد. <p></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 که تعریف شود همان را بکار میبرد. در بخش Style Sheets درست کردن الگوها را توضیح خواهم داد.
<span></span> این تگ هم مانند تگ بالا میباشد با این تفاوت که مخصوص یک کلمه یا حتی یک حرف میباشد چون مانند div متن را از بقیه جدا نمیکند و دارای خصوصیت style=” ” میباشد که بر فرض هنگام قرار گرفتن موس روی یک کلمه زمینه آن رنگی شود. <marquee></marquee> متن بین این دو تگ متحرک خواهد شد و دارای خصوصیات زیر میباشد، البته این تگ ممکن است در همه مرورگرها عمل نکند ولی در مرورگر اینترنت اکسپلورر (IE) مشکلی برای نمایش ندارد. خصوصیات این تگ عبارتند از : align=” “محل قرار گرفتن متن را تعیین میکند که با کلمات top, middle, bottom مقدار دهی میشود.
behavior=” “این خصوصیت نحوه حرکت متن را کنترل میکند که آنرا برابر با scroll اگر قرار دهیم، متن بصورت متناوب از یکطرف صفحه وارد و از طرف دیگر خارج میشود و اگر برابر با alternate قرار دهیم ، متن از صفحه خارج نمیشود و در عرض مرورگر حرکت میکند، همچنین اگر برابر با slide باشد ، متن از یکطرف وارد صفحه شده و در طرف دیگرمیایستد. bgcolor=” ” رنگ زمینه آن تگ را مشخص میکند که یا نام رنگ یا کد هگز آنرا مینویسید. direction=” “جهت ورود متن به صفحه را کنترل میکند و با کلمات left, right, top, down که از چپ ، راست، بالا و پایین میتواند وارد شود. height=” “ارتفاع کادر marquee را به عدد در مقیاس پیکسل یا به درصد تعیین میکند. hspace=” ” حاشیه چپ و راست را کم وزیاد میکند. loop=” “تعداد چرخش متن را کنترل میکند. scrolldelay=” ” سرعت حرکت متن را تعیین میکند. vspace=” ” حاشیه بالا و پایین متن را مشخص میکند.width=” ” عرض کادر را کنترل میکند.
<– !;..–> از این تگ برای افزودن نظریه یا هر نوشته دیگری که نمیخواهید در مرورگر نمایش داده شود و یا عملی را انجام دهد استفاده میکنید که بجای نقطه چین هر متنی را میتوانید وارد کنید .<bdo></bdo> این تگ فقط مخصوص مشخص کردن متن ازطرف چپ یا راست که دارای خصوصیت dir=” “ میباشد و با ltr یعنی از چپ به راست و rtl یعنی از راست به چپ مقدار دهی میشود.لیستها هم جزو عنصر متن در html میباشند که بخاطر زیاد بودن تگهای متن مجبورم آنها را از هم جدا کنم. سه نوع لیست وجود دارد، یکی لیستهای با ترکیب منظم (Ordered list) و لیست با ترکیب نا منظم (Unordered list) ودیگری لیستهای توصیفی (Definition list) . شاید این نوع نامگذاری بخاطر وجود اعداد یا حروف بترتیب در لیست منظم است که در دیگری فقط نقطه های توپر هست که ترتیبی را نمیتوان برای آنها در نظر گرفت. در هر صورت تگهای آن به شرح زیر میباشند:
<ol><li></ol>برای درست کردن لیست در یک صفحه از این تگها باید استفاده کنیم، بدین صورت که در آغاز قسمتی که میخواهیم لیست درست کنیم تگ <ol>را که مخفف ordered list میباشد را مینویسیم تا مرورگر بفهمد لیست از آنجا شروع میشود و سپس در ابتدای هر گزینه از لیستمان تگ <li>را اضافه میکنیم و در انتهای گزینه ها تگ پایان دهنده </ol>را می نویسیم.
اگر دقت کنید به صورت پیش فرض اعداد 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>شما میتوانید برای درست کردن یک لیست که دارای چند گزینه است و هر گزینه هم چند زیر مجموعه دارد از مخلوط این دو نوع لیست استفاده کنید که به این حالت 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> نوشته شود در مرورگر به شکل لینک ظاهر میشود و قابل کلیک است . همانطور که مشاهده میکنید به صورت پیش فرض رنگ لینکها آبی بوده و زیر آنها خط کشیده میشود که در بخش 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 اطلاعات صفحه مربوط به آن لینک در همان فریم که لینک قرار دارد نمایش داده میشود._parent صفحه مورد نظر در همان پنجره مرورگر باز خواهد شد ، نه در پنجره جدید._top صفحه مربوط به این لینک هیچگاه در پنجره ای که فریم دارد باز نخواهد شد.
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.comsubject=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″>این نکته را در نظر داشته باشید که سرعت کامل شدن عکس یعنی download شدن آن در صفحه بستگی به حجم آن دارد نه اندازه عکس، پس میتوانید اندازه های یک عکس را اضافه کنید ولی دقت کنید که کیفیت عکس خراب نشود. Alignmentشما میتوانید محل قرارگرفتن عکس را نسبت به عناصر اطراف خودش با خصوصیت align=” “تعیین کنید و میتوانید کلمات left,right,top,middle,bottom را برای این خصوصیت بکار برید. بر فرض میخواهید که یک متن بعد از عکس و در وسط قرار گیرد:<img src=”images/pic01.gif” align=”middle”> This is a text در ضمن اگر میخواهید خود عکس در وسط صفحه قرارگیرد باید از تگ<center> قبل از تگ <img> استفاده کنید و بعد از آن </center> را بنویسید: <center><img src=”pic01.gif”></center>
Borderاگر مایل هستید برای عکس کادر بگذارید میتوانید از خصوصیت border=” “ استفاده کنید و آنرا برابر با یک عدد قرار دهید که هر چه این عدد بزرگتر باشد ، کادر دور عکس هم ضخیم تر است به صورت پیش فرض border=”0” است یعنی هیچ کادری مشاهده نمیشود.مثالAlt تا حالا متوجه شدید که در یک وب سایت هنگامیکه نشانگر موس بر روی یک عکس که قرار میگیرد یک کادر متنی کوچک باز شده بنام tooltip و اطلاعاتی را راجع به آن عکس میدهد؟ پس شما هم اینکار را انجام دهید، خصوصیت alt=” ” را داخل تگ گذاشته و هر متنی را که جلویش بنویسید در صفحه هنگامیکه موس بر روی عکس قرار گیرد ، زیرنشانگر نمایان میشود. بهتر است که شما همیشه این کار را انجام دهید چون مرورگرهایی وجود دارد که عکس را نمایش نمیدهد پس با اینکار بیننده از حضور آن عکس خبر دار میشود.مثالhspace, vspace دو خصوصیت دیگر هست که حاشیه و فضای خالی دور عکس را کنترل می کند، hspace=” “برای حاشیه چپ و راست عکس وvspace=” “ برای بالا و پایین. عددی را که وارد میکنید در مقیاس پیکسل است.مثالImage linkشما میتوانید یک عکس را به صورت لینک هم درست کنید یعنی هرگاه بیننده روی عکس کلیک کرد به صفحه یا سایت دیگر هدایت شود. در بخش قبل با درست کردن لینک آشنا شدید، در اینجا شما باید تگ لینک را قبل از تگ عکس بنویسید و تگ پایان دهنده لینک را بعد از تگ عکس وارد میکنید، بدین صورت: <a href=”www.sitename.com”><img src=”images/sitelogo.gif”></a>ساخت نقشه تصویری ( image map ) Image map یکی از تکنیکهای ساخت عکس بصورت لینک است که گاهی اوقات به کمک ما میاید. بطور مثال ما نقشه ایران را در صفحه ای قرارداده و میخواهیم که بیننده سایت هرگاه روی یک استان کلیک کرد صفحه مربوط به آن باز شود تا اطلاعات مربوطه را در اختیار کاربر قرار دهد. این حالت حجم عکس را افزایش نخواهد داد و بهتر است از عکسهایی با حجم بالا استفاده نکنیم عکس مورد نظر را با استفاده از تگ <img>درصفحه قراردهید، سپس خصوصیت usemap=” ” را به تگ اضافه کنید که آنرا برابربا یک اسم واحد باید قرار دهیم تا از آن اسم در جای دیگر استفاده شود. این خصوصیت به مرورگر میفهماند که عکس را بصورت Image map میخواهیم بکار بریم.<img src=”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=”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 مرورگر در پایین بیاندازید، اعدادی را که مشاهده میکنید مختصات نقاط میباشند
ادامه خواندن مقاله کارگاه آموزشي طراحي صفحات وب
نوشته مقاله کارگاه آموزشي طراحي صفحات وب اولین بار در دانلود رایگان پدیدار شد.