سلام! خب بالاخره شروع شد!
با اولین جلسه از آموزش اچ تی ام ال در خدمت شما هستیم!
خب با اجازه بزرگان جمع بریم سر اصل مطلب!:
اول از همه چند نکته بگم:
1- از پرسیدن هیچ سوالی نترسید! بترسید می کشمتون! هر کسی هم که کسیو تو کلاس من() مسخره کنه می کشمش!
2- اگه دوس داشتین خوب یاد بگیرین تمرین هایی که میگم رو انجام بدین تا خوب درک کنین مسائل رو... این تمرین ها با عنوان "

خودتان تمرین کنید:

" قرار داده خواهد شد!
3- امیدوارم معلم خوبی باشم! و بتونم سوالاتتون رو جواب بدم!

جلسات:

جلسه اول: تاریخچه، ساختار کلی و تگ P
جلسه ی دوم: تگ های img , a, h
جلسه ی سوم: معرفی خواص

تگ ها

جلسه ی چهارم: معرفی استایل

جلسه ی پنجم: تگ های مربوط به شخصی سازی متن و کامنت ها

جلسه ی ششم: توضیحی بر سی اس اس!

جلسه ی هفتم: لیست ها

سلام.
ببخشید چند روز تاخیر داشتم. دلیلش رو خودتون می دونید.
بریم سر آموزش:
خب اینجلسه جلسه ی نسبتا ساده ایه پس نگران نباشید. جلسه ی بعد css رو میگم! البته یکم می گم!
قسمت اول این جلسه در مورد تگ هایی هستش که مربوط به متن هستن و به متن شکل دهی می کنن و شخصی سازی اش می کنن.
مثل بولد کردن و ایتالیک کردن و ساب اسکریپت کردن و ...
در مورد اینا قراره صحبت کنیم:

• Bold text
• Important text
• Italic text
• Marked text
• Small text
• Deleted text
• Inserted text
• Subscripts
• Superscripts

---

• Bold text

همونطور که قبلا گفتم تگ <b> برای بولد کردن متون به کار می ره. فکر نمی کنم توضیحی بخواد.

کد HTML:

<p>This text is normal.</p>

<p><b>This text is bold</b>.</p>

خودتان امتحان کنید »

• Important text

برای متن های مهم شما می تونید از تگ <strong> استفاده کنید.

کد HTML:

<p>This text is normal.</p>

<p><strong>This text is strong</strong>.</p>

خودتان امتحان کنید »

• Italic text

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

کد HTML:

<p>This text is normal.</p>

<p><i>This text is italic</i>.</p>

خودتان امتحان کنید »

• Marked text

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

کد HTML:

<h2>HTML <mark>Marked</mark> Formatting</h2>

خودتان امتحان کنید »

• Small text

برای مشخص کردن متون کوچک و غیر مهم از <small> استفاده می کنیم. (برای مواقعی خوبه که کل متنتون مهمه به جز یه تیکه ایش!)

کد HTML:

<h2>HTML <small>Small</small> Formatting</h2>

خودتان امتحان کنید »

• Deleted text

برای نشون دادن متون حذف شده از تگ <del> استفاده می کنیم.متون جذف شده همون متونی هستن که روشون خط کشیده شده: Deleted

کد HTML:

<p>My favorite color is <del>blue</del> red.</p>

خودتان امتحان کنید »

• Inserted text

برای نشون دادن یه متن اضافه شده از تگ <ins> استفاده می کنیم.

کد HTML:

<p>My favorite <ins>color</ins> is red.</p>

خودتان امتحان کنید »

• Subscripts

برای ایجاد متون زیر نویس _{یعنی اینجوری} از تگ<sub> استفاده می کنیم.

کد HTML:

<p>This is <sub>subscripted</sub> text.</p>

خودتان امتحان کنید »

• Superscripts

برای نشون دادن متون بالا نویس ^{یعنی اینجوری} از تگ <sup> استفاده می کنیم.

کد HTML:

<p>This is <sup>superscripted</sup> text.</p>

خودتان امتحان کنید »

---

خب قسمت اول آموزش تموم شد اینم تمریناتش:

خودتان تمرین کنید:

تمرین 1 »
تمرین 2 »
تمرین 3 »
تمرین 4 »
تمرین 5 »

---

تگ هایی که توی قسمت اول در موردشون حرف زدیم:

تگ	وظیفه
<b>	ایجاد متن بولد
<i>	ایجاد متن ایتالیک
<small>	ایجاد متن غیر مهم و کوچک
<strong>	ایجاد متن مهم
<sub>	ایجاد متن زیر نویس
<sup>	ایجاد متن بالا نویس
<ins>	ایجاد متن اضافه شده
<del>	ایجاد متن حذف شده
<mark>	ایجاد متن هایلایت شده (HighLighted text)

---

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

• نقل قول کوتاه:

برای ایجاد نقل قول های کوتاه و کوچک و چند کلمه ای از تگ <q> استفاده می کنیم.

کد HTML:

<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>

خودتان امتحان کنید »

• نقل قول های بلند:

برای ایجاد نقل قول های بلند و چند خطی از نگ <blockquote> استفاده می کنیم.

کد HTML:

<p>Here is a quote from WWF's website:</p><blockquote cite="http://www.worldwildlife.org/who/index.html">For 50 years, WWF has been protecting the future of nature.The world's leading conservation organization,WWF works in 100 countries and is supported by1.2 million members in the United States andclose to 5 million globally.</blockquote>

خودتان امتحان کنید »

• مخفف ها:

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

کد HTML:

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

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

خودتان امتحان کنید »

• آدرس دهی و اطلاعات:

برای آدرس دهی از یک شخص و یا اطلاعات اون شخص و در کل یه شناسنامه برای یه چیزی ما از تگ <address> استفاده می کنیم.

کد HTML:

<address>
Written by Jon Doe.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

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

خودتان امتحان کنید »

• مشخص کردن طریقه ی حروف چینی صفحه:

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

کد HTML:

<bdo dir="rtl">This text will be written from right to left</bdo>

خودتان امتحان کنید »

---

قسمت دوم هم به پایان رسید، تمرین هاش:

خودتان تمرین کنید:

تمرین 1 »
تمرین 2 »
تمرین 3 »
تمرین 4 »

---

یه تگ کوچولو رو هم معرفی کنم:

• نشان دادن متغیر های ریاضی:

شما اگه بخواید از متغیر های ریاضی توی متنتون استفاده کنید می تونید از تگ <var> استفاده کنید.

کد HTML:

<p>Einstein wrote:</p>

<p><var>E = m c<sup>2</sup></var></p>

خودتان امتحان کنید »

---

قسمت سوم:
قسمت کامنت ها در html:

کامنت ها زمانی استفاده می شن که شما می خواید به فایل اچ تی ام ال تون یه توضیح یا یه همچین چیزی اضافه کنید.

کد HTML:

<!-- Write your comments here -->

و فرمتشون اینجوریه.
یا مثلا زمانی که دارین صفحه تون رو چک می کنید و می خواید یه عضو از صفحه نشون داده نشه برای یک بار اجرا شدن اون رو کامنت می کنید.

کد HTML:

<!-- Do not display this at the moment
<img border="0" src="pic_mountain.jpg" alt="Mountain">
-->

و یه جای دیگه هم استفاده می شه.

جایی که شما می خواید یه مرورگر به خصوص مثل اینترنت اکسپلورر 8 یه چیزی رو اجرا کنه ولی بقیه مرورگر ها نه.

کد HTML:

<!--[if IE 8]>
    .... some HTML here ....
<![endif]-->

الان مرورگر اینترنت اکسپلورر این چیزایی که بین کامنت هست رو می بینه و اجرا می کنه ولی بقیه ی مرور گر ها نمی بینن.

---

امیدوارم خوب یاد گرفته باشید.
سوالی داشتید بپرسید.
منتظرم.

اوه! چقد سوال یه جا باهم!

سلام استاد جان خسته نباشی

سلامت باشی .... من شاگردم خودم... استاد نیستم!

---

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

چشم سعی خودمو می کنم

---

دمت گرم استاد خواهش بیشتر از یکم بگو در ادامه html خود css رو یاد بده بازم دمت گرم

ایشالا

---

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

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

---

آیا میشه که رنگ هایلایت رو عوض کرد یا همشون به صورت پیشفرض زرده.

خخخخ
همشون به طور پیشفرض زرده دخترم! ولی میشه! به طور "پیش فرض" زرده! به راحتی می تونی استایلش رو تغییر بدی
Background-color برای رنگ ماژیک هایلایتت!
color برای رنگ متن بعد از هایلایت شدن.

---

تمرین 2 »
این تمرین 2 رو تو آموزش نگفتیEmphasize the word منظورش چیه <em></em>

چیز خاصی نبود ... با ایتالیک فرق خاصی نمی کرد نگفتمش. مهم نیست! دوست داشتی بدونی برو اینجا

---

خوب الان یه سوال دیگه این del فقط برای نشون دادن حذف شدن نیست نه؟ کلا برای هر متنی که بخوایم روش خط بکشیم del رو بذاریم و برای هر متنی که بخوایم زیرش خط بکشیم ins رو استفاده کنیم مثل تو همین ادیتورها برای نوشتن متن یا تو ورد. آیا درست میگم؟

درسته ولی خب خط رو روی متن های حذف شده می کشی نه؟!
در ضمن برای کشیدن خط زیر متون از تگ u استفاده می کنیم. تگ ins برای همون اضافه شدنه و باز هم چون می تونی تغییرش بدی تو سی اس اس وجود داره . می تونی توی سایتت متون اضافه شده رو هر جور بخوای نشون بدی!

---

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

The cite attribute does not render as anything special in any of the major browsers, but it can be used by search engines to get more information about the quotation.

---

آیا این فقط برای نقل قول از یه سایت یا مثلا ما بخوایم یه متن از یه کتاب هم نقل قول کنیم میشه ازش استفاده کرد؟

برای هر چیزی.

---

این چیزی که شما اینجا گفتی من اینطور فهمیدم که برای چپ چین، راست چین یا وسط چین استفاده میشه اما الان تمرینشو نگاه کردم میبینم که نه این برای اینکه حروفو برعکس کنی یعنی اگه نوشتی this بعد اینو با rtl بنویسی میشه siht . درست میگم؟ مثل همون علامت p برعکس مانندی که تو ورد هست؟ یه ذره میشه توضیح بدی اینو

اگه دقت کنی گفتم از چپ به راست "شروع" بشه. this از چپ شروع شده و siht از راست. تموم شد رفت! بله همون علامتیه که تو ورد هست. direction متن رو مشخص می کنه.

---

این مثل توc++ و matlab که اگه کنارش % اینو بذاریم اون خط دیده نمیشه؟ و به منظور توضیح و فهم برنامه برای کسایی هست که میخوان سورس مطابق میلشون تغییر بدن؟

اولا توی سی پلاس پلاس "//" بود نه % !! مطلبو نمی دونم! و دوما بله همونه.

---

بعد یه چیز دیگه اینجا برای خصوصیات تگ ایمیج border="0" آوردی این چیه؟ ما تا حالا خصوصیات سورس و عرض و ارتفاع و آلت که توضیح عکس رو داشتیم این کاربردش چیه؟

پوف! چه دقتی داری دختر! آفرین!
این خصوصیت برای کادر دور عکسه. مقدار پیشفرضش همیشه صفره..
و یه توصیه بهت بکنم؟!
خودت امتحان کن اول ببین نمی فهمی چی به چیه بعدش سوال بپرس! توی هر کاری. الان مثلا border رو میزاشتی 5 می فهمیدی خودت.
در هر صورت واقعا از دقتت خوشم اومد

---

اینو یکم توضیح میدی اینجا یه ذره شبیه تگای دیگه است یه جا باز شده و یه جا بسته شده وسطشم که مطالب مورد نظر ما هست ولی قبلیه فقط باز شده بود. اینو درست نفهمیدم.

این یه جور if مخصوصه برای همین اینجوری نوشته شده! نگران نباش! زیاد استفاده ای نداره!

---

بعد این طرز نوشتن شرط if و حلقه اون برای html هست؟

نه. اچ تی ام ال اونجوری که فکر می کنی if نداره. چون اصن متغیر نداره! اینجور چیزا می ره تو Js و Php که ایشالا خدا بخواد بهشون می رسیم.

---

استاد جان توی متن سوال هارو پرسیدم که جاش معلوم باشه
دستت درد نکنه بابت آموزش

خوب کاری کردی
دست تو هم درد نکنه بابت سوالای خوبت!
اگه چیزی رو نفهمیدی دوباره بپرس

یا علی
@moonlightsky

نوشته اصلی توسط moonlightsky

پس این استایل فقط تو سی اس اس میشه نوشت و تو اچ تی ام ال نمیشه؟

تا جایی که من می دونم به سه روش میشه به اچ تی ام ال استایل داد. یکیش استفاده از تگ استایل هست که یه فایل سی اس اس رو از روی سرور میخونه، یه راه دیگه استفاده از همین تگ استایل بدون دادن آدرس فایل هست که می تونید توی تگ استایل کدهای سی اس اس رو بنویسید، یه راه دیگه هم استفاده از Attribute استایل هست که برای هر تگ می تونید جداگانه استایل بنویسید. فعلا برای تمرین و یادگیری می تونید از هر سه تای اینا استفاده کنید، اما توصیه میشه که از دو تا روش آخری که گفتم استفاده نکنید.

نوشته اصلی توسط moonlightsky

بعد یه چیزی css مکمل html دیگه؟ یعنی بعدا که css یاد گرفتیم میتونیم کدهاشو کلا به سبک خودش بنویسیم؟ یا میشه کدهاشو لابلای کدهای html نوشت؟

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

نوشته اصلی توسط moonlightsky

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

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

نوشته اصلی توسط moonlightsky

و یه سوال دیگه این نرم افزار های web designer یا web maker ها کارشون چیه دقیقا اینکه مثلا ما تو نوشتن برنامه راحتر باشیم مثلا یه چیزی مثل ادیتور ورده که مثلا شکل بصری برای یه کد داره اونو بزنیم مثلا خودش کد ایتالیکه یا کلا یه ذره درباره اینا میشه بگی یا مثل همون برنامه های ویژوال استادیو وایناست که محیطی که توش میتونی با زبان برنامه نویسی خاص برنامه تو بنویسی و اون اونوقت قابلیت خطایابی و اینا داشته یا بشه پیش نمایش کرد؟

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

نوشته اصلی توسط moonlightsky

بله فهمیدم استاد پس اینجاست که برای موتور جستجو فرق میکنه
راستی این شامل بالا بردن رنک سایت و اینا میشه چون مثلا اگه لینک سایت شما توی یه سایت پرطرفدار باشه این به رنک شما کمک میکنه آیا این برعکسم هست؟

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

سلام سلام سلام!
خوبین؟!
ببخشید! آقا! ببخشید!
عذر خواهی می کنم بابت تاخیر و فاصله ی گنده ای که بین جلسه ی 5 و 6 افتاد! واقعا عذر می خوام!
دلایل زیادی داشت ولی یکی از مهم ترین هاش این بود که یکی از بچه ها (آره با خودتم! ) گیر داده بود که آموزش رو بزار یا بهتره بگم"عاموزش رو بزار" منم لجم گرفته بود نمی زاشتم!
به هر حال ببخشید!
خب یه تغییر می خوایم بدیم توی اموزشا... تغییر خوبیه!
آموزش ها از این به بعد پروژه محور خواهند بود! نه نه! مساله محور بهتره! :/ اصن نمی دونم! من میگم یه کاری انجام بدین و یه سری ابزار برای انجام کار بهتون می دم! و شما با جوابی که توی متن مخفی خواهم گذاشت جوابتون رو چک می کنید! اینجوری حالش بیشتره!
حالا یه جلسه امتحان می کنیم اگه استقبال کردید( نکنید می کشمتون! ) ادامه می دیم.
بریم سراغ اصل مطلب!

---

آخرین بار می خواستیم بگیم که سی اس اس چیه!
در واقع سی اس اس چیز خاصی نیست!
ینی چیز جدیدی نیست!
سی اس اس همون استایل دهی هستش! همون تعیین ظاهر و ویژگی تگ ها از طریق استایل!
سی اس اس سه نوع داره:

• بر خط(InLine)
  
• داخلی(Internal)
  
• خارجی(External)

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

کد HTML:

Tag name { property : value ;
                  property : value ;
                  property : value ;
                  property : value ;
                  property : value ;
                             ...
}

خب همون طور که احتمالا فهمیدین هر ویژگی یا property توسط ";" از دیگری جدا می شه.
به عنوان مثال یه نوع استایل دهی داخلی رو می بینید:

کد HTML:

<!DOCTYPE html>
<html>

<head>
<style>
  body {background-color:lightgrey}
  h1   {color:blue}
  p    {color:green}
</style>
</head>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>

</html>

و اما استایل دهی خارجی چیه؟! خب همینه! فقط به جای اینکه کد سی اس اس توی خود فایل html مون باشه، توی یه فایل جداگونه است! با پسوند سی اس اس:

کد HTML:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>

</html>

وهمونطور که می بینید به صحه ی html الحاق می شه!
به همین سادگی و همین خوشمزگی!

---

خب حالا می خوایم یه باکس بسازیم:
مرحله ی یک.
با استفاده از ویژگی border و سی اس اس داخلی برای پاراگراف های داخل صفحه یک کادر ایجاد کنید.

متن مخفي!

کد HTML:

p {
    border:1px solid black;
}

.
خب احتمالا نتونستید بنویسید درستشو عیبی نداره!
1px برای تعیین ضخامته!
solid یه خاصیت مربوط شکل کادر شماست! که این به معنای کادر سادست! اگه بنویسید dotted کادرتون نقطه چین می شه! (با تشکر از امیر! )
black هم که مسلما برای رنگ کادره!

---

مرحله ی دو.
حالا برای اینکه متن داخل کادر رو از کادر دور کنید باید از خاصیت padding استفاده کنید. استفاده کنید!

متن مخفي!

کد HTML:

p {
    border:1px solid black;
    padding:10px;
}

---

مرحله ی سه.
حالا برای دور کردن کادر و فاصله دادن اون با بقیه ی چیزای اطرافش از خاصیت margin استفاده کنید!

متن مخفي!

کد HTML:

p {
    border:1px solid black;
    padding:10px;
    margin:30px;
}

---

مسخره بود! نه؟!
آسون!
برای یه جلسه کم بود نه؟!
ولی خب همینی که هست!
تا جلسه ی بعد و تا درودی دیگر بدرود!
سوالاتونو بپرسین! نپرسین می خورمتون!

سلام علیکم و رحمته الله و برکاته!
الحمدلله رب العالمین و بهی نستعین انّه خیر ناصر معین...
یا مقلب القلوب ، ثبت قلوبنا علی دینک.

خوبین؟ خوشین؟!
نیستین؟! به من چه! من اومدم بگم براتون یه جلسه ی دیگه آوردم!
بریم سراغش!
خب اولش یه ویژگی از تگ لینک!
ویژگی target برای تگ a :
این یه ویژگی هست که معلوم می کنه لینکتون به چه صورت باز بشه، توی یک تب جدید یا توی همین تبی که همین الان هستین یا توی یه صفحه ی جدید.
مقادیرش این هاست:

_blank	Opens the linked document in a new window or tab
_self	Opens the linked document in the same frame as it was clicked (this is default)
_parent	Opens the linked document in the parent frame
_top	Opens the linked document in the full body of the window
framename	Opens the linked document in a named frame

خودتون می فهمین دیگه؟!
نفهمیدین بپرسین ولی غیر قابل فهم نیست!

---

خب حالا میریم سراغ لیست ها توی اچ تی ام ال:
دو نوع لیست داریم:

• با ترتیب
• بدون ترتیب

نوع اول لیست های هستن که ترتیب دارن و مورد اول نسبت به مورد دوم فرق می کنه!
مثل این:

1. مورد اول
2. مورد دوم
3. مورد سوم
4. مورد بعدی!

که این نوع لیست توسط تگ ol شناخته میشه و هر موردش با تگ li تعریف می شه. یعنی به این صورت:

کد HTML:

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

خودتان امتحان کنید »

حالا شما میتونید با استفاده از خاصیت type نوع این ترتیب دهی رو مشخص کنین که مثلا توسط اعداد باشه یا اعداد رومی باشه یا حروف انگلیسی باشه و یا ....
اینجوری:

Type	Description
type="1"	The list items will be numbered with numbers (default)
type="A"	The list items will be numbered with uppercase letters
type="a"	The list items will be numbered with lowercase letters
type="I"	The list items will be numbered with uppercase roman numbers
type="i"	The list items will be numbered with lowercase roman numbers

به عنوان مثال:

کد HTML:

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

خودتان امتحان کنید »
توی این مثال توسط اعداد معمولی ترتیب داده می شه به لیستمون.
لیست بدون ترتیب هم دقیقا مثل همونه!
هیچ فرقی نمی کنه!
فقط مقادیری که می تونیم به type بدیم فرق می کنه! و در ضمن باید این مقادیر رو از طریق استایل بدیم. ینی به type نمی دیم! به style میدیم.

این مقادیر:

Style	Description
list-style-type: disc	The list items will be marked with bullets (default)
list-style-type:circle	The list items will be marked with circles
list-style-type:square	The list items will be marked with squares
list-style-type:none	The list items will not be marked

همین!
حالا اگه بخواین لیستتون به صورت افقی نشون داده بشه باید این کارو بکنین:

کد HTML:

<ul style="display:inline">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>PHP</li>
</ul>

این جلسه خیلی کم بود... می دونم ....

می دونننننممممممممممم!
ساکت!
بزارین جرفمو بزنم...
ببینین
خدافظ!
به من چه که کم بود!
وقت ندارم خو!

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

باشه! ایشالا زودتر از یه ماه می زارم!
شب خوش!

سوال بپرسین!

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

<html lang="en-US">


<head>
<title>Let's begin</title>
</head>


<body>
<a name="up"><p style="color:green;font-size:500%;font-familyalace Script MT;text-align:center"><b>In the name of God</b></p></a>
<img src="../pix/A.jpg" width="420" height="600">


<h1><mark>Hi</mark></h1>
<p style="color:brown"><i>I'm A and I just started learning HTML.</i>
I used to think that it's boaring and hard,
But it turned out to be exciting and full of fun!
Everybody, wish me luck!</p>


<h2><mark>How to start</mark></h2>
<p style="color:purple">So I've been looking for a strong and high
quallity instruction and a good friend suggested me here:</p>
<p><a href="http://www.forum.pioneer-life.ir/thread6549.html">Try the link</a></p>
<p title="Pioneer-Life.ir" style="color:purple">The instructions are complete and got an Easy-To-Hard system!
I believe you won't come to any problem.
<br><abbr title="For Your Information">FYI</abbr>: They answer all your questions, completely and precisely!</br></p>


<h2><mark>What's needed</mark></h2>
<p style="color:red"><b><s>Any special application?</s><br>Absolutely nothing!</br></b>
Since you got Notepad on your computer, it would be enough!
Just get to the work and <u>enjoy it!</u></p>


<h3>Remember</h3>
<p>Nothing is <small>impossible</small></p>


<h2><mark>Inspiration</mark></h2>
<p>Don't be afraid. Just take the first step and don't worry about the rest.<br>
T.S.Elliot, a essayist and playwright says:<q>Only those who will risk going too far
can possibly find out how far one can go.</q><br>
Also, Stacy London, American auther says:</p>
<blockquote>Don't let fear or insecurity stop you from trying new things.
believe in yourself. Do what you love. And most importantly, be kind to others,
even if you don't like them.</blockquote>


<h3>About me</h3>
<address>
Name: Mixed nut<br>
Translator<br>
Visit me at:<br>
Forum.pioneer-life.ir<br>
</address>


<p><hr></hr></p>
<a href="#up">Go Up</a>


</body>
</html>

و اما سوالات من:
1. حتما باید بین بند بند متن یه inter زده بشه؟ حکمتش چیه؟ برای خوشگلی و تمیزی؟ برای آسون تر شدن خوندنش؟
2. آیا لیستی از فونتها و رنگ هایی که مرورگر قادر به خوندن اون‌هاست وجود داره؟
3. حالا که نمیشه برای headها style تعریف کرد، باید از تگ font استفاده کنیم؟
4. میشه رنگ highlight رو تغییر داد؟ یا نمیشه و تنها چاره استفاده از استایل background-color میباشد؟
5. انتهای پست شماره 51# در همین تاپیک، مبحث کامنت‌ها قرار گرفته که "خودتون امتحان کنید" نداشت. میشه قرار بدین؟ (و بماند که هیچی نفهمیدم ازش...)
6. توی head به جز title چه چیزهایی میشه قرار داد؟
7. آیا <br> نیازی به بستن نداره؟ همین جوری آخر جمله به جای inter قرارش بدیم کافیه؟
8. وقتی تگ های مربوط به متن داریم مثل بولد و ایتالیک و اینها، باز هم لازمه از <p> استفاده کنیم؟
9. آیا notepad قابلیت ذخیره فایل با فرمت html رو نداره؟ داره؟ چه کنم؟
10. من sublime text3 رو دان کردم و نصب کردم و توی patch کردنش گیر کردم )


ممنون از وقتی که صرف می‌کنید.

پ.ن: حالا که یه بار این پستو میخونم، می‌بینم که بعضی از <ها سر جاشون نیفتادن |:
آیا این پست نوشتن راست نویس و چپ نویس نداره؟ (منظورم alignش نیستا.)

- - - - - - - - - به دلیل ارسال پشت سر هم پست ها ادغام شدند - - - - - - - - -

ای خداااااااااا
نمیدونم بخندم یا چی!!!!
اون ایموجی اون وسطاااا که زبون درمیاره در واقع یه : با یه p هستش اونجوری شده هاااا. من وسطش مسخرم نگرفته!

نوشته اصلی توسط mixed-nut

سلام به همگی.
لطفا منو هم توی کلاس ثبت نام کنین.
ببخشید که مشقام عقب افتاده. همشونو جمع کردم یه جا نوشتم(البته تا ابتدای آموزش ++C)
استاد بگو از بیست چند میگیرم؟

<html lang="en-US">


<head>
<title>Let's begin</title>
</head>


<body>
<a name="up"><p style="color:green;font-size:500%;font-familyalace Script MT;text-align:center"><b>In the name of God</b></p></a>
<img src="../pix/A.jpg" width="420" height="600">


<h1><mark>Hi</mark></h1>
<p style="color:brown"><i>I'm A and I just started learning HTML.</i>
I used to think that it's boaring and hard,
But it turned out to be exciting and full of fun!
Everybody, wish me luck!</p>


<h2><mark>How to start</mark></h2>
<p style="color:purple">So I've been looking for a strong and high
quallity instruction and a good friend suggested me here:</p>
<p><a href="http://www.forum.pioneer-life.ir/thread6549.html">Try the link</a></p>
<p title="Pioneer-Life.ir" style="color:purple">The instructions are complete and got an Easy-To-Hard system!
I believe you won't come to any problem.
<br><abbr title="For Your Information">FYI</abbr>: They answer all your questions, completely and precisely!</br></p>


<h2><mark>What's needed</mark></h2>
<p style="color:red"><b><s>Any special application?</s><br>Absolutely nothing!</br></b>
Since you got Notepad on your computer, it would be enough!
Just get to the work and <u>enjoy it!</u></p>


<h3>Remember</h3>
<p>Nothing is <small>impossible</small></p>


<h2><mark>Inspiration</mark></h2>
<p>Don't be afraid. Just take the first step and don't worry about the rest.<br>
T.S.Elliot, a essayist and playwright says:<q>Only those who will risk going too far
can possibly find out how far one can go.</q><br>
Also, Stacy London, American auther says:</p>
<blockquote>Don't let fear or insecurity stop you from trying new things.
believe in yourself. Do what you love. And most importantly, be kind to others,
even if you don't like them.</blockquote>


<h3>About me</h3>
<address>
Name: Mixed nut<br>
Translator<br>
Visit me at:<br>
Forum.pioneer-life.ir<br>
</address>


<p><hr></hr></p>
<a href="#up">Go Up</a>


</body>
</html>

و اما سوالات من:
1. حتما باید بین بند بند متن یه inter زده بشه؟ حکمتش چیه؟ برای خوشگلی و تمیزی؟ برای آسون تر شدن خوندنش؟
2. آیا لیستی از فونتها و رنگ هایی که مرورگر قادر به خوندن اون‌هاست وجود داره؟
3. حالا که نمیشه برای headها style تعریف کرد، باید از تگ font استفاده کنیم؟
4. میشه رنگ highlight رو تغییر داد؟ یا نمیشه و تنها چاره استفاده از استایل background-color میباشد؟
5. انتهای پست شماره 51# در همین تاپیک، مبحث کامنت‌ها قرار گرفته که "خودتون امتحان کنید" نداشت. میشه قرار بدین؟ (و بماند که هیچی نفهمیدم ازش...)
6. توی head به جز title چه چیزهایی میشه قرار داد؟
7. آیا <br> نیازی به بستن نداره؟ همین جوری آخر جمله به جای inter قرارش بدیم کافیه؟
8. وقتی تگ های مربوط به متن داریم مثل بولد و ایتالیک و اینها، باز هم لازمه از <p> استفاده کنیم؟
9. آیا notepad قابلیت ذخیره فایل با فرمت html رو نداره؟ داره؟ چه کنم؟
10. من sublime text3 رو دان کردم و نصب کردم و توی patch کردنش گیر کردم )


ممنون از وقتی که صرف می‌کنید.

پ.ن: حالا که یه بار این پستو میخونم، می‌بینم که بعضی از <ها سر جاشون نیفتادن |:
آیا این پست نوشتن راست نویس و چپ نویس نداره؟ (منظورم alignش نیستا.)

- - - - - - - - - به دلیل ارسال پشت سر هم پست ها ادغام شدند - - - - - - - - -

ای خداااااااااا
نمیدونم بخندم یا چی!!!!
اون ایموجی اون وسطاااا که زبون درمیاره در واقع یه : با یه p هستش اونجوری شده هاااا. من وسطش مسخرم نگرفته!

اهم با اجازه من اونایی که میدونم جواب بدم تا بعدا خوداستاد ابراهیم بیان حرفامو نقض کنن

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

2- اممم اینو من نمیدونم وایسید خود ابراهیم بیاد جواب بده فقط چیزی که میدونم اینه که شما میتونید با سی اس اس هر فونتی که خواستید رو روی قالبتون نصب کنید و همه چه اونو داشته باشن یا نه میتونن ببیننش ^____^

3- فک کنم میشه ، ابراهیم توی آموزشاش مثالشم زده بودا Oo یادمه یه بار هدینگو با استایل رفته بود برای مثال البته باز خودش بیاد بگه بهتره -____-

4- حدس میزنم همون استایل باشه چاره اش ، چون تو سایتا چیز دیگه ای ننوشتن

5- بفرمایید کل خودتان امتحان کنیدای مبحث کامنت :

http://www.w3schools.com/html/html_comment

کامنتا برای خودتونن که قاطی نکنید ، مثلا شما یه پروژه خیلی عظیمی نوشتید، ممکنه بعد از هزار خط دیگه نتونید بگید این کد مال کدوم بخشه دیگه اصلا ، برای همین میاید تگ کامنت میذارید و توش یاد میذارید که بعدا سریع یادتون بیاد ، تگ کامنتو مرورگر نمایش نمیدهنمیده ^_^

6- اینا رو



<style>
<base>
<link>
<meta>
<script>
<noscript>


نمیدونم چین اصلا بذارید خود ابراهیم بگه

7 - نه نیازی به بستن نداره اون تگی که یه خط تو صفحه میکشه هم همینطوریه ، یادم رفت چی بود

8 - نمیدونم والا ، بدون تگ پی هم کار میکنه ولی نمیدونم اصولیه یا نه '____'

9 - اصلا خیلیا با نوتپد میرن .... کار که تموم شد فایلو با فرمت HTML. سیو کنید بعد با مروگر اجراش کنید

10 - من خودم اولش ابراهیم بهم توصیه کرد با notepad ++ کار کنم، خیلی عالیه هم رایگانه هم اکثر زبانای برنامه نویسو ساپورت میکنه ... متنا و تگای مختلفم رنگی میکنه که قاطی نکنید . هرچند htmlpad و atom هم خیلی خوبن مخصوصا اتم طراحیس خیلی ساده و قشنگه رایگانم هست کرک نمیخواد


میتونیدکداتونو تو تگ اچ تی ام ال بذارید که مشخص باشه و قاطی و اینا نشه

کد HTML:

اینجوری :)

توی ادیتور علامتش <> هست میتونید انتخاب کنید