Neatness


#1

This may be a dumb question but here goes. How do you get your code to look all nice and neat? I hand code my html in notepad and when I do a view source it looks pathetic compaired to the sites that have their code so neatly arranged, spaced out and everything placed just so-so. (especially the tables)

Also, does the neatness of your html affect how fast you page loads?


#2

Um, just insert tabs (or two spaces, depending on what you’re comfortable with) when indicating nesting of significant tags:

lalalala I'm a paragraph!

link or something like that

The text editors I normally use have a setting that lets you adjust how big the tabs look, since I have mine to look like two spaces.

This does increase the size of your HTML document, but only by a relatively small amount that is usually negligible. The main advantage is readability, since it’s much MUCH easier to figure out the code and how it works, especially if I don’t update my site for a while and I go back to it and realize that I forgot how the code look, so seeing the structure and how its organized will making it a lot easier.

Alex
http://www.gerbilbox.com/


#3

"How do you get your code to look all nice and neat?"
Usually I use a program that has auto-indent. On linux I use a version of gnome edit(not for sure which one), you have to turn it on in the settings. On Windows I did use 1stPage 2000, which is free, but now I bought HomeSite, which is not free. Both of their links are below.

"…does the neatness of your html affect…"
Not that I have noticed or read, if it does then please enlighten me. I could understand how the browser could more easily follow the coding when it’s on it’s own line compared to bunched up, but I think now-a-days most browser coding just runs a “if-in-string-then-do-this-until” routine, or somewhere around there.

Link: 1stPage 2000
Link: HomeSite


#4

What I generally do is indent tags contained in other tags (use tabs instead of spaces as it keeps the file size down). Just like gerbil showed you, ie.

Test

This improves readability a LOT.

Also, you may want to consider ditching Notepad. An optimal text editor for web stuff, in my opinion:

  • can be set not to auto-wrap.
  • can number each line onscreen.
  • automatically colors the syntax and content of your HTML.
  • has and HTML-savvy spellcheck.
  • has a nice HTML reference built in (for rarely used tags).
  • has ftp upload capabilities built in.

I personally use BBEdit running on Mac OS X - it’s probably the best text editor I’ve ever used. But on Windows, I’ve heard that Allaire HomeSite is pretty good as long as you stay out of its graphical editor.

  • Jeff @ DreamHost
  • DH Discussion Forum Admin

#5

BBEdit on Mac ROCKS!

However, I personally recommend EditPlus for Windows. HomeSite used to be very good before Allaire bought it :frowning:

Alex
http://www.gerbilbox.com/


#6

Yes!

HomeSite is good, very good, as long as you move away from the WYSISYG editor, its not good. It completely messes up my code to I turn it off.

I am in the process of adding a Mac OS box to my collective of computer boxes, :wink: , and can’t wait to start using it!


#7

Yes, HomeSite was better befor Allaire bought it but they are fixing their mistakes and improving constantly. IMHO. :slight_smile:


#8

I would suggest HTML Tidy

http://www.w3.org/People/Raggett/tidy/

Not only does it make your html nice and neat, it
also makes suggestions about html/css usage in
accordance with w3 recommendations. There are
versions for nix and windows.

-Rick


#9

Thanks for all the great advise everyone. I D/L’ed 1st Page2000 night before last and played around with it for a bit. I will check out Edit Plus and HTML Tidy today and see which of the three I like best.

I am not a professional at HTML by any means but I take pride just a ‘wee’ bit that I can actually hand code a page in Notepad and make it look half way decient even if the view source looks awful…LOL

I guess I will post my lastest site so that you can take a peek if you are interested. Nothing fancy, my first shot at Swish, and someone told me that the rollovers look awful in Netscape but I am working on improving it. Don’t blast me too hard. K?

http://www.friendshipfd.org

disaster-master


#10

I am in the process of adding a Mac OS box to my collective of computer boxes, and can’t wait to start using it!

Cool - welcome aboard! If you need any advice on what to get, ask me in the Offtopic Discussion forum and I’ll try to help (a few years back before working at DreamHost, I worked as a Mac support tech at a research laboratory).

I’m guessing that with Mac OS X - given your Linux experience - the Mac is starting to look a lot more attractive. :>

  • Jeff @ DreamHost
  • DH Discussion Forum Admin

#11

Also, does the neatness of your html affect how fast you page loads?

Nope. Someone mentioned that the browser might parse the HTML faster, but this is untrue. Whitespace is generally stripped out as one of the first steps in parsing HTML (or any code). Since HTML takes any amount of line feed, tab, and space as one, it makes absolutely no difference. As for download times, unless your pages are significantly affected by your extra spaces/tabs, it will be negligable. Plus, text is highly compressible, especially repeated characters.

I have a related, somewhat annoying problem. I have a bunch of files that ended up with basically just one very long line.

Make sure you upload text files in ASCII mode (or “Text” mode, depending on your FTP client). Windows, Mac, and Unix systems all have a different character (or characters) to indicate the end of a line. ASCII mode makes the appropriate conversions. Never trust “automatic” mode unless you can edit the list of text file extentions.

  • Jm4n

#12

A lot of the people here at DreamHost use UltraEdit32 (Windows).

One thing about UltraEdit that I really like is how it colors certain elements of HTML so that you can quickly find whatever it is you’re trying to locate.

UltraEdit also allows you to group several files together into one ‘project’ file that keeps track of everything.

You can even configure it to save files directly to the server w/FTP, thereby skipping the step of launching a separate FTP client or SSH-ing in to modify your files directly on the server.

Check it out here:
UltraEdit

I use it every day and I think it’s super handy! I’d recommend it.