این آموزش در تاریخ ۱۴۰۲/۰۶/۲۰ آپدیت شده است.
آموزش صفت Height در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش صفت Height در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
صفت Height در HTML
صفت height صفتی است که میتوان با استفاده از آن اندازه ارتفاع ( Height ) یک تگ رو بصورت عددی و با واحد پیکسل ( px ) مشخص کرد.
- صفت width اندازه عرض رو مشخص میکنه
- صفت height اندازه ارتفاع رو مشخص میکنه
این صفت مقداری که میپذیرد بصورت عددی می باشد و بصورت پیش فرض سیستم خودش با واحد پیکسل حسابش میکنه.
Free-Learn
عناصری که توسط این صفت پشتیبانی می شوند
این صفت را میتوان در عناصر/تگ های زیر بکار برد.
| <iframe> | <embed> | <canvas> |
| <object> | <input> | <img> |
| <video> | ||
Free-Learn
مثال از صفت Height در HTML
در ادامه میتوانید یک مثال از این صفت را مشاهده نمایید.
مثال شماره ۱ : استفاده در تگ Canvas
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<body> <canvas id="myCanvas" height="200" style="border:3px solid black"> مرورگر شما از این تگ پشتیبانی نمی کند </canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#92B901"; ctx.fillRect(50, 50, 100, 100); </script> </body> |
مثال شماره ۲ : استفاده در تگ Embed
|
1 2 3 4 5 |
<body> <embed src="files/test-object.html" width="500" height="300"> </body> |
مثال شماره ۳ : استفاده در تگ Iframe
|
1 2 3 4 5 |
<body> <iframe src="https://free-learn.ir" width="500" height="250"></iframe> </body> |
مثال شماره ۴ : استفاده در تگ Img
|
1 2 3 4 5 |
<body> <img src="images/girls-1.jpg" width="300" height="194"> </body> |
مثال شماره ۵ : استفاده در تگ Input
|
1 2 3 4 5 6 7 8 |
<body> <form action="files/get_data.php" method="POST"> نام: <input type="text" name="myname"> <br><br> <input type="image" src="files/submit-button.png" width="100" height="50"> </form> </body> |
مثال شماره ۶ : استفاده در تگ Object
|
1 2 3 4 5 |
<body> <object data="files/test-object.html" width="500" height="300"></object> </body> |
مثال شماره ۷ : استفاده در تگ Video
|
1 2 3 4 5 6 7 |
<body> <video controls width="400" height="230"> <source src="files/demo.mp4" type="video/mp4"> </video> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از صفت height در HTML پشتیبانی میکنند یا خیر.
| نام تگ | Chrome | Firefox | Opera | Safari | Edge |
| canvas | بله | بله | بله | بله | بله |
| embed | بله | بله | بله | بله | بله |
| iframe | بله | بله | بله | بله | بله |
| img | بله | بله | بله | بله | بله |
| input | بله | بله | بله | بله | بله |
| object | بله | بله | بله | بله | بله |
| video | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این صفت در HTML بصورت زیر می باشد.
|
1 2 3 4 5 6 7 |
<canvas height="Pixel_Number"> <embed height="Pixel_Number"> <iframe height="Pixel_Number"> <img height="Pixel_Number"> <input height="Pixel_Number"> <object height="Pixel_Number"> <video height="Pixel_Number"> |
Free-Learn
جدول مقادیر صفت Height در HTML
در جدول زیر میتوانید، مقادیری را که میتوان در این صفت استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| Pixel_Number | یک عدد که میزان ارتفاع تگ را مشخص میکند |
Free-Learn
نکات و توضیحات
- مقداری که درون این صفت قرار میگیرد باید بصورت عددی و بدون هیچ پیشوند و پسوندی باشه. ( مثلا ۳۰ ) و بصورت پیش فرض واحد این عدد پیکسل ( Px ) می باشد.
- با استفاده از صفت Height میتوان اندازه ارتفاع و با استفاده از صفت Width میتوان اندازه عرض یک تگ رو مشخص کرد.
- برای اینکه کنترل بهتری بروی تصاویر و ویدئوها داشته باشید حتما همیشه اندازه width و height رو مشخص کنید.
