واحد دانش و تکنولوژی تبیان زنجان
در قسمت قبلی مقاله با ASP.NET آشنا شدیم ، نرم افزار ویژوال استودیو دات نت را نصب و راه اندازی کردیم و یک صفحه وب کوچک نیز ایجاد نمودیم ، در این مقاله به صورت مختصر با زبان HTML آشنا می شویم :
در قسمت قبلی مقاله متوجه شدید که ما یک بخش به نام Source در اختیار داریم که ترکیبی از کدهای محض HTML و یک سری کدهای شبه HTML است (مانند تگ asp:button) که آنها هم در نهایت به HTML تبدیل خواهد شد ، بنابراین لازم است کمی با این زبان ساده و در عین حال پرکابرد بیشتر آشنا بشویم .
همانطور که تا کنون هم احتمالا متوجه شده اید زبان HTML از یک سری تگ تشکیل شده ، منظور از تگ هر نامی است که بین <> قرار دارد و به نحوی باز و بسته می شود ، اطلاعات به اشکال گونان در بین این تگها قرار می گیرد ، هر تگ میتواند یک سری خواص یا Attribute هم داشته باشد .
یک صفحه وب از 3 بخش اساسی تشکیل شده که هسته اصلی یک وب سایت هستند :
تگ HTML : این تگ کل صفحه را به دو بخش زیر تقسیم می کند ، در حقیقت این تگ نشانگر این است که این فایل یک فایل به زبان HTML است
تگ Head : اطلاعات کلی یک صفحه در این تگ قرار می گیرد ، مانند عنوان صفحه (Title) ، همچنین اگر بخواهیم از یک سری فایل خارجی در صفحه استفاده کنید مرجعه آنها را در این تگ قرار می دهیم (مانند اضافه کردن یک فایل Javascript) در این مورد بعدا بیشتر صحبت خواهیم کرد
تگ Body : در حقیقت بنده وب سایت ما در این قسمت قرار میگیرد ، کل وب سایت ما که به بیننده نمایش داده می شود در بین این تگ قرار خواهد گرفت
خوب به سراغ یک مثال عملی برای درک بیشتر می رویم ، ساده ترین حالت یک صفحه وب میتواند به شکل زیر باشد :
<html>
<head>
</head>
<body>
</body>
</html>
این سه بخش در کدهای فوق مشخص هستند ، همانطور ملاحظه می کنید هر تگ باز شده و سپس با یک / بسته شده است ، این قانون تگهای HTML است .
اکنون چند تگ مهم دیگر را به شما معرفی می کنم :
Title : این تگ در تگ Head قرار می گیرد و عنوان صفحه را مشخص می نماید
P : این تگ مخفف پاراگراف بوده و برای قرار دادن یک متن در یک سطر استفاده می شود
br : این تگ مانند اینتر عمل می کند ، برای آمدن به خط بعدی از این تگ استفاده می شود ؛ استفاده از این تگ و تگ hr کمی با سایر تگ ها متفاوت است (در مثال زیر توجه کنید )
hr : یک خط افقی جدا کننده برای شما رسم می کند
form : اگر بخواهید مجموعه ای از اشیاء وب (مانند Button و Textbox و...) را در صفحه قرار دهید باید آن را در تگ form جای دهید ، دقت نمایید که اگر کنترل های شما سمت سرور هستند (یعنی داری خاصیت Runat=Server می باشند) باید تگ form شما هم داری خاصیت Runat=Server باشد
به مثال زیر توجه کنید :
<html>
<head>
<title> وب سایت من </title>
</head>
<body>
<p>این اولین وب سایت من می باشد </p>
<hr />
<p>با تشکر <br /> نام سایت</p>
</body>
</html>
در کدهای فوق ابتدا از تگ p برای درج یک پاراگراف استفاده کردیم ، سپس یک خط افقط توسط تگ hr رسم کرده و یک پاراگراف دیگر هم قرار دادیم ، در پاراگراف دوم قسمت اول و دوم متن را با تگ Br جدا کردیم که این باعث می شود هر قسمت در یک سطر قرار گیرد ، پس میتوان از تگها را به صورت تو در تو نیز استفاده نمود .
برای تست کد های فوق به صورت زیر عمل کنید :
نرم افزار ویژوال استودیو را باز نمایید
وارد منوی File > Open Website شوید ، در صورتی که وب سایتی که در مقاله قبل ساختیم را توسط IIS (گزینه Http) ایجاد کردید از سمت چپ گزینه IIS را انتخاب کنید و در غیر این صورت گزینه اول یعنی File System را برگزینید ، پروژه را انتخاب کرده و آن را باز نمایید .
وارد منوی Website > Add New Item شوید ، از بین آیتم های موجود این دفعه گزینه HTML Page را برگزینید ، یک نام لخواه مثلا MyPage.htm برای آن انتخاب کرده و تایید نمایید .
این صفحه به صورت خودکار برای شما باز خواهد شد ، تمام محتویات آن را حذف کنید و کد های فوق را در آن کپی نمایید .
نکته * : برای مرتب کردن کدها میتوانید از کلید میانبر CTRL+K+D استفاده کنید ، برای این کار در همان صفحه HTML که هستید دکمه CTRL را فشار داده و در حالی که این دکمه را با یک انگشت پایین نگه داشته اید دکمه K را نگه داشته و سپس دکمه D را بفشارید (دقت کنید در هنگام فشردن کلید D دو کلید دیگر هم باید پایین نگه داشته شده باشند) نتیجه اینکه تمام کدهای شما منظم خواهد شد .
اکنون با فشردن CTRL+S یا استفاده از منوی File >Save این صفحه را Save کنید ، پنجره Solution Explorer را باز کرده و این صفحه را انتخاب و View In Browser کنید (اگر فراموش کرده اید به مقاله قبل مراجعه نمایید) :
همانطور که ملاحظه می کنید نتیجه کار در تصویر فوق مشخص شده است ، مکان Title صفحه هم با بیضی قرمز رنگ مشخص کرده ام .
اکنون اجازه دهید که این صفحه را مرتب تر کنیم ، برای این منظور وارد کد های HTML مربوط به این صفحه شده و به سراغ تگ Body بروید ، همانطور که در ابتدا گفتم هر تگ علاوه بر این که می تواند یک متن را در خود جای دهد ، خاصیت هایی (Attributes) هم دارد ، یکی از مهمترین خواص هر تگ خاصیت Style آن است (همه تگ های این خصیصه را دارند) این خصیصه برای استایل دهی به اطلاعات داخل آن تگ استفاده می شود ، مثلا فرض کنید مایلیم فونت کل صفحه را به Tahoma تغییر دهیم برای این منظور داریم :
<body style="font-family: Tahoma">
همانطور که ملاحظه می کنید ، ابتدا خاصیت Style را به تگ Body اضافه کردم (با این کار کل صفحه این خاصیت را می گیرد) ، سپس font-family را برابر Tahoma قرار دادم ، خاصیت Style از زبان ساده ای به نام Css پیروی می کند که در مورد آن بسیار صحبت خواهیم کرد .
اکنون میخواهم جهت صفحه را هم راست به چپ کنم ، بنابراین داریم :
<body style="font-family: Tahoma ; direction:rtl">
همانطور که مشخص است تو استایل با ; از هم جدا شده اند ، میتوانیم تعداد نا محدودی استایل مختلف را به صورت زیر به یک تگ نسبت دهیم ، استایل direction جهت متن را مشخص می کند ، rtl مخفف Right to left (راست به چپ) می باشد ، بالعکس آن هم ltr مخفف Left to right است که صفحه را چپ به راست می نمایید (به صورت پیشفرض صفحه ltr می باشد )
اکنون میخواهم اندازی فونت صفحه را نیز کمی تغییر دهم :
<body style="font-family: Tahoma; direction: rtl; font-size: 11px">
اندازه فونت واحد های مختلفی دارد که مشهورترین آنها Pt و px است ، فونت نرمال و استاندارد یک صفحه معمولا 8pt یا 11px می باشد
در نهایت کدهای این صفحه به صورت زیر خواهد بود :
<html>
<head>
<title>وب سایت من </title>
</head>
<body style="font-family: Tahoma; direction: rtl; font-size: 11px">
<p>
این اولین وب سایت من می باشد
</p>
<hr />
<p>
با تشکر
<br />
نام سایت
</p>
</body>
</html>
اکنون این صفحه را دوباره Save کرده و سپس توسط View In Browser در مرورگر ملاحظه نمایید :
همچنین شما میتوانید رنگ پس زمینه ، رنگ فونت و صدها خاصیت دیگر را توسط Style تغییر دهید .
علاوه بر اینکه میتوان این کار ها را در میان کدهای HTML انجام داد روش ساده تری نیز برای استایل دهی وجود دارد ، برای این کار از حالت Source به حالت Design بروید سپس روی متن "این اولین وب سایت من می باشد" یک بار کلیک کرده تا تگ p انتخاب شود سپس کلیک راست نموده و گزینه Properties را انتخاب کنید ، از بین Propety های ظاهر شده گزینه Style را انتخاب کرده و دکمه ... در سمت راست این خاصیت را کلیک نمایید :
در پنجره باز شده میتوانید استایل های مختلف هر بخش را تعیین کنید :
پس از تغییر استایل ها به بخش Source مراجعه کرده و نتیجه تغییرات خود را ملاحظه نمایید .
همچنین شما میتوانید به صفحه خود جداولی نیز اضافه نمایید ، برای این کار وارد منوی Table شده و گزینه Insert table را برگزینید (در نسخه 2005 این گزینه در منوی Layout قرار گرفته است) :
در تصویر فوق بخش های مهم این پنجره را با رنگ قرمز مشخص نموده ام :
Rows : تعداد سطر ها را مشخص می کند
Columns : تعداد ستون های جدول را تعیین می نماید .
Specify Width : عرض جدول می باشد که به صورت پیشفرض بر حسب درصد است ، پیشنهاد می کنم برای ایجاد جدول جهت فرم (مانند فرم ثبت نام) تیک Specify Width را غیر فعال نمایید تا جدول عرض نداشته باشد و فرم شما کشیده نشود .
Cell Spacing : فاصله خارجی سلول های جدول
Cell Padding :فاصل داخلی سلول های جدول
Borders : اندازه لبه جدول که به صورت پیشفرض 0 در نظر گرفته می شود ، این مقدار فقط زمانی مقدار دهی می شود که بخواهیم لبه جدول ضخامت داشته و مشخص باشد ، رنگ لبه را هم میتوان در همین بخش تعیین نمود .
برای فهم بهتر Cell Spacing و Cell Padding این دو خاصیت در تصویر فوق نمایش داده شده است ، در تصویر فوق یک جدول 3X4 با Cell Spacing 5 و Cell Padding 10 را مشاهده می فرمایید .
همچنین ازمنوی Toolbox یک سری Input text نیز در سلول ها قرار دادم ، این کنترل ها از نوع HTML محض بوده و شما نمیتوانید برای آنها کد نویسی کنید (بر خلاف کنترل های سمت سرور مثل asp:textbox و...)
نکته جالب توجه اینجاست که اگر این صفحه را Save کرده و در مرورگر قسمت View Source را ملاحظه کنید کدهای نمایش داده شده با کد های HTML موجود در Visual Studio هیچ تفاوتی ندارند ، این موضوع تصدیق کننده توضیحات مقاله قبلی مبتنی برای تغییر کدهای سمت سرور به HTML محض می باشد ، یعنی این صفحه اصلا به IIS جهت پردازش ارسال نمی شود و مستقیما مرورگر آن را ترجمه می کند .
کد نهایی صفحه Html به شکل زیر خواهد بود :
<html>
<head>
<title>وب سایت من </title>
</head>
<body style="font-family: Tahoma; direction: rtl; font-size: 11px">
<p style="color: #FF0000">
این اولین وب سایت من می باشد
</p>
<hr />
<p>
با تشکر
<br />
نام سایت
</p>
<table cellpadding="10" cellspacing="5">
<tr>
<td>
نام :</td>
<td>
<input id="Text1" type="text" /></td>
</tr>
<tr>
<td>
نام خانوادگی :</td>
<td>
<input id="Text2" type="text" /></td>
</tr>
<tr>
<td>
ایمیل :</td>
<td>
<input id="Text3" type="text" /></td>
</tr>
</table>
</body>
</html>
