جلسه یازدهم آموزش 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 – تگ div

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

به نام خدا

در جلسه قبل درباره تگ span توضیح دادیم.

تگ div هم تقریبا همانند تگ span عمل میکنه…

شما با تگ div میتونین یک سند html روقسمت بندی کنین. با این کار می تونین برای هر قسمت تنظیمات و استایل خاصی در نظر بگیرین. در صورتی که اینکار رو انجام بدین هر متن یا عنصری که در تگ div مربوطه قرار بدین همون استایل مشخص شده رو قبول خواهد کرد.

در جلسات آینده در اینباره توضیحات مفصلی خواهیم داد

کد زیر یک نمونه ساده از کاربرد تگ div میباشد:

<!DOCTYPE html>
<html>
<head>
<title>جلسه دهم آموزش اچ تی ام ال آنزیم - تگ div</title>
</head>
<body>
<!--Div can be used to group elements-->
<div>
tag div aval
<input type="text">
<input type="text">
<input type="text">
</div>
<div>
tag div 2vom
<input type="text">
<button> دکمه برای نمونه</button>
</div>
</body>
</html>

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

جلسه نهم آموزش html – تگ span

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

این جلسه آموزشی آنزیم خیلی کوتاهه
در این جلسه به شما تگ span رو آموزش میدیم.
تگ span در واقع تکه ای از متن رو نشونه گذاری میکنه. (همانند تگ div که در جلسه ی بعد در باره تگ div صحبت میکنیم). نشونه گذاری متنها چه کاربردی داره؟
کاربردش در این هست که شما میتونین به اون تکه متنی که نشونه گذاری کردین و یا به عبارتی با تگ span مشخص کردینش استایل خاصی بدین.مثلا اون متن رو bold کنین و یا فونتش رو تغییر بدین.
در اینجا توضیح بیشتری نمیدم. چون باعث سردرگمی شما میشه.. در کلاسهای بعدی با استفاده از تگ span و div کارهای فوق العاده ای رو انجام خواهیم داد.
به مثال زیر توجه کنین که یک نمونه ی ساده از تگ span هست.

<!DOCTYPE html>
<html>
<head>
<title>جلسه نهم آموزش اچ تی ام ال آنزیم - تگ اسپن</title>
</head>
<body>
<span>این یک متن ساده در یک تگ ساده ی اسپن است</span> این یک متن ساده بدون اسپن است.
</body>
</html>

توجه کنین که تگ span به تنهایی هیچ تاثیر ظاهری روی متن شما نخواهد گذاشت!
فایل این جلسه رو در زیر میتونین دانلود کنین

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

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

جلسه ششم آموزش html – سایزبندی خطوط افقی

آموزش اچ تی ام ال
۰۹ دی
0

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

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

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

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

میبینین که در داخل تگ hr  ما از کلمه ی size استفاده کردیم تا به html بفهمونیم که خط مورد نظر رو به تعداد پیکسلی که وارد کردیم نشون بده. توجه کنین که عددهایی که جلوش px نوشته شده سایزمونه… با تغییر دادنش میتونین سایز (منظورمون از سایز خطوط افقی همون ضخامتشه)رو تغییر بدین. و یادآوری میکنم که حتما این اعداد با px  روبروشون باید داخل دابل کوتیشن یعنی ” ” قرار بگیرن.
میتونین کدهای آماده رو از فایل زیر دانلود کنین تا ببینین سایز خطوط چطور تغییر کرده.

جلسه چهارم آموزش html – خط افقی

آموزش اچ تی ام ال
۰۵ دی
0

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


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

<!DOCTYPE html>
<html>
<head>
<title>چهارمین جلسه آموزش اچ تی ام ال - خطوط افقی</title>
</head>
<body>
خط اول
<hr>
خط دوم
<hr>
خط سوم
<hr>
</body>
</html>

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

 

جلسه سوم آموزش html – تگ پاراگراف

آموزش اچ تی ام ال
۰۴ دی
0

در این جلسه میخوام تگ پاراگراف رو بهتون آموزش بدم
تگ پاراگراف به صورت <p> باز میشه و به صورت <p/> بسته میشه که وسطش هر متنی قرار بگیره به عنوان یک پاراگراف به اچ تی ام ال معرفی میشه.
پاراگراف ها میتونن استایل خاص خودشون رو داشته باشن…بعدا در کلاسهای آموزشی جلوتر آموزش استایل دهی رو هم براتون میذارم.
خب ؛نت پد را باز کنین و کدهای زیر رو توش کپی کنین و همونطور که در کلاس اول توضیح دادم به صورت یک سند اچ تی ام ال دخیره اش کنین تا ببینین چی میشه….

<!DOCTYPE html>
<html>
<head>
<title>جلسه سوم آموزش اچ تی ام ال  آنزیم - تگ  پاراگراف</title>
</head>
<body>
<p>اولین پاراگراف</p>
<p>دومین پاراگراف</p>
<p>سومین پاراگراف</p>
<p>چهارمین پاراگراف</p>
</body>
</html>

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