Intro to HTML Your basic document will look like this:
<html>
<body>
<h1>Football Championship</h1>
<p>Carson Football team won this years B.C. AAA Championship!
<p>The final game ended in a massive routing of the other team.
</body>
</html>
Tag Explanation
TAGs tell the Web Browser what to do with the code.
Every file starts with <html>
Ends with </html> lets browser know it is HTML code.
Note that the end tag has a "/ " (forward slash) before the word .
*****Every tag needs to start with an opening <tag>
*****End with closing </tag> The forward slash "/" means closing tag.
Try It: Create a new text document in Notepad.
Click on Start (bottom left corner),
Programs> Accessories> Notepad
Copy and paste the above HTML code in the Notepad File.
Save it as "soccer.html"
Close the notepad file.
Open wherever you saved it too.
Find the file "soccer" that has the big blue "E". for Microsoft Internet Explorer file.
Double click on it to open it.
Once the web page is open, Click File, Source to view the code.
Lesson 1: Paragraphs
<p> begins a new paragraph
***The <p> tag skips a line before each block of text.
There's no need to close off the <p> tag with a </p> ;
it's implied when you go on to the next tag.
<p>I’m just sippin’ on camomille. . .
<p>This is "No Doubt"
Lesson 2:Line Breaks
<br> inserts a line break a the END of a line of text [Same as hitting 'enter' in a Word document]
Ends a line of text and starts a new one without skipping a line in between.
The HTML for a poem using line breaks might like like this:
<br>Pouya J. is banned today.
<br>He may not sing!
If he does, he will surely pay!
The above code will appear like this:
Pouya J. is banned today. He may not sing! If he does, he will surely pay!
Had you not put HTML in, it would appear:
Pouya J. is banned today. He may not sing! If he does, he will surely pay!
Try it. Add line breaks in your HTML file.
Copy and Paste them from above code. View your file.
Lesson 3: Headlines
Headlines range in size from h1 (quite large) to h6 (quite small). They're switched on with a tag such as <h1> and switched off with a corresponding </h1>. Here are a few:
<h1> turns on large headlines</h1>
<h2> turns on semi large headlines</h2>
<h3> turns on medium sized headlines</h3>
<h4> turns on semi medium kinda headlines</h4>
<h5> turns on getting a size complex headlines</h5>
<h6> turns on WAY small headlines</h6>
If you write in your HTML file:
<h1>ATTENTION! MASSIVE WATER MELON CRUSHES STUDENT</h1>
You'll get approximate 26 point:
ATTENTION! MASSIVE WATER MELON CRUSHES STUDENT
Try it. COPY AND PASTE All of the 6 types of headings in your HTML file and view it.
Note the END tags are there!!!!!!!!!!!!
Lesson 4: Adding Images
You must know the name of the image and its file type. Ie: tif, jpg, gif
<img src= ? >
<img src= face.jpg > places an image of a face;
the words 'img src=' never change; it is only the name of the picture that changes. Don’t use "face.jpg", it’s not on your computer
<img src = face.jpg>
img means image. src stands for source (or location) of the image.
Save images in same folder as HTML source file (notepad file)
The browser will auto look in the same folder as the HTML code file for images.
Lesson 5: Alignment
<center> aligns an image in the center. Make sure you close the centering </center> or everything after the tag will be centered
Control where the image is placed on the page.
<center> <img src=monkey.gif> </center>
[This code also works for text, etc]
<left> This will put your text to the left. </left>
<right> This will put your text to the right. </right>
Lesson 6: Background Image
<body background = monkey.gif>
The tag allows an image file for the background. (Behind any written words)
*********Write the tag inside the <body> tag at the top of your code
Large image may only appear once (depending size of the browser window)
Smaller images will be redrawn to fill a page - a process known as tiling.
<body background = monkey.gif>
This is adding a "Modifier" to the body tag. You do NOT add another <body> tag.
It does Not look like this <body> <body background = monkey.gif> = BAD
The monkey will appear in your background as many times as the browser window and the size of your image will allow.
If it's a small image - 20 by 20 pixels
And the page is being viewed in a 480 by 640 browser window
the monkey will appear 768 times.
72 pixels per inch is standard
There is no way to prevent a background from tiling if it is a small picture.
This effect will NOT look good if the image is too dark or too complicated.
It will BUG your readers.
Lesson 7: Bold and Italic Text
<b> creates bold text</b>
<i> creates italic text</i>
Both bold (bold) and italic (italic) text are used to show emphasis. They're two of the easiest tags to master.
Lesson 8: Font Size
<font size=1> adjusts font size
</font> returns font to default size
<font size=6>I am a big person.</font>
Unlike the headline tags, which force headlines of different
sizes onto different lines, the <font size> tags let you
combine different sized words on the same line.
You can choose from seven convenient font sizes:
<p> <font size=1> this is font size 1 </font>
<p> <font size=2> this is font size 2 </font>
<p> <font size=3> this is font size 3 </font>
<p> <font size=4> this is font size 4 </font>
<p> <font size=5> this is font size 5 </font>
<p> <font size=6> this is font size 6 </font>
<p> <font size=7> this is font size 7 </font>
Lesson 9: Font colour = Text Color[/n]
Note that it is the AMERICAN spelling of color.
Avoid the use of Red or Blue colours for text. They have specific uses:
Blue = links (I’ll explain later )
Red = followed links (I’ll explain later )
<body text=yellow> makes the entire document a colour </body>
<font color=white>What ever </font> makes only those letters that colour
<font color=purple>you want to write.</font> these words are different
<body text=yellow background = monkey.gif> </body>
Lesson 10: bgcolour = Background Color
<html>
<body bgcolor=yellow> sets background colour of the entire page </body>
The background colour is specified within the <body> tag at the beginning of your html document.
<body bgcolor=red> you can use some real words for the color </body>
The browser only knows a limited number of colors specified by name.
*************you'll want to replace the name of the color, with a hexadecimal code.( 6 character code. Hex = 6) Go to www.webmonkey.com then Color Codes for hexa decimal codes.
<body bgcolor=#ffffff> hexa decimal code for white
The "ffffff" represents the RGB (Red, Green, Blue) value of white, translated into hexadecimal. Note the "#" symbole that goes before.
Lesson 11: Links[/size> <a href=http://www.starwars.com>; click here to go to star wars web site </a>
Words in between the tags are the link in blue on your page.
******To change the colour of your links modify the body tag.
<body alink=yellow vlink=green>
alink is the "active link" (when the mouse is on it)
vlink is the "visited link" (when the mouse has clicked it)
- You need the URL of the page you're linking to include "http://";
The "href" meens Hypertext REFerence and it tells the browser what file it's referencing & where to find it.
[size=5]Mail to
<a href="mailto:scoobydoo@teletoon.com"> creates a mail to an email address</a> closes a mailto
Often, pages include links to send e-mail to a particular address. When creating a link, you sandwich the words (that will be coloured in blue and become the link) with the tags <a href="mailto: your address"> and </a>
If your email address were
monkeygirl@jungle.com your HTML might read:
<a href="mailto:monkeygirl@jungle.com">
mailto:monkeygirl@jungle.com</a>
The page would show the email address in blue
monkeygirl@jungle.com
This link is similar to the others in that is starts with
<a href= "mailto:
and ends with
</a>
This is all you need to know to make a basic HTML Website. Thanks to Forrest's brain as the only source. http://www.freewebs.com is a good site for a free web domain.
http://www.freewebs.com/theVWbeetle/ This is a sample website I made using only these codes, along with some that you find by searching 'Cool HTML codes'.
-Forrest
(Edited by 4est at 5:37 pm on July 3, 2006)
(Edited by 4est at 5:39 pm on July 3, 2006)
-------
In vain I have struggled. It will not do. My feelings will not be repressed.
You must allow me to tell you how ardently I admire and love you.
707 users online 
223789 members 
You have 1 new message.
Patron
