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

Formerly Smith_S9
Reaction score
1,461
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.
  • WildTurkey WildTurkey:
    is there a stephen green in the house?
     +1
  • The Helper The Helper:
    What is up WildTurkey?
  • The Helper The Helper:
    Looks like Google fixed whatever mistake that made the recipes on the site go crazy and we are no longer trending towards a recipe site lol - I don't care though because it motivated me to spend alot of time on the site improving it and at least now the content people are looking at is not stupid and embarrassing like it was when I first got back into this like 5 years ago.
  • The Helper The Helper:
    Plus - I have a pretty bad ass recipe collection now! That section of the site is 10 thousand times better than it was before
  • The Helper The Helper:
    We now have a web designer at my job. A legit talented professional! I am going to get him to redesign the site theme. It is time.
  • Varine Varine:
    I got one more day of community service and then I'm free from this nonsense! I polished a cop car today for a funeral or something I guess
  • Varine Varine:
    They also were digging threw old shit at the sheriff's office and I tried to get them to give me the old electronic stuff, but they said no. They can't give it to people because they might use it to impersonate a cop or break into their network or some shit? idk but it was a shame to see them take a whole bunch of radios and shit to get shredded and landfilled
  • The Helper The Helper:
    whatever at least you are free
  • The Helper The Helper:
    Here is a cool dessert recipe I found https://www.thehelper.net/threads/recipe-cherry-cheesecake-brownie.194048/
  • The Helper The Helper:
    Found a cool easy Chicken Pot Pie recipe! https://www.thehelper.net/threads/recipe-chicken-pot-pie.194064/
  • Monovertex Monovertex:
    How are you all? :D
     +1
  • Ghan Ghan:
    Howdy
  • Ghan Ghan:
    Still lurking
     +3
  • The Helper The Helper:
    I am great and it is fantastic to see you my friend!
     +1
  • The Helper The Helper:
    Here is a great appetizer recipe Texas style! https://www.thehelper.net/threads/recipe-chicken-stuffed-poblano-peppers.194086/
  • The Helper The Helper:
    If you are new to the site please check out the Recipe and Food Forum https://www.thehelper.net/forums/recipes-and-food.220/
  • Monovertex Monovertex:
    How come you're so into recipes lately? Never saw this much interest in this topic in the old days of TH.net
  • Monovertex Monovertex:
    Hmm, how do I change my signature?
  • tom_mai78101 tom_mai78101:
    Signatures can be edit in your account profile. As for the old stuffs, I'm thinking it's because Blizzard is now under Microsoft, and because of Microsoft Xbox going the way it is, it's dreadful.
  • The Helper The Helper:
    I am not big on the recipes I am just promoting them - I use the site as a practice place promoting stuff
     +2
  • Monovertex Monovertex:
    @tom_mai78101 I must be blind. If I go on my profile I don't see any area to edit the signature; If I go to account details (settings) I don't see any signature area either.
  • The Helper The Helper:
    You can get there if you click the bell icon (alerts) and choose preferences from the bottom, signature will be in the menu on the left there https://www.thehelper.net/account/preferences
  • The Helper The Helper:
    I think I need to split the Sci/Tech news forum into 2 one for Science and one for Tech but I am hating all the moving of posts I would have to do
  • The Helper The Helper:
    New dessert for Summer - https://www.thehelper.net/threads/recipe-lemon-blueberry-layer-cheesecake.194113/
  • The Helper The Helper:
    What is up Old Mountain Shadow?

      The Helper Discord

      Members online

      No members online now.
      Online now:
      307 (members: 0, guests: 307)

      Share this page

      Affiliates

      Hive Workshop NUON Dome World Editor Tutorials

      Network Sponsors

      Apex Steel Pipe - Buys and sells Steel Pipe.
      Top