جلسه هفتم آموزش html – تعیین عرض خطوط افقی

آموزش اچ تی ام ال
۱۲ دی
0

در جلسات قبل  نحوه ایجاد خطوط افقی و سایز و رنگ دهی به اون رو آموزش دادیم

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

<!DOCTYPE html>
<html>
<head>
<title>جلسه هفتم آموزش اچ تی ام ال - عرض دهی به خطوط افقی</title>
</head>
<body>
خط اول
<hr width="50%" size="10px" color="red">
خط دوم
<hr width="80%" color="green">
خط سوم
<hr color="blue">
</body>
</html>

کد آماده ی بالا رو در یک نوت پد کپی کنین و اون رو همانطور که در جلسه اول آموزش دادم به صورت یک سند html ذخیره کنین تا نتیجه ی کار رو ببینین.

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

اگر بخوایم که مقدار عرض خط در اثر تغییر سایز پنجره مرورگر تغییر نکنه باید عبارت جلوی width رو به پیکسل نشون بدیم. مثل ۲۰۰px

عبارت px یادتون نره 🙂

کل فایل آماده ی این کلاس هم از باکس زیر قابل دانلود می باشد.