جلسه یازدهم آموزش html – متن تاکید شده

آموزش اچ تی ام ال
۰۹ بهمن
0

امروز با آموزش یه کد html تقریبا منسوخ شده در خدمتتون هستیم 🙂
این آموزش صرفا جهت یادگیری شماست و تقریبا هیچ گونه کاربردی در زبان فارسی نداره
اما در انگلیسی میتونین ازش استفاده کنین
وقتی در انگلیسی بخوان روی یک متن تاکید کنن اون متن رو یه مقدار کج مینویسن… قبلا بهتون مورب کردن متون رو آموزش دادیم.. این کد هم شبیه همون کد عمل میکنه
کافیه از تگ <em> مثل کد زیر استفاده کنین:

<!DOCTYPE html>
<html>
<head>
<title>جلسه یازدهم آموزش اچ تی ام ال آنزیم - متن تاکید شده</title>
</head>
<body>
matne mamooli<br>
<em>matne takid vA moshakhas shode</em>
</body>
</html>

میتونین فایل مربوط به این آموزش رو از زیر دانلود کنین:

جلسه هشتم آموزش html – فرمتهای متن

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

به نام خدا

در این جلسه میخواهیم فرمتهای bold – italic و underline را که مربوط به متون هستن،آموزش بدیم

برای دادن این فرمتها به متون داخل سندهای html باید از تگ های مربوط به هر کدوم استفاده کنیم.

تگ <b> برای bold کاربرد دارد. به این صورت که ابتدا <b> و سپس متن مورد نظر و در انتهای <b/> را می نویسیم.

تگ <i> نیز برای ایتالیک کردن متن (همان مورب کردن متن) کاربرد دارد و همانند بالا استفاده خواهد شد.

برای زیرخط دار کردن متون نیز از تگ <u> استفاده میکنیم. که این تگ نیز مانند دو تگ بالا باید استفاده شوند.

به کد های زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<title>جلسه هشتم آموزش اچ تی ام ال سایت آنزیم - فرمتهای متن</title>
</head>
<body>
<b>نوشته ی ضخیم</b>
</br>
<i>نوشته ی مورب یا ایتالیک</i>
</br>
<u>نوشته ی زیرخط دار</u>
</br>
<b><u><i>نوشته ای که تمام موارد بالا در آن لحاظ شده است</i></u></b>
</body>
</html>

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

نکته: از تگ </br> زمانی استفاده میکنیم که بخواهیم دو متن را از هم به فاصله ی یک خط جدا کنیم.

فایل آماده ی این جلسه هم در زیر جهت دانلود آماده شده است

 

جلسه هفتم آموزش 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 یادتون نره 🙂

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