تصویری با HTML اضافه کنید

نویسنده: Christy White
تاریخ ایجاد: 4 ممکن است 2021
تاریخ به روزرسانی: 1 جولای 2024
Anonim
15: نحوه درج تصاویر با استفاده از HTML و CSS | آموزش HTML و CSS | آموزش HTML | مبانی CSS
ویدیو: 15: نحوه درج تصاویر با استفاده از HTML و CSS | آموزش HTML و CSS | آموزش HTML | مبانی CSS

محتوا

افزودن تصاویر به نمایه وب سایت یا شبکه اجتماعی شما یک روش عالی برای آراستن صفحه وب شما است. HTML (HyperText Markup Language) توابع زیادی برای ایجاد صفحات وب دارد ، اما خوشبختانه کدی که برای افزودن تصاویر به آن نیاز دارید بسیار دشوار نیست.

گام برداشتن

روش 1 از 1: درج تصاویر با HTML

  1. تصویر خود را در یک وب سایت میزبان رایگان مانند Photobucket یا TinyPic بارگذاری کنید که امکان اتصال داغ را فراهم می کند. لینک داغ امکان پیوند مستقیم تصویر با سرور وب سایت را فراهم می کند. برخی از ارائه دهندگان این امر را ممنوع کرده اند زیرا اتصال سریع از پهنای باند آنها استفاده می کند و فضای سرورهای آنها را اشغال می کند.
    • اگر حساب میزبانی پولی دارید ، تصاویر را مستقیماً در سروری که وب سایت شما در آن قرار دارد بارگذاری کنید. این همیشه قابل اعتمادتر از یک سایت رایگان است و اصلاً نباید گران باشد.
  2. سند جدیدی را در یک ویرایشگر متن باز کنید (به عنوان مثال، Notepad / Notepad) یا صفحه ای را در وب سایت / نمایه خود باز کنید که می توانید کد HTML را مستقیماً تغییر دهید.
  3. با شروع کنید img برچسب زدن img برچسب خالی است ، یعنی نیازی به برچسب بسته نیست. با این حال ، برای اعتبار سنجی XHTML هنوز می توانید یک فاصله و یک بریدگی مقابل آن قرار دهید بزرگتر از امضاء کردن.
    • img />
  4. بسیاری از ویژگی های موجود وجود دارد ، اما فقط یکی از آنها لازم است:src. این مکان / آدرس ، یا همچنین URL تصویر شماست.
    • img src = "URL تصویر" />
  5. بعد شما باید ارتفاع افزودن صفت در صورت عدم بارگیری تصویر ، این یک متن جایگزین را نشان می دهد. این همچنین خدمتی برای افراد کم بینا است که از صفحه خوان ها استفاده می کند.
    • اگر نشانگر را روی یک تصویر بکشید ، این متن همچنین به عنوان یک راهنمای ابزار نشان داده می شود ، اما این فقط در اینترنت اکسپلورر وجود دارد. راه حلی که با همه مرورگرها کار می کند (فایرفاکس) و دیگران) به آن عنوان صفتی که علاوه بر استفاده می شود ارتفاع. (اگر نمی خواهید تصویر دارای راهنمایی باشد می توانید مورد دوم را حذف کنید).

به عنوان مثال:img src = "URL تصویر" alt = "فقط در موارد" عنوان = "نکته ابزار" />


  1. اکنون می توانید اندازه تصویر را با قد و عرض و با تعیین پیکسل یا درصد. توجه داشته باشید که تغییر اندازه در این روش فقط باعث تغییر اندازه نمای می شود ، نه اندازه تصویر. برای کوتاه کردن زمان بارگیری یک تصویر ، بهتر است به ویژه با تصاویر بزرگ ، اندازه آنها را از قبل با نرم افزار ویرایش عکس یا با یک سرویس آنلاین مانند PicResize.com تغییر دهید.
    • img src = "URL تصویر" alt = "فقط در مورد" عنوان = "راهنمای ابزار" قد = "50٪" عرض = "50٪" />
    • img src = "URL تصویر" alt = "فقط در صورت" title = "راهنمای ابزار" height = "25px" width = "50px" />

نکات

  • مقدار این ویژگی ها یا به صورت پیکسل یا به صورت درصد از 1-100٪ داده می شود.
  • تصویر را می توان با استفاده از ویژگی های مختلف قالب بندی مانند بالا ، پایین ، وسط ، راست ، چپ و غیره در هر جای صفحه وب قرار داد.
  • از ویژگی hspace برای قرار دادن فضای افقی در سمت چپ و راست تصویر استفاده می شود ، در حالی که از ویژگی vspace برای ایجاد فضای در بالا و پایین تصاویر و اشیا other دیگر استفاده می شود.
  • زیاد با تصاویر افراط نکنید. به نظر می رسد کثیف و غیرحرفه ای است.
  • تصاویر GIF برای آرم ها یا کارتون ها مناسب هستند ، اما این نوع فایل برای عکس ها و تصاویر دیگر با رنگ های بسیار کمتر مناسب است.
    • تصاویر GIF فقط از رنگ 8 بیتی با حداکثر 256 رنگ برای یک تصویر پشتیبانی می کنند. بنابراین انتظار می رود که بازتولید یک تصویر رنگی یا عکس 16 یا 24 بیتی به این خوبی نباشد.
    • تصاویر GIF همچنین از شفافیت پشتیبانی می کنند. یک بیت شفافیت امکان پذیر است ، به این معنی که می توان یک رنگ را شفاف کرد.
    • interlacing همچنین توسط تصاویر GIF پشتیبانی می شود ، به این معنی که بازدید کننده سایت قبل از بارگذاری کامل تصویر ، از شکل ظاهری آن ایده می گیرد.
    • قالب GIF از انیمیشن نیز پشتیبانی می کند.
  • اطمینان حاصل کنید که URL فرمت فایل تصویر را نشان می دهد (.webp .gif و غیره).

هشدارها

  • Hotlink نکنید!