بوابة المخلافي للإنترنت

منتديات تقنية وتعليمية وسياسية

 تسجيل الدخول |  الإسم :   كلمة السر :
Topic icon type   30 نصيحة هامة للتعامل مع لغة برمجة هتمل في موقعك 30 HTML Best Practices for Beginners
 كاتب المشاركة
Salamo
مراقب عام supervisor


Salamo

المشاركات : 878
التسجيل : السبت 05-06-2010
مراسلة الموقع الشخصي أبلغ عن هذه المشاركة


  حرر في الأربعاء 09-02-2011 04:05 مساء - الزوار : 12378   تعليقات وإضافات : 1
30 نصيحة هامة للتعامل مع لغة برمجة هتمل في ...

30 نصيحة هامة للتعامل مع لغة برمجة هتمل في موقعك 30 HTML Best Practices for Beginners

30 نصيحة هامة للتعامل مع لغة برمجة هتمل في موقعك 

واعذرونا على عدم الترجمه للنص لأني حبيت أن أنقل الموضوع كما هو من أفضل موقع أجنبي مهتم بلغة البرمجة هتمل، وأصحاب المواقع مفهوم لهم الفكرة لذا لايحتاج ترجمه. وشكراً

 The most difficult aspect of running Nettuts+ is accounting for so many  different skill levels. If we post too many advanced tutorials, our  beginner audience won’t benefit. The same holds true for the opposite.  We do our best, but always feel free to pipe in if you feel you’re being  neglected. This site is for you, so speak up! With that said, today’s  tutorial is specifically for those who are just diving into web  development. If you’ve one year of experience or less, hopefully some of  the tips listed here will help you to become better, quicker!

Without further ado, let’s review thirty best practices to observe when creating your markup.

1: Always Close Your Tags

Back in the day, it wasn’t uncommon to see things like this:

view plaincopy to clipboardprint?
  1. -Some text here.  
  2. -Some new text here.  
  3. -You get the idea.  
-Some text here.
-Some new text here.
-You get the idea.

Notice how the wrapping UL/OL tag was omitted. Additionally, many chose  to leave off the closing LI tags as well. By today’s standards, this is  simply bad practice and should be 100% avoided. Always, always close  your tags. Otherwise, you’ll encounter validation and glitch issues at  every turn.

Better

view plaincopy to clipboardprint?

  1.   -Some text here.   
  2.   -Some new text here.   
  3.   -You get the idea.   


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

You get the idea. -


 2: Declare the Correct DocType

Declare doctype

When I was younger, I participated quite a bit in CSS forums. Whenever a  user had an issue, before we would look at their situation, they HAD to  perform two things first:

  1. Validate the CSS file. Fix any necessary errors.
  2. Add a doctype.

“The DOCTYPE goes before the opening html tag at the top of the page  and tells the browser whether the page contains HTML, XHTML, or a mix of  both, so that it can correctly interpret the markup.”

Most of us choose between four different doctypes when creating new websites.

There’s a big debate currently going on about the correct choice here.  At one point, it was considered to be best practice to use the XHTML  Strict version. However, after some research, it was realized that most  browsers revert back to regular HTML when interpretting it. For that  reason, many have chosen to use HTML 4.01 Strict instead. The bottom  line is that any of these will keep you in check. Do some research and  make up your own mind.

3: Never Use Inline Styles

When you’re hard at work on your markup, sometimes it can be tempting to take the easy route and sneak in a bit of styling.

view plaincopy to clipboardprint?
  1. I'm going to make this text red so that it really stands out and makes people take notice! 

I'm going to make this text red so that it really stands out and makes people take notice! 

Sure — it looks harmless enough. However, this points to an error in your coding practices.

    When creating your markup, don’t even think about the styling  yet. You only begin adding styles once the page has been completely  coded.

 

It’s like crossing the streams in Ghostbusters. It’s just not a good idea. 

-Chris Coyier (in reference to something completely unrelated.)

 

Instead, finish your markup, and then reference that P tag from your external stylesheet.

Better

view plaincopy to clipboardprint?
  1. #someElement > p {  
  2.   colorred;  
  3. }  
#someElement > p {

color: red;


} 4: Place all External CSS Files Within the Head Tag

Technically, you can place stylesheets anywhere you like. However, the  HTML specification recommends that they be placed within the document  HEAD tag. The primary benefit is that your pages will seemingly load  faster.

 

While researching performance at Yahoo!, we discovered that moving  stylesheets to the document HEAD makes pages appear to be loading  faster. This is because putting stylesheets in the HEAD allows the page  to render progressively. 

- ySlow Team

 

view plaincopy to clipboardprint?

5: Consider Placing Javascript Files at the Bottom

Place JS at bottom

Remember — the primary goal is to make the page load as quickly as  possible for the user. When loading a script, the browser can’t continue  on until the entire file has been loaded. Thus, the user will have to  wait longer before noticing any progress.

If you have JS files whose only purpose is to add functionality — for  example, after a button is clicked — go ahead and place those files at  the bottom, just before the closing body tag. This is absolutely a best  practice.

Better

view plaincopy to clipboardprint?

 6: Never Use Inline Javascript. It’s not 1996!

Another common practice years ago was to place JS commands directly  within tags. This was very common with simple image galleries.  Essentially, a “onclick” attribute was appended to the tag. The value  would then be equal to some JS procedure. Needless to say, you should  never, ever do this. Instead, transfer this code to an external JS file  and use “addEventListener/attachEvent” to “listen” for your desired  event. Or, if using a framework like jQuery, just use the “click” method.

view plaincopy to clipboardprint?
validate continuously

I recently blogged  about how the idea of validation has been completely misconstrued by  those who don’t completely understand its purpose. As I mention in the  article, “validation should work for you, not against.”

However, especially when first getting started, I highly recommend that you download the Web Developer Toolbar  and use the “Validate HTML” and “Validate CSS” options continuously.  While CSS is a somewhat easy to language to learn, it can also make you  tear your hair out. As you’ll find, many times, it’s your shabby markup  that’s causing that strange whitespace issue on the page. Validate,  validate, validate.

8: Download Firebug

download firebug

I can’t recommend this one enough. Firebug is, without doubt, the best  plugin you’ll ever use when creating websites. Not only does it provide  incredible Javascript debugging, but you’ll also learn how to pinpoint  which elements are inheriting that extra padding that you were unaware  of. Download it!

9: Use Firebug!

use firebug

From my experiences, many users only take advantage of about 20% of  Firebug’s capabilities. You’re truly doing yourself a disservice. Take a  couple hours and scour the web for every worthy tutorial you can find  on the subject.

Resources

  • Overview of Firebug
  • Debug Javascript With Firebug – video tutorial

10: Keep Your Tag Names Lowercase

Technically, you can get away with capitalizing your tag names.

view plaincopy to clipboardprint?

Having said that, please don’t. It serves no purpose and hurts my eyes —  not to mention the fact that it reminds me of Microsoft Word’s html  function!

Better

view plaincopy to clipboardprint?

11: Use H1 – H6 Tags

Admittedly, this is something I tend to slack on. It’s best practice to  use all six of these tags. If I’m honest, I usually only implement the  top four; but I’m working on it! :) For semantic and SEO reasons, force yourself to replace that P tag with an H6 when appropriate.

view plaincopy to clipboardprint?

12: If Building a Blog, Save the H1 for the Article Title

h1 saved for title of article.

Just this morning, on Twitter,  I asked our followers whether they felt it was smartest to place the H1  tag as the logo, or to instead use it as the article’s title. Around  80% of the returned tweets were in favor of the latter method.

As with anything, determine what’s best for your own website. However,  if building a blog, I’d recommend that you save your H1 tags for your  article title. For SEO purposes, this is a better practice – in my  opinion.

13: Download ySlow


download yslow

Especially in the last few years, the Yahoo team has been doing some  really great work in our field. Not too long ago, they released an  extension for Firebug called ySlow.  When activated, it will analyze the given website and return a “report  card” of sorts which details the areas where your site needs  improvement. It can be a bit harsh, but it’s all for the greater good. I  highly recommend it.

14: Wrap Navigation with an Unordered List

Wrap navigation with unordered lists

Each and every website has a navigation section of some sort. While you can definitely get away with formatting it like so:

view plaincopy to clipboardprint?

I’d encourage you not to use this method, for semantic reasons. Your job  is to write the best possible code that you’re capable of.

Why would we style a list of navigation links with anything other than an unordered LIST?

The UL tag is meant to contain a list of items.

Better

view plaincopy to clipboardprint?

15: Learn How to Target IE

You’ll undoubtedly find yourself screaming at IE during some point or  another. It’s actually become a bonding experience for the community.  When I read on Twitter how one of my buddies is battling the forces of  IE, I just smile and think, “I know how you feel, pal.”

The first step, once you’ve completed your primary CSS file, is to  create a unique “ie.css” file. You can then reference it only for IE by  using the following code.

view plaincopy to clipboardprint?

This code says, “If the user’s browser is Internet Explorer 6 or lower,  import this stylesheet. Otherwise, do nothing.” If you need to  compensate for IE7 as well, simply replace “lt” with “lte” (less than or  equal to).

16: Choose a Great Code Editor

choose a great code editor

Whether you’re on Windows or a Mac, there are plenty of fantastic code  editors that will work wonderfully for you. Personally, I have a Mac and  PC side-by-side that I use throughout my day. As a result, I’ve  developed a pretty good knowledge of what’s available. Here are my top  choices/recommendations in order:

Mac Lovers

  • Coda
  • Espresso
  • TextMate
  • Aptana
  • DreamWeaver CS4

PC Lovers

  • InType
  • E-Text Editor
  • Notepad++
  • Aptana
  • Dreamweaver CS4

17: Once the Website is Complete, Compress!

Compress

By zipping your CSS and Javascript files, you can reduce the size of  each file by a substantial 25% or so. Please don’t bother doing this  while still in development. However, once the site is, more-or-less,  complete, utilize a few online compression programs to save yourself  some bandwidth.

Javascript Compression Services

  • Javascript Compressor
  • JS Compressor

CSS Compression Services

  • CSS Optimiser
  • CSS Compressor
  • Clean CSS

18: Cut, Cut, Cut

cut cut cut

Looking back on my first website, I must have had a SEVERE case of divitis. Your natural instinct is to safely wrap each paragraph with a div, and then wrap it with one more div for good measure. As you’ll quickly learn, this is highly inefficient.

Once you’ve completed your markup, go over it two more times and find  ways to reduce the number of elements on the page. Does that UL really  need its own wrapping div? I think not.

Just as the key to writing is to “cut, cut, cut,” the same holds true for your markup.

19: All Images Require “Alt” Attributes

It’s easy to ignore the necessity for alt attributes within image tags.  Nevertheless, it’s very important, for accessibility and validation  reasons, that you take an extra moment to fill these sections in.

Bad

view plaincopy to clipboardprint?
view plaincopy to clipboardprint?

I highly doubt that I’m the only one who, at one point while learning,  looked up and realized that I was in a pitch-dark room well into the  early, early morning. If you’ve found yourself in a similar situation,  rest assured that you’ve chosen the right field.

The amazing “AHHA” moments, at least for me, always occur late at night.  This was the case when I first began to understand exactly what  Javascript closures were. It’s a great feeling that you need to  experience, if you haven’t already.

21: View Source

view source

What better way to learn HTML than to copy your heroes? Initially, we’re  all copiers! Then slowly, you begin to develop your own styles/methods.  So visit the websites of those you respect. How did they code this and  that section? Learn and copy from them. We all did it, and you should  too. (Don’t steal the design; just learn from the coding style.)

Notice any cool Javascript effects that you’d like to learn? It’s likely  that he’s using a plugin to accomplish the effect. View the source and  search the HEAD tag for the name of the script. Then Google it and  implement it into your own site! Yay.

22: Style ALL Elements

This best practice is especially true when designing for clients. Just  because you haven’t use a blockquote doesn’t mean that the client won’t.  Never use ordered lists? That doesn’t mean he won’t! Do yourself a  service and create a special page specifically to show off the styling  of every element: ul, ol, p, h1-h6, blockquotes, etc.

23: Use Twitter

Use Twitter

Lately, I can’t turn on the TV without hearing a reference to Twitter;  it’s really become rather obnoxious. I don’t have a desire to listen to  Larry King advertise his Twitter account – which we all know he doesn’t  manually update. Yay for assistants! Also, how many moms signed up for  accounts after Oprah’s approval? We can only long for the day when it was just a few of us who were aware of the service and its “water cooler” potential.

Initially, the idea behind Twitter was to post “what you were doing.”  Though this still holds true to a small extent, it’s become much more of  a networking tool in our industry. If a web dev writer that I admire  posts a link to an article he found interesting, you better believe that  I’m going to check it out as well – and you should too! This is the  reason why sites like Digg are quickly becoming more and more nervous.

Twitter Snippet

If you just signed up, don’t forget to follow us: NETTUTS.

24: Learn Photoshop

Learn Photoshop

A recent commenter on Nettuts+ attacked us for posting a few  recommendations from Psdtuts+. He argued that Photoshop tutorials have  no business on a web development blog. I’m not sure about him, but  Photoshop is open pretty much 24/7 on my computer.

In fact, Photoshop may very well become the more important tool you  have. Once you’ve learned HTML and CSS, I would personally recommend  that you then learn as many Photoshop techniques as possible.

  1. Visit the Videos section at Psdtuts+
  2. Fork over $25 to sign up for a one-month membership to Lynda.com. Watch every video you can find.
  3. Enjoy the “You Suck at Photoshop” series.
  4. Take a few hours to memorize as many PS keyboard shortcuts as you can.

25: Learn Each HTML Tag

There are literally dozens of HTML tags that you won’t come across every  day. Nevertheless, that doesn’t mean you shouldn’t learn them! Are you  familiar with the “abbr” tag? What about “cite”? These two alone deserve  a spot in your tool-chest. Learn all of them!

By the way, in case you’re unfamiliar with the two listed above:

  • abbr does pretty much what you’d expect. It refers  to an abbreviation. “Blvd” could be wrapped in a <abbr> tag  because it’s an abbreviation for “boulevard”.
  • cite is used to reference the title of some work.  For example,  if you reference this article on your own blog, you could  put “30 HTML Best Practices for Beginners” within a <cite> tag.  Note that it shouldn’t be used to reference the author of a quote. This  is a common misconception.

26: Participate in the Community

Just as sites like ours contributes greatly to further a web developer’s  knowledge, you should too! Finally figured out how to float your  elements correctly? Make a blog posting to teach others how. There will  always be those with less experience than you. Not only will you be  contributing to the community, but you’ll also teach yourself. Ever  notice how you don’t truly understand something until you’re forced to  teach it?

27: Use a CSS Reset

This is another area that’s been debated to death. CSS resets: to use or  not to use; that is the question. If I were to offer my own personal  advice, I’d 100% recommend that you create your own reset file. Begin by  downloading a popular one, like Eric Meyer’s,  and then slowly, as you learn more, begin to modify it into your own.  If you don’t do this, you won’t truly understand why your list items are  receiving that extra bit of padding when you didn’t specify it anywhere  in your CSS file. Save yourself the anger and reset everything! This  one should get you started.

view plaincopy to clipboardprint?
  1. html, body, div, span,  
  2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,  
  3. a, abbr, acronym, address, big, cite, code,  
  4. img, ins, kbd, q, s, samp,  
  5. small, strike, strong,  
  6. dl, dt, dd, ol, ul, li,  
  7. fieldset, form, label, legend,  
  8. table, caption, tbody, tfoot, thead, tr, th, td {  
  9.     margin: 0;  
  10.     padding: 0;  
  11.     border: 0;  
  12.     outline: 0;  
  13.     font-size: 100%;  
  14.     vertical-alignbaselinebaseline;  
  15.     backgroundtransparent;  
  16. }  
  17. body {  
  18.     line-height: 1;  
  19. }  
  20. ol, ul {  
  21.     list-stylenone;  
  22. }  
  23. blockquote, q {  
  24.     quotesnone;  
  25. }  
  26. blockquote:before, blockquote:after,  
  27. q:before, q:after {  
  28.     content'';  
  29.     contentnone;  
  30. }  
  31.   
  32. table {  
  33.     border-collapsecollapse;  
  34.     border-spacing: 0;  
  35. }  
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

rong, dl, dt, dd, ol, ul,

img, ins, kbd, q, s, samp, small, strike, s
tli, fieldset, form, label, legend,

tr, th, td {  margin: 0;  padding: 0;  border: 0

table, caption, tbody, tfoot, thead
,;  outline: 0;  font-size: 100%;  vertical-align: baseline;

{  list-style: none; } bl

background: transparent; } body {  line-height: 1; } ol, ul
ockquote, q {  quotes: none; } blockquote:before, blockquote:after,

collapse: collapse;

q:before, q:after {  content: '';  content: none; }  table {  border
-  border-spacing: 0;


} 28: Line ‘em Up!


Line em up

Generally speaking, you should strive to line up your elements as best  as possible. Take a look at you favorite designs. Did you notice how  each heading, icon, paragraph, and logo lines up with something else on  the page? Not doing this is one of the biggest signs of a beginner.  Think of it this way: If I ask why you placed an element in that spot,  you should be able to give me an exact reason.

29: Slice a PSD

Slice a PSD

Okay, so you’ve gained a solid grasp of HTML, CSS, and Photoshop. The  next step is to convert your first PSD into a working website. Don’t  worry; it’s not as tough as you might think. I can’t think of a better  way to put your skills to the test. If you need assistance, review these  in depth video tutorials that show you exactly how to get the job done.

  • Slice and Dice that PSD
  • From PSD to HTML/CSS

30: Don’t Use a Framework…Yet

Frameworks, whether they be for Javascript or CSS are fantastic; but  please don’t use them when first getting started. Though it could be  argued that jQuery and Javascript can be learned simultaneously, the  same can’t be made for CSS. I’ve personally promoted the 960 CSS Framework,  and use it often. Having said that, if you’re still in the process of  learning CSS — meaning the first year — you’ll only make yourself more  confused if you use one.

CSS frameworks are for experienced developers who want to save themselves a bit of time. They’re not for beginners.

  • Follow us on Twitter, or subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.


(مواضيع مشابهة وذات علاقة)
  أكثر المواضيع مشاهدة الشهر الماضي    ( الإنتقال الى أرشيف المنتديات )

      برضه في ناس ماهم فاهمين انجليزي  »
     الأربعاء 09-02-2011 10:35 مساء  | الكاتب: almorad(زائر)  (الصفة: الزوار guest)   |   | التسجيل : ()  | عدد المشاركات :() | رابط هذه المشاركة :  رقم 802
    almorad(زائر) photo
    مراسلة أبلغ عن هذه المشاركة

    الموضوع جيد جداً بس ياريت لوتتفرغ وتترجمه ترجمه موضوعية
    لأنه لازم تعمل حسابك انه في ناس اغبياء جداً بالإنجليزي

    وغريبة وموقعك بالعربي

    شكراً

        إضافة تعليق سريع على هذا الموضوع
        الإسم الكريم
        عنوان المشاركة
       إستخدام أدوات التحرير المتقدمة ||  الإطلاع على سياسة استخدام الموقع
      النص : *