آموزش HTML - قسمت یازدهم(تصاویر)

عضویت در سایت

نام کاربری*

ایمیل*

رمزعبور*

تایید رمز عبور*

نام*

نام خانوادگی*

نام نمایشی*

تصویر پروفایل*

مرور

کشور*

شهر*

جنسیت* آقا

خانم

سایر

سن*

قوانین و مقررات* با تیک زدن این گزینه شما قوانین و مقررات را میپذیرید.

عضویت در سایت

رایگان ثبت نام کنید و سوالات خود را بپرسید، همچنین میتوانید در پاسخگویی به سوالات دیگر کاربران نیز سهیم باشید، هر مشکلی در ثبت نام یا ورود داشتید با ایمیل beporsam@gmail.com در ارتباط باشید

آموزش HTML – قسمت یازدهم(تصاویر)

سلام

در قسمت یازدهم از سری آموزش های HTML می پردازیم به کار با تصاویر.

آموزش:

در html میتونید هر نوع عکسی با هر پسوندی اعم از gif,png,jpg,jpeg,bmp و … استفاده کنید.

شکل کلی

برای ایجاد یک تصویر در صفحه وب از تگ <img> استفاده می شود ، که شکل کلی و نحوه استفاده به شکل زیر ار است:

<img src="url" alt="text">

۱	<img src="url" alt="text">

به جای url آدرس تصویر و به جای text متن جایگزین تصویر قرار میگیرد.

روش های آدرسی دهی عکس:

به چند روش میتونیم عکس را آدرس دهی کنیم:

۱- میتونیم آدرس مستقیم عکس را وارد کنیم.

<img src="https://beporsam.ir/wp-content/uploads/2016/04/beporsam-channel-1.png" alt="کانال تلگرامی بپرسم">

۱	<img src="https://beporsam.ir/wp-content/uploads/2016/04/beporsam-channel-1.png" alt="کانال تلگرامی بپرسم">

۲- آدرس دهی در پوشه جاری ، به عنوان مثال شما یک پوشه ایجاد کردید برای قالب خود ، و در این پوشه یک فایل html. ایجاد و کدهای خودتون را دارید داخل این فایل می نویسید و یک عکسی هم داخل پوشه دارید و میخواهید آدرس عکس را بنویسید ، باید به طور زیر بنویسید:

<img src="beporsam.png" alt="بپرسم">

۱	<img src="beporsam.png" alt="بپرسم">

فقط کافیه اسم عکس با پسوندش را بنویسید.

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

مطلب پیشنهادی: آموزش هارد ریست HUAWEI P30 Pro

<img src="img/beporsam.png" alt="beporsam.ir">

۱	<img src="img/beporsam.png" alt="beporsam.ir">

۴- آدرس دهی به پوشه قبلی ، حالا ممکنه عکس شما در پوشه ای قبل تر از پوشه ی فعلی باشه(یعنی در یک پوشه بالاتر)، در این نوع کدنویسی به صورت زیر می شود:

<img src="../images/beporsam.png" alt="بپرسم">

۱	<img src="../images/beporsam.png" alt="بپرسم">

“/..” این عبارت میگه یک پوشه به قبل برگرد.

عرض و ارتفاع

برای تصاویری که قرار میدیم میتونیم عرض و ارتفاعش را دستی تغییر بدیم:

<img src="beporsam.png" alt="بپرسم" style="width:150px ; height:150px">

۱	<img src="beporsam.png" alt="بپرسم" style="width:150px ; height:150px">

width برای عرض و height برای ارتفاع

قرار گرفتن عکس در چپ یا راست

میتونیم عکس هایی که قرار میدیم مشخص کنیم که در سمت چپ صفحه قرار بگیره یا راست ، برای این کار از float استفاده می کنیم:

<img src="beporsam.png" alt="بپرسم" style="width:float:right">

۱	<img src="beporsam.png" alt="بپرسم" style="width:float:right">

برای قرار گرفتن در سایت مقدار float:right و برای قرار گرفتن در چپ مقدار float:left

حالا میخواهیم متن بنویسیم و تنظیم کنیم که تصاویر در سمت چپ و راست متن قرار بگیره:

<html>
<body>

<p>
<img src="beporsam.png" alt="beporsam" style="float:right">
عکس در سمت راست متن قرار میگیرد.
</p>
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://beporsam.ir/blog/aide-learn-session-9/" target="_blank" rel="dofollow" class="u23e4f5d6dcfc624e0dd688c57f59423f"><!-- INLINE RELATED POSTS 2/3 //--><style> .u23e4f5d6dcfc624e0dd688c57f59423f { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#eaeaea; border:0!important; border-left:4px solid #34495E!important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); text-decoration:none; } .u23e4f5d6dcfc624e0dd688c57f59423f:active, .u23e4f5d6dcfc624e0dd688c57f59423f:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .u23e4f5d6dcfc624e0dd688c57f59423f { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .u23e4f5d6dcfc624e0dd688c57f59423f .ctaText { font-weight:bold; color:inherit; text-decoration:none; font-size: 16px; } .u23e4f5d6dcfc624e0dd688c57f59423f .postTitle { color:#000000; text-decoration: underline!important; font-size: 16px; } .u23e4f5d6dcfc624e0dd688c57f59423f:hover .postTitle { text-decoration: underline!important; } </style><div style="padding-left:1em; padding-right:1em;"><span class="ctaText">مطلب پیشنهادی:</span>  <span class="postTitle">آموزش نرم افزار AIDE - قسمت نهم(تغییر نام و آیکون برنامه)</span></div></a></div>
<p>
<img src="beporsam.png" alt="beporsam" style="float:left">
عکس در سمت چپ متن قرار میگیرد.
</p>

</body>
</html>

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

<html>

<body>

<p>

عکس در سمت راست متن قرار میگیرد.

</p>

<p>

عکس در سمت چپ متن قرار میگیرد.

</p>

</body>

</html>

سوالی داشتید در سایت بپرسید ، پاسخگوی سوالات شما هستیم.

با ما باشید تا آموزش های بعدی … .

موفق باشید.