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

آموزش اچ تی ام ال
۰۴ دی
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 رو تایپ کنین و سند رو هرجایی که دوست دارین (ترجیحا داخل یک فولدر جداگانه) ذخیره اش کنین.

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

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

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

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