در درس قبلی آموختید که به چه صورت یک تصویر را به عنوان پس زمینه قرار بدهید . در این بخش می خواهم نحوه وارد کردن یک تصویر در بین متن یا هر کجای صفحه را آموزش بدهم . برای وارد کردن تصویر می توانیم از تگ
استفاده کنیم .
بین "" src باید نام تصویری که می خواهید در صفحه قرار بدهید را وارد کنید . و اما ویژگی یا صفت alt : اجاز بدهید کمی بیشتر در مورد این صفت برای شما توضیح بدهم .
تگ alt، متن جایگزینی است که در صورت لود شدن یا نشان یک گرافیک روی صفحه ظاهر می‌شود. این تگ، مکان دیگری برای قرار گرفتن کلیدواژه‌ها به منظور بهبود رتبه بندی موتور جستجوگر است. حتی اگر سایتتان محتوای مناسبی دارد و این محتوا به خوبی نیز کد شده، استفاده از تگ alt باعث تقویت کارایی کلیدواژه‌های مهم می‌شود.
نکته دیگر اینکه برای تاثیر گذاری بیشتر، این تگ ها باید برای هر عکس واحدی، مجزا در نظر گرفته شوند.
زمانی که بازدید کنندگان سایت با غیر فعال کردن قابلیت نمایش گرافیک از مرورگر مبتنی بر متن استفاده می‌کنند، به کاربردن تگ alt در این شرایط بسیار کاربردی است. و این موضوع تگ alt را با اهمیت کرده است
روش وارد کردن تصویر به صورت زیر می باشد .
لوگوی شرکت طلوع فن آوران آسا
در صورتیکه تصویر بالا به صورت کامل لود نشه متن داخل صفت alt نمایش داده می شود . این روش در seo نیز کاربرد دارد . چنانچه کاربران در قسمت تصاویر گوگل نام لوگوی شرکت طلوع فن آوران آسا را جستجو کنند در صورتیکه صفت alt به درستی در تصاویر استفاده شده باشد به عکس مورد نظر میرسند . تغییر اندازه تصاویر در HTML
در بعضی از مواقع نیاز دارید تا اندازه تصویر وارد شده را با در نظر گرفتن ابعاد صفحه تغییر بدهید . برای انجام اینکار از دو ویژگی Width برای تغییر عرض و height برای تغییر ارتفاع در بین تگ img استفاده می شود
لوگوی شرکت طلوع فن آوران آسا
ابعاد تصاویر را به دلخواه می توانید تغییر بدهید
تراز تصویر در صفحه
همیشه نیاز داریم تا تصویر وارد شده را به صورت دقیق در یک قسمت مشخص شده قرار بدهیم . به عنوان مثال چپ ، راست ، بالاتر از متن و ....
برای انجام اینکار از ویژگی align با مشخصه های left چپ | right راست | bottom پایین تر از متن | middle وسط | top بالاتر از متن استفاده می شود. به کدهای زیر توجه کنید متوجه می شوید .
منبع: learning.asarayan.com
HTML:
<img src="/pic.jpg" alt="لوگو شرکت طلوع فن آوران آسا" />استفاده کنیم .
بین "" src باید نام تصویری که می خواهید در صفحه قرار بدهید را وارد کنید . و اما ویژگی یا صفت alt : اجاز بدهید کمی بیشتر در مورد این صفت برای شما توضیح بدهم .
تگ alt، متن جایگزینی است که در صورت لود شدن یا نشان یک گرافیک روی صفحه ظاهر می‌شود. این تگ، مکان دیگری برای قرار گرفتن کلیدواژه‌ها به منظور بهبود رتبه بندی موتور جستجوگر است. حتی اگر سایتتان محتوای مناسبی دارد و این محتوا به خوبی نیز کد شده، استفاده از تگ alt باعث تقویت کارایی کلیدواژه‌های مهم می‌شود.
نکته دیگر اینکه برای تاثیر گذاری بیشتر، این تگ ها باید برای هر عکس واحدی، مجزا در نظر گرفته شوند.
زمانی که بازدید کنندگان سایت با غیر فعال کردن قابلیت نمایش گرافیک از مرورگر مبتنی بر متن استفاده می‌کنند، به کاربردن تگ alt در این شرایط بسیار کاربردی است. و این موضوع تگ alt را با اهمیت کرده است
روش وارد کردن تصویر به صورت زیر می باشد .
HTML:
<!DOCTYPE html><html><h3>لوگوی شرکت طلوع فن آوران آسا </h3><img src="/logo.gif" alt="لوگوی شرکت طلوع فن آوران آسا" /></body>
</html>لوگوی شرکت طلوع فن آوران آسا
در صورتیکه تصویر بالا به صورت کامل لود نشه متن داخل صفت alt نمایش داده می شود . این روش در seo نیز کاربرد دارد . چنانچه کاربران در قسمت تصاویر گوگل نام لوگوی شرکت طلوع فن آوران آسا را جستجو کنند در صورتیکه صفت alt به درستی در تصاویر استفاده شده باشد به عکس مورد نظر میرسند . تغییر اندازه تصاویر در HTML
در بعضی از مواقع نیاز دارید تا اندازه تصویر وارد شده را با در نظر گرفتن ابعاد صفحه تغییر بدهید . برای انجام اینکار از دو ویژگی Width برای تغییر عرض و height برای تغییر ارتفاع در بین تگ img استفاده می شود
HTML:
<!DOCTYPE html><html><h3>لوگوی شرکت طلوع فن آوران آسا </h3><img src="/logo.gif" alt="لوگوی شرکت طلوع فن آوران آسا" width="100px" height="100px" /></body></html>لوگوی شرکت طلوع فن آوران آسا
ابعاد تصاویر را به دلخواه می توانید تغییر بدهید
تراز تصویر در صفحه
همیشه نیاز داریم تا تصویر وارد شده را به صورت دقیق در یک قسمت مشخص شده قرار بدهیم . به عنوان مثال چپ ، راست ، بالاتر از متن و ....
برای انجام اینکار از ویژگی align با مشخصه های left چپ | right راست | bottom پایین تر از متن | middle وسط | top بالاتر از متن استفاده می شود. به کدهای زیر توجه کنید متوجه می شوید .
HTML:
<!DOCTYPE html><html><h3>تراز متن نسبت به محتوای صفحه </h3>این لوگو پایین تر از متن<img src="/logo.gif" alt="لوگوی شرکت طلوع فن آوران آسا" align="bottom" width="30px" height="30px" /> قرار می گیرداین لوگو وسط متن<img src="/logo.gif" alt="لوگوی شرکت طلوع فن آوران آسا" align="middle" width="30px" height="30px" /> قرار می گیرد این لوگو بالاتر از متن<img src="/logo.gif" alt="لوگوی شرکت طلوع فن آوران آسا" align="middle" width="30px" height="30px" /> قرار می گیرد این لوگو سمت راست متن<img src="/logo.gif" alt="لوگوی شرکت طلوع فن آوران آسا" align="right" width="3px" height="30px" /> قرار می گیرد این لوگو سمت چپ متن<img src="/logo.gif" alt="لوگوی شرکت طلوع فن آوران آسا" align="left" width="30px" height="30px" /> قرار می گیرد </body></html>منبع: learning.asarayan.com