آموزش طراحي سايت -آموزش درج كردن تصويردر HTML

وارد كردن تصاوير در صفحات HTML

در اين آموزش چگونگي استفاده از تصاوير در صفحات HTML را فرا مي گيريم.زيبا سازي تصاوير و همچنين ترسيم بسياري از مفاهيم پيچيده به يك روش ساده روي صفحه ي وب شما، بسيار مهم مي باشد. اين آموزش مراحل ساده ي استفاده از تصاوير در صفحات وب را به شما آموزش خواهد داد.

وارد كردن تصوير

شما مي توانيد با استفاده از برچسب هر تصويري را وارد صفحه ي وب خود كنيد. در زير تركيب ساده ي استفاده از اين برچسب را مي بينيد:

برچسب يك برچسب خالي مي باشد، يعني تنها مي تواند داراي ليستي از ويژگي ها باشد و داراي برچسب closing نمي باشد.

 مثال:

براي امتحان كردن مثال، زير اجازه بدهيد فايل html خود يعني test.htm و فايل تصوير خود يعني test.png را در يك مسير قرار دهيم.

Using Image in Webpage

Simple Image Insert

شما مي توانيد از فايل تصوير JPEG، PNG يا GIF متناسب با راحتي خود استفاده كنيد، اما مطمئن شويد كه در ويژگي src نام فايل تصوير را به درستي وارد كرديد. نام تصوير هميشه يك مورد هوشمند مي باشد.
ويژگي alt يك ويژگي مي باشد كه اگر تصوير نمايش داده نشود، يك متن جايگزين را براي آن مشخص مي كند.

تنظيم موقعيت تصوير

آموزش html css

معمولا ما تمام تصاوير خود را در يك مسير مجزا قرار مي دهيم. بنابراين اجازه بدهيد فايل test.htm مربوط به HTML را در مسير اصلي نگه داشته و يك مسير فرعي images داخل مسير اصلي، جايي كه تصوير test.png را نگهداري مي كنيم، ايجاد كنيم.
با فرض اينكه موقعيت تصوير ما "image/test.png" مي باشد، مثال زير را امتحان كنيد:

 مثال:

Using Image in Webpage

Simple Image Insert

تنظيم طول و عرض تصوير

مي توانيد طول و عرض تصوير را براساس نياز خود و با استفاده از ويژگي هاي width و height تنظيم كنيد. شما مي توانيد طول و عرض تصوير را به پيكسل يا براساس درصد اندازه ي واقعي آن تنظيم كنيد.

 مثال:

Set Image Width and Height

Setting image width and height

تنظيم حاشيه ي تصوير

به طور پيش فرض تصوير حاشيه اي در اطراف خود خواهد داشت، شما مي توانيد ضخامت اين حاشيه را با استفاده از ويژگي border و به واحد پيكسل تنظيم كنيد. ضخامت 0 يعني هيچ حاشيه اي در اطراف تصوير وجود ندارد.

 مثال:

  Set Image Border

Setting image Border

تنظيم همترازي تصوير

به طور پيش فرض تصوير در سمت چپ صفحه تنظيم مي شود، اما مي توانيد از ويژگي align براي تنظيم تصوير در سمت راست يا مركز صفحه استفاده كنيد.

 مثال:

  Set Image Alignment

Setting image Alignment

   در اين وبلاگ كدها نمايش داده نمي شود جهت مشاهده كدها برروي آموزش طراحي سايت كليك كنيد