What's new

I'm a HTML and CSS beginner

  • Thread starter Triiistan
  • Start date
  • Views 690
Triiistan

Triiistan

Contributor
Experienced Veteran Programmer Grammar Nazi
Messages
1,951
Reaction score
494
Points
270
Sin$
0
Hello Se7enSins!

If somehow you didn't read or notice the title of this thread, I am a HTML and CSS beginner. I've been asking around on the best way to learn, and everyone was responding with make a "project" webpage. Like a small project just to help me learn, and retain it as well. My webpage is no where near being done, but I would like some pointers, to help me improve what I already have. Also, please help me with CSS, my webpage looks so ugly!

index.html
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Modern Warfare 2 Info</title>
<link rel="stylesheet" type="text/css" href="web.css" />
</head>

<body>
<h1><center><u>Modern Warfare 2 Info</u></center></h1>

<h2>Weapons</h2>
<h3><dd>Primary Weapons</dd></h3>
<ul type ="circle">
<dd>
<li><a href="http://www.google.com">Assualt Rifles</a></li>
<li><a href="http://www.google.com">Sub Machine Guns</a></li>
<li><a href="http://www.google.com">Light Machine Guns</a></li>
<li><a href="http://www.google.com">Sniper Rifles</a></li>
<li><a href="http://www.google.com">Riot Shield</a></li>
</dd>
</ul>
<h3><dd>Seconday Weapons</dd></h3>
<ul type="circle">
<dd>
<li><a href="http://www.google.com">Machine Pistols</a></li>
<li><a href="http://www.googlecom">Shotguns</a></li>
<li><a href="http://www.google.com">Handguns</a></li>
<li><a href="http://www.google.com">Launchers</a></li>
</dd>
</ul>
<h3><dd>Other</dd></h3>
<ul type="circle">
<dd>
<li><a href="http://www.google.com">Equipment</a></li>
<li><a href="http://www.google.com">Special Grenades</a></li>
</dd>
</ul>
<h2>Perks</h2>
<p>In Modern Warfare 2 perks are special abilities / power ups for multiplayer combat. There are only 3 perk slots available to you and each slot consist of different types of perks, so choosing the right ones for your class is crucial. The same applies in Modern Warfare 3; there are only a limited amount of slots available, so choosing the right ones from the modern warfare 3 perks list is extremely important.</p>
<p>Unlike in the previous Call of Duty games, each perk can now be upgraded to a Pro version by completing its challenge. Note: Pro perks are additions to each perk, they don't replace them. All versions of the game (Xbox 360, PlayStation 3 and PC) unlock the pro perks the same way.</p>
<h3><dd>Perk Slot 1</dd></h3>
<table border="6">
<tr>
<td>Perk Name</td>
<td>Ability</td>
<td>Pro Ability</td>
</tr>
<tr>
<td>Marathon | Marathon Pro</td>
<td>Unlimited Sprint</td>
<td>Get over obstacles faster</td>
</tr>
<tr>
<td>Sleight of Hand | Sleight of Hand Pro</td>
<td>Faster reloading</td>
<td>Gives a speed boost to how fast you can aim down the sight of your weapon</td>
</tr>
<tr>
<td>Scavenger | Scavenger Pro</td>
<td>Full resupply from dead enemies</td>
<td>Extra magazines</td>
<tr>
<td>Bling | Bling Pro</td>
<td>2 primary weapon attachments</td>
<td>2 secondary weapon attachments</td>
</tr>
<tr>
<td>One Man Army | One Man Army Pro</td>
<td>Replaces your secondary weapon. This allows you to change your class at any given time during a match. This perk has been removed from the Modern Warfare 3 perks list.</td>
<td>Swaps classes even faster</td>
</table>

web.css
Code:
p {
color: #000;
}

body {
background-color: #7A8B8B;
}

h1 {
color: rgb(0,0,0);
}

a {
color: #8B4726;
}

Thanks Everyone! Also, do you recommend me doing CSS externally like I am now, or internally? I am NOT going to do in line styling. I have been told to avoid this where ever possible

Thanks Everyone!
 
Ripper

Ripper

Seasoned Member
Messages
6,919
Reaction score
2,367
Points
535
Sin$
7
External styling will end up being the best option in the long run. For simple webpages, you can use internal styling.
And yes, try to avoid using in-line styling.

And of course your webpages aren't going to be the most appealing if you're still just a beginner with CSS. Appearance will gradually increase over time.
 
Bar Starred

YourMumOnToast9

Contributor
Grammar Nazi Grizzled Veteran
Messages
2,264
Reaction score
748
Points
270
Sin$
0
Check this site out dude: http://www.w3schools.com/css/

I personally use the site when referencing any CSS I forget, also the place I built my knowledge from.

I agree with the post above, in all ways, although, sometimes, in-line styles are the only option, they should be avoided, unless they are necessary, at which point, they should be embraced, and used wisely.

EDIT: oh, and remember, test in at least 3 browsers before 'finishing', Chrome, Firefox, and Internet Explorer, yes, Internet Explorer.

Remember, visitors to any site, do not use the same browser, there are variants. I find if i test my code on these 3 browsers, then it should work in any other case fine.
 
Triiistan

Triiistan

Contributor
Experienced Veteran Programmer Grammar Nazi
Messages
1,951
Reaction score
494
Points
270
Sin$
0
Thanks Everyone for your advice, especially YourMum... for the link! I'm going to continue to learn this stuff! Let's say for example I became advanced in HTML as well as CSS, what's next? Should I learn a new language? PHP, Python, Java? What do those do anyways <<-- ?
 
Buffalax

Buffalax

Enthusiast
Messages
476
Reaction score
83
Points
95
Sin$
0
Check this site out dude: http://www.w3schools.com/css/ I personally use the site when referencing any CSS I forget, also the place I built my knowledge from. I agree with the post above, in all ways, although, sometimes, in-line styles are the only option, they should be avoided, unless they are necessary, at which point, they should be embraced, and used wisely. EDIT: oh, and remember, test in at least 3 browsers before 'finishing', Chrome, Firefox, and Internet Explorer, yes, Internet Explorer. Remember, visitors to any site, do not use the same browser, there are variants. I find if i test my code on these 3 browsers, then it should work in any other case fine.

Dont forget http://www.w3fools.com for all the wrong things that they post...
 
K

karl1206

Enthusiast
Messages
276
Reaction score
9
Points
70
Sin$
0
Also when styling and using colours, make sure you use the hex colours consistently and not changing from hex to rgb to colour name (e.g. red, green, blue).
 
Triiistan

Triiistan

Contributor
Experienced Veteran Programmer Grammar Nazi
Messages
1,951
Reaction score
494
Points
270
Sin$
0
Once you have a good understanding of HTML and CSS I would recommend looking into PHP. If you want to make your websites more interactive you will definitely want to look into learning Javascript. I recommend using this website for learning HTML, CSS, and Javascript: http://code.google.c...css-javascript/ and using http://php.net for learning PHP.
Much appreciated. Thank you very much for the reply.
 
TyLerrrr

TyLerrrr

Enthusiast
Messages
531
Reaction score
42
Points
105
Sin$
7
I'm also a beginner, I just started my Web Page Design class a few weeks ago. I would suggest learning to use tables so that you can line everything up properly, it also makes the site look 100 times better.
 
Top Bottom
Login
Register