HTML

Article
Browse Code
Stats
Revisions
First Posted Views Bookmarked Licence
17 Oct 2000 233,703 130 times
VC6, Win2K, Visual-Studio,HT L, !e", Be#inner
$ We% !e"elo&ment $ HT L ' CSS $ HT L
HTML or Be!inners
B( "on!#ian $%o& ) 2* +o" 2,,, A t&torial 'or t%ose w%o want to learn HTML in a (&ic) and eas* wa*+
Basic Ta!s
Basic Ta!s HT L Head Title eta Bod* C%aracter, ,ara!ra-% and ,osition H.T3TL1/.0T3TL1/ P .li#n Center B/ T1e title ta# is an im&ortant ta#2 7t is used to dis&la( a title on t1e to& o0 (our %rowser window2 Bot1 t1e o&enin# and t1e closin# ta#s #o %etween t1e 1ead ta#s2 T1e 0ollowin# e3am&le s1ows 1ow to use t1e ta#s8 Colla&se Ta#s are elements o0 t1e HT L lan#ua#e2 .lmost e"er( kind o0 ta# 1as an o&enin# s(m%ol and a closin# s(m%ol2 For e3am&le, t1e 4H5.!6 ta# identi0ies t1e %e#innin# o0 1eadin# in0ormation2 7t also 1as a closin# ta# 4'H5.!62 .HTML/.0HTML/ T1is element tells %rowsers t1at t1e 0ile is a HT L document2 5ac1 HT L document starts wit1 t1e ta# 4HT L62 T1is ta# s1ould %e 0irst t1in# in t1e document2 7t 1as an associate closin# ta# 4'HT L6 w1ic1 must %e t1e last ta# in t1e 0ile2 .H1A2/.0H1A2/ T1e 1ead contains im&ortant in0ormation a%out t1e document2
H/ 9n%s&: Block;uote
<html> <head> <title>John's Homepage</title> </head> <body> </body> </html>
.M1TA/ Pre Comments C%aracter St*le Base0ont Lists T1e descri&tion meta8 <nordered Lists =rdered Lists !e0inition Lists Lin)s 3ma!e Color T1e 0ollowin# e3am&le s1ows 1ow t1ese ta#s are coded8 Ta4le Colla&se orm 7n&ut Te3t .rea /adio Button
<head> <title>HTM' +or ,eginners</title> <meta name="Author" $ontent="Nong"ian #hou"> <meta name="-es$ription" $ontent="A %ery easy tutorial &or HTM' beginners"> <meta name=".ey)ords" $ontent="html*tutorial*beginner*)eb design"> </head>
.not1er ta# t1at can %e added in t1e 1ead is a 4 5T.6 ta#2 7t is used to 1el& searc1 en#ines inde3 a &a#e2 T1ere are se"eral di00erent meta names2 T1e aut1or meta8 Colla&se
<META NAME="author" !NTENT="Nong"ian #hou">
Colla&se
<META NAME="des$ription" !NTENT="A %ery easy tutorial &or HTM' beginners">
T1e ke(word meta2 +ote t1at alwa(s se&erate Ke(words wit1 a comma8 Colla&se
<META NAME="(ey)ord" !NTENT="html*tutorial*beginner*)eb design">
C1eck Bo3 Su%mit and /eset Password Pull-!own Scroll-!own rame enu enu
.BO25/.0BO25/ T1e Bod( Ta# is used to identi0( t1e start o0 t1e main &ortion o0 (our we%&a#e2 Between 4B=!>6 4'B=!>6 ta#s (ou will &lace all ima#es, links, te3t, &ara#ra&1s, and 0orms2 We will e3&lain eac1 ta# t1at is used wit1in t1e %od( o0 t1e HT L 0ile2
C%aracter, ,ara!ra-% and ,osition

.H6/.0H6/
T1ere are si3 le"els o0 1eadin#s, num%ered ? t1rou#1 62 T1ese ta#s are used 0or t1e c1aracters in t1e outlines2 HTML 'or Code,ro#ect T1e %i##est 1eadin# is 4H?6 and smallest one is 4H668 Articles Colla&se
<H/>,iggest te0t</H/> 111111 <H2>smallest te0t</H2>
.,/.0,/ Para#ra&1 ta#s @4P6 o&enin# ta# and 4'P6 closin# ta#A allow (ou to &lace a &ara#ra&12 For e3am&le8 4&6Basic 7n0ormation4'&6 T1e 4'P6 closin# ta# ma( %e omitted2
Ali!n
T1e de0aulted &osition is le0t Busti0ication2 >ou can also use C.L7D+C 0or Busti0ication8 Colla&se
 5aragraph )ill be $entered 5aragraph )ill be le&t "usti&ied
5aragraph )ill be right "usti&ied
.C1"T1R/.0C1"T1R/ T1is kind o0 ta#s 1a"e ca&a%ilit( o0 allowin# (ou to center t1e te3t on t1e 1ome&a#e2 Colla&se
<$enter> 5aragraph )ill be $entered</$enter>
.BR/ T1is ta# %reak w1ate"er to %e on t1e ne3t line2 T1e 0ollowin# is an e3am&le8 Colla&se
6el$ome To My Homepage7
.HR/ T1is ta# adds a 1oriEontal line or di"ider to (our we% site2 .n 4H/6 ta# makes t1e 0ollowin# di"ider8
T1e 41r6 ta# can %e set as8 41r widt1FCGH,C ali#nFCri#1tC siEeFCHC6
7n4s-8
>ou can add s&aces in (our te3t %( usin# 7n4s-82 .BLOC9:;OT1/.0BLOC9:;OT1/ >ou can use t1is ta# to 0ormat or remo"e a te3t %( mo"in#in# %ot1 t1e le0t and ri#1t sides o0 t1e &ara#ra&12 Colla&se
<,'! .89!TE> <H/>6el$ome To John's Homepage7</H/>
 ontent ,asi$ 3n&ormation </,'! .89!TE>
.,R1/.0,R1/ Pre0ormatted t1e te3t o0 t1e &ara#ra&1 to e3actl( dis&la( w1at (ou t(&ed in t1e We% %rowser2 For e3am&le8 Colla&se
<pre> 3tem 5ri$e :uantity ;;;;;;;;;;;;;;;;;;;;;;;;;;;;; A <=1>> ?< , ?@1>@ /< ;;;;;;;;;;;;;;;;;;;;;;;;;;;;; </pre>
Comments
T1e comment ta# looks like t1is8 Colla&se
<7;; Comments ;;>
+ot1in# inside t1e comment ta#s will s1ow u& w1en (our &a#e is "iewed2 C%aracter St*le C1aracter st(les include &1(sical and lo#ical c1aracter st(les, and Face, SiEe, and Color2 T1e 0ollowin# is c1aracter st(le ta%le2 T*-e C%oice 4B6 476 4<6 P1(sical 4Strike6 st(les 4Su&6 4Su%6 Telet(&e '&nction ake te3t 4old+ ake te3t italic. ake te3t underline2 ake te3t striket1rou#12 ake te3t ake te3t
su&erscri&t
su%scri&t
ake te3t telet(&e2
4Stron#6 45m6 4Cite6
7ndicate t1e te3t is "er( im&ortant2 7ndicate t1e te3t is im&ortant2 7ndicate t1at t1e te3t is 0rom a %ook or ot1er document2
4.ddress6 7ndicate t1at t1e te3t is an address2 Lo#ical st(les 4!0n6 4Sam&6 Ke(%oard 4Var6 4Code6 ont Face !e0ault C%oice 7ndicate t1at t1e te3t is a de0inition2 7ndicate t1at t1e te3t is a se;uence o0 literal c1aracters2 7ndicate t1at t1e te3t is ke(%oard in&ut2 7ndicate t1at t1e te3t is a "aria%le2 7ndicate t1at t1e te3t is code2 &nction ake te3t dis&la( in t1e de0ault 0ont @Times +ew /omanA o0 t1e We% %rowser2 T(&e a list o0 0onts se&arated %( commas @0or e3am&le, Hel"etica, .rial, CourierA2 T1e te3t will dis&la( in t1e 0irst listed 0ont 0ound on t1e %rowserIs s(stem2 ake t1e te3t dis&la( in t1e 0ont s&eci0ied2 @70 t1e 0ont is not a"aila%le on t1e %rowserIs s(stem, anot1er 0ont will %e su%stituted2A
Famil(
@Font nameA SiEe
? t1rou#1 Format te3t wit1 * siEes w1ere * is t1e * @J is t1e lar#est siEe and ? is t1e smallest2 de0aultA 7ncrease !ecrease Format te3t wit1 t1e lar#est siEe @same as *A2 Format te3t wit1 t1e smallest siEe @same as ?A2
C-333333C or8 W1ite, Color /ed, Blue and =t1ers
ake t1e te3t a di00erent color2
T1e ta#s %elow 1a"e t1e e00ect s1own on t1e te3t in %etween2 Colla&se
<9>underlined te0t</9> <,>bold text</,> <3>Italicized text</3> <,34>Big text</,34>
<AMA''>small te0t</AMA''> <TT>Monospa$ed type)riter te0t</TT> <,'3N.>blin(</,'3N.> BNoteC This only )or(s on Nets$apeD <A9,>This ma(es a subs$ript1</A9,> <A95>This ma(es a supers$ript1</A95> <ATE3.E>stri(eout</ATE.E> <+!NT +A E="Arial">This is a test</+!NT> <+!NT !'!E="FGG++GG">Te0t is in the $olor o& 4reen</+!NT> <+!NT A3#E="H?">This is a test</+!NT>
.BAS1 O"T/ >ou ma( use t1is ta# to set de0ault 0ont 0ace, siEe or color 0or (our &a#e and sa"e (our time o0 codin#2 For e3am&le8
Colla&se
<base&ont &a$e="Arial" siIe="J" $olor="red">
Lists
T1ere are t1ree kinds o0 lists in HT L8
Colla&se
9nordered lists <9'></9'> !rdered lists <!'></!'> -e&inition lists <-'></-'>
;nordered Lists T1is list starts wit1 an o&enin# list 4<L6 ta# and ends t1e list wit1 a closin# list 4'<L6 ta#2 Between t1e 4<L6 and 4'<L6, (ou enter t1e 4L76 @list itemA ta# 0ollowed %( t1e indi"idual item: no closin# 4'L76 ta# is needed2 For e3am&le8
Colla&se
<9'> <'3> Name <'3> 5hone <'3> 3</9'>
7n t1e we% %rowser t1e a%o"e code would a&&ear t1ree elements as8 o o o +ame P1one 7!
Ordered Lists .n orderered list is similar to an unordered list, e3ce&t it uses 4=L6 instead o0 4<L68
Colla&se
<!'> <'3> ollege <'3>Hight A$hool <'3>Elemantory A$hool </!'>
T1e out&ut is8 ?2 Colle#e 22 Hi#1t Sc1ool J2 5lemantor( Sc1ool 2e'inition Lists . de0inition list starts wit1 4!L6 and ends wit1 4'!L62 T1is list consists o0 alternatin# a de0inition term and a de0inition de0inition2 T1e de0inition term is enclosed in 4!T6 4'!T6 and s1ould &recede t1e de0inition de0inition2 T1e de0inition de0inition is enclosed in 4!!6 4'!!62 So, a w1ole de0inition list looks like8
Colla&se
<-'> <-T> term </-T> <--> de&inition </--> 111 <-T> term </-T> <--> de&inition </--> </-'>
Lin)s
Links allow (ou to na"i#ation 0rom one &a#e to anot1er on t1e internet or in (our local mac1ine2 Be0ore (ou add a link to (our &a#e (ou need a </L o0 anot1er we% site or a &at1 o0 (our local 0ile t1at (ou want to link to2 T1e link ta# also &ro"ides t1e ca&a%ilit( to &ro"ide a wa( 0or linkin# an e-mail address2 To link to anot1er 0ile in (our current dictionar(, use 4. H/5FFCname21tmlC6 anc1or te3t 4'.62 For e3am&le8
Colla&se
<A HEE+="bs$3n&o1html">,asi$ 3n&ormation</A>
70 (ou want to link to a 0ile t1at in anot1er dictionar(, (ou can write t1e code like t1is8
Colla&se
<A HEE+="path/name1html">Te0t</A>
>ou can create links 0rom (our we%&a#e to ot1er we%&a#es on internet8
Colla&se
<A HEE+="httpC//internet$ollege1%irtuala%e1net/">3nternet ollege</A>
70 (ou want link to t1e an email address and w1en (ou click it, t1en start t1e mail &ro#ram, (ou can write t1e a link like t1is8
Colla&se
<A HEE+="mailtoCinternet/G/Kgo1$om">Email us</A>
70 a 0ile 1as a lar#e siEe, (ou ma( want to create links to
di00erent &arts o0 t1e &a#e2 To do t1at, 0irst (ou must lea"e a &ointer to t1e &lace in t1e 0ile (ou want to link to2 T1e &ointer looks like 4. +. 5FC3(EC62 T1en use 4. H/5FFC-3(EC6 ta#s2 For e3am&le, (ou want to 1a"e a link 0rom t1e section ! to t1e section C ( current &roBectC o0 (our &a#e2 /i#1t %e0ore C ( current &roBectC (ou need to t(&e 4. +. 5FC C62 .t t1e section ! o0 (our &a#e (ou add t1e 0ollowin# link8 4. H/5FFC- C62 T1e s(m%ol tells (our %rowser to look 0or t1e link wit1in t1e same document instead o0 lookin# 0or anot1er 0ile2 >ou can use an( num%er or letter to re&lace C C8
Colla&se
<,!-L> <A NAME="M"></A>My $urrent pro"e$ts 111111 <A HEE+="FM"></A> li$( here to see my pro"e$ts</A> </,!-L>
>ou can link to an( &lace in ot1er documents %( t1e same wa(8
Colla&se
<A HEE+="people1htmlF+<">+a$ulty 3n&omation</A>
>ou also can link a &art o0 anot1er &a#e on t1e 7nternet i0 (ou can &ut a &ointer 4. +. 5FCC6 in it8
Colla&se
<A HEE+="httpC//ser%er/path/&ileF+<">
3ma!e
ost We% %rowsers can dis&la( ima#es t1at are in D7F, or KP5D 0ormat2 To include an ima#e, enter8
Colla&se
<3M4 AE ="ImageName">
For e3am&le8 47 D S/CFCmonky.gifC6 T1e 47 D6 ta# is used to de0ine an ima#e2 T1is ta# does not 1a"e a closin# ta#2 T1e 7 D &art tells t1e %rowser to add an ima#e, T1e
S/C tells (our %rowser w1ere to 0ind t1e ima#e2 >ou s1ould include two ot1er attri%utes on 47 D6 ta#s to tell (our %rowser t1e siEe o0 t1e ima#es2 T1e H57DHT and W7!TH attri%utes let (our %rowser set aside t1e a&&ro&riate s&ace @in &i3elsA 0or t1e ima#es2 For e3am&le8
Colla&se
<3M4 AE ="mon(y1gi&" HE34HT=MG 63-TH=/GG>
>ou can &ut an ima#e in t1e le0t or ri#1t o0 a &a#e %( usin# .L7D+22 For e3am&le8
Colla&se
<3M4 AE ="ImageName" A'34N="right">
B( de0ault t1e %ottom o0 an ima#e is ali#ned wit1 t1e 0ollowin# te3t2 >ou can ali#n ima#es to t1e to&, %ottom or middle o0 a &ara#ra&1 %( usin# one o0 t1ree t1in#s8 T=P, 7!!L5, B=TT= , For e3am&le8
Colla&se
<3M4 AE ="mon(y1gi&" A'34N="top">
+ote8 >ou must use Cali#nC, not C"ali#nC to set 0or T=P, 7!!L5, B=TT= 2 7tIs di00erent 0rom t1e ta%le ali#nment2 We can use C"s&aceC and C1s&aceC to adBust s&ace around t1e &icture8 47 D S/CFCmonk(2#i0C "s&aceFCH,C 1s&aceFCL,C6 T1e .LT attri%ute is one o0 7 D attri%utes2 >ou can use t1e .LT attri%ute to s&eci0( te3t to %e dis&la(ed instead o0 an ima#e2 For e3am&le8
Colla&se
<3M4 AE ="mon(y1gi&" A'T="Nmon(yO">
7n t1is e3am&le, i0 someone cannot see t1e ima#e, at least t1e( will %e a%le to read t1e name o0 t1e ima#e and know t1at it would %e a monk( %ecause t1e words CMmonk(NC is s1own in t1e &lace2
.n ima#e can %e used as 1(&erlinks Bust like &lain te3t2 T1e 0ollowin# is t1e HT L code8
Colla&se
<A HEE+="animal1html"><3M4 AE ="mon(y1gi&"></A>
T1e %lue %order t1at surrounds t1e ima#e indicates t1at itIs a clicka%le 1(&erlink2 70 (ou do not want to dis&la( t1is %order, (ou can add t1e B=/!5/ attri%ute and settin# it to Eero8
Colla&se
<A HEE+="animal1html"><3M4 AE ="mon(y1gi&" ,!E-EE=G></A>
>ou can load an ima#e 0rom anot1er we%&a#e to (our &a#e2 To dis&la( a ima#e on some one elseIs &a#e, (ou need to 0ind t1e </L8
Colla&se
<3M4 AE ="httpC//)))1ab$d1$om/image?1gi&">
>ou also can use an ima#e as a %ack#round2 T1e ta# to include a %ack#round ima#e is included in t1e 4B=!>6 statement as an attri%ute8
Colla&se
<,!-L ,A .4E!9N-="ImageName">
. lar#e inline ima#e would slow down t1e loadin# o0 t1e main document2 To a"oid it, (ou ma( 1a"e an ima#e o&en as an e3ternal ima#e2 To include a re0erence to an e3ternal ima#e, enter8
Colla&se
<A HEE+="ImageName">lin( an$hor</A>
>ou can also use a smaller ima#e as a link to a lar#er ima#e2 5nter8
Colla&se
<A HEE+="LargerImageName"><3M4 AE ="SmallImageName"></A>
Color
>ou ma( want to 1a"e a s&eci0ic color 0or t1e %ack#round, te3t, links, "isited links, and acti"e links2 7n HT L, Colors are coded as a 6 di#it 1e3 /DB @red, #reen, %lueA num%er2 . 1e3adecimal "alue in t1e ran#e ,,-FF2 For e3am&le, ,,,,,, is %lack @no color at allA, FFFFFF is w1ite @0ull( saturated wit1 all t1ree colorsA2 FF,,,, is %ri#1t red, ,,,,FF is %ri#1t %lue, and ,,FF,, is &astel #reen2 >ou must 1a"e t1e C-C si#n %e0ore t1e actual code2 >ou can use t1e attri%utes o0 t1e 4B=!>6 ta# to c1an#e t1e color o0 te3t, links, "links @"isited linksA, and alinks @acti"e linksA2 For e3am&le8
Colla&se
<,!-L bg$olor="F++++++" te0t="FGGGGGG" lin(="FGGGG++" %lin(="FMGGGGG" alin(="FMGMGGG">
>ou can also use t1e name o0 t1e color instead o0 t1e corres&ondin# /DB "alue to indicate some %asic colors2 For e3am&le, C%lackC, CredC, C%lueC, and C#reenC are all "alid 0or use in &lace o0 /DB "alues2 Colorin# s&eci0ic te3t is done "er( muc1 like c1an#in# t1e 0ont siEe2 T1e ta# is like8
Colla&se
<+!NT $olor="$ode"> te0t </+!NT>
T1is ta# can %e com%ined wit1 t1e 0ont siEe2 For e3am&le8
Colla&se
<+!NT $olor="FGG++GG" siIe="H<"> te0t </+!NT>
Ta4le
T1e 0ormat o0 ta%le is8
Colla&se
<TA,'E> <TE> <T-> Table Entry </T-> 111 <T-> Table Entry
</T-> </TE> 111 <TE> <T-> Table Entry </T-> 111 <T-> Table Entry </T-> </TE> </TA,'E>
T1e w1ole ta%le is o&ened and closed wit1 4T.BL56 4'T.BL562 5ac1 row is enca&sulated in 4T/6 4'T/62 Wit1in t1e row are cells, enclosed in 4T!6 4'T!62 T1ere can %e as man( rows and columns as (ou want and as will 0it on t1e screen2 T1e %rowser will auto0ormat t1e rows, "erticall( centerin# cell contents i0 necessar(2 70 (ou want a cell to s&an more t1an one column, enclose it in 4T! C=LSP.+FO6 4'T!6, w1ere O indicate t1e num%er o0 columns to s&an2 Similarl(, 4T! /=WSP.+FO6 4'T!6 will cause t1e cell to s&an O rows2 . %order can %e &laced around all t1e cells %( usin# 4T.BL5 B=/!5/FO6 4'T.BL56, w1ere O is t1e num%er o0 &i3els t1ick t1e %order s1ould %e2 LetIs see an e3am&le8
Colla&se
< ENTEE><TA,'E ,!E-EE=/ 63-TH="2?P" HE34HT=>G> <TE> <T- 63-TH=M?>< ENTEE> Name</ ENTEE></T-> <T- 63-TH=///>< ENTEE>5hone</ ENTEE></T-> <T- 63-TH=>/>< ENTEE>3-</ ENTEE></T-> </TE> <TE> <T- 63-TH=M?>< ENTEE>John 'ee</ ENTEE></T-> <T- 63-TH=///>< ENTEE>=@2;>2M</ ENTEE></T-> <T- 63-TH=>/>< ENTEE>?J2@MG</ ENTEE></T-> </TE> <TE> <T- 63-TH=M?>< ENTEE> herry HeitI</ ENTEE></T-> <T- 63-TH=///>< ENTEE>JM>;<?2</ ENTEE></T-> <T- 63-TH=>/> < ENTEE>>GMJ=<</ ENTEE></T-> </TE> </TA,'E></ ENTEE>
+ame Ko1n Lee C1err( HeitE
P1one GH6-P6L
7! 2*6HL,
*LP-J26
P,L*GJ
T1e "alue o0 widt1 and 1ei#1t can %e C33QC or OO2 For
e3am&le8 W7!THFCL,QC or W7!THFGH,2 C33QC allow t1e ta%le siEe c1an#in# w1ile t1e window siEe is c1an#in#2 T1e "alue o0 Border can %e Eero2 7n t1is case, t1e ta%le will 1a"e no %order2 >ou can make a ta%le lookin# like t1is8
T1e 0ollowin# is t1e code o0 t1is ta%le2
Colla&se
<TA,'E ,!E-EE=/G E''A5A 3N4=/G <TE><T-></T-><T-></T-></TE> <TE><T-></T-><T-></T-></TE> </TA,'E> E''5A--3N4=?>
T1e C5LLSP.C7+D attri%ute re0ers to t1e s&ace %etween cells and s1ould %e in &i3els2 T1e C5LLP.!!7+D attri%ute re0ers to t1e s&acin# wit1in t1e cell in &i3els @t1e s&ace %etween t1e cell walls and t1e contents o0 t1e cellA2
1lement .TABL1/ .0TABL1/ .CA,T3O"/
2escri-tion de0ines a ta%le in HT L2 70 t1e B=/!5/ attri%ute is &resent, (our %rowser dis&la(s t1e ta%le wit1 a %order2
de0ines t1e ca&tion 0or t1e title o0 t1e ta%le2 T1e de0ault &osition o0 t1e title is .0CA,T3O"/ centered at t1e to& o0 t1e ta%le2 T1e attri%ute .L7D+FB=TT= can %e used to &osition t1e ca&tion %elow t1e ta%le2 "OT1< .n( kind o0 marku& ta# can %e used in t1e ca&tion2 .TR/ .0TR/ s&eci0ies a ta%le row wit1in a ta%le2 >ou ma( de0ine de0ault attri%utes 0or t1e entire row8 .L7D+ @L5FT, C5+T5/, /7DHTA and'or V.L7D+ @T=P, 7!!L5, B=TT= A2 See Ta%le .ttri%utes at t1e end o0 t1is ta%le 0or more in0ormation2 de0ines a ta%le 1eader cell2 B( de0ault
.TH/ .0TH/
t1e te3t in t1is cell is %old and centered2 Ta%le 1eader cells ma( contain ot1er attri%utes to determine t1e c1aracteristics o0 t1e cell and'or its contents2 See Ta%le .ttri%utes at t1e end o0 t1is ta%le 0or more in0ormation2 .T2/ .0T2/ de0ines a ta%le data cell2 B( de0ault t1e te3t in t1is cell is ali#ned le0t and centered "erticall(2 Ta%le data cells ma( contain ot1er attri%utes to determine t1e c1aracteristics o0 t1e cell and'or its contents2 See Ta%le .ttri%utes at t1e end o0 t1is ta%le 0or more in0ormation2 2escri-tion HoriEontal ali#nment o0 a cell2
Attri4&te .L7D+ @L5FT, C5+T5/, /7DHTA V.L7D+ @T=P, C=LSP.+Fn /=WSP.+Fn +=W/.P
7!!L5, B=TT= A Vertical ali#nment o0 a cell2 T1e num%er @nA o0 columns a cell s&ans2 T1e num%er @nA o0 rows a cell s&ans2 Turn o00 word wra&&in# wit1in a cell2
orm
Forms allow t1e user to enter in0ormation2 For e3am&le, (ou can use 0orms to collect userIs names and email addresses2 Forms %e#in wit1 t1e ta# 4F=/ 6 and end wit1 4'F=/ 62
Colla&se
<+!EM A T3!N="path/s$ript1pl" METH!-=""> 111111 </+!EM>
Two attri%utes (ou s1ould t(&e 0or (our 0orm are t1e Form .ction and et1od28
Colla&se
<+!EM A T3!N="httpC//)))1ab$1$om/$gi; bin/login1pl" METH!-="post">
3n-&t >ou can use Cin&utC 0or sin#le line in0ormation8
Colla&se
<3N59T TL5E="input" NAME=name A3#E=FF>
For e3am&le8
Colla&se
<3N59T TL5E="input" NAME="email" A3#E=?2>Lour Email Address <3N59T TL5E="input" NAME="name" A3#E=?2>Lour Name <3N59T TL5E="input" NAME="sub"e$t" A3#E=?2>Aub"e$t
Here is w1at t1e result s1ows8
Colla&se
"email" siIe="?2"> Lour Email Address "&irstname" siIe="?2"> Lour Name "sub"e$t" siIe="?2"> Aub"e$t
T1e "alue o0 siEe is in c1aracters, so CS7R5F26C means t1e widt1 o0 t1e in&ut %o3 is 26 c1aracters2 Te=t Area Te3t .rea can %e as %i# as (ouId like2 Te3t .rea %e#ins wit1 4T5OT./5. +. 5Fname /=WSF-C=LSF--6and end wit1 4'T5OT./5.62 For e3am&le8
Colla&se
<TEQTAEEA Eo)s=? ols=?@ NAME="$omments"></TEQTAEEA>
T1e result is8
Colla&se
Radio B&tton >ou can use radio %uttons to ask a ;uestion wit1 one answer2 For e3am&le, i0 (ou wanted to ask CW1ic1 &icture do (ou likeSC and (ou wanted to 1a"e t1e c1oices Cmonk(C, C0lowerC, C#irlC, C%uildin#C, (ou would t(&e8
Colla&se
<3N59T TL5E="radio" $he$(ed NAME="pi$ture" RA'9E="mon(y">Mon(y<5> <3N59T TL5E="radio" NAME="pi$ture" RA'9E="&lo)er">+lo)er<5> <3N59T TL5E="radio" NAME="pi$ture" RA'9E="girl">4irl<5> <3N59T TL5E="radio" NAME="pi$ture" RA'9E="building">,uilding<5>
T1e /esult is8
Colla&se
"pi$ture" type="radio" $he$(ed %alue="mon(y"> Mon(y "pi$ture" type="radio" %alue="&lo)er"> +lo)er "pi$ture" type="radio" %alue="girl"> 4irl "pi$ture" type="radio" %alue="building"> ,uilding
C%ec) Bo= C1eck%o3es let t1e user c1eck t1in#s 0rom a list2 T1e 0orm is8
Colla&se
<3N59T TL5E="$he$(bo0" NAME="name" RA'9E="te0t">
+otice t1at t1e di00erence %etween c1eck %o3es and radio %uttons is t1at an( num%er o0 c1eck %o3es can %e c1ecked at one time w1ile onl( one radio %utton can %e c1ecked at a time2 For e3am&le, i0 (ou wanted to ask CW1ic1 &icture do (ou likeSC and (ou allow an( num%er o0 c1eck %o3es can %e c1ecked at one time, (ou would t(&e8
Colla&se
<3N59T TL5E="$he$(bo0" NAME="pi$ture" RA'9E="mon(y">Mon(y<5> <3N59T TL5E="$he$(bo0" NAME="pi$ture" RA'9E="&lo)er">+lo)er<5> <3N59T TL5E="$he$(bo0" NAME="pi$ture" RA'9E="girl">4irl<5> <3N59T TL5E="$he$(bo0" NAME="pi$ture" RA'9E="building">,uilding<5>
T1e result is8
Colla&se
6hi$h pi$ture do you li(eS "pi$ture" type="$he$(bo0" %alue="mon(y"> Mon(y "pi$ture" type="$he$(bo0" %alue="&lo)er"> +lo)er "pi$ture" type="$he$(bo0" %alue="girl"> 4irl "pi$ture" type="$he$(bo0" %alue="building"> ,uilding
S&4mit and Reset =t1er %utton t(&es include su%mit and reset2 Csu%mitC is t1e %utton t1e user &resses to send in t1e 0orm2 CresetC clears t1e entire 0orm so t1e user can start o"er2 For e3am&le8
Colla&se
<3N59T TL5E="submit" NAME="submit" RA'9E="Aend"> <3N59T TL5E="reset" NAME="reset" RA'9E=" lear">
T1e result is8
Colla&se
"submit" type="submit" %alue="Aend"> "reset" type="reset" %alue=" lear">
,assword T1is t(&e allows users to t(&e in te3t %ut instead o0 dis&la(in# t1e te3t t1at t1e( t(&e astericks are dis&la(ed instead8
Colla&se
<3N59T TL5E="pass)ord" NAME="pass" A3#E="?G">
,&ll>2own Men& >ou can ask a ;uestion wit1 onl( one answer is %( usin# a &ull-down menu2 For e3am&le8
Colla&se
Ho) old are youS <AE'E T NAME="age"> <!5T3!N>/;/@ <!5T3!N AE'E TE- >/2;?/ <!5T3!N>??;<G <!5T3!N></;=@ <!5T3!N>=2;2@ <!5T3!N>22;MG <!5T3!N>M/;up </AE'E T>
T1e result is8
Colla&se
Ho) old are youS
Scroll>2own Men& T1er are two kinds o0 scroll-down menus2 =ne is t1at (ou can onl( select one item8
Colla&se
Ho) old are youS <AE'E T NAME="age" A3#E=@>
<!5T3!N RA'9E="/;/@">/;/@ <!5T3!N RA'9E="/2;?/">/2;?/ <!5T3!N RA'9E="??;<G">??;<G <!5T3!N RA'9E="</;=@"></;=@ <!5T3!N RA'9E="=2;2@">=2;2@ <!5T3!N RA'9E="22;MG">22;MG <!5T3!N RA'9E="M/;up">M/;up </AE'E T>
T1e result is8
Colla&se
Ho) old are youS
T1e ot1er menu is t1at (ou can select one or more items %( 1oldin# down shift2 For e3am&le8
Colla&se
6hat is your &a%orite thingS BHold shi&t to sele$t more that oneD <AE'E T NAME="reading" M9'T35'E siIe="<">reading <!5T3!N RA'9E="sports">sports <!5T3!N RA'9E="tra%elling">tra%elling <!5T3!N RA'9E="musi$">musi$ <!5T3!N RA'9E="$oo(ing">$oo(ing <!5T3!N RA'9E="shopping">shopping <!5T3!N RA'9E="tal(ing">tal(ing </AE'E T><5>
T1e &oint is CmultipleC2
rame
Wit1 0rames, (ou can &ut a num%er o0 HT L &a#es into a sin#le window, eac1 o0 0rame can dis&la( a &a#e2 0rames start and end wit1 t1e 4F/. 5S5T64'F/. S5T6 ta#s2 T1e 4F/. 5S5T6 ta# can 1a"e two modi0iers8 /=WS and C=LS to de0ine 1ow %i# t1e 0rames will %e2 For e3am&le8
Colla&se
<html> <head><title></title></head> <&rameset ro)s="2=*T"> <&rame name="banner" s$rolling="no" noresiIe target="$ontents" sr$="top1htm"> <&rameset $ols="/@G*T"> <&rame name="$ontents" target="main"
sr$="menu1htm"> <&rame name="main" sr$="home1htm"> </&rameset> <no&rames> <body> This page uses &rames* but your bro)ser doesn't support them1 </body> </no&rames> </&rameset> </html>
LetIs e3&lain eac1 element8 rows="64,*" means t1at t1e t1e 0irst 0rame will take u& 6G rows o0 t1e window and t1e second 0rame will take u& t1e rest2 .n asterisk means t1at t1e row will take u& w1ate"er s&ace is le0t2 >ou can use &ercenta#e to re&lace len#t12 For e3am&le8cols="30%,60%" <frame> de0ines eac1 indi"idual 0rame2 name="..." #i"es t1e 0rame a name2 src="..." tells w1ic1 &a#e will %e loaded in t1e 0rame2 target="..." allows (ou to make links a&&ear in s&eci0ic 0rames or windows2 scrolling="yes no auto" allows (ou to control t1e scroll %ars on t1e 0rame2 C(esC 0orces t1e 0rame to alwa(s 1a"e scroll %ars2 CnoC 0orces t1e 0rame to ne"er 1a"e scroll %ars2 CautoC allows t1e %rowser to decide i0 scroll %ars are necessar(2 T1e de0ault "alue is CautoC2 noresi!e allows (ou to kee& t1e 0rame 0rom %ein# resiEa%le %( t1e "iewer2 4'no0rames6 is used to create a 0rameless alternate2 W1en t1e &a#e is "iewed %( a %rowser t1at does not su&&ort 0rames, e"er(t1in# 5OC5PT w1at is %etween t1e 4'no0rames6 ta#s is i#nored2 T1ere are also some Cma#icC T./D5Ts2 CT%lankC will alwa(s o&en t1e link in a new window2 CTto&C will o&en t1e link in t1e w1ole &a#e, instead o0 in a sin#le 0rame2
CTsel0C makes t1e link o&en in t1e 0rame itIs called 0rom2 T1is is use0ul w1en t1e 4B.S52226 ta# is used2 CT&arentC o&ens t1e link in t1e immediate 0rameset &arent o0 t1e 0rame t1e link is called 0rom2 53am&le8
Colla&se
<A HEE+="ah1html" TAE4ET="Ublan(">te0t</A>
.nd, T./D5T can also %e added to t1e 4F=/ 6 ta# to make t1e out&ut 0rom t1e scri&t #ot to t1e s&eci0ied 0rame or window2
HTML 'or Code,ro#ect Articles

@"##e#$%y$&hris$'aun#erA 70 (ou wis1 to su%mit articles to t1e Code ProBect, and (ou want to see (our article u& .S.P, t1en t1e easier (ou make it 0or us, t1e 0aster it #ets &osted2 We use st(le s1eets 0or our articles, so (ou do not need to add an( 0ormattin# at all2 T(&icall( we onl( use 41?6 41H6 0or 1eadin#s, 4&6 0or &ara#ra&1s, 4code6 0or 0unction names wit1in te3t &ara#ra&1s, and 4&re6 0or %locks o0 code2 T1atIs it - no 0anc( 0onts, no colors - it is all taken care o0 0or (ou2 For more in0ormation on &ostin# articles see t1e su%mission #uidelines2

HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML

Uploaded by

Copyright:

Available Formats

Article

First Posted Views Bookmarked Licence

17 Oct 2000 233,703 130 times

VC6, Win2K, Visual-Studio,HT L, !e", Be#inner

$ We% !e"elo&ment $ HT L ' CSS $ HT L

<html> <head> <title>John's Homepage</title> </head> <body> </body> </html>

C%aracter, ,ara!ra-% and ,osition

<p A'34N="right">5aragraph )ill be right "usti&ied</p>

<p> ontent</p> <p>,asi$ 3n&ormation</p> </,'! .89!TE>

ake te3t telet(&e2

4Stron#6 45m6 4Cite6

@Font nameA SiEe

C-333333C or8 W1ite, Color /ed, Blue and =t1ers

ake t1e te3t a di00erent color2

70 a 0ile 1as a lar#e siEe, (ou ma( want to create links to

<A HEE+="LargerImageName"><3M4 AE ="SmallImageName"></A>

+ame Ko1n Lee C1err( HeitE

T1e "alue o0 widt1 and 1ei#1t can %e C33QC or OO2 For

T1e 0ollowin# is t1e code o0 t1is ta%le2

1lement .TABL1/ .0TABL1/ .CA,T3O"/

3n-&t >ou can use Cin&utC 0or sin#le line in0ormation8

Here is w1at t1e result s1ows8

T1e result is8

T1e /esult is8

T1e result is8

T1e result is8

"submit" type="submit" %alue="Aend"> "reset" type="reset" %alue=" lear">

T1e result is8

T1e result is8

T1e &oint is CmultipleC2

HTML 'or Code,ro#ect Articles

You might also like