بازدید: ٢۵٩

قالب بندی تصاویر (آموزش HTML & CSS)

بازگشت به صفحه اصلی آموزش تصویری HTML & CSS

 

1- حال خصوصیت alt را به تگ img اضافه کنید:

 

قالببندی تصویر

 

متن alt این امکان را به کاربر می دهد تا تصاویری که از نظر بصری خراب شده اند، با خواندن آنها تشخیص داده و شناسایی شوند. همچنین باعث می شود تا موتورهای جستجو مطالب و محتویات بصری را ایندکس کنند.

2- حال خصوصیات vspace و hspace را نیز بصورت زیر اضافه کنید:

 

خصوصیت vspace

 

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

3- حال خصوصیات border را اضافه کنید:

 

خصوصیات border

 

تصاویر گرافیکی قالببندی

 

4- صفحه را ذخیره کرده و آن را در مرورگر نمایش دهید. اکنون متن شما باید با لبه بالایی تصویر شما ترازبندی شده باشد:

 

ترازبندی متن

 

اگر مقدار hspace برابر با 12 باشد، یک فاصله افقی به اندازه 12 پیکسل در اطراف تصویر گرافیکی شما ایجاد می کند که با هیچ چیزی اشغال نخواهد شد. اگر مقدار border برابر با 1 باشد، خط حاشیه ای به اندازه 1 پیکسل در اطراف عکس ترسیم می کند.

5- اشاره گر ماوس را بر روی تصویر گرافیکی ببرید تا متن Alt را مشاهده کنید:

 

متن alt

 

6- به پوشه dogpics بروید. مرورگر شما باید باز شده باشد. 

7- تصویر German Shepherds را تحت نام shepherds.gif در پوشه graphics ذخیره کنید.

8- تصویر Yorkshire Terrier را تحت نام yorkie.gif در پوشه graphics ذخیره کنید.

9- تصویر shepherds.gif را در صفحه German Shepherds و در زیر عنوان(heading) اضافه کنید.

10- تصویر yorkie.gif را در صفحه Yorkshire Terrier و در زیر عنوان(heading) اضافه کنید.

11- در صفحه German Shepherds متن زیر را بعنوان یک پاراگراف در زیر تصویر گرافیکی اضافه کنید:

German shepherds are smart dogs

12- در صفحه Yorkshire Terrier متن زیر را بعنوان یک پاراگراف در زیر تصویر گرافیکی اضافه کنید:

Yorkshire Terriers  are Cute

13- در هردو صفحه، متن را همانند صفحه Chesapeake Bay Retrievers با اطراف تصویر گرافیکی ترازبندی کنید.

14- در هردو صفحه حاشیه ای به اندازه 1 پیکسل، vspaceای به اندازه 4 پیکسل و hspaceای به اندازه 12  پیکسل اضافه کنید.

15- هردو صفحه را ذخیره کنید.

 

بازگشت به صفحه اصلی آموزش تصویری HTML & CSS

طراحی سایت و سئو توسط ضابط