Welcome Guest ( Log In | Register )



2 Pages V   1 2 >  
Reply to this topicStart new topic
> Coding Html Properly In The New Age
Rating 4 V
SilverFox
post May 8 2007, 01:36 PM
Post #1


Premium Member
Group Icon

Group: Members
Posts: 206
Joined: 26-February 07
From: Texas
Member No.: 20,598



In all your html there are things you want to follow.

Always use lowercase for your HTML Tags
Don't use upper case. Upper case is bad (this can be hard to do if your like me and tend to write <I> and then </i> for closing:P).

CODE
<center><H3>Types of Staff</H3></center>

<H4>Administrators: <i>SilverFox, Danmidas</i></H4>


Above: Bad Code
Below: Good Code


CODE
<center><h3>Types of Staff</h3></center>

<h4>Administrators: <i>SilverFox, Danmidas</i></h4>


Use Self-Closing Tags
In html certain tags (ex. img, br, hr) didn't need closing tags. However its best to write them with something called self-closing tags.

CODE
This is a more normal, bad HTML code.<br><br>I'm not using self closing tags. <BR> Now I just used a capital one. Big bad-bad :P <hr>


Above: Bad Code
Below: Good Code


CODE
This piece of code is better. <br /> <br /> I just used self closing tags. <br /> and I didn't use a capital. <hr />


Make your Documents "well-formed"

Form them right.

CODE
<p>here is an emphasized <em>paragraph.</p></em>


Above: Bad Code
Below: Good Code


CODE
<p>here is an emphasized <em>paragraph.</em></p>


Might take you a while to pick up on thise one. In the first example the <p> was closed then the <em>. However that's over-lapping and it isn't good.

Always Quote

Some might have a problem with this thankfully I never have (writing the bad code in the example I found I had written it right without trying).

CODE
<td rowspan=3><br />
<a href=site goes here.net>


Above: Bad Code
Below: Good Code


CODE
<td rowspan="3"><br />
<a href="site goes here.net">


Always quote attributes.

DocType

Most of us use

CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


I recommend using:

CODE
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


This is the way to the future.

Thanks

EDIT: Added <center> to examples that didn't have a start tag.

This post has been edited by SilverFox: May 9 2007, 04:50 PM
Go to the top of the page
 
+Quote Post
saint-michael
post May 8 2007, 02:03 PM
Post #2


SM- the Man -The Myth - The Legend Himself
Group Icon

Group: Members
Posts: 435
Joined: 4-September 05
From: Drinking da rootbeers
Member No.: 8,313



Interesting enough the new way of coding has been talked about since xhtml was introduced back in 2000 I think, so it's nothing really new if your coding career start with the xhtml era. Of course the books I have been coming across with recently show like ot emphasize that particular note as well including the use of the "&" symbol in your html coding.

One thing I do like to comment on is the doc type which I recently found out myself, you really don't need to use XHTML doc type if you don't plan on using XML with in your site, HTML 4.01 strict is the closes thing to xhtml then it can get with some minor differences. Although people have been using xhtml since it first came out since it was cleaning, some designers especially those who make web template still use html 4.01.

But hte one thing I thought was a bit annoying was the fact you need to close every tag in your document like <br> and image tags, I think was a bit unnecessary of course I haven't heard to much about xhtml 2 yet so who knows what they changed with that coding structure.

Another thing I would like to point out with the quote thing make sure your using the right quotes since most programming languages uses both " and ' within it's structure. Although a interesting topic it should cover more uncommon things that most designers don't know about or trying to figure out, especially now that ajax is coming around and you got all thes video and photo sites showing up.
Go to the top of the page
 
+Quote Post
Chesso
post May 8 2007, 02:49 PM
Post #3


Teh Coder
Group Icon

Group: Members
Posts: 1,053
Joined: 18-April 06
From: Australia
Member No.: 12,833



Well mostly self closing tags are there because these tags have no need for an additional close tag.

However, without some hard-coded checking, how will the parser know when these tags have finished? The answer was of course, self-closing them smile.gif.


I also use the XHTML doctype (1.0 transitional).

By the way I am pretty sure P isn't a self closing tag, it stands for Paragraph and you normally have the paragraphed text within it (e.g. <p>This is a paragraph.</p>).

Oh and don't forget code indenting, it's extremely usefull for readability for future maintenance.

The simplest form is to push code in by 1 line, every time it goes inside of something else, and when you start closing those tags off, you start indenting back to the left side until the start tag which has no indendtation, ends up back that way.
Go to the top of the page
 
+Quote Post
SilverFox
post May 8 2007, 04:28 PM
Post #4


Premium Member
Group Icon

Group: Members
Posts: 206
Joined: 26-February 07
From: Texas
Member No.: 20,598



saint-michael, the reason I called it new age is you'd be surprised how many people are using non-XHTML compliant stuff.

This is about XHTML so " is the valid quote...at least for my examples.

And I don't know the uncommon things that often tongue.gif But I know that some people who come to asta surprisingly have almost no coding background, look at me.

@Chesso: I see.

QUOTE
Oh and don't forget code indenting, it's extremely usefull for readability for future maintenance.


I know I'll add that. I was speaking mainly of the actual code though tongue.gif

This post has been edited by SilverFox: May 8 2007, 04:41 PM
Go to the top of the page
 
+Quote Post
pyost
post May 8 2007, 07:19 PM
Post #5


Nenad Bozidarevic
Group Icon

Group: [MODERATOR]
Posts: 1,002
Joined: 7-November 05
From: Belgrade, Serbia
Member No.: 9,500



I would also recommend avoiding the <center> tag. Instead, use <div style="text-align: center;">. What's more, the first tag isn't even supported in XHTML 1.0 Strict wink.gif
Go to the top of the page
 
+Quote Post
saint-michael
post May 8 2007, 10:54 PM
Post #6


SM- the Man -The Myth - The Legend Himself
Group Icon

Group: Members
Posts: 435
Joined: 4-September 05
From: Drinking da rootbeers
Member No.: 8,313



That is true that a lot of new people come to the forums some have little experience and of course the hundreds of questions are asked, of course you could say some new people don't have much forum experience either. Especially when they post the same question that 20 other people posted before.

thats why I pointed that different languages use both " and ', you could say that was a little reminder to be able to tell the difference. Well I know some big name sites are changing over and out of curiosity I looked at yahoo site and they are still using html strict ohmy.gif. I even check google main page and they have no doc type whatsoever and filled with many errors ohmy.gif. But like I said the only reason some are still not using xhtml, because they don't use anything that requires XML support. Then you have those who use pre-made templates and just stick with the original coding because the time consuming process it takes to convert tables to divs, I been going at it on and off for a couple of months and it is time consuming. But I won't talk about myspace coders because I would like to sleep good at night knowing that html coding is getting better and not worse laugh.gif.
Go to the top of the page
 
+Quote Post
Chesso
post May 9 2007, 12:01 AM
Post #7


Teh Coder
Group Icon

Group: Members
Posts: 1,053
Joined: 18-April 06
From: Australia
Member No.: 12,833



Hey now don't forget CSS's text-align property can have undesired effects (center text instead of an object/container or center both).

They really need one for text only and one for objects/containers.

Otherwise you got to use even more code to stop it from centering things you don't want it to.
Go to the top of the page
 
+Quote Post
demolaynyc
post May 9 2007, 02:47 PM
Post #8


Premium Member
Group Icon

Group: Members
Posts: 330
Joined: 2-February 06
Member No.: 11,040



QUOTE(SilverFox @ May 8 2007, 09:36 AM) *
In all your html there are things you want to follow.

Always use lowercase for your HTML Tags
Don't use upper case. Upper case is bad (this can be hard to do if your like me and tend to write <I> and then </i> for closing:P).

CODE
<H3>Types of Staff</H3></center>

<H4>Administrators: <i>SilverFox, Danmidas</i></H4>


Above: Bad Code
Below: Good Code


CODE
<h3>Types of Staff</h3></center>

<h4>Administrators: <i>SilverFox, Danmidas</i></h4>


Use Self-Closing Tags
In html certain tags (ex. img, br, hr) didn't need closing tags. However its best to write them with something called self-closing tags.

CODE
This is a more normal, bad HTML code.<br><br>I'm not using self closing tags. <BR> Now I just used a capital one. Big bad-bad :P <hr>


Above: Bad Code
Below: Good Code


CODE
This piece of code is better. <br /> <br /> I just used self closing tags. <br /> and I didn't use a capital. <hr />


Make your Documents "well-formed"

Form them right.

CODE
<p>here is an emphasized <em>paragraph.</p></em>


Above: Bad Code
Below: Good Code


CODE
<p>here is an emphasized <em>paragraph.</em></p>


Might take you a while to pick up on thise one. In the first example the <p> was closed then the <em>. However that's over-lapping and it isn't good.

Always Quote

Some might have a problem with this thankfully I never have (writing the bad code in the example I found I had written it right without trying).

CODE
<td rowspan=3><br />
<a href=site goes here.net>


Above: Bad Code
Below: Good Code


CODE
<td rowspan="3"><br />
<a href="site goes here.net">


Always quote attributes.

DocType

Most of us use

CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


I recommend using:

CODE
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


This is the way to the future.

Thanks


That's basically the tutorial for coding XHTML. Great tutorial! It's very straight forward and easy to learn in minutes.
Go to the top of the page
 
+Quote Post
Quatrux
post May 9 2007, 04:21 PM
Post #9


the Q
Group Icon

Group: [HOSTED]
Posts: 1,022
Joined: 13-July 05
From: Lithuania, Vilnius
Member No.: 7,059



the only thing I don't understand is the center tag used in the Good Code examples, the </center>, but I don't see the start of it, and anyway, it is a bad idea to use center nowadays, so this is a new age html coding biggrin.gif but with some (some, I saw one?) stone age elements. smile.gif To say something funny, p tag isn't popular anymore or tables/tr/td/th biggrin.gif everyone likes to use div, even though I don't believe in this, due to sometimes I need to use <p> to avoid using extra break lines <br /> wink.gif
Go to the top of the page
 
+Quote Post
SilverFox
post May 9 2007, 04:49 PM
Post #10


Premium Member
Group Icon

Group: Members
Posts: 206
Joined: 26-February 07
From: Texas
Member No.: 20,598



I personally don't use <p> either and I'll see if I left out the center...I know people like to use div but its not overly important to validating XHTML 1.0.
Go to the top of the page
 
+Quote Post

2 Pages V   1 2 >
Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. Three Html/ Css/ Javascript Tutorials(6)
  2. Creating Tooltips(7)
  3. Starting Your Website With Html(7)
  4. Html Meta Tags Tutorial(21)
  5. {} Html'ing & Basic Codes {}(0)
  6. {} Changing Font Color / Size {}(14)
  7. Integrating Html And Css(9)
  8. A Tutorial For Html Color Codes(7)
  9. 4 Html Based Website Tips(4)


 



- Lo-Fi Version Time is now: 8th September 2008 - 05:27 AM