جلسه یازدهم آموزش 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 دستور داده میشه چون ما براش مشخص نکردیم.

در این جلسه با خاصیت 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 در سایت آنزیم در خدمتتون هستیم…

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

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

برای این کار باید داخل کد <hr> عبارت “نام رنگ انتخابی”=color  را وارد کنین و در قسمت رنگ انتخابی باید نام رنگ به زبان انگلیسی را وارد کنیم. البته ناگفته نماند که فعلا از نام رنگ استفاده میکنیم و بعدا از کدهای مربوط به طیف های رنگی (مطابق استانداردهای جهانی) استفاده خواهیم کرد.

کد زیر رو در یک نوت پد وارد کنین و به عنوان یک سند html (همانطور که در جلسه اول گفته شد) ذخیره کنین تا شاهد نتیجه باشین

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

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

 

جلسه چهارم آموزش 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>

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

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

آموزش اچ تی ام ال
۰۲ دی
1+

دومین جلسه ی آموزش html رو در خدمتتون هستیم

در این جلسه میخوایم تگ های هدینگ heading رو بهتون آموزش بدیم.

تگ های هدینگ در واقع به نوشته هامون سایز میدن.

که این سایز نوشته برای تگ های هدینگ به ۶ سایز تقسیم میشه ، از شماره ۱ تا شماره ۶٫

به صورت پیش فرض عدد ۱ یعنی سایز بزرگ و هرچه به عدد ۶ نزدیکتر میشیم سایز نوشته ها کوچکتر میشه

این سایزها به صورت پیش فرض برای html درنظر گرفته شدن.ولی کلا ثابت نیستن.. بعدا و در کلاسهای آینده بهتون آموزش میدم که چطور کاری کنین که حتی سایز شماره ۱ خیلی کوچکتر از سایز شماره ۶ بشه..یعنی حتی میشه این امر پیش فرضی که html برای این ۶ سایز در نظر گرفته رو حتی برعکس هم کرد.

خب کدهای زیر رو در یک نوت پد کپی کنین و همونطور که در جلسه ی قبل آموزش دادم ذخیره کنین و با فایرفاکس (یا هر مرورگری) بازش کنین تا ببینین چه بلایی سر نوشته ها میاد 🙂

<!DOCTYPE html>
<html>
<head>
<title>دومین جلسه آموزش اچ تی ام ال آنزیم- تگهای هدینگ</title>
</head>
<body>
<h1>Heading1</h1>
<h2>Heading2</h2>
<h3>Heading3</h3>
<h4>Heading4</h4>
<h5>Heading5</h5>
<h6>Heading6</h6>
</body>
</html>

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

یادآوری: توجه کنین که در بین تگ های <h1>  تا <h6> بین تگ باز و بسته اش اون عباراتی که نوشته شده (یعنی heading 1) رو میتونین به متن دلخواهتون تغییر بدین.

اولین جلسه آموزش html – آشنایی با html

آموزش اچ تی ام ال
۰۱ دی
2+

با سلام

در اولین کلاس از سری آموزشهای html در خدمت شما هستیم.

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

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

زبان html یک زبان ساده ولی همه کاره است… یعنی از این زبان فقط برای صفحات وب استفاده میشه، ولی این صفحاتی که با html آماده میشه میتونه حتی توی برنامه های اندروید هم استفاده بشه… همین نرم افزارهایی که همه ی ما توی گوشیهای اندرویدیمون داریم.

اما نگران نباشین… با این که این زبان خیلی خیلی پرکاربرد هست ولی خیلی راحت و ساده میشه یاد گرفتش.

شما چیزی که برای آموزش html نیاز دارین.. ابتدا یک نرم افزار بسیار بسیار سنگین به اسم notepad می باشد! 🙂

بعدش به یه مرورگر نیاز دارین که مسلما دارینش چون دارین این سایت رو میبینینن!!

یک سند html باید حاوی تگ های  <html> (بهش میگیم اچ تی ام ال باز) و <html/> (بهش میگیم اچ تی ام ال بسته) باشه… حالا برای زیبایی کار بعضیا میان ابتدای سند یعنی بالای بالای صفحه <!DOCTYPE html> رو مینویسن…

این زیاد اجباری نیست… فقط یه رسمه…

در واقع این دو تگ <html> و <html/> به یک صفحه ی معمولی که در notepad بازش کردین میفهمونه که این سند یک سند html هست.

در سند اچ تی ام ال دو تگ اجباری دیگه هم داریم….
یکی <head> و <head/> هستش و دیگری <body> و <body/>

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

تگ  body همونطور که از معنی کلمه اش هم پیداست…در واقع همون بدنه ی اصلی صفحه وب هست که همه ی اطلاعات توش قرار میگیره و به نمایش در میاد

برای اینکه بخواین به صفحه مون عنوان یا تایتل بدیم هم تگ <title> و <title/> رو در داخل تگ head استفاده مکنیم..

خب ابتدا با notepad یک صفحه باز کنین

این کد رو به همین صورت توش قرار بدین

<!DOCTYPE html>
<html>
<head>
<title>اولین جلسه کلاسهای آموزش اچ تی ام ال آنزیم</title>
</head>
<body>
بدنه ی اصلی صفحه وب
</body>
</html>

و کلید ترکیبی کنترل+S رو برای ذخیره شدنش بزنین…

اما صبر کنین… برای ذخیره شدنش عجله نکنین

موقع ذخیره شدن بعد زدن کنترل+S در پنجره ای که باز میشه در پایین صفحه  گزینه ی جلوی  Encoding رو به utf-8 تغییر بدین و سپس در قسمت file name نام نوشته شده رو پاک کنید و نام index.html رو تایپ کنین و سند رو هرجایی که دوست دارین (ترجیحا داخل یک فولدر جداگانه) ذخیره اش کنین.

حالا  اگر خواستین صفحه رو ببینین باید با یک مرورگر مثلا فایرفاکس (پیشنهاد ما هم همینه) بازش کنین تا بتونین صفحه ی ساخته شده خودتون رو ببینین.. و اگر خواستین این صفحه رو ویرایش کنین باید روی فایلتون کلیک راست کنین و این فایل رو با نوت پد بازش کنین.

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

خب برای جلسه ی اول زیاد حرف زدم… 🙂

تا جلسه ی بعد خدا یار و نگهدارتون