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

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

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

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

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

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

ایشالا

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

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

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

خخخخ

همشون به طور پیشفرض زرده دخترم! ولی میشه! به طور "پیش فرض" زرده! به راحتی می تونی استایلش رو تغییر بدی

Background-color برای رنگ ماژیک هایلایتت!

color برای رنگ متن بعد از هایلایت شدن.

تمرین 2 »

این تمرین 2 رو تو آموزش نگفتیEmphasize the word منظورش چیه

خوب الان یه سوال دیگه این del فقط برای نشون دادن حذف شدن نیست نه؟ کلا برای هر متنی که بخوایم روش خط بکشیم del رو بذاریم و برای هر متنی که بخوایم زیرش خط بکشیم 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.

((3))

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

برای هر چیزی.

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

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

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

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

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

پوف! چه دقتی داری دختر!:دی آفرین!

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

و یه توصیه بهت بکنم؟!

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

در هر صورت واقعا از دقتت خوشم اومد

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

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

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

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

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

دستت درد نکنه بابت آموزش

خوب کاری کردی

دست تو هم درد نکنه بابت سوالای خوبت!

اگه چیزی رو نفهمیدی دوباره بپرس

یا علی

@moonlightsky

@HELT 87862 گفته:

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

ببخشید دیگه شرمندتیم

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

شکسته نفسی نفرمایید

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

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

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

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

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.

((3))

بله فهمیدم استاد پس اینجاست که برای موتور جستجو فرق میکنه

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

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

ببخشید دقتم خوب نبود مرسی

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

آره راست میگی حواسم نبود ولی % برای توی متلبه اگه درست یادم مونده باشه

پوف! چه دقتی داری دختر!:دی آفرین!

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

و یه توصیه بهت بکنم؟!

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

در هر صورت واقعا از دقتت خوشم اومد

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

یا علی

علی یارت

@moonlightsky

دستت درد نکنه

بی زحمت به این سوالای جدیدم جواب بده

@moonlightsky 87899 گفته:

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

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

@moonlightsky 87899 گفته:

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

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

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

@moonlightsky 87899 گفته:

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

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

@moonlightsky 87899 گفته:

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

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

@moonlightsky 87899 گفته:

بله فهمیدم استاد پس اینجاست که برای موتور جستجو فرق میکنه

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

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

سلام سلام سلام! :دی

خوبین؟!

ببخشید! آقا! ببخشید!

عذر خواهی می کنم بابت تاخیر و فاصله ی گنده ای که بین جلسه ی 5 و 6 افتاد! واقعا عذر می خوام!

دلایل زیادی داشت ولی یکی از مهم ترین هاش این بود که یکی از بچه ها (آره با خودتم! :دی) گیر داده بود که آموزش رو بزار یا بهتره بگم"عاموزش رو بزار" :دی منم لجم گرفته بود نمی زاشتم!

به هر حال ببخشید!

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

آموزش ها از این به بعد پروژه محور خواهند بود! نه نه! مساله محور بهتره! اصن نمی دونم! من میگم یه کاری انجام بدین و یه سری ابزار برای انجام کار بهتون می دم! و شما با جوابی که توی متن مخفی خواهم گذاشت جوابتون رو چک می کنید! اینجوری حالش بیشتره! ((3))

حالا یه جلسه امتحان می کنیم اگه استقبال کردید( نکنید می کشمتون! ) ادامه می دیم.

بریم سراغ اصل مطلب!

آخرین بار می خواستیم بگیم که سی اس اس چیه!

در واقع سی اس اس چیز خاصی نیست!:دی

ینی چیز جدیدی نیست!

سی اس اس همون استایل دهی هستش! همون تعیین ظاهر و ویژگی تگ ها از طریق استایل!

سی اس اس سه نوع داره:

• بر خط(InLine)

• داخلی(Internal)

• خارجی(External)

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

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

Tag name { property : value ;

property : value ;

property : value ;

property : value ;

property : value ;

...

}

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

به عنوان مثال یه نوع استایل دهی داخلی رو می بینید:

body {background-color:lightgrey}

h1 {color:blue}

p {color:green}

This is a heading

This is a paragraph.

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

This is a heading

This is a paragraph.

وهمونطور که می بینید به صحه ی html الحاق می شه! :دی

به همین سادگی و همین خوشمزگی!

خب حالا می خوایم یه باکس بسازیم:

مرحله ی یک.

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

p {

border:1px solid black;

}

.

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

1px برای تعیین ضخامته!

solid یه خاصیت مربوط شکل کادر شماست! که این به معنای کادر سادست! اگه بنویسید dotted کادرتون نقطه چین می شه! (با تشکر از امیر! :دی)

black هم که مسلما برای رنگ کادره!

مرحله ی دو.

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

p {

border:1px solid black;

padding:10px;

}

مرحله ی سه.

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

p {

border:1px solid black;

padding:10px;

margin:30px;

}

مسخره بود! نه؟!

آسون!

برای یه جلسه کم بود نه؟!

ولی خب همینی که هست! :دی

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

سوالاتونو بپرسین! نپرسین می خورمتون!