Sophonax
07-21-2009, 05:38 AM
Basic HTML
HTML stands for Hypertext Markup Language. It's a language that is used to create webpages. The browser you are using to view the internet looks at the codes that are in your files, and transfers them into a normal looking webpage. The two major browsers are Internet Explorer and FireFox. Both browsers see HTML codes differently, so you have to be careful.
Generally, there are two types of tags, open tags and closed tags.
Paragraph Tags
<p> - open P tag
</p> - closed p tag
Open Bracket - <
Closed Bracket - >
Tag Type - p (for example)
Slash - /
Each tag starts with an open bracket and ends with a closed bracket, with the tag type nested in between. However, with a closed tag, a slash appears before the tag type to signify the end of that tag doing its work. In this example: the end of the paragraph.
The tag itself is placed inside the open and closed brackets. Those are the main pieces you'll see when working with HTML.
The format
Every page on the web starts with this simple format:
<html>
<head>
<title>My Page</title>
</head>
<body>
All Your Page Contents Go Here
</body>
</html>
All the tags are nested into each other. All pages start and end with that info. If you were to view this page in your browser, it would simply have "My Page" written in the title bar, and a bare-bones message written with default colors on default white. But don't despair! It's very easy to add more to your page.
The background
You may not want to keep the page to the default white color. A good idea would be to specify a new color. You have to add bgcolor="yourcolor" into the body tag's brackets.
<body bgcolor="red">
The above bgcolor refers to a color in words. This color can be different on many computers and browsers. However some of the more rare names may dither on some users' screens (break up into strange dots on the screen). It's usually better to use hexadecimal codes, like in the following example:
<body bgcolor="#000000">
A six character long code has been used in place of background color name. In this case, #000000 is black.
Both the names and hexadecimal values of obscure colors can be difficult to remember. Sites like this (http://www.w3schools.com/html/html_colornames.asp) one have lists of both for your convenience. Many graphic programs include the hexadecimal value when using their color selectors.
Colors are all well and good, but sometimes you want to use an image! Simply replace yourimage.gif with the filename of your image. It's a good idea to keep a background color in the body tag as well. This color will show while the image is loading.
<body bgcolor="#000000" background="yourimage.gif">
Adding text
Text is really easy to put on your page. All text can go inside paragraph tags:
<p>text goes here</p>
That text will come out looking like the default text, usually Times New Roman font. A good idea is to change the font and font size.
<p><font face="courier" size="2" color="#FFFFFF">Wow, look at this text!</p>
The above code will come out looking like this:
Wow, look at this text!
Putting face="verdana" inside the <font> tag's brackets, will change the font to verdana. When you change your font, be sure to change it to a font that came with your computer. If that font isn't on the viewer’s computer, it will return to Times New Roman. Some good fonts to change it to are Arial, Tahoma, Comic Sans MS, Courier New and Verdana.
Putting size="2" inside the <font> tag's brackets, will change the size of the text to second smallest. There are sizes 1 through 7, seven being the largest.
Putting color="#FFFFFF" inside the <font> tag's brackets, will change the color of the text to white.
What if you want to make your text bold, italic or underlined? Or even crossed out? It's very simple to do! ^_^
For: Code Example
Bold --- <b>text</b> --- text
Italic --- <i>text</i> --- text
Underline --- <u>text</u> --- text
Line Through --- <s>text</s> --- text
Linking with text
Links are really easy to make. Links are the text that you click on to take you to a new page.
<a href="index.php">Click here!</a>
The href is what refers you to the new page. Simply put the page or full URL you want to link to, within these quotations. You can replace "Click here!" with text of your choice.
This is how it will look like: Click Here! ('http://www.animeforum.com/showthread.php?t=87971')
How do I change the color of links?
By adding a line to your body tag, you can change each link on your page quickly.
<body link="#000000" vlink="#000000" alink="#000000">
Each of these links mean different things:
LINK: The color of a link that has never been used before
VLINK: The color of a link to a page that hasn't been visited
ALINK: The color of the link while it is being pressed
When you hover over the link, it will change to the default color. If you don't want it to hover to blue, you can use CSS. You can also use CSS to add other attributes to the links. ^_^
Adding images?
Adding images to your page can make it more fun to look at. The first thing you need to do is find an image you'd like to use. Then upload the image to your webspace/image host. You should make the image filename have all lowercase letters, with no spaces. You'd put a code something like this on your HTML page:
<img src="yourimage.gif" width="??" height="??" border="0" alt="a description">
You replace yourimage.gif with the file name of your image. For my example, my file name is neovenezuelaffver.jpg. You replace ?? with the width and height of your image. The alt tag is a description of the image. When you put your mouse over the image, a little box will appear with the text. Here's my image. Hover over it to see the alt tag:
http://sophonax.com/gfx/images/neovenezuelaffver.jpg
How do I make my images into links?
To make a link where you click on the image instead of text is really simple. Just use the text link code, and take out the text. Then place the image code inside where the text was. Here's an example:
<a href="index.php"><img src="yourimage.gif" width="??" height="??" border="0" alt="a description"></a>
http://sophonax.com/gfx/images/neovenezuelaffver.jpg (http://www.animeforum.com/showthread.php?t=87971)
HTML stands for Hypertext Markup Language. It's a language that is used to create webpages. The browser you are using to view the internet looks at the codes that are in your files, and transfers them into a normal looking webpage. The two major browsers are Internet Explorer and FireFox. Both browsers see HTML codes differently, so you have to be careful.
Generally, there are two types of tags, open tags and closed tags.
Paragraph Tags
<p> - open P tag
</p> - closed p tag
Open Bracket - <
Closed Bracket - >
Tag Type - p (for example)
Slash - /
Each tag starts with an open bracket and ends with a closed bracket, with the tag type nested in between. However, with a closed tag, a slash appears before the tag type to signify the end of that tag doing its work. In this example: the end of the paragraph.
The tag itself is placed inside the open and closed brackets. Those are the main pieces you'll see when working with HTML.
The format
Every page on the web starts with this simple format:
<html>
<head>
<title>My Page</title>
</head>
<body>
All Your Page Contents Go Here
</body>
</html>
All the tags are nested into each other. All pages start and end with that info. If you were to view this page in your browser, it would simply have "My Page" written in the title bar, and a bare-bones message written with default colors on default white. But don't despair! It's very easy to add more to your page.
The background
You may not want to keep the page to the default white color. A good idea would be to specify a new color. You have to add bgcolor="yourcolor" into the body tag's brackets.
<body bgcolor="red">
The above bgcolor refers to a color in words. This color can be different on many computers and browsers. However some of the more rare names may dither on some users' screens (break up into strange dots on the screen). It's usually better to use hexadecimal codes, like in the following example:
<body bgcolor="#000000">
A six character long code has been used in place of background color name. In this case, #000000 is black.
Both the names and hexadecimal values of obscure colors can be difficult to remember. Sites like this (http://www.w3schools.com/html/html_colornames.asp) one have lists of both for your convenience. Many graphic programs include the hexadecimal value when using their color selectors.
Colors are all well and good, but sometimes you want to use an image! Simply replace yourimage.gif with the filename of your image. It's a good idea to keep a background color in the body tag as well. This color will show while the image is loading.
<body bgcolor="#000000" background="yourimage.gif">
Adding text
Text is really easy to put on your page. All text can go inside paragraph tags:
<p>text goes here</p>
That text will come out looking like the default text, usually Times New Roman font. A good idea is to change the font and font size.
<p><font face="courier" size="2" color="#FFFFFF">Wow, look at this text!</p>
The above code will come out looking like this:
Wow, look at this text!
Putting face="verdana" inside the <font> tag's brackets, will change the font to verdana. When you change your font, be sure to change it to a font that came with your computer. If that font isn't on the viewer’s computer, it will return to Times New Roman. Some good fonts to change it to are Arial, Tahoma, Comic Sans MS, Courier New and Verdana.
Putting size="2" inside the <font> tag's brackets, will change the size of the text to second smallest. There are sizes 1 through 7, seven being the largest.
Putting color="#FFFFFF" inside the <font> tag's brackets, will change the color of the text to white.
What if you want to make your text bold, italic or underlined? Or even crossed out? It's very simple to do! ^_^
For: Code Example
Bold --- <b>text</b> --- text
Italic --- <i>text</i> --- text
Underline --- <u>text</u> --- text
Line Through --- <s>text</s> --- text
Linking with text
Links are really easy to make. Links are the text that you click on to take you to a new page.
<a href="index.php">Click here!</a>
The href is what refers you to the new page. Simply put the page or full URL you want to link to, within these quotations. You can replace "Click here!" with text of your choice.
This is how it will look like: Click Here! ('http://www.animeforum.com/showthread.php?t=87971')
How do I change the color of links?
By adding a line to your body tag, you can change each link on your page quickly.
<body link="#000000" vlink="#000000" alink="#000000">
Each of these links mean different things:
LINK: The color of a link that has never been used before
VLINK: The color of a link to a page that hasn't been visited
ALINK: The color of the link while it is being pressed
When you hover over the link, it will change to the default color. If you don't want it to hover to blue, you can use CSS. You can also use CSS to add other attributes to the links. ^_^
Adding images?
Adding images to your page can make it more fun to look at. The first thing you need to do is find an image you'd like to use. Then upload the image to your webspace/image host. You should make the image filename have all lowercase letters, with no spaces. You'd put a code something like this on your HTML page:
<img src="yourimage.gif" width="??" height="??" border="0" alt="a description">
You replace yourimage.gif with the file name of your image. For my example, my file name is neovenezuelaffver.jpg. You replace ?? with the width and height of your image. The alt tag is a description of the image. When you put your mouse over the image, a little box will appear with the text. Here's my image. Hover over it to see the alt tag:
http://sophonax.com/gfx/images/neovenezuelaffver.jpg
How do I make my images into links?
To make a link where you click on the image instead of text is really simple. Just use the text link code, and take out the text. Then place the image code inside where the text was. Here's an example:
<a href="index.php"><img src="yourimage.gif" width="??" height="??" border="0" alt="a description"></a>
http://sophonax.com/gfx/images/neovenezuelaffver.jpg (http://www.animeforum.com/showthread.php?t=87971)