Source Code; please review my source code and leave feedback on how to improve.

Minimeallolla · December 2, 2010

I'm not really sure where this topic should be, so im just going to put it here.

Is my source code neat or needs a better layout?

Leave feedback on how to make a neat source code.

				<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
				"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-language" content="en">
<meta name="keywords" content="free, simple, search, find, discover, play, engage, share, sharing, entertainment, fun, games">
<meta name="description" content="MySite is currently under construction and is constantly being amended.">
<link rel="favicon.ico" href="http://www.rohan.giacjr.dino-hosting.net/favicon.ico">
<link href='style.css' rel='stylesheet'>
<title> MySite </title>  

<style type="text/css">
 body
 {
 background-color:black;
 background-repeat:no-repeat;
 background-attachment:fixed;
 }

 A:link { COLOR: black; TEXT-DECORATION: none; font-weight: normal }
 A:visited { COLOR: black; TEXT-DECORATION: none; font-weight: normal }
 A:active { COLOR: green; TEXT-DECORATION: none }
 A:hover { COLOR: blue; TEXT-DECORATION: none; font-weight: none }

 a > img {
 border: 0;
 }
</style>

</head>

<div class="header">

	<div class="headertext">

<a href="/index.php">Home</a>
<a href="/loginn.php">Login</a>
<a href="/registerr.php">Register</a>
<a href="/gamess.php">Games</a>
<a href="/aboutuss.php">AboutUs</a>

</div>
		<div class="logo">


<a href="/index.php"><img src="/images/mysite.png" alt ="MySite"></a><br>

	</div>
		</div>
			<div class="main">

text content goes here <br>

			</div>
				<div class="footer">

					<div class="footerleft">

© GiacJr and Rohan 2010

				</div>
						<div class="footerright">

<a href="/contact.php">Contact Us</a>

					</div>
							</div>

</body>
</html>

trq · December 2, 2010

I would start by moving your css into an external file and indenting your code consistantly. You should also be alot more consistant with your capitalization in your css.

Finally, your assigning classes to your divs without ever using them. Most of these classes' could be changed to id's.

Minimeallolla · December 2, 2010

@Thorpe

They are, that is my source code, not my page code.

Which divs should be ids and how will i know in the future which one to pick?

gizmola · December 2, 2010

The basic rule of thumb is that if you are identifying a block, you should use an id. All id's should be unique -- that is, in your page you should not see more than one element that has the same id. In your case, almost all of your divs (header, main, footer, footerright, footerleft) should be ids. Use class definitions to generically style one or more elements.

trq · December 2, 2010

They are, that is my source code, not my page code.

They are refers to what exactly?

Which divs should be ids and how will i know in the future which one to pick?

Id's are for identifying unique elements. You work it out.

Minimeallolla · December 2, 2010

*I would start by moving your css into an external file*

"Give a man a fish and he will eat for a day. Teach a man to fish and he will eat for a lifetime."

Evil Glint · December 2, 2010

I would start by moving your css into an external file and indenting your code consistently. You should also be a lot more consistent with your capitalization in your css.

Finally, your assigning classes to your divs without ever using them. Most of these classes' could be changed to id's.

I agree that it's a good idea to use external css (as it can be referenced by several pages, and all referencing pages will be updated when you update the css), but is there a reason to use ids? Do browsers handle them any differently, or does it just look better?

Minimeallolla · December 3, 2010

erm, as i've stated, that is Not my code. that is straight out of the source code. ( right click - source code. )

My code Does include style.css and php. I just want to make the source code more presentable.

*I would start by moving your css into an external file* - that is done and has always been done.

So I should put eg <div class="main"> and than for all the rest of the div tags <div id=" other div tags are the same as this? ">

trq · December 3, 2010

erm, as i've stated, that is Not my code. that is straight out of the source code. ( right click - source code. )

Right clicking and viewing source does show the actual code. Your css is NOT in an external file.

*I would start by moving your css into an external file* - that is done and has always been done.

Either you are lying or have no idea what you are talking about.

So I should put eg <div class="main"> and than for all the rest of the div tags <div id=" other div tags are the same as this? ">

Again: You should use id's to identify unique elements. Do you know what unique means?

Minimeallolla · December 3, 2010

um the source code doesnt show php therefore its not the real code because i could have php on my index.php file and the source code wont show it, therefore it is not the full code lol

and my external file is style.css o.O ?? \= >.<

				<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
				"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-language" content="en">
<meta name="keywords" content="free, simple, search, find, discover, play, engage, share, sharing, entertainment, fun, games">
<meta name="description" content="MySite is currently under construction and is constantly being amended.">
<link rel="favicon.ico" href="http://www.mysite.giacjr.dino-hosting.net/favicon.ico">
<link href='style.css' rel='stylesheet'>	
<title> MySite </title>  

</head>
<body>

<div id="body">

<div class="header">
	<div class="headertext">

<a href="/register.php">Register</a>
<a href="/login.php">Login</a>
<a href="/games.php">Games</a>
<a href="/aboutus.php">AboutUs</a>

</div>
		<div class="logo">


<img src="/images/mysite.png" alt ="MySite"><br>

	</div>
		</div>
			<div class="main">

content goes here

			</div>
				<div class="footer">

					<div class="footerleft">

© GiacJr and Rohan 2010

				</div>
						<div class="footerright">

<a href="mailto:giacjr@giacjr.dino-hosting.net">Contact us</a>

					</div>
							</div>
</div>

</body>
</html>

Minimeallolla · December 3, 2010

and for the unique ids you were talking about, for <div class="main"> i tried both dir and id and they didnt work. so class works and thats all that matters? i dont get the div attributes. i mean is it really necessary? and how do i know which div tags to assign certain attributes to?

gizmola · December 3, 2010

and for the unique ids you were talking about, for

i tried both dir and id and they didnt work. so class works and thats all that matters? i dont get the div attributes. i mean is it really necessary? and how do i know which div tags to assign certain attributes to?

If you're going to learn anything here, you have to actually do some of the legwork yourself. When you utilize id in an html tag, and you want some styling to occur then you need to have a corresponding style in your css block or external file.

An id selector starts with a '#'

A class selector starts with a '.'

So in your css
#main {
  //main styles here
}
And your markup
// emit your main content.
What people often will do is start with a skeleton of their layout and get that looking the way they want it to using styles. Exactly how to style these elements is dependent on what the layout you're trying to achieve looks like. Is this a header/footer/2 column, or a 3 column? Is it fixed width or liquid layout? The reason you use ID's in this case is that depending on the layout you want to achieve you're going to have 1 header div, 1 footer div, 1 left_column div, 1 main div etc. and the appropriate content will be rendered into each one of these.

Minimeallolla · December 4, 2010

ohk thanks. so if i have 6 div tags, i'd do one as class, one as id, one as ..dir?, one as another? and not use an attribute i've already used? what if i have more div tags than there is attributes?

| I find someone explaining it to me is far better than me just reading dead tutorials -.- |

gizmola · December 5, 2010

The main blocks of your layout should all be id's. Put whatever styles you'll use across different tags into classes. You do not need to make a choice between the two: a tag can have an id, name and class.

Typically the positional aspects of the blocks would be styled in the id. Things like fonts, colors etc, would go into classes, because you want those to be consistent. Doing a good .css takes some planning.

Sign In

Source Code; please review my source code and leave feedback on how to improve.

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information