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.
  • 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 The Helper:
    Happy Thursday!
     +1
  • Varine Varine:
    Crazy how much 3d printing has come in the last few years. Sad that it's not as easily modifiable though
  • Varine Varine:
    I bought an Ender 3 during the pandemic and tinkered with it all the time. Just bought a Sovol, not as easy. I'm trying to make it use a different nozzle because I have a fuck ton of Volcanos, and they use what is basically a modified volcano that is just a smidge longer, and almost every part on this thing needs to be redone to make it work
  • Varine Varine:
    Luckily I have a 3d printer for that, I guess. But it's ridiculous. The regular volcanos are 21mm, these Sovol versions are about 23.5mm
  • Varine Varine:
    So, 2.5mm longer. But the thing that measures the bed is about 1.5mm above the nozzle, so if I swap it with a volcano then I'm 1mm behind it. So cool, new bracket to swap that, but THEN the fan shroud to direct air at the part is ALSO going to be .5mm to low, and so I need to redo that, but by doing that it is a little bit off where it should be blowing and it's throwing it at the heating block instead of the part, and fuck man
  • Varine Varine:
    I didn't realize they designed this entire thing to NOT be modded. I would have just got a fucking Bambu if I knew that, the whole point was I could fuck with this. And no one else makes shit for Sovol so I have to go through them, and they have... interesting pricing models. So I have a new extruder altogether that I'm taking apart and going to just design a whole new one to use my nozzles. Dumb design.
  • Varine Varine:
    Can't just buy a new heatblock, you need to get a whole hotend - so block, heater cartridge, thermistor, heatbreak, and nozzle. And they put this fucking paste in there so I can't take the thermistor or cartridge out with any ease, that's 30 dollars. Or you can get the whole extrudor with the direct driver AND that heatblock for like 50, but you still can't get any of it to come apart
  • Varine Varine:
    Partsbuilt has individual parts I found but they're expensive. I think I can get bits swapped around and make this work with generic shit though
  • Ghan Ghan:
    Heard Houston got hit pretty bad by storms last night. Hope all is well with TH.
  • The Helper The Helper:
    Power back on finally - all is good here no damage
     +2
  • V-SNES V-SNES:
    Happy Friday!
     +1
  • The Helper The Helper:
    New recipe is another summer dessert Berry and Peach Cheesecake - https://www.thehelper.net/threads/recipe-berry-and-peach-cheesecake.194169/

      The Helper Discord

      Members online

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

      Share this page

      Affiliates

      Hive Workshop NUON Dome World Editor Tutorials

      Network Sponsors

      Apex Steel Pipe - Buys and sells Steel Pipe.
      Top