افزودن عکس به صفحات html

ج . محمد / ۲۰ اسفند ۹۳

افزودن عکس به صفحات html

برای افزودن عکس به صفحه html خود می توانیم از تگ <img> استفاده کنیم. در مورد تگ عکس یا همون <img> بگم تگی هست که نیاز به بسته شدن نداره! و تو این تگ از صفت های (Attribute) ؛

alt = برای کاربرانی که به دلایلی نمی توانند عکس را مشاهده کنند یا عکس بارگذاری نمیشه ، مقدار این صفت برای کاربر بعنوان اطلاعات جایگزین نشون داده می شود!

src= مقدار این صفت برابرست با آدرس عکس مورد نظرمون. خب برای درک بیشتر مطلب به مثال زیر دقت کنید:

<img src="addressax.jpg" alt="tozih dar mored ax" />

<!--image format
src="addressax.png"
src="addressax.gif"
-->

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

چطور به عکس های خود اندازه بدهیم ؟
برای نمایش عکس در اندازه دلخواه خود می توانیم از صفت های width ,height  تگ عکس استفاده کنیم. نمونه کد را برای درک بیشتر ببینیم.

<img src="addressax.jpg" width="300px" height="200px" alt="tozih ax" /> 

با استفاده از کد بالا ما یک عکس 300 پیکسل در 200 پیسکل ایجاد کردیم.

چطور به عکس های خود لینک بدهیم ؟

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

برای افزودن لینک در html این مطلب را بخوانید. برای لینک دادن به عکس باید از دو تگ <a> و <img> با هم استفاده کنیم ، به صورتی که تگ عکس داخل تگ لینک باشد.به مثال دقت کنید.

<a href="http://1coder.blog.ir" title="html tutorial">
<img src="mylogo.png" alt="1coder blog" />
</a>

موفق باشید.

نظرات ۳

  1. sara

    سلام میشه کمکم کنید تا بتونم یه منو با زیر منو ایجاد کنم؟
    مثل این سایت میخوام http://uca.ac.ir/
    فقط با زبان html
  2. author

    ج . محمد

    سلام ، با تلگرام در تماس باشید یا ایمیل خود را به صورت خصوصی ارسال کنید.
    میتونید از این آموزش این صفحه دیدن کنید.
    ادرس تلگرام : tg://resolve?domain=dev_bal
  1. sara

    سلام من وقتی عکس میذار میخوام پایینش جدول بسازم اما وقتی جدول میسازم کلی فاصله بین عکس و جدول میوفته چیکا کنم اون فاصله ازبین بره؟
  2. author

    ج . محمد

    سلام ، خوب میشد کدتون رو میذاشتین تا ببینم.می توانید از نمونه زیر استفاده کنید. (اگر این مطلب مفید بود دکمه میپسندم را کلیک کنید!)

    ax
    نام شهرت شغل محل زندگی
    محمد جامو فرونت اند خونه بابا
    ایجاد جدول با اچ تی ام ال
    <img src="http://www.dailymobile.net/wp-content/uploads/wallpapers/landscape-wallpapers-320x240/beautiful_nature.jpg" alt="ax">
    <table>
          <caption>
        <a href="http://1coder.blog.ir/tag/html" title="html table">ایجاد جدول با اچ تی ام ال</a>   </caption>
      <thead>
        <tr class="title">
          <td>نام</td>
          <td>شهرت</td>
          <td>شغل</td>
          <td>محل زندگی</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>محمد</td>
          <td>جامو</td>
          <td>فرونت اند</td>
          <td>خونه بابا</td>
        </tr>
      </tbody>
    </table>
    
  1. ❤☀⊰ طنز کوب ⊱☀❤

    خیلی ازت ممنونم 
    خیلی خیلی خیلی فدات
  2. author

    ج . محمد

    خاهش ، موفق باشی

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی