- Joined
- Jan 21, 2007
- Sythe Gold
- 1,234
- Messages
- 14,211
SuF’s HTML Basics Guide II(Not as good as the first, but still cool.)
Before reading this guide, please read my HTML Basics Guide I. Which is http://www.sythe.org/showthread.php?t=414578 there.
NOTE: If you copy and paste my examples, except some of them not to work, since fucking word uses curly quotes and I am too lazy to change them all. Just change the curly quotes to normal quotes, on your keyboard.
Now your site was boring before, as everything was on the left side. Now I will show you have to center text and images, or make it right justified.
The old bad way of doing this would be to use:
Code:
<center>CENTERED TEXT!! WOOTTYNESS!</center>You should not use this now, to comply with W3C’s damned recommendation. Do do it the right way you must remember this bit of CSS.
Code:
<div style="text-align: center">CENTERED TEXT THE RIGHT WAY WOOOOOTY! PARTY</div>We have a new tag. <div>. You use div to separate parts of your site, like your top links, or your ads, or your main block of text.
Here are a few more ways to align your text:
Code:
<div style=â€text-align: leftâ€>left</div>
<div style=â€text-align: leftâ€>right</div>
<div style=â€text-align: leftâ€>justify</div>That’s pretty easy right? You can use this on many different tags besides <div> like this:
Code:
<p style="text-align: center">YAY THIS WORKS TOO! :)</p>That way also works. Now lets move on to something fun. Tables...
I have 1 thing to say about tables before we start. NEVER USE TABLES FOR ANYTHING EXCEPT DATA. Do not use them for website layout, or I will kill you.
To start the table we use a <table> tag:
Code:
<table>
</table>Now that we have that we must add a row to the table. (A row is left to right or right to left not up or down. :O) For that we use the <tr> tag.
Code:
<table>
<tr>
</tr>
</table>Now that example is not correct since you are not allowed by W3C to have a <tr> tag without a <td> tag in it. <td> makes a box (cell) for your data. You can have as many as you want per row pretty much.
Code:
<table>
<tr>
<td>text for box goes here. :)</td>
<td>I want loads of boxes!</td>
<td>WOOOOOT</td>
</tr>
</table>Now you have a basic table. But lets say you want the top row to say what the data in the table is, for this you use the <th> tag. Here is an example:
Code:
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>SuF</td>
<td>15</td>
</tr>
</table>Pretty cool eh? Again I stress only use tables when you have to, for data not for layout! Try to avoid them. A few great reasons to use them are for scientific data, clan members list, if you have info besides name you need, and comparing products is another good reason to use them.
FYI, tables automatically line up the <td>s and make the boxes fit to your text. Also the correct term for “boxes†is cells. Those are the basics for making a table, but it can get much more complicated, but I will stick to just that for now.
Since I just did tables, lets go to background, because white background tables are not always desired!
Example of changing background color, the XHTML way of course.
Code:
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr style= "background-color: #FF0000;">
<td>SuF</td>
<td>15</td>
</tr>
</table>If you look at that example in a web browser you see that it makes all the cells in that row have red backgrounds. We can also use that on the body tag to have the entire body have a red background.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My first XHTML website! </title>
</head>
<body style = "background-color: #FF0000;">
<div>
I love SuF!
</div>
</body>
</html>Due to the nature of the style attribute it works on most everything.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My first XHTML website! </title>
</head>
<body>
<div style = "background-color: #FF0000;">
I love SuF!
</div>
</body>
</html>It also works with the div tag! But I suggest not using it unless you have a CSS layout, or it might not look good. What’s a CSS layout? I suck at CSS so Google it. It pretty much divides your page up into sections, like your body, side bars for ads and your nav bar.
Links – Again.
In my first guide I showed you the basics of links, and now I will show you some cooler stuff.
We learned how to change the color of a link, but what if you just want to change the color of a visited link? That can be done very easily.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
A:visited
{
text-decoration: underline; color:#a0a0a4;
}
</style>
<title>My first XHTML website! </title>
</head>
<body>
<a href = "http://www.google.com">Google</a>
</body>
</html>Look that that in a browser, then click the link. When you click it go back and you will see that it has changed to a grayish color. The thing that is doing this is:
Code:
<style type="text/css">
A:visited
{
text-decoration: underline; color:#a0a0a4;
}
</style>This is within the head tag, (YAY! A use for the head tag...) and it is a CSS style sheet. Color is the color that you want the visited link (A:vistied) to be. Text-decoration is what decoration there is... The 2 main ones are underline (normal) or none, which removes the underline. You can also make links change when you hover over them. (Note: this is for all the links on the page)
Code:
<style type="text/css">
A:hover
{
text-decoration: none; color:#FF0000;
}
</style>Replace the old code with this and hover over it, or you can add it to the old code to get both effects… (My new kitten jump climbed up my leg.
, I is glad I am wearing pants…)You can also change font size on links, even on hover. (Its funny
)Just add
Code:
font-size: 400%;Add that or something similar after color. Now you guys might be thinking, I would only use this for fun, but if you go to one of my old shit websites, http://eemods.webs.com/ the top nav thing uses link effects and I think it looks quite nice.
The code on that site is shit, but it does not allow right click... lol... If you have questions about the cool link stuff please feel free to post. Now dry link info.
When you link to an outside file, (on another website) include the http://. It makes it so that the browser knows it is a file not on the server, and its just a good habit.
If your linking to a file on the same server and in the same folder you can just use the filename as the href. If the file is in another folder you have a few options.
Code:
<a href ="../jd/index.html">Click</a>Notice the ../? That means that the file is up 1 folder, then in jd and the file name is index.html. In other words, if you have a folder named TD, that is in WWW folder, which JD is in as well, that code is what you need to use.
Now one last thing. How to make an image link. Which means a link that is an image. It is very simple. Here is an example.
Code:
<a href = "whatever.html"><img src ="whatever.jpg" alt = "what ever" /></a>Its that simple. Now you know the basics of HTML, and you should understand tags. It might be time to start using google when you need help, or post below if you have questions. This guide is not as good as the first one, because it is hard to keep thinking of more stuff to teach. If you guys have suggestions on a third HTML guide, (or 4th, I know what the 3rd is going to be.
) please post below and I will happily make a guide slowly that answers your questions.NOTE: I was careless with validating my examples. Some of them might not be XHTML strict. If you notice they are not please tell.
Again, to validate your code go to http://validator.w3.org/.
