HTML Help?

Chalupa · Aug 13, 2008

Today I voluntered to make a website for a friend, mainly to improve my HTML skills. The first thing I wanted to do was make a Navigation thing on the side., so I went ahead and started making it. I ran into a problem though.

Instead of lining up like this(only it uses pictures):
Home
About KATL
The Team

It does this:

Home
About KATL

The Team

Here's my code:

Code:

<html>
<Head>
<title>
Kiki and the Light offical website
</title>
<Body>
<BR>
<BR>

<Left>
<a href=""><img src="Home.bmp" border="0"
</Leftt>

<Left>
<a href=""><img src="About.bmp" border="0"
</Left>

<Right>
<a href=""><img src="The Team.bmp" border="0"
</right>

Thanks for the help...

Tdata · Aug 13, 2008

Code:

<html>
<Head>
<title>
Kiki and the Light official website
</title>
<Body>
<br />
<br />
<a href=""><img src="Home.bmp" border="0"></a><br />
<a href=""><img src="About.bmp" border="0"></a><br />
<a href=""><img src="The Team.bmp" border="0"></a><br />

You had many spelling errors, and you forgot the

Code:

></a>

after

Code:

border="0"

. I have no clue as to why you were using <left><right> so I can't help much there...

___ · Aug 13, 2008

First off, you need to close out your <head> tag with a </head>, same with body and then finally html (and really with all tags).
Second, left and right aren't tags, I'm not even where you were going with that. What you want to do is wrap each area in a div, give it a class, and use a css rule to float your navigation area left and shrink it down to size. It's also good practice to put your navigation links in a list. That would look like:

Code:

<html>
<head>
<title>
Kiki and the Light offical website
</title>
<style type="text/css" rel="stylesheet">
#nav {
width:20%;
float:left;
}

#nav ul {
list-style:none;
}

/* remove borders from linked images */
a img {
border:none;
}

</style>
</head>

<body>
<div class="left">
<ul>
<li><a href=""><img src="Home.bmp" alt="home"/></a>

<li><a href=""><img src="About.bmp" alt="about"/></a>

<li><a href=""><img src="The Team.bmp" alt="the team"/></a>

</ul>
</div>

<div class="content">
Content here...
</div>

</body>
</html>

You also left your anchor (link) tags unclosed and your image tags didn't even have a closing bracket. In proper xhtml, they should be closed out with "/>"; that goes for all tags that don't need an associated closing tag. All tags should be closed whether you're writing html or xhtml.

Last but not least, never never never use BMPs for online images. They don't use any form of compression, so they are gigantic and slow your page way down. Keep your working copies in BMP or a similar uncompressed format if you like, but never display them in that form on the web. Save your images in jpg format if they're photographs or similarly high detail, or use PNG for lossless compression at the cost of size. For simple images like pixel art you can use GIF or PNG safely.

Chalupa · Aug 13, 2008

Mr. N":1zwne8k1 said:
First off, you need to close out your <head> tag with a </head>, same with body and then finally html (and really with all tags).
Second, left and right aren't tags, I'm not even where you were going with that. What you want to do is wrap each area in a div, give it a class, and use a css rule to float your navigation area left and shrink it down to size. It's also good practice to put your navigation links in a list. That would look like:

Code:

<html> <head> <title> Kiki and the Light offical website </title> <style type="text/css" rel="stylesheet"> #nav { width:20%; float:left; } #nav ul { list-style:none; } /* remove borders from linked images */ a img { border:none; } </style> </head> <body> <div class="left"> <ul> <li><a href=""><img src="Home.bmp" alt="home"/></a> <li><a href=""><img src="About.bmp" alt="about"/></a> <li><a href=""><img src="The Team.bmp" alt="the team"/></a> </ul> </div> <div class="content"> Content here... </div> </body> </html>

You also left your anchor (link) tags unclosed and your image tags didn't even have a closing bracket. In proper xhtml, they should be closed out with "/>"; that goes for all tags that don't need an associated closing tag. All tags should be closed whether you're writing html or xhtml.

Last but not least, never never never use BMPs for online images. They don't use any form of compression, so they are gigantic and slow your page way down. Keep your working copies in BMP or a similar uncompressed format if you like, but never display them in that form on the web. Save your images in jpg format if they're photographs or similarly high detail, or use PNG for lossless compression at the cost of size. For simple images like pixel art you can use GIF or PNG safely.

Thank you! I'm obviously new to the whole HTML thing...

___ · Aug 13, 2008

Everyone has to start somewhere, just keep at it and remember, w3schools is your friend.

gamingfan1989 · Aug 15, 2008

Do <left> and <right> even exist? Or did they ever?

I always used <p align=>.

___ · Aug 15, 2008

Nope, they don't exist. The align attribute is considered bad form as well, it's best to use CSS float declarations.

Envision, Create, Share

HTML Help?

Chalupa

Tdata

___

Chalupa

___

gamingfan1989

___

Share this page

Thank you for viewing

Discord

RPG Maker

Content