Guide to HTML 2 [Archive] - PawnGame.com

JediLucas5

06-03-2007, 01:03 AM

Ok so your wanting to make an HTML page? first of all you need to know what HTML is HTML is Hypertext Markup Language which is a web design laguage comonly used by big buisnesses. Well lets start shall we Here is the basic tags for HTML that are needed in every HTML code.

<HTML>
<HEAD>
<TITLE>Your.title</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Those are basic tags that all HTML codes have if not then it wont come up like you wanted it to. When using HTML code you should use caps lock so you can depict code from normal text. You noticed how I made the same tags but with a "/" on them? well that tells the code to end that commands. now lets move on to adding a heading like the big letters on the center top of web pages that tell you were your at.

<HTML>
<HEAD>
<TITLE>Your.title</TITLE>
</HEAD>
<BODY>
<H1><CENTER>WElcome to my Page!</H1></CENTER>
</BODY>
</HTML>

"H1" stands for heading one which enlarges the text within in codes. you can pick between h1-h3 all different sizes. The code <CENTER> tells the HTML to move it to the center of the page. you can use Center, Right, and Left. Now lets Backround and font color shall we?

<HTML>
<HEAD>
<TITLE>Your.title</TITLE>
</HEAD>
<BODY><BG COLOR="RED"><FONT="BLACK">
<H1><CENTER>WElcome to my Page!</H1></CENTER>
</FONT>
</BODY>
</HTML>

Now it should appear as a red backround and black. the parenthesis are to make sure it's the right color basically a you counter. You can use basically any color known to man. You only need to close font because backround closes with </BODY> also you might need to use <BGCOLOR="BLACK">. Now lets try and learn how to add a picture to it.

<HTML>
<HEAD>
<TITLE>Your.title</TITLE>
</HEAD>
<BODY><BG COLOR="RED"><FONT="BLACK">
<H1><CENTER>WElcome to my Page!</H1></CENTER>
<IMG SRC="TH.EXACT.NAME.OF.THE.JPG.JPEG.OR.GIF.HERE">
</FONT>
</BODY>
</HTML>

IMG SRC allowes to to put in photos pictures or graphics into your site you can also put <CENTER,LEFT,RIGHT> before it to but it anywhere you want on your page. Lets try Basic URL links kinda like hypertext yet on the internet that takes you to a diffrent part of your site or a totally different one alltogether! so lets give it a try

<HTML>
<HEAD>
<TITLE>Your.title</TITLE>
</HEAD>
<BODY><BG COLOR="RED"><FONT="BLACK">
<H1><CENTER>WElcome to my Page!</H1></CENTER>
<A HREF="www.PawgGame.com">Click here to go to my favorite game! </A>
</FONT>
</BODY>
</HTML>
As you saw me add A HREF to the code when you see the site you will only see "Click here to go to my favorite game!" and when you click on it, it will take you to Pawn homepage, you can add any URL into it. Now I'm gonna teach you how to make a Image be a A HREF link! heres out it goes.

<HTML>
<HEAD>
<TITLE>Your.title</TITLE>
</HEAD>
<BODY><BG COLOR="RED"><FONT="BLACK">
<H1><CENTER>WElcome to my Page!</H1></CENTER>
<A HREF="www.PawgGame.com"><IMG SRC="Pawn.gif"></A>
</FONT>
</BODY>
</HTML>
Now it will show up as the picutred specified and when you clik on the picture it will take you to that URL to add text to it just put words in it at the end of the > in IMG SRC. Well thats basically all you needed to know here is a list of other tags you might find useful while using HTML language!

<OL>My favorite foods!
<LI> Chicken
<LI> Pizza
<LI> fish
</OL>

This is an ordered list, when done correctly it should do this
My Favorite foods!
1. Chicken
2. Pizza
3. Fish
Now lets move on to and unorded list!

<UL>What I'm like
<LI>Evil
<LI>Hatefull
<LI>Spitefull
</UL>

If done correclty it should end up like this
What I'm Like
•Evil
•Hatefull
•Spitefull
And thats an unordered list. here is a series of tags and defintions you might like to know!

<BR> Is a line breaker
<P> Puts your text in paragraph form (must close this tag)
<B> Makes text bold (must close this tag)
<U> Makes text underlined (must close this tag)
<E> Gives feeling to the text (must close this tag)
<S> Strongfaces the text (most close this tag)

I will be adding more defintions and stuff pelase tell me any I left out and if you need any help contact me at JediLucas5@AOL.com please. Thanks for reading!

peter22

06-03-2007, 01:08 PM

good guide this will be every usefull for people :)

JediLucas5

06-04-2007, 09:14 PM

Thank you appreciate good comments

Chalks

06-08-2007, 03:39 PM

Spruce up that plain HTML document!

With the few commands that JediLucas5 gave you, and a simple command language called CSS (Cascading Style Sheets), you can make a sweet website! Here's a pretty boring example that I made:
http://www.charkysmmg.com (http://www.charkysmmg.com)
to see the CSS I used, go to
http://www.charkysmmg.com/smallcenteredbw.css (http://www.charkysmmg.com/smallcenteredbw.css)

(it's for another game that I play)

Here's how it works!

Inbetween the head tags but below the title tags (see Lucas' post above), insert this:

<head>
<title>My First CSS Page</title>
<style type="text/css">
...
...
...
</style>
</head>

Now, you can use css to format your entire page. Any tag in your page can be directly edited by your stylesheet. "p" tags, "b" tags, "h1" tags, etc. For example (this goes inbetween the style tags above):

p { //This is a comment
color: #000000; //text color, 6 digit number (hexedecimal) or "blue", "black", "red", and several other keywords.
font-size: 12px; //12 pixels high
margin: 0px 0px; //0 pixels from left side, 0 pixels from top side
} // remember the open and close brackets, and always put a semicolon after every command

body {
background-color: red; //used a keyword. or, red is #FF0000
margin: 0px 0px;
}

table {
background-image: url(back.jpg); //set the background of all your tables to the image back.jpg
}

One of the most powerful parts of CSS is something called div tags. You put these in your regular HTML page:

<body>
<div id="first">
<p>My First Div Tag! It's Called FIRST!</p>
</div>
</body>

Now, go back up into your css stylesheet (at the top of the page):

#first { //note the # symbol
position: absolute; //makes it stay exactly where you want it. the other option "relative" is much more complicated... google it if you want.
background-image: url(sweet.jpg)
background-repeat: no-repeat; //options: no-repeat, repeat-x, repeat-y
top: 100px; //puts it 100 pixels from the top of the page
left: 300px; //puts it 300 pixels from the left of the page
height: 342px; //um... it's 342px high
width: 299px; //figure it out.
}

What if you wanted to change the text color of the stuff inside the p tag which was in the "first" div, but didn't want to change any other p tag?

#first p { //changes the p tags inside the first div
color: green;
}

You can change more than one thing at once

#first p, #first h1 { //changes the p tags and h1 tags within the "first" div
color: blue; //blue = #0000FF ... it's #RedGreenBlue
}

What about links that change color when you roll the mouse over them?

a:active, a:visited, a:link {
text-decoration: none; //removes the underline on the link
color: #0000FF; //blue
}
a:hover { //when the mouse is over the link...
text-decoration: underline; //underline it
color: #00FF00; //green
}

That barely scratches the surface of what you can do with CSS, but with that, and everything you got from Lucas, you should be able to build a decent website. Here are some links that will help you with CSS:
http://w3schools.com/css/default.asp (http://w3schools.com/css/default.asp)
and,
http://www.google.com/codesearch (http://www.google.com/codesearch)

edit: comment for the "< br >" tag... new XHTML standards state that it should be "< br/ >" (without the spaces).

JediLucas5

06-11-2007, 12:45 PM

Chalks

06-14-2007, 12:35 AM

HA ok mr scripter ummm no XHTML is a lame excuse for HTML and btw its way easier to hack so all who use that have knowing that the guy above you has ruined your website! =D oh and btw its not spiced up very low detail and bland tbh u suck LOLOL, and even if your comment was meant to be nice i dont take it very kindly when people post lame guide. especcially ones that say mine are bland when u cant even fit a Def into any of those words eh? yes i think you need to read my up more and see that i use big words and spell them out for the beginers tyvm take your noob guide and shove it up your *** please?
quote: "XHTML 1.1 is an additional step toward a more flexible version of hypertext with the full benefits of XML architecture and integration of different technologies."
from: http://www.webstandards.org/learn/articles/askw3c/oct2003/

quote: "HTML is rapidly being replaced by XHTML. The differences are very minor, but the results of switching can be worth the effort. The primary benefit is that XHTML is more widely accepted in non "computer" devices like cell phone, palm devices and other scaled down browsers."
from: http://htmlfixit.com/tutes/tutorial_XHTML_and_HTML_-_The_differences.shtml

XHTML prepares you to use XML, and is is XSL ready (due to the fact that it follow XML standards). It IS the next generation of markup languages and helps you for when you are ready to go into asp, php, ajax, and the like. The differences between HTML and XHTML are subtle, but important.
--------------------------

I'm sorry I called your guide bland. I didn't intend to mean it in that way. It's just that with HTML, it's difficult to make very dynamic websites. CSS is the easiest way to "spice up" your website, and is one of the best ways to do so. It is very simple to learn since almost every command is quite intuitive.

If you'll notice (which you didn't), after almost every single line of code, I put a comment (designated by the double slashes). Each line describes in more detail what the command does. Some of the commands I didn't explain thoroughly because I assumed that people would be able to figure out that "height" referred to the HEIGHT of the OBJECT. Are you insinuating that the people who read these guides are not that intelligent?

You said: "see that i use big words and spell them out for the beginers"
What? You explained how to use 13 commands. That's HARDLY comprehensive. You left out "table", "tr", "td", "anchor", and many, many more. I showed how to edit and format EVERY SINGLE COMMAND in HTML using a simple, easy to understand language. CSS is a HUGE benefit to anyone who uses HTML or XHTML. If you (or anyone) writes a guide to HTML, it is always of great use to the readers to see what else you can do in addition to that.
--------------------------

You also said this: "take your noob guide and shove it up your *** please?"
As mentioned above, you explained 13 commands. I explained how to edit the entire realm of HTML. There's a vast difference between what you wrote, and what I wrote. My "noob guide" was intended as a compliment to your guide, helping those who are new to programming to take their websites to a whole new level. CSS is useless without HTML, so my guide is pointless unless yours exists. In my opinion, HTML is ugly as sin without CSS. So... Right back at ya, buddy.
--------------------------

Finally, your comment was poorly spelled, and stank of stupidity. Hacking a website? Are you insane? The only way to do that (to a simple HTML/XHTML/CSS website) would be to actually hack into the server, which has NOTHING to do with any of the languages being discussed. It's not spiced up, and is very low detail? Do you even know what CSS is?! Have you EVER been online? Ever? Right click on the pawn forum screen then click "view source". Look what it says:
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0<A href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
See that XHTML there? Look a little farther;

<style type="text/css" id="vbulletin_css">
Oh look! CSS! Imagine that! I actually know what I'm talking about? What a shocker! I need to read up more, eh? I've been programming for more than 5 years. I am fluent in CSS, XHTML, DHTML, Javascript, Java, C++, C, and more. I think that my guide greatly helps your guide out, and I'm sorry that I took the time to help you. If anyone ELSE would be interested in learning CSS in more detail, you are welcome to pm me in the forum.

Thanks, and come again.
Chalks
- Tearing you a new one since 5 minutes ago.

JediLucas5

06-15-2007, 12:07 AM

Hmm 5 years eh? wow i went to SCHOOL MOTTHER FING SCHOOL FOR THIS and btw wow it is still EASIER to hax and its ok that you called it bland i accept apology of w/e u said, CSS makes it easier to hax, and anyways in HTML now they allow an you know a code box were u put in CSS say u have HTML made site and your using invision forums? thats ok if its has CSS cause ther eis a seperate code box for it, idk all i know is that dont rsut XHTML because i seen it get haxed to many times to easy

JediLucas5

06-15-2007, 12:09 AM

wait wtf? omg i think i learned XHTML in school! =[] wtf hmm the <!-- CSS --- > looked odlyu familir and i looked in the school thing it was in there, maybe we are learning XHTML but maybe they call it by HTML now ? maybe idk

PawnScript

07-26-2007, 08:14 AM

I dont get it, do you upload the picture and use the link as the img src?

WhiteKnight

07-26-2007, 03:37 PM

This guide was stolen from wxschool....

Sorrath

08-01-2007, 09:14 PM

HTML is easy. I use PHP instead. Javascripts fun too.

Here's a simple script that validates a user.

<?
session_start();
include_once('config.php');
if (empty($_SESSION[user]) {
// Login Screen
} else {
echo "Welcome " . $_SESSION[user];
}
?>

two11

08-03-2007, 11:00 AM

too bad this is a bbcode site.. lol

JediLucas5

08-10-2007, 03:52 AM

This guide was stolen from wxschool....

Nope, it would be way more advanced than this xD!!! this is all mine

Bicko

08-26-2007, 12:52 PM

There's one thing I don't get. Why can't i use HTML in my acc it says its disabled but i can't enable it. How do i enable it?!?!?!?

Zeraninator

08-31-2007, 10:50 PM

This guide was stolen from wxschool....

lol i was thinking the same thing... lol. yah ive been learning html there, im making my own test site and im as far as the table making lol.

JediLucas5

09-01-2007, 12:10 PM

lol i was thinking the same thing... lol. yah ive been learning html there, im making my own test site and im as far as the table making lol.

idk what you guys are talking about >.<!!!! please explain whats xschool wq/e you call it. I learned this in school and took me about 1 hour to mak all this. its not nice to say i leeched it when i made all that work,