آموزش و کتاب الکترونیکی

آموزش HTML به زبان ساده – قسمت یازدهم – مقدماتی

آموزش HTML به زبان ساده - قسمت یازدهم - مقدماتی آموزش و کتاب الکترونیکی
نوشته توسط مهدی بلوریان

به نام خدا

با عرض سلام و وقت بیخر خدمت بازدید کنندگان گرامی وبسایت وان پی سی
در این قسمت از آموزش ، به سراغ تصاویر در HTML خواهیم رفت
همراهی شما باعث افتخار ماست

تصاویر در HTML:

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

یک مثال :

<img src=” url ” alt=” some_text “>

ویژگی alt :

alt یم ویژگی برای تگ <img> است که در مواقعی که عکس کامل بارگذاری نشود ، به جای عکس این نوشته نمایش داده می شود

alt یک تگ مهم است (خیلی مهم سئو کار عزیز)

صفحه خوان HTML :

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

حجم تصویر – طول و عرض :

شما میتوانید برای عکس خود طول و عرض مناسب و مدنظر خود را در کد خود قرار دهید
نکته : این انداه ها باید در ابعاد PX تنظیم شوند

<img src=”html.png” alt=”آموزش HTML” width=”128″ height=”128″>

یک نکته مهم : به نظر شما مشخص کردن طول و عرض بصورت inline یا کد خطی داخل تگ <img> بهتر است یا از طریق فایل CSS ؟؟؟

هر دوی این روش های در HTML5 مورد قبول هستند ، اما ما به شما از طریق فایل استایل یا همان CSS را توصیه میکنیم ، چون مانع از تغییر اندازه در برگ های دیگر
می شود

ممکن است بپسندید :   آموزش افزایش سایز آپلود فایل در وردپرس و دیگر CMS

<!DOCTYPE html>

<html>

<head>

<style>

img { 

width:100%; 

}

</style>

</head>

<body>

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

<img src=”html5.gif” alt=”HTML5 Icon” width=”128″ height=”128″>

</body>

</html>

استفاده از تصاویر از پوشه دیگر :

برای دسترسی راحت تر به تصویری که در پوشه دیگر در همان وبسایت است ، دیگر احتیاجی به http:// نیست ، شما میتوانید با قرار دادن یک / در ابتدای آدرس به فایل خود دسترسی پیدا کنید

به این شکل :

<img src=”/images/one.png” alt=”HTML5 Icon” style=”width:128px;height:128px;”>

استفاده از تصاویر از وبسایت دیگر :

در این روش باید از http:// در ابتدای ادرس استفاده کنید
به این شکل :

<img src=”http://www.w3schools…ools_green.jpg”alt=”W3Schools.com”>

استفاده از تصاویر متحرک :

در این روش نیر مانند مثال های قبلی باید عمل کنیم

به این شکل :

<img src=”programming.gif” alt=”Computer Man” style=”width:48px;height:48px;”>

استفاده از یک به عنوان لینک :

برای استفاده از یک تصویر به عنوان لینک به این شکل عمل کنید :

<a href=”default.asp”>

<img src=”smiley.gif” alt=”HTML tutorial” style=”width:42px;height:42px;border:0;”>

</a>

هدایت تصویر :

برای هدایت تصاویر یا حالت شناور دادن به تصاویر ، میتوانید از ویژگی float استفاده کنید

به این شکل :

<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>

اتمام

درباره نویسنده

مهدی بلوریان

دیدگاه بگذارید

avatar
  Subscribe  
Notify of