در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

آموزش HTML (اچ تی ام ال) قسمت 5 : سئوی تصاویر

با سلام و درود مجدد بر میگردیم سراغ ادامه مباحث HTML این بار در این مطلب بر روی تصاویر کار رو ادامه میدیم و همچنین اشاره ای میکنیم به(سئو) Seo تصاویر ، پس با ما همراه باشید.

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

  • صفت scr :

تگ img دارای attribute های مختلفی هست و یکی از این صفت ها که به کاربردن این تگ اجباری هست src هست که مخفف source هست یعنی آدرس یک تصویر این آدرس میتواند در سطح اینترنت باشد یا در سطح لوکال یعنی کامپیوتر خودتان ما در این درس بر روی لوکال مثال رو جلو میبریم به این صورت که در درایو D یک پوشه ای به نام itpro ایجاد کرده و تصاویر مربوط به این درس را در آنجا قرار میدهم. در کد زیر همانگونه که میبینید در نرم افزار Front page توسط تگ img عکس ها رو از درایو مربوطه فراخانی کردم ، یادتون باشه پسوند تصویر هم باید درج بشه و این خیلی مهم هست

<body>
<img src ="D:/itpro/1.jpg" /> <br />
<img src ="D:/itpro/2.jpg" /> <br />
<img src ="D:/itpro/3.png" /> <br />
</body>

آدرس تصویر به این صورت نوشته میشه البته خود نرم افزار front page بهمون کمک میکنه تا توسط url و پنجره زیر آدرس رو سریع تر و راحت تر پیدا کنیم.

آموزش HTML

سپس از منو File گزینه Save as رو انتخاب میکنیم و مطابق تصویر با پسوند htm یا html ذخیره میکنیم.

قدم به قدم با HTML

قرار دادن تصویر در HTML

پس از ذخیره کردن بلافاصله با پنجره زیر روبرو میشویم ، زمانی این پنجره برای ما به نمایش در می آید که تصاویر ما در آدرسی متفاوت از محل ذخیره فایل htm دارد بنابر این اگر ادرس ها یکی باشد پنجره زیر به نمایش در نمی آید.

آموزش سریع HTML

در پنجره فوق شما میتوانید ادرس تصاویر را با فایل htm یکی کرده یا آدرس آنها را جابجا کنید و در یک پوشه مشخص قرار دهید و یا اینکه پسوند آنها را در همین جا یکسان کرده و حتی میتوانید کیفیت تصویر را دستخوش تغییرات دهید تا برای تمام تصاویرتان یکسان سازی انجام گیرد. به عنوان مثال من با دگمه Picture File Type و انتخاب گزینه Gif تصاویر را با این پسوند انتخاب کردم و پس از ok کردن تصاویر با تغییرات خواسته شده در محلی قرار میگیرند که فایل اصلی ما که با پسوند htm ذخیره شده بود قرار میگیرند و بلافاصه تغییری در آدرس url تصاویر ایجاد شده که در کد زیر میتوانید ببینید

<body>
<img src ="1.gif" /> <br />
<img src ="2.gif" /> <br />
<img src = "3.gif" /> <br />
</body>

همانگونه میبینید آدرس ها خلاصه شده چون دقیقاً در محل ذخیره فایل اصلی قرار گرفته اند البته شما میتوانید تصاویر را در همان درایو و با همان آدرس ذخیره کنید حتی شما میتوانید از تصاویری استفاده کنید که در سطح اینترنت ذخیره شده اند ولی در آن حالت باید آدرس کامل URL را قرار دهید در ادامه فایل test.htm را با مرورگر IE باز میکنم.

تگ تصاویر برای html

  • صفت Title:

این صفت یک عنوان برای تصویر مورد نظر تعیین می کند ، و در صورتی که موس را بر روی تصویر مورد نظر نگه داریم متن جلوی title به عنوان توضیحات یا Tooltip نمایش داده خواهد شد

<img src ="4.jpg" height="90" width="140" title="this is a test" /><br />
  • صفت alt:

گاهاً در دنیای اینترنت یا صفحات وب پیش می آید که یک تصویر به هر دلیلی نمیتواند load شود اگر شما برنامه نویس خوبی باشید از این صفت استفاده میکنید به عنوان متن ثانویه عکس در صفت یعنی اگر به هر دلیلی عکس مورد نظر در سیستم کاربر نشان داده نشود این متن به جای عکس نشان داده خواهد شد ، با وجود اینکه alt اجباری نمی باشد ولی برای XHTML باید از این صفت استفاده نمود.

<img src ="2.gif" alt ="my name is farhad"/> <br />

صفت alt برای تگ img

  • صفت های Height و Width :

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

<img src ="1.gif" height="110" width="120" /><br />

تگ ها در آموزش طراحی سایت

  • صفت Border:

یکی دیگر از صفت های img حاشیه تصاویر است که با نام border میتوانید به آند دست پیدا نمایید این صفت در حالت By default صفر(0) است ولی اگر شما آن را تغییر دهید دور تصویر شما را نسبت به اندازه ای که تایین میکنید فرا خواهد گرفت البته اگر میخواهید تصویری را به صورت لینک اضافه کنید این حاشیه نسبت به مرورگر تغییر رنگ میدهد و اگر میخواهید border را بردارید باید این صفت را برابر با 0 قرار دهید.

<body>
this is attribute border:<br />
<img src ="4.jpg" height="90" width="140" border="5" /><br />
</body>

صفت border برای تگ img در HTML

  • تلفیق تگ های <img> و <a> :

حتماً دیدید که در برخی صفحات وب روی یک سری تصاویر وقتی کلیک میکنید به صفحه دیگری میروید پس این الزام وجود ندارد که حتماً لینک ها روی نوشته ها تنظیم شوند پس وقتی موس را روی تصویری میبریم موس به شکل دست در می آید و پس از کلیک به لینک دیگری میرود ، برای این منظور عکس رو باید به عنوان TEXT یک لینک معرفی نمود ، مثال زیر گویای این داستان است:

<body>
use image a link:<a href ="http://www.web.tosinso.com"><img src="4.jpg"></a><br />
<a href ="http://www.tosinso.com"><img src="8.jpeg"></a><br />
</body>

استفاده از تصاویر در html

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

SEO برای تصاویر (search engine optimization)


شاید با این واژه آشنایی داشته باشید ولی قبل از شروع بهتر است لینک زیر را بخوانید تا آشنایی شما با Seo بیشتر شود.

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

قدم اول برای این مهم استفاده از صفت alt در تگ img است همان صفتی که در همین مقاله به آن اشاره شد که این صفت یکی از معیار ها و فاکتور های مهم در موتور های جستجو مثل گوگل است

همانگونه که واضح هست موتور های جستجو دارای حس ادراک نیستند و نمیتوانند تشخیص دهند که این تصویر دارای موضوع فوتبال است و آن را در گروه های ورزش و فوتبال قرار دهد و ما انسانها با نگاه کردن به تصویر متوجه میشویم که این تصویر چیست ولی کامپیوتر ها دارای منطق خاص خود هستد و از روی متن صفت Alt متوجه موضوع تصویر میشوند. پس یادتان باشد حتماً تمام تصاویرتان را با صفت ALT مقدار دهی کنید و همچنین مقداری که در Alt قرار میدهید مطابق با موضوع تصویر باشد.

Seo  برای تصاویر

<body>
<pre><img src="Flower.jpg" alt="گل قرمز" />
</body>

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

گام بعدی در Seo تصاویر سرعت(Loading) یا لود صفحه است یادتان باشد اگر زمان لود شدن صفحه وبتان زیاد باشد امتیاز را ازدست دادید یعنی مدت زمانیکه صفحه وبسایت شما بطور کامل لود میشود باعث بالارفتن رتبه و همچنین کاهش رتبه میشود ، حجم تصاویر یکی از علل هایی است که لود تصویر بالا میرود ، یکی از راه کار های کاهش حجم عکس ها این است که تصویر را با نرم افزار فوتوشاپ باز کرده و آن را از منو فایل و سپس save For Werb ذخیره کنید یا اینکه یک تصویر کوچک قرار دهید و آن تصویر را لینک کنید به تصویر بزرگتر خودش دقیقاً همان تلفیق تگ های <img> و <a> پس همواره سعی بر این داشته باشید صفحات ساده و کم حجم و مرتبی داشته باشید که این موضوع کمک بزرگی است برای دیده شدن سایتتان در دنیای مجازی .

ضمناً همانگونه که شاهد هستید سایت Itpro برای قرار دادن تصویر از کلید ترکیبی Ctrl+G یا "تصویر" در سایت استفاده میکند و پس از اینکه شما تصویرتان را قرار دادید پایین پنجره قسمتی قرار دارد به نام توضیحات و این برابر با صفت ALT در آموزش ما هست و اگر متنی را در آن کادر قرار دهید این متن به موتور های جستجو کمک میکندتا موضوع و مطلب شما در فهرست قرار گیرند و همچنین این خود یک SEO محسوب میشود.

قرار دادن تصویر در سایت

با نظر ها و پیشنهاد ها و انتقادات و تشویق های شما این داستان همچنان ادامه دارد.

نویسنده: فرهاد خانلری

منبع : جزیره سئو وب سایت توسینسو

هرگونه نشر و کپی برداری با ذکر نام نویسنده و منبع بلامانع است.

#مقدمات_یادگیری_صفحات_وب #آموزش_تگ_ها_در_html #آموزش_html #tag_ها_در_html #آموزش_طراحی_وب_سایت #seo_در_تصاویر_html #تگ_img_برای_استفاده_در_html #استفاده_از_تگ_های_html #سئو_برای_تصاویر #آموزش_tag_ها_در_html
عنوان
1 آموزش HTML (اچ تی ام ال) قسمت 1 : انواع تگ رایگان
2 آموزش HTML (اچ تی ام ال) قسمت 2 : انواع تگ رایگان
3 آموزش HTML (اچ تی ام ال) قسمت 3 : لینک ها رایگان
4 آموزش HTML (اچ تی ام ال) قسمت 4 : لینک و تصاویر رایگان
5 آموزش HTML (اچ تی ام ال) قسمت 5 : سئوی تصاویر رایگان
6 آموزش HTML (اچ تی ام ال) قسمت 6 : طراحی جدول رایگان
7 آموزش HTML (اچ تی ام ال) قسمت 7 : استفاده از رنگ ها رایگان
8 آموزش HTML (اچ تی ام ال) قسمت 8 : موجودیت ها و کارکتر های خاص رایگان
9 آموزش HTML (اچ تی ام ال) قسمت 9 : صفحه وب با جدول و لینک رایگان
10 آموزش HTML (اچ تی ام ال) قسمت 10 : استفاده از FrameSet رایگان
زمان و قیمت کل 0″ 0
4 نظر
fana

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

Gelareh Soluki

باشه ممنون

prober

از قسمت seo تصاویر بهره بردم ممنون

احسان

وقتی تصاویر ریسپانسیو باشن دیگه لازم نیست ابعاد تعیین کرد

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره تابستانه می تونی امروز ارزونتر از فردا خرید کنی ....