آموزش HTML – قسمت هفتم

پنج شنبه, ۵ام شهریور , ۱۳۸۸ | ۲۳ دیدگاه

با سلام دوباره. از ناخیر به وجود آمده عذرخواهی میکنم.تا کنون ۶ قسمت از آموزش HTML مقدماتی را برای شما دوستان عزیز آماده کردم. با نگاهی به این خودآموزها متوجه خواهید شد که سعی کردم مطالب رو با زبان ساده   توضیح بدم و مطالب غیر ضروری  را بیان نکنم.در قسمتهای بعدی این خودآموزها سعی خواهم کرد با مطالب پیشرفته تر از HTML  و همچنین مطالبی درباره CSS  در خدمت شما دوستان باشم.با توجه به این که این خوداموز برای شما دوستان نوشته شده نظرات شما می تونه برای من و تیم ITT   بسیار مفید و دلگرم کننده باشه. با تشکر.

در این قسمت در مورد رنگها و همچنین لیستها صحبت میکنیم.

رنگها

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

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

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

با توجه به گستردگی دنیای وب در سراسر جهان رعایت استانداردهای طراحی وب امری لازم و ضروریست و عدم رعایت آن می تواند باعث عدم بازخورد وب سایت شما باشد.

این مسئله بسیار مهم است که صفحه وب شما در تمامی مانیتورها و browser  ها به صورت دلخواه شما و با یک شکل  واحد نمایش داده شود و این موضوع زمانی اتفاق می افتد که شما استانداردها را در وب سایت خود رعایت کرده باشید.

حال به رنگها می پردازیم.

تقسیم بندی رنگها به چندین روش ( با توجه به کاربرد ) انجام میگیرد که دو نوع آشنای آن تقسیم بندی های CMYK  و RGB  هستند.

از تقسیم بندی CMYK  که مخفف رنگهای(  ( cyan, magenta, yellow, and key (black )  هستند در طراحی هایی که برای چاپ اماده می شوند استفاده می شود.

و از تقسیم بندی RGB   که مخفف رنگهای( red,green,blue ) هستند برای طرحهایی استفاده میشود که در صفحات نمایش استفاده میشوند.(مانند تلویزیون و مانیتور)

با توجه به توضیحات بالا در دنیای وب از تقسیم بندی RGB استفاده میشود.

رنگها در این سیستم دارای کدهای منحصر به فردی هستند که استفاده از رنگها را در طراحی صفحات وب بسیار هدفمند تر و دقیقتر می کند.نحوه کدگذاری این رنگها بر پایه هگزادسیمال است (HEX) .در این تقسیم بندی هر رنگ با یک کد ۶ رقمی که در ابتدای آن # وجود دارد مشخص می شود. به طور مثال رنگ مشکی با کد #۰۰۰۰۰۰ و رنگ سفید با کد #FFFFFF مشخص میشوند.بر پایه این تقسیم بندی ۱۶ میلیون رنگ مختلف وجود دارد!

تعدادی از این رنگها را میتوانید اینجا ببینید

آیا میتوان از این تعداد رنگ در طراحی وب استفاده کرد؟

پاسخ به این سوال مشکل است.در این تقسیم زیر شاخه ای نیز وجود دارد به نام رنگهای  (Web Safe Color) که متشکل از تعداد معدودی رنگ است.این رنگها بر طبق استانداردهای W3C  در سالها پیش  مشخص شده اند و طراحان وب بر طبق این استاندارد تنها اجازه استفاده از این رنگها را در طراحی صفحات وب خود داشتند.هر چند که این زیر شاخه در حال حاضر نیز در بسیاری از نرم افزارهای طراحی وب و گرافیک موجود هستند ولی این زیر شاخه در زمانی به وجود آمده بود که مانیتورها تنها از ۲۵۶ رنگ برای نمایش تصاویر استفاده می کردند ، حال با توجه به پیشرفت فوق العاده دنیای کامپیوتر مانیتورها از چندین میلیون رنگ برای نمایش تصاویر خو استفاده میکنند ف بنابراین دست طراحان در استفاده از تمامی ۱۶ میلیون رنگ باز است.

با این توضیحات ذکر این نکته بسیار ضروریست که استفاده از این کدها برای همسان سازی تصاویر با کدهای HTML  و صفحات وب و همچنین کدهای CSS   ، بسیار سودمند و ضروریست.

می توانید جدول رنگهای    WebSafeColor را اینجا ببینید.

لیست ها

لیستها در حال حاضر کاربرد بسیار گسترده ای در طراحی صفحات وب پیدا کردهاند. در تکنبکهای جدید طراحی صفحات وب از جمله JQuery   و CSS  لیستها نقش بسیار مهمی دارند.(مخصوصا در ساخت منوها)

لیسته با استفاده از تگ <ul>  در صفحات HTML  وارد می شن و دارای چندین نوع هستند. لیستها گاهی با عددها شماره گذاری میشوند و گاهی با اشکالی مانند دایره و مربع و…. ( و گاهی بدون نشانه ).

از لیستها در مواقعی استفاده میشود که بخواهیم یکسری موضوعات و یا اجزائ مرتبط و یک شکل را به صورت مرتب و دسته بندی شده نمایش بدهیم.

به طور مثال :

<ul>
<li>www.ittutorial.ir</li>
<li>www.topdesign.ir</li>
</ul>

و یا

<ol>
<li>www.ittutorial.ir</li>
<li>www.topdesign.ir</li>
</ol>

  1. www.ittutorial.ir
  2. www.topdesign.ir

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

در این مثالها تگ <ul>  و <ol>  نشان دهنده لیست و تگ <li>  نشان دهنده اجزاء این لیست هستند.

نوع دیگری از لیستها نیز وجود دارد که در زیر با ذکر یک مثال به آن میپردازیم.

<dl>
<dt> www.ittutorial.ir </dt>
<dd>مرجعی برای طراحان وب سایت </dd>
<dt> www.topdesign.ir </dt>
<dd>طراحی حرفه ای وب سایت</dd>
</dl>

در این مثال تگ <dl>  نشان دهنده لیست در صفحات  HTML  و تگ <dt> نشان دهنده اجزاء لیست و تگ های <dd>  نشان دهنده توضیحاتی برای اجزاء می باشد.

دانلود مطالب به صورت PDF  به همراه چند مثال.

لینکهای مرتبط:

آموزش HTML  قسمت اول

آموزش HTML  قسمت دوم

آموزش HTML  قسمت سوم

آموزش HTML  قسمت چهارم

آموزش HTML  قسمت پنجم

آموزش HTML  قسمت ششم

Be Sociable, Share!


۲۳ دیدگاه


  1. سعيد
    ۶ شهریور ۱۳۸۸

    ممنون امیر جان، چند قسمت دیگه از آموزش html مونده؟
    کی کیریم سراغ CSS?




  2. امیر
    ۶ شهریور ۱۳۸۸

    ممنون سعید جان.من فکر میکنم html مهم تر از css هست. ولی یک قسمت از مقدماتی html بیشتر نمونده . و در سرس بعدی سعی میشه به صورت عملی html پیشرفته تر به همراه css گفته بشه.البته با کمک همدیگه.




  3. hamedzare
    ۶ شهریور ۱۳۸۸

    خییییییللللیییییییییییی باحالی.دمت گرم.حسابی کار منرو راه انداختی.به سایت من سر بزن http://www.downloadhut.ir




  4. امیر
    ۷ شهریور ۱۳۸۸

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




  5. Murderer
    ۱۰ شهریور ۱۳۸۸

    سلام.من میخواستم پبرسم آیا میشه جای yellow یا … کد رنگ رو قرار بدم
    مثلا #fdihg00




  6. امیر
    ۱۱ شهریور ۱۳۸۸

    بله.میتونی به جای نام رنگ از کد اون استفاده کنی و این کار دقیق تر و استاندارد تری هست. ولی این کدی که شما اینجا نوشتی فکر کنم اشتباهه؟
    کدباید از ۶ character تشکیل شده باشه و کد شما ۷ تایی؟
    میتونی از نرم افزار فوتوشاپ برایتعیین کد رنگ مورد علاقت استفاده کنی.




  7. محمد
    ۱۱ شهریور ۱۳۸۸

    سلام.
    خسته نباشید …
    می گم چگونگی تعیین حالت لیست ها رو نگفتید … مثلا من بخوام شماره گذاری بشه یا … .
    ممنون ..




  8. s
    ۱۶ شهریور ۱۳۸۸

    ممنون کارشما هم خوبه
    می تونید از مطالبwww.neopersia.org/هم استفاده کنید اینطوری کار سریع تر پیش میره




  9. کابوس
    ۱۹ شهریور ۱۳۸۸

    چقدر تاخیر!!!!!!




  10. امیر
    ۲۰ شهریور ۱۳۸۸

    حق با شماست.از این تاخیر عذرخواهی می کنم و به زودی با دست پر بر می گردم.




  11. سحر
    ۱۸ مهر ۱۳۸۸

    سلام
    واقعا خدا قوت. مطالبتون ساده و قابل فهم بودن. ممنونم. فقط اینکه این هفت قسمت ادامه داره یا نه؟ خوشحال می شم اگه ایمیلتون رو داشته باشم. عضو خبرنامه هم هستم.




  12. کامران
    ۱۹ مهر ۱۳۸۸

    سحر جان این ۷ قسمکت مربوط به بحث htmlمقدماتی بود و برای پیشرفتش هم در آینده کالر خواهیم کرد اما فعلا میخواهیم بریم به سمت آموزش CSS که خیلی مهمه




  13. رضا
    ۲۵ بهمن ۱۳۸۸

    سلام

    من همه آموزشهاتون رو خوندم خیلی شیوا و روون توضیح دادید

    سپاس




  14. hamid
    ۱۴ اسفند ۱۳۸۸

    che modat bayad bontazere gesmathaye badi mand. behtar ast dar ebtedayeh amozesheton mineveshtid edameyeh amozesh ta sale digar.dade bagyeh ham dar omadeh.




  15. کامران
    ۱۵ اسفند ۱۳۸۸

    این آخرین قسمت از آموزش HTML Basic بود و برای Advanced فعلا کار خاصی نکردیم




  16. hamid
    ۲۰ اسفند ۱۳۸۸

    ba doroode mojadad
    yani barayeh coode div tozih va ya … ehtiyaj be tozih va rahnamaie nist? dar zemn agar ham dar gesmati bodeh ke az dide man makhfi mandeh lotf konid tazakor bedid mamnon misham . bedorood




  17. akhen
    ۱۰ فروردین ۱۳۸۹

    وقعا که ایول داره کارتون

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

    دستاتون طلا

    یاشاسن اورگدنر (اموزش دهنده ها) – یاشاسن ایران – یاشاسن اذربایجان




  18. امیر
    ۱ خرداد ۱۳۸۹

    با تشکر.ولی بهزم فایل PDF رو نمی تونم دانلود کنم




  19. احمد
    ۴ خرداد ۱۳۸۹

    سلام
    من حاضرم بخش CSS رو ارائه کنم .
    نظر شما چیه ؟
    با من تماس بگیرید…




  20. کامران
    ۴ خرداد ۱۳۸۹

    یه کم دیر گفتی . یکی از دوستان شروع کرده و به زودی منتشر میشه
    ممنون




  21. طراحی وب سایت
    ۱ تیر ۱۳۸۹

    ممنون بابت سایت مفیدتون.




  22. مرجان
    ۱۰ شهریور ۱۳۸۹

    ممنون از زحماتتون




  23. آرشام
    ۲۴ مرداد ۱۳۹۰

    خیلی خوبه.اگه میشه تایپ مطالب را بهتر کنید



دیدگاه خود را بنویسید