آموزش جامع طراحی سایت

به روز ترین مطالب آموزشی و متدلوژی های برنامه نویسی

تازه ترين مطالب

پربازديدترين مطالب

محبوب ترين مطالب

آموزش طراحی سایت -آموزش درج کردن تصویردر HTML-آموزش Html

پیمان کلانتری جمعه ۳۱ اردیبهشت ۰۰ | ۱۱:۳۳ ۱۲ بازديد

آموزش طراحی سایت -آموزش درج کردن تصویردر HTML-آموزش Html

وارد کردن تصاویر در صفحات HTML

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

 

وارد کردن تصویر

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

 

?
1
src="Image URL" ... attributes-list/>

 

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


 مثال:

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

 

نمونه یک

 

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

 

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

آموزش html css

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

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

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

 مثال:

نمونه سه

 

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

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

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

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


 مثال:

نمونه پنج

به دلیل عدم درست  نمایش ندادن نمونه مثال ها لطفا به ادرس دوره آموزش طراحی سایت مراجعه فرمایید. 

برچسب ها: آموزش طراحی سایت, آموزش جامع طراحی سایت, دوره آموزش طراحی سایت, آموزش برنامه نویسی, آموزشگاه برنامه نویسی,

آموزش طراحی سایت-توضیحات در HTML

پیمان کلانتری پنجشنبه ۳۰ اردیبهشت ۰۰ | ۱۰:۱۲ ۱۴ بازديد
آموزش طراحی سایت-توضیحات در HTML

آموزش استفاده از comment در html

در این مقاله آموزش Html می خواهیم به چگونگی استفاده از comment در html بپردازیم:
کامنت قطعه ای از کد می باشد که توسط مرورگرها نادیده گرفته می شود. افزودن کامنت به کد HTML خود، تمرین خوبی است، به ویژه در داکیومنت های پیچیده برای نشان دادن بخش هایی از یک داکیومنت به هرکسی که کد را نگاه می کند. کامنت ها به شما و دیگران کمک می کنند تا کد خود را متوجه شوید و قابلیت خواندن آن را افزایش می دهد.
کامنت های HTML بین برچسب های واقع می شوند. بنابراین هر محتوایی که بین این برچسب ها واقع شود، مثل کامنت با آن رفتار خواهد شد و توسط مرورگرها به طور کامل نادیده گرفته خواهد شد.

 مثال:

نمونه یک






This is document title


Document content goes here.....




این مثال نتیجه ی زیر را بدون نمایش محتوای ارائه شده به عنوان بخشی از کامنت ها، به دنبال دارد.
Document content goes here.....

 

کامنت های معتبردر مقابل کامنت های نامعتبر

کامنت ها تودرتو نمی شوند، یعنی اینکه یک کامنت نمی تواند در داخل کامنت دیگری قرار بگیرد. خط تیره ی (dash) دوتایی "--" ممکن نیست در داخل یک کامنت ظاهر شود، به جز در مواردی که بخشی از برچسب closing باشد. شما باید مطمئن باشید که هیچ فضای خالی در ابتدای رشته ی کامنت وجود ندارد.


 مثال:

در اینجا کامنت ارائه شده یک کامنت معتبر می باشد و توسط مرورگر پاک می شود.

 

نمونه دو





Valid Comment Example



Document content goes here.....





اما خط زیر یک کامنت معتبر نیست و توسط مرورگر نمایش داده خواهد شد. این به این خاطر است که فضایی بین حاشه ی چپ پرانتز و علامت تعجب وجود دارد.


 مثال:

نمونه سه





Invalid Comment Example


< !-- This is not a valid comment -->

Document content goes here.....






کامنت های چندخطی

تاکنون فقط کامنت های تک خطی را مشاهده کردیم، اما HTML کامنت های چندخطی را نیز پشتیبانی می کند.
شما می توانید کامنت های چند خطی داشته باشید با استفاده از برچسب آغازگر --!> و پایان دهنده ی ،--> که قبل از اولین خط و در پایان آخرین خط قرار میگیرد.


 مثال:

نمونه چهار





Multiline Comments



Document content goes here.....





کامنت های شرطی

کامنت های شرطی تنها در اینترنت اکسپلورر روی ویندوز کار می کنند، اما توسط مرورگرهای دیگر هم نادیده گرفته می شوند. این کامنت ها در Internet Explorer 5 به بالاتر پشتیبانی می شوند و می توانید از آنها برای دادن دستورات شرطی به ورژن های مختلف IE استفاده کنید.


 مثال:

نمونه پنج




Conditional Comments





Document content goes here.....






در جایی که نیاز خواهید داشت یک صفحه ی طراحی متفاوت بر اساس ورژن های مختلف اینترنت اکسپلورر به کار بگیرید، به راه حلی نیاز خواهید داشت. در این مواقع چنین کامنت های شرطی مفید خواهند بود.

 

استفاده از برچسب کامنت

مرورگرهای کمی هستند که استفاده از برچسب را برای کامنت بخشی از کد HTML استفاده می کنند.


 مثال:

نمونه شش




Using Comment Tag


This is not Internet Explorer.





اگر از IE استفاده می کنید، نتیجه ی زیر حاصل خواهد شد:

 

This is Internet Explorer.

اما اگر در حال استفاده از IE نمی باشد، نتیجه ی زیر حاصل می شود.

 

This is Internet Explorer.

کد اسکریپت کامنت

شما جاوا اسکریپت را در یک آموزش مجزا با HTML یاد خواهید گرفت. در اینجا باید دقت کنید که اگر در حال استفاده از java script یا vb script در کد html خود هستید، بنابراین توصیه می شود که آن کد اسکریپت را در داخل کامنت های مناسب HTML قرار دهید طوری که مرورگرهای قدیمی بتوانند به درستی کار کنند.


 مثال:

نمونه هفت




Commenting Script Code



Hello , World!





امنت صفحات طراحی

گرچه شما HTML را در یک آموزش مجزا با صفحات طراحی فرا میگیرید، اما در اینجا باید دقت داشته باشید که اگر از CSS در کد HTML خود استفاده می کنید، بنابراین توصیه می شود که کد صفحه ی طراحی را در داخل کامنت های مناسب HTML قرار دهید، طوریکه مرورگرهای قدیمی بتوانند کار کنند.


 مثال:

نمونه هشت





Commenting Style Sheets



Hello , World!










 
برچسب ها: آموزش جامع طراحی سایت, دوره آموزش طراحی سایت, آموزش طراحی وب, آموزش برنامه نویسی,

پربحث ترين مطالب

آخرين نظرات

درباره من

آموزشگاه تحلیل داده ارایه دهنده به روز ترین مطالب آموزشی و متدلوژی های برنامه نویسی است که در این زمینه بی رقیب است
یکشنبه ۰۹ اردیبهشت ۰۳

موضوعات

نويسندگان

آرشيو

برچسب ها

خلاصه آمار

  • مجموع نمایش‌ ۲۰,۲۱۸
  • مجموع بازدید ۱۲,۹۴۹
  • بازدید امروز ۶
  • بازدید دیروز ۱۷
  • مجموع مطالب ۹۴
  • مجموع نظرات ۲۱
  • افراد آنلاین ۱

من در شبكه هاي اجتماعي

پيوندها

فارسي بلاگ : رسـانه وبلاگ نويسان حرفـه اي