ADBZRPG5 Patch 5.4.4 was released on 3/29/12. You may see a full list of changes here.
|
|
 |
Filling The Body
Fonts
Links
Images
Backgrounds
Lists
Tables
Hypertext Markup Language (HTML) is coding which is the basis of all websites.
In this tutorial, we will go over some very basic HTML commands that you will use on any website.
The first things you will need to have on your page are opening html tags, header/title tags, and body tags. It is important to note
that with any opening tag you also need a closing tag (this is the tag that begins with a /). Here is an example of tags that you will need on every page:
<html>
<head>
<title> Title of Page Here </title>
</head>
<body>
<p> Body Line 1 </p>
</body>
</html>
In the example above we are simply starting off the page with html then making a header. In this header we have included a page title and closed the header.
After that we started the body of the page, this is where all your pages content will go. We included only one line in the example
before closing the body and then closing the html.
[Filling the body]
To fill the body of a page with text you can simply write the text after the opening body tag. If you want to start a new line you will need to include a break tag
which looks like this: <br> You typically do not need to have a closing break tag but some people chose to include them. If you want
to skip a line you would simply write two break tags: <br><br>. You can put multiple break tags to
skip multiple lines.
If you want to center any text you can do so by surrounding the text with <center> </center> tags.
You can also add a horizontal line by writing <hr>. It will look like this:
[Fonts]
If you want to use different fonts then you also have many font options available to you with HTML. You can change the font's size, face, and color all at the same time. Here is an example:
<font face="arial" color="red" size="2"> Text goes here </font>
It is important to note that you should always surround your changes in quotes. You aren't limited to the basic colors, you can also use hex color codes (chart found here). Simply
put the six numbers followed by a pound sign (#) in front of it. For example: <font color="#FF0000" > Text goes here </font>
[Links]
Here is a simple linking code using HTML:
<a href="pagename.html"> Link Text Goes here </a>
[Images]
Putting images on sites can be done with HTML and gives you options on how to edit them.
Here is an example of code for an image:
<img src="image.gif" height="100" width="50" alt="My Image" align="left">
You may notice you do not need an end tag for images. I'll explain
what is happening in the code above. The src="image.gif" part is telling the code where to find your image. You should
have it uploaded on your site somewhere. Say you uploaded it to an images folder and the image is named image1. If it is a .gif file type (there
are other file types) then the src would be "images/image1.gif". The height and width are self-explanatory. The ALT tag allows you
to write text that can be viewed when someone mouses over the image or if the image fails to load. The align tag can be used to wrap text around an image. If you align it left, the text will be to the right of the image
and vice versa if you align it right.
You can also make it so that an image is a link that can be clicked. To do this, you would replace the text of the link (which you learned above) with the image code.
You should also include a border tag within the image code so that you can control whether or not it has a border. For example :
<a href="pagename.html"><img src="image.gif" height="100" width="50" alt="My Image" align="left" border="0"> </a>
[Backgrounds]
You can have pictures as backgrounds or just have a solid background color, or both. Remember in the beginning
where we made the <body> tag? Well to have a background you will edit this by expanding it.
If you want a solid background color this would be the tag:
<BODY BGCOLOR="#FFFFFF">
If you want to have an image as your background you would use this tag:
<BODY BACKGROUND="image.gif">
To do both, you just combine them:
<BODY BGCOLOR="#FFFFFF" BACKGROUND="image.gif">
[Lists]
There are two types of lists you can use with HTML, ordered lists and unordered lists. The difference is that ordered lists use numbers while unordered lists
will simply show bullets. Here is an example of an unordered list code:
<ul>
<li> Item 1
<li> Item 2
<li> Item 3
</ul>
If you want to make an ordered list (which will replace the bullets by numbering them 1. 2. 3. etc) then
instead of having <ul> and </ul> , write <ol> and </ol> . The item tags remain <li> .
[Tables]
The last thing we will go over in this tutorial is how to make tables. This is going to be a brief explanation of how to make very basic tables and there are many, many more commands you can use to enhance them. Here is an example of
a code for a table:
<TABLE BORDER="1" BORDERCOLOR="red" CELLSPACING="1" CELLPADDING="2">
<CAPTION> My First Table</CAPTION>
<TR>
<TD> Cell Data</TD>
<TD> Cell Data</TD>
<TD> Cell Data</TD>
</TR>
<TR>
<TD> Cell Data</TD>
<TD> Cell Data</TD>
<TD> Cell Data</TD>
</TR>
</TABLE>
Here is what it does:
My First Table
| Cell Data |
Cell Data |
Cell Data |
| Cell Data |
Cell Data |
Cell Data |
And now to explain:
- <TABLE> starts and ends the entire table.
- <CAPTION> and </CAPTION> places a caption (or a title) over your table. The caption will be automatically bolded and centered.
- <TR> is used when you want a new Table Row to begin.
Notice that you need to end every table row with an </TR> .
- <TD> denotes Table Data. You put this in front of every piece of information you want in a cell.
You need to end every one that you open with an </TD> .
- </TABLE> ends the whole table.
- BORDER tells the table how large the border should be. This is all relative in terms of pixels. Three is larger than two and two is larger than one, etc. Try different numbers.
- BORDERCOLOR This colors the border of the table. It works like font color and you can use words or hex color codes.
- CELLSPACING (all one word) gives the amount of space between cells. I'd keep this kind of small.
- CELLPADDING (all one word) gives the amount of space (or padding) between the cell border and the cell contents. Note the cell border walls tend to fill out. A higher number fills out more. Try a few different settings.
Back to Top
|
 |
|
|
