آموزش HTML به زبان ساده(قسمت دوم)

HTML

در این مبحث به چگونگی اضافه کردن تصاویر به صفحه وب و سایر قسمت می پردازیم.

یکی از مشکلات اصلی استفاده از تصاویر در صفحات وب ، مدت زمان طولانی تر بار گذاری تصاویر در صفحات نسبت به متون است . بنابراین هر چه حجم این تصاویر کمتر باشد ، مدت زمان بارگذاری صفحه کمتر می شود.
قبل از آغاز نمودن بحث باید به این نکته توجه کرد که gif: graphics interchange format و jpg: joint photographic group دو نوع فرمت رایج تصاویر در صفحات وب هستند.

استفاده از کدام یک بهتر است؟؟

برای Banner , button , divider و clipart ها بهتر است که از فرمت GIF استفاده کنیم.
از آنجایی که تصاویر با فرمت JPG را می توان فشرده کرد , هر چند که کیفیت آن کاهش پیدا می کند, ولی حجم آن نیز کم می شود, پس برای عکس ها بهتر است از فرمت JPG استفاده کنیم.

قرار دادن تصاویر در صفحه وب:

برای قرار دادن تصاویر در صفحه از دستور <img> استفاده می کنیم و برای مشخص کردن آدرس این تصویر از صفت src این دستور بهره می گیریم. بنابراین شکل کلی این دستور به صورت زیر است:

<img src="url">

اگر مکان عکس در همان Folder ی باشد که فایل html شما در آن قرار دارد , کافی است به جای URL ، نام عکس همراه با فرمت آن را ذکر کنید.

مثال ۱:
ابتدا پوشه test را در درایو C خود بسازید و یک تصویر با نام img1 و با فرمت jpg در آن قرار دهید سپس ویراستار Notepad یا Notepad++ خود را باز کنید و در قست بدنه فایل html خود کد زیر را تایپ کنید و سپس این فایل را با نام دلخواه و با پسوند htm در درایو C خود و در پوشه test ذخیره کنید.

<img src="img1.jpg">

اکنون با باز کردن فایل html خود , تصویر img1 را مشاهده خواهید کرد.

اما اگر تصویر مورد نظر در یک سایت دیگر باشد باید آدرس کامل مکان عکس را به جای URL قرار دهید.

مثال ۲:

<img src="http://www.siteURL.com/??/?.gif">

در صورتیکه فایل مورد نظر در پوشه ای بیرون از پوشه جاری بود چطور عمل کنیم؟
برای اینکه از پوشه خارج شویم یا یک مرحله به عقب برگردیم کافی است در ابتدای آدرس /.. را قرار دهیم. به کمک این روش به هر تعداد که بخواهیم می توانیم به عقب برگردیم. برای روشن شدن موضوع فرض کنید فایل html در پوشه files قرار گرفته یعنی آدرس آن به شکل myWebsite/files/page1.html است و عکس مورد نظر در پوشه images با مسیر myWebsite/images/image1.jpg قرار دارد. برای آدرس دهی این عکس و قرار دادن آن در فایل page1.html باید ابتدا یک پوشه به عقب بر گردیم و سپس وارد پوشه images شویم و نام فایل مورد نظر را وارد کنیم. یعنی آدرس عکس را باید به صورت images/image1.jpg/.. وارد نماییم. به شکل توجه کنید:

height , width :

با استفاده از صفت های width و height از دستور <img> می توان اندازه تصاویر را تغییر داد. مقداری که برای این صفت تعریف می شود , می تواند بر حسب پیکسل یا درصد باشد. معمولا برای کاهش سایز تصاویر بهتر است از برنامه گرافیکی استفاده کرد تا از این صفت , زیرا استفاده از این صفت برای کاهش سایز مدت زمان بار گذاری صفحه وبتان را افزایش می دهد. در عین حال برای بزرگ تر کردن تصاویر از حالت عادی , استفاده از این صفت توصیه می شود.
مثال ۳:
<img src="img1.jpg" width="60" height="60">

مثال ۴:
<img src="img1.jpg" width="50%" height="60%">

در مثال ۴ ارتفاع وعرض تصویر به ترتیب ۶۰% و%۵۰ از اندازه صفحه مرور گر شما را تشکیل می دهد.
یعنی با استفاده از درصد (%) به هر اندازه که صفحه مرورگرتان را تغییر سایز دهید , تصویر در آن صفحه نیز به همان نسبت کوچک یا بزرگ خواهد شد.در حالی که با استفاده از مقدار پیکسلی اندازه تصویر همواره ثابت خواهد ماند.

border :

با استفاده از این صفت می توان برای تصویر مورد نظر حاشیه یا کادری با ضخامت دلخواه ایجاد کرد. به طور پیش فرض و بدون استفاده از این صفت ، هیچ کادری دور تصویر وجود ندارد.

مثال ۵:
کادر با ضخامت ۴ دور تصویر
<img src="img1.jpg " border="4">

alt :

صفت alt که مخفف alternative است. سه کاربرد اصلی این صفت عبارتند از:
۱٫ هرگاه تصویر مورد نظر به هر دلیل نمایش داده نشود این متن به جای آن تصویر قرار می گیرد.
۲٫ با قرار گرفتن موس روی تصویر توضیحی از آن نمایش داده میشود.
۳٫ برای افراد معلول امکان خواندن توضیح تصویر توسط نرم افزارهای مخصوص محیا میشود.

مثال ۶:
<"img src=" img1.jpg" alt="matn jaygozin>

صفت های hspace و vspace :

با استفاده از صفت hspace می توان فضایی را در سمت راست و چپ تصویر در نظر گرفت.
با استفاده از صفت vspace می توان فضایی را در بالا و پایین تصویر در نظر گرفت.

مثال ۷:
<img src="img1.jpg" Hspace="30" Vspace="10>

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

align :

با استفاده از این صفت می توانیم چگونگی قرار گرفتن تصویر را در متن مشخص کنیم. مثلا مطلوب ما این است که تصویر در بالای متن قرار گیرد یا در پایین متن.
با استفاده از مقادیر top(بالا) , bottom (یایین) و middle (میانه یا وسط) می توان متن را در بالا , پایین یا وسط تصویر قرار داد.

مثال ۸:
<img src ="img1.jpg" align="top">

علاوه بر مقادیر top , bottom وmiddle ، مقادیر دیگری نیز برای این صفت موجود است که به شرح هر یک می پردازیم.

Texttop : با این مقدار بالای تصویر با بالای بزرگترین کاراکتر تنظیم می شود.
Absmiddle : با این مقدار وسط تصویر با وسط متن تنظیم می شود.Baseline : با این مقدار پایین تصویر با پایین کشیده ترین کاراکتر رو به پایین تنظیم می شود.
left و right :با این دو مقدار می توان تصویر را به سمت چپ یا راست متن انتقال داد.

مثال ۹:
<img src ="img1.jpg" align="left>

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

۱) سازماندهی کردن اطلاعات با استفاده از جدول.
۲) چیدمان یا طرح بندی صفحه با استفاده از جدول های مخفی (hidden tables)

تقسیم کردن صفحه به قسمت های مختلف , ایجاد کردن منوها , ایجاد کردن سر صفحه (header ) , قرار دادن آسان تر عکس ها در مکان های دلخواه از صفحه, نوشتن متون در چند ستون در یک صفحه و …. از جمله کاربرد جدول ها می باشند.

جدول های ابتدائی (Basic Tables) :
جدول ها با دستور <table> تعریف می شوند.هر جدول از سطرها (Rows) و ستونهایی(Columns) تشکیل شده است.

سطر ها (Rows ) :
برای اضافه کردن سطرها به جدول از دستور <tr> … </tr> استفاده می کنیم.

ستون ها (Columns):
برای اینکه هر سطر را به ستون هایی تقسیم کنیم از دستور <td>…</td> استفاده می کنیم.

مثال :

نتیجه به صورت زیر خواهد بود :

column 1 into first row column 2 into first row column 1 into second row column 2 into second row.

صفت های دستور <table>:

صفت align: با استفاده از این صفت می توان موقعیت جدول را در صفحه تعیین کرد.مقادیر left ,center ,right به ترتیب باعث نمایش جدول در سمت راست , مرکز وچپ صفحه خواهند شد.

صفت background : برای وارد کردن عکس به عنوان پس زمینه جدول , ازاین صفت استفاده می کنیم.

<table background ="URL">

</table>

صفت bgcolor : برای تعریف کردن رنگ برای پس زمینه جدول.

صفت border : برای تعیین کردن ضخامت حاشیه یا کادر جدول.

صفت bordercolor : برای تعیین کردن رنگ کادر.

صفت bordercolordark :مشخص کردن رنگی به عنوان سایه برای کادر جدول.

صفت cellpadding : با استفاده از این صفت می توان فاصله ای بین خانه های جدول و محتوای جدول تعیین کرد.

صفت cellspacing : برای تعیین فاصله بین خانه های جدول.

مثال :

صفت frame :

این صفت به معنای چهار چوب و دارای مقادیر زیر است :

void : برای پاک کردن کادرهای بیرونی.

above : یرای نمایش دادن حاشیه بالایی جدول.

below : برای نمایش دادن حاشیه پایینی جدول.

lhs : حاشیه قسمت چپ جدول را نمایش می دهد.

rhs : حاشیه قسمت راست جدول را نمایش می دهد.

hsides : برای نشان دادن دو ضلع افقی حاشیه.

vsides : برای نشان دادن دو ضلع عمودی حاشیه.

box : برای نمایش دادن همه اضلاع حاشیه جدول.

صفت valign :

این صفت دارای دو مقدار زیر است :

top : محتوای جدول را با بالای خانه های جدول تنظیم می کند.

botton : محتوای جدول را با پایین خانه های جدول تنظیم می کند.

صفت width :

این صفت که یا با پیکسل یا به صورت درصد بیان می شود عرض جدول را تعیین می کند.

مثال :

صفت های دستورهای <td> و <tr> :

صفت align : با استفاده از مقادیر left,right,center ازاین صفت می توان موقعیت محتوا را در مرکز , قسمت راست و چپ خانه های جدول تعیین کرد.

صفت background : با استفاده از این صفت می توان عکسی را به عنوان پس زمینه خانه یا خانه های جدول قرار داد.

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

صفت bordercolor : با استفاده از این صفت می توان برای حاشیه یا کادر خانه ها رنگ مشخص کرد.

صفت bordercolordark : می توان رنگی را به عنوان سایه برای حاشیه خانه های جدول تعریف کرد.

صفت valign : این صفت دارای مقادیر top,middle,bottom است که به ترتیب باعث نمایش محتوای خانه های جدول در پایین , وسط و بالای خانه ها می شود.

صفت width : عرض خانه های جدول را تعیین می کند که می تواند با پیکسل یا درصد مقداردهی شود.

صفت height : ارتفاع خانه های جدول را تعیین می کند که می تواند با پیکسل یا درصد مقداردهی شود..

صفت های بالا در هر دو دستور <td> و <tr> معتبر هستند اما صفت هایی که در زیر بیان می شوند مخصوص دستور <td

صفت colspan : با استفاده ازاین صفت می توان تعیین کرد که عرض هر خانه به اندازه چند ستون باشد.برای جداولی کاربرد دارد که پهنای خانه های آن متفاوت است.

صفت rowspan : با استفاده ازاین صفت می توان تعیین کرد که ارتفاع هر خانه به اندازه چند سطر باشد.برای جداولی کاربرد دارد که ارتفاع خانه های آن متفاوت است.

احتمالا تا به حال به این فکر افتادید که چطور میشه رنگ پس زمینه صفحه رو تغییر بدیم یا عکسی به عنوان تصویر پس

زمینه انتخاب کنیم! این کار به سادگی با دو صفت از دستور <body> ممکنه که در این بخش با اونا آشنا میشیم!

قبل از شروع بحث به یادآوری روش نامگذاری رنگ ها می پردازیم:
در زبان html سه روش برای انتخاب رنگ معرفی شده است:

۱٫ استفاده از شماره رنگ در مبنای شانزده:
در این روش ترکیبی از سه رنگ اصلی قرمز ، سبز و آبی در مبنای شانزده بعد از یک علامت number sign `#` معرف رنگ مورد نظر خواهد بود.

#ff0000 —> RED
#۰۰ff00 —> GREEN
#۰۰۰۰ff —> BLUE
#ffff00 —> YELLOW
#fb60f9 —> PURPLE

نگران نباشید نرم افزارهایی مثل فتوشاپ به راحتی به شما امکان انتخاب رنگ مورد نظر را بدون آشنایی با این روش می دهند کافی است که در پنجره Color Picker شماره رنگ دلخواه خود را کپی نمایید.

۲٫استفاده از شماره رنگ در مبنای ده:
در این روش نیز تمامی رنگ های دلخواه از ترکیب سه رنگ اصلی قرمز ، سبز و آبی ساخته خواهند شد البته نسبت ترکیب رنگ های ذکر شده به صورت rgb(x,y,z) بیان میشود که x y z به ترتیب بیانگر رنگ های قرمز ، سبز و آبی خواهند بود ، که می توان اعداد ۰ تا ۲۵۵ را جایگزین آنها کرد.

rgb(255,0,0) —> RED
rgb(0,255,0) —> GREEN
rgb(0,0,255) —> BLUE

۳٫استفاده از اسامی رنگ های اصلی:
در این روش از نام رنگ مورد نظر استفاده می کنیم برای مطالعه بیشتر درباره این روش به بخش لینک های رنگی قسمت سوم آموزش های html مراجعه کنید.

پس زمینه رنگی:
برای انتخاب رنگ پس زمینه در زبان html از صفت bgcolor بهره می بریم. این صفت همانطور که قبلا بیان شد مربوط به دستور body است. برای استفاده از این صفت کافی است که رنگ مورد نظر را بر طبق یکی از روش های ذکر شده بعد از علامت مساوی قرار دهیم.

<body bgcolor="#dfac17">
<body bgcolor="rgb(241,175,100)">
<body bgcolor="red">

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

<body background="blueSreen.jpg">
<body background="../images/bg.gif">
<body