در جلسه هشتم آموزش Html به زبان فارسی در خدمت شماییم با آموزش Html؛ آموزش کار با تصاویر در HTML از وب سایت آموزش برنامه نویسی سورس باران.در این جلسه معرفی و نحوه استفاده از عکس و جاگذاری تصویر رو بصورت کامل آموزش خواهیم داد. با ما همراه باشید…
آموزش کار با تصاویر در HTML
قطعا در تمامی وب سایت ها با تصاویر متعددی مواجه می شوید. تصاویر، برای گویاتر کردن محتوا یا زیباسازی صفحات استفاده میشود. هیچ شکی نیست که حضور عکس در هر صفحه از سایت میتواند طرح و ظاهر یک صفحه وب را بهبود ببخشیده و مخاطب را بیشتر مجذوب خود کند. اگر بخواهید در یک صفحه وب یک عکس جایگذاری کنید، باید با استفاده از کد HTML تصویر را در طراحی سایت قرار بدهید. در ادامه سه تصویر مختلف و کدهای مربوط به هر کدام را به ترتیب از چپ به راست مشاهده میکنید:
<img src="pulpitrock.jpg" alt="منظره کوهستان">
<img src="img_girl.jpg" alt="دختر ژاکت پوش">
<img src="img_chania.jpg" alt="تصویر گل">پیشنمایش منظره کوهستان پیشنمایش دختر ژاکت پوش پیشنمایش تصویر گل
نحوه قرارگیری (Syntax) عکس در HTML
تصاویر در HTML با تگ <img> تعریف میشوند که یک تگ خالی و تنها حاوی ویژگی است. همانطور که در درس اول سری آموزش HTML هم به آن اشاره کردیم، تگهای خالی دارای تگ پایانی نیستند. ویژگی src در واقع URL (آدرس اینترنتی) تصویر را مشخص میکند:
<img src="url">
خصوصیت alt در اچ تی ام ال
خصوصیت alt یک متن جایگزین برای تصویر ایجاد میکند تا اگر کاربر بنا به هر علتی (سرعت پایین اینترنت، خطا در ویژگی src یا استفاده از صفحهخوان توسط کاربر) نتواند عکس را مشاهده کند، این متن نمایش داده شود. مقدار خصوصیت alt باید تصویر را توصیف کند:
<img src="img_chania.jpg" alt="تصویر گل">پیشنمایش
اگر مرورگر نتواند به هر دلیلی، تصور را پیدا کند مقدار ویژگی alt را نمایش خواهد داد.توجه داشته باشید که ویژگی alt ضروری است. یک صفحه وب بدون دارا بودن این ویژگی، اعتبار نخواهد داشت. توجه داشته باشید که مقدار alt میتواند بسته به انتخاب شما به زبان انگلیسی، فارسی یا هر زبان دیگری نوشته شود.
اندازه تصویر در HTML
میتوانید از ویژگی style برای مشخص کردن عرض و طول یک تصویر استفاده کنید
<img src="img_girl.jpg" alt="دختر ژاکت پوش" style="width:500px;height:600px;">
در روش دیگر میتوانید از ویژگیهای width و height استفاده کنید:
<img src="img_girl.jpg" alt="دختر ژاکت پوش" width="500" height="600">
ویژگیهای width و height همیشه طول و عرض تصویر را با واحد پیکسل تعریف میکنند. توجه داشته باشید همیشه طول و عرض تصویر را مشخص کنید در غیر این صورت، صفحه سایت طراحی شده، در زمان بارگزاری تصویر لرزش خواهد داشت.
استفاده از ویژگی های Width و Height یا ویژگی Style
تمام ویژگیهای width، height و style در HTML5 معتبر هستند. البته ما استفاده از ویژگی style را توصیه میکنیم. با این کار از تغییر اندازه تصاویر توسط شیوهنامهها (style sheet) جلوگیری میشود:
<!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پیشنمایش
تصاویر موجود در یک پوشه دیگر در Html
اگر پوشه عکس مشخص نشده باشد مرورگر انتظار دارد تصویر را در همان پوشه صفحه وب پیدا کند. البته معمولا تصاویر را در یک پوشه فرعی ذخیره میکنند. در صورت استفاده از این روش حتما باید نام پوشه را در ویژگی src بگنجانید:
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">پیشنمایش
تصاویر موجود در یک سرور دیگر در Html
برخی از سایتها تصاویر خود را روی سرور تصاویر ذخیره میکنند. در واقع، شما میتوانید از هر آدرس url در جهان به این تصاویر دسترسی داشته باشید:
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">پیشنمایش
لینک دادن به تصاویر در اچ تی ام ال
برای استفاده از تصویر به عنوان لینک باید تگ <img> را در تگ <a> قرار دهید
<a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;"> </a>پیشنمایش
در کد بالا border:0 به این علت اضافه شده تا از نمایش کادر اطراف تصویر توسط مرورگر اینترنت اکسپلورر ۹ و نسخههای قبلی جلوگیری شود.
شناور کردن تصاویر در اچ تی ام ال
میتوانید از خصوصیت 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>پیشنمایش
Image Maps در اچ تی ام ال
از تگ <map> برای تعریف یک نقشه- تصویر (image-map) استفاده کنید. یک نقشه-تصویر در واقع تصویری است که نقاطی از آن قابل کلیک شدن باشد. با استفاده از کدی که در ادامه میآید در تصویر زیر اشیاء کامپیوتر، گوشی موبایل و فنجان قهوه قابل کلیک شدن خواهند بود:
<img src="workplace.jpg" alt="محل کار" usemap="#workmap"> <map name="workmap"> <area shape="rect" coords="34,44,270,350" alt="رایانه" href="computer.htm"> <area shape="rect" coords="290,172,333,250" alt="تلفن" href="phone.htm"> <area shape="circle" coords="337,300,44" alt="قهوه" href="coffee.htm"> </map>پیشنمایش
خصوصیت نام تگ <map> با خصوصیت usemap مربوط به تگ <img> همراه شده و یک رابطه بین تصویر و نقشه ایجاد میکند. تگ <map> حاوی تعداد تگهای <area> بوده که نواحی قابل کلیک در نقشه- تصویر را مشخص میکند.
تصویر پشت زمینه در اچ تی ام ال
برای افزودن تصویر پشت زمینه به یک عنصر HTML، از خصوصیت background-image
در CSS استفاده کنید. در مثال زیر نشان داده شده است که برای افزودن تصویر پشت زمینه به یک صفحه وب، باید ویژگی background-image را در عنصر BODY مشخص کنید:
<body style="background-image:url('clouds.jpg')"> <h2>Background Image</h2> </body>
در مثال زیر نشان میدهد که برای افزودن تصویر پشت زمینه به یک پاراگراف، باید ویژگی background-image را برای عنصر P مشخص کنید:
<body> <p style="background-image:url('clouds.jpg')"> ... </p> </body>پیشنمایش
عنصر <picture> در اچ تی ام ال
نسخه HTML5 عنصر <picture> را برای افزودن انعطافپذیری بیشتر در زمان تعریف منابع تصویر اضافه کرده است. عنصر <picture> حاوی یک تعداد از عناصر <source> است که هر یک به یک منبع متفاوت ارجاع داده میشوند. با این روش مرورگر میتواند تصویری را انتخاب کند که به بهترین شکل با view یا دستگاه فعلی منطبق است. هر عنصر <source> دارای خصوصیاتی (attribute) است که نشان میدهد چه زمان تصویر در بهترین حالت تناسب قرار دارد. مرورگر از اولین عنصر <source> که دارای مقادیر منطبق است استفاده کرده و بقیه عناصر <source> دیگر را نادیده میگیرد.
در مثال زیر اگر پنجره مرورگر حداقل ۶۵۰ پیکسل باشد یک تصویر و اگر کمتر از ۶۵۰ و بیشتر از ۴۶۵ پیکسل بود تصویر دیگری نمایش داده میشود:
<picture> <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg"> <source media="(min-width: 465px)" srcset="img_white_flower.jpg"> <img src="img_orange_flowers.jpg" alt="گل" style="width:auto;"> </picture>پیشنمایش
توجه داشته باشید که همیشه یک عنصر <img> به عنوان آخرین عنصر فرزند <picture> تعریف کنید. عنصر <img> توسط مرورگرهایی به کار برده میشود که از عنصر <picture> پشتیبانی نمیکنند یا تگهای <source> انطباق ندارند.
صفحه خوان های HTML
صفحه خوان یک برنامه نرمافزاری است که کدهای HTML را میخواند، متن را تبدیل کرده و به کاربر امکان گوش دادن به محتوا را میدهد. صفحهخوانها معمولا برای افراد نابینا، کم بینا یا دارای ناتوانی در یادگیری بسیار مفید است. تصاویر در HTML یکی از مهمترین مباحث این زبان نشانه گذاری بوده و به زیبایی و قابل فهم کردن محتوای وب سایت شما کمک شایانی میکنند. امروزه نقش تصاویر در محتوای تولیدی بر هیچ وبمستری پوشیده نیست. بنابراین در طراحی وب سایت خود حتما به این بخش توجه ویژهای داشته باشید. یادتان باشد یک طراحی سایت حرفه ای که به ایجاد ظاهری زیبا بیانجامد، یکی از وجوه تمایز شما با رقبا است. میتوانید با مطالعه کامل دوره آموزش HTML مقدماتی در لیداوب، اصلیترین گام در راه آموزش طراحی سایت را برداشته و پس از آن با مطالعه مفاهیم دیگر، به یک طراح سایت حرفهای تبدیل شوید.
منبع: W3Schools
لیست جلسات قبل آموزش Html
- آموزش اصول اولیه و عناصر HTML
- آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
- آموزش کار با پاراگراف و استایل در Html
- آموزش کار با قالب بندی متن در Html
- آموزش کار با کامنت در HTML
- آموزش کار با کامنت در HTML
- آموزش کار با رنگ ها در HTML
- آموزش کار با تصاویر در HTML
- آموزش کار با لینک در HTML
- آموزش کار با جدول در HTML
- آموزش کار با لیست ها در HTML
- آموزش کار با عناصر Block و Inline در HTML
- آموزش کار با عنصر Class در HTML
- آموزش Html؛ آموزش iframe در HTML
- آموزش Html؛ آموزش جاوا اسکریپت در HTML
- آموزش کار با عنصر Head در HTML
- آموزش Layout در HTML
- آموزش طراحی سایت ریسپانسیو در HTML
- آموزش عناصر کد کامپیوتر در HTML
- آموزش موجودیت (Entities) در HTML
- آموزش نمادها (Symbols) در HTML
- آموزش کار با Character (کاراکترهای رزرو شده) در HTML
- آموزش رمزگذاری URL در HTML
- آموزش کامل کار با فرم ها در HTML
- آموزش انواع ورودی (Input) در HTML
- آموزش خصوصیات ورودی در HTML
حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی
حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
- منبع : سورس باران
- رمز فايل : www.sourcebaran.com
- انتشار: ۱۴ اسفند ۱۳۹۷
دسته بندی موضوعات
- آموزش برنامه نویسی
- آموزش کریپتو کارنسی (ارز دیجیتال)
- آموزش متنی برنامه نویسی
- پروژه برنامه نویسی
- فروشگاه
- فیلم های آموزشی
- #F
- ++C
- 3ds max
- Ada
- ADO.NET
- Adobe Flash
- Agile
- Ajax
- AngularJS
- Anime Studio
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- assembly
- AVR
- Azure
- Bootstrap
- Cassandra
- CCNA
- CCNP
- CCSP
- ChatGPT
- Cisco
- CMD
- COBOL
- CSS
- Cython
- Django
- Dreameaver
- Elixir
- EntityFramework
- Erlang
- Flash
- Go
- Groovy
- Haskell
- Htaccess
- HTML
- IOS
- Jade
- jquery
- Kendo UI
- Linq
- Linux
- LUA
- MariaDB
- maya
- Meteor
- MongoDB
- Mono Android
- MonoGame
- Mysql
- NoSQL
- Oracle
- Orchard
- Perl
- php
- PHPMyAdmin
- R
- Rational Rose
- Ruby
- Rust
- Scala
- Scrum Master
- SFML
- SharePoint
- SignalR
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- Vue 3
- WPF
- Xml
- آردوینو
- آموزش های پروژه محور
- آیونیک
- اتوکد
- الگوریتم تقریبی
- الگوریتم نویسی و فلوچارت
- امنیت
- اندروید
- اندروید استودیو
- انیمیشن سازی
- بازی سازی با Scratch
- بک ترک
- بیسیک فور اندروید
- پایتون
- پرولوگ
- پریمیر
- جاوا
- جاوا اسکریپت
- جنگو
- جوملا
- دارت
- دلفی
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- ساخت اتوران
- ساختمان داده ها
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کاتلین
- کامپایلرها
- کانستراکت
- کریستال ریپورت
- کلوژر
- گوگل آنالیتیکس
- گیت
- لاراول
- مای بی بی
- مایکروسافت پروجکت
- متریال دیزاین
- متلب
- معماری کامپیوتر
- مهندسی اینترنت
- میکروتیک
- نود جی اس
- نیوک
- هوش مصنوعی
- ویبولوتین
- ویژوال استودیو
- یونیتی
- کتاب های آموزشی
- Ada
- Ajax
- Android
- ASP.NET
- ASP.NET Core
- AVR
- clips
- CNC
- COBOL
- CQRS
- Cython
- Dreamweaver
- Elixir
- Entity Framework 4.0
- Erlang
- Go
- Groovy
- Haskell
- LINQ
- Lua
- Matlab
- MFC
- Node.js
- PERL
- php
- PLC
- Prolog
- React
- Rust
- Scala
- SFML
- SharePoint
- silver light
- VHDL
- VMware
- WinJS
- Workflow
- WPF
- XHTML
- Yii Framework
- اتوکد
- اچ تی ام ال
- اسمبلی
- اکتیو ایکس
- الگوریتم و فلوچارت
- انگولار
- اوبونتو
- اوراکل
- بازی سازی
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- بک ترک
- پاسکال
- پایان نامه
- پایتون
- پرولوگ
- جاوا
- جاوا اسکریپت
- جی کوئری
- حوملا
- داده کاوی
- دلفی
- رباتیک
- روبی
- زبان ماشین
- سئو
- ساختمان داده ها
- سایر کتاب ها
- سخت افزار
- سوئیفت
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- سیستم عامل
- سیستم های خبره
- شبکه و مجازی سازی
- شبیه سازی کامپیوتر
- طراحی الگوریتم
- فتوشاپ
- فریم ورک گتنا
- کاتلین
- کالی لینوکس
- کریستال ریپورت
- گزارش کارآموزی
- گوگل
- لیسپ
- متلب
- مقاله
- مهندسی نرم افزار
- نیوک
- هوش مصنوعی
- وب مستر
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
بسیار عالی
خیلی ممنون