location_on تهران ، خیابان آزادی خیابان شهیدان (روبروی مترو حبیب اله ) برج زیتون local_phone 66073800 021
بازگشت به لیست مقالات » | ﺳﻪشنبه 25 آبان 1395 در ساعت 13 : 10 دقیقه | نظرات کاربران ( 0 )

آموزش HTML  - تگ ""IMG (تصاویر) :

در این آموزش روش ثبت و درج تصاویر در HTML  را بریتان توضیح خواهیم داد.

تصاویر در اچ تی ام ال در با تگ <img> تعریف خواهند شد . این تگ نیز جزو  تگ های تهی می باشد و در تگ شروع بسته می شود و تگ پایان و شروع آن یکی می باشد .

خصوصیت "src"  :

به منظور ایجاد یک تصویر در HTML   نیاز به تگ IMG  و خصوصیت SRC  داریم . SRC   مخفف کلمه ی  Source  می باشد که در لغت به معنای منبع می باشد .src  از مهمترین خصوصیت تگ img   می بتشد .

نحوه ی ایجاد یک تگ IMG  :  <img src="/url address" />

این خصوصیت حاوی آدرس عکس مورد نظر می باشد که عکس در آن وجود دارد .

به عنوان مثال یک عکس به نام int.jpg که در پوشه ی images  سایت http://int-net.ir  وجود دارد بدین صورت در آدرس تگ  img  بصورت زیر نوشته و فراخوانی خواهد شد :

<img src="/http://int-net.ir/images/int.jpg" / >

خصوصیت alt  : خصوصیت "alt  " یک alternate text محسوب شده ( متن جایگزین ) .

نحوه ی نوشتن یک تگ img  با خصویت  "alt   :

<img src="/http://int-net.ir/images/int.jpg"  alt="WEB DESIGN INT" />

نکته مهم : تگ img  در استاندارد های وب باید دارای خصوصیت alt  باشد . در صورت عدم درج آن آن بخش استاندارد نخواهد بود .

یکی از کاربردهای خصوصیت alt  : زمانی که به هر علتی( کم بودن سرعت اینترنت  - خطا در بارگیری و... ) عکس در سایت مشاهده نشود محتوای alt  به منظور راهنمایی و توضیحات به نمایش در خواهد آمد .

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

خصوصیت height  و width  در تگ img   :

برخی از تصاویر در سایت تمام عرض و ارتفاع سایت ما را در بر خواهند گرفت . به منظور تنظیم و تغییر در ابعاد عکس ها از خصویت height   برای ارتفاع   و خصویت  width  برای عرض عکس استفاده خواهد شد .

درج ارتفاع و عرض در عکس بسیار کار مفیدی می باشد و به خواسته ی ما در مرورگر به نمایش در خواهد آمد . و زمانی که هنوز سایت بصورت کامل بارگزاری نشده است مرورگر مکان و ابعاد مورد نظر را برای عکس در نظر خواهد گرفت . و تا زمانی که عکس مورد نظر قابل مشاهده میشود متن جایگزین در خصویت alt  به نمایش در خواهد آمد .

نکات مفید :

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

 

نحوه ی تراز عکس در میان متن ها :

خصوصیت align  : با استفاده از خصوصیت align  میتوانید عکس را در میان متن جابه جا نمایید . کاربرد این خصوصیت برای زمانی می باشد که یک عکس در بین یک متن قرار داشته باشد و بخواهیم هم طراز , پایین تر   و یا بالاتر از متن قرار بگیرد.

مثال :

 

<!DOCTYPE html>

<html>

<body>

<p>An image

<img src="smiley.gif" alt="Smiley face" align="bottom" width="32" height="32" />

with align="bottom".</p>

<p>An image

<img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32" />

with align="middle".</p>

<p>An image

<img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32" />

with align="top".</p>

<p><b>Tip:</b> align="bottom" is default!</p>

<p><img src="smiley.gif" alt="Smiley face" width="32" height="32" />

An image before the text.</p>

<p>An image after the text.

<img src="smiley.gif" alt="Smiley face" width="32" height="32" /></p>

</body>

<html/> 

 

با اجرای مثال بالا مرورگر بصورت زیر به نمایش در خواهد آمد :

 

آموزش HTML  تگ IMG

 

در مثال بالا با استفاده از خصوصیت align  عکس را در بین  متن جابجا و یا طراز کرد .

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

ارسال نظر

عنوان نظر :
نام شما :
ایمیل :
آموزش HTML  - کاراکترهای رزرو شده

آموزش HTML - کاراکترهای رزرو شده

آموزش HTML  - کاراکترهای رزرو شده یکسری از کارکتر ها و علائم در html  وجود دارند که به تنهایی نمیتوانند در داخل صفحات  html قرار گیرند و ممکن است حتی در کیبرد کامپیوتر ها وجود نداشته ب ...

آموزش html  -  جاوا اسکریپت

آموزش html - جاوا اسکریپت

آموزش html  -  جاوا اسکریپت تگ script  در html  : این تگ به منظور برنامه نویسی سمت کاربر مانند جاوا اسکریپت  javascript  مورد استفاده قرار میگیرد . عنصر <script > ...

آموزش html  تگ head

آموزش html تگ head

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

آموزش HTML  - اعلان Doctype

آموزش HTML - اعلان Doctype

آموزش HTML  - اعلان Doctype یکسری از اعلان ها در html  می باشند که کمک میکنند مرورگر بهتر و سریعتر نوع صفحات را تشخیص دهد . اعلان <!doctype> یکی از آنها می باشد که در ابتدای سند های h ...

آموزش html  - مروری بر html مقدماتی

آموزش html - مروری بر html مقدماتی

    آموزش HTML  - خلاصه ای از مراحل مقدماتی با همراهی شما تا این بخش آموزش HTML  را بصورت مقدماتی پشت سر گذاشتیم . از این پس آموزش های حرفه ای و پیشرفته ی HTML  را شروع خوا ...

آموزش html – نام رنگ ها

آموزش html – نام رنگ ها

آموزش html – نام رنگ ها تمامی مرورگر ها از نام رنگ ها بصورت کامل پشتیبانی میکنند . با استفاده از رنگ ها در html میتوان رنگ عناصر و یا پس زمینه عناصر html  را تغییر داد .در بخش زیر نام 147 ...

آموزش html - رنگها

آموزش html - رنگها

آموزش html  - رنگها : رنگها  یکی از مهمترین بخش در طراحی سایت می باشند .در طراحی سایت از رنگ ها به 3 طریق استفاده خواهد شد . 1.  از طریق نام رنگ : این روش از انتخاب رنگ بسیار محدود بو ...

آموزش HTML  - تگ iframe

آموزش HTML - تگ iframe

آموزش HTML  - تگ iframe در این آموزش و با استفاده از تگ iframe روش نمایش یک صفحه وب درون صفحه ی دیگر وب را قرار خواهیم داد . با ما همراه باشید . همانطور که از نام تگ iframe  که به معنای قا ...

آموزش HTML فرم ها

آموزش HTML فرم ها

آموزش HTML  فرم ها یکی از عناصر مهم در HTML  فرم ها می باند . فرم ها مسثول نگهداری اطلاعات از جانب کاربران می  باشد .به کمک فرم ها میتوان دریافت و ارسال اطلاعات را به سمت سرور انجام د ...

آموزش HTML  - صفحه بندی

آموزش HTML - صفحه بندی

آموزش HTML  - صفحه بندی یکی از مهم ترین بخش های طراحی سایت نحوه ی صفحه بندی و چیدمان المان ها و عناصر HTML  می باشد . چیدمان سایت ها تقریبا مشابه چیدمان مجلات و روزنامه ها حاوی ستون ها و س ...

آموزش HTML  - تگ SPAN

آموزش HTML - تگ SPAN

آموزش HTML  - تگ SPAN تگ span  یکی از عناصر inline level  و درون خطی می باشد که در مقالات قبلی در مورد آن شرح دادیم . تفاوت تگ های inline level  و block level   یک عنصر inli ...

آموزش html  - تگ DIV

آموزش html - تگ DIV

آموزش html  - تگ DIV عنصر های HTML  را از طریق تگ های DIV  و یا SPAN  گروهبندی می شوند . تگ  div  یک عنصر بلاک لول است  .( Block level ) به این معنی که درصورتی که ...

expand_less