مترجم قالب های بلاگفا، میهن بلاگ، پرشین بلاگ، آفتاب لاگ،
پارسی بلاگ و ایران بلاگ
به
بلاگ اسکای
دانلود در ادامه مطلب ...
این اولین قالب طراحی شده توسط گروه AntiComبرای همه میهن بلاگی ها برای مشاهده قالب کلیک کنید :
برای دریافت کد قالب بر روی تصویر کلیک راست کرده و گزینه save target as را انتخاب کنید .
CSS How To ….
How to Insert Style Sheets
کار Style Sheet ها ؟
زمانی که مرورگر به Style Sheet ها می رسد ، آن ها را می خواند و تمام صفحه وب شما را مطابق آن تنظیم می کند. برای بار سوم ، مجددا انواع Style Sheet ها را معرفی می کنیم.
External Style Sheet
این روش زمانی کاربرد دارد که ما چندین صفحه وب داریم و می خواهیم برای هم یک نوع Style Sheet داشته باشیم . خوبی این روش این است که اگر زمانی شما خواستید چهره سایت خودتون را عوض کنید ، فقط کافی است یک فایل را تغییر دهید. در این روش کل کدهای CSS که طراحی صفحات شما در آن قرار می گیرد و شامل همان کلاس هایی است که قبلا توضیح داده بودیم ، در فایلی جدا با پسوند .css ذخیره می شود و به کد صفحه اصلی شما با یک لینک پیوند می شود. برای نوشتن یک External Style Sheet به نکات زیر دقت کنید:
ادامه مطلب ...
در جلسه قبل با کلیت CSS آشنا شدیم ، در این قسمت به چگونگی نوشتن کدهای CSS می پردازیم و ساختار کدهای CSS را مورد بررسی قرار می دهیم. در ساختار همه کدهای CSS ، سه قسمت وجود دارد که عبارتند از : a selector, a property and a value
که به این شکل نوشته می شود :
selector {property:value}
در قسمت selector عناصر یا همان Element های HTML قرار می گیرد ، یادتونه که همه Element های HTML با تگ شروع می شدند. در قسمت property ، آن مشخصه ای قرار می گیرد که شما می خواهید آن را تغییر دهید ، شاید بپرسید خوب چه صفاتی را می شود تغییر داد ؟
کلا هر مشخصه (Attribute) که بتواند مقدار بگیرد ، قابل تغییر است . برای بهتر متوجه شدن به مثال های زیر توجه کنید : p
{
text-align:center;
color:black;
font-family:arial
}
ادامه مطلب ...
بعد از HTML وارد قسمت هیجانی و بسیار کاربردی تر دنیای وب می شیم ، یعنی آموزش CSS ، پس با ما باشید. با CSS شما می تونید بسیاری از کارهاتون را ذخیره کنید و خیلی اصولی تر صفحات وبتون را طراحی کنید. در این آموزش تو یاد می گیری که چگونه با CSS میتونی style ها و لایه های مختلف یک صفحه وب چند گانه را همگی با هم تحت کنترل خود قرار دهی.
برای شروع چه چیزهایی را باید بدونم ؟
لازمه قبل از شروع CSS ، آموزش HTML را که قبلا در سایت ارائه داده بودیم را مطالعه کنید. اگر می خواهی به آموزش HTML بری ، کلیک کن .
CSS چیست ؟
ساختار یک برنامه ++C
به نام خدا
مقدمه
این آموزش برای کسانیه که می خوان برنامه نویسی با ++C رو یاد بگیرند و لازم نیست پیش زمینه ی خاصی در مورد برنامه نویسی با سایر زبان های برنامه نویسی داشته باشید.
البته اگر قبلا با زبان های دیگه کار کرده باشید اطلاعات قبلیتون میتونه تو یادگیری مطالب بهتون کمک کنه.
با
این وجود، ما آموزش رو از صفر و از پایه شروع می کنیم و سعی می کنیم خیلی
اصولی و جذاب، قدم به قدم با هم پیش بریم و با هم یادبگیریم.
منبع اصلی ما سایت cplusplus.com هستش که تقریبا میشه گفت کامل ترین سایت آموزش ++C انگلیسی
هست. از هیچ مطلبی نمی گذریم و سعی ما براین است که مطالب را نه به شیوه ی
سخت و سنگین بلکه با شیوه ای روان و قابل فهم ارائه کنیم. مهمترین هدف ما
هم همین است.
در قسمت های مختلف آموزش مثال هایی گذاشتیم که کاربرد مطلب رو مشخص میکنند.
پیشنهاد میکنم این مثال ها رو بخونید و خودتون توی کامپایلر بنویسید و اجرا کنید، این جوری مطلب رو بهتر می فهمید!
بهترین
راه کسب تجربه اینه که در ساختار مثال ها تغییرات کوچک ایجاد کنید و
ببینید چه تغییری در نتیجه ایجاد شد، پس شجاع باشید و از تغییر دادن کدها
نترسید!
هر سوالی که واستون پیش اومد و نتونستین جوابشو پیدا کنین،
میتونین در قسمت نظرات مطرح کنین، ما هم سعی می کنیم به بهترین نحو بهتون
جواب بدیم...
کدام نرم افزار؟
فرق HTML 3.2 , HTML 4 , XHTML در HTML 3.2 شما توانایی این را ندارید که که قالب بندی صفحه خودتان را به طور کامل از کدهای HTML جدا کنید و مجبورید برای هر قسمت تمام خصوصیات را برای اجرا یادداشت کنید که این کار برای یک وبمستر یک کاووس است . ولی در HTML4 توانایی این را دارید که قالن بندی خودتان را در قسمتی جدا از کدها تعریف کنید. In HTML 4.0 all formatting can be removed from the HTML document and stored in a separate style sheet و به همین دلیل شما به راحتی می توانید تمامی لایه ها را تحت کنترل خود قرار دهید بدون این که به محتوای صفحه شما کوچکترین آسیبی برسد. XHTML تفاوت خاصی با HTML 4 ندارد و در کل یک سری ایرادها و نقص هایی که در HTML 3.2 وجود داشت در آن برطرف شده است. HTML , CSS
Color values
برای تعریف رنگ ها در HTML از نشانه گذاری hexadecimal برای ترکیب های مختلف 3 رنگ قرمز و سبز و آبی استفاده می کنیم.
زیاد لازم نیست شما درگیر کدهای hex شوید ، برای پیدا کردن کد رنگ های مورد نظرتون می توانید از برنامه های کمکی مثل HTML Pad یا برنامه های گرافیکی مثل فتوشاپ استفاده کنید و به راحتی کد رنگ مورد نظرتون را پیدا کنید.
HTML Font
HTML Forms and Input
فرم چیست ؟
فرم ناحیه ای است که به کاربر اجازه می دهد که اطلاعات خود را وارد کند.
برای تعریف فرم از تگ <form> استفاده می کنیم.
A form is defined with the <form> tag.
>
.input elements
.
form>
کاربردی ترین تگ ، در فرم تگ <input> است.
HTML List HTML لیست های ترتیبی ، لیست های نامرتب و لیست های تعریفی را پشتیبانی می کند. Unordered List برای تعریف یک لیست غیر ترتیبی در HTML از تگ <ul> استفاده می کنیم و برای تعریف کردن هر کدام از مشتقات این لیست تگ <li> را مورد استفاده قرار می دهیم. به این ترتیب :
. Coffee
. Milk
Table
برای کشیدن جدول در HTML باید از تگ <table> استفاده کنیم.
برای تقسیم کردن یک جدول در ردیف های مختلف ما باید از تگ <tr> استفاده کنیم.
و برای تقسیم کردن هر ردیف به خونه های مختلف از تگ <td> که مخفف table data است استفاده می کنیم.
خونه های جدول در HTML می توانند هر محتوایی داشته باشد ، تصویر ، متن ، فرم و ...
نمونه ای از کد یک جدول :
HTML Image در HTML ، برای تعریف کردن یک تصویر باید از تگ <img> استفاده کنیم. این تگ از جمله تگ های خالی است ، یادتونه تگ های خالی چه تگ هایی بودند ؟ تگ های خالی ، تگ هایی بودند که نیاز به بستن </> نداشتند. برای نمایش تصویر در صفحه تگ <img> کافی نیست و شما نیاز به یک مشخصه دارید. شما باید از مشخصه src استفاده کنید ، این مشخصه برای source قرار گرفته ، بعنی مقداری کخ در این مشخصه قرار می گیرد ، لینک تصویری است که شما می خواهید آن را در صفحه مورد نظرتون قرار دهید. <img src="ur"/"> حتما تا حالا به این مورد برخوردید که تصویری در اینترنت به نمایش در نمی آید ، یعنی مرورگر به هر دلیلی قادر به Load آن نیست ، و شما به جای عکس یک متن مشاهدا می کنید . شما می توانید با مشخصه Alt مشخص کنید ، اگر تصویرتان به نمایش درنیامد به جای آن چه متنی نمایش داده شود. <img src="prijecone.persiangig.com/12.jpg" alt="AntiCom" /> اگر تصویر بالا به نمایش درنیاید ، به جای آن کلمه AntiCom ظاهر می شود. چند مثال برای تمرین بیشتر :
از style ها هم مختصری فهمیدیم ، در جلوتر مثال های بیشتری از این قسمت حل می کنیم .
HTML Link
لینک ها آدرس هایی هستند که به مکانی در وب اشاره می کنند.
یک لینک می تواند به هر منبعی در وب اختصاص داده شود ، یک صفحه HTML یا یک عکس یا یک فایل صوتی و ...
با این اصطلاح هم آشنا بشید : anchor
تا حالا براتون پیش اومده که بخواهید در داخل یک متن به قسمت خاصی از آن برید ؟!!
با anchor شما می توانید لینکی در داخل متن به قسمت خاصی از متن ایجاد کنید ، یعنی با کلیک بر روی این لینک صفحه شما به آن قسمت خاص می رود .
پس anchor یک اصطلاح است برای تعریف کردن یک لینک از یک متن به درون خود آن متن
تگ <a> هم برای Hyperlink و هم برای anchor مورد استفاده قرار می گیرد .
نترسید با انجام مثال ها همه چیز برای شما روشن می شود.
یادتونه چند جلسه قبل درباره attribute با هم صحبت کردیم و چندتا از اونا رو معرفی کردیم که مهم ترینشون و کاربردی ترینشون style است .
اینم بدونی بد نیست که ربط CSS با HTML از Style شروع میشه .
HTML Styles
هدف از این مشخصه :
To provide a common way to style all HTML elements.
چند مثال برای تمرین بیشتر مطالب جلسه قبل
1- HTML Line Break
2- HTML Paragraph
Text Formating
همان طور که شما هنگام تایپ کردن می توانید بعدی از کلمات را bold و یا italic کنید ، در HTML هم می توانید این کار را انجام دهید .
حتما تا الان فهمیدید که HTML متن شما را همان گونه که می نویسید نمایش نمی دهد مثلا اگر در یک تگ پاراگراف چند خط جدا از هم بنویسید و از تگ </br> در بین آن ها استفاده نکنید ، HTML همه آن ها پشت سر هم نمایش می دهد .
برای این که نوشته خود را به همان صورت که تایپ کردید مشاهده کنید باید از تگ <pre> استفاده کنید .
در قسمت بعدی وارد Style ها می شویم