JobMufc
17-07-2005, 09:11 AM
Some habbos have trouble with Html so I have made a Basic Html Tutorial for all habbos who have trouble. Hope it helps!
To start this off I will show:
How To Make A Title
Every website needs a title. Here is what you need to type:
<title>My first Website</title> Change the text from "My first Website" to suit your own needs. The title text is preceded by the start tag <title> and ends with the matching end tag </title>. The title should be placed at the beginning of your document.
To try this out, type the above into a text editor and save the file as "test.html", then view the file in a web browser. If the file extension is ".html" or ".htm" then the browser will recognize it as HTML. Most browsers show the title in the window caption bar.
Headers and Paragraphs
If you have used Microsoft Word, you will be familiar with the built in styles for headings of differing importance. In HTML there are six levels of headings. H1 is the most important, H2 is slightly less important, and so on down to H6, the least important.
Here is how to add an important heading:
<h1>An important heading</h1>and here is a slightly less important heading:
<h2>A slightly less important heading</h2>Each paragraph you write should start with a <p> tag. The </p> is optional, unlike the end tags for elements like headings. For example:
<p>This is the first paragraph.</p><p>This is the second paragraph.</p>
Adding Images To Your Website
Images can be used to make your Web pages distinctive and greatly help to get your message across. The simple way to add an image is using the <img> tag. Let's assume you have an image file called "peter.jpg" in the same folder/directory as your HTML file. It is 200 pixels wide by 150 pixels high.
<img src="peter.jpg" width="200" height="150">The src attribute names the image file. The width and height aren't strictly necessary but help to speed the display of your Web page. Something is still missing! People who can't see the image need a description they can read in its absence. You can add a short description as follows:
<img src="peter.jpg" width="200" height="150"alt="My friend Peter">The alt attribute is used to give the short description, in this case "My friend Peter". For complex images, you may need to also give a longer description. Assuming this has been written in the file "peter.html", you can add one as follows using the longdesc attribute:
<img src="peter.jpg" width="200" height="150"alt="My friend Peter" longdesc="peter.html">You can create images in a number of ways, for instance with a digital camera, by scanning an image in, or creating one with a painting or drawing program. Most browsers understand GIF and JPEG image formats, newer browsers also understand the PNG image format. To avoid long delays while the image is downloaded over the network, you should avoid using large image files.
Generally speaking, JPEG is best for photographs and other smoothly varying images, while GIF and PNG are good for graphics art involving flat areas of color, lines and text. All three formats support options for progressive rendering where a crude version of the image is sent first and progressively refined.
Adding Links To Other Pages
What makes the Web so effective is the ability to define links from one page to another, and to follow links at the click of a button. A single click can take you right across the world!
Links are defined with the <a> tag. Lets define a link to the page defined in the file "peter.html":
This a link to <a href="peter.html">Peter's page</a>.The text between the <a> and the </a> is used as the caption for the link. It is common for the caption to be in blue underlined text.To link to a page on another Web site you need to give the full Web address (commonly called a URL), for instance to link to www.w3.org you need to write:
This is a link to <a href="http://www.w3.org/">W3C</a>.You can turn an image into a hypertext link, for example, the following allows you to click on the company logo to get to the home page:
<a href="/"><img src="logo.gif" alt="home page"></a>Three Kinds Of ListsHTML supports three kinds of lists. The first kind is a bulletted list, often called an unordered list. It uses the <ul> and <li> tags, for instance:
<ul> <li>the first list item</li> <li>the second list item</li> <li>the third list item</li></ul>Note that you always need to end the list with the </ul> end tag, but that the </li> is optional and can be left off. The second kind of list is a numbered list, often called an ordered list. It uses the <ol> and <li> tags. For instance:
<ol> <li>the first list item</li> <li>the second list item</li> <li>the third list item</li></ol>Like bulletted lists, you always need to end the list with the </ol> end tag, but the </li> end tag is optional and can be left off.
The third and final kind of list is the definition list. This allows you to list terms and their definitions. This kind of list starts with a <dl> tag and ends with </dl> Each term starts with a <dt> tag and each definition starts with a <dd>. For instance:
<dl> <dt>the first term</dt> <dd>its definition</dd> <dt>the second term</dt> <dd>its definition</dd> <dt>the third term</dt> <dd>its definition</dd></dl>The end tags </dt> and </dd> are optional and can be left off. Note that lists can be nested, one within another. For instance:
<ol> <li>the first list item</li> <li> the second list item <ul> <li>first nested item</li> <li>second nested item</li> </ul> </li> <li>the third list item</li></ol>You can also make use of paragraphs and headings etc. for longer list item
Comments
Comments can be a nice way to help yourself when you are coding your web page. Comments are invisible to a web browser when it displays your web page. The only way to view comments is to look at the source (html) code of the web page. In this way, you can leave yourself notes so that you don't forget something when you come back later to redesign the page. So, how is it done? To write a comment, you begin with a less than sign (<) followed directly by an exclaimation point (!) and two dashes (--). After this, you type in your coments. To end the comment, you use two dashes (--) followed directly by a greater than sign (>).
<!-- I am a comment. I feel invisible though. -->
You can comment on multiple lines, just be sure you remember to end the comment!
<!--
You can't see me....
unless you look at the page source code.
-->
To look at something more useful, you could use a comment to remind yourself that a section of code is supposed to perform a certain task:
<!-- This image should be aligned to the right, and have alt text -->
<IMG SRC="mypet.gif" align="right" alt="Look at my Kitty Cat!">
Of course, you do not need to have a kitty cat to qualify! Well, that does it for comments.
How to use HTML tags to manipulate your text
Okay, it's time to start making our text appear in different ways. Let's start by giving you some tags to work with:
<B></B> This is the tag for bold text.
Example:
<B>Howdy</B>
This will show up on your page like this:
Howdy
Here are a few more to start working with:
<U></U> Underline text
<U>Underline Me!</U>
Underline Me!
<I></I> Italics
<I>Isn't this fun?</I>
Isn't this fun?
<STRIKE></STRIKE>
<STRIKE>You're Out!</STRIKE>
You're Out!
<CENTER></CENTER>
<CENTER>This centers text on the page</CENTER>
This centers text on the page
Having fun yet? You can also use more than one tag at a time. Let's say you wanted something in bold and italics. To do this, just place both opening tags before the text.....and remember to close both tags afterwards....like this:
<B><I>I am bold AND Italic, which makes me cool!</I></B>
This will show up like this:
I am bold AND Italic, which makes me cool!
Does the order of the tags make a difference? In this case, it wouldn't matter which way you opened and closed the tags. However, working from inside out will help you see your code better, and will help when the order does matter! (such as placing the </HTML> tag before the </BODY> tag). Here's another way to look at working inside out. I could write the HTML this way:
<B>
<I>
I am bold AND Italic, which makes me cool!
</I>
</B>
This could get rather tedious. All you need to remember is that the text you have written is affected by every tag before it that has not been closed. The effect ends when each one of those tags is closed by it's closing tag.
So lets try three things: Bold, Italic, and underline!
<B><I><U>Would you stop tagging me!</B></I></U>
This will give us:
Would you stop tagging me!
But this:
<U><I><B>Would you stop</B></I>tagging me!</U>
would give us this!
Would you stop tagging me!
As you can see, the bold and italics were closed before the word "tagging"....but the underline remained open until the end of the exclamation. This caused the "tagging me!" portion to be underlined, while not being affected by the bold or italics tags!
Now let's use the center tag from above. Since the default alignment of everything is to the left, it's nice to have a way to place things in the center of the page. So let's do just that. Use the <CENTER> tag. Anything you place between the <CENTER> and </CENTER> tags will be centered on the page. Here is an example:
<CENTER>I'm in the middle!</CENTER>
This will give us the following:
I'm in the middle!
You can also use it with one or more of the other tags above, like this: <CENTER><B><I>Look at me now!</I></B></CENTER>
Special Characters
So, have you been wondering how to add an extra space on your page, or how to get a copyright symbol to show up? Then let's see how right now! Special characters are placed on your page by using a special reference to the character you want to use. The reference will begin with an ampersand (&), will be followed by some text or numbers, and end with a semicolon (;) . So as an example, let's say you wanted to place an extra space between two words. To do this, you place the reference where you would like to add the extra space. Here is what you would do:
Hello there!
This gives us two spaces between "Hello" and "there!", like this:
Hello there!
The first space is added just using the "space" bar on the keyboard. The web browser will see the first space, but after that additional spaces will make no difference-- you will only see one space in the browser. By adding the reference, we forced the browser to add an extra space between the two words. You can add as many spaces as you would like by repeating the reference, like this:
Hello There!
This will create the first space, and 4 additional spaces between the two words, for a total of five spaces. It will be displayed like this:
Hello There!
The other one we will discuss is the copyright symbol. You use it the same way as an extra space, by placing its reference where you would like to see the symbol on the page. The reference for a copyright symbol is ©. Here's an example:
This page Copyright © 1999 by me!
This page Copyright © 1999 by me!
MORE COMING SOON
To start this off I will show:
How To Make A Title
Every website needs a title. Here is what you need to type:
<title>My first Website</title> Change the text from "My first Website" to suit your own needs. The title text is preceded by the start tag <title> and ends with the matching end tag </title>. The title should be placed at the beginning of your document.
To try this out, type the above into a text editor and save the file as "test.html", then view the file in a web browser. If the file extension is ".html" or ".htm" then the browser will recognize it as HTML. Most browsers show the title in the window caption bar.
Headers and Paragraphs
If you have used Microsoft Word, you will be familiar with the built in styles for headings of differing importance. In HTML there are six levels of headings. H1 is the most important, H2 is slightly less important, and so on down to H6, the least important.
Here is how to add an important heading:
<h1>An important heading</h1>and here is a slightly less important heading:
<h2>A slightly less important heading</h2>Each paragraph you write should start with a <p> tag. The </p> is optional, unlike the end tags for elements like headings. For example:
<p>This is the first paragraph.</p><p>This is the second paragraph.</p>
Adding Images To Your Website
Images can be used to make your Web pages distinctive and greatly help to get your message across. The simple way to add an image is using the <img> tag. Let's assume you have an image file called "peter.jpg" in the same folder/directory as your HTML file. It is 200 pixels wide by 150 pixels high.
<img src="peter.jpg" width="200" height="150">The src attribute names the image file. The width and height aren't strictly necessary but help to speed the display of your Web page. Something is still missing! People who can't see the image need a description they can read in its absence. You can add a short description as follows:
<img src="peter.jpg" width="200" height="150"alt="My friend Peter">The alt attribute is used to give the short description, in this case "My friend Peter". For complex images, you may need to also give a longer description. Assuming this has been written in the file "peter.html", you can add one as follows using the longdesc attribute:
<img src="peter.jpg" width="200" height="150"alt="My friend Peter" longdesc="peter.html">You can create images in a number of ways, for instance with a digital camera, by scanning an image in, or creating one with a painting or drawing program. Most browsers understand GIF and JPEG image formats, newer browsers also understand the PNG image format. To avoid long delays while the image is downloaded over the network, you should avoid using large image files.
Generally speaking, JPEG is best for photographs and other smoothly varying images, while GIF and PNG are good for graphics art involving flat areas of color, lines and text. All three formats support options for progressive rendering where a crude version of the image is sent first and progressively refined.
Adding Links To Other Pages
What makes the Web so effective is the ability to define links from one page to another, and to follow links at the click of a button. A single click can take you right across the world!
Links are defined with the <a> tag. Lets define a link to the page defined in the file "peter.html":
This a link to <a href="peter.html">Peter's page</a>.The text between the <a> and the </a> is used as the caption for the link. It is common for the caption to be in blue underlined text.To link to a page on another Web site you need to give the full Web address (commonly called a URL), for instance to link to www.w3.org you need to write:
This is a link to <a href="http://www.w3.org/">W3C</a>.You can turn an image into a hypertext link, for example, the following allows you to click on the company logo to get to the home page:
<a href="/"><img src="logo.gif" alt="home page"></a>Three Kinds Of ListsHTML supports three kinds of lists. The first kind is a bulletted list, often called an unordered list. It uses the <ul> and <li> tags, for instance:
<ul> <li>the first list item</li> <li>the second list item</li> <li>the third list item</li></ul>Note that you always need to end the list with the </ul> end tag, but that the </li> is optional and can be left off. The second kind of list is a numbered list, often called an ordered list. It uses the <ol> and <li> tags. For instance:
<ol> <li>the first list item</li> <li>the second list item</li> <li>the third list item</li></ol>Like bulletted lists, you always need to end the list with the </ol> end tag, but the </li> end tag is optional and can be left off.
The third and final kind of list is the definition list. This allows you to list terms and their definitions. This kind of list starts with a <dl> tag and ends with </dl> Each term starts with a <dt> tag and each definition starts with a <dd>. For instance:
<dl> <dt>the first term</dt> <dd>its definition</dd> <dt>the second term</dt> <dd>its definition</dd> <dt>the third term</dt> <dd>its definition</dd></dl>The end tags </dt> and </dd> are optional and can be left off. Note that lists can be nested, one within another. For instance:
<ol> <li>the first list item</li> <li> the second list item <ul> <li>first nested item</li> <li>second nested item</li> </ul> </li> <li>the third list item</li></ol>You can also make use of paragraphs and headings etc. for longer list item
Comments
Comments can be a nice way to help yourself when you are coding your web page. Comments are invisible to a web browser when it displays your web page. The only way to view comments is to look at the source (html) code of the web page. In this way, you can leave yourself notes so that you don't forget something when you come back later to redesign the page. So, how is it done? To write a comment, you begin with a less than sign (<) followed directly by an exclaimation point (!) and two dashes (--). After this, you type in your coments. To end the comment, you use two dashes (--) followed directly by a greater than sign (>).
<!-- I am a comment. I feel invisible though. -->
You can comment on multiple lines, just be sure you remember to end the comment!
<!--
You can't see me....
unless you look at the page source code.
-->
To look at something more useful, you could use a comment to remind yourself that a section of code is supposed to perform a certain task:
<!-- This image should be aligned to the right, and have alt text -->
<IMG SRC="mypet.gif" align="right" alt="Look at my Kitty Cat!">
Of course, you do not need to have a kitty cat to qualify! Well, that does it for comments.
How to use HTML tags to manipulate your text
Okay, it's time to start making our text appear in different ways. Let's start by giving you some tags to work with:
<B></B> This is the tag for bold text.
Example:
<B>Howdy</B>
This will show up on your page like this:
Howdy
Here are a few more to start working with:
<U></U> Underline text
<U>Underline Me!</U>
Underline Me!
<I></I> Italics
<I>Isn't this fun?</I>
Isn't this fun?
<STRIKE></STRIKE>
<STRIKE>You're Out!</STRIKE>
You're Out!
<CENTER></CENTER>
<CENTER>This centers text on the page</CENTER>
This centers text on the page
Having fun yet? You can also use more than one tag at a time. Let's say you wanted something in bold and italics. To do this, just place both opening tags before the text.....and remember to close both tags afterwards....like this:
<B><I>I am bold AND Italic, which makes me cool!</I></B>
This will show up like this:
I am bold AND Italic, which makes me cool!
Does the order of the tags make a difference? In this case, it wouldn't matter which way you opened and closed the tags. However, working from inside out will help you see your code better, and will help when the order does matter! (such as placing the </HTML> tag before the </BODY> tag). Here's another way to look at working inside out. I could write the HTML this way:
<B>
<I>
I am bold AND Italic, which makes me cool!
</I>
</B>
This could get rather tedious. All you need to remember is that the text you have written is affected by every tag before it that has not been closed. The effect ends when each one of those tags is closed by it's closing tag.
So lets try three things: Bold, Italic, and underline!
<B><I><U>Would you stop tagging me!</B></I></U>
This will give us:
Would you stop tagging me!
But this:
<U><I><B>Would you stop</B></I>tagging me!</U>
would give us this!
Would you stop tagging me!
As you can see, the bold and italics were closed before the word "tagging"....but the underline remained open until the end of the exclamation. This caused the "tagging me!" portion to be underlined, while not being affected by the bold or italics tags!
Now let's use the center tag from above. Since the default alignment of everything is to the left, it's nice to have a way to place things in the center of the page. So let's do just that. Use the <CENTER> tag. Anything you place between the <CENTER> and </CENTER> tags will be centered on the page. Here is an example:
<CENTER>I'm in the middle!</CENTER>
This will give us the following:
I'm in the middle!
You can also use it with one or more of the other tags above, like this: <CENTER><B><I>Look at me now!</I></B></CENTER>
Special Characters
So, have you been wondering how to add an extra space on your page, or how to get a copyright symbol to show up? Then let's see how right now! Special characters are placed on your page by using a special reference to the character you want to use. The reference will begin with an ampersand (&), will be followed by some text or numbers, and end with a semicolon (;) . So as an example, let's say you wanted to place an extra space between two words. To do this, you place the reference where you would like to add the extra space. Here is what you would do:
Hello there!
This gives us two spaces between "Hello" and "there!", like this:
Hello there!
The first space is added just using the "space" bar on the keyboard. The web browser will see the first space, but after that additional spaces will make no difference-- you will only see one space in the browser. By adding the reference, we forced the browser to add an extra space between the two words. You can add as many spaces as you would like by repeating the reference, like this:
Hello There!
This will create the first space, and 4 additional spaces between the two words, for a total of five spaces. It will be displayed like this:
Hello There!
The other one we will discuss is the copyright symbol. You use it the same way as an extra space, by placing its reference where you would like to see the symbol on the page. The reference for a copyright symbol is ©. Here's an example:
This page Copyright © 1999 by me!
This page Copyright © 1999 by me!
MORE COMING SOON