تنظیم حاشیه و فاصله از لبه در عناصر صفحه

حاشیه ها

margin-left

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

این DIV دویست پیکسل از سمت چپ صفحه فاصله دارد.

همانطور که می بینید کد بالا یک DIV را با کادر مضاعف و 200 پیکسل حاشیه از چپ نشان می دهد:

این DIV دویست پیکسل از سمت چپ صفحه فاصله دارد.

margin-right

ادامه نوشته

نحوه ایجاد کادر برای عناصر صفحه با استفاده از استایل

کادر (Boder)

border-style

با استفاده از استایل ما می توانیم برای اجزای یک صفحه کادر ایجاد کنیم. با استفاده از پارامتر border-style می توانیم مشخص کنیم که آیا می خواهیم کادر داشته باشیم یا نه، و اگر می خواهیم نوع کادری را که می خواهیم ایجاد کنیم مشخص کنیم. در اینجا می توانید برخی از مقادیری را که می توانیم برای border-style استفاده کنیم را ببینید:

  1. none
    با استفاده از این مقدار تعیین می کنیم که نمی خواهیم کادر داشته باشیم. در صورتی که مقداری غیر از none تعیین شود کادر خواهیم داشت.
     
  2. solid
ادامه نوشته

تنظیم عرض، ارتفاع، و overflow با CSS

عرض و ارتفاع

width

این مشخصه به ما امکان می دهد تا عرض یک بخش از صفحه را تعیین کنیم. برای مثال می توانیم با آن عرض یک DIV را تعیین کنیم. در مثال زیر برای DIV عرضی معادل 200 پیکسل تعیین می کنیم:

این جمله پس از اینکه عرض آن از 200 پیکسل بیشتر شد در سطرهای بعدی ادامه پیدا می کند.

نتیجه به صورت زیر خواهد بود:

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

استفاده از استایل خارجی برای طراحی صفحات HTML

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

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

div { font-family:Arial }
.redtext { color:red }

حالا این متن را با نام example.css ذخیره کنید ( شما می توانید از هر نامی که می خواهید برای ذخیره کردن فایل استفاده کنید، فقط به خاطر داشته باشید که پسوند فایل باید css. باشد. ).

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

ادامه نوشته

تعریف کردن استایل در بخش head صفحه HTML

استفاده از استایلها می تواند به ما کمک کند تا از دوباره نویسی فرمانها جلوگیری کنیم. برای انجام این کار ما می توانیم یک Style را در بخش HEAD در متن HTML خود تعریف کنیم. یک استایل در HEAD با تگ
ادامه نوشته

آموزش HTML - به رديف در آوردن متن (درس هشتم 6)

درس 8 -6 به رديف در آوردن متن

اهداف این درس

- به ردیف در آوردن متن
- کنترل بر جاهای دقیق متن و کاراکترها

ادامه نوشته

آموزش HTML - اتصالات ابر متن و تصویرهای لینک شده (درس هشتم 5)

٨-ه - اتصالات ابر متن و تصویرهای لینک شده

اهداف این درس

1- وارد کردن یک دگمه گرافیکی در صفحه وب برای اتصال به سند دیگر HTML
2- وارد کردن یک تصویر کوچک که مانند یک تمبر پستی برای نمایش یک Copy از عکس بزرگتر عمل می کند.

ادامه نوشته

آموزش HTML - اتصال به قسمتی از همان صفحه (درس هشتم 4)

٨-۴ - اتصال به قسمتی از همان صفحه

تگ < name >


اهداف این درس


1 - ایجاد یک شاخه مخفی برای اشاره به یک قسمت خاص از یک سند HTML
2- ساخت و ایجاد یک اتصال ابرمتن که به بخش خاصی از یک سند متصل شوید .
3- ساخت یک ابرمتن برای اتصال به قسمتی از یک صفحه در یک سند HTML دیگر
4- ایجاد انواعی از ابر متنها برای صفحه وب

ادامه نوشته

آموزش HTML - اتصال به یک سایت دیگر از اینترنت (درس هشتم 3)

٨-3- اتصال به یک سایت دیگر از اینترنت

اهداف این درس

1- ایجاد یک اتصال به یک سایت دیگر اینترنت
2- ایجاد یک URL در سند HTML برای استفاده و اتصال از طریق سایت شما

ادامه نوشته

آموزش HTML - لينك به سايت ديگر (درس هشتم 2)

٨-2 - لينك به سايت ديگر
اهداف این درس

1- شناسایی وظیفه یک URL
2- تشخیص ساختار یک URL
3- امتحان یک اتصال به یک URL
ادامه نوشته

آموزش HTML - لينك (درس هشتم 1)

درس 8 -۱ LINK ( اتصال )
URL- چیست ؟

قدرت واقعی وب در توانایی آن در ایجاد ابر متن هایی است که وابسته به اطلاعات است که آن اطلاعات بصورتهای صوت و عکس و ... انیمیشن در یک کامپیوتر راه دور قرار داده شده است www پهناور از یک آدرس شناخته شده بنام URL که مخفف Uniform Resource Location است برای مشخص کردن موقعیت مکان خود استفاده می کند.
این اتصالات ابرمتن معمولا با خطی در زیر آن مشخص شده اند.
a ) اتصال به یک فایل محلی

اهداف این درس

1- ایجاد یک اتصال در یک سند HTML در همان شاخه ای که سند شما قرار دارد.
2- ایجاد یک اتصال برای نمایش یک فایل گرافیکی
3- ایجاد یک اتصال در شاخه ای به جز شاخه ای که سند در آن قرار دارد.
4- سازماندهی مجدد ساختار وب شما

ادامه نوشته

آموزش HTML - قرار دادن تصاوير در اسناد (درس هفتم 2)

درس -٧-۲ - قرار دادن تصاوير در اسناد

اهداف این درس

1- قرار دادن تصاویر در اسناد html
2-چگونه می توان دور تا دور تصاویر متن قرار داد
3- مشخص کردن ابعاد تصاویر
4- ویرایش عکس و اضافه کردن خصلتی در آن بطوریکه بتواند در مرورگرهایی که از عکس پشتیبانی نمی کنند کارآیی داشته باشند .

ادامه نوشته

آموزش HTML - قالب بندی فایلهای گرافیکی و استاندارد های مورد استفاده در صفحات وب (درس هفتم 1)

درس 7 - ۱- قالب بندی فایلهای گرافیکی و استاندارد های مورد استفاده در صفحات وب

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

اهداف این درس

1- شناسایی فایلهای گرافیکی شبکه www
2- بحث کلیدی در مورد استفاده از گرافیک در سندهای وب
3- انتقال فایل گرافیکی از وب به کامپیوتر شخصی خود
4- استفاده از قالب صحیح برای تصاویر در صفحات وب

ادامه نوشته

آموزش HTML  - ا < ul >, < ol > لیستها (درس ششم)

درس 6 - < ul >, < ol > لیستها


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

اهداف این درس

1- شناسایی کدهایی برای ایجاد لیستها
2- ایجاد لیست در سند و مشاهده آن

 

ادامه نوشته

آموزش HTML - سبکهای مختلف نوشتاری (درس پنجم)

درس 5 - سبکهای مختلف نوشتاری

اهداف این درس

بعد از آموزش این درس
1- تگهای ضخیم و یا ایتالیک و .... به شما شناسانده خواهد شد
2- متون خود را در سند HTML به سبک های مختلف وارد کنید و سپس آن را در مرورگر مشاهده کنید .

ادامه نوشته

آموزش HTML - شکستن پاراگراف (درس چهارم)

درس 4 - شکستن پاراگراف

اهداف این درس

1- شناختن تگهایی که ایجاد پاراگراف می کند .
2- کپی کردن متن از یک صفحه وب و انتقال آن به سند دیگر
3- شکستن پاراگرافها در سند HTML خود و مشاهده تغییرات

ادامه نوشته

آموزش HTML - نشانه گذاری 6 درجه (درس سوم)

درس 3 - نشانه گذاری 6 درجه

اهداف این درس :

1- شناسایی درجات مختلفی از نشانه گذاری در HTML و تگهای مربوط به آن
2- گذاشتن درجات مختلف نشانه گذاری در سند و مشاهده تغییرات در مرورگر

ادامه نوشته

آموزش HTML - ویرایش یک سند HTML (درس دوم)

درس 2 - ویرایش یک سند HTML


شما اولین سند HTML خود را ایجاد کردید . در این درس خواهید آموخت که چگونه با سرعت ، تغییراتی در سند خود ایجاد کنید و تغییرات را در مرورگر خود ببینید. بعد از آموزش این درس توانائیهای زیر را خواهید داشت :
1- ایجاد یک محیط کاری
2- تغییرات در سند HTML
3- اجرای سند مرورگر برای دیدن تغییرات

ادامه نوشته

استفاده از کلاس و id در طراحی صفحات با CSS

  • سلکتور کلاس

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

p.black {color: black}
p.red {color:red}

در مرحله بعد باید برای هر پاراگرافی که می خواهیم به رنگ مشکی باشد از شناسه "class="black در تگ

استفاده کنیم و برای پاراگراف قرمز از شناسه "class="red. البته نام کلاسها اختیاری است ولی بهتر است آنها را طوری انتخاب کنید که مفهوم داشته باشند تا وقتی که حجم استایل شما بیشتر شد به گنگ نباشد. در مثال زیر می توانید کد مربوط به نوشتن دو پاراگراف بالا را در متن HTML ملاحظه کنید:

ادامه نوشته

آموزش کار با استایل (CSS)

CSS یا همان Cascading Style Sheet روشی است برای قالب بندی و طراحی اجزای صفحه از قبیل متن، تصویر، زمینه صفحه، کادرها و تقریباً هر چیزی که در طراحی صفحه استفاده می شود بدون استفاده از کدهای HTML. از طریق این استایل شیتها می توانیم از دوباره نویسی کدهای HTML که باعث مشکل شدن کد نویسی و همچنین کند شدن سرعت بارگذاری صفحه در اینترنت می شود جلوگیری کنیم. برای مثال می توانیم یک بار نوع فونت مورد استفاده در یک صفحه را تعیین کنیم و دیگر مجبور نباشیم کد مربوط به فونت را در صفحه به کار ببریم. همچنین می توانیم از این ابزار قدرتمند در مواردی به جای جاوا اسکرپت نیز استفاده کنیم و چون مشکلات جاوا اسکرپت مثلاً غیر فعال بودن جاوا اسکرپت در مرورگر را ندارد با خیالی آسوده تر می توانیم از آن استفاده کنیم.

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

در این قسمت به معرفی قابلیتهای مختلف CSS خواهیم پرداخت . چون این قسمت در سایت ما به تازگی راه اندازی شده است هنوز کامل نشده و به مرور زمان سعی می کنیم آنرا کاملتر کنیم.