تمرین برای HTML , CSS

سلام بچه ها.
از کسایی که html , css رو بخوبی کار کردن خواهش دارم که برا اینکه دست ما که اول راهیم هم پر بشه لطفا اینجا تمرین هایی رو بزارن از آسون تا سخت.
ممنون میشم

من پیشنهاد میکنم قالب های امده رو دست کاری کنی و تغییر بدی تا چیزهایی رو که خوندی بیشتر با کاربردش اشنا بشی تا بتونی از پایه خودت طراحی کنی.

اما یک سری پیشنهاد دیگه هم دارم :

این موارد رو فراموش میکنم
1. همیشه تگها را ببندید

چندی پیش ممکن بود مواردی این چنینی عادی به نظر برسد :

1 <li>Some text here.

2 <li>Some new text here.

3 <li>You get the idea.

دقت کنید در کد بالا تگهای ol یا ul وجود ندارد و حتی تگ li هم بسته نشده است. اما امروزه به خاطر استاندارد سازی وب سایتها این کار کاملا اشتباه است و ممکن است باعث ایراداتی در سایت شما بشود. پس همیشه همه تگهای خود را ببندید :

1 <ul>

2 <li>Some text here. </li>

3 <li>Some new text here. </li>

4 <li>You get the idea. </li>

5 </ul>

2. DOCTYPE درست انتخاب کنید

همیشه بسته به نوع نیاز خود بهترین DOCTYPE را برای اسناد خود انتخاب کنید.
3. هیچوقت از Inline Style ها استفاده نکنید

بعضی مواقع که دارید روی کد خود کار می کنید ممکن است وسوسه انگیز باشد که برای دادن استایل از روش inline استفاده کنید :

بهتر است همیشه ابتدا کدنویسی ساختار سایت خود را تکمیل کنید و بعد به استایل دادن آن توسط فایل بیرونی CSS بپردازید :

در این پست می توانید اطلاعات بیشتری را در مورد انواع روشهای دادن استایل بدست آورید.

1 <p style="color: red;">I'm going to make this text red so that it really stands out and makes people take notice! </p>

1 #someElement > p {

2 color: red;

3 }

4. فایلهای CSS بیرونی را در head قرار دهید

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

1 <head>

2 <title>My Favorites Kinds of Corn</title>

3 <link rel="stylesheet" type="text/css" media="screen"href="path/to/file.css" />

4 <link rel="stylesheet" type="text/css" media="screen"href="path/to/anotherFile.css" />

5 </head>

5. فایلهای javascript را در انتها قرار دهید

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

جاوااسکریپت نماند.

1 <p>And now you know my favorite kinds of corn. </p>

2 <script type="text/javascript" src="path/to/file.js"></script>

3 <script type="text/javascript"src="path/to/anotherFile.js"></script>

4 </body>

5 </html>

6. از inline javascript استفاده نکنید

خیلی مواقع دستورات جاوااسکریپت را به طور مستقیم در کد HTML قرار داده میشود در صورتیکه این کار خیلی جالب نیست و بهتر هست همه کدهای جاوااسکریپت در یک فایل خارجی قرار داده شوند.
7. همیشه Validate کنید

ابتدا پلاگین Web Developer Toolbar رو برای فایرفاکس دانلود کنید، سپس از گزینه های Validate HTML و Validate CSS همیشه و به طور دائم استفاده کنید.
8. Firebug را دانلود کنید

این پلاگین فایرفاکس یکی از بهترین ابزارها برای برنامه نویسان و طراحان وب سایت است. توسط این پلاگین به راحتی می توانید کد جاوااسکریپت خود را دیباگ کنید و همه المانهای کد HTML و CSS را به راحتی بررسی

کنید و تغییر بدهید. حتما دانلود کنید !
9. از Firebug استفاده کنید

به طور متوسط کاربران از 20 درصد از تواناییهای فایرباگ استفاده می کنند، شما میتوانید با چند ساعت وقت گذاشتن از درصد بیشتری از تواناییهای این ابزار فوق العاده استفاده کنید ، برای این منظور از منابع زیر استفاده کنید :

Overview of Firebug
Debug Javascript With Firebug – video tutorial

10. تگها را با حروف کوچک بنویسید

کد شما در این حالت هم کار می کند :

1 <DIV>

2 <P>Here's an interesting fact about corn. </P>

3 </DIV>

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

1 <div>

2 <p>Here's an interesting fact about corn. </p>

3 </div>

11. از تگهای h1 تا h6 استفاده کنید

یکی از بهترین عادتهایی که می توانید بکنید این است که از این 6 تگ به درستی استفاده کنید، چون هم برای موتورهای جستجو خوب است و هم رتبه سایت شما را بهتر می کند.

1 <h1>This is a really important corn fact! </h1>

2 <h6>Small, but still significant corn fact goes here. </h6>

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

بهتر است در ساخت وبلاگ از تگ h1 برای عنوان مطالب استفاده کرد تا اینکه این تگ را برای عنوان سایت و لوگو قرار داد. البته این انتخاب بیشتر به عهده خود شما می باشد اما از نظر SEO این کار نتیجه بهتری خواهد داشت.
13. yslow را دانلود کنید

یاهو برای فایرباگ پلاگین عالی ساخته است که توسط آن میتوانید به نقاط ضعف وب سایت خود پی ببرید و آنها را بهینه کنید. این پلاگین را نیز حتما دانلود کنید.
14. navigation را درون تگ ol قرار دهید

هر وب سایتی یک navigation دارد، شما میتوانید این قسمت را به صورت زیر کدنویسی کنید :

1 <div id="nav">

2 <a href="#">Home </a>

3 <a href="#">About </a>

4 <a href="#">Contact </a>

5 </div>

اما روش بهتر این است که این قسمت را درون تگ ol و li قرار دهید :

1 <ul id="nav">

2 <li><a href="#">Home</a></li>

3 <li><a href="#">About</a></li>

4 <li><a href="#">Contact</a></li>

5 </ul>

15. یاد بگیرید چگونه IE را هدف قرار دهید

چه بخواهید و چه نخواهید همیشه هنگام کدنویسی با IE سروکله خواهید زد. یکی از بهترین روشها این است که ابتدا کد CSS را کامل بنویسید، سپس برای قسمتهایی که در Internet Explorer به مشکل میخورید یک فایل CSS جداگانه تهیه کنید و آنرا فقط برای IE اجرا کنید :

1 

کد فوق می گوید که اگر مرورگر کاربر IE بود و نسخه آن کمتر از 7 بود این کد را اجرا کند، اگر میخواهید خود IE 7 هم شامل شود به جای lt عبارت lte را به کار ببرید.
16. یک برنامه برای کدنویسی انتخاب کنید

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

InType
E-Text Editor
Notepad++
Aptana
Dreamweaver CS4

عاشقان مک

Coda
Espresso
TextMate
Aptana
Dreamweaver CS4

17. وقتی وب سایت تمام شد آنرا فشرده کنید

توسط zip کردن فایلهای CSS و JS میتوانید تا 25 درصد حجم آنها را کاهش دهید. توسط ابزارهای آنلاین زیر می توانید این کار را انجام دهید :
JavaScript

Javascript Compressor
JS Compressor

CSS

CSS Optimiser
CSS Compressor
Clean CSS

18. بریدن، بریدن و بریدن

شما معمولا عادت دارید که وقتی کدنویسی می کنید هر پاراگراف را درون یک div قرار دهید و آن div را هم درون یک div دیگر قرار دهید. اما بهتر است وقتی کدنویسی سایت تمام شد به کدها دوباره نگاه بندازید و تگهای اضافی که استفاده نکرده اید را پاک کنید تا سرعت سایت شما افزایش یابد.
19. همه تصاویر به alt نیاز دارند

به خاطر accessibility و validation حتما لازم است که alt در تصاویر قرار داده شود، فراموش نکنید !
بد :

1 <IMG SRC="cornImage.jpg" />

بهتر :

1 <img src="cornImage.jpg" alt="A corn field I visited." />

20. سورس را ببینید

همه ما به نحوی از هم کپی میکنیم، اما مهم این است که از این کپی کردنها چیزی یاد بگیریم و بعدها خودمان کدنویسی بکنیم، برای شروع بد نیست به سایتهای مختلف رفته و سورس آنها را ببینید و کپی کنید (البته طرح گرافیکی را نه فقط کد)، سپس بعد از مدتی می بینید که می توانید برای خودتان هم کد بنویسید.
21. همه المانها را استایل بدهید

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

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

Videos section
Lynda.com
You Suck at Photoshop
چند ساعت اختصاص دهید تا کلیدهای میانبر در فتوشاپ را یاد بگیرید

23. همه تگهای HTML را یاد بگیرید

خیلی از تگهای HTML هستند که به ندرت از آنها استفاده می کنید، اما این بدین معنی نیست که نباید آنها را یاد بگیرید. برای مثال تگ abbr و یا cite .
24. در فضای مجازی فعال شوید

وقتی یک مطلبی را در مورد طراحی و برنامه نویسی وب سایت فرا گرفتید چرا آنرا با بقیه قسمت نمی کنید ؟ یک وبلاگ بسازید و دانسته های خود را آموزش دهید ! خیلی از کاربران هستند که کمتر از شما می دانند. با این کار هم به بقیه کمک کردید و هم می توانید دانسته های خود را هم محک بزنید.
25. از CSS Reset استفاده کنید

این مورد یکی از مواردی است که همیشه سر استفاده کردن یا نکردن آن بحث است، به نظر من بهتر است یکی از فایلهای معروف CSS Reset را دانلود کنید و طبق آن برای خود یک فایل جداگانه بسازید مثلا از فایل Eric Mayerاستفاده کنید. اگر تنها فایل را کپی کنید به درستی نخواهید فهمید که این کدها دقیقا چه کاری را انجام می دهند.
26. تراز کنید

یکی از بهترین تمرینها این است که سعی کنید در طرحهایتان همه المانها با هم تراز باشند.
27. slice کردن قالب فتوشاپ

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

ساخت وب سایت توسط فتوشاپ
Slice and Dice that PSD
From PSD to HTML/CSS

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

تادرودی دیگر بدرود .:n18:

بنام خدا
سلام
شما میتونید برای اشنایی با HTML این کتاب رو که به صورت PDF و به زبان خیلی ساده توضیح داده شده رو مطالعه کنید.
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
رمز عبور: ----------------
منبع:----------------

بعد از مطالعه این کتاب و درک کلی از HTML میتونید از این ادرس [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ] که بسیار بسیار ساده و گویا به زبان انگلیسی توضیح داده شده پیش برید.
اگه شما کتاب رو خوب مطالعه کرده باشید , به راحتی میتونید مطالب سایت ذکر شده رو بدون مشکل پیش ببرید!
این سایت بعد از (Example) مثال هایی که برای کاربر نوشته , در قسمت پایین مثال ها کلیک Try it yourself » برای کاربر قرار داده که در اون قسمت میتونید
کدها و عناصری که مینویسید رو در جلو همون نوشته ها مشاهده کنید که در صفحه وب به چه صورت نمایش داده میشود.

موفق باشید:»