بخش اول: مروری بر وب، HTML ،عناصر و مقدمه ای برای طراحی سایت

از امروز سعی میکنم تا اونجائی که امکانش هست و از ابتدا مطالبی رو بیان میکنم که شاید به درد دوستانی بخوره که در سایت مسئولیت فنی دارن.
سعی میکنم از اول داستان و با زبانی ساده یه سری مطالب رو بیان کنم.حرفائی که اینجا از بعد فنی نوشته میشه همش از من نیست چون خودمم دارم یادمیگیرم و بدون هیچگونه کسر شانی ( برخلاف یه سری از دوستان ) میگم که خیلی چیزا رو نمیدونم و امیدوارم بتونم فضائی رو ایجاد کنم که خودمم چیزهای بیشتری رو یادبگیرم.
از همه دوستانی هم که میتونن کمکم کنن تقاضای یاری دارم.
بعضی از مطالب مال چند تا سایت دیگه هست که با اجازه نویسنده های محترمی که اینا رو نوشتن نقل قول میکنم.تعدادشون زیاده که در آخر مطالب منابع رو معرفی میکنم.

پس با یاد ایزد یکتا شروع میکنم:

بخش اول: مروری بر وب

امروزه شما به هر طرفی که نگاه می کنید آدرس های اینترنتی را مشاهده می کنید که این آدرس ها شما را به صفحاتی در اینترنت هدایت می کنند تا اطلاعاتی را در اختیار شما قرار دهند.بیشتر این آدرس ها با 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 نقطه پیوند : البته این معنی اصلی لغت نمی باشد و این عناصر،  نقطه پیوند و ارتباط بین دو صفحه از یک سایت یا دو وب سایت متفاوت می باشد.
• (frames)  چارچوبها : فریمها یا چارچوبها تنها عناصری هستند که با استفاده از آنها ما می توانیم چند صفحه اینترنتی را در یک صفحه جای دهیم.
•( multimedia ) چند رسانه ای : شاید بشه آنرا صوت و تصویر هم گفت ، اگرچه از ابتدا صوت و تصویر با HTML نبوده اما در حال حاضر بیشتر مرورگر های وب از این عنصر پشتیبانی می کنند و شما میتوانید در وب سایتتان فیلم وموزیک پخش کنید.
•( JavaScript ) جاوا اسکریپت : یک نوع زبان نوشتاری یا بهتر بگویم یک نوع کد است که ارتباط نزدیکی با HTML دارد و البته آنها را باید داخل کدهای html  بکار برد تا بتوانید یک وب سایت حرفه ای با جذابیت بالا طراحی کنید.
•( Java Applets ) جاوا اپلت : اپلتها برنامه هایی هستند که توسط زبان جاوا نوشته می شوند و می توان آنها را در یک صفحه جاسازی کرد برای کارآیی بالای وب سایت مانند عملیات پیچیده ریاضیات یا ساختن بازیها. زبان برنامه نویسی جاوا  خود یک زبان مجزا و دارای محبوبیت خاصی دردنیا می باشد که با جاوا اسکریپت فرق دارد.
•( 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  میباشد اطلاعات  سایت را حذف ، اضافه یا تغییر دهید که در مورد این سرویس در بخش دیگری توضیح خواهم داد.
البته سابتهایی هستند که شما میتوانید به طور رایگان سایت خود را راه اندازی کنید اما معایبی هم دارند که یکی از آنها پخش تبلیغات در صفحات شما میباشد و دیگر اینکه امکانات محدود آنها است ولی برای شروع کار و آشنایی با نصب و راه اندازی یک وب سایت بسیار مناسب میباشند.  یکی از این سایتها www.geocities.com است که اگر ایمیل در سایت یاهو دارید، فضای رایگان در اختیارتان قرار میدهد.

اهمیت طراحی وب سایت

یک وب سایت موفق در مرحله طراحی جان می گیرد چون چند چیز مهم در این قسمت مشخص میشود مانند: قالب بندی، رنگ، محتوی ومدیریت اطلاعات سایت. اگر ما درست کردن وب سایت را به ساختن یک خانه تشبیه کنیم، میبینید که انسان منطقی خانه را بدون نقشه و طرح نمی سازد، پس بیایید به این قسمت اهمیت بیشتری بدهیم تا در پایان کار احساس رضایت بکنیم.
در ساخت یک خانه نکات مهم دیگری هم هست، ظاهر و نمای آن، مواد ومصالح که قرار است بکار برده شود، در ضمن به راحتی کسانی که میخواهند از آن استفاده کنند هم باید فکر کرد. پس شما هم این نکات را مد نظر داشته باشید که ظاهر صفحات چه شکلی داشته باشد از چه رنگهایی استفاده کنید و چه مطالبی را بکار برید تا مخاطبین را مجذوب کرده وهمچنین بتوانند به کلیه قسمتهای سایت دسترسی داشته باشند در هربخشی که هستند. زمان بیشتری را صرف این قسمت کنید تا نیازی به تغییرات اساسی در آینده نداشته باشید.

برای یادگیری HTML  به چه چیزهایی نیاز دارید؟

برای دیدن صفحاتی که طراحی می کنید نیاز به یک مرورگر وب web browser دارید اگر شما این صفحه را می بینید پس یکی از این مرورگرها را دارید. اما برای نوشتن کدهای html در حال حاضر به برنامه ساده  notepad که درکلیه سیستمهای عامل ویندوز وجود دارد نیاز دارید، برنامه های پیشرفته دیگری هم هست که محیط گرافیکی دارند مانند: Microsoft FrontPage , Macromedia Dream weaver  ولی برای شروع بهتر است  که از همان 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 را فراهم کند.