This is a teaching
page done by Jennifer Tong !
It is just simple
hyper-text markup language (html) for beginners for reference only !
| Simple HTML | HTML About Links | HTML About Form | Special HTML |
<title>TITLE HERE</title>
This is use to make the title of your page
(*remember to put </title> after the title*)
Sample :
This page title html is <title>Corner Of Teach
教學閣</title>
<body background="IMAGE URL HERE">
This is put the image as background image
Sample :
Please go to Hot
Cool Links and you can view the page sources there !
Sorry for that I can't put the sample here !
<p>
This is to start a new paragraph
<br>
This is to start the next word in the second
line
<body bgcolor="#0000FF" text="#000000" link="#F46833"
vlink="#5FB61F" alink="#DE38FC">
bgcolor is the color of background
text is the color of text
link is the color of the link
vlink is the color of the link you have clicked
alink is the color of the link that is actived
Sample :
This page body html is <body bgcolor="#FFFFFF"
text="#000000" link="#F4481E" vlink="#BD395E" alink="#229F8F">
<b>WORD HERE</b>
This make the word bold
(*remember to put </b> after the word*)
Sample :
<b>Hello !</b>
Hello !
<strong>WORD HERE</strong>
This make the word strongly emphasized <b>
(*remember to put </strong> after the word*)
Sample :
<strong>Hello !</strong>
Hello !
<i>WORD HERE</i>
This make the word italic
(*remember to put </i> after the word*)
Sample :
<i>Hello !</i>
Hello !
<em>WORD HERE</em>
This make the word emphasized <i>
(*remember to put </em> after the word*)
Sample :
<em>Hello !</em>
Hello !
<big>WORD HERE</big>
This make the word bigger
(*remember to put </big> after the word*)
Sample :
<big>Hello !</big>
Hello !
<big><big>Hello !</big></big>
Hello !
<font size=+NUMBER>WORD HERE</font>
This make the word bigger or smaller
(*remember to put </font> after the word*)
Sample :
<font size=+2>Hello !</font>
Hello !
<font size=-1>Hello !</font>
Hello !
<hNumber>WORD HERE</hNUMBER>
This make the word bigger or smaller
h1 is the biggest and h6 is the smallest
It will automatically turn to the second line
(*remember to put </hNUMBER> after the
word*)
(*remember the number must be 1 to 6 *)
Sample :
<h1>Hello !</h1>
<blink>WORD HERE</blink>
This make the word blink
(*remember to put </blink> after the word*)
Sample :
<blink>Hello !</blink>
<font face="Comic Sans MS">WORD HERE</font>
Font is to make the words in different styles
(*remember to put </font> after the word*)
Sample :
<font face="arial">Hello !</font>
Hello !
<font color="#0080FF">WORD HERE</font>
This HTML let you choose different color by
writing RGB
(*remember to put </font> after the word*)
Sample :
<font color="#8080FF">HELLO !</font>
HELLO !
<font color="blue">WORD HERE</font>
This HTML let you choose different color by
writing the color name
(*remember to put </font> after the word*)
Sample :
<font color="blue">HELLO !</font>
HELLO !
<center>WORD HERE</center>
This make the word appear in the middle
(*remember to put </center> after the word*)
Sample :
<center>Hello !</center>
Hello !
<blockquote>WORD HERE</blockquote>
This make the word move a little away from
the side
(*remember to put </blockquote> after the
word*)
Sample :
<blockquote>Hello !</blockquote>
Hello !<blockquote><blockquote>Hello !</blockquote></blockquote>
<img src="IMAGE URL HERE">Hello !
<hr>
Put a straight line here
Sample :
<hr>
<hr width=50%>
This change the line's length
<hr size=5>
This change the line's width
<a href="URL HERE">WORDS HERE</a>
This make a link to the other page
(*remember to put </a> after the link*)
Sample :
<a href="http://move.to/jennifer">Cyber Fun
Garden</a>
Cyber Fun Garden
<a href="URL HERE" style="text-decoration:none">WORDS
HERE</a>
This make a link to the other page
But the link is not underlined
(*remember to put </a> after the link*)
Sample :
<a href="http://move.to/jennifer" style="text-decoration:none">Cyber
Fun Garden</a>
Cyber
Fun Garden
<a href="mailto:EMAIL HERE">EMAIL HERE</a>
This make a link to send email to you
(*remember to put </a> after the email*)
Sample :
<a href="mailto:tong@cheerful.com">tong@cheerful.com</a>
tong@cheerful.com
<form action="mailto:EMAIL HERE" method="POST">
(*this can make a form to submit to your e-mail
address*)
<p>FIELD1 : <input type="text" name="FIELDNAME"
size="NUMBER"><br>
(*input type="text" let people type what they
what to write*)
(*size="NUMBER" is the maximum of characters
you can write in this field*)
(*name="FIELD1" is the name you call this
field*)
<br>FIELD2 :<input type="text" name="FIELDNAME"
size="NUMBER" value="http://"><br>
(*value="http://" is you want people to submit
URL to you ,
you can put this html and people will not
need to type http://*)
<br>FIELD3 : <select name="FIELDNAME"
size="NUMBER">
<option value="CHOICE1">CHOICE1</option>
<option value="CHOICE2">CHOICE2</option>
<option value="CHOICE3">CHOICE3</option>
</select><br>
(*this part of html can make people choose
the choice you set , you can make as many choices as you like*)
(*size="NUMBER" is the number of row it will
show*)
<p>FIELD4 :<br>
<br><textarea rows="NUMBER" name="FIELDNAME"
cols="NUMBER"></textarea></p>
(*this part of html can make a large space
to let people write*)
(*row="NUMBER" is the row it will show , cols="NUMBER"
is the column it will show*)
<p><input type="submit" value="WORD
HERE">
(*input type="submit" can let people submit
the form to you*)
<br><input type="reset" value="WORD
HERE">
(*input type="reset" can let people reset
all the things they write and choose in the form*)
</form>
(*remember to put </form> after the all
the fileds*)
Sample :
Please go to Register
Office 登記處 or Jennifer
Webring 我的小圈子 and you can view the page sources there !
Sorry for that I can't put the sample here !
<input type="hidden" name="FIELDNAME_required"
value="WORDS HERE :)">
<input type="hidden" name="FIELDNAME_required"
value="WORDS HERE :)">
<input type="hidden" name="FIELDNAME_required"
value="WORDS HERE :)">
Sometime people don't fill in the blanks ,
you can put this html in between <form action......> and your first
field
Sample :
I have use this html in my Register
Office 登記處
<input type="hidden" name="name_required"
value="Oh ! You don't know your name ? :)">
<input type="hidden" name="title_required"
value="Hey ! Your homepage must have a title ! :)">
<input type="hidden" name="url_required" value="URL
is important in this form ! :)">
So if you don't fill in the blanks of name ,
homepage title and homepage URL ,
a page will show up and tell you to fill them
up again
<a href="#NAME HERE">WORD HERE</a>
<a name="SAME NAME HERE">WORD HERE</a>
This make your page easier to view and go
to the place you need faster
This page html is :
| <a href="#simple">Simple HTML</a> | <a
href="#special">Special HTML</a> |
<a name="simple">Simple HTML</a>
<a name="special">Special HTML</a>
<a href target="main" onmouseover="window.open
('YOUR URL HERE');">WORDS HERE</a>
This let people click over the word and it
will automaticly go to the URL
Sample :
<a href target="main"
onmouseover="window.open ('http://fly.to/jennifer');">Jennifer
Tong Homepage</a>
Jennifer
Tong Homepage
<a href="" target="main" onmouseover="window.open
('YOUR URL HERE');"><img src="YOUR BANNER URL HERE" border="0"></a>
This let people click over the banner and
it will automaticly go to the URL
Sample :
<a href target="main"
onmouseover="window.open ('http://welcome.to/jennifer');"><img
src="http//www.geocities.com/EnchantedForest/Cottage/9779/banner2.gif"border="0"></a>
<embed src="MUSIC URL HERE" AUTOSTART="TRUE"
LOOP="TRUE" width="145" height="60">
This can make you put music in your page
(*autostart="True" means that the music will
start automaticly , autostart="false" means that the music will start when
the play button is clicked*)
(*loop="true" means that when the music finished
, it will start again automaticly , loop="false" means after the music
finished , the music will stop , it will start again when the play button
is clicked*)
Sample :
<embed src="http://geocities.datacellar.net/EnchantedForest/Cottage/9779/titanic.mid"
AUTOSTART="FALSE" LOOP="TRUE" width="145" height="60">