بهترین سایت برای توسعه دهندگان وب

دروس HTML5

شروع HTML مقدمه HTML ویرایشگران HTML مثالهای اساسی HTML المان های HTML ویژگی های HTML عناوین HTML بندهای HTML سبک های HTML قالب بندی HTML نقل قول های HTML نظرات HTML رنگهای HTML HTML و CSS پیوندهای HTML تصاویر HTML جداول HTML لیست های HTML بلوک های HTML کلاس های HTML شناسه های HTML فریم های HTML HTML و JavaScript مسیرهای پرونده HTML HTML قسمت هدینگ چیدمان های HTML HTML پاسخگو کد رایانه HTML موجودیت HTML نمادهای HTML رمزگذاری HTML رمزگذاری URL HTML HTML و XHTML

HTML فرم ها

فرم های HTML عناصر فرم HTML انواع ورودی HTML صفات ورودی HTML

HTML5

مقدمه HTML5 پشتیبانی HTML5 عناصر جدید HTML5 عناصر معنایی HTML5 مهاجرت از HTML4 راهنمای سبک HTML5

HTML گرافیک

HTML Canvas HTML SVG

HTML رسانه

HTML ویدیوی HTML صوت HTML افزونه های HTML یوتیوب HTML

HTML API

مکان جغرافیایی HTML کشیدن / رها کردن HTML HTML ذخیره وب HTML کارهای وب HTML و SSE

HTML مثال

مثالهای HTML آزمون ها HTML تمرینات HTML گواهی HTML خلاصه HTML قابلیت دسترسی به HTML

HTML منابع

لیست برچسب های HTML صفات HTML صفات جهانی HTML رویدادهای HTML رنگهای HTML کانواس HTML صوتی / تصویری HTML نسخه معتبر HTML مجموعه نویسه های HTML رمزگذاری URL HTML رمزگذاری زبان HTML پیام های HTTP روشهای HTTP مبدل PX به EM میانبرهای صفحه کلید

HTML5 آموزش برای مبتدیان

تصاویر HTML



تصاویر می توانند طراحی و ظاهر یک صفحه وب را بهبود بخشند.


مثال

<img src="pic_trulli.jpg" alt="Italian Trulli">
خودتان آزمایش کنید »

مثال

<img src="img_girl.jpg" alt="Girl in a jacket">
خودتان آزمایش کنید »

مثال

<img src="img_chania.jpg" alt="Flowers in Chania">
خودتان آزمایش کنید »

نحو تصویر HTML

در HTML ، تصاویر با استفاده از برچسب <img> تعریف می شوند.

برچسب <img> خالی ، فقط حاوی ویژگی ها است و هیچ بسته ای ندارد

ویژگی src URL (آدرس وب) تصویر را مشخص می کند:

توجه: هنگام بارگیری یک صفحه وب ؛ در آن لحظه ، مرورگر است که تصویر را از یک وب سرور می گیرد و آن را به صفحه وارد می کند. بنابراین ، اطمینان حاصل کنید که تصویر در رابطه با صفحه وب در همان نقطه باقی مانده است ، در غیر این صورت بازدید کنندگان شما نماد لینک شکسته را دریافت می کنند. اگر مرورگر نتواند تصویر را پیدا کند ، نماد لینک شکسته و متن alt را نشان می دهد.

<img src="url">

ویژگی Alt

ویژگی altمتن جایگزینی را برای تصویر فراهم می کند اگر کاربر به هر دلیلی نمی تواند آن را مشاهده کند: به دلیل اتصال اینترنت کند ، خطا در ویژگی src یا اگر کاربر از صفحه خوان (صفحه خوان) استفاده می کند.

مقدار ویژگی alt باید تصویر را توصیف کند ، به عنوان مثال چه چیزی روی آن است به تصویر کشیده شده:

مثال

<img src="img_chania.jpg" alt="عکس گل زیبا">
خودتان آزمایش کنید »

اگر مرورگر نتواند تصویر را پیدا کند ، مقدار ویژگی alt را نمایش می دهد :

مثال

<img src="wrongname.gif" alt="گل زیبای من">
خودتان آزمایش کنید »

توجه داشته باشید: ویژگی altضروری است. بدون او صفحه وب معتبر در نظر گرفته نخواهد شد.


اندازه تصویر - Width و Height - عرض و ارتفاع

می توانید از ویژگی style برای تعیین عرض و ارتفاع تصاویر استفاده کنید

مثال

<img src="img_girl.jpg" alt="دختری با کاپشن" style="width:500px;height:600px;">
خودتان آزمایش کنید »

متناوباً ، می توانید از ویژگی های width یا height استفاده کنید:

مثال

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
خودتان آزمایش کنید »

ویژگی های width یا height همیشه عرض و ارتفاع را با پیکسل در نظر می گیرند

توجه داشته باشید: همیشه عرض و ارتفاع تصویر را در آن بگنجانید. اگر عرض و ارتفاع مشخص نشده باشد ، هنگام بارگیری تصویر ممکن است صفحه سوسو بزند.


عرض و ارتفاع یا سبک؟

ویژگی های width, height و styleدر HTML معتبر هستند

با این حال ، توصیه می کنیم از ویژگی styleاستفاده کنید زیرا از تغییر اندازه تصاویر در صفحه های سبک جلوگیری می کند:

مثال

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 100%;
}
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>
</html>
خودتان آزمایش کنید »

تصاویر در پوشه دیگری

اگر آدرس به درستی تعیین نشده باشد ، مرورگر انتظار دارد که تصویر را در همان پوشه صفحه وب پیدا کند.

اگر تصاویر خود را در یک زیر پوشه دارید ، باید نام پوشه را در ویژگی src وارد کنید :

مثال

<img src="/images/html5.gif" alt="نماد HTML5" style="width:128px;height:128px;">
خودتان آزمایش کنید »

به طور معمول ، پوشه های تصویر img یا تصاویر نامگذاری می شوند.


تصاویر موجود در سرور دیگر

برخی از وب سایت ها تصاویر خود را در سرورهای اختصاصی تصویر ذخیره می کنند.

در واقع ، با تعیین مسیر کامل می توانید از هر آدرس وب در جهان به تصاویر دسترسی پیدا کنید :

مثال

<img src="https://www.farsiw3.ir/images/w3schools_green.jpg" alt="farsiw3.ir">
خودتان آزمایش کنید »

می توانید اطلاعات بیشتر در مورد مسیرهای پرونده را در فصل فایلهای HTML قرار دهید.


تصاویر متحرک

HTML اجازه GIF های متحرک را می دهد:

مثال

<img src="programming.gif" alt="مرد کامپیوتر" style="width:48px;height:48px;">
خودتان آزمایش کنید »

تصویر به عنوان پیوند

برای استفاده از یک تصویر به عنوان پیوند ، برچسب <img> را درون برچسب <a> قرار دهید:

مثال

<a href="default.asp">
  <img src="smiley.gif" alt="HTML آموزش" style="width:42px;height:42px;border:0;">
</a>
خودتان آزمایش کنید »

توجه داشته باشید: border:0; به IE9 (و موارد دیگر) اضافه شده است نسخه های اولیه) حاشیه ای در اطراف تصویر نمایش نمی دهند (زمانی که تصویر پیوند است).


تصویر شناور

از ویژگی float در CSS استفاده کنید تا تصویر در سمت راست یا چپ متن شناور شود:

مثال

<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
خودتان آزمایش کنید »
نکته : : برای کسب اطلاعات بیشتر در مورد CSS Float ، آموزش CSS Float ما را بخوانید.

آموزش CSS Float.


صفحه خوان HTML (صفحه خوان)

صفحه خوان برنامه ای است که کد HTML را می خواند ، متن را تبدیل می کند و اجازه می دهد کاربر "گوش کند" به محتوا. صفحه خوان ها برای افراد معلول مفید هستند چشم انداز یا برای یادگیری بسیار مفید هستند


خلاصه بخش

  • از المان<img> در HTML برای تعریف تصویر استفاده کنید
  • از المان src در HTML برای برای تعیین آدرس اینترنتی تصویر استفاده کنید
  • از المان alt در HTML برای تعریف متن جایگزین اگر امکان نمایش آن وجود ندارد استفاده کنید
  • از ویژگی width و height برای تعیین اندازه تصویر استفاده کنید
  • از خصوصیات CSS مانند width و height برای تعیین اندازه تصویر (به صورت جایگزین) استفاده کنید
  • از ویژگی CSS استفاده کنید floatبرای شناور کردن تصویر مورد نظر خود
  • از المان<map> در HTML برای تعریف تصویر نقشه
  • از المان <area>در HTML برای تعریف تعاملی مناطق روی تصویر نقشه استفاده کنید
  • از المان <img> و ویژگی usemap اشاره به نقشه-تصویر استفاده کنید
  • از المان<picture>برای نمایش تصاویر متفاوت در دستگاه های متفاوت استفاده کنید

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


تمرینات HTML

خود را امتحان کنید

تمرین:

از ویژگی های تصویر HTML برای تنظیم اندازه تصویر روی 250 پیکسل عرض و 400 پیکسل ارتفاع استفاده کنید.

<img src="scream.png" ="250" ="400">

شروع کنید


برچسب های تصویر HTML

برچسب توضیح
<img> تصویر را تعریف می کند
<map> تصویر نقشه را تعریف می کند
<area> منطقه قابل کلیک در داخل تصویر نقشه را مشخص می کند
<picture> مناطقی را برای چندین منبع تصویر تعریف می کند

برای مشاهده لیست کامل همه برچسب های HTML موجود ، از HTML ما مرجع برچسب دیدن کنید .






این سایت برای آموزش ، آزمایش و یادگیری بهینه شده است. نمونه ها را می توان برای بهبود ساده کرد خواندن و درک اساسی. آموزشها ، پیوندها و مثالها مرتباً تجدید نظر می شوند تا از آنها جلوگیری شود خطاها ، اما ما نمی توانیم صحت و عملکرد کامل همه مطالب را تضمین کنیم. با استفاده از این سایت ، شما موافقت می کنید که مطالعه کرده اید و پذیرفته ایدمقررات استفاده , کوکی و سیاست های حفظ حریم خصوصی. کپی رایت 1999-2020 حق چاپ و .. محفوظ توسط احمد فرجی
سایت توسط چارچوب farsiw3.ir طراحی شده است.

Farsiw3.ir