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

کلیات

• لزموم اشنایی با قالب های شناخته شده فایل ها در  وب و نیز اشنایی با نحوه ویرایش و ایجاد صفحات وب جزو اولین مهارت های لازم برای یک طراحی موثر است .به کاربردن فایل های مناسب از نظر سرعت فراخوانی و نمایش اجرا به وسیله مرورگر های مختلف و استفاده مناسب از ابزارهای سودمن طراحی صفحات وب از اصلیترین مهارت های یک طراح وب است . با دانستن این اصول قادر خواهید بود در اکثر سیستم عامل ها با استفاده از نرم افزارهای اولیه مشترک به طراحی صفحات وب بپردازید تجربه نشان داده که بسیاری از مشکلات طراحان صفحات وب در شروع کار وربوط به عدم درک و شناخت صحیح از این اصول و استفاده نادرست از قالب های متناسب برای فایلهاست که با کسب مهارت لازم در این زمینه میتوانید به طور موثر تری به طراحی صفحات وب بپردازید
• قالبهای قابل پذیرش در Web
• باید بدانید که تمامی قالبهای فایل موجود در کامپیوتر دروب قابل استفاده و مشاهده نیستند .دلایل متعددی برای این موضوع مطرح است که در اینجا به ذکر پاره ای از ان میپردازیم :
• تعدد سیستم عاملها :  همه سیستم عامل ها قابلیت استفاده و کار با هر نوع فایلی را ندارند و این محدو دیت کاربران در شبکه گسترده وب میشود .
• مساله حجم و سرعت بارگذاری فایلها : د رمرورگرهای مختلف ودر شبکه هایی با سرعت های مختلف سرعت بارگذاری فایل ها متفاوت است سرعت استاندارد بارگذاری یک صفحه وب با حجم تقریبی 100Kgحداکثر 10 ثانیه است مسلما در صورت استفاده از فایلهایی با قالبهای غیر استاندارد و غیر متعارف این استاندارد برای بارگذاری صفحات رعایت نخواهد شد .
• نیاز به نرم افزارهای افزودنی : بسیاری از فایلها و قالبهای مورد استفاده در کامپیوترها نیاز به برنامه های خاصی برای اجرا و نمایش دارند که این موضوع سبب ایجاد اشکال در نمایش انها در زمان بارگذاری صفحات یاد شده میشوند .مرور گرها برای نمایش فایل هایی با قالبهای غیر متعارف نیازمند برنامه های خاصی هستند که به این برنامه ها نرم افزارهای افزودنی (plug-ins) گفته میشود .یک نرم افزار افزودنی ,نرم افزاری است که پس از نسب اجازه نمایش و اجرای قالبهای فایلی خاص و غیر پیش فرض را در کامپیوتر ها میدهد بسیاری از فایلهای مورد استفاده در کامپیوتر ها نرم افزار افزودنی برای مرور گرها را ندارند به همین دلیل امکان استفاده در انها در وب فراهم نیست در زیر فایلها و قالبهای متعارف قابل استفاده در صفحات وب و نرم افزار افزودنی مربوط به ان اورده شده است .

• htm.قالب استاندارد صفحات وب
• html.
• jpg. قالب استاندارد تصاویر گرافیکی در وب با قابلیت cimpresson
• gif.به دلیل حجم کم متداولترین قالب استاندارد تصاویر گرافیکی در وب است .قابلیتهای نمایش تدریجی (Interlace) شفافیت (Transparency) و انیمیشن از خصوصیات این قالب هستند .
• png.قالب جدید استاندارد تصاویر وب ئ جایگزین اتی فایلهای gif با قابلیتهای فشرده سازی , شفافیت و نمایش تدریجی .
• wrl.فایلهای متداول زبان VRML برای شبیه سازی سه بعدی و محیط واقعی در اینترنت .
• wav.متداولترین فایل صوتی در کامپیوتر ها و اینترنت .
• au. فایل صوتی متداول در سیستم عامل های Unix
• midi.فایل صوتی متداول در اینترنت با حجم بسیار کم و مورد استفاده در زمینه وب .
• mid.
• ra.فایل صوتی متداول و قابل اجرا با نرم افزار Real Audio و قابل استفاده در رادیوی اینترنتی
• pdf.فایل متنی متداول و کم حجم اینترنت و وب و قابل خواندن به وسیله نرم افزار Adode Acrobat
• avi.فایل ویدیویی سیستم عامل ویندوز
• mov.فایل ویدیویی سیستم عامل Mac و قابل اجرا به وسیله QuickTimeplayr
• mpeg.فایل ویدیویی متداول در کامپیوترهای شخصی
• xls.صفحه گسترده نرم افزار Excel
• doc.فایلهای متنی متداول در وب با نرم افزار Word
• ppt.فایل متداول نمایش اسلایدهای اموزشی با نرم افزار Power Point
• ps.فایلهای Post scriptمناسب برای ارسال به پرینترهای لیزری
• zip.متداولترین فایلهای فشرده در اینترنت و وب وقابل اجرا به وسیله PkUnzil,PkZil,WinZil
• وWinrar
• txt.فایلهای متنی متداول در کامپیوتر ها و اینترنت با حجم بسیار کم
• dcr.فایلهای انیمیشن ShocKwaveمتداول در اینترنت و وب که نیازمند نرم افزار    Shockwave هستند
• dxr.
• dir.
• swf.فایلهای انیمیشن متداول در اینترنت و وب که به نرم افزار Flash player برای اجرا نیاز دارند
• تکنولوژی Plug-in 
• امکانات مرور گرها محدود است برنامه های افزودنی (یا اتصالی ) نرم افزارهایی مستقل از مرور گرها هستند که برای افزایش کارایی یک مرورگر به ان متصل میشوند نرم افزار افزودنی (یا اتصالی ) امکان مشاهده فایلهای ویدیویی ,حرکت در فضای سه بعدی , گوش دادن به موسیقی و ارتیاط متقابل باکاربر را فراهم میکند هدف اولیه نرم افزار افزودنی در وب توسعه کارایی مرورگرها باایجاد قالبهای موثر و یک پارچه است این برنامه ها از فایل هایی پشتیبانی میکنند که در حالت عادی مرور گرها قادر به نمایش و اجرا انها نیستند Plug-inهای متعددی وجود دارند که علاوه بر افزایش کارایی مرورگر ها دارای محبوبیت خاصی بوده و به منظور بهبود عملکرد مرتبا اصلاح میشوند در اینجا به معرفی تعدادی از انها میپردازیم :
• یکی از معروفترین انها برنامه اتصالی Adobe Acrobat است که مرورگرها توسط ان قادر خواهند بود تا فایلهایی با فرمت PDF راباز کرده  و نمایش دهند یکی از ویژگیهای این برنامه اتصالی نمایش دقیق قالب و ارایش محتوای ان متابق با فایل اصلی است این برنامه اتصالی همراه با نصب یکی از برنامه هایAdobe Acrobat در سیستم شما نصب میشوند اما اگر هنوز برنامه ای نصب نکرده اید یا خیال نصب ندارید میتوانید فقط برنامه اتصالی مرورگر را از سایت www.adobe.com بارگذاری کرده و نصب کنید .
• یکی دیگر از این برنامه های اتصالی برنامه ای است که قادر به پخش صوت و تصویر یا فرمتی خاص است بدین گونه که شما نیازی به صبر کردن برای بار گذاری فایل صوتی یا تصویری ندارید و میتوانید همزمان با بارگذاری فایل به ان گوش دهید یا ان را ببندید در حال حاضر دو نوع فرمت به نام های Real Audio برای پخش صوت و Real Video برای پخش تصویر وجود دارند که حتی با اینترنت dialup هم میتوانید از انها استفاده کنید این فرمت ها باعث جذب افرادی میشوند که علاقه خاصی به گوش کردن اخبار دارند (چون بیشتر کانالهای خبری اخبار خود را با این فرمت روی اینترنت پخش میکنند ) اگر شما برنامه مالتی مدیا RealOne.player را نصب کرده اید پس نیازی به برنامه اتصالی این فرمتها ندارید ولی اگر هنوز اقدام به این کار نکرده اید میتوانید برنامه اتصالی انها را از ادرس www.real.comتهیه کنید .
• plug-in دیگری به نام QuickTime وجود دارد که مخصوص سیستم عامل مکینتاش بوده و برای فرمتی خاص از فایل های صوتی تصویری به نام Move (با پسوند mov.) مورد استفاده قرار می گیرد این فرمت مشابه فرمتهای گفته شده در قسمت بالاست البته برنامه اتصالی QuickTime برای سیستم عمل های ویندوز نیز وجود دارد تا کاربران این گونه سیستم ها هم بتوانند از این فایل ها در وب استفاده کنند برای اطلاعات بیشتر به وب سایت ww.apple.com  مراجعه کنید
• برنامه اتصالی دیگری به نام VRML وجود دارد که مخفف Virtual Reality Modeling Language است و مشابه HTML میتواند یک دنیای سه بعدی مجازی در وب بسازد توسط برنامه اتصالی این زبان میتوانید این دنیای سه بعدی را در مرور گر خود اورده و در ان بچرخید .این زبان plug-inهای مختلفی دارد .برای کسب اطلاعات بیشتر در رابطه با این زبان به کنسرسیوم وب سه بعدی در ادرس www.vrml.org بروید .
• کارامدترین برنامه اتصالی مربوط به یکی از محبوبترین برنامه های وب است که این روزها تعداد علاقه مندان و سایتهایی که از ان استفاده میکنند بیشتر وبیشتر شده است زیرا با استفاده از این تکنیک میتوانند جذابیت خاصی به سایت خود بدهند . این برنامه های اتصالی Flash player وShockwave نام دارند و هردو متعلق به شرکت ماکرو مدیا هستند توسط این دو برنامه اتصالی میتوانید یک فایل نمایشی زیبا با یک انیمیشن جذاب را در مرورگر خود ببینید برای کسب اطلاعات بیشتر و بارگذاری این برنامه به وب سایت ماکرومدیا در ادرس www.macromedia.com بروید.
• یکی از مهمترین برنامه های اتصالی در سیتم عامل ویندوز XP نرم افزار ماشین مجازی جاوا (نسخه مایکرو سافتی به نام Microsoft Virtual Machine ) است که این نرم افزار در سیتم عامل ویندوز XP به صورت پیش فرض وجود ندارد و کابران باید ان را به طور جداگانه نصب کنند این نرم افزار برای اجرای برنامه های کاربردی جاوا تحت وب لازم است .
• بعد از مراجعه به این سایت ها و نصب برنامه های اتصالی مرورگر شما قادر به شناسایی این فایل ها و اجرای انها خواهد بود البته بعضی از plug-inهای همراه مرورگرهای نسخه جدید ارایه شده اند و نیازی به نصب مجدد انها نیست اگر مرورگر شما به فایلی در وب برخورد کند که قادر به اجرای ان نباشد پنجره ای باز کرده و از شما میخواهد تا برنامه اتصالی مورد نظر را بارگذاری کنید اگر در سایت خود از برنامه هایی استفاده میکنید که نیاز به plug-inهای دارد حتما در قسمتی از صفحه توضیحی بگذارید تا کاربران از وجود ان باخبر شوند و امکان بارگذاری و نصب برنامه اتصالی را نیز فراهم اورید تا دسترسی به ان اسانتر شود .

ابزارهای سودمند طراحی صفحات وب

اصولا یک طراح صفحات وب از دو دسته نرم افزار مختلف برای طراحی صفحات وب استفاده می کند: دسته اول ویرایشگرهای متنی (Text Editor) هستند که عمدتا برای وارد کردن کدهای HTML به صورت دستی استفاده میشوند Notepad دسته دوم نرم افزارهایی هستند که به انها Wysiwyg (باتلفظ ویزی یگ ) گفته میشود در این نرم افزارها کاربر بدون درگیر شدن با جزییات فنی کدهای برنامه مستقیما انچه را که میخواهد انجام میدهد مانند FrontPage  ,  Dreamweaver  و Adobe GoLive .

Notepad                                                                                   

این برنامه یک ویرایشگر متنی است که قابلیت ایجاد ویرایش و ذخیره فایلهای متنی و به خصوص کدهای HTML را داراست سهولت کار با این برنامه ان را به یکی از متداولترین برنامه های ویرایش متنی زبانهای برنامه نویسی تبدیل کرده است این برنامه قابلیت ذخیره فایلهای مختلف با روشهای کد گذاری و شناسایی متون و نوشته ها به وسیله استانداردهای Unicode , ANSI و UTF-8 را داراست یونی کد ( Universal Character Set Transformation Format ) استانداردهای بین المللی (منطبق بر استاندارد ایزو 10646) برای تبادل اطلاعات چند زبانه است یونی کد این امکان را فراهم میسازد تا همه نویسه های (Character) که برای نوشتن زبانهای دنیا مورد استفاده قرار میگیرند کد گذاری شوند این استاندارد از کد گذاری 16 بیتی استفاده کرده و برای بیش از 65000 نویسه جا فراهم میکند اگر چه 65000 نویسه برای کد گذاری اکثر نویسه هایی که در زبانهای مهم دنیا استفاده میشود کافی است اما استاندارد یونی کد به وسیله تمامی شرکت های معتبر بین المللی کامپیوتری نظیر ای بی ام , مایکرو سافت  , سان ونیز موسسات ملی استاندارد در کشور های مختلف جهان مورد استفاده قرار میگیرد که سرعت رشد بسیار زیادی در میان کاربران دارد این شیوه به خاطر این که نویسه های اسکی را عینا حفظ میکند برنامه های قدیمی راحت تر با ان کار میکنند و طول پرونده های لاتین را نیز زیاد نمیکند سیار محبوب است در واقع بسیاری از سیستم هایی که ادعای پشتیبانی میکنند و پرونده های یونی کد اعم از کاربرد های اینترنتی یا موارد استفاده  محلی عمدتا در قالب UTF-8 ذخیره میشوند برای تنظیم نحوه ذخیره سازی متن در نرم افزار Notepad با فرمت UTF-8 از منوی File گزینه Save As را برگزینید و در قسمت  Encoding گزینه UTF-8 را انتخاب کنید.