مشاوره رایگان
دریافت لینک های دانلود
دریافت پستی درب منزل
مبلغ کل:
تومان
جهت دریافت کد تخفیف به کانال تلگرام مراجعه و یا با پشتیبان آنلاین هماهنگ نمایید
آموزش کار با تصاویر در HTML
تصاویر برای زیبایی وب سایت شما بسیار مهم هستند و همچنین بسیاری از مفاهیم پیچیده را به صورت ساده در صفحه وب شما نشان می دهند. در این آموزش شما از طریق طی کردن مراحل ساده ای می توانید از تصاویر، در صفحات وب خود استفاده کنید.
درج تصویر (Insert Image)
شما می توانید با استفاده از برچسب <img> هر تصویر دلخواهی را در صفحه وب خود قرار دهید. در زیر syntax ساده ای برای استفاده از این تگ، مشاهده می کنید.
<img src = "Image URL" ... attributes-list/>
برچسب <img> یک تگ خالی است، بدین معنا که می تواند تنها لیستی از صفات (attributeها) باشد و شامل هیچ تگ بسته ای (closing) نیست.
مثال :
برای مثال ، اجازه دهید فایل HTML با نام test.htm و فایل image با نام test.png را در یک پوشه نگهداری کنیم –
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>
</html>
کد فوق نتیجه زیر را تولید می کند -
Simple Image Insert
شما می توانید فایل تصویری با فرمت PNG، JPEG یا GIF را بر اساس راحتی خود استفاده کنید، اما اطمینان حاصل کنید که نامِ فایلِ تصویر، بطور صحیح در ویژگی src مشخص شده باشد. نام تصویر همیشه حساس به حروف است (case sensitive).
ویژگی alt یک ویژگی اجباری است که ، اگر تصویر به هر دلیلی نمایش داده نشد، متن جایگزینی را برای تصویر مشخص می کند.
موقعیت تصویر را تنظیم کنید (Set Image Location)
معمولا تمام تصاویر را در یک پوشه جداگانه نگهداری می کنیم. بنابراین اجازه دهید فایل test.htm را در دایرکتوری به نام home نگهداری کنیم و داخل آن پوشه ای به نام images بسازیم و در آن تصاویرمان من جمله test.png را قرار دهیم.
مثال :
فرض کنید محل تصویر ما "image / test.png" است، مثال زیر را امتحان کنید –
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>
</html>
کد فوق نتیجه زیر را تولید می کند -
Simple Image Insert
تنظیم عرض تصویر / ارتفاع (Set Image Width/Height)
شما می توانید عرض و ارتفاع تصویر را بر اساس نیاز خود با استفاده از ویژگی های عرض و ارتفاع برای هر تصویر تنظیم کنید. شما می توانید عرض و ارتفاع تصویر را به صورت پیکسل یا درصد مشخص کنید.
مثال :
<!DOCTYPE html>
<html>
<head>
<title>Set Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
<img src = "/html/images/test.png" alt = "Test Image" width = "150" height = "100"/>
</body>
</html>
کد فوق نتیجه زیر را تولید می کند -
Simple Image Insert
برای تصویر border تنظیم کنید (Set Image Border)
به طور پیش فرض، اطراف تصاویر حاشیه ای ایجاد می شود، شما می توانید ضخامت این حاشیه را با استفاده از خصوصیت border و بر اساس واحد پیکسل، مشخص کنید. Border با مقدار 0 یعنی هیچ حاشیه ای در اطراف تصویر وجود ندارد.
<!DOCTYPE html>
<html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3"/>
</body>
</html>
کد فوق نتیجه زیر را تولید می کند -
Simple Image Insert
تنظیم همترازی تصویر (Set Image Alignment)
به طور پیشفرض، تصویر در سمت چپ(left) صفحه قرار می گیرد، اما شما می توانید از ویژگی align برای تنظیم آن در مرکز (center) یا راست (right) استفاده کنید.
مثال :
<!DOCTYPE html>
<html>
<head>
<title>Set Image Alignment</title>
</head>
<body>
<p>Setting image Alignment</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3" align = "right"/>
</body>
</html>
کد فوق نتیجه زیر را تولید می کند -
فصلِ:
5
,
تعداد قسمت ها:
177
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML
آموزش HTML5
این فصل در یک نگاه:
در این فصل صفحات قالب فروشگاهی را بطور کامل واکنشگرا می کنیم.…
HTML مخفف عبارت Hypertext Markup Language است. این زبان در واقع یک نوع زبان نشانه‌گذاری استاندارد برای ایجاد صفحات وب و وب اپلیکیشن‌ها محسوب می‌شود. در واقع HTML را عنصر کلیدی صفحات وب می…
فصلِ:
3
,
تعداد قسمت ها:
25
,
سطح:
صفر تا صد
این فصل در یک نگاه:
فصل سوم…
آموزش طراحی ریسپانسیو مدرن و جذابتر نسبت به بوتسرپ (همراه با ساخت صفحه اصلی و پنل یک آژانس مسافربری) آموزش پروژه محور فریمورک متریالایز برای اولین بار بین وب سایت های آموزشی آموزش تمامی …
فصلِ:
5
,
تعداد قسمت ها:
77
,
سطح:
متوسط
این فصل در یک نگاه:
ساخت منوی مدیریت سایت،ایجاد بخش دسته بندی ها ، جدول نمایش دسته ها و ایجاد دسته جدید،ایجاد بخش ویژگی های یک دسته،ایجاد وی…
این مجموعه با تلفیقی از فریمورک bootstrap و کد های html و css ارائه گردیده و پیش نیاز این آموزش ، دوره دیجی کالای آقای مهندس بلاغی است چون این پروژه در قالب mvc پیاده گردیده و با توجه به ا…
فصلِ:
11
,
تعداد قسمت ها:
162
,
سطح:
صفر تا صد
این فصل در یک نگاه:
در این فصل(فصل یازدهم مجموعه)،به طراحی CMS (سیستم مدیریت محتوا)اختصاصی فروشگاه می پردازیم.هدف از طراحی این بخش،آنست که م…
در این مجموعه آموزشی قصد داریم از صفر تا صد طراحی یک فروشگاه اینترنتی رو به صورت کامل آموزش بدهیم.این فروشگاه شامل تمامی بخش های مورد نیاز یک فروشگاه اینترنتی است. هدف از این مجموعه،آموزش…
فصلِ:
4
,
تعداد قسمت ها:
240
,
سطح:
صفر تا صد
موضوعات:
آموزش PHP
آموزش Bootstrap
آموزش CSS
آموزش JQUERY
آموزش HTML
آموزش PHP MVC
آموزش Ajax
آموزش HTML5
این فصل در یک نگاه:
طراحی پنل مدیریت(دسته بندی)- دسته بندی یا category - نمایش دسته های فرعی در view با ورود به یکی از دسته های اصلی و آشن…
توضیحات کلی مجموعه: این مجموعه توسط فریمورک محبوب و دوست داشتنی bootstrap و به صورت تضمینی و صفر تا صد جهت یادگیری کارآموزان عزیز ارائه گردیده و دوستانی که این دوره را به طور کامل و دقیق…
فصلِ:
4
,
تعداد قسمت ها:
368
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش PHP
آموزش PHP MVC
آموزش Ajax
آموزش HTML
آموزش ساخت فروشگاه اینترنتی
آموزش Bootstrap
آموزش Laravel
این فصل در یک نگاه:
مباحث تکمیلی فریم ورک لاراول…
فصل اول :آموزش مقدماتی فریم ورک لاراول معرفی فریم ورک لاراول و پیشنیازهای انجام کار انجام کانفیگ های اولیه برای نصب و راه اندازی فریم ورک معرفی روش های نصب پروژه لاراولی از طریق سایت گی…
فصلِ:
1
,
تعداد قسمت ها:
155
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش JQUERY
آموزش PHP
آموزش PHP MVC
آموزش Ajax
آموزش HTML
آموزش NodeJs
آموزش Bootstrap
آموزش Laravel
آموزش Symphony
این فصل در یک نگاه:
مباحث مقدماتی فریم ورک react.js…
توضیحات کلی مجموعه: فصل اول : آشنایی با مباحث مقدماتی فریم ورک react.js نصب و راه اندازی node.js و کلیه پیش نیازهای لازم نصب فریم ورک react روی لوکال و انجام تست های لازم آغاز آشنایی …
فصلِ:
1
,
تعداد قسمت ها:
15
,
سطح:
متوسط
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش JQUERY
آموزش PHP
آموزش ASP.NET
آموزش ASP.NET MVC
آموزش PHP MVC
آموزش Phyton
آموزش سئو
آموزش ساخت فروشگاه اینترنتی
آموزش HTML
آموزش ایمیل مارکتینگ
آموزش وردپرس
آموزش فروشگاه ساز اپن کارت
آموزش جوملا
آموزش Virtual Freer
آموزش WHMCS
این فصل در یک نگاه:
رشد و درآمدزایی یک وب سایت یا کسب و کار اینترنتی کاملا به ذوق و مهارت وب مستر یا همان مدیر اصلی وب سایت گره خورده و متاس…
اصول مدیریت وب سایت برای وب مستر شدن برای موفقیت یک وب سایت لازم الاجراست. زیرا شما دوست دارید وب سایت خود را به کارخانه پولسازی تبدیل کنید. این واقعیت رویا نیست. هرکس این اصول را بداند به …
