Black and White HTML Tutorial
Welcome to Black and White. This is a page should help you writing your HTML for your page. This page was just started on August 13, 1998, so there's a lot more to come. Check back later!
Okay, what do you need help with?:
1. Putting Frames on my Page
2. Dealing with Simple Links
3. Dealing with Images
4. Putting Blockquoting on my Page
5. The Break Tag
6. Italic, Blod, and Underlined Text
7. I want my font to be something I select
8. My Page Colors
9. Looping Background Music
10. The "Leave Alert"
11. Marquees
12. Forms
13. The Horizontal Rule Tag
14. The Tags You Need To Start Off Your Page
15. Tables
16. Web TV
17. # Links, To Go From Section-to-Section in a Single Page
Frames:
Here is the command that would be used to create a frames page in the column form. If you wanted the page to be in the row form (such as a title above the main page) you would replace the "cols" (shown bold) with "rows". You can adjust the size of the frames by changing the 25% and the 75% to the desired size as long as the numbers you list equal up to 100%!
<frameset cols=25%,75%> <frame src="page.html" name="page"> <frame src="page2.html" name="page2"> </frameset>
You're still in the "Frames" Section. Here is the command you use to make the pages that you link in one frame, show up in the other.
<A HREF="page.html" TARGET="framename" onMouseOver="window.status='Page Name';return true" onMouseOut="window.status='';return true">Page Name</A><BR>
Simple Links:
Links are one of the easiest things to create whether to another page or to an e-mail address. Here is the command you would use to create a link to another page:
<A HREF="PAGE ADDRESS HERE">Link Title or Page Name Here</a>
The above would appear like this: Black and White HTML Tutorial
Here is the link you would use to link to an e-mail address:
<A HREF="mailto:E-MAIL ADDRESS HERE">Link Title or E-mail Address Here</a>
The Above would appear like this: E-mail [email protected]
Here is the link you would use to link to an e-mail address, but make the text in the "SUBJECT" line appear as well ad the text in the "TO" line:
<A HREF="mailto:E-MAIL ADDRESS HERE?subject=ENTER SUBJECT HERE">Link Title or E-mail Address Here</a>
The above would appear like this: E-mail [email protected]
Images:
Here is the link that you would use to get an image to appear on your page. You must place the image address where it says "Place Image Address Here." An example of an image address would be "http://www.domain.com/page/image.gif".
<IMG SRC="IMAGE ADDRESS HERE">
The avbove would appear like this
Here is the command you would use to link an image:
<A HREF="PAGE ADDRESS HERE"><IMG SRC="IMAGE ADDRESS HERE"></a>
The above would appear like this:
Blockquoting:
Here is the command you would use in order to put Blockquoting on your page. In other words the text will run directly down the center of your page with the width you specify.
For each inch in width you want in the blockquoting, use this command (if you want the text you run down the center of your page with a four inch width, you would place this command on your page four times!).
<BLOCKQUOTE>
Sample of Width 4 Blockquoting:
This is a sample of Width Four Blockquoting. As you are probably now noticing, the text is running down the center of the page in "Block" form. Everything you write will be down the center until you end the command.
The Break Tag:
The break tag would be the tag you would use to start a new line. For each line you want spaced between paragraphs, use this tag once (If you want three lines between paragraphs, you would use this tag three times).
<BR>
Italic/Bold/Underline:
Here are the tags you would use if you wanted italicized, bold, or underlined text. You must enter the end tag for each of the below or your "fancy" text will go on and on and on!
Italicized: <i>TYPE TEXT YOU WANT IN ITALICS HERE</i>
Blod: <b>TYPE TEXT YOU WANT TO BE BOLD HERE</b>
Underlined: <u>TYPE TEXT YOU WANT TO BE UNDERLINED HERE</u>
Select Your Font:
This is the command you would use to make the font on your page different than what it usually is (which is usually Arial). Fill in the font name and size that you want to use. You can use any font that is available. (Look in a program such as Word to see all of the available fonts).
<FONT FACE="FONT NAME HERE" SIZE="FONT SIZE # HERE">
Here are a few fonts:
Acidic size 5
Jester size 4
Comic Sans MS size 3
Helvetica size 2
Arial size 1
Color Codes:
There are way too many colors for me to list here. But you can find some good ones and their codes here:
http://www.infi.net/wwwimages/colorindex2.html
Music:
Here is the command you would use to get a music clip playing in the background of your page:
<bgsound src="http://www.domain.com/page/song.wav" loop=true>
<embed src="http://www.domain.com/page/song.wav" autostart=true hidden=true loop=true></embed>
You should now be hearing a sample in the background of this page.
The "Leave Alert":
The "Leave Alert" is a pop-up message that visitors to your site get as they are leaving your site (to see a sample leave this site and then come on back!) Here is the command you would use for the "Leave Alert." Al you have to do is enter your own text!
<BODY BGCOLOR="#EEEEEE" ONUNLOAD="alert('\n Line of Text Here.\n\nAnother Line!.\n\n Yet Another Line.')"><P>
Marquees:
Scrolling Marquee: The text will scroll across the screen in a loopin manner.
<marquee>TYPE TEXT YOU WANT TO SCROLL HERE</marquee>
The Above Will Appear Like This:
Bouncing Marquee: The text will bounce back and forth across the screen in a looping manner.
<marquee behavior=alternate>TYPE TEXT YOU WANT TO BOUNCE HERE</marquee>
The above will appear like this:
Forms:
Here you can get the HTML to place a form on your page. I currently have two types of forms...
The Post Form: The post form will send what page visitors enter in the blank fields to your e-mail address, but make sure that you change the [email protected] to your own address so I don't receive all of your form posts!
<form METHOD=POST ACTION="[email protected]">
<p>Name:
<input TYPE="text"
NAME="name" SIZE="40" MAXLENGTH="40">
<input TYPE="hidden"
NAME="recipient" SIZE="40" MAXLENGTH="40">
</p>
<p>Password:
<input TYPE="password"
NAME="password" SIZE="10" MAXLENGTH="10">
</p>
<p>Yes, I Like Your Page:
<input TYPE="checkbox"
NAME="like-page" VALUE="Yes" checked>
</p>
<p>How Did You Find This Page?
<select
NAME="find-page">
<option
VALUE="surfed">Just Surfed On In
<option
VALUE="link">Link
<option
VALUE="Word Of Mouth">Word of Mouth
<option
VALUE="Other">Other
</select>
</p>
<p>What Browser Do You Primarily Use?
<input TYPE="radio"
NAME="Browser" VALUE="Netscape" checked>Netscape
<input TYPE="radio"
NAME="Browser" VALUE="Internet-Explorer">Internet Explorer
<input TYPE="radio"
NAME="Browser" VALUE="Other">Other
</p>
<p>Comments: <br>
<textarea
NAME="comments" ROWS="10" COLS="70"
wrap="virtual">
Delet this and write your comments here...
</textarea>
</p>
<p>
<input
TYPE="submit" NAME="Request" VALUE="Submit This Form">
<input TYPE="reset"
NAME="Clear" VALUE="Clear Form and Start Over">
</p>
The Above Form Will appear like this (feel free to test it):
The Horizontal Rule Tag:
The horizontal Rule Tag is the tag you would use to make a line across your page. Here's the code:
<HR>
The above would appear like this:
The Tags You Need To Start Off Your Page:
Replace the information already inserted with your own information to personalize your page!
<Head>
<Title>Place Title Here</Title>
</Head>
<BODY BACKGROUND="" BGCOLOR="#000000" TEXT="#ffffff" LINK="#ff0000" VLINK="#ff0000" ALINK="#ff0000">
<FONT FACE="Helvetica" SIZE="2">
<h1><CENTER><U>PLACE PAGE TITLE HERE</U></CENTER></h1>
<BR>
<BR>
Now type what you want in the body of your page here
Tables:
There are a few types of tables, I current have three for you to choose from.
<table border=5 bgcolor=black
align=left width=50% cellborder=1 cellspacing=1>
<td>Row 1 Column 1</td>
<td>Row 1 Column 2
</tr></td>
<tr>
<td>Row2 column 1</td>
<td>Row2 column 2
</tr></td></table>
The Above will appear like this:
| Row 1 Column 1 | Row 1 Column 2 |
| Row2 column 1 | Row2 column 2 |
or there's...
<table border="0" width="100" cellspacing="0" cellpadding="10"> <tr> <td width="584" height="3" bgcolor="#408080"><font face="helvetica"><font color="#FFFFFF"><strong><small> Another Table...</FONT> </td> </tr> </table>
The Above Will Appear Like This:
| Another Table... |
or there's...
<table border=1 bgcolor=blue align=left width=50% cellborder=1 cellspacing=1>
<td>Row 1 Column 1</td>
<td>Row 1 Column 2
</tr></td>
<tr>
<td>Row2 column 1</td>
<td>Row2 column 2
</tr></td></table>
The Avobe Will Appear Like This:
| Row 1 Column 1 | Row 1 Column 2 |
| Row2 column 1 | Row2 column 2 |
Web TV:
Web TV can make your page seem a little more advanced. Here's what you can do:
Add a clock:
<clock,hour,minute>
Hide the options bar:
<display hideoptions>
Eliminate scrolling option:
<display noscroll>
Add The Audioscope
<audioscope>
Auto-Load a New page in the given amout of time:
<meta http-equiv="refresh" content="5;URL=filename">
This would load another file you specify in 5 seconds.
# Link Within The Same Page:
This page has an example of the # Link. Here's the command:
Place this command before the link at the top of the page: <A HREF="#1">LINK TITLE HERE </A>
Place This command right before the section that you want the link to jump to: <A NAME="1">TEXT HERE...
Email me at [email protected] if you have any questions, comments, or suggestions.
|
Since August 14, 1998
|
To Top Of Page!
Last updated August 14, 1998.