xX-==-HTML Programming by MistiKmaN-==-Xx
What is HTML?
Hyper Text Mark up Language
A HTML file is a Text file containing small markup tags.
These Markup Tags tell us how to display the page.
If you want to learn more read on.
If you are running on Windows, open Notepad.
If you are on Mac open Simple Text.
If you are on OSX start textedit, and change the following preferences: Open the "Format" menu and select "Plain text" instead of "Rich text". Then open the "Preferences" window under the "Text Edit" menu and select "Ignore rich text commands in HTML files". Your HTML code will probably not work if you do not change the preferences above!
Now type in the following text:
CODE
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>
Save the file as "My Page.html" Or .htm
Start your internet browser and select "open".
Now select the page you just created, I.E. "My Page.html".
And there you will see the code in action!
The Code explained
The first tag in your file is <html> this tells the browser that it is the start of an HTML document. The last tag, </html> Signifies the end. The "/" Symbols almost always signifies the end of a tag. The text between the <head> and </head> tags, is the header informaiton. This does not appear in your HTML window. The text between the <title> and </title> tags is the title of your document. The title is displayed in your browsers caption. The text between the <body> tags is what appears in your browser. The text between the <b> tags, tells the browser that the text between the tags is bold. As for the .htm or .html extension, it depends how old of a computer you are using. Older programs only allowed the use of 3 letter extensions, but that is fairly old, I trust that everybody here is using atleast Windows 98 or later. I do not know about mac, alhtough I am fairly sure OSX allows .html.
That was the basics, it doesn't get much harder than that.
Elements explained
This is an HTML element;
CODE
<b>This text is bold</b>
The element starts with a start tag in this case <b>
The content of the element is: This text is bold.
The element ends with an end tag in this case as you would have guessed: </b>
In the previous example, the <body> tags are also elements. I.E.
CODE
<body>
This is my first homepage. <b>This text is bold</b>
</body>
Headings and Paragraphs
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading. I.E.
CODE
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
HTML automatically adds an extra blank line before and after a heading.
Paragraphs are defined with the <p> tag. I.E.
CODE
<p>This is a paragraph</p>
<p>This is another paragraph</p>
Line Breaks
A line break is when you want to break a line, but don't want to start a new paragraph. The <br> tag signifies the line break command. Like this
CODE
<p>This <br> is a para<br>graph with line breaks</p>
Comments in HTML
Comments will not be displayed in a browser, from my experience they are used for "Training" as I would say. People read the source of your page, you have a comment in there explaining something. Like, if I had written my code into a HTML documents you could put a comment below it explaining to the reader what the code does. To insert a comment simply do this:
CODE
<!-- This is a comment -->
As you would notice you need an exclamation mark at the start, but not the end, pretty handy, eh?
Recap on Elements
Each element has an element name (body, h1, b)
The start tag is the name surrounded by the angled brackets: <b>
The end tag is the slash and name surrounded by the angled parenthses: </b>
The element content is what's in between the sgtart and end tag.
HTML tag attributes
HTML tags can have attributes. Attributes provide extra information to an HTML element. Attributes always come in name/values pairs like this: name="value". Attributes are always specified in the start of an HTML element. Some examples are:
CODE
<h1> defines the start of a heading.
<h1 align="center"> has additional information about the alignment.
CODE
<body> defines the body of an HTML document.
<body bgcolor="yellow"> has additional information about the background color.
Always quote the attribute values. Keep attributes enclosed by qutoes, the double quotes are the most common although single quotes are still allowed. Attributes are case sensitive, the recommended way for most browsers would be to keep them in lower case. When situations occur when you must put an atrribute within an attribute write it like this: name='Glenn "MistiKman" Lyons' (Yes, Glenn Lyons is my real name.)
Character entities
Okay these are a little annoying, some character in HTML have special meanings, such as the angled bracket (<), the angled bracket is also the less than sign. If you want the browser to actually display these, we must insert character entities. A character entity has 3 parts; An ampersand (&) with an entity name or a hash (#) with an entity number and finally a semi-colon (
. To display the less than sign you would write this: < or #60; I would recommend using an entity name instead of a number as the names are easier to remember. Although a disadvantage is that not all browsers support the newest entity names, while the support for the numbers are very good in almost all browsers. Also the entities are case sensitive. Just remember that. Normally HTML will truncate spaces in your text. Meaning that if you had 10 spaces between 2 words, HTML will remove 9 of them. To stop this use the charcter entity. If you ever want a full list of character entities just ask me on MSN. "Email Removed"">"Email Removed"
Links
HTML uses the <a> (anchor) tag to create a link to another document. An anchor can point to any resource on the web; an HTML page, Music file, a movie, Word Document etc. To create an anchor just do this.
CODE
<a href="www.mmorpguides.com">Click here!</a>
The <a> tag is used to create an anchor to link from, while the href attribute is used to adress the document it is linked to. And the words between the tags, in this case "Click here!", is used as the displayed text. So "Click here!" would appear, and when I click on it, it would take me to www.mmorpguides.com. So actually it would appear like this: Click here!
The target attribute allows you to specify where the linked document will be opened. To open in a new window simply do this:
CODE
<a href="www.mmorpguides.com"target="_blank">Click here!</a> When you are creating an anchor it is very useful to add a forward slash (/) to the end of the link. This way the server doesn't process the 2 requests. Because if you have noticed, when you add an adress to the adress bar such as, www.mmorpguides.com, it always changes it to look like this: http://www.mmorpguides.com/ So to make it a little faster simply add '/' to the end of the link. :smile:
Frames
Okay, frames are a little tricky. But you should get the hang of it fast enough. With frames you can display more than one HTML document in a single browser window. Each of the documents are called a frame. And each is dependant on the others. Some disadvantages of using frames include; Harder to keep track of more HTML documents, it is difficult to print an entire page and slower loading. The <frameset> tag defines how to display as in Vertically or Horizontally. Or to be more precise as used in the actual code, Rows or Columns. For those of you that may get confused of which is which Rows go across, Columns go up and down.
In the example I am about to type up, we will have a frameset that splits 2 vertically or by 2 columns.:wink: You should start out writing the code like this:
What is HTML?
Hyper Text Mark up Language
A HTML file is a Text file containing small markup tags.
These Markup Tags tell us how to display the page.
If you want to learn more read on.
If you are running on Windows, open Notepad.
If you are on Mac open Simple Text.
If you are on OSX start textedit, and change the following preferences: Open the "Format" menu and select "Plain text" instead of "Rich text". Then open the "Preferences" window under the "Text Edit" menu and select "Ignore rich text commands in HTML files". Your HTML code will probably not work if you do not change the preferences above!
Now type in the following text:
CODE
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>
Save the file as "My Page.html" Or .htm
Start your internet browser and select "open".
Now select the page you just created, I.E. "My Page.html".
And there you will see the code in action!
The Code explained
The first tag in your file is <html> this tells the browser that it is the start of an HTML document. The last tag, </html> Signifies the end. The "/" Symbols almost always signifies the end of a tag. The text between the <head> and </head> tags, is the header informaiton. This does not appear in your HTML window. The text between the <title> and </title> tags is the title of your document. The title is displayed in your browsers caption. The text between the <body> tags is what appears in your browser. The text between the <b> tags, tells the browser that the text between the tags is bold. As for the .htm or .html extension, it depends how old of a computer you are using. Older programs only allowed the use of 3 letter extensions, but that is fairly old, I trust that everybody here is using atleast Windows 98 or later. I do not know about mac, alhtough I am fairly sure OSX allows .html.
That was the basics, it doesn't get much harder than that.
Elements explained
This is an HTML element;
CODE
<b>This text is bold</b>
The element starts with a start tag in this case <b>
The content of the element is: This text is bold.
The element ends with an end tag in this case as you would have guessed: </b>
In the previous example, the <body> tags are also elements. I.E.
CODE
<body>
This is my first homepage. <b>This text is bold</b>
</body>
Headings and Paragraphs
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading. I.E.
CODE
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
HTML automatically adds an extra blank line before and after a heading.
Paragraphs are defined with the <p> tag. I.E.
CODE
<p>This is a paragraph</p>
<p>This is another paragraph</p>
Line Breaks
A line break is when you want to break a line, but don't want to start a new paragraph. The <br> tag signifies the line break command. Like this
CODE
<p>This <br> is a para<br>graph with line breaks</p>
Comments in HTML
Comments will not be displayed in a browser, from my experience they are used for "Training" as I would say. People read the source of your page, you have a comment in there explaining something. Like, if I had written my code into a HTML documents you could put a comment below it explaining to the reader what the code does. To insert a comment simply do this:
CODE
<!-- This is a comment -->
As you would notice you need an exclamation mark at the start, but not the end, pretty handy, eh?
Recap on Elements
Each element has an element name (body, h1, b)
The start tag is the name surrounded by the angled brackets: <b>
The end tag is the slash and name surrounded by the angled parenthses: </b>
The element content is what's in between the sgtart and end tag.
HTML tag attributes
HTML tags can have attributes. Attributes provide extra information to an HTML element. Attributes always come in name/values pairs like this: name="value". Attributes are always specified in the start of an HTML element. Some examples are:
CODE
<h1> defines the start of a heading.
<h1 align="center"> has additional information about the alignment.
CODE
<body> defines the body of an HTML document.
<body bgcolor="yellow"> has additional information about the background color.
Always quote the attribute values. Keep attributes enclosed by qutoes, the double quotes are the most common although single quotes are still allowed. Attributes are case sensitive, the recommended way for most browsers would be to keep them in lower case. When situations occur when you must put an atrribute within an attribute write it like this: name='Glenn "MistiKman" Lyons' (Yes, Glenn Lyons is my real name.)
Character entities
Okay these are a little annoying, some character in HTML have special meanings, such as the angled bracket (<), the angled bracket is also the less than sign. If you want the browser to actually display these, we must insert character entities. A character entity has 3 parts; An ampersand (&) with an entity name or a hash (#) with an entity number and finally a semi-colon (
. To display the less than sign you would write this: < or #60; I would recommend using an entity name instead of a number as the names are easier to remember. Although a disadvantage is that not all browsers support the newest entity names, while the support for the numbers are very good in almost all browsers. Also the entities are case sensitive. Just remember that. Normally HTML will truncate spaces in your text. Meaning that if you had 10 spaces between 2 words, HTML will remove 9 of them. To stop this use the charcter entity. If you ever want a full list of character entities just ask me on MSN. "Email Removed"">"Email Removed"Links
HTML uses the <a> (anchor) tag to create a link to another document. An anchor can point to any resource on the web; an HTML page, Music file, a movie, Word Document etc. To create an anchor just do this.
CODE
<a href="www.mmorpguides.com">Click here!</a>
The <a> tag is used to create an anchor to link from, while the href attribute is used to adress the document it is linked to. And the words between the tags, in this case "Click here!", is used as the displayed text. So "Click here!" would appear, and when I click on it, it would take me to www.mmorpguides.com. So actually it would appear like this: Click here!
The target attribute allows you to specify where the linked document will be opened. To open in a new window simply do this:
CODE
<a href="www.mmorpguides.com"target="_blank">Click here!</a> When you are creating an anchor it is very useful to add a forward slash (/) to the end of the link. This way the server doesn't process the 2 requests. Because if you have noticed, when you add an adress to the adress bar such as, www.mmorpguides.com, it always changes it to look like this: http://www.mmorpguides.com/ So to make it a little faster simply add '/' to the end of the link. :smile:
Frames
Okay, frames are a little tricky. But you should get the hang of it fast enough. With frames you can display more than one HTML document in a single browser window. Each of the documents are called a frame. And each is dependant on the others. Some disadvantages of using frames include; Harder to keep track of more HTML documents, it is difficult to print an entire page and slower loading. The <frameset> tag defines how to display as in Vertically or Horizontally. Or to be more precise as used in the actual code, Rows or Columns. For those of you that may get confused of which is which Rows go across, Columns go up and down.
In the example I am about to type up, we will have a frameset that splits 2 vertically or by 2 columns.:wink: You should start out writing the code like this:
Code:
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
Now heres an explanation: <frameset cols="25%,75%"> This as we already know states the presence of frames. It also states that the frames are split vertically (cols). The 25% and 75% tell us how much of the browser each of the frames take up. So the first frame takes up 25% of the browser and the other frame takes up 75% of the browser. Fairly simple, eh? Now for the rest of the code; <frame src="frame_a.htm"> <frame src=> This is the command that tells us the name of the document to include. <"frame_a.htm"> Is the actual name of the document. Also you can set it so one column sets itself to the rest of the browser, simply do this:
CODE
<frameset cols="25%,75%">
The frameset can also be set in pixels, I don't like to use pixels so I used percentages. You cannot use the <body></body> tags together with the <frameset></frameset> tags! However, if you add a <noframes> tag containing some text for browsers that do not support frames, you will have to enclose the text in <body></body> tags! Very annoying...
Tables
Tables are defined with the <table> tag, easy enough. The tables are divided into rows, with the <tr> tag. And each row is divided into data cells with the <td> tag (td stands for table data), the table data is what is displayed im each cell. The cells can contain anything from, images, text, forms or even lists. Here is an example:
CODE
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
As you may have noticed, There is a border attribute. The attribute if you remember from previous parts of the thread is "1". If you do not specify a border attribute then no border will appear. You can also put in headings. These as you owuld know most likely are very useful. To apply a heading simply add the <th> tag after the <tr> tag. If you aren't exactly following it, here is an example:
CODE
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Simply type this into your text editor and save it into a HTML file to see what it comes out like.
You can also have an empty cell, but it generally looks unappealing as the inner border disappears. To have an empty cell just don't anything in the cells element content. So just do this: <td></td>. Simple! But! To stop it looking unappealing, put the non-breaking space in the element content, for those of you who don't remember an element content is <td>"this is the element content"</td> and also the non-breaking space is so, type this: <td> </td>.
Lists
Lists are clear sailing, and also very useful. There are 3 different types of lists; Unordered lists (Lists with bullet points), Ordered lists (Lists with numbered prefixes) and definition lists (A list of words with a caption under each word). An unordered list starts with a <ul> tag. Each list item is defined with an <li> tag. So to put it even simpler;
CODE
<ul>
<li>Glenn</li>
<li>Lyons</li>
</ul>
To create an ordered list it is exactly the same except instead of <ul> you put <ol>.
CODE
<ul>
<li>Glenn</li>
<li>Lyons</li>
</ul>
Definition lists are also easy, just require a bit more typing. Like this;
CODE
<dl>
<dt>Glenn</dt>
<dd>My first name</dd>
<dt>Lyons</dt>
<dd>My last name</dd>
</dl>
Now here are the meaning of all the tags; <ul> means unordered list, simply states the presence of one. <ol> Ordered list, also states the presence. <dl> Means definition list, as you would have guessed it states the presence of a definition list. <li> This is the list item. <dt> Definition term. Simple. <dd> Definition-list definition. See, lists were heaps easy.
Forms and Input!
Any succesful website contains forms, and trust me, they are pretty annoying especially if you're doing it wrong. But if you really want to get into HTML you'll need to learn this. It is very important to master these. Well, let's begin.
A form is an area that contains form elements. Form elements are elements that allow the user to input information. A for is defined with the <form> tag. <input> The most used tag in the form. The type of input os specified with inputs attribute. Text input:
CODE
<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>
Radio Input:
CODE
<form>
<input type="radio" name="sex" value="male"> Male
<br>
<input type="radio" name="sex" value="female"> Female
</form>
Checkbox Input:
CODE
<form>
I have a bike:
<input type="checkbox" name="vehicle" value="Bike">
<br>
I have a car:
<input type="checkbox" name="vehicle" value="Car">
<br>
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane">
</form>
Now for action attribute and submit buttons. These are quite annoying.
CODE
<form name="input" action="html_form_action.asp"
method="get">
Username:
<input type="text" name="user">
<input type="submit" value="Submit">
</form>
If you type in a username in that box it would divert your input to a page called html_form_action.asp. That page will show you the recieved input. To put multiple input boxes with a submit button do somehitng like this;
CODE
<html>
<body>
<form name="input" action="html_form_action.asp" method="get">
Type your first name:
<input type="text" name="FirstName" value="Mickey" size="20">
<br>Type your last name:
<input type="text" name="LastName" value="Mouse" size="20">
<br>
<input type="submit" value="Submit">
</form>
<p>
If you click the "Submit" button, you will send your input to a new page called html_form_action.asp.
</p>
</body>
</html>
You can easily make an input set with a submit button that will send somebody an e-mail like this;
CODE
<form action="MAILTO:"Email Removed"" method="post" enctype="text/plain">
<h3>This form sends an e-mail to me.</h3>
Name:<br>
<input type="text" name="name"
value="your name" size="20">
<br>
Mail:<br>
<input type="text" name="mail"
value="your e-mail" size="20">
<br>
Comment:<br>
<input type="text" name="comment"
value="yourcomment" size="40">
<br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
You can easily just put in any form within the body to include another form. Just experiment until you get it right.
Images
In HTML images are defined by the <img> tag. The <img> tag is empty, which means it only contains attributes and has no closing tag. To display an image you need to include "src" attribute. Src stands for source. The value of the src attribute is the location of the image you want to add.
CODE
<img src="url">
The URL points to the location of the image. So the quiet.gif image on mmorpguides.com is located at http://www.mmorpguides.com/forum/style_emo...s/wow/quiet.gif
http://www.mmorpguides.com is the website. Forum is the directory folder. Style_emoticons, is a folder wihtin the directory, as is wow, and quiet.gif is the actual image.
I'm not actually sure if that's how it is for this site. Different websites have diferent ways of containing their images. The alt attribute is not something I quite got at first, but read it a couple times, you'll get it. The alt attribute is used to define an alternate text for an image. If somebodies browser does not display images, then they simply only have to hover their mouse over the missing image and a text will appear.
CODE
<img src="boat.gif" alt="Big Boat">
To make an image your background, then simply when adding the body tag to your website, change it to this; <body background="image.jpg"> The ending tag still remains the same. If the image is smaller then the browser then the miage will just repeat itself. If you wanted to make an image bigger or smaller, then when creating the tag, don't put the '>' at the end of boat.gif instead do this;
CODE
<img src="boat.gif"
width="20" height="20">
You can change the values of the width and height attributes to suit your needs. All measurements are in pixels.
If you want to make it so when you click on an image it takes you somewhere then make this the code;
CODE
<a href="lastpage.htm">
<img border="0" src="buttonnext.gif" width="65" height="38">
</a>
If you have actually paid attention to any of this, then you would know what the attributes and values are and how to change them. If not it is still very simple to learn just from looking at it.
Backgrounds and colours
The <body> tag has another attribute! bgcolor. The value of the attribute can be in either hexadecimal, r,g,b or just simply a colour name. When adding the bgcolor attribute do it like this;
CODE
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
All of those lines will set the background colour to black. That was quick. Here are some basic colours:
Black, #000000, rgb(0,0,0) Red, #FF0000, rgb(255,0,0) Green, #00FF00, rgb(0,255,0) Blue, #0000FF, rgb(0,0,255) White, #FFFFFF, rgb(255,255,255) There are 16 colour names that work with HTML they are; aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. There is more on the colours, just look them up on google.
And that concludes my lesson! Please, give feedback!
