Savage X
11-04-2006, 08:59 PM
This tutorial was created by a mod and coder of my site; LegosJedi.
Hey there, everyone. This first tutorial will cover the basics of HTML, then, in later tutorials, well get to more advanced HTML, and then onto CSS, PHP, MySQL (Not pronounced 'My - Sequel'. It's My S Q L.), and then I'm not sure what we'll do. We might go into stuff like JavaScript, and XHTML, and maybe some other stuff. I'm not sure yet. Anyway, Let's get started with this tut!
INTRODUCTION
Alrighty, let's start with HTML. I'm talking about the acronym. What does 'HTML' stand for? HTML stands for Hyper Text Markup Language. HTML is used to make websites. Duh. ;) HTML tells the browser what to display by using tags.
<i> is an example of a tag. That would tell the browser that this block of text is going to be italicized. Most tags need a closing tag, so, for <i>, it would be </i>. If you haven't noticed, this is a lot like BBCode.
There are tons of tags. There are tags that import style-sheets (more on that later), there are tags that create tables, there are tags that change the font and color of text, etc. There are so many ways to make a website using all of these tags.
SOFTWARE
Okay, so you know a little about HTML already. Now, what software should I be using? You all probably have heard about programs called Dreamweaver, and FrontPage, and such. You can use those, but they are mainly WYSIWYG editors. WYSIWYG stands for What You See Is What You Get. This is helpful for people who have no HTML experience, but, since this tutorials are about coding in HTML, we will not be using them.
What do I use? Well, it depends on what language I'm coding. If I'm coding just regular HTML, I would use NotePad for Windows, or TextEdit for Mac. However, if I'm doing PHP coding, I use PHP Designer. I use it because it has a nice feature where it'll go through your code, and check for errors. But, since this is not PHP, I would suggest using NotePad, or TextEdit. If you would like to use other software, that's fine. NOTE: There is some 'set-up' required for TextEdit to code in HTML.*
YOUR FIRST HTML DOCUMENT
Alrighty, let's get started with the actual coding. We'll make a basic page to begin with. Open up your software, and type the following coding:
<html>
<head>
<title>My First Web page!</title>
</head>
</body>
Hello World Wide Web!
</body>
</html>
So, what does all this mean? Let's dissect it.
First off, the <html> tags tell the browser that this is an HTML document. The <head> tags contain all the tags that go in the header section. The <title> tag displays the page's title. Look up at the top of your browser. What does it say? That's the text in the title tag. The <body> tag contains all the tags that will be displayed in the browser.
Ok, now, there are sites out there that use the extension .html. However, some other sites use the .htm extension. Which should you save your pages as? Well, it doesn't matter. I use the .htm extension, but I don't know why. The .htm extension is around from the older days when software only allowed three letter extensions. Now, we think that it is safe to use the .html extension with newer software.
ELEMENTS
What are elements? Well, first, we must define tags. What are tags? Tags consist of angle brackets (< and >), and the element content. Okay, so now what is an element? An element consists of the start tag, the content, and the end tag. So, for example, the start <body> tag, the content in it, and the close </body> tag make up the body element.
TAG ATTRIBUTES
Tags can have things called attributes. These attributes provide additional information. For example, say you wanted to add a background color to the <body> tags. You would out this**:
<body bgcolor='red'>That sets the background color to red. Attributes always come in name/value pairs, like this: name='value'.
All attribute values need to be in quotes. You can use either '' or "". If, for some reason, the value contains quotes, then you would use the singly quotes(''). For example, name='Charlie "Stomach-Puncher" Stanley'.
BASIC TAGS
There are several basic tags that provide some useful functions. We'll first talk about the headings.
Headings come in a variety of sizes. They tags range from <h1> to <h6>, each varying in size, with <h1> being the largest, and <h6> being the smallest. HTML automatically adds a line break before and after a heading.
Paragraphs are designated by the <p> tag. Useful for, um, distinguishing paragraphs.
And, finally, there's the <br> tag. This tag creates a line break where it is placed. NOTE: If you add line breaks by pressing enter, they will most of the time not be interpreted by the browser as line breaks.
The <b> tag makes the text bold. The <i> tag makes text italicized. The <u> tag makes text underlined.
You can change the color of the text by using this tag:
<font color='red'>Of course, you can replace red with the color of your choice.
To align text, use the <div> tag, with the 'align' attribute. You can set the value of the attribute to right, center, left, or justify.
CONCLUSION
Okay, all of these tags should help you get started making your site. If you have problems, check to see that you included the closing tag where you wanted it, and make sure that the tag yo typed is a valid tag.
In the next tutorial, we'll go into more advanced stuff, such as making forms, meta data, and more. So, until then, if you want to check out more on HTML, check out this site (http://www.w3chools.com/html/default.asp).
Thanks for reading!
NOTES
* To set-up TextEdit for HTML coding, you need to go up to Format, and click "Make Plain Text". Then, you need to go to preferences, and, in the "Open and Save" tab, check "Ignore rich text commands in HTML files. Now, you're all set!
** When we later get into using style-sheets, this attribute won't be needed.
LIST OF BASIC HTML TAGS
<b> Makes text bold
<i> Makes text italicized
<u> Makes text underlined
<br> Makes text go to the next line. Kinda like using 'Enter' on a word document (<br /> - XHTML)
<p> Automatically sends text 2 lines down. Kinda like using 'Enter' twice on a word document
<a href="URL"> Makes a link
<font> Changes the font, add attributes like: <font color="" size="" face="">
<img src="URL"> Displays an image
<table> Starts a table
<tr> Adds a new row in a table
<td> Puts data in the table
<hr> Creates a horizontal line
<ul> Creates a bulletted list
<ol> Creates a numbered list
<li> Adds an item to the list
<marquee> Creates a marquee
<center> Centers text
<div> Adds a divider. Put almost any attribute you want here.
Hey there, everyone. This first tutorial will cover the basics of HTML, then, in later tutorials, well get to more advanced HTML, and then onto CSS, PHP, MySQL (Not pronounced 'My - Sequel'. It's My S Q L.), and then I'm not sure what we'll do. We might go into stuff like JavaScript, and XHTML, and maybe some other stuff. I'm not sure yet. Anyway, Let's get started with this tut!
INTRODUCTION
Alrighty, let's start with HTML. I'm talking about the acronym. What does 'HTML' stand for? HTML stands for Hyper Text Markup Language. HTML is used to make websites. Duh. ;) HTML tells the browser what to display by using tags.
<i> is an example of a tag. That would tell the browser that this block of text is going to be italicized. Most tags need a closing tag, so, for <i>, it would be </i>. If you haven't noticed, this is a lot like BBCode.
There are tons of tags. There are tags that import style-sheets (more on that later), there are tags that create tables, there are tags that change the font and color of text, etc. There are so many ways to make a website using all of these tags.
SOFTWARE
Okay, so you know a little about HTML already. Now, what software should I be using? You all probably have heard about programs called Dreamweaver, and FrontPage, and such. You can use those, but they are mainly WYSIWYG editors. WYSIWYG stands for What You See Is What You Get. This is helpful for people who have no HTML experience, but, since this tutorials are about coding in HTML, we will not be using them.
What do I use? Well, it depends on what language I'm coding. If I'm coding just regular HTML, I would use NotePad for Windows, or TextEdit for Mac. However, if I'm doing PHP coding, I use PHP Designer. I use it because it has a nice feature where it'll go through your code, and check for errors. But, since this is not PHP, I would suggest using NotePad, or TextEdit. If you would like to use other software, that's fine. NOTE: There is some 'set-up' required for TextEdit to code in HTML.*
YOUR FIRST HTML DOCUMENT
Alrighty, let's get started with the actual coding. We'll make a basic page to begin with. Open up your software, and type the following coding:
<html>
<head>
<title>My First Web page!</title>
</head>
</body>
Hello World Wide Web!
</body>
</html>
So, what does all this mean? Let's dissect it.
First off, the <html> tags tell the browser that this is an HTML document. The <head> tags contain all the tags that go in the header section. The <title> tag displays the page's title. Look up at the top of your browser. What does it say? That's the text in the title tag. The <body> tag contains all the tags that will be displayed in the browser.
Ok, now, there are sites out there that use the extension .html. However, some other sites use the .htm extension. Which should you save your pages as? Well, it doesn't matter. I use the .htm extension, but I don't know why. The .htm extension is around from the older days when software only allowed three letter extensions. Now, we think that it is safe to use the .html extension with newer software.
ELEMENTS
What are elements? Well, first, we must define tags. What are tags? Tags consist of angle brackets (< and >), and the element content. Okay, so now what is an element? An element consists of the start tag, the content, and the end tag. So, for example, the start <body> tag, the content in it, and the close </body> tag make up the body element.
TAG ATTRIBUTES
Tags can have things called attributes. These attributes provide additional information. For example, say you wanted to add a background color to the <body> tags. You would out this**:
<body bgcolor='red'>That sets the background color to red. Attributes always come in name/value pairs, like this: name='value'.
All attribute values need to be in quotes. You can use either '' or "". If, for some reason, the value contains quotes, then you would use the singly quotes(''). For example, name='Charlie "Stomach-Puncher" Stanley'.
BASIC TAGS
There are several basic tags that provide some useful functions. We'll first talk about the headings.
Headings come in a variety of sizes. They tags range from <h1> to <h6>, each varying in size, with <h1> being the largest, and <h6> being the smallest. HTML automatically adds a line break before and after a heading.
Paragraphs are designated by the <p> tag. Useful for, um, distinguishing paragraphs.
And, finally, there's the <br> tag. This tag creates a line break where it is placed. NOTE: If you add line breaks by pressing enter, they will most of the time not be interpreted by the browser as line breaks.
The <b> tag makes the text bold. The <i> tag makes text italicized. The <u> tag makes text underlined.
You can change the color of the text by using this tag:
<font color='red'>Of course, you can replace red with the color of your choice.
To align text, use the <div> tag, with the 'align' attribute. You can set the value of the attribute to right, center, left, or justify.
CONCLUSION
Okay, all of these tags should help you get started making your site. If you have problems, check to see that you included the closing tag where you wanted it, and make sure that the tag yo typed is a valid tag.
In the next tutorial, we'll go into more advanced stuff, such as making forms, meta data, and more. So, until then, if you want to check out more on HTML, check out this site (http://www.w3chools.com/html/default.asp).
Thanks for reading!
NOTES
* To set-up TextEdit for HTML coding, you need to go up to Format, and click "Make Plain Text". Then, you need to go to preferences, and, in the "Open and Save" tab, check "Ignore rich text commands in HTML files. Now, you're all set!
** When we later get into using style-sheets, this attribute won't be needed.
LIST OF BASIC HTML TAGS
<b> Makes text bold
<i> Makes text italicized
<u> Makes text underlined
<br> Makes text go to the next line. Kinda like using 'Enter' on a word document (<br /> - XHTML)
<p> Automatically sends text 2 lines down. Kinda like using 'Enter' twice on a word document
<a href="URL"> Makes a link
<font> Changes the font, add attributes like: <font color="" size="" face="">
<img src="URL"> Displays an image
<table> Starts a table
<tr> Adds a new row in a table
<td> Puts data in the table
<hr> Creates a horizontal line
<ul> Creates a bulletted list
<ol> Creates a numbered list
<li> Adds an item to the list
<marquee> Creates a marquee
<center> Centers text
<div> Adds a divider. Put almost any attribute you want here.