Jump to content



Welcome to AstaHost - Dear Guest , Please Register here to get Your own website. - Ask a Question / Express Opinion / Reply w/o Sign-Up!

Toggle shoutbox Shoutbox Open the Shoutbox in a popup

@  agyat : (23 May 2013 - 01:23 AM) Wow! Mr. Sb Back Home.
@  OpaQue : (23 May 2013 - 12:44 AM) Ting
@  OpaQue : (24 April 2013 - 02:44 PM) I guess, Time to run Mycent script.
@  OpaQue : (24 April 2013 - 02:43 PM) wow.. not much spam. except habatt posting lot of links.. :P
@  yordan : (23 April 2013 - 01:04 PM) You're welcome, agyat. Nice to have been helpful. Second lesson: try full words, "you" instead of "EW".
@  agyat : (23 April 2013 - 05:03 AM) @YORDAN: tHANK EW FOR YOUR FIRST LESSON.   :D
@  yordan : (22 April 2013 - 09:43 PM) @agyat : "why don't you help me", or "please help me", or "please teach us"
@  yordan : (22 April 2013 - 09:42 PM) welcome back, velma
@  velma : (22 April 2013 - 07:51 AM) **yawns** Good to be back, wonder what is going on here :)
@  agyat : (22 April 2013 - 03:50 AM) Oh! so, why don't help me learn english..
@  yordan : (21 April 2013 - 08:38 PM) The goal mentioned by shiu : "learning english, learning computer"
@  agyat : (21 April 2013 - 06:31 PM) WHAT GOAL?
@  yordan : (20 April 2013 - 10:39 AM) yes, that's our goal. simultaneouly learning English and teaching/learning computer using.
@  shiyu : (20 April 2013 - 07:30 AM) learning english,learning computer
@  yordan : (19 April 2013 - 01:11 PM) Oh, I see, it's just a trick in order to force people looking at your texte. Somehow smart, maybe.
@  agyat : (19 April 2013 - 02:54 AM) And of course I know it is not SEO friendly.
@  agyat : (19 April 2013 - 02:52 AM) There may be two possible answers for that ....


1) Shout was posted using mobile keypad.

2) To force people read content carefully and/or with more concentration.
@  agyat : (19 April 2013 - 02:49 AM) There may be two possible answers for that ....
@  yordan : (18 April 2013 - 09:35 PM) however, why this mixing of capital letters in the middle of your text?
@  agyat : (18 April 2013 - 11:10 AM) false feelings.

Photo
* * * * - 1 votes

Coding Html Properly In The New Age

Started by SilverFox, May 08 2007 01:36 PM

15 replies to this topic

#1 SilverFox

SilverFox

    Premium Member

  • Members
  • 206 posts
  • Gender:Male
  • Location:Texas

Posted 08 May 2007 - 01:36 PM

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).

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

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

Above: Bad Code
Below: Good 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.

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

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.

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

Above: Bad Code
Below: Good 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).

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

Above: Bad Code
Below: Good Code

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

Always quote attributes.

DocType

Most of us use 

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

I recommend using:

<!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.

Edited by SilverFox, 09 May 2007 - 04:50 PM.

#2 saint-michael

saint-michael

    SM- the Man -The Myth - The Legend Himself

  • Members
  • 477 posts
  • Gender:Male
  • Location:Drinking da rootbeers
  • Interests:look up and then look for a corner in a round room
  • myCENTs:61.67

Posted 08 May 2007 - 02:03 PM

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.

#3 Chesso

Chesso

    Teh Coder

  • Members
  • 1,053 posts
  • Gender:Male
  • Location:Australia
  • Interests:Software Programming, Web Programming, Skateboarding, Gaming and My Fiance!
  • myCENTs:89.25

Posted 08 May 2007 - 02:49 PM

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 B).


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.

#4 SilverFox

SilverFox

    Premium Member

  • Members
  • 206 posts
  • Gender:Male
  • Location:Texas

Posted 08 May 2007 - 04:28 PM

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 B) But I know that some people who come to asta surprisingly have almost no coding background, look at me.

@Chesso: I see.

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 :)

Edited by SilverFox, 08 May 2007 - 04:41 PM.

#5 pyost

pyost

    Way Out Of Control - You need a life :)

  • Members
  • 1,090 posts
  • Gender:Male
  • Location:Belgrade, Serbia
  • myCENTs:67.69

Posted 08 May 2007 - 07:19 PM

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 B)

#6 saint-michael

saint-michael

    SM- the Man -The Myth - The Legend Himself

  • Members
  • 477 posts
  • Gender:Male
  • Location:Drinking da rootbeers
  • Interests:look up and then look for a corner in a round room
  • myCENTs:61.67

Posted 08 May 2007 - 10:54 PM

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 :). I even check google main page and they have no doc type whatsoever and filled with many errors :). 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 B).

#7 Chesso

Chesso

    Teh Coder

  • Members
  • 1,053 posts
  • Gender:Male
  • Location:Australia
  • Interests:Software Programming, Web Programming, Skateboarding, Gaming and My Fiance!
  • myCENTs:89.25

Posted 09 May 2007 - 12:01 AM

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.

#8 demolaynyc

demolaynyc

    Premium Member

  • Members
  • 330 posts

Posted 09 May 2007 - 02:47 PM

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).

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

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

Above: Bad Code
Below: Good 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.

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

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.

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

Above: Bad Code
Below: Good 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).

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

Above: Bad Code
Below: Good Code

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

Always quote attributes.

DocType

Most of us use 

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

I recommend using:

<!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.

#9 Quatrux

Quatrux

    the Q

  • [HOSTED]
  • 1,669 posts
  • Gender:Male
  • Location:Lithuania, Vilnius
  • Interests:PHP, MySQL, Oracle, PL/SQL, HTML, CSS, Javascript, jQuery, C# Computers, Alternative OS, Amiga, MorphOS, Beer, Friends, Linux, KDE..
  • myCENTs:30.76

Posted 09 May 2007 - 04:21 PM

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 :) but with some (some, I saw one?) stone age elements. B) To say something funny, p tag isn't popular anymore or tables/tr/td/th :) 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 /> :(

#10 SilverFox

SilverFox

    Premium Member

  • Members
  • 206 posts
  • Gender:Male
  • Location:Texas

Posted 09 May 2007 - 04:49 PM

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.

#11 develCuy

develCuy

    Member - Active Contributor

  • Members
  • 88 posts
  • Gender:Male
  • Location:Cusco - Peru
  • Interests:God, Music(anything that isn't noise), Development, Web, Linux

Posted 09 May 2007 - 08:15 PM

Good tutorial!!!

Is a well done reference to keep well maintained HTML code. In FCKEditor I noticed that when you look at the source code(clicking the button: source), the code is perfectly indented, well-formed and normalized. The same with Nvu(HTML editor based on Firefox) that is wonderful but only for HTML. When You edit the code and go back to preview mode, the engine reconstruct the code, generating a validated version to be rendered for the engine.
In my experience I learned to use only the needed tags. Bad code is rendered slower and isn't compatible with common browsers: Internet Explorer(IE), Firefox(FF), Safari. Some sites are using different versions of the same view for every browser. I prefer to have one unique code, compatible, tested and stable.

Talking about the use of DIV instead TABLE and P. I hate to see <DIV></DIV> instead <br /> or <BR>. Many people doesn't care about the code, they only use Dreamweaver or similar, then go to IE... if looks "OK" they think that the work is finished. There is another coders that did not used CSS rules good, then DIVs are a nightmare, because sometimes internal DIVs incorrectly inherit the font-style, margin and alignment. I hope that CSS3 improve drastically the way that HTML is coded.

In that while we still have to fight with clients that are still using IE 5.5 or 4.0, Netscape, Old Firefox 1.0.3 clones, etc. I know that some people uses XML to HTML converters, the problem is that this practice requires many CPU load, they have to use caching... Is terrible to have all this complications but is the way this world runs.

Have a good coding.

Blessings!

#12 kgd2006

kgd2006

    Premium Member

  • [HOSTED]
  • 318 posts

Posted 11 May 2007 - 11:13 AM

Thats pretty good info for the rookie web developers out there. You covered the basis on xhtml and efficient coding techniques. I sometimes find myself messing up my nests of tags haha, But I eventually clean it up in the end. XHTML is definitely the future and will replace html itself soon. Now with the transfer of the new technology which is ajax, more people will try to learn xml which will make them eventually use xhtml style syntax. I just wish I could make more projects for myself so that I could perfect my skills.

#13 Chesso

Chesso

    Teh Coder

  • Members
  • 1,053 posts
  • Gender:Male
  • Location:Australia
  • Interests:Software Programming, Web Programming, Skateboarding, Gaming and My Fiance!
  • myCENTs:89.25

Posted 11 May 2007 - 12:10 PM

I just build everything for FireFox and it seems to generate, not good but usable in Internet Explorer 5/6 and presumably above.

I have no idea why anyone would replace <br /> or <br> with a <div> tag unless they are looking for specific control over the spacing between line breaks (unless the br tag can be styled to get the same effect?).

P.S.: Ajax is getting old and well out-dated, majority seem to be going PHP.

#14 mvs.en

mvs.en

    Newbie [ Level 2 ]

  • Members
  • 24 posts
  • Gender:Male
  • Location:Nova Scotia, Canada

Posted 11 May 2007 - 02:59 PM

P.S.: Ajax is getting old and well out-dated, majority seem to be going PHP.


Yeah, I have no personal experience with Ajax... But I am going to change as much as I can over to PHP.
I haven't really coded any website at ALL in like two years now and I'm trying to get back into it.
The last time I did... It was a small crappy website that was pretty much all HTML with a TINY bit of CSS. (I really hate CSS so I avoid using it as often as physically possible... Even if it's more efficient, I don't like how it's set up)

Anyway
As I was saying, just an hour or two ago I was reading up about PHP tutorials and such because I really need to learn more languages/whatever.

I'll soon need to start actually coding my website though, because people are starting to demand it of me and I've been wanting to make a new website for years... My only problem has been that I can never find a theme for it that requires the attention of other people... I think I've found one though...
But I'm starting to get way off topic, I apologize. <___<

#15 SonicHabbo

SonicHabbo

    Newbie [ Level 1 ]

  • Members
  • 4 posts

Posted 12 July 2007 - 09:26 AM

That Really Helped :PThanks It Really Helped

#16 Quatrux

Quatrux

    the Q

  • [HOSTED]
  • 1,669 posts
  • Gender:Male
  • Location:Lithuania, Vilnius
  • Interests:PHP, MySQL, Oracle, PL/SQL, HTML, CSS, Javascript, jQuery, C# Computers, Alternative OS, Amiga, MorphOS, Beer, Friends, Linux, KDE..
  • myCENTs:30.76

Posted 12 July 2007 - 04:59 PM

Is it me, or is it people who talk without any knowledge? AJAX technology isn't getting old and PHP isn't even something similar to AJAX, PHP is a scripting language which syntax is similar to C and it has a lot of features copied from other languages and usually is used for web programming, so if you know PHP with OOP then it is quite easy to learn some other languages.. and AJAX stands for Asynchronous JavaScript and XML, so that means that you can change or do anything what Javascript can do with a page without refreshing all of it in a browser, using XMLHttpRequest() with Javascript, you can connect to a server and send a request and get an answer, I mean send and receive data.. it was created to send XML data, but personally I send plain data, due to it is smaller in bytes and control the data with PHP on the server, but you can use any language or control method you like.

And a guy said that he doesn't like CSS, but likes to use plain HTML, HTML isn't created for changing font colour, font size and tables aren't meant for creating your layout bars, it is a bad habit to not like CSS, due to the site look needs to be different only by changing CSS and leaving the same HTML, even though a lot of people have problems with IE, but you really can make it work on almost all browsers the same (usually) !!!
Back to Websites and Web Designing

Reply to this topic



  


0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

  1. Open Discussion & Free Web Hosting
  2. → Computers & Tech
  3. → How-To's and Tutorials
  4. → Websites and Web Designing
  5. Rules