آموزش HTML بخش 3
تا این‌جای کار توانستیم ساختار کلی یک فایل HTML را درک کنیم، و هم چنین با مقداری از تگ‌ها برای نظم‌دهی و ایجاد یک تایپو‌گرافی مناسب در صفحات HTML مان آشنا شویم. امروز می‌خواهیم با شیوه‌ی استفاده از عکس در صفحه‌یمان بیشتر آشنا شویم و همچنین مقداری به نحوه‌ی چینش اجزا در صفحه بپردازیم.
در دو فصل قبل با پارامتر‌هایی از تگ Body نظیر، textو bgcolor آشنا شدیم. پارامتر بعدی که امروز قصد معرفی آن را داریم، background است. همانطور که حتما از اسم این پارامتر متوجه شده‌اید، از آن به عنوان تعیین کننده‌ی تصویر به عنوان پس زمینه‌ی سند استفاده می‌شود. به نمونه‌ای از استفاده از این تگ در کد زیر توجه کنید:
<html>
<head>
<title>Shahin</title>
</head>
<body bgcolor=black background="pic1.jpg">
</body>
</html>
مقدار این پارامتر را باید در "" قرار دهید. و توجه داشته باشید که در صورتی که عکس در پوشه‌ی دیگری غیر از پوشه‌ی سند HTMLمان قرار داشت، باید حتما آدرس کاملی که به عکس اشاره می‌کند را به جای مقدار قرار داد.
تا این‌جای کار توانستیم که عکسی را به عنوان پس زمینه در سند قرار دهیم. حال اگر بخواهیم عکس را در کنار نوشته‌ها و دیگر اجزای صفحه قرار دهیم، چاره چیست؟
این‌جاست که تگ IMG وارد عمل می‌شود. این تگ از نوع اول تگ‌هایی است که در ابتدا معرفی کردیم. و دارای پارمتر‌هایی است که در ادامه‌ی مثال بعدی توضیح خواهم داد:
<html>
<head>
<title>Shahin</title>
</head>
<body bgcolor=black>
<img src="pic1.jpg" title="My First Pic" alt="Here is a Picture" height=200 width=200 align=right>
</body>
</html>
همانطور که می‌بینید ما به همراه این تگ از چند پارامتر اضافه نیز استفاده کردیم، که به غیر از پارمتر src مابقی اختیاری است، ولی در صورت موجود بودن می‌تواند به SEO در صفحه‌ی وب شما کمک کند. پارامتر اول یعنی src یا همان سورس، در این‌جا تعیین کننده‌ی محلی است که قرار است تصویر از آن‌جا بار‌گذاری شود -چیزی است شبیه به مقدار پارمتر background که در بالا توضیح دادم. -
پارامتر بعدی یعنی title یک تولتیپ به عکس شما اضافه می‌کند و مقدار روبرویش را در آن می‌نویسد. و پارمتر سوم بعنی alt نیز در صورتی که به هر دلیلی مرورگر نتواند تصویر را بار‌گذاری کند، مقدار روبرویش را به جای عکس می‌نویسد. پارامتر‌های چهارم و پنجم یعنی height و width طول و عرض عکس را تعیین می‌کنند. در صورتی که هر دوی این پارامتر‌ها و یا یکی از آن‌ها را تعیین نکنیم، مرورگر از سایز اصلی تصویر برای آن مقدار استفاده می‌کند.
پارامتر آخر یعنی align جهت چینش تصویر را مشخص می‌کند. در مثال فوق تصویر راست چین شده است. برای درک بهتر این پارمتر به مثال زیر توجه کنید:
<html>
<head>
<title>Shahin</title>
</head>
<body text=white bgcolor=black>
<img src="pic1.jpg" title="My First Pic" alt="Here is a Picture" height=200 width=200 align=right>
Hi This is Text 1
<br>
This is Text 2
<br clear=right>
This is Text3
</body>
</html>
چنان‌که می‌بینیند، متن‌های اول و دوم حتی با وجود تگ BR قبل از دومی باز هم در کنار تصویر نوشته می‌شوند. در صورتی که متن‌های موجود در این دو خط به قدری بزرگ شوند که به تصویر برسند، شکسته و به خط بعد می‌روند. حال اگر بخواهیم متن بعد از تصویر شروع به نمایش کند، می‌توانیم از تگ BR همراه با پارامتر Clear و مقدار align موجود در پارامتر‌های مربوط به عکس چنان‌که در مثال می‌بینیم استفاده کنیم.