Tips for a good HTML website?

Knights

Knights

You can change this now in User CP.
Reaction score
71
Yeah so I'm working on a Call of Duty 1.3 League website (Because there aren't any) and it's pretty ugly atm...so any tips?

http://CoDLeague.ServeGame.com

I have Photoshop too so it could just be that I suck at it...=P

But yeah, the website is a table, and I've tried it without borders but it looks ugly, and I don't know if there is a way with HTML to change the border on their tables, to some custom images or something, but is there any way to make any part of the website look better?

Heres the code I'm using for the homepage:
(It's probably terrible..my first HTML website)

HTML: 
<html>
<title>Call of Duty 1.3 League</title>
<body>
<body background="imgs/bg.jpg">
<center>
<table border="1">
<tr>
<td colspan="4"><img border=0 alt="CodLeague" title="CodLeague" src="imgs/CodLeagueBanner.jpg"/><br></td>
</tr>
<tr>
<td><a href="http://codleague.servegame.com"><img border=0 alt="Home" title="Home" src="imgs/CodLeagueHome.jpg"/></a></td>
<td><a href="http://codleague.servegame.com/roster"><img border=0 alt="Roster" title="Roster" src="imgs/CodLeagueRoster.jpg"/></a></td>
<td><a href="http://z15.invisionfree.com/CoDLeague/index.php"><img border=0 alt="Forums" title="Forums" src="imgs/CodLeagueForums.jpg"/></a></td>
<td><a href="http://codleague.servegame.com/rules"><img border=0 alt="Rules" title="Rules" src="imgs/CodLeagueRules.jpg"/></a></td>
</tr>
<tr rowspan="6">
<td colspan="4" bgcolor="black"><center><font size="5"><font color="white">NEWS:</font></font></center>
<br><br>
<font color="white"><align="left">
<i>Posted January 03/08</i><br><br>
I moved the forums to invisionfree because they are more flexible and I like them better. Also the old ones were very buggy.<br><br>

I hope everyone takes a few seconds to sign their clan up for the roster, so we can get the scrimmages started! 
<br><br>
Thanks,<br>
Mash <br><br><br>
<i>Posted January 02/08</i><br><br>
CodLeague Website created on January 02/08. Please register your clan in the appropriate forum area, and it will be added to the roster. 
<br><br>
The idea of this website is basically to keep a record of all the realscrims that go on, and create a ladder, so we can actually have something to scrim for, other than a <br>stupid old #-# "record".  So, under the Roster area of the site, there will be a list of all the clans and their members, and also there will be a ladder with all the clans.
<br><br>
I hope this idea hits off, but if it doesn't it was still worth trying. =)
<br><br>
Thanks,<br>
Mash</font></align>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<i><font color="white"><center>Thank you for visiting.</center></i></font>

</td>
</tr>
</table> 


</center>
</body>
</html>
 
monoVertex

monoVertex

I'm back!
Reaction score
460
A html document is composed of some basic things:

HTML: 
<html>

<head>
<!--Here goes the <title> tag ;)-->

</head>

<body>

</body>
</html>

You're missing the <head> tag.

Plus, if you want to style your site, learn CSS.
 
enouwee

enouwee

Non ex transverso sed deorsum
Reaction score
240
Knights said:
it's pretty ugly atm...
Click to expand...
I can't disagree. :p

so any tips?

I have Photoshop too so it could just be that I suck at it...=P
Click to expand...
Using Photoshop doesn't mean you'll automatically get a great website. What about hiring someone else to do the job? :rolleyes:


Where should I start?
  • That page is 500KB large. It will take 2 minutes for a dialup user to load all the images.
  • Only one <body> tag per page please, see the W3C's validation results for other "features".
  • Consider switching to something more recent than quirks mode, <table>, <font> and <center>. It's really worth it.
  • But there's some good points to ... :confused: ... it's got a high contrast.

Some references, especially table-less layout (see other threads from this forum):
 
ReVolver

ReVolver

Mega Super Ultra Cool Member
Reaction score
609
http://www.alistapart.com/articles/usingxml
you can also learn XML & XSL if you want to store a lot of information like
HTML: 
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="clandesign.xsl" ?>
<clan>
<information>Clan Description</information>
	<member>
		<image>Commander</image>
		<name>Clan Member 1</name>
		<status>Leutanant</status>
		<des>Some info on your clan's member</des>
                <email>[email protected]</email>
	</member>
	<member>
		<image>Captain</image>
		<name>Clan Leader</name>
		<status>Leader</status>
		<des>Some info on your clan's member</des>
                <email>[email protected]</email>
	</member>
</clan>

edit: http://www.oswd.com/ doesn't seem to work enouwee.
 
TheDamien

TheDamien

_
Reaction score
333
I've spotted a few problems. I will signify them as P and their solutions as S. If you have any questions, I can answer to the best of my abilities.

P: Table used for page layout. Big no-no.
S: Use div elements and css. Only use tables to store tabular data (like in the roster page).

P: Ugly tables.
S: Use CSS to style your tables. Try to make them look as different to the default HTML tables as possible.

P: Font tag used to colour text.
S: Span tags and css should be used instead.

P: No <!DOCTYPE>.
S: Add:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
To the top of your page's code. Once you have removed deprecated elements and cleaned up your page with strict html, you should use:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


P: Flush left text in a centered element (this is a small issue).
S: Use justified or centered text or a flush left page layout. This is not necessary if you plan to add a page element (like a second navigation menu) to the left hand side of the page.

P: Lack of page harmony.
S: Draw up a consistent colour scheme (use colours from the background image) and use it throughout your page. This (multi-page) tutorial should teach you a bit about colour.

P: Dead space.
S: Make the content container in the middle thinner, do not add unneeded vertical space to the page.

P: Superfluous images.
S: Replace the navigation menu images with text and a background. Do not make duplicate images for each page.

P: Kitsch title bar.
S: Completely replace the title bar, aim for a distinctive style and use a colour scheme consistent with the entire site.
 
S

Storm

Guest
Good habits: <3
<br> ---> <br />
<img src="ilikeshoes.gif"> ---> <img scr="ilikeshoes.gif" />
<hr> ---> <hr />

All the 1 tagged tags.
Also, make sure your attributes are lower case and in quotation.
<table border=0 CElLsPaCInG=0> :banghead::banghead::banghead:

<table border="0" cellspacing="0"> :cool::cool::cool:
 
enouwee

enouwee

Non ex transverso sed deorsum
Reaction score
240
Storm said:
Good habits: <3
<br> ---> <br />
<img src="ilikeshoes.gif"> ---> <img scr="ilikeshoes.gif" />
<hr> ---> <hr />
Click to expand...

Properly closed short tags are mandatory for XHTML, but should not be used in HTML4. Given the page doesn't contain a DOCTYPE, browsers default to HTML 4.01 quirks mode.
 
You must log in or register to reply here.
General chit-chat
Help Users
  • No one is chatting at the moment.

      The Helper Discord

      Staff online

      Members online

      Online now:
      195 (members: 3, guests: 192)

      Share this page

      Affiliates

      Hive Workshop NUON Dome World Editor Tutorials

      Network Sponsors

      Apex Steel Pipe - Buys and sells Steel Pipe.
      Top