واردکردن تصاویر در html
در این جلسه به آموزش واردکردن تصاویر در زبان کد نویسی html خواهیم پرداخت, لطفا قبل از مشاهده این جلسه ابتدا جلسه ی قبل را از این لینک مشاهده کنید.
البته ابتدا مباحث جلسه ی قبل یعنی کامنت هارا تکمیل میکنیم
استفاده از برچسب کامنت
مرورگرهای کمی هستند که استفاده از برچسب <comment> را برای کامنت بخشی از کد HTML استفاده می کنند.
مثال
<!DOCTYPE html> <html> <head> <title>Using Comment Tag</title> </head> <body> <p>This is <comment>not</comment> Internet Explorer.</p> </body> </html>
اگر از IE استفاده می کنید، نتیجه ی زیر حاصل خواهد شد
This is Internet Explorer.
This is not Internet Explorer.
کد اسکریپت کامنت
گرچه شما جاوا اسکریپت را با HTML یاد خواهید گرفت، اما در یک آموزش مجزا. در اینجا باید دقت کنید که اگر در حال استفاده از script java یا script vb در کد html خود هستید، بنابراین توصیه می شود که آن کد اسکریپت را در داخل کامنت های مناسب HTML قرار دهید طوریکه مرورگرهای قدیمی بتوانند به درستی کار کنند.
مثال
<!DOCTYPE html>
<html>
<head>
<title>Commenting Script Code</title>
<script>
<!--
document.write("Hello World!")
//-->
</script>
</head>
<body>
<p>Hello , World!</p>
</body>
</html>
این مثال نتیجه ی زیر را در پی خواهد داشت
Hello World!
Hello , World!
زنگ تفریح!
جاوا اسکریپت چیست؟
JavaScript که به اختصار JS نیز نامیده می‌شود، یکی از محبوبترین زبان‌های برنامه نویسی است. جاوا اسکریپت زبانی سطح بالا، داینامیک، شی‌گرا و تفسیری است که از شیوه‌های مختلف برنامه نویسی پشتیبانی می‌کند. از این زبان می‌توان برای برنامه نویسی سمت سرور (Server Side)، اپلیکیشن‌های موبایل، بازی و اپلیکیشن‌های دسکتاپ استفاده کرد. بنابراین می‌توان اینگونه برداشت کرد که زبان برنامه نویسی جاوا اسکریپت ، یک زبان همه فن حریف است.
پیش‌تر به محبوبیت زبان جاوا اسکریپت اشاره کردیم. این محبوبیت بی دلیل نیست چرا که با این زبانِ شی گرا شما قادر خواهید بود تا سایت‌های بی‌روح خود را جان بخشی کنید و با کاربران خود تعامل داشته باشید. یعنی میتوانید فایل‌های انیمیشنی، صوتی و تصویری را روی سایت خود به نمایش بگذارید. همچنین میتوانید روی سایت‌تان تایمر قرار دهید، رنگ‌ها را با حرکت موس تغییر دهید و بسیاری کارهای دیگر که باعث جذابیت بیشتر صفحات وب می‌شوند.
اما این تمام چیزی نیست که جاوا اسکریپت در اختیار شما قرار می‌دهد. شما با استفاده از این زبان میتوانید شروع به ساخت برنامه‌های وب و موبایل و دسکتاپ کنید. برای این منظور میتوانید از فریم‌ورک‌های مختلف JavaScript که مجموعه‌ای از کتابخانه‌ها را در اختیار شما قرار می‌دهند استفاده کنید. یکی از کارهای سرگرم کننده دیگری که میتوانید از طریق این زبان انجام دهید، توسعه بازی‌های رایانه ای تحت مرورگر است.
کامنت صفحات طراحی
گرچه شما HTML را در یک آموزش مجزا با صفحات طراحی فرا میگیرید، اما در اینجا به باید دقت داشته باشید که اگر از CSS در کد HTML خود استفاده می کنید، بنابراین توصیه می شود که کد صفحه ی طراحی را داخل کامنت های مناسب HTML قرار دهید، طوریکه مرورگرهای قدیمی بتوانند کار کنند.
مثال
<!DOCTYPE html>
<html>
<head>
<title>Commenting Style Sheets</title>
<style>
<!--
.example {
border :1px solid #4a7d49;
}
// -->
</style>
</head>
<body>
<div class="example">Hello , World!</div>
</body>
</html>
این مثال نتیجه ی زیر را تولید می کند
Hello , World!
وارد کردن تصویر
در این آموزش چگونگی استفاده از تصاویر در صفحات HTML را فرا می گیریم.زیبا سازی تصاویر و همچنین ترسیم بسیاری از مفاهیم پیچیده به یک روش ساده روی صفحه ی وب شما، بسیار مهم می باشد. این آموزش مراحل ساده ی استفاده از تصاویر در صفحات وب را به شما آموزش خواهد داد.
شما می توانید با استفاده از برچسب <img> هر تصویری را وارد صفحه ی وب خود کنید. در زیر ترکیب ساده ی استفاده از این برچسب را می بینید
<img src="Image URL" ... attributes-list/>
برچسب <img> یک برچسب خالی می باشد، یعنی تنها می تواند دارای لیستی از ویژگی ها باشد و دارای برچسب closing نمی باشد.
مثال
برای امتحان کردن مثال زیر اجازه بدهید فایل html خود یعنی htm.test و فایل تصویر خود یعنی png.test را در یک مسیر قرار دهیم.
<!DOCTYPE html> <html> <head> <title>Using Image in Webpage</title> </head> <body> <p>Simple Image Insert</p> <img src="tahlildadeh.png" alt="tahlildadeh Image" /> </body> </html>
شما می توانید از فایل تصویر JPEG ،PNG یا GIF متناسب با راحتی خود استفاده کنید، اما مطمئن شوید که در ویژگی src نام فایل تصویر را به درستی وارد کردید. نام تصویر همیشه یک مورد هوشمند می باشد. ویژگی alt یک ویژگی می باشد که اگر تصویر نمایش داده نشود، یک متن جایگزین را برای آن مشخص می کند.
تنظیم موقعیت تصویر
معموال ما تمام تصاویر خود را در یک مسیر مجزا قرار می دهیم. بنابراین اجازه بدهید فایل htm.test مربوط به HTML را در مسیر اصلی نگه داشته و یک مسیر فرعی images داخل مسیر اصلی، جایی که تصویر png.test را نگهداری می کنیم، ایجاد کنیم. با فرض اینکه موقعیت تصویر ما “png.test/image “می باشد، مثال زیر را امتحان کنید
مثال
<!DOCTYPE html> <html> <head> <title>Using Image in Webpage</title> </head> <body> <p>Simple Image Insert</p> <img src="images/tahlildadeh.png" alt="tahlildadeh Image" /> </body> </html>
واردکردن تصاویر در html
تنظیم طول و عرض تصویر
می توانید طول و عرض تصویر را براساس نیاز خود و با استفاده از ویژگی های width و height تنظیم کنید. شما می توانید طول و عرض تصویر را به پیکسل یا براساس درصد اندازه ی واقعی آن تنظیم کنید.
مثال
<!DOCTYPE html> <html> <head> <title>Set Image Width and Height</title> </head> <body> <p>Setting image width and height</p> <img src="test.png" alt="Test Image" width="150" height="100" /> </body> </html>
تنظیم حاشیه ی تصویر
به طور پیش فرض تصویر حاشیه ای در اطراف خود خواهد داشت، شما می توانید ضخامت این حاشیه را با استفاده از ویژگی border و به واحد پیکسل تنظیم کنید. ضخامت ۰ یعنی هیچ حاشیه ای در اطراف تصویر وجود ندارد.
مثال
<!DOCTYPE html> <html> <head> <title>Set Image Border</title> </head> <body> <p>Setting image Border</p> <img src="test.png" alt="Test Image" border="3" /> </body> </html>
واردکردن تصاویر در html
تنظیم هم ترازی تصویر
به طور پیش فرض تصویر در سمت چپ صفحه تنظیم می شود، اما می توانید از ویژگی align برای تنظیم تصویر در سمت راست یا مرکز صفحه استفاده کنید.
مثال
<!DOCTYPE html> <html> <head> <title>Set Image Alignment</title> </head> <body> <p>Setting image Alignment</p> <img src="test.png" alt="Test Image" border="3" align="right" /> </body> </html>
برای تمرین هر جلسه میتوانید به وبسایت جهانی W3C مراجعه نمایید.
دیدگاه ها