پرسش و پاسخ آموزش CSS و HTML

Mahdi Askari · 2013 , June 25

در این تاپیک اگه مشکلی از آموزش دارید و یا سوالی دارید مطرح کنید:گل:

سایه · 2013 , June 26

سلام:گل:
آقا مهدی چندتاسوال داشتم:24:

برای بستن تگ کدوم عبارت درسته:

<style/> یا </style>

در این خط از دستور تعداد فاصله ها بین عبارات مهمه!!!باید چندتا باشه؟

موارد استفاده و مکان این علائم = " : ; رو میفرمایید.

HTML:

<body style="font: 12px Tahoma;">

در این نمونه:

HTML:

<head>   
  <link rel="stylesheet" type="text/css" href="clientscript/vbulletin_css/style00110r/popupmenu-ie.css" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> .... 
<head/>   
  <body>
 <div style="position:fixed;left-50:0px;bottom:+10px;z-index:1000"> ...   
  </body>

کلماتی که با رنگ تیره مشخص شدند جزو کلمات ذخیره شده ی زبان html هستن؟

دستورات meta و div چه عملی رو انجام میدن و چه مواقعی به کار میرن؟

آیا دستور meta منحصر به تگ head و div منحصر به تگ body هست؟

Mahdi Askari · 2013 , June 27

سایه گفت:
برای بستن تگ کدوم عبارت درسته:

<style/> یا </style>

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

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

موارد استفاده و مکان این علائم = " : ; رو میفرمایید.

در این مورد که میشه نحوه نوشتن کد های سی اس اس هنوز بحث نکردیم
انشاءالله امروز کامل به این مبحث میپردازیم و مطلب کامل براتون جا میوفته.

سایه گفت:
کلماتی که با رنگ تیره مشخص شدند جزو کلمات ذخیره شده ی زبان html هستن؟

دستورات meta و div چه عملی رو انجام میدن و چه مواقعی به کار میرن؟

آیا دستور meta منحصر به تگ head و div منحصر به تگ body هست؟

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

دستور div مربوط به امروز میشه کامل توضیح میدم و بله در body قرار میگیره
اما متا تگ ها
تگهای META مورد استفاده موتورهای جستجو برای بررسی و شاخص گذاری صفحات قرار می گیرند. اگر صفحه دارای فریم (قاب) باشه، این تگها باید در قسمت HEAD صفحه نوشته بشن.
به طور کلی توصیف محتوای صفحه ، کلمات کلیدی مورد جستجو در موتور ها و همچنین نام نویسنده و نام برنامه مورد استفاده در سایت رو به موتور ها و بازدید کنندگان کدها میشناسونه

به طور کلی داریا چهار متا تگ هست:
1- کلمات کلیدی -- برای شناساندن به موتورها

HTML:

<meta name="keywords"  content="متا تگ, موتور جستجو">

2- توصیف محتویات صفحه -- برای شناساندن به موتور ها

HTML:

<meta name="description"  content="افزودن متا تگ به صفحه">

3- نام نویسنده صفحه -- برای شناساندن نویسنده صفحه به بازدید کنندگان کد ها(در رتبه بندی موتور ها تاثیر ندارد)

HTML:

<meta name="author"  content="نام نویسنده صفحه">

4- نام برنامه مورد استفاده -- برای شناساندن برنامه ای که با اون نوشته شده کد ها(در رتبه بندی موتور ها تاثیر ندارد)

HTML:

<meta name="generator"  content="نام برنامه مورد استفاده شما">

sky boy · 2013 , June 27

توضیحات پلنگ کامل بود ،تشکر:گل:
فقط درباره div چیزایی اضاف میکنم:

حتما کد <table></table> رو در html میدونید چیه! کد div میشه گفت همون table ولی کاربردی تر-استاندارد و توصیه شده تر-تعامل عالی با css و..بیشتر داره
و با تعریف کردن کلاس و آی دی بسیار راحت کار رو پیش میبره.

وقتی از div استفاده میکنید در صورتی که نمیخواید class و id تعریف کنید برای عناصر خاصی نیاز نیست از style استفاده کنید.
به کد پایین دقت کن:

HTML:

<div width="500" height="200" border="0">

</div>

البته در زمان استفاده از div به نحوه تعریف کلاس و آی دی و قرار دادن # و . باید دقت کنید

[MENTION=16002]سایه[/MENTION]

Mahdi Askari · 2013 , June 28

خوبه فقط دو تا شاگرد دارم اونم خودش کلی هست:نیش:
خب شاید فرق بین کلاس معمولی و کلاس لینک رو متوجه نشده باشید
[MENTION=3]Maryam[/MENTION]
[MENTION=16002]سایه[/MENTION]
با مثال و عکس براتون میذارمش

ببینید ما یک کلاس تعریف کردیم با نام پلنگ و ویژگی های زیر:
رنگ بکگراند :زرد
اندازه : 200*200
رنگ فونت :آبی

HTML:

.palang {
background:yellow;
color:blue;
width:200px;
height:200px;
}

خب در این کلاس نوشته شده
ایران انجمن خانواده همه ایرانیان
ولینک ایران انجمن را دادیم
به این صورت نوشته میشه.

خب همانطور که دیدید رنگ ها تغییر کرد
اما بسیار اتفاق میفته که بخوایم لینک هامون از یک ویژگی های دیگه پیروی کنن
برای این کار کلاس لینک رو برای کلاس پلنگ تعریف میکنیم با ویژگی رنگ قرمز:

HTML:

.palang a {
color:red;
}

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

همونطور که میبینید فقط لینک ها رنگشون تغییر کرد
هر لینکی که در کلاس پلنگ شما گذاشته باشید رنگش قرمز میشه

به عبارت کلی:

سایه · 2013 , June 28

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

خب حالا سوالای من:خجالت2:

شماره 1 همون کلاس معمولی هست؟

شماره 2 کلاس لینک هست؟

شماره 3 فراخونی کلاس معمولی palangهست؟ قبل از این خط نیاز نبود تگ bodyنوشته بشه؟

4. این کد برای متن به کار میره فقط؟ باید حتما در انتهای متن نوشته بشه؟ هر چند خطی که بنویسیم یکبار نوشتن این کد کفایت میکنه؟

5. href کلمه ی ذخیره شدست؟ الان که همراه a اومده یعنی به کلاس لینک اشاره داره یا همیشه به شکل a herfمیاد؟

6. در این قسمت کد خط<a href="iranjoman.com"> لینکی هست برای متن <www. iranjoman.com </a؟

نخندینا :خجالت:میخوام مطمئن بشم خب:خجالت2:

توضیخات تاپیک درس یخورده با این مثالا فرق داشتا:تعجب2:

Mahdi Askari · 2013 , June 28

سایه گفت:
واااااااااااااااای :ذوق زده:
خب استاد از اول همینجوری آموزش میدادی:احترام:

خب حالا سوالای من:خجالت2:

شماره 1 همون کلاس معمولی هست؟

شماره 2 کلاس لینک هست؟

شماره 3 فراخونی کلاس معمولی palangهست؟ قبل از این خط نیاز نبود تگ bodyنوشته بشه؟

4. این کد برای متن به کار میره فقط؟ باید حتما در انتهای متن نوشته بشه؟ هر چند خطی که بنویسیم یکبار نوشتن این کد کفایت میکنه؟

5. href کلمه ی ذخیره شدست؟ الان که همراه a اومده یعنی به کلاس لینک اشاره داره یا همیشه به شکل a herfمیاد؟

6. در این قسمت کد خط<a href="iranjoman.com"> لینکی هست برای متن <www. iranjoman.com </a؟

نخندینا :خجالت:میخوام مطمئن بشم خب:خجالت2:

توضیخات تاپیک درس یخورده با این مثالا فرق داشتا:تعجب2:

نه توضیحات اونجا هم شبیه همینجا هست بخونید متوجه میشید
بله 1و 2 درسته

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

شماره 4 خیر
اون یعنی اینتر
چون در زبان اچ تی ام شمار هر چقدر اینتر هم بزنید کد ها رو پشت سر هم نشون میده
اون بی آر یعنی برو بقیشو در خط بعد بنویس
کد های مخصوص اچ تی ام که بهتره یک دور بکنید
من بخوام بگم خیلی طولانی و سنگین میشه

شماره 5
تگ a هم مخصوص اچ تی ام هست

چون مبحثش طولانی میشه
امروز این تگ ها رو بحث میکنیم تا بهتر یاد بگیرید:گل:

سایه · 2013 , June 28

استاد ی راهنمایی کنید چطور فونت و سایز رو تغییر بدم و یا به جلو حرکتش بدم مثل کاری که کلیدspace انجام میده

HTML:

<html>
<head>
<style>
.palang {
background:url("http://www.up.iranjoman.com/images/36xgx542dpydl2oobu8d.gif") repeat-y scroll 0% 0% transparent;
color:blue;
width:450px;
height:400px;

 border-radius: 20px 20px 20px 20px;
    padding: 5px;
    border: 10px solid rgb(300,100, 100);
    font:"bold 30px Tahoma"; 
}
.palang a{
color:green;
}
</style>
</head>
<body>
<div class="palang">
<br>
<p> man iranjoman ra doost daram </p>
<br>
<a href=:iranjoman.com"> www.iranjoman.com</a>
</div>
</body>

Mahdi Askari · 2013 , June 28

سایه گفت:
استاد ی راهنمایی کنید چطور فونت و سایز رو تغییر بدم و یا به جلو حرکتش بدم مثل کاری که کلیدspace انجام میده

HTML:

<html> <head> <style> .palang { background:url("http://www.up.iranjoman.com/images/36xgx542dpydl2oobu8d.gif") repeat-y scroll 0% 0% transparent; color:blue; width:450px; height:400px; border-radius: 20px 20px 20px 20px; padding: 5px; border: 10px solid rgb(300,100, 100); font:"bold 30px Tahoma"; } .palang a{ color:green; } </style> </head> <body> <div class="palang"> <br> <p> man iranjoman ra doost daram </p> <br> <a href=:iranjoman.com"> www.iranjoman.com</a> </div> </body>

font:"bold 30px Tahoma";
در این کد ها " را بردارید بزرگ میشه

HTML:

<p style="margin-left:50px;"> man iranjoman ra doost daram </p>


<a href="iranjoman.com" style="margin-left:90px;"> www.iranjoman.com</a>

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

سایه · 2013 , June 28

از رو کدهای آموزش کمی نوشتم خب:نیش: بعد تغییرشون دادم
الان با دستور<br> متن رو به پایین صفحه بردم دستور مستقیمتری برای این کار هست؟

HTML:

<html>
<head>
<style>
.palang {
background:url("http://www.up.iranjoman.com/images/36xgx542dpydl2oobu8d.gif") repeat-y scroll 0% 0% transparent;
color:blue;
width:450px;
height:400px;

 border-radius: 20px 20px 20px 20px;
    padding: 5px;
    border: 10px solid rgb(300,100, 100);
    font:bold 20px Tahoma; 
}
.palang a{
color:green;
}
</style>
</head>
<body>
<div class="palang">
<br>
<p style="margin-left:50px;"> man iranjoman ra doost daram </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a href="iranjoman.com" style="margin-left:220px;"> www.iranjoman.com</a>
</div>
</body>

2 تا نکته:
background:url("http://www.up.iranjoman.com/images/36xgx542dpydl2oobu8d.gif") repeat-y scroll 0% 0% transparent; توضیحاتی که مشخص کردم نوشتنشون لازمه؟
border: 20px solid rgb(300,100, 100; سه عددی که مشخص کردم همون مقدار سه رنگ اصلی هستن که با تغییرشون رنگ دلخواه ایجاد میشه؟:فکر: میشه بجاشون کد رنگ دلخواه رو مثلا از فتوشاپ بدست اورد و اینجا نوشت؟

Mahdi Askari · 2013 , June 28

سایه گفت:
از رو کدهای آموزش کمی نوشتم خب:نیش: بعد تغییرشون دادم
الان با دستور<br> متن رو به پایین صفحه بردم دستور مستقیمتری برای این کار هست؟

HTML:

<html> <head> <style> .palang { background:url("http://www.up.iranjoman.com/images/36xgx542dpydl2oobu8d.gif") repeat-y scroll 0% 0% transparent; color:blue; width:450px; height:400px; border-radius: 20px 20px 20px 20px; padding: 5px; border: 10px solid rgb(300,100, 100); font:bold 20px Tahoma; } .palang a{ color:green; } </style> </head> <body> <div class="palang"> <br> <p style="margin-left:50px;"> man iranjoman ra doost daram </p> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <a href="iranjoman.com" style="margin-left:220px;"> www.iranjoman.com</a> </div> </body>

2 تا نکته:
background:url("http://www.up.iranjoman.com/images/36xgx542dpydl2oobu8d.gif") repeat-y scroll 0% 0% transparent; توضیحاتی که مشخص کردم نوشتنشون لازمه؟
border: 20px solid rgb(300,100, 100; سه عددی که مشخص کردم همون مقدار سه رنگ اصلی هستن که با تغییرشون رنگ دلخواه ایجاد میشه؟:فکر: میشه بجاشون کد رنگ دلخواه رو مثلا از فتوشاپ بدست اورد و اینجا نوشت؟

زدین تو همون اصل کاری هاش ها:خنده1:
دو مورد آخر اگه امروز رسیدم در موردش باید بحث بشه
اگه نرسیدم فردا میذارم آموزششونو و مقداری که متغییر هاشون میگیرن

اما مورد اول
به طور معمول دستورات اچ تی ام ال پشت سر هم نوشته میشن
یعنی اگه 3 تا کلاس با عرض 100 پیکسل رو شما در اچ تی ام پشت سر هم فراخوانی کنید
کلاس چهارم رو که بذارید میره 30 پیکسل از بالا فاصله داره
اما بعضی اوقات آدم مجبور میشه با margin و padding و همون br کار کنه
اینا هر کدومشون باید بحث بشن:18:

سایه · 2013 , June 30

:11:
خب ی تمرین انجام دادم اما زیاد مرتبط با سوال آموزش نیست:نیش:
لطفا در این مورد راهنماییم کنید و اشکالاتش رو بگیرید:احترام:

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

خب حالا اشکالات اینو بفرمایید ببینم من چه کردم:نیش:

HTML:

<html>
<head>
<style>
.sayeh {
background:url("http://www.up.iranjoman.com/images/mkoqf8or60m83406lv1v.gif") repeat-y scroll 0% 0% transparent;
color:green;
width:519px;
height:475px;

 border-radius: 20px 20px 20px 20px;
    padding: 1px;
    border: 10px solid rgb(300,50, 100);
    font: 20px  tahoma; 
   }

.sayeh1 {
position:absolute;
top:380px;
 right:620px; 
border:1px solid red; 
width:160px; 
background-color:pink;
height: 110px;
font: 12px  tahoma;
}

</style>

</head>

<body>

<div class="sayeh">

<p  style="margin-top:320px;" align="center" ; title="sayeh" ;  > 
<i><u><b>IRANJOMAN 
</p>
 

<div class="sayeh1" >

<p   title="در بين تمامي مردم تنها عقل است 

که به عدالت تقسيم شده

 زيرا همه فکر مي‌کنند 

به اندازه کافي عاقلند"  ;  > 

  It is only intelligence that is divided equally between people
 because everybody thinks he/she is enough wise
 <hr> René Descartes 
 </p>

 </div>


</body>

</html>

Mahdi Askari · 2013 , June 30

متا تگ فارسی رو نذاشتید:15:
این باید برای قالب های متن فارسی همیشه در هدر قرار بگیره

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

با این کدUTF-8 درست کار میکنه و فارسی ها رو فارسی نشون میده

سایه · 2013 , June 30

palang گفت:
متا تگ فارسی رو نذاشتید:15:
این باید برای قالب های متن فارسی همیشه در هدر قرار بگیره

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

با این کدUTF-8 درست کار میکنه و فارسی ها رو فارسی نشون میده

اینو که تو درس نگفته بودید:تعجب2:
خب بقیه اشکالاتش چیه؟:خجالت2:

Mahdi Askari · 2013 , June 30

سایه گفت:
اینو که تو درس نگفته بودید:تعجب2:
خب بقیه اشکالاتش چیه؟:خجالت2:

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

سایه · 2013 , June 30

palang گفت:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

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

Mahdi Askari · 2013 , June 30

توی سیستم من درست نشون میده

سایه · 2013 , June 30

palang گفت:
توی سیستم من درست نشون میده

استاد درستش کردم:نیش:
اول
کدی که شما دادید نوشتم تو برنامه
بعد از طریق save as یکبار Encoding رو UTF8 انتخاب کردم
و بعدش دوباره همون رو با فرمت htmذخیره کردم درست شد:8:

سایه · 2013 , June 30

خب با اجازتون چندتا سوال دارم:خجالت2:

1.میشه برای متن بخش title خصوصیاتی متفاوت و مجزا با متن آشکار مرتبط تعیین کرد مثل رنگ و سایز و پس زمینه....؟

2.خاصیت justify رو چطور باید برای متن اعمال کرد؟

3. معمولا استفاده از تگ p بهتره یا تگ hn؟ظاهرا که میشه خصوصیات مورد نیاز یک متن رو برای هر دو تعریف کرد؟

Mahdi Askari · 2013 , July 1

سوال 1 خیر نمیشه
تولتیپ ها کاری مشابه به اون انجام میدن که از مبحث ما خارج هست و خیلی سنگین میشه

سوال 2
این خاصیت متن رو تراز میکنه
در ورد حتما پیش آمده این خاصیت رو تنظیم کردید که وقتی متن به آخر میرسه جلو و عقب تر از خط ها بالایی نباشه و همه به یک جا ختم بشن

سوال 3
تگ پی یک پارا گراف ایجاد میکنه برای متن
اما تگ h برای معمولا یک خط استفاده میشه
فرض کنید برای مثلا سر تیر موضوضوع اچ استفاده بشه و برای متنش از پی

پرسش و پاسخ آموزش CSS و HTML

مدير فنی

کاربر ويژه

مدير فنی

متخصص بخش برنامه نویسی

مدير فنی

کاربر ويژه

مدير فنی

کاربر ويژه

مدير فنی

کاربر ويژه

مدير فنی

کاربر ويژه

مدير فنی

کاربر ويژه

مدير فنی

کاربر ويژه

مدير فنی

کاربر ويژه

کاربر ويژه

مدير فنی