Post by aClubSandwich from windsor on Aug 30, 2009 5:40:51 GMT -5
~~~~~~~~~~~~~~~~~~~~~~
Welcome to this tutorial. If you are willing to learn HTML, then you must already have an understanding of its uses. If not then allow me to explain,
HTML is a language used for building websites. Every website you see on the internet uses HTML *Even http://xiiiidiots.proboards.com*. HTML is designed by a group of web designers at "http://www.w3.org/". All scripts and codes are made there. Check out their website for more info!
~~~~~~~~~~~~~~~~~~~~~~
Now that you have an understanding, lets continue with our tutorial~
Lesson 1: What is HTML?
First off, lets start off by understanding what HTML stands for below,
Hyper.Text.Markup.Language=HTML
I have no idea honestly what it means. But its defiantly a catchy acronym !
As mentioned above, HTML is the Key to building many websites and allowing the viewers to see it from a web browser. Even websites like google have HTML!
Your probably wondering how a bunch of codes can build up a website. well if you have ever used the internet before with browsers such as Internet Explorer, FireFox, or maybe even Opera, the answer would be right in your face. If you still haven't found the answer then take a look at the page source in your internet browser. Heres a list of options on how to do that,
*Internet Explore*
View>Source
*FireFox*
View>Page Source or (Ctrl+U)
*Opera*
View>Source or (Ctrl+U)
Then you'd see a bunch of codes that may hurt your brain. But fear not! I'm willing to help you understand those codes! And we're going to get you started on the simpilist way to understanding HTML. Now your maybe wondering how? What kind of programs will you use? How am I going to use it on the internet?
Well belive it or not, HTML goes way back. Almost around the time C++ came into place *at least, I think so*... There weren't a lot of programs around the time. So the guys at w3c figured out a basic text editor to use for HTML back in the days. Trust me! You guys have used this text editor before. Still don't know it? Alright I'd just come forward with it. The most common program for making HTML codes is,
*NotePad*
Yup, Microsoft NotePad. If you have never used Notepad before, you kind find it in the start menu (Start>Programs>Accessories>NotePad). Now lets start using html!
Lesson 2: Making Html codes.
Alright now that we have a text editor for our codes, lets start by opening up notepad. If you've noticed, you don't really have many options with notepad, but trust me its the best starter program out there. You can get into more advanced programs after you discover the basics of HTML.
Now to start off building our webpage, we're going to need to start off a code to make our file html based. And this code will also be the start off for many other codes. Take a wild guess what this code is. Still have't figured it out? Here it is,
HTML Code:
Yup our first code! This is called the HTML tag. This code basicaly represents our webpage. Without it, nothing would basically show up on your website. Even if you type other codes, you will still need the piece of code to display your webpage.
If you notice, our code uses brackets (<). This is the basic design for making html codes. All codes our represented in brackets. And also in HTML our text our capital. It actually doesn't matter if your text are capital when making codes. You can even make it lower case. The web browser will still understand the code.
*Note*
Now there are two types of HTML. XHTML and HTML. XHTML is more dynamic coding. We are working with regular HTML. If you use XHTML, most of your codes would have to be capitalized. And XHTML would require quotations for giving properties to codes [You will learn more about quotations in the next tutorial].
Alright now we need to give our webpage a title. The title appares at the topleft corner of a webpage.
To give your webpage a title just type the following below,
HTML Code:
In the Title tag, what ever you name it, your webpage will display it at the top of your web browser. Also if you noticed, We inserted two of the same tags twice. But at the end of the second tags they start off with a forward slash within the brackets ( / ). This slash is very important in HTML. A forward slash is used to end a tag after you've completed putting all of your items within it. After you start a tag, its very important to close it. If you don't close your tags. Then your webpage may end up with errors!
Now lets explain these Tags,
<HEAD> TAG: This tag is basically for things the viewer will not see (except for the title). This tag can be used for scripts, meta tags, and much more. Its less important for this tutorial. But it is still always needed for your page title.
<TITLE> TAG: As mentioned above, This tag is used for naming your webpage. What ever you name your webpage, it will show up at the TopLeft corner of your website. Everytime someone visits your website, the title will be there for them to see.
Now we're still not done. You still want to put things on your website for people to see right? Well like a written letter or story book, webpages require a body. A body is an area where most of everything comes up.
Where going to put something in this body. Just some plain text. Maybe "Hello World!" or "TGS Rulez!" *your choice*. And to do that just type the following,
HTML Code:
Now we have a webpage with text in it.
<BODY> TAG: This tag is needed in order for all of your images, text, videos, and much more to show up on your webpage. Its actually the heart of your webpage.
Now your maybe wanting to see your webpage. But hang on! We're almost done. Theres just one more thing we need to do before taking a look at our masterpiece. Haven't figured it out. Well take a look below,
HTML Code:
You Must Close Your <HTML> tag!!! This will complete your website.
*NOTE*
As a tutorial I'm just pointing this out so you don't publish your website without closing your <HTML> Tag. If your just editing your website, then you can still preview it. You will see more in lesson 3.
Now we have a full fledged webpage! But now you would like to see it on you web browser I am sure. Take a look at lesson 3!
Lesson 3: Getting your codes on your web browser!
Now I must apologize. I should have mentioned this back in lesson 2. But I wanted to make sure you've completed all of the basic HTML codes in notepad.
Now that we have all of our code in place. Its time to preview it on our webpage. Now to do this, we have save our webpage. But we must save it as a specific file. So click File>Save As. And at the bottom there is a text area to name your file. You want to type the name of your webpage and the file type. This is how you save a webpage file,
"yourwebfile.html"
You don't want to save it as yourwebfile.txt. That way, you wouldn't be able to preview it on your web browser.
Another way to save your file for the web is,
"yourwebfile.htm"
I guess HTM is a shorter form for the file type...
After naming your file, save it to your desktop *or anywhere you please*. After that open it up in your prefered web browser. If you noticed, everything you did in notepad with HTML has appared on your webpage. And at the top left corner of your webpage is the title! If all of this shows on your webpage, then you have sucessfully cunstructed your first website!
Welcome to this tutorial. If you are willing to learn HTML, then you must already have an understanding of its uses. If not then allow me to explain,
HTML is a language used for building websites. Every website you see on the internet uses HTML *Even http://xiiiidiots.proboards.com*. HTML is designed by a group of web designers at "http://www.w3.org/". All scripts and codes are made there. Check out their website for more info!
~~~~~~~~~~~~~~~~~~~~~~
Now that you have an understanding, lets continue with our tutorial~
Lesson 1: What is HTML?
First off, lets start off by understanding what HTML stands for below,
Hyper.Text.Markup.Language=HTML
I have no idea honestly what it means. But its defiantly a catchy acronym !
As mentioned above, HTML is the Key to building many websites and allowing the viewers to see it from a web browser. Even websites like google have HTML!
Your probably wondering how a bunch of codes can build up a website. well if you have ever used the internet before with browsers such as Internet Explorer, FireFox, or maybe even Opera, the answer would be right in your face. If you still haven't found the answer then take a look at the page source in your internet browser. Heres a list of options on how to do that,
*Internet Explore*
View>Source
*FireFox*
View>Page Source or (Ctrl+U)
*Opera*
View>Source or (Ctrl+U)
Then you'd see a bunch of codes that may hurt your brain. But fear not! I'm willing to help you understand those codes! And we're going to get you started on the simpilist way to understanding HTML. Now your maybe wondering how? What kind of programs will you use? How am I going to use it on the internet?
Well belive it or not, HTML goes way back. Almost around the time C++ came into place *at least, I think so*... There weren't a lot of programs around the time. So the guys at w3c figured out a basic text editor to use for HTML back in the days. Trust me! You guys have used this text editor before. Still don't know it? Alright I'd just come forward with it. The most common program for making HTML codes is,
*NotePad*
Yup, Microsoft NotePad. If you have never used Notepad before, you kind find it in the start menu (Start>Programs>Accessories>NotePad). Now lets start using html!
Lesson 2: Making Html codes.
Alright now that we have a text editor for our codes, lets start by opening up notepad. If you've noticed, you don't really have many options with notepad, but trust me its the best starter program out there. You can get into more advanced programs after you discover the basics of HTML.
Now to start off building our webpage, we're going to need to start off a code to make our file html based. And this code will also be the start off for many other codes. Take a wild guess what this code is. Still have't figured it out? Here it is,
HTML Code:
<HTML>Yup our first code! This is called the HTML tag. This code basicaly represents our webpage. Without it, nothing would basically show up on your website. Even if you type other codes, you will still need the piece of code to display your webpage.
If you notice, our code uses brackets (<). This is the basic design for making html codes. All codes our represented in brackets. And also in HTML our text our capital. It actually doesn't matter if your text are capital when making codes. You can even make it lower case. The web browser will still understand the code.
*Note*
Now there are two types of HTML. XHTML and HTML. XHTML is more dynamic coding. We are working with regular HTML. If you use XHTML, most of your codes would have to be capitalized. And XHTML would require quotations for giving properties to codes [You will learn more about quotations in the next tutorial].
Alright now we need to give our webpage a title. The title appares at the topleft corner of a webpage.
To give your webpage a title just type the following below,
HTML Code:
<HTML>
<HEAD>
<TITLE>Your Title Here</TITLE>
</HEAD>In the Title tag, what ever you name it, your webpage will display it at the top of your web browser. Also if you noticed, We inserted two of the same tags twice. But at the end of the second tags they start off with a forward slash within the brackets ( / ). This slash is very important in HTML. A forward slash is used to end a tag after you've completed putting all of your items within it. After you start a tag, its very important to close it. If you don't close your tags. Then your webpage may end up with errors!
Now lets explain these Tags,
<HEAD> TAG: This tag is basically for things the viewer will not see (except for the title). This tag can be used for scripts, meta tags, and much more. Its less important for this tutorial. But it is still always needed for your page title.
<TITLE> TAG: As mentioned above, This tag is used for naming your webpage. What ever you name your webpage, it will show up at the TopLeft corner of your website. Everytime someone visits your website, the title will be there for them to see.
Now we're still not done. You still want to put things on your website for people to see right? Well like a written letter or story book, webpages require a body. A body is an area where most of everything comes up.
Where going to put something in this body. Just some plain text. Maybe "Hello World!" or "TGS Rulez!" *your choice*. And to do that just type the following,
HTML Code:
<HTML>
<HEAD>
<TITLE>Your Title Here</TITLE>
</HEAD>
<BODY>
Furries ftw
</BODY>
Now we have a webpage with text in it.
<BODY> TAG: This tag is needed in order for all of your images, text, videos, and much more to show up on your webpage. Its actually the heart of your webpage.
Now your maybe wanting to see your webpage. But hang on! We're almost done. Theres just one more thing we need to do before taking a look at our masterpiece. Haven't figured it out. Well take a look below,
HTML Code:
<HTML>
<HEAD>
<TITLE>Your Title Here</TITLE>
</HEAD>
<BODY>
Furries ftw
</BODY>
</HTML>You Must Close Your <HTML> tag!!! This will complete your website.
*NOTE*
As a tutorial I'm just pointing this out so you don't publish your website without closing your <HTML> Tag. If your just editing your website, then you can still preview it. You will see more in lesson 3.
Now we have a full fledged webpage! But now you would like to see it on you web browser I am sure. Take a look at lesson 3!
Lesson 3: Getting your codes on your web browser!
Now I must apologize. I should have mentioned this back in lesson 2. But I wanted to make sure you've completed all of the basic HTML codes in notepad.
Now that we have all of our code in place. Its time to preview it on our webpage. Now to do this, we have save our webpage. But we must save it as a specific file. So click File>Save As. And at the bottom there is a text area to name your file. You want to type the name of your webpage and the file type. This is how you save a webpage file,
"yourwebfile.html"
You don't want to save it as yourwebfile.txt. That way, you wouldn't be able to preview it on your web browser.
Another way to save your file for the web is,
"yourwebfile.htm"
I guess HTM is a shorter form for the file type...
After naming your file, save it to your desktop *or anywhere you please*. After that open it up in your prefered web browser. If you noticed, everything you did in notepad with HTML has appared on your webpage. And at the top left corner of your webpage is the title! If all of this shows on your webpage, then you have sucessfully cunstructed your first website!
