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

شما می توانید اندازه عکس را تغییر دهید. این کار را می توانید با افزودن شناسه های width (برای عرض عکس) و height (برای ارتفاع عکس) به تگ img انجام دهید. به یک مثال در این مورد توجه کنید:

فرض کنیم یک عکس با نام learn_html.gif داریم و می خواهیم آنرا کوچکتر از اندازه اصلی آن نشان دهیم. تنها چیزی که باید بدانیم اندازه اصلی عکس است. اندازه عرض و ارتفاع عکس معمولاً با مقیاس پیکسل سنجیده میشود. عکس ما ۱۳۷ پیکسل عرض و ۷۷ پیکسل ارتفاع دارد. در زیر می توانید عکس را با اندازه های واقعی ببینید.

حالا می خواهیم شناسه های width و height را در تگ عکس وارد کنیم. تگ ما به این صورت در می آید:

<img src=”http://www.funpatogh.com/learn_html.gif” width=” ” height=” “>

حالا کافی است اندازه مورد نظر را در بین دو دابل کوت ( ” ” ) وارد کنید. برای مثال من اندازه ۱۰۰ را برای عرض و ۵۰ را برای ارتفاع وارد می کنم . به صورت زیر:

<img src=”http://www.funpatogh.com/learn_html.gif” width=”100″ height=”50″>

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

برای بزرگتر کردن عکس هم کاری مشابه بالا را انجام می دهیم:

مثلاً با عرض۲۰۰ و ارتفاع ۱۰۰:

<img src=”http://www.funpatogh.com/learn_html.gif” width=”200″ height=”100″>

همانطور که می بینید اندازه عکس بزرگتر از اندازه واقعی شد:

همانطور که ممکن است متوجه شده باشید در تصاویری که با این روش تغییر اندازه پیدا می کنند اگر به نسبت بین عرض و ارتفاع عکس رعایت نشود ممکن است تناسب عکس به هم بخورد. مثلاً تصویر بیش از حد کشیده به نظر برسد و…

اگر بخواهید تصاویر با همان نسبت قبلی تغییر اندازه پیدا کنند باید نسبت بین عرض تصویر و ارتفاع آن را به دست آورید مثلا وقتی من مو خواهم تصویری با عرض ۱۰۰ پیکسل داشته باشم می توانم به این صورت ارتفاعی را که در آن تناسب عکس به هم نمی خورد پیدا کنم:

۷۷÷۱۳۷=۰٫۵۶۲
height÷۱۰۰=۰٫۵۶۲   —>   height=100×۰٫۵۶۲ —>  height=56.2

حال اگر من اندازه تصویر را با عرض ۱۰۰ پیکسل و ارتفاع ۵۶/۲ پیکسل تعریف کنم تصویری با همان تناسب تصویر اصلی به دست خواهیم آورد مانند زیر:

<img src=”http://www.funpatogh.com/learn_html.gif” width=”100″ height=”56″>

همانطور که در تصویر روبرو می بینید تناسب تصویر تا حد زیادی رعایت شده است. البته ما از ۰٫۲ پیکسل در ارتفاع تصویر چشم پوشی کردیم.

برای راحتی کار می توانید تصاویر را با استفاده از برنامه های گرافیکی مثل فتوشاپ، کارل دراو و… اندازه تصاویر را تغییر داده و بعداً در صفحه خود استفاده کنید. در این صورت کار شما راحت تر است و گذشته از راحتی وقتی عکسی را با یک برنامه گرافیکی کوچک می کنید سایز فایل عکس هم کوچکتر می شود و بارگذاری صفحه شما را طولانی نمی کند.

منبع : neopersia.org

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

برای ایجاد لینک از تگ زیر استفاده می کنیم:

<a href=”http://www.parscloob.com/” لینک</a>

تگ <a> نشانه لینک است. شناسه href مشخص کننده آدرس لینک می باشد، <a/> نشانه بسته شدن تگ است. متنی که بین این دو تگ ابتدایی و پایانی نوشته می شود متنی است که در صفحه شما به عنوان یک لینک دیده می شود. مثلاً اگر می خواهید به یک صفحه وب مثلاً صفحه اصلی سایت ما با این آدرس:   http://www.neopersia.org/html/index.html لینکی را در صفحه خود داشته باشید باید فرمان زیر را در قسمت body صفحه خود در جایی که می خواهید لینک به نمایش درآید قرار دهید:

<a href=”http://www.parscloob.com/” نمونه برای لینک</a>

لینک در صفحه شما به این صورت دیده می شود:

متن نمونه برای لینک

لینکی را که با فرمان بالا ساخته اید به صورت رنگی (بسته به تنظیمات مرورگر رنگ آن تعیین می شود) و زیرخط دار به وجود می آید. که این خصوصیات نشانه آن است که یک متن لینک است و وقتی که نشانگر ماوس را بر روی آن قرار دهید به شکل دست در می آید. البته هر متنی که رنگی بود و دارای زیر خط بود لزوماً نباید یک لینک باشد. شکل نشانگر ماوس در اینجا به کمک ما می آید.

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

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

در مثال زیر فرض بر این است که هر دو صفحه مبدأ و مقصد لینک در یک پوشه قرار دارند. برای نمونه سرفصل آموزش مقدماتی HTML در همان پوشه ای قرار دارد که این صفحه قرار دارد. نام این صفحه index.php است. برای ایجاد یک لینک در این صفحه می توانیم به اینگونه عمل کنیم:

<a href=”http://www.parscloob.com/” نمونه برای لینک</a>

لینک حاصل شده:

متن نمونه برای لینک

هر دو روش بالا یک نتیجه را دارند اما در روش دوم زحمت نوشتن کمتر است.

اگر شما شک دارید یا مطمئن نیستید که هر دو صفحه در یک پوشه قرار دارند حتماً از آدرس کامل استفاده کنید. چون در این روش مهم نیست که صفحات مربوط به چه سایتی باشند.

شناسه دیگری که می توانید در تگ لینک به کار ببرید title است. با استفاده از این شناسه می توانید عنوانی را برای لینک انتخاب کنید و این عنوان در هنگامی که بازدید کننده کاوس خود را روی لینک قرار می دهد به نمایش در نمی آید. به مثال زیر توجه کنید:

<a href=”http://www.parscloob.com/” title=”آموزش استفاده از استایل در صفحات وب”>آموزش CSS به زبان فارسی</a>

ماوس خود را روی لینک زیر قرار دهید تا نتیجه را مشاهده کنید:

آموزش CSS به زبان فارسی

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

منبع : neopersia.org