Well it has been a while since I last wrote the first HTML For Beginners tutorial part 1. If you haven't checked it out yet, be sure to check it out first before reading and attempting this tutorial below.
Now, in the first tutorial I talked about some tag codes and how the structure of a very, very basic HTML page should look. Now since I figured plenty of people already have that done and are sitting and saying to themselves, "OK, now what?!?" Well this tutorial will cover some more advanced HTML coding, as well as self-ending tags, along with how to make it all valid so you can get your website W3C compliant.
Your question may be, "What the hell is W3C and why do I need to be compliant with it?" OK, well someone had to create the Internet and it's standards, correct? Well the answer to who created the Internet is easy, Al Gore! No, not many are fully sure who created the "Internet" though I believe that it had to deal with a bunch of people. Well the answer to who makes the standards for the Internet is easy, that would be the World Wide Web Consortium. I am not going to go into detail about them, just visit their website at http://www.w3.org. Also, keep in mind that when you hear anything dealing with W3 or W3C, that is them.
Now, moving on to the tutorial. First we will start with our old page designed last time. So, reopen your file, whatever you have named it, so you can view the source code. One thing that I forgot to do, that I am stupid for leaving out, is the question, "Well, what do I save it as and how do I view it?" All will be answered soon, I promise.
Though, the first page of all websites, granted you can name your HTML file anything, is usually index.html, or for short some people just make it index.htm; either way works, though I will stick with the full file extension and go with .html. The reason for this is when trying to open up a URL, folder or any destination on a web server, the browser will search for the index.html, unless the web server or URL is pointed to another destination.
So, open up the file that you have saved, or just copy the one below if you wish to start fresh, and go ahead and re-save it or save it as index.html.
When I typed the first tutorial, I just mainly wanted to show the structure of an HTML document and some tags. That technique and way was not even how I write websites, and is 100% non-compliant the W3C standards; because of some missing tags and such. Though, lets change that and make it compliant!
One thing to note, there are plenty of ways to validate coding, especially HTML and XHTML (which I will cover in yet another tutorial). Though, instead of thinking hard and choosing a Doctype and Encoding type, I will just stay with the normal: Doctype = XHTML 1.0 Transitional and Encoding = iso-8859-1. When validating your page though, W3C will probably pick the right type anyways.
Now, since I am trying to make it XHTML valid, which is the best idea to do with all HTML pages, you need a simple code added to the top of your HTML document, the Document Type Declaration (DTD).
The reason W3C can tell automatically what type of Doctype you are running is, wow look, off of this code. If you wish for your HTML or XHTML pages to be valid, you need the Doctype for that page that corresponds with how you are coding it.
So, with that added our page should look like this:
Now another thing you should add, or better yet change, is the beginning <html> tag. You need to add the valid XHTML / XML Namespace Declaration.
By adding that to our document it should look like this:
*Note: the lang, or language, codes can be changed the correct abbreviations for the language the file is written for.
The reason I put the space in between the </head> and the <body> tags is not for any apparent reason, it is just so it can be easier read in the source file and looks cleaner, more professional and overall nicer. Now you can see there is a lot of work that goes into making a HTML file valid, and there always will be depending upon how you code; so that is why I find it intelligent to learn the right coding methods first, so it becomes a habit and you will not get into problems later on.
Now, some other things you should keep in mind and follow when typing your HTML file, which is now trying to be XHTML valid, are the XHTML standard rules:
Granted, there is plenty of other rules, some going into great detail about coding that you might not even know about right now, so why bother going over it? Well if you have trouble with getting your code valid, post it here or PM me and I will be glad to figure out your problem(s). Though, if you follow those rules, and get the idea, than everything should turn out fine.
One more thing we have to do is, again follow the rules I just posted, so lets take a look at our file and see which rules, if any, we are not following. And right off the bat I see that we never gave our content any tags! So, lets do that with the basic paragraph tag, or <p>.
There, your file should be valid, feel free to upload it to see if it is W3C compliant at their site following the link: http://validator.w3.org/.
Now, I did say I was going to go into some more advanced HTML coding, though I think that this tutorial about how to make our HTML file valid is pretty long in itself, so in HTML For Beginners - Part 3 will cover all of that other stuff. Though, before I leave I will tell you what self-ending tags are, or a few at least.
One tag is the image tag, which displays, well duh, and image. These self-tags are out there, as much as normal tags are, so I will not give into much detail about them, though I will show you how to make sure they make your file valid - they all must be closed in the end.
I hope you enjoyed this tutorial. Again, feel free to leave feedback, problems, questions, reviews, answers, fixes and anything else your mind can think of - especially ideas about what YOU want to learn! Also, be active and look for HTML For Beginners - Part 3!
-----
This tutorial was brought to you by: Fg Designs
Source: FutureGamers
Now, in the first tutorial I talked about some tag codes and how the structure of a very, very basic HTML page should look. Now since I figured plenty of people already have that done and are sitting and saying to themselves, "OK, now what?!?" Well this tutorial will cover some more advanced HTML coding, as well as self-ending tags, along with how to make it all valid so you can get your website W3C compliant.
Your question may be, "What the hell is W3C and why do I need to be compliant with it?" OK, well someone had to create the Internet and it's standards, correct? Well the answer to who created the Internet is easy, Al Gore! No, not many are fully sure who created the "Internet" though I believe that it had to deal with a bunch of people. Well the answer to who makes the standards for the Internet is easy, that would be the World Wide Web Consortium. I am not going to go into detail about them, just visit their website at http://www.w3.org. Also, keep in mind that when you hear anything dealing with W3 or W3C, that is them.
Now, moving on to the tutorial. First we will start with our old page designed last time. So, reopen your file, whatever you have named it, so you can view the source code. One thing that I forgot to do, that I am stupid for leaving out, is the question, "Well, what do I save it as and how do I view it?" All will be answered soon, I promise.
Though, the first page of all websites, granted you can name your HTML file anything, is usually index.html, or for short some people just make it index.htm; either way works, though I will stick with the full file extension and go with .html. The reason for this is when trying to open up a URL, folder or any destination on a web server, the browser will search for the index.html, unless the web server or URL is pointed to another destination.
So, open up the file that you have saved, or just copy the one below if you wish to start fresh, and go ahead and re-save it or save it as index.html.
Code:
<html>
<head>
<title>Title of your page</title>
</head>
<body>
This is my first HTML document. <b>THIS IS AMAZING!</b>
</body>
</html>When I typed the first tutorial, I just mainly wanted to show the structure of an HTML document and some tags. That technique and way was not even how I write websites, and is 100% non-compliant the W3C standards; because of some missing tags and such. Though, lets change that and make it compliant!
One thing to note, there are plenty of ways to validate coding, especially HTML and XHTML (which I will cover in yet another tutorial). Though, instead of thinking hard and choosing a Doctype and Encoding type, I will just stay with the normal: Doctype = XHTML 1.0 Transitional and Encoding = iso-8859-1. When validating your page though, W3C will probably pick the right type anyways.
Now, since I am trying to make it XHTML valid, which is the best idea to do with all HTML pages, you need a simple code added to the top of your HTML document, the Document Type Declaration (DTD).
Code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">The reason W3C can tell automatically what type of Doctype you are running is, wow look, off of this code. If you wish for your HTML or XHTML pages to be valid, you need the Doctype for that page that corresponds with how you are coding it.
So, with that added our page should look like this:
Code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Title of your page</title>
</head>
<body>
This is my first HTML document. <b>THIS IS AMAZING!</b>
</body>
</html>Now another thing you should add, or better yet change, is the beginning <html> tag. You need to add the valid XHTML / XML Namespace Declaration.
Code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">By adding that to our document it should look like this:
Code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title of your page</title>
</head>
<body>
This is my first HTML document. <b>THIS IS AMAZING!</b>
</body>
</html>*Note: the lang, or language, codes can be changed the correct abbreviations for the language the file is written for.
The reason I put the space in between the </head> and the <body> tags is not for any apparent reason, it is just so it can be easier read in the source file and looks cleaner, more professional and overall nicer. Now you can see there is a lot of work that goes into making a HTML file valid, and there always will be depending upon how you code; so that is why I find it intelligent to learn the right coding methods first, so it becomes a habit and you will not get into problems later on.
Now, some other things you should keep in mind and follow when typing your HTML file, which is now trying to be XHTML valid, are the XHTML standard rules:
* Must have a valid Document Type Declaration (DTD).
* Must contain the valid Namespace Declaration.
* All tags and attributes must be in lowercase (e.g. <P></P> is invalid, whereas <p></p> is valid).
* All tags must be closed or have an ending tag (e.g. <p> must be followed by </p> as well as single tags must be closed, <img src="/image.gif" > is invalid, whereas <img src="/image.gif" /> is valid).
* All attributes must be properly closed (e.g. <img src=/image.gif /> is invalid, whereas <img src="/image.gif" /> is valid).
* Boolean attributes can not be abbreviated (e.g. <button id="button1" disabled>Button</button> is invalid, whereas <button id="button1" disabled="disabled">Button</button> is valid).
* alt tags must always be in HTML img tags (e.g. <img src="/image.gif" alt="My Image" />).
* All tags must be nested in their hierarchical order (e.g. <span class="double"><b>TEXT</span></b> is invalid, whereas <span class="double"><b>TEXT</b></span> is valid).
Granted, there is plenty of other rules, some going into great detail about coding that you might not even know about right now, so why bother going over it? Well if you have trouble with getting your code valid, post it here or PM me and I will be glad to figure out your problem(s). Though, if you follow those rules, and get the idea, than everything should turn out fine.
One more thing we have to do is, again follow the rules I just posted, so lets take a look at our file and see which rules, if any, we are not following. And right off the bat I see that we never gave our content any tags! So, lets do that with the basic paragraph tag, or <p>.
Code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title of your page</title>
</head>
<body>
<p>This is my first HTML document. <b>THIS IS AMAZING!</b></p>
</body>
</html>There, your file should be valid, feel free to upload it to see if it is W3C compliant at their site following the link: http://validator.w3.org/.
Now, I did say I was going to go into some more advanced HTML coding, though I think that this tutorial about how to make our HTML file valid is pretty long in itself, so in HTML For Beginners - Part 3 will cover all of that other stuff. Though, before I leave I will tell you what self-ending tags are, or a few at least.
One tag is the image tag, which displays, well duh, and image. These self-tags are out there, as much as normal tags are, so I will not give into much detail about them, though I will show you how to make sure they make your file valid - they all must be closed in the end.
Code:
<img src="/this_is_my_img.gif" alt="Title For Image" />I hope you enjoyed this tutorial. Again, feel free to leave feedback, problems, questions, reviews, answers, fixes and anything else your mind can think of - especially ideas about what YOU want to learn! Also, be active and look for HTML For Beginners - Part 3!
-----
This tutorial was brought to you by: Fg Designs
Source: FutureGamers
