مشاهده پست های بی پاسخ | مشاهده موضوعهای فعال تاریخ امروز جمعه 21 سپتامبر, 2018 8:48 pm



پاسخ به موضوع  [ 45 پست ]  برو به صفحه قبلی  1 ... 5, 6, 7, 8, 9
 آموزش HTML به زبان ساده (گام به گام) 
نویسنده پیام
آواتار کاربر

عضو: سه شنبه 09 دسامبر, 2008 7:56 am
پست ها: 32
پست Re: آموزش HTML به زبان ساده (گام به گام)
css مخفف Cascade Style Sheets است و به اين صورت ميتوانيم آن را بوجود بياريم :

دستوراتمان بين دو تگ <style> و </style> قرار بگيرند كه ما اين را فقط براي يك صفحه استفاده مي كنيم.

يك فايل ايجاد كنيم و دستوراتمان را در آن بريزيم و به نام هرچي خواستيم فقط type آن را .css قرار دهيم و به دو صورت ميتوانيم آن را صدا بزنيم :


اين دستور را بدهيم فقط زير تگ <head> كه مخصوص اينترنت اكسپلورر:
كد:
<style type="text/css" media="screen">
@import url( آدرس فايل );
</style>


يا با اين دستور فقط بالاي تگ <head> :
كد:
<link rel="stylesheet" href="آدرس فايل" type="text/css" />

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

viewtopic.php?f=9&t=1098

بيشتر تگ ها دو تا پارامتري تو خودشون دارند به نام style و كلاس كه بايد براي class متغييري تعريف كنيم و براي id هم بايد متغيير تعريف كنيم. بهش نام اون متغيير را بديم و اين شكلي تو فايل css مينويسيم فقط اول هر متغيير با # يا . شروع ميشه و تگ هايي هم كه مال خود زبان اچ تي ام ال هستند براي نوشتن style آن نياز به گذاشتن دو علامت # و . نيست به اين صورت براي تگ <br> :
كد:
<style>br{دستورات}</style>

حالا براي تگ br هرچي تعريف كرده باشيم به اون صورت اجرا ميشه براي اضافه كردن متغيير به اين صورت عميل ميكنيم :
كد:
.name{functions}
يا
كد:
#name{functions}

فقط به جاي name نام متغيير و به جاي functions دستورات را قرار دهيد و پس از پايان هر دستور ; قرار دهيد و مقدار هر چيز را كه خواستيد بدهيد با : بايد برابر كنيد .
فقط براي id # به كار ميبريم و براي class . را به كار ميبريم.
style هم دستور را تو خودش ميديم بدون گذاشتن متغيير اين شكلي :
كد:
style="دستور"


پنجشنبه 12 فوریه, 2009 8:15 pm
مشخصات شخصی
آواتار کاربر

عضو: سه شنبه 09 دسامبر, 2008 7:56 am
پست ها: 32
پست Re: آموزش HTML به زبان ساده (گام به گام)
حالا بريم سراغ آموزش نوشتن دستورات :

خصوصیتهای پس زمینه (Background)
background-color : که میتونید باهاش رنگ پس زمینه رو تعریف کنید که در حالت پیش فرض transparent است

background-image : که میتونید یک تصویر رو به عنوان پس زمینه انتخاب کنید. مثال :(background-image : url(bg.jpg

background-repeat : توسط این خصوصیت نحوه تکرار شدن یک تصویر پس زمینه رو تعیین میکنید که میتونه یکی از حالتهای زیر باشه :
» repeat : که هی تصویر تکرار میشه
» repeat-x : که تصویر رو در راستای افقی تکرار میکنه
» repeat-y : که تصویر رو در راستای عمودی تکرار میکنه
» no-repeat : که تصویر فقط یک بار نمایش داده میشه و تکرار نخواهد شد

background-attachment : این خصوصیت میتونه scroll یا fixed باشه و تعیین میکنه که اگر کاربر اسکرول بار را به بالا یا پایین ببره آیا تصویر پس زمینه هم حرکت کنه یه ثابت باشه, که در حالت fixed ثابت میمونه و در حالت scroll حرکت میکنه. مثال : background-attachment : fixed

background-position : از این خصوصیت میشه برای تنظیم مکان تصویر پس زمینه استفاده کرد که هم میتونید بهش عدد بدید هم از کلماتی مثل top , bottom برای مقدار دهی استفاده کنید. مثال : background-position : ۱۰۰ ۶۰ که ۱۰۰ فاصله از بالا (top) و ۶۰ فاصله از سمت چپ (left) میشه

خصوصیتهای حاشیه (Border)
border-style : این خصوصیت تشکیل شده از ۴ قسمت border-top-style , border-right-style , border-bottom-style , border-left-style که هر قسمت رو میشه توسط یکی از ۹ گزینه none , dotted , dashed , solid , double , groove , ridge , inset , outset مقدار دهی کرد . اگر میخواین کل حاشیه یک شکل باشه نیاز نیست هر ۴ تا قسمت رو بنویسید و میشه به همون border-style یه مقدار داد
» none : بدون حاشیه
» solid : حاشیه با خط ساده
» dashed : حاشیه خط چین
» dotted : حاشیه نقطه چین
» double : حاشیه دو خطه
» groove : که به نظر میرسه حاشیه داخل صفحه حک شده
» ridge : که به نظر میرسه حاشیه بر جسته شده
» inset : حاشیه فرو رفته میشه
» outset : حاشیه بر آمده میشه

border-color : اینم برای رنگ دادن به حاشیه استفاده میشه که هم میتونید به کل حاشیتون یک رنگ بدین هم با استفاده از ۴ قسمت border-top-color , border-left-color , border-right-color , border-bottom-color به هر قسمت رنگ جدا بدین

border-width : این خصوصیت برای تعیین ضخامت حاشیه استفاده میشه که هم میتونید عدد بهش بدین مثل ۵px هم میتونید از کلمات thin (نازک) , medium (متوسط) , thick (کلفت) استفاده کنید.مثل بقیه از border-top-width , border-left-width , border-right-width , border-bottom-width میتونید استفاده کنید.
اگر هر چي كه كلاس براي خودش داره بين دوتا تگ كه كلاس داره باشه براي نوشتن استيلش به صورت زير عمل ميكنيم :


كد:
.FirstClass .secondClass {
Content
}

ّFirstClass مال نام تگ مون است كه اون توش تگ دوممون قرار داره و SecondClass بايد نام تگ دوممون قرار بديم و Content هم به محتويات تغييرش بدهيم.


پنجشنبه 12 فوریه, 2009 8:16 pm
مشخصات شخصی
آواتار کاربر

عضو: سه شنبه 09 دسامبر, 2008 7:56 am
پست ها: 32
پست Re: آموزش HTML به زبان ساده (گام به گام)
حالا بريم سراغ درس جایگذاری عناصر

position : این خصوصیت برای تعیین مرجع یک عنصر به کار میره و در حالت عادی مقدار این گزینه static است.حالا این منبع یعنی چی؟ فرض کنید یک div داریم به اسم k۱ و داخل اون یه div دیگه داریم به اسم k۲. حالا k۱ مرجع k۲ است و موقعیت k۲ نسبت به k۱ محاسبه میشه.مقدار position میتونه static , fixed , relative , absolute باشه.static موقعی استفاده میشه که عنصر ما مرجع نداشته باشه و relative موقعی که مرجع ما static باشه استفاده میشه و absolute در هر دو مورد ولی یه فرقی با هم دارن.اگر عنصر شما absolute باشه و مرجع شما static موقعیت اون نسبت به کل صفحه محاسبه میشه ولی اگر عنصر absolute باشه و مرجع relative موقعیت عنصر نسبت به مرجع محاسبه میشه (منظور از موقعیت همون top و left است)

top , left , bottom , right : این خصوصیات برای تعیین مکان جسم به کار میرن.مثلا اگر top برابر ۱۰۰ باشه جسم ما از نقطه مرجع خودش ۱۰۰ پیکسل پایین میاد و بقیه هم به همین شکل

z-index : z-index برای تعیین اولویت نمایش عنصرهای صفحه استفاده میشه.مثلا شما ۳ absolute div در صفحه دارین که میخواین یکی بر روی دیگری نشون داده بشه.به هر div یک z-index میدیم مثلا : ۱ و ۲ و ۳ .div که دارای z-index ۳ باشه بر روی بقیه div ها نشون داده میشه

padding و margin : اول ببینیم فرق این ۲ تا چیه.padding و margin هر دو برای فاصله گذاری استفاده میشن ولی padding فاصله درونی رو تعیین میکنه و margin فاصله بیرونی رو.مثلا یک div داریم که یک حاشیه داره و داخلش یه سزی متن نوشته شده.برای اینکه بین حاشیه div و متن یه فاصله ایجاد کنیم باید از padding استفاده کنیم(یعنی همون فاصله درونی) و برای اینکه بین حاشیه و اجزای بیرون div یه فاصله ایجاد کنیم از margin استفاده میکنیم که این ۲ تا هم مثل بقیه میتونن همینطوری استفاده بشن هم میشه هر طرف(top , left , right , bottom) رو جدا استفاده کرد
» padding-right , padding-left ,padding-bottom , padding-top
» margin-right , margin-left , margin-botoom , margin-top

خصوصیات متن (text)
font-family : نام فونت رو تعیین میکنه مثلا arial . توجه کنید که فونتی که استفاده میکنید باید حتما تو همه کامپیوتر ها نصب باشه وگر نه امکان دیدن متن با اون فونت وجود نداره.بنابر این سعی کنید از فونتایی استفاده کنید اغلب تو همه کامپیوترها هست

font-size : اندازه متن رو تعیین میکنه که به ۲ روش میتونید مقدار دهی کنید.با استفاده از عدد مثلا ۱۲pt یا با استفاده از مقادیر از پیش تعیین شده که ۷ تا هستن
» xx-small , x-small , small , medium , large , x-large , xx-large

font-style : که در حالت عتدی normal است و یا میتونه italic(کج نویسی) باشه

font-weight : این خصوصیت برای پر رنگ یا کمرنگ کردن یک متن به کار میره که هم میتونید عدد بدید هم کلمات از پیش تعیین شده به کار ببرین
» normal (معمولی) , bold (پر رنگ) , bolder (پر رنگتر) , lighter (کمرنگ)
» (کم رنگ ترین) ۱۰۰ , ۲۰۰ , ۳۰۰ , ۴۰۰ , ۵۰۰ , ۶۰۰ , ۷۰۰ , ۸۰۰ , ۹۰۰ (پر رنگ ترین)

text-align : که میتونه مقادیر left , right , center و justify (متن رو طوری میکشه که تمام عرض خط رو پر کنه) باشه

direction : این هم که میتونه یا rtl (راست به چپ) باشه یا ltr (چپ به راست) که برای فارسی از rtl استفاده میکنیم

text-decoration : که معمولا برای پاک کردن زیرخط لینکها استفاده میشه و میتونه ۴ مقدار زیر باشه
» underline : زیر متن خط میکشه
» overline : بالای متن خط میکشه
» line-through : وسط متن خط میکشه

text-indent : برای فاصله گذاری اول یک متن یا پاراگراف به کار میره.مثلا اگر برابر ۲۰ باشه.خط اول متن شما ۲۰ پیکسل تا حاشیه فاصله میگیره

text-transform : که شاید کمتر دیده باشین چون تو زبان فارسی کاربرد نداره
» lowercase : متن رو با حروف کوچک مینویسه
» uppercase : متن رو با حروف بزرگ مینویسه
» capitalize : حرف اول هر متن رو با حرف بزرگ مینویسه


پنجشنبه 12 فوریه, 2009 8:17 pm
مشخصات شخصی

عضو: جمعه 03 آوریل, 2009 10:49 am
پست ها: 1
پست Re: آموزش HTML به زبان ساده (گام به گام)
تا اونجایی که من میدونم میشه برنامه HTML رو در برنامه یا نرم افزار visual stedio ورژن 2005 یا 2008 اون بنویسیم که کامپایل کردن اون خیلی راحته. ::victory::


چهارشنبه 08 آوریل, 2009 6:47 pm
مشخصات شخصی
آواتار کاربر

عضو: شنبه 24 نوامبر, 2007 1:08 pm
پست ها: 107
پست Re: آموزش HTML به زبان ساده (گام به گام)
سلام

برنامه یا کدهای html نیازی به کامپایل کردن نداره و اصولا این کدها از نوع متن ( text ) هستند.
بله با ویژوال استدیو یا دریم ویوور و فرانت پیج هم میشه و بدون اونها هم میشه. کافیه با ادیتوری مثل Notepad کدها رو نوشته و به صورت html در سیستم خودتون ذخیره کنید و بعد با اینترنت اکسپلورر یا فایرفاکس آن را مشاهده کنید

::rose::

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


شنبه 11 آوریل, 2009 6:36 pm
مشخصات شخصی
مشاهده پست های قبلی:  نمایش بر اساس  
پاسخ به موضوع   [ 45 پست ]  برو به صفحه قبلی  1 ... 5, 6, 7, 8, 9

افراد آنلاین

کاربران حاضر در این تالار: - و 3 مهمان


شما نمی توانید در این تالار موضوع جدید باز کنید
شما نمی توانید در این تالار به موضوع ها پاسخ دهید
شما نمی توانید در این تالار پست های خود را ویرایش کنید
شما نمی توانید در این تالار پست های خود را حذف کنید
شما نمی توانید در این تالار ضمیمه ارسال کنید

جستجو برای:
پرش به:  
cron
استفاده و نقل از مباحث سایت، فقط با ذکر منبع و لینک سایت میکرورایانه مجاز است.
Copyright © 2006 - 2010 MicroRayaneh - Powered by phpBB © phpBB Group
Valid CSS2 Valid XHTML 1.0
طراحی سایت : میکرو رایانه