دانلود مقاله مقدمه‌ای بر HTML و طراحی صفحات وب

هر کسی می‌تواند سایت web متعلق به خود ایجاد نموده و سپس به عموم مردم دنیا توسط اینترنت معرفی نماید.

بعضی از صفحات web متعلق به تجارت و بازرگانی که همراه با سرویسهای متعدد فروشی است و بعضی دیگر برای در دسترس قرار دادن اطلاعات فردی خود می‌باشد.

ما باید تصمیم بگیریم که صفحه web مورد نظرمان چگونه و مانند چه نوع صفحه‌ای باشد.
تمام صفحات وب با HTML نوشته می‌شوند.

HTML به شما توانایی تعیین فرمت متن و اضافه کردن گرافیک – صدا- تصویر ویدئویی همراه باقابلیت ضبط بصورت متنی با فیلهای اسکی که هر کامپیوتری می‌تواند آنرا بخواند می‌دهد البته برای ارجای صدا یا تصاویر ویدئویی کامپیوتر باید دارای سخت افزارهای لازم را دارا باشد.

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

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

اینترنت HTML,WEB
بطور بسیار ساده اینترنت مجموعه‌ای از کامپیوترها ی جهانی می‌باشد که تمام آنها به یکدیگر متصل هستند بطور نمونه بعضی از مردم در دانشگاهها و شرکتهای بزرگ هستند که 24 ساعته به اینترنت متصل هستند.

در صورتیکه دیگران با استفاده از یک مودم کامپیوتر خانگی خود را در مدت زمانی مخصوص در روز به این شبکه متصل می‌کنند بدون توجه به اتصال هنگامیکه شما متصل می‌باشید شما و کامپیوترتان یک جزئی از اینترنت شده و با دیگر کامپیوترهایی که در آن لحظه متصل می‌‌باشند ارتباط برقرار کرده‌اید.
World wide web در جای خود بسیار لطیف‌تر و زیباتر است بطوریکه شامل مجموعه‌ای از صدها میلیون سند که همیشه بطور سریع قابل تغییر می‌باشند است که همه آنها در محلی از اینترنت بصورت HTML قرار گرفته‌اند.
HTML خود دارای دو مشخصه اساسی است یک فوق متن و دیگری عمومیت آن.

در فوق متن می‌توان پیوندی در صفحه web ایجاد کرد که این پیوند بیننده را به هر صفحه دیگر و یا بطور کلی به هر جای دیگر راهنمایی کند.

بدین صورت که به اطلاعات درون web می‌توان از جهتهای بسیار متفاوت دسترسی پیدا کرد.

و اما عمومیت بدین معناست که چون سندهای HTML بصورت کدهای ASCII و یا فایلهای فقط متنی ضبط و ذخیره می‌شود بنابراین باید هر کامپیوتر می‌تواند صفحه web را بخواند اصلاَ مهم نیست که بینندگان صفحات وب از مکینتاش استفاده می‌کنند یا از ماشینهای با سیستم عامل windows و یا در یک جعبه unix پس web برروی همه باز است.

ظاهر مختلف Browser ها
به هر حال با وجود اینکه HTML برای همه قابل دسترسی می‌باشد ولی قابلیت دسترسی همگانی لزومی به نمایش همگون و یکسانی بین افراد نمی‌باشد.

بدین معنا که در Browser های مختلف ممکن است یک صفحه HTML بصورتهای متفاوتی مشاهده گردد ولی در هر صورت توسط یک سری دستور در HTML نوشته شده‌اند.
عملاَ هر کامپیوتر قابلیت توانایی نمایش صفحات WEB را دارد ولی در واقع شکل و شمایل این صفحات به نوع کامپیوتر، مونیتور، سرعت انتقال خط به اینترنت و نهایتاَ نرم‌افزار بکارگرفته شده برای نمایش این صفحات بستگی دارد.
اما همیشه باید در نظر داشت که کنترل و مراقبت برای یکسان سازی نمایش در Browser های مختلف محدود می‌باشد.
نوشتنHTML :
برا ی نوشتن یک سند HTML از هر برنامه پردازشگر word یا تصحیح کننده متن می‌توان استفاده کرد.
تکهای HTML :
تکها دستوراتی هستند که بین دو علامت کوچکتر وبزرگتر نوشته می‌شوند بدین وسیله Browser متن مربوط به دستورات را نشان می‌دهد.

ایحاد صفحات Web :
طراحی سایت مورد نظر
اگر چه می‌توان از این مرحله عبور کرد شروع به نوشتن صفحه web با استفاده از HTML نمود اما بهتر است که ابتدا طراحی سایت مورد نظرمان را تجزیه و تحلیل کنیم با این روش بهترین نوع مسیر طراحی را پیدا نموده و از سازماندهی مجدد سایت در آینده جلوگیری می‌کنیم.
اگر چه می‌توان از این مرحله عبور کرد شروع به نوشتن صفحه web با استفاده از HTML نمود اما بهتر است که ابتدا طراحی سایت مورد نظرمان را تجزیه و تحلیل کنیم با این روش بهترین نوع مسیر طراحی را پیدا نموده و از سازماندهی مجدد سایت در آینده جلوگیری می‌کنیم.

برای اینکه سایتمان را طراحی کنیم : ابتدا باید بدانیم که به چه منظوری می‌خواهیم سایت را طراحی کنیم و هدف ما انتقال چه نوع اطلاعاتی به شبکه اینترنت می‌باشد.

به مخاطبین خود فکر می‌کنیم که چگونه می‌توانند محتوای سایت ما به آنها انتقال یابد؟

بعنوان مثال باید از تصاویر گرافیک زیاد استفاده کرد یا اینکه اهمیت دسترسی سریع به صفحات را مد نظر قرار دهیم.

به چند صفحه نیاز داریم؟

ترتیب ساختار سایت چگونه باید باشد؟

آیا می‌خواهیم بینندگان سایت ما در جهت مخصوصی پیش بروند و یا می‌خواهیم برای راحتی کار امکان دستیابی به تمام قسمتهای سایت را بطور مستقیم برقرار کنیم؟

سایت مورد نظر خود را روی کاغذ بطور خلاصه تشریح کنیم.

یک نمونه صفحه برای خود ابتدا ایجاد کنیم و سپس نامگذاری سازگاری را برای صفحات تصاویر و دیگر فایلهای خارجی خود در دنیا در نظر بگیریم.

هیچگاه در فاز طراحی سایت افراط‌گونه عمل نکنید ابتدا بطور کامل تجریه و تحلیل و سپس عمل کنید.

اگر با web خیلی آشنا نیستید ابتدا جستجویی در شبکه اینترنت انجام می‌دهیم.

تا بتوانیم از امکانات و راه‌حلهای مختلف برای طراحی در سایت خود بهره بگیریم.

سازماندهی فایلها: بهتر است قبل از شروع به ایجاد فایلهای مورد نظر در مودر محل قرارگذاری آنها کمی فکر کنیم.

برای اینکه فایلها را سازماندهی کنیم: ابتدا یک پرونده مرکزی برای نگهداری تمام مواردی که برای سایت خود طراحی و ایجاد می‌کنیم درست می‌کنیم.

پوشه اصلی را بگونه‌ای تقسیم‌بندی می‌کنیم که منعکس کننده سازماندهی سایت web مورد نظرمان باشد.

مثلاَ یک پوشه برای سندهی HTML یکی برای تصاویر و یکی برای فایلهای خارجی در نظر بگیریم.

ولی در صورتیکه سایت ما بزرگ باشد که در نتیجه دارای صفحات زیادی خواهد بود بهتر است آنرا به بخشها و دسته‌های بیشتر تقسیم‌بندی کرده و تصاویر را در پوشه‌ای جداگانه قرار دهیم.

برای اینکه یک صفحه web جدید باز کنیم.

یک برنامه word را باز می‌کنیم.

ابتدا File را برای ایجاد یک فایل جدید انتخاب می‌کنیم.

بااستفاده از تگهای HTML برنامه مورد نظر خود را می‌نویسیم.

فایل خود را با پسوند » .htm « ذخیره می‌کنیم.

دستور شروع کردن صفحه web : اولین قدم برای نوشتن صفحه web نیاز است.

بکارگیری تگ HTML است.این تگ محتوی متن داخل خود را بعنوان کدهای HTML قلمداد می‌کند.

برای شروع کدن صفحه web : > HTML مقداری فضا برای ایجاد بقیه صفحه کنار می‌گذاریم.

> HTML / استفاده از تگهای پایه‌ای > HEAO Body اکثر صفحات وب به دو قسمت سر و بدنه تقسیم می‌شوند در قسمت سر(Head ) تیتر صفحه وب شامل اطلاعاتی درباره صفحه است که مورد استفاده موتورهای جستجو می‌باشند محل قرار گرفتن صفحه را تنظیم می‌کند فرمت‌دهی پیشرفته برای صفحه را انجام می‌دهد و اسکریپت‌ها را در آن می‌نویسد به غیر از تیتر صفحه که توسط دستور > TITLE برای ایجاد قسمت سر(HEAD ) مستقیماَ بعد از نوشتن تگ > HTML HEAD چند سطرخالی برای برنامه‌های لازم می‌گذاریم.

تگ> HAED / در قسمت بدنه(Body ) سند HTML قسمتی که بینندگان صفحه می‌بینند متن و گرافیک نوشته می‌شود.

برای ایجاد قسمت بدنه(Body ) بعد از تگ > HEAD body جندین سطر برای نوشتن محتوی صفحه Web کنار می‌گذاریم.

و سپس تگ> body / تماشای صفحه وب در Browser : نرم‌افزار Browser خود را باز کنیم.

مسیر File و openfile ،(openpage )را طی می‌کنیم.

در پنجره باز شده یا فایل مورد نظر را تایپ کنیم و یا روی فایل کلیک می‌کنیم.

اگر از دکمه Browesr یا choose file استفاده می‌کنیم پنجره دیگری باز می‌شود که باید فایل مورد نظر را بوسیله آن انتخاب کنیم.

در نهایت روی دکمه open کلیک می‌کنیم تا صفحه مورد نظر در Browser نشان داده شوند.

اگر صفحه web ما در پنجره open مشاهده نشود باید امتحانی کنیم که فایل حتماَ بصورت Text only و با پسوند ˝ .htm ˝ یا ˝ .html ˝ ذخیره کرده باشیم.

می‌توان هم Browser و هم ویرایشگر متن را باهم در کامپیوتر برای تصحیح سریع و مسائل احتمالی باز نگاه داریم بعد از هر نوع تغییر ابتدا باید آن را ذخیره و سپس صفحه را در Browser مجدداَ با دکمه Refresh مشاهده کرد.

محیط و ابزارهای Visual studio توضیحی برای پروژه این برنامه در ارتباط با رزرو کردن بلیط هواپیما می‌باشد در این برنامه از محیط Visuel Studio برای نوشتن کدها استفاده شده است و از کدنویسی Asp.NET به همراه VB و پایگاه داده‌ sqlserver استفاده شده است که درادامه به ترتیب در مورد هر یک توضیحاتی داده می‌شود.

در محیط ویژوال استودیو به قسمت (Asp.net application ) می‌رویم و برای طراحی سایت ابتدا صفحه اصلی خود را تعریف می‌کنیم.

این تعریف شامل یک فرم مربوط به وب می‌باشد( توضیح اینکه در محیط ویژوال استودیو فرم ویندوز نیز وجود دارد.

در این صفحه اصلی کاربر اینترنت می‌تواند با استفاده از هایپرلینک‌هایی که وجود دارد وجود اطلاعات یا به روز کردن آنها و یا مرتب کردن اطلاعات را به اساس نیاز خود انتخاب کند.

پس از تعریف صفحه اصلی می‌توانیم از منوی(progect ) صفحه‌‌هایی که کاربر به آنها مراجعه می‌کند را تعریف کنیم در واقع این کار اضافه کردن صفحات به پروژه ما می‌باشد.

(در راه اول) راه دوم اضافه کردن صفحات یا اجزای دیگر پروژه منوی file می‌باشد و انتخاب گزینه (Add item ) که اجزای مختلفی را شامل می‌شود.

( بانک اطلاعات) برای تعریف بانک اطلاعات باید ابتدا جداول آن را تعریف نمود که در اینجا مرجع این جداول یا (database ) آن را طبق دستوراتSQL تعریف شده است، دستورات select را برمی‌گزینیم.

(Database ) تعریف شده حتماَ باید با صفحه ما اتصال داشته باشد و برای دیدن اتصال یا عدم اتصال بانک اطلاعاتی از کاوشگر میزبان استفاده می‌‌کنیم.

(Data set و آداپتور داده) Data set در واقع یک شیء داده است که برای جلوگیری از آسیب دیدن اطلاعات در محیط ویژوال استودیو و Asp.net تعبیر شده است بدین صورت که Data set فقط یک کپی از اطلاعات را با واسطه آداپتور داده می‌گیرد به این صورت اطلاعات مورد نظر در صورتغییر توسط کاربر اطلاعات اصلی آسیب نمی‌بیند.

( فیلدها) فیلدهای این برنامه در هنگام ورود اطلاعات باتوجه به مشخصات مسافر تعئین شده است با ذکراین نکته که جدول تعئین شده در بانک اطلاعاتی SQL دارای یک فیلد کلید یا کد شناسائی شاخص می‌باشد که این فیلد با شماره شناسنامه مسافر یا کد ملی مشخص است که منحصر بفرد می‌باشد.

برنامه در Asp.net چگونه کار می‌کند؟

باتوجه به اینکه در محیط ویژال استودیو نوشته می‌شود هیچ ارتباطی با شبکه اینترنت در هنگام برنامه‌نویسی ندارد.

محیط ویژاول استودیو ابتدا یک Local host تعریف می‌کند و در هنگام ایجاد برنامه جدید با آن لینک می‌شود.

( پسوند فایلهای برنامه) فرمهای برنامه با پسوند Asp می‌باشد که در هنگام برنامه‌نویسی می‌توان براحتی روی فرمهای مختلف حرکت کرد و حتی می‌توان که فرمها را نیز براحتی مشاهده کرد و آنها را تغییر داد.

( ویژگی‌های آداپتور داده) آداپتور داده(ole db data Adapter) ویژگیهایی دارد که از آن جمله برای درج یا ببه روز کردن اطلاعات می‌توان استفاده کرد البته اینکار فقط بااستفاده از شیء داده یا dataset ممکن می‌باشد.

مثال: ole db date Adapter 1.

Up date ole db date Adapter 1.

Insert ( اجرای برنامه) برای اجرای برنامه در منوی file می‌توان از گزینه (build and Browse ) استفاده کرد که ابتدا برنامه را ترجمه کرده و سپس در صورت نداشتن خطا ما می‌توانیم برنامه اجرا شده را ببینیم البته گزینه‌ای نیز وجود دارد که به کاربر امکان انتخاب Browser را می‌دهد که کاربر می‌تواند نوع Browser را انتخاب نماید.

نکته قابل توجه این است که در صورتیکه اینترنت اکسپلورر در حالت offline باشد برنامه ما اجرا نخواهد شد.

کنترلهای روی فرم وب نیز مانند کنترل‌های روی فرم ویندوز نه تنها می‌تواند به جدول‌های پایگاه داده سنتی مربوط شوند بلکه می‌توانند به هر منبع داده‌ای مرتبط شوند یکی شی برای اینکه بتواند یک منبع داده برای یک فرم وب باشد باید واسط Ienumbrable را پیاده سازی نماید آرایه‌های (Array ) collection و Datarader ها و Dataset هاو Dataview ها و Datarow ها همگی این واسط را پیاده‌سازی می‌کنند و هر کدام از آنها می‌توانند بعنوان یک منبع داده برای یک کنترل روی نرم‌وب مورد استفاده قرار گیرد.

( چگونگی DataGrid در برنامه) همانطور که می‌دانیم Data Grid یک کنترل برای مرتب‌سای و نمایش داده‌ها می‌باشد که در این برنامه از آن استفاده شده است ما می‌توانیم دو نوع Data Grid داشته باشیم و علت وجود 2 نوع بدین خاطر است که در محیط ویژاول استودیو در قسمت اضافه‌کردن اجزا یا فرمها هم 2