When you place an image on your page, by default it's base is on the same line as the rest of your text, just part of the sentence as it were. If you want the text to wrap around this image you need to define the image's alignment.
A Little Bit Of Everything
<html>
<head>
<title>
insert title here
</title>
</head>
<body bgcolor="000000" text="ffffff">
<b>Bold</b>
<p><i>Italics</i>
<p><u>Underline</u>
<p><em>Emphasis</em>
<p><strike>Strike Through</strike>
<p><big>Big</big>
<p><small>Small</small>
<p><center>Center</center>
<p>
<table width="500" border=2>
<tr>
<td width="25%">
hello, everyone!
</td>
<td width="150">
Hey, again!
</td>
<td bgcolor="blue">
done now
</td>
</tr>
<tr>
<td colspan="2">
How's this?
</td>
<td>
<font size="-1">good, I guess</font>
</td>
</tr>
</table>
<br><img src="picture.jpg" width="150" height="150"
alt="there is no picture" align=left>
<p><a href="http://jsnotes.blogspot.com">J's Notes</a>
<br><a href="mailto:j_man2@hotmail.com">e-mail me!</a>
</body>
</html>
And all of this looks like this
***
General Things You Need To Remember
Practically every tag needs closure.
</____>
If you have <a> then you need </a>
The only times </____> is not needed
<br>
or
<p> (though you can close a paragraph break and most folks recomend you do so, it's not required.)
or
image tags
Also, whenever you use quotation marks inside a tag (") be sure you close them out. If you don't, the page will mess up.
So:
"http://www.hotmail.com" is good.
"http://www.hotmail.com is bad.
Close it up.
***
The <html> Tags
You should begin every page with <html> and end it with </html>. This tells the website that it's looking at HTML and not just text.
***
The <head> Section
Here is where you put in your title or anything special like meta-tags or scripts and what not. The only thing you need to know to get started is the <title> tag.
And it's pretty self explanatory.
Within the <head></head> tags, put:
<title>title of the page</title>
And you're set. This is the title a visitor will see at the top of their browser window.
***
The <body> Tag
This is used to set up the look of the rest of the site. Anything you put in here will determine the font color, background, all of that unless you specifically change things within the text (see <font> tags for more info).
Within the <body> tag can be a variety of tags used to define the page's look.
bgcolor="color"
this defines the background color for the page. you can use the color name (for some colors) or find the color's 9 digit hex code (prefered).
You can also use images for the background
background="picture"
with the picture, you need to put in the file name (like 'background.jpg' for example), so if you're refering to an image in the same directory as the page you're designing, you'd do this:
background="background.jpg"
if it's in another folder (lets say 'images') then you'd use:
background="images/background.jpg"
Now, HTML is bad about this, but the background image will repeat itself legnth and height across the page. It's not going to stretch or center itself or anything like that, which, quite frankly, sucks. There is a way to do this stuff, but that's using CSS which is a bit more complicated and you need to learn this basic stuff first.
text="color"
same as 'bgcolor' except this will define the color for all text.
link="color"
This will define the color of links on your page
alink="color"
This defines the color of active links on the page.
vlink="color"
This defines the color of visited links on the page.
***
Basic Tags to Use Within The <body>
Line Break
<br>
Paragraph
<p>
Bold
<b>Bold</b>
Bold
Italics
<i>Italics</i>
Italics
Underline
<u>Underline</u>
Underline
Emphasis
<em>Emphasis</em>
Emphasis
Strike Through
<strike>Strike Through</strike>
Strike Through
Big
<big>Big</big>
Big
Small
<small>Small</small>
Small
Center
<center>Center</center>
***
Changing Alignment
As you can see above, the best way to center text is with the <center></center> tags.
But what if you want to align something to the right?
Best way to do that is with the following.
<div align="right">Right Alignment</div>
See? Neat, huh?
***
Links
<a href="link">link</a>
<a href="http://www.hotmail.com">Hotmail</a>
DO NOT USE: <a href="www.hotmail.com">Hotmail</a>
You need to have 'http://' if you want to refer to an outside site, otherwise the link will look for a file or folder entitled 'www.hotmail.com'
Good Link - Bad Link
<a href="designs/index.htm">Designs</a>
This refers to the 'index.htm' file in the 'designs' folder. If there were another folder under 'designs', you'd keep this up:
<a href="designs/dhtml/index.htm">DHTML</a>
Unless you were already in the 'designs' folder, then you'd just use the 'dhtml/index.htm' part.
<a href="mailto:j_man2@hotmail.com">E-Mail Me</a>
To do an e-mail link, you use 'mailto:' before the e-mail address.
BE SURE YOU CLOSE THE QUOTES AROUND THAT LINK! If you don't you will mess up your entire page. You need to have closure here.
<a href="http://www.hotmail.com">hotmail</a> is perfect
<a href="http://www.hotmail.com>hotmail</a> will destroy everything.
***
Changing the font
<font></font>
Size
<font size=+3>+3 font</font>
+3 font
<font size=+2>+2 font</font>
+2 font
<font size=+1>+1 font</font>
+1 font
<font size=-1>-1 font</font>
-1 font
<font size=-2>-2 font</font>
-2 font
<font size=-3>-3 font</font>
-3 font
Color
<font color="red">red font</font>
red font
You can name most colors
red
blue
yellow
green
black
white
etc
Best bet is to find the color's 9 digit hex code.
Font Face
<font face="name of font">this is the font</font>
You can change font style to different faces if you want. But be careful, there are a handful of faces that are on every computer, but if you use a special one you've downloaded or that isn't standard, some people will not see the page the way you might want them to. You can either have a link to a place for them to download the font, or just pick a font they will have.
***
Images
They're set up a lot like links, really.
<img src="image">
That's that (no close tag either)
<img src="picture.jpg">
Now, within this you can do a few different things.
<img src="picture.jpg" border="0" height="100" width="100" alt="picture here>
'border=' determines the border around a picture. By default there is no border, but if you use the picture as a link, one will pop up around it unless you say '=0', or, if you want a border, you can make it any size you want, like '=10'.
'height=' and 'width=' are handy if you want to size a picture down a bit or just make sure that if for some reason the pic doesn't load, it still fills the same ammount of space.
Now, with images you need to size down, you can either use these tags or just size the picture down in some pic editor. Sizing it down in an editor is probably the best thing to do because it makes the image file size smaller, thus faster to load. Also you might want to keep the height and the width proportionate so you don't stretch out the picture and ruin the presentation.
'alt=' is used to give the image a name. This name shows up when someone mouses over the image or, should the image not load up, it will be where the image should be, giving your viewer an idea of what you're trying to get across.
When you place an image on your page, by default it's base is on the same line as the rest of your text, just part of the sentence as it were. If you want the text to wrap around this image you need to define the image's alignment.
<img src="picture.jpg" align="right">
This will put the image to the right and have the text wrap around it. You can also 'align="left"' if you wanted.
Refering to images is just like refering to links. If it's in the same directory on the server, you just put 'src="picture.jpg"'. If it's in another folder, put the folder name before it, like 'src="images/picture.jpg"'
Now, you can refer to images on someone else's website and server with the 'http://' thing, but it's best to download the image and put it on your server. This is for bandwidth issues. Most website servers limit the amout of data it will allow it's users to have uploaded. Every time you look at their page, that takes up bandwidth. Every time you see an image off of their server, that's bandwidth. So, if you refer to the image on your site, every time it's uploaded through your site, you're sucking some of their bandwidth. This sucks for the owner.
But you can't just go snatching pictures from someone else and using them yourself. That's not only unethical, but can be illegal. E-mail the website's owner or the owner of the picture and ask for permission to use it first. Tell them what you want to use it for, where they can see it in use, and GIVE THEM CREDIT IF IT IS THEIRS. I mean, you don't have to give credit to the guy if it's not theirs. Anyone can scan a picture. But you still should ask because they went through the effort of scanning it. And, if they just took it from somewhere else, well, then you're set! But, be polite and ask.
***
Tables
Oh, dear Lord. Tables are hideous beasts when you first play with them. All sorts of tags all over the place. But I'll try and get in here and give you the basics just incase you need them.
<table width="500" border="0">
<tr>
<td width="50%">
content!
</td>
<td width="50%">
more content!
</td>
</tr>
</table>
Here's what it all means.
<table> starts the table off and tells the computer that, hey, this is a table you're going to be showing.
'width="x"' sets the width of the table and individual cells in the table. You can set this two ways.
To set a fixed width in pixels, just put in the number.
<table width="500"> means the table with be 500 pixels wide. This is good for fixed width and helps you, as a designer, have more control over how the page will be viewed. But don't make it too wide. Some folks may have their screen set to a lower resolution than you. Best bet is to design pages with 800x600 in mind.
if I put:
<table width="50%"> then the table would be 50% of the width of the screen. This is handy if you want the width to change with the screen size.
You can also determine whether or not your table will show it's border here.
<table border="0"> means you'll have no border. You can put any number in there to create one as big as you'd like.
<tr> begins the table row
<td> begins the individual cell within the row.
'width="x"' here means how wide the cell is within the table.
<td width="50%"> means the cell will be 50% of the width of the table. This will vary with the size of table (if you used a % for table width)
<td width="50"> means the cell will be 50 pixels wide no matter what.
Note that with the width of a table and cell, if you put in content larger than the size you set, the table or cell will widen itself to fit the content. So, if you said <td width="50"> and put an image 100px wide in there, the cell will widen itself to 100px to fit the image and the rest of your table might be messed up.
Also, if you only define the width or one or a few cells but not all of them, those that are undefined will simply size themselves to fit the rest of the width of the table.
You can also determine how your text will align vertically within the cell
<td valign="top">
The text will align in the center by default. You can tell it to align with the top of the cell or the bottom by saying 'valign=' and then 'top' or 'bottom'.
And, if you wanted, you could change the background color of a cell too.
<td bgcolor="color"> and put in either the name of the color or the 9 digit hex code for it and the cell's background will change.
Remember to close the cell with a </td>
You can put as many cells in a row as you'd like.
Becareful with the width, though. Make sure that all of the cells add up to the same width that you set for the table or it will change the whole thing. <td> width takes presdence over the table width.
Then close out your row with a </tr>
If you want more rows, start a new row with another <tr>.
Now, every row must have the same number of cells. If you want a particular cell to be bigger, you can include the 'collwidth=' tag in the <td>
What this will do is make that one cell as wide as whatever number of cells you signify. So, if there are three cells in the row above and you want one of the cells in the second row to be as wide as the first two, you simply make the first cell say:
<td colspan="2">
And it will be as wide as two cells.
Make sure you close out all cells with </td> and rows with </tr>
Then close out the table with a good ol </table> and you're set.
***
Other Random Things That Are Good to Know
Horizontal Bar
<hr>
These are handy for signifying page breaks or scene breaks. You can change the width of these by adding 'width=' within the tag and giving it either a percentage or pixel number, so:
<hr width="50">
looks like
<hr width="50%">
looks like
As you can see, it wants to automatically align in the center. To change this, you add the 'align=' tag within the bar.
<hr width="50%" align="left">
looks like
<hr width="50%" align="right">
looks like
Copyright Symbol
©
If you're using something owned by someone else, give them copyright credit. If it's yours, stamp a copyright on it. This is handy.
***
What I'm Not Telling You
There's a whole lot more you're not getting here. That's because I'm just giving you the basics to get you started. Once you get this down you can move onto learning DHTML or CSS (cascading style sheets are great, you can do a hell of a lot more with the page once you learn that) or JavaScript and more. HTML is easy as hell to learn and everything else is just a variation, pretty much.
If there's anything I haven't covered or that you come across and need help with, feel free to contact me and let me know.