Always indent and keep your code clean:
<html>
<head>
<title>This is what appears in the title bar</title>
</head>
<body>
<table width="100%"> `Starts a new tables
<tr> `Starts a new table row
<td> ` Start a new table column
<b>`Bold your text <font face="arial"> `Set the font
Your content here...
</td> `End current column
<td> `Start new column
Your content here...
</td>
</tr> `End the row
</table> `End the table
</body>
</html>
So that example (without the comments) would produce a page with a table that consists of 1 row and 2 columns, like this:
|------------------------|
| Content | Content |
|------------------------|
HTML really is simple stuff, here's some basic tags and their attributes...
--------- A HREF
<a href="the link">The name of your link</a>
You replace "the link" with the URL of where you would like the link to go. Replace "The name of your link" with what you would like the link to be displayed as. <A HREF> also has some attributes that you may find useful:
<a href="http://thelink.com" target="_blank">Link Title</a>
You can use the target attribute to tell the link to open in a new window or the same window. For new window use _blank, for the same window use _self.
<a href="mailto:email@email.com">Email me!</a>
You can mailto: to use the link as an email link. The link will now open up in the users default email client with the address specified.
----------
---------- IMG SRC
<img src="imageurl">
This one is pretty easy. It simple places an image on the site. You can link to another image on the net (not always best practice) or preferebly link to one on your server. There are some simple attributes you can use with IMG SRC.
<img src="sweet.jpg" height="200" width="100" border="1">
These are all pretty self explanatory. Height specifies in pixels how high the image is, and width obviously specifies how wide the image is. Border specifies whether or not you want border around the image.
You can also use <IMG SRC> in conjuction with <A HREF> to make an image a link, like this:
<a href="gotothisurl.html"><img src="mypicture.jpg"></a>
In that example, you're simply replacing the display text of the link with a picture.
-----
----- FONT
Font is one of the easiest tags to use, it simple lets you decide what you want your text to look like.
<font face="arial" size="3" color="black">Your text here</font>
This would make the text between the tags Arial, Web size 3, and the color black. I would recommend not using the actual word for the colors, instead become acquainted with the color codes. But it's fine for beginners.
There are some simple tags to format your tags as well.
<b>Your text here</b> `This simply bolds your text
<u>Your text here</u> `This underlines your text
<i>Your text here</i> `This italics your text
You've also got the heading tags:
<h1>Text</h1>
<h2>Text</h1>
<h3>Text</h1>
These automatically format your text to a "header" style, like for the title of a story. <h1> for instance would make you text huge and bold.
---- TABLE
Table is a bit more complicated that most tags, and usually takes beginners some getting used to. It comprised of <table>, <tr>, and <td>. Each having their own attributes.
Tables provide a way of organizing the content on your page, instead of it just being strewn about. Many use CSS (Cascading Style Sheets) to organize now, but if you're just beginning, you should definetly learn how to use tables.
<table> `Starts your table off. Some simple attributes of table include: width, height, cellpadding, cellspacing, border.
Example of all these: <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="1">
This would create a table that fills up the entire width and height of the browser, with no space between cells and no padding within cells with a border between each cell.
<tr> `This tag starts out a new row within your table. <TR> has some simple attributes as well, like: height, valign.
height obviously adjusts the height of the cell, while valign tell the content where to appear with the cell. If VALIGN is set to top then the content appears at the top of the cell. Same with MIDDLE and BOTTOM.
Example: <tr height="50" valign="middle">
That example would create a cell 50 high and with content placed in the middle.
<td> `The TD tags starts off a new column within the row you created. TD has some simple attributes like: width and align. ALIGN is similar to VALIGN as it decides where to place content within the cell, except this one does horizontal, not vertical. So it can equal LEFT, CENTER, or RIGHT to decide where to place the content.
So let's say you wanted table that looked like this:
|--------------------------------------|
|------------------|-------------------|
|------------------|-------------------|
|------------------|-------------------|
|--------------------------------------|
|------------------|-------------------|
|------------------|-------------------|
|------------------|-------------------|
----------------------------------------
Easy, you would do something like this:
<table width="100%" height="100%" border="1" cellpadding="0" cellspacing="0"> `Start your table
<tr> `Start a new row
<td> `Start a new column
Place your content here...
</td> `End that column
<td> `Start next column
Place your content here...
</td> `End previous column
</tr> `End row
<tr> `Start new row
<td> `Start new column
Place your content here...
</td> `End previous column
<td> `Start new column
Place your content here...
</td> `End previous column
</tr> `Close last row
</table> `End of table
It's really quite simple once you play around with it. Although table s can sometimes be quite the beast, even for advanced people with massive overly complicated tables. In comes CSS.
--------
----- BR
<BR> is very simple, it simply put a line break on the page. It's just as if you were pressing enter in your word processing program.
----
General Form
An standard HTML file generally is laid out like this:
<html> `Tell the browser it's an HTML document
<head> `Generally holds information about the page, such as the title.
</head>
<body> `Holds the main content of the page.
</body>
</html> ` Close the HTML doc, should be the last line of an HTML doc.
--------------- And that's my little tutorial
, I was bored, hope I helped! I missed alot of things, but this is just supposed to be a quick answer, lol.
P4 2.4Ghz HT, 512MB RAM, ATI Radeon 9600 128MB, 19" Samsung SyncMaster 997DF, 80GB HD
