HTML TUT:
Im going to break up the tutorial in two phases:
1. Vocab!
2. Syntax
Along with some other tips and tricks at the end.
Please note that HTML does NOT have a formal debugger - if there is an error in your script, HTML tries to make it work anyways, even if it doesn't conform with proper sytax!
I will also try to conform with XHTML rules, but if you see an error with any of it, please tell me and I will fix it.
I. VOCAB
----------
If HTML is your first programming language, be advised a lot of things will seem strange to you. Also, do know you will be googling a TON of things, which leads me to this vocab section, which should help explain some common programming (and/or techie) words you might come across.
HTML - HyperText Markup Language - The most basic form of web programming consisting of tags and simple attributes.
Tag - A tag [of code] that tells the document what exactly to do
Attribute - An extended 'option', if you will, of a tag
Brackets - < and >
Bug - A small living creature th- just kidding. Its an error in your code that could cause it to malfunction or not work at all. Again, HTML has no way of telling you there is an error, other than not displaying something.
Syntax - Hmm this is hard to explain in simple terms: Its basically the format of the code, whether it be how a tag should be formed, the way it should be nested (or sequenced - we'll go over nesting in the next phase), etc. For the third time, HTML does not have any way of telling you an exact syntax error, so you will have to be extra careful.
Block [of code] - Any section of code that starts and ends with corresponding opening and closing tags (Will go over later).
Parse - To process any line, section, or whole documents of code, and output another type of code (mostly seen with PHP).
Depricated Tag - A tag or command that is frowned upon, and usually is only used to support older scripts.
I think that should suffice for this tutorial...
II. SYNTAX
Well! Here you are! The moment you've been waiting for!
I strongly recommend you read the above phase before continuing.
HTML is quite easy after you get used to it. It's also great as a pilot language to get you started in the world of programming. The following phase outlines how HTML works, how it is coded, and how attributes work.
I think the best way to learn HTML is to see a block of code then have it described.
HTML Code:
Well what do we have here? These are tags that tell the document what to do. Tags are all HTML is.
These particular tags tell the document what kind of code it contains. Every HTML document will start and end with <html> and </html>. Notice that the second tag has a "/" before it. This means the tag is closing, or that that particular block of code is done. Every tag must have its closing tag (with the exception of a few advanced tags). Its kind of like saying:
<html> "Hey browser! I'm starting the HTML document!"
...
</html> "Hey browser! See the /? Im done!!"
And there is your first block of HTML!
Now, what happens when you put this into the browser? Well I'll let you see for yourself! Open up Notepad (or a simple text editor on other OS's) and copy and paste the two tags from the code block above.
Save this file as a .HTML or .HTM (Doesn't matter - I tend to use .HTM just for simplicity and conformity). Now, open up your favorite browser and open up the file you just saved (File-->open). The page should just go blank.
Now here are two questions that might come to mind: "Why doesn't anything show up?" or "Why don't the tags show up?"
It's a simple answer for both! The browser looks at the .HTML or .HTM of the file, determines it is an HTML file, then looks inside. When it sees the <html> and </html> tags, it simply ignores them, and looks inside of them. Since there is nothing there, it displays nothing!
Quick tip: Anything that LOOKS like a tag will be 'parsed', or ignored from output.
HTML Code:
Code:
<html>Hello!</html> Outputs "Hello!"
<html><Hello></html> Outputs ""
Now a tag isn't just ignored - depending on what the tag is, it tells the browser what to do with the tags or text within the two tags. For instance, to bold text, you use the <strong> tags.
Code:
Code:
<html>
<strong>Hello</strong> world!
</html>
This block of code will output:
Hello world!
See how the </strong> tag ends the bolded text - anything after it will be unbolded.
You can also start up the bold text again in another part of the code:
HTML Code:
Code:
<html> <strong>I</strong> like to write code in <strong>HTML!</strong> </html>
This code outputs:
I like to write code in HTML!
Quick Tip: For ease of debugging and for conformity with XHTML, always keep your tags lowercase. Always.
Now, nesting tags is also permitted. Nesting means to put a block of code within another block of code:
Code:
Code:
<html>
<strong>Hello, <i>this should be italicized,</i> this should only be bold.</strong>
</html>
Quick Tip: <i> means Italicized.
This would output:
Hello, this should be italicized, this should only be bold.
One more syntax rule:
White space:
Code:
White..
...space
is ignored.
HTML Code:
Code:
<html> <strong>Hello
there.</strong> </html>
That code, when parsed, would take out all of the new lines, merge the text together (Hellothere.) and add a space wherever the line breaks occured, outputting:
Hello there.
Professional programmers use whitespace to give the code some air, allowing people to work with it with ease. Whitespace is there to make the script look nicer and more organized.
One more tag you should know about is the Line Break tag. Again, simply pressing enter will NOT separate out lines of text. You need the Line Break tag.
Now the thing about line break tags, along with a few other tags, is that it is a single tag - it doesn't have a closing tag. The line break tag is the BR tag and should be formatted like this:
HTML Code:
This will be on a new line.
Notice the / at the end of the tag. This makes sure the tag conforms with XHTML rules. '<br>' is a deprecated tag gives you the same result, but using the forward slash (like in the last block of code) is cleaner, and conforms to the rules (thanks, sorta, to synode.). The tag <br /> allows you to use it over and over to create a lot of outputted lines. Example:
HTML Code:
Code:
<html>
Hello <br><br><br><br>
world.
Number <br /><br /><br /><br />
two.
</html>
That code would output:
Hello
world. Number
two.
Quick Tip: Using one <br /> will get you to the next line, but keep in mind that if you want a line in between to parts of code or two lines of text, you need to use two <br /> tags.
The last little bit of syntax I'm going to show you is the <head> tag, the <body> tag, and the <title> tag.
The <body> and <head> tags are important mainly because they tell the document which code to load first. Nowadays, they are usually used for organization.
A well formatted HTML document would have code like this:
HTML Code:
Code:
<html> <head>
...
</head> <body>
...
</body> </html>
Again, this code would simply output a blank page. However, you're telling the HTML document, in detail, which code to display first.
Code within the <head> tag is executed first, and contains most of the lines of code that refer to headers (META tags), styles (CSS), titles (<title>), etc. Most code in the <head> tag doesn't output anything on the page.
The <body> tag usually contains the code that is displayed on the page. This is where any of the lines of code in the previous code blocks can go.
Before I show another block of code, I'd like to familiarize you to the <title> tag.
Look at the top of your browser right now. What does it say? It should say something like "Monkeh's HTML Turorial - GamerzPlanet - For all....". Ever wonder how to get something like that up there? Simple! The <title> tag!
Just like the <strong> and the <i> tags, the <title> tag has a closing tag as well. Anything inside the <title> tag goes up in the title bar (easy enough, right?) Do note that you cannot put formatting (<strong>, <i>, etc) tags within the title tag - any tag within the <title> tag will simply be ignored.
Now, lets see this new material in action:
HTML Code:
Code:
<html> <head> <title>Hello world! This is my title!</title> </head> <body> <strong>STUFfz0rs!</strong> </body> </html>
To see exactly what this block of code does, simply put it in a .HTML or .HTM file and open it up in your browser!
Now, the last little section in this phase: attributes.
Most tags have attributes. They are simply a way of HTML life. A lot of attributes carry on from tag to tag, but many do not, so it is advised you look them up individually (or use a commercial program like Dreamweaver to show them to you in a nice little window).
The one attribute I will be showing you right now is the bgcolor attribute of the BODY tag. Hinting to you that bg means "background" would hopefully tell you that bgcolor refers to the background color of the page. Yay! Colors!
Now, the attribute works in one of two ways: it accepts typed out colors (i.e. "red", "black", "lime"), etc. However, to be more exact, you should use Hex Color codes (i.e. #FFFFFF, #000000, #FF0000). Where exactly do you get them? Google it! ("Hex Color picker")
Now its simple to put in the tag. Look at this code:
HTML Code:
Code:
<html> <head> <title>BGCOLOR Test</title
</head> <body bgcolor="#FF0000">
Hello!
</body> </html>
Putting this into an HTML document and opening it in a browser will make the background bright red and the text black. Replace the #FF0000 with any color from the site I gave or any other site. As a rule of thumb, always include the "#" in your Hex tags. It just denotes you are using a Hex color code rather than a word.
Quick Tip: If you have a tag with multiple attributes, simple space them out:
HTML Code:
Code:
<body bgcolor="#FF0000" onload="void(0)">
(Dont worry about the onload attribute - it simply put it on there because it was the first that came to mind).
To conform with XHTML rules, always keep the attribute name lowercase and the value enclosed in double quotes.
Some Tips and Tricks:
Trial and Error = the quickest way to learn HTML.
Google is your friend.
Thanks for reading
Linear Mode
