Welcome Guest ( Log In | Register )



 
Reply to this topicStart new topic
> Indentation In Html
Mordent
post Aug 17 2008, 12:10 PM
Post #1


Premium Member
Group Icon

Group: [HOSTED]
Posts: 254
Joined: 30-June 07
From: UK
Member No.: 23,045
myCENTs:19.79



Whenever I start a new project one of the first things I do is put in a base index.php page. Yes, it's a .php file, but I won't be looking at the PHP just yet.

Normally, it looks a little something like this:

CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Title</title>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
        <link rel="stylesheet" type="text/css" href="style/reset.css" />
        <link rel="stylesheet" type="text/css" href="style/base.css" />
        <link rel="shortcut icon" href="images/favicon.ico" />
    </head>
    <body>
    </body>
</html>

I've already got a few basics set out that I tend to stick to. For instance, so far each of my projects has been XHTML Strict, which is why it's always up there. Similarly, I use the same character set, and (at least initially) have two CSS files called reset.css and base.css stored in a subdirectory called style.

This all looks lovely and so on, but then I start to add some PHP in as time goes on, and in order to keep the indentation looking right I have to put weird number of tabs in to my echos etc. Then I get a stage where I want to call the same function in different sheets, each one needing a different number of tabs to make it so that when you view the source it's easy to read.

So, I've been thinking, what if I didn't indent? That'd make the above page look like this:

CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style/reset.css" />
<link rel="stylesheet" type="text/css" href="style/base.css" />
<link rel="shortcut icon" href="images/favicon.ico" />
</head>
<body>
</body>
</html>

Is that so hard to read? In a decent HTML viewer (still working on getting Firefox to open up any View Source requests in Notepad++, if you know how to do let me know) it's all correctly coloured, has groupings around the open and close tags, etc.

This makes a clear distinction between HTML (i.e. no indentation) and PHP (where I indent my code as normal). That makes creating the site a lot easier, surely, as anything that's indented is code, anything that isn't is HTML. Normally I'm a big advocate of indentation, but when two different things are running parallel in one document having two different levels of indentation just doesn't look easy to read to me and never has. Any thoughts on how you'd do this?

Just as an example document, how would you indent the following PHP file?

CODE
<?php
$foo = some_function();
$bar = some_other_function('foo');
if ($foo > $bar)
{
another_function();
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style/reset.css" />
<link rel="stylesheet" type="text/css" href="style/base.css" />
<link rel="shortcut icon" href="images/favicon.ico" />
</head>
<body>
<h1>Heading 1</h1>
<div>
<?php
if ($foobar == 'blah')
{
echo '<p>BLAH!</p>
';
}
?>
</div>
</body>
</html>

I would post how I'd normally do it, but I'd like to see what the general consensus on indents is while I think about it a little.
Go to the top of the page
 
+Quote Post
faulty.lee
post Aug 17 2008, 01:01 PM
Post #2


Super Member
Group Icon

Group: [HOSTED]
Posts: 500
Joined: 5-November 06
Member No.: 17,016
myCENTs:NEGATIVE[-20.12]



Generally as programmer would want to indent the code, to ease coding, reading and later one debugging. Indentation on HTML would not hurt the resulting display as whitespace are ignore by the browser. e.g.
<p> 1space<p>
<p> 2spaces<p>
would look the same. In fact, to actually place [spaces], you need to specified &nbps;
Further more, indentation normally happen outside of those HTML tags. If you happen have long text and would like to split then indent them, it's ok too as only the 1 whitespace after your last word of the line is recognized, the rest of those tabs and newline are ignored too.

These applies too to php code. There's really zero worries on php code, as it's parsed on the server side, having tons of whitespace will not effect anything other than hard drive's throughput (it's not like you're writing megabytes of codes, a decent image is anytime bigger that your code), and well, that's of a much much greater magnitudes compare to your internet bandwidth.

After looking at your sample, there's one thing i would like to highlight. If you're really going into writing a professional website, you should consider using template engine, such as smarty, or write up your own simple one. I did that most of the time, just having some code to load an html page and replace all the {VAR} tags i implanted in with what's it's suppose to be. Of cause smarty or other template engine can give you more functionality, if you need them.

These will ease your debugging and designing stage later on. For debugging, mixing HTML and php code can really mess up your coding, especially having to keep track of those tags. And after sometime, you might start to really mix them up. Just take you sample code as an example.
CODE
<?php
if ($foobar == 'blah')
{
echo '<p>BLAH!</p>
';
}
?>

Instead you could also this
CODE
<?php
if ($foobar == 'blah')
{
?>
<p>BLAH!</p>
<?php
}
?>


It might seems all that convenient, but you'll really feel the pain when you page start to grow. About designing, with both split up, you could pass the HTML to a designer and have it touch up without having to worry that he will disrupt your important php codes. If you're designing yourself, this could also ease your job, especially if you're using those WYSIWYG editor. Those editor don't really work well with mixed html and php.

So, thrust me, code and artwork(HTML) should be done separately.
Go to the top of the page
 
+Quote Post
Mordent
post Aug 17 2008, 01:17 PM
Post #3


Premium Member
Group Icon

Group: [HOSTED]
Posts: 254
Joined: 30-June 07
From: UK
Member No.: 23,045
myCENTs:19.79



I'd always felt the same way about keeping HTML and PHP separate, but never really looked in to ways of doing it to such a full extent. I'll have a look at template engines (although knowing me I'll insist on writing my own wink.gif), and - just for reference - I never use WYSIWYG editors. Everything I do I create from scratch, which means I know what's going on to a decent extent.

I realise whitespace is ignored by pretty much everything when it comes to web development, which is always useful. I'll admit to not being aware that you could get things to display in the way you showed above, so that's something new I've learned.

Right, time to go look at these here template-engine-thingamajigs. smile.gif
Go to the top of the page
 
+Quote Post
faulty.lee
post Aug 17 2008, 05:49 PM
Post #4


Super Member
Group Icon

Group: [HOSTED]
Posts: 500
Joined: 5-November 06
Member No.: 17,016
myCENTs:NEGATIVE[-20.12]



QUOTE(Mordent @ Aug 17 2008, 09:17 PM) *
although knowing me I'll insist on writing my own wink.gif)


I'm like that also. But now starting understand the meaning or "re-inventing the wheel".

Anyway, I forgot to add that you can actually get tools to compact your html to save download time for your viewer. Just search around in google. I would only do that after completion, as it makes debugging much much harder
Go to the top of the page
 
+Quote Post
Mordent
post Aug 17 2008, 06:44 PM
Post #5


Premium Member
Group Icon

Group: [HOSTED]
Posts: 254
Joined: 30-June 07
From: UK
Member No.: 23,045
myCENTs:19.79



QUOTE(faulty.lee @ Aug 17 2008, 06:49 PM) *
I'm like that also. But now starting understand the meaning or "re-inventing the wheel".

Anyway, I forgot to add that you can actually get tools to compact your html to save download time for your viewer. Just search around in google. I would only do that after completion, as it makes debugging much much harder

The wheel's not compliant to modern standards, it needs to be stripped back down to basics and rebuilt to your exacting needs. wink.gif

I'm not all that fussed about compacting HTML, but that's just me. My site's not currently meant to be...well, at all big. Anyway, after much googling and the like I found near-perfection in a simple little idea here. Taking his ideas apart and putting them back together again so I understood exactly what was going on was really useful and got me brushing up on my object-oriented code again. Sure, I changed it a fair bit, but that basic framework let me do pretty much exactly what I wanted and separating my function from my display. It's not as nifty as Smarty, and you do give any template designers free reign to do what they want with PHP, but as both roles are taken up by me at the moment I'm not too worried about that. wink.gif
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. Basic Tips and Tricks in HTML(15)
  2. Embedding XML into HTML(2)
  3. Force Object To Load Last(2)
  4. Free Shoutbox? HTML, Flash or PHP Code(24)
  5. Where Can I Learn Advanced Html ?(11)
  6. Where Can I Learn Html Codes ?(8)
  7. Here Are Some Html Tutorial Sites(1)
  8. Get Input From Html/txt File?(2)
  9. How Can You Spice Up Your Basic HTML Site ? Beginner Needs Help(9)
  10. HTML Editor(23)
  11. Need Help With The HTML HR Tag(5)
  12. HTML: Seems Like A Simple Problem, But I'm Baffled!(4)
  13. Where To Find A WML To HTML Converter ?(2)
  14. A First Peep Into Html(5)
  15. Home Videos(4)
  1. Bulletproof HTML: 37 Steps To Perfect Markup(4)
  2. Quick Tips On Html And Css(11)
  3. Firefox Inventing Its Own Html?(9)
  4. Scripts And Html(13)
  5. Stretching My Site Vertically(6)
  6. Html Stats(3)
  7. About Html(15)
  8. Html Table Issue.(18)
  9. Html Emails How?(12)
  10. Sitepoint's Css And Html Reference Sites(2)
  11. Yaml - (x)html/css Framework(2)
  12. Style P And H? Html Tags(2)
  13. Good Books For Html And Css Beginners(1)


 



- Lo-Fi Version Time is now: 21st November 2008 - 12:12 AM