hoc html css

download hoc html css

of 60

Transcript of hoc html css

  • 7/30/2019 hoc html css

    1/60

    HNG DN NHP MN HTML

    Bi ny s trnh by v nhng bn ca ngn ngnh du siu vn bn (HTML), nhng thc chtchng c g bn. Nu bit cch dng trnh x l vn bn, bn c th to ra cc trang Web chtrong vi pht.Nhc xy dng trn nn vn bn v ho, World Wide Web (WWW) a Internet nhp vo

    dng chy ca cuc sng. Nhng tnh hp dn ca WWW vt xa hn nhiu so vi giao din ho,l ci li cun nhiu ngi dng PC khng rnh k thut. NhHTML tng i n gin nnnhiu ngi bnh thng c th to ra cc Web site y n tng. Nu bn khao kht mun a ci g ca mnh ln Web, th tt c nhng iu m bn cn c l mt ti khon ng k vi hng cungcp Web, mt t b quyt v HTML, v mt cht c sng to.Bi bo ny sa bn i mt chuyn du lch trn trang Web in hnh, bn c th thy n cthc hin nh th no. c bit, bn sc gii thiu v cc phn t cu to nn HTML (HypertextMarkup Language - Ngn ngnh du siu vn bn) - linh hn cc trang Web. V ngay c trongtrng hp khng c dnh to ra Web site ring cho mnh, th bn cng c thm c hiu bit vnhng g xy ra khi bn ni vo Web v xem cc trang a thch.

    HTML: Ngn ngnh du:

    Sau nhng lng ngng vi vi trang Web trong cuc du lch Internet, c th bn nghrng phi c giphn mm tinh vi thu c tt c nhng hiu ng trang try quyn r ny. Mc d c mt scng c dnh cho nhng ngi say m HTML thc s, nhng bn c th dng mt trnh son thovn bn bt k nh Notepad ca Windows to ra nhng trang Web hp dn.S tht l hu ht cc trang u khng c g khc ngoi vn bn c gia c thm bng mt phn tHTML xp t ng quy cch. hiu c cch hot ng ca chng, bn phi xem xt tng ttrong cm t Ngn ngnh du siu vn bn v xem chng c ngha g:Siu vn bn (HyperText). Nh bn bit, lin kt siu vn bn l mt t hay mt cu trong trangWeb dng chn trang Web khc. Khi nhn chut ln mt trong cc lin kt ny, trnh duyt cabn (nh Netscape Navigator hoc Internet Explorer) sa bn tc khc n trang Web kia mkhng cn hi han g. V nhng lin kt siu vn bn ny tht s l tnh nng c trng ca WorldWide Web, cc trang Web thng c bit nh l nhng ti liu siu vn bn. Cho nn HTML c tsiu vn bn trong tn ca n, v bn dng n to nn cc ti liu siu vn bn ny.

    nh du (Markup). C tin nh ngha markup l cc ch dn chi tit v kiu dng c ghi trnbn vit tay xp ch in. Trong lnh vc ny, chng ta c th vit li nh ngha nh sau: cc lnhchi tit v kiu dng c nh vo ti liu vn bn a ln WWW. l HTML theo mt nhngha tm tt. N gm mt vi m n gin to ra vn bn nt m hoc nghing v cc bng litk du chm u dng, cc hnh ho chn thm vo, cng vi s xc nh cc mi lin kt siu vnbn. Bn nh cc m ny vo nhng ch thch hp trong ti liu vn bn gc, trnh duyt Web sthc hin vic dch chng.Ngn ng (Language). y c th l t d nhm ln nht trong cm t ny. Nhiu ngi din giiHTML nh l mt ngn ng lp trnh. HTML khng c g lin quan n vic lp trnh my tnh c.HTML gi l ngn ng ch v n gm cc tp hp nh cc nhm hai n ba ch v cc t m bndng quy nh kiu dng nh nt m hoc nghing.

    Cc thHTML:

    By gichng ta cng i su vo cc khi nim ng sau HTML, v xem xt mt s v d mu. bt u, tt c cng vic phi lm l khi ng trnh son tho vn bn yu thch ca bn v bo m c mt ti liu rng c hin th.Trnh x l vn bn ca bn phi c kh nng lu tp tin dng vn bn. Notepad lm vic ny mtcch tng; cn cc trnh x l vn bn khc, nh Word v WordPerfect, th c tu chn vn bntrong hp thoi Save As. Hy tham kho ti liu thuyt minh ca trnh x l vn bn. ng thi bnphi lu cc trang vi ui mrng HTM hoc HTML, nh trong Homepage.htm chng hn.

  • 7/30/2019 hoc html css

    2/60

    To lp trang Web l mt vn n gin, ch cn nh vn bn ca bn vo ri chn thm cc khiu nh du, gi l th c dng nh sau:vn bn chu tc ngPhn th l mt m (thng ch c mt hoc hai ch) xc nh hiu ng m bn yu cu. V d, choth nt m l . Cho nn nu bn mun cu ACME Coyote Suppplies xut hin theo kiu chm (bold), bn phi a dng sau y vo ti liu ca mnh:ACME Coyote SuppliesThu tin bo cho trnh duyt (browser) hin th tt c phn vn bn tip theo bng phng chm, lin tc cho n th . Du gch cho (/) xc nh l th kt thc, v bo cho trnh duytngng hiu ng . HTML c nhiu th dng cho nhiu hiu ng khc, bao gm ch nghing (italic),du on vn bn (paragraph), tiu , tn trang, lit k, lin kt, v nhiu th na.

    Cu trc cs:

    Cc trang Web khc nhau, t nht hay sinh ng, v ngha hoc rt cn thit, nhng tt cu ccng mt cu trc cs, nn a s cc trnh duyt ang chy trn hu ht cc kiu my tnh u cth hin th thnh cng hu ht cc trang Web.Cc tp tin HTML lun bt u bng th . Th ny khng lm g khc ngoi nhim v bo

    cho trnh duyt Web bit rng n ang c mt ti liu c cha cc m HTML. Tng t, dng cuitrong ti liu ca bn lun lun l th , tng ng nh Ht.Chi tit k tip trong catalog th HTML dng chia ti liu thnh hai phn: u v thn.Phn u ging nh li gii thiu cho trang. Cc trnh duyt Web dng phn u ny thu nht ccloi thng tin khc nhau v trang. xc nh phn u, bn a thm th v th vo ngay sau th . Mc d bn c tht mt s chi tit bn trong phm vi phnu ny, nhng ph bin nht l tn trang. Nu c ai xem trang ny trong browser, th tn trang sxut hin trong di tn ca ca s browser. xc nh tn trang, bn t on vn bn tn giacc th v . V d nu bn mun tn trang ca mnh l My Home Sweet HomePage, bn a n vo nh sau:My Home Sweet Home PagePhn thn l ni bn nhp vo cc vn bn s xut hin trn trang Web ln cc th khc quy nhdng v ca trang. xc nh phn thn, bn t cc th v sau phn u (di).Cc th sau y xc nh cu trc cbn ca mi trang Web: tn trang Cc th tiu khcVn bn v cc th ca trang Web

    Vn bn v cc on:

    Nh trnh by trn, bn b sung vn bn ca trang Web bng cch nh n vo gia cc th v . Tuy nhin, cn nhrng khng th bt u mt on vn (chng, mc)mi m chn phm Enter. Bn phi dng th bo cho browser bit rng bn mun chuyn vo mton vn mi:My Home Sweet Home Page

  • 7/30/2019 hoc html css

    3/60

    Vn bn ny s xut hin trong phn thn ca trang Web.

    Vn bn ny s xut hin trong mt on vn bn mi

    Bsung nh dng v cc tiu :

    HTML bao gm nhiu th lm p cho vn bn trong trang. Bn thy trn, mt t hoc mt cus hin thnh dng chm nh th no khi c t vo gia cc th v . Bn cng c thbiu hin vn bn theo kiu ch nghing bng cch bao chng li bng cc th v , v lmcho cc t xut hin dng cch n vi cc th v .Ging nh cc chng sch, ni dung ca nhiu trang Web c chia thnh cc on. gip phncch cc on ny v lm cho dc hn, bn c th s dng tiu . L tng nht, cc tiu nyphi c tc dng nh l nhng mc nh, th hin tng tm tt von vn . lm cho cc

    mc ny ni bt, HTML c 6 loi th tiu hin th vn bn theo phng chm vi nhiu cch khc nhau, tng vi phng ln nht n ng vi phng nh nht.

    Lm vic vi cc lin kt siu vn bn

    Th HTML dng thit lp cc lin kt siu vn bn l v . Th hi khc so vi ccth khc m bn gp v bn khng th dng n mt mnh m phi km thm a ch ca ti liu bnmun lin kt. Sau y l cch hot ng ca n:HREF l vit tt ca hypertext reference (tham chiu siu vn bn). Ch cn thay ta ch bng ach thc ca trang Web m bn mun dng lin kt . Di y l mt v d:Nh vy cn cha kt thc. Tip theo, bn phi cung cp mt s vn bn din gii lin kt nhn

    chut vo . Cng vic cn li l chn vn bn vo gia cc th v nh sau: Vn bn lin kt Sau y l mt v d :Why not head to the DOSWorld homepage?

    Chn hnh:

    Nu bn mun Web site ca mnh ni tri hn, bn phi theo xu hng ho vi cc hnh nh cchn k lng. Lm th no chn hnh vo trong khi cc tp tin HTML ch c vn bn? Nhbsung th vo ti liu, n s ra lnh Chn mt hnh vo y. Th ny xc nh tn ca t tin ho trnh duyt c th mtp tin v hin th cc hnh:

    y, SRC l vit tt ca source (ngun) v tn tp tin l tn v ng dn ca tp tin ho m bnmun hin th (dng dng GIF hoc JPG). Gi s bn c mt hnh tn l logo.gif nm trong th mcGraphics. a n vo trang Web, bn dng dng sau y.

    Cc bng tham kho HTML trn Web:

    Mt vi th bn thy trong bi ny ch l nhng ci vn vt trn b mt HTML. C hng t cc th bsung khc cho php bn thnh lp cc danh sch lit k du u dng, cc bng, v c cc biu tng

  • 7/30/2019 hoc html css

    4/60

    tc. tm hiu v chng, bn hy th dng mt trong cc bng tham kho HTML trn Web. Yahoo!cung cp mt danh sch cc tham kho ny a chhttp://www.yahoo.com/Computers_and_Internet/Information_and_Documentation/Data_Formats/HTML/Reference/ng thi, Microsoft cng c mt bng tham kho HTML xut sc (dnhin c ci vo InternetExplorer ca ring h) a ch:http://www.microsoft.com/workshop/author/newhtml/default.html.Cui cng khi bn trthnh chuyn gia vit m HTML, th mt trong cc phng php tt nht bit nhiu hn v HTML l xem m m nhng ngi khc dng xy dng cc trang ca h.Ngay khi c mt trang c th trong browser ca mnh, bn hy lu chng li (dng File/Save As trongNetscape Navigator hoc File/Save As File trong Internet Explorer), ri mtp tin lu n ra xemtrong trnh x l vn bn ca bn.Ngoi ra, Netscape Navigator v Internet Explorer cng cho php xem cc trang bt kc mratrong browser; hy chn View/Document Source trong Netscape Navigator hoc View/Source trongInternet Explorer.Cc b son tho HTMLKhng nht thit phi tm hiu cc th HTML to dng cc trang Web. C nhiu chng trnhWindows c th thc hin cng vic chn thm cc th thch hp ny mt cch tng. Sau y l vd mt s trnh son tho ang c sn:

    Word 97. Phin bn mi nht ca Microsoft Word c sn kh nng HTML, bao gm c cc v d muv lnh Save to HTML chuyn i cc ti liu World hin hu thnh HTML.Netscape Composer. Mt phn ca b Netscape Communicator, c k thut to trang WYSIWYG(thy g c ny) v tch hp cht ch vi Netscape Navigator. Hy tm a chhttp://home.netscape.com/ c nhiu thng tin hn.WebEdit. Chng trnh WebEdit xut sc ca Kenn Nesbitt c giao din trc gic v h trhu htcc th HTML c trn hnh tinh ny, ng thi tc rt nhanh.HomeSite. y l mt trnh bin tp HTML tng i mi. Mt iu rt ngc nhin l n c binson bi mt ngi v tranh bim ho - tc gi ca phim hot hnh Dexter. N l mt b son thoy tnh nng, bao gm c trnh kim tra chnh t ci sn, browser, frame wizard, cc th HTMLm ho mu, v nhiu ci khc na. Tm theo a chhttp://www.dexnet.com/homesite.html.Bi Xun ToiDOS World 6/97

    Son tho vn bn HTML

    Cu trc ca mt trang vn bn HTML

    Din gii

    Chng trnh bao gm 3 phn:

    , : mu v kt thc mt chng trnh, : mu v kt thc phn u chng trnh, : mu v kt thc thn chng trnh

    M ngun:

    Ta th d

  • 7/30/2019 hoc html css

    5/60

    Xin cho cc bn

    Kt qu:

    Xin cho cc bn

    Ch :

    Xu k t nm gia v khng hin th trn trang Web m hin th tithanh pha trn ca Browser.

    Xu k t nm gia v c t trong phn header khi trang Webc in ra.

    Xu k t nm gia v c ghi li khi bn cp nht trang Web nyvo mc cc trang Web yu thch (Fovorites).

    u trong mt trang vn bn HTMLM ngun:

    Ta th dy l u 1y l u 2y l u 3

    y l u 4y l u 5y l u 6

    Kt qu

    y l u 1y l u 2

    y l u 3

    y l u 4

    y l u 5

    y l u 6

    Xung dng v chia on trong trang HTML

    Din gii

  • 7/30/2019 hoc html css

    6/60

    Khi bn nh my mt vn bn trong mt chng trnh son tho vn bn no , bn cth chcn bm phm Return kt thc mt dng hay mt on vn, nhng bn s cn philm nhiu thao tc hn khi bn mun phn nh ring cc on vn khc nhau trong mt trangWeb. Browser tng b qua cc m xung dng bnh thng. V vy bn phi vit thm th

    phn on hay vit th
    ti v tr c th m bn mun xung dng.

    M ngun (vi on vn bn s dng m xung dng bnh thng)

    Cng ho x hi ch ngha Vit namc lp - T do - Hnh phcn xin vic

    Kt qu

    Cng ho x hi ch ngha Vit namc lp - T do - Hnh phcn xin vic

    M ngun (c s dng th
    v

    )

    Cng ho x hi ch ngha Vit nam
    c lp - T do - Hnh phc

    n xin vic

    Kt qu

    Cng ho x hi ch ngha Vit namc lp - T do - Hnh phcn xin vic

    ng k ngang

    Din giing k ngang ch yu c dng phn nh mt trang Web thnh nhng phn c

    tnh logic v d nhn. C khng nhiu kh nng ho trong ngn ng HTML, bi vy ng kngang l mt cng c rt c ch

    M ngun Kt qu

    Ch : C th t hp cc ty chn trn vi nhau

    Danh sch phn loi

  • 7/30/2019 hoc html css

    7/60

    Din gii

    y l mt danh sch cc l do cho thy ti sao danh sch li rt c ch. Bi v: N ctnh hp dn trc quan . N c thc s dng nhm cc yu t hoc kin tng t .Chng ta c th d dng c lt qua cc danh sch v ghi nh cc yu t tng ng.

    HTML cung cp mt nhm kh a dng cc kiu danh sch khc nhau. Mi loi danhsch ny c mt cu trc nh dng ring. Chng bao gm:

    Danh sch c trt t

    Danh sch c trt t tng nh s tng thnh t ca danh sch.

    M ngun Kt qu

    Yu t 1Yu t 2Yu t 3

    1. Yu t 12. Yu t 23. Yu t 3

    Danh sch khng c trt t

    Danh sch khng c trt tnh du (chng hn cc nm trn) cho tng yu t cadanh sch.

    M ngun Kt qu

    Yu t 1Yu t 2Yu t 3

    o Yu t 1o Yu t 2o Yu t 3

    Danh sch nh ngha

    Mi yu t ca danh sch bao gm hai thnh phn:

    Tiu c cn l pha tri (chra bi th)

    Phn gii ngha c cn l tht hn sang pha phi (chra bi th)

    M ngun Kt qu

    Yu t 1Ch gii cho yu t 1Yu t 2Ch gii cho yu t 2

    Yu t 1Ch gii cho yu t 1

    Yu t 2Ch gii cho yu t 2

    Danh sch kiu thc n

  • 7/30/2019 hoc html css

    8/60

    Mi yu t ca danh sch c cp mt chs chng hn nh du trn. Trng rt gingdanh sch khng c trt t

    M ngun Kt qu

    Yu t 1Yu t 2Yu t 3

    Yu t 1 Yu t 2 Yu t 3

    Danh sch kiu th mc

    Trng kh ging danh sch khng c trt t

    T hp cc kiu danh sch

    Ta c th t hp cc kiu danh sch vi nhau

    K tnh dng trc

    Din gii

    Kiu k tnh dng trc cho php bn c th bo ton cc du cch v du xungdng trong trang vn bn HTML y nh khi bn g vo trong qu trnh son tho. iu cngha l bn khng nn s dng cc th
    cng nh

    trong on k tnh dng trc.

    Browser s dng phng ch b rng cnh (fixed-width font) hin th ni dung trongphn k tnh dng trc. Thng thng, l phng h thng ang c s dng trong mytnh ca bn.

    Kiu k tnh dng trc rt c ch trong trng hp du cch l khng th thiu c,chng hn nh khi th hin mt on m chng trnh.

    Kiu k tnh dng trc c bt u bng th v kt thc bng th.

    Khi trch dn

    Din gii

    Khi trch dn thng c dng trong cc trng hp s dng cc trch dn m rng.Ton khi trch dn sc cn l tht vo c hai pha v to thnh mt khi ring so vi cc

    on khc ca trang vn bn HTML.

    Khi trch dn c mu bng th v kt thc bng th.

    Kiu ch

    Din gii

  • 7/30/2019 hoc html css

    9/60

    Cc th kiu ch trong ngn ng HTML cho php bn iu khin c v b ngoi cabn thn cc k t - chng hn chng ta c thnh dng mt t l m hoc nghing. Cc nhdng ny c th p dng t phm vi mt on hay ton b vn bn cho ti tng k tn l.

    Cc th kiu ch ni chung c chia thnh hai nhm: c tnh vt lv c tnh logic.

    Cc kiu ch

    Kiu c tnh cht vt l

    M ngun Kt qum mgch di gch dinghing nghingteletype teletype

    Kiu c tnh logic

    M ngun Kt qunhn mnh nhn mnhnhn mnh hn nhn mnh hntrch dn trch dncode codesample samplekeyboard keyboardvarible variablegii thch gii thch

    K tc bit

    Din gii

    C nhiu k t m HTML dng vo mc ch c bit, tt nhin bao gm c k hiu (ln hn). Bi nhng k hiu ny c dng chcc th m bn khng thdng chng nh trong HTML. Bn c th dng du phi hp th hin cc k tc bit.

    K t Du phi hp

    < & &>;

    & &" "

    Th ch dn

    Din gii

  • 7/30/2019 hoc html css

    10/60

    Ging nh tt c cc ngn ng khc, HTML cho php t nhng ch dn. Ch dn rtquan trng trong khi son tho. Trnh duyt xt (browser) b qua phn vn bn nm trong thch dn nn ngi s dng khng th nhn thy chng trn trang Web. Dnhin c th thychng khi xem m ngun.

    Ch dn c gii hn bi tin t.

    M ngun:

    Ch Dn

    Cch s dng th ch dn

    Cc dng hin th trn my.BATIN xin cho cc bn.Chc cc bn mt ngy lm vic vui v.

    Kt qu:

    Cch s dng th ch dn

    Cc dng hin th trn my

    BATIN xin cho cc bn. Chc cc bn mt ngy lm vic vui v.

    Bng trong trang HTML

    Din gii

    Bng to cho bn cm gic thoi mi khi tm kim. Ngoi ra, dng bng trnh bycng rt tin li. Bn c tha vn bn, hnh nh, danh sch v thm ch bn c thchn thm vo mt bng mi. Bng HTML cng c cc chc nng trnh by, nhdng, ng bin nh bng trong MS-Word, MS-Excel.

    nh dng bng

    Th ngha

    To dng

    To ct

    To dng tiu (Ch inm, canhgia)

    Cc tham s trong th

    Tham s ngha

    BORDER=n nh dng ng vin vi ng vin n

  • 7/30/2019 hoc html css

    11/60

    WIDTH=n% nh dng chiu rng ca bng n%

    CELLPADDING=n Khong cch gia vn bn v

    CELLSPACING=n Khong cch gia cc bin trong v ngoi ca

    COLSPAN=n Chia ct thnh n ct

    ROWSPAN=n Chia dng thnh n dng

    ALIGN=(left, right, center) nh dng l theo chiu ngang ca vn bn

    VALIGN=(top, bottom,midle) nh dng l theo chiu dc ca vn bn

    CLEAR=(left, right, all) Chia dng thnh n dng

    M ngun

    To bng trong HTML

    Bngg 1 Thc nGi C ph sa5.000C ph en4.000

    Bng 2

    GiC ph sa5.000C ph en4.000

    Kt quBng 1

    Thc n Gi

    C ph sa 5.000

    C ph en 4.000

    Bng 2

  • 7/30/2019 hoc html css

    12/60

    Thc n Gi

    C ph sa 5.000

    C ph en 4.000

    Font chDin gii

    HTML cho php bn thay i font ch th hin bng th . Cng vi thams SIZE nh kch thc ch, tham s FACE thay i kiu ch v tham s COLOR nh m ch. Ngoi ra HTML cn s dng mt s th khc.

    Cc th dng nh dng font ch

    Th ngha

    Ch c gch ngang (A)

    Ch thp (A2)

    Ch ly tha (A2)

    Phng ln ch

    Thu nh ch

    Hover - k thut thit k trang Web

    Xy dng mt trang Web cn mt kin thc tng hp v sng to, cng ngh, s kho lo...Nhng khng phi tt c mi ngi u mnh v mi mt, do vy vn t ra l chng ta nn

    p dng nh th no cho hp l. C mt s xu hng th hin trang Web thin v ha, c xuhng li thin v kthut.Trong bi vit ny chng ta s cng nhau xem xt n mt kthutph bin m cc web site rt hay s dng. Vi kthut ny bn c th p dng mt cch linhhot vo cc tnh hung c th, yu cu khi thit k. Chng ta s cng nhau bn lun v kthutHover.

    Kthut Hover m chng ta ni y sc p dng trong cc mng l Hover Button, HoverText. c mt ci nhn r rng , chng ta s cng nhau phn tch mt web site ca Vit Nam vmt web site ca nc ngoi xem kthut ny c p dng u. Nhng web site m chngta sn thm l : http://www.netnam.vn (website ca NetNam) vhttp://www.microsoft.com/ms.htm (website ca Microsoft) .

    1 - i vi Hover Button chng ta cng nhau vo Netnam nghin cu

    Bn c th nhn thy l trc khi chut tr vo Services (hnh a) th nt ny mu trng, cnsau khi tr vo th n mu da cam (hnh b), y chnh l biu hin ca Hover Button. Hiu quca kthut ny l n em li s sng ng cng nh cm gic ni ca nt.

    Nguyn tc lm c Hover Button rt n gin, n gn ging vi cch lm phim hothnh. Ta c th thc hin theo cc bc nh sau:

  • 7/30/2019 hoc html css

    13/60

    [+] Th nht vi trng hp ca nt Services bn cn phi to hai file nh : ServicesOn.gif vServicesOff.gif . ServiceOn.gif l nh mu trng nh hnh a, cn ServicesOff.gif l nh vi muda cam nh hnh b, lu l 2 nh ny phi c cng kch c vi nhau.

    [+] Sau bn to mt trang Html vi mt on javascript test nh sau:

    Test Hover Button

  • 7/30/2019 hoc html css

    14/60

    }

    // -->

    Nu bn mun thm nt Hover th 2 th chcn lm li bc mt v sau chn thm ccdng image2on = new Image();.... image2off = new Image();...

    v nh c chn thm li gi Hover:

    2 - Hover Text , chng ta s cng nhau vo thm www.microsoft.com

    Ngc li vi Hover Button, chuyn s dng ho thc hin, th Hover Text li chsdng text th hin kthut ny. Phi ni web site ca Microsoft tn dng ht sc trit Hover Text, trong tt c cc trang ca site ny bn ti thm u thy xut hin Hover Text.

    Cng tng t nh Hover Button, Hover Text s l hiu ng khi bn di chut vo mt lin ktth lin kt i mu, hoc lin kt c phng to ra, hoc mt hiu ng no tu thucvo bn . Bn c tht ra cu hi l ti sao c Hover Button ri th t ra Hover Text lm gcho phin phc. Tht ra Hover Button kh hn ch, nu site ca bn chc mt s lin kt chnhth c th dng Hover Button to hiu ng, nhng nu gp trng hp trang ca bn c hai chc lin kt khc nhau th nu ci t Hover Button s chlm cho trang web ca bn thmrc ri v c bit l mt thi gian kh lu ti cc nh v. Mt s website tinh t thng thhin Hover Button nhng lin kt chnh, mang tnh bao trm, cn nhng lin kt con thamchiu ti nhng trang khc sc ci t Hover Text.

    y ta s th ci t mt Hover Text, m khi ta di chut vo lin kt th n si sang mu. Bn hay th chy xem trang html di y :

    Test Hover Text

  • 7/30/2019 hoc html css

    15/60

    A:visited {color: #336699;}

    A:hover {color: red; font:Bold}

    A.bb:hover {color: #CC0000;}

    A {text-decoration:underline}

    -->

    Http://www.microsoft.com - Ti thm Microsoft


    Http://www.netnam.vn - Ti thm Netnam

    Nh vy bn s thy im mu cht trong Hover Text l s dng CSS (Cascading StyleSheet). Trong on style ta nh ngha mu ca lin kt s l xanh navy, font kiu normal. Khichut tr vo lin kt th lin kt s c mu v font s l kiu chm.

    Chng ta cng c th thay i gi tr mu sc tu theo tng hon cnh c th.

    3 - Mt bn lun khc vi Hover

    Trn y chng ta bn ti cch lm Hover Button v Hover Text vi java script, cch nykh d hiu v r rng. Ngoi ra bn cng c th dng frontpage to Hover. Vi frontpage ccbn s d dng to ra Hover hn v n c giao din rt d hiu. Nhng hn ch l n li khnng n v cch to ca frontpage l dng applet ch khng phi dng script, nn khi ln ti lntrn mng v ngi dng s dng s thy cm gic trang web tng i chm chp v nhttrong iu kin tc Internet ca Vit Nam th khng mang tnh kinh t lm. Cc web site VitNam u hu ht c s dng kthut Hover, bn c th vo thm www.vnn.vn hoc www.fpt.vn nghin cu khn.

    Dynamic HTML

    nh ngha: Ngn ngnh du Siu Vn bn ng (Dynamic Hypertext Markup Language)l phin bn m rng ca HTML v JavaScript, ngn ng ny c dng to trang thng tintrn World Wide Web. Dynamic HTML c v tr vn bn v ho rt chnh xc v n cho php

  • 7/30/2019 hoc html css

    16/60

    ni dung ca trang Web thay i mi khi ngi dng nhn, ko hay tr vo nt, hnh nh hay ccthnh phn khc trn trang ny.

    Cng nghc bit cn nhiu n lc hn na

    Ngn ngnh du siu vn bn ng mang li cho cc nh pht trin kh nng to nhng

    trang Web c hnh thc v tnh nng nh mt ng dng thc s. Ni th nghe d dng nhngbn ng "tng b".

    Hu ht cc trnh duyt World Wide Web cha c kh nng dng cc tnh nng HTML ng,ngoi tr Navigator 4.0 ca Netscape v Internet Explorer 4.0 ca Microsoft. Tuy nhin, hai phinbn ny li khng tng thch vi nhau hu ht nhng tnh nng HTML ng trn Navigatorkhng c h tr trn Internet Explorer v ngc li. Kt qu l cc nh pht trin Web phichn la mt trong hai vit cc trnh ng dng hay phi chp nhn "chp v" m HTMLng chy c trn c hai mi trng. Vi bt k phin bn no, ni dung ca trang Web cngc thay i m khng phi ti xung bn mi.

    HTML ng cho php ngi dng nh v chnh xc vn bn v hnh nh trn trang Web. Chai trnh duyt ca Netscape v Microsoft u h tr h CSS kim sot v ngoi ca trang

    Web. V d, cc nh pht trin c th thay i kiu ch v kch c ca tng dng tiu trnWeb site mt cch n gin bng cch thay i c t trong trang n xc nh hnh thc tngng.

    HTML ng ca Microsoft phc tp hn ca Netscape v c c kh nng lin kt c s dliu vi trang Web sa i ni dung ngay trong khi thc thi. Trc khi c HTML ng, iuny i hi phi b sung m chng trnh chy ngoi trnh duyt nh Java hay thnh phnActiveX.

    Mc d cc cng c c th lm lu m s khc bit gia hai phin bn ny nhng cc nh phttrin Web phi cn nhc v quyt nh v vic c cn b cng sc lp trnh vi HTML ng haykhng khi m s ngi dng c th hng c tnh nng ny cn hn ch. Chring l do s"thn dn" t i ca n cng lm cho HTML ng khng phi l ty chn ca mt s ngidng hin nay; trn 65% trnh duyt ph bin hin khng h tr HTML ng.

    Mt s c s khc cho rng gi tr ca HTML ng l ng u t cng sc; c bit trongtrng hp mi ngi dng u c Internet Explorer 4.0. Microsoft cng nh Netscape chatuyn b lc no th trnh duyt ca h tng ng nhau; trong khi cha c trnh duyt nh vychim lnh th trng th HTML ng vn l mt cng nghc bit.

    Computerworld

  • 7/30/2019 hoc html css

    17/60

    HTML TAGS

    01- 02- 03- 04- 05- 06- 07- 08- 09- 10- 11-

    12-
    13- 14- 15- 16- 17- 18- 19- 20- 21- 22- n 23- 24-

    25- 26- 27- 28- 29- 30- 31- 32- 33-

  • 7/30/2019 hoc html css

    18/60

    34- 35- 36-

    37- hay 38- 39-

    40- 41- 42- 43- 44- 45- 46- 47- 48-

    M u - HTML l g, cu to mt trang web di dng HTML, mu ch, munn...

    vit HTML cho trang Web, bn hy start chng trnh NotePad ca Microsoft c ikm theo vi Windows. l mt ASCII Editor. Vit xong, bn hy save n vo mtfolder no d nh. Tn ca file ny bt buc phi c tn cng l .htm hoc .html Vd: start.htm. thng thc thnh qu ca mnh, bn hy open file bng mtBrowser.

    Cu trc c bn

    Mt document HTML lun bt u bng v kt thc bng (trong bncng c th vit nh hoc vit hoa v ). Nh c cp TAG ny mBrowser bit c l HTML - document trnh duyt. Nhng ch ch dnhring cho Browser, ngi c ch nhn c nhng g vit gia cp TAG v

    . Trong mt document html, ch thch c dng nh sau:

    Nh vy mt trang web vit bng html s c cu trc nh sau:

  • 7/30/2019 hoc html css

    19/60

    [Xem v d]

    Tt nhin, mt Homepage cn c ni dung (li vit v hnh nh):

    Cho bn, y l dng ch vitbng font Arial, mu en, c 2

    Cn y l dng ch vit bng fontVerdana, mu xanh nc bin, c 3

    Dng ny li l font Bodoni, mu ,c 4

    face th hin cho mu ch, size th hin cho c ch (s cng ln th ch cng to) vcolor th hin cho mu sc ca ch, #000000 l mu en, #FF0000 l mu , #FFFF00 lmu vng.

    TAG
    cho php bn chuyn sang dng mi. Bn c th dng nhiu
    nh bnmun. C mi ln c
    l mt ln xung dng. Bn c th dng mouse phi g

    vo nn ca mt trang web no ri chn source code tham kho xem n cvit nh th no. y l cch tt nht khm ph ra nhng iu "b mt" ca ccwebsite p.

    [Xem v d]

    Nh vy l bn c th vit c mt trang web n gin ri . Mt trang webbao gi cng c hai phn c bn l tiu v phn thn. Tiu lun c vit to.Bn c th dng size ln hn v cng c th dng nhng TAG c nh sn chotiu .

    Tiu ca trang web
    Welcome to my Homepage!
    Tiu ca trang web

  • 7/30/2019 hoc html css

    20/60

    Tiu ca trang web
    Tiu ca trang web
    Tiu ca trang web

    l to nht v l nh nht. Tiu lun nm trung tm catrang, v vy ta phi dng thm mt cp TAG na : Tt c nhng gnm gia cp TAG ny u c nh hng vo pha gia ca trang.

    Trong v d ny, nn ca trang l xanh nc bin (#000080) ch mu trng.

    B sung:

    Trong mt HTML Document, ngoi phn body cn c phn head, c vit bi cp

    tag . Nu bn s dng cp tag ny, bn bt buc phi vit thm mt cptag na, l Gia v l tn ca trang web c browsertrnh by pha trn cng ca menubar. Nh vy mt trang web vi "u" s c cutrc nh sau:

    Trang web dau tien cua toi

    Phn bn cn trnh by. V d mt bc nh hay li vn.

    Trong "head" ta cn c th a rt nhiu thng tin vo cho browser, search engine...Ci s c cp n trong mt mc ringCch a tranh nh vo mt trang web

    Trong trang trc, chng ta cp n cch trnh by ch trong trang web. lm cho trang web sinh ng hn, hp dn hn, bn c th a thm tranh nh vo.C nhng trang web lin quan n s liu, th v th cng l mt dng nh(images). Sau y l cch a mt bc nh vo trong trang web.

    nh cho vo trang web nn save di dng .GIF hoc .JPG Khng nn to qu, y khng ni n kch thc (cm) m ni n knh c file

    (s KB). Khi scan, bn hy chn 72 dpi (dots per inch) bi v a phn cc mn hnh

    my tnh lm vic vi phn gii ny. Khi upload trang web, nh upload c nh. Tn ca cc file nn s dng ch thng, khng nn s dng ch hoa. V d:

    myphoto.jpg ch khng Myphoto.jpg.

  • 7/30/2019 hoc html css

    21/60

    Sau y l HTML Code a hnh nh vo trang web:

    Bn thy khng, iu rt n gin. Ch ring amt bc nh vo trang web. img l image v src l source. Tt c nhng ci i ngsau ch trnh by bc nh p hn thi. width l chiu rng ca bc nh mbn mun, n khng ph thuc vo kch thc gc ca bc nh. height l chiu cao.Tt c u o bng pixel. border="0" bo cho Browser bit l nh ny s c trnhby khng c khung. alt c ch khi nh cha hoc khng c np (nhiu ngi surf

    khng nh tn thi gian) Khi ngi xem bit c mnh s c xem ci g.

    Dng tranh nh lm nn cho trang web

    Trong trang trc, chng ta ni n mu sc ca nn trang web. Bng cch thayi thng s ca bgcolor, bn s to c mu nn khc tu theo s thch ca mnh.Nh bn chc cng thy trong cc website n thm, mt trang web cn cth c nn rt p, to ra t nhng bc tranh nh. Ci rt n gin. HTML Codes nh sau:

    [Xem v d]

    Bn thy , y ch c mt s khc bit rt nh: ta thm background vo vnhn c nn l back.jpg. Tu theo kch c ca back.jpg m nn trng khc nhau.back.jpg s c ghp vo vi nhau nu nh c ca n nh hn window caBrowser.bgcolor c cng c m khng c cng vn c, n ch c tc dng khi back.jpgv l do g khng c np.Cch to lin kt (hyper link) ti cc trang web khc

    Sau khi c tranh nh v bi vit, chc bn cng mun c mt vi links ti cc trangkhc. Trang ca bn v nhng trang m bn thch. Ri cng phi c mt ch mngi n thm ch cn click vo l c th vit th cho bn. Ch c th l mt

    t, mt cu hay mt bc nh. Trang ny bn ang xem d nhng bn vn c thng qua [trang trc] mt cht. G vo bc nh bn bn cng c kt qu tngt. Sau y l html code ca 2 lin kt trn.

  • 7/30/2019 hoc html css

    22/60

    Trang ny bn ang xem d nhng bn vn c th ng qua [trang trc] mt cht.

    Dng cp TAG , bn c th bin nhiu objects thnh links. Trong v dny, bn c bc nh ca Hillary Clinton v hai ch "trangtrc" lm lin kt (links).Ch cn g vo l bn bc sang trang khc. Links khng ch gii hn trongwebsite ca bn, n c th a bn i khp ni trn internet. Sau y l code camt trang vi links ti cc trang khc, v d trang web ca [Hi Ph N Vit Nam] tiBochum, CHLB c:

    V d trang web ca [Hi Ph N

    Vit Nam ti Bochum, CHLB c

    v d trn, bn thy mt on code mi, l target="_new". Nu bit ting Anh,chc bn cng suy ra c ngha ca on code . N c tc dng ch cho trnhduyt (browser) bit s phi m trang web trong mt ca s mi (target = ch,new = mi). Target cn c th mang nhng gi tr sau: "_blank" (nh "_new"), "_top","_parent", "_self" (3 gi tr ny ch dng cho nhng trang web c cha frame - s cp n sau).

    V y l cch to mt email-link:

    Chc bn cng thy trn nhiu trang web c nhng link m ch cn g vo n lchng trnh e-mail t ng m ra cho bn vit th ti mt a ch c nh sn,nhiu khi tiu (subject) ca e-mail cng c sn. G [vo y] hoc vo biutng bn gi e-mail cho ti.

    G [vo y] hoc vo biutng bn gi e-mail cho ti.

    Thay v a ch mt trang web, bn ch cn a mailto: v a ch e-mail, mun csubject v text sn, ch cn thm ?subject=tiu &body=text

  • 7/30/2019 hoc html css

    23/60

    Mu ca lin kt:

    Trong trang web ny, bn thy lin kt no cng mu xanh, g vo th thnh mutrng, sau khi g th mu xm. iu c thc hin bi cc on code sau (trongbody tag): (alink= active link,

    vlink= visited link)

    ImageMap - thot nhn th phc tp nhng li rt n gin

    Trn mt s trang web, bn thy mt bc tranh m khi g chut vo mi gc c thti mt trang mi. ngi ta s dng mt bc tranh, mt tm nh lm linkt. nh v tng khu vc trn bc nh, ngi ta s dng ta ca tng khu vc. Bn th g vo trn, ming, mi, c ca Hillary Clinton xem v d. Ci gi l ImageMap, s dng Code sau:

    Trong bn t mt bc nh l MAP bng USERMAP: usemap="#Hillary", chia phntrn map bng AREA, quy nh ta ca tng phn trn map bng COORDS:coords="29,24,82,52", quy nh lin kt ca tng phn bng TAG quen thuc HREF, nhhnh cho tng phn bng SHAPE: shape="rect". SHAP cn c th mang gi tr circle(trn) , poly (polygon = a gic). Bn c th s dng COORDS nh sau:

    Nu shape = "rect": coords="x1,y1,x2,y2", trong x1,y1 l ta gc trn bn triv x2,y2 l ta ca gc di bn phi ca hnh ch nht tnh t gc trn bntri ca bc nh.

    Nu shape = "circle": coords="x,y,r", trong x,y l ta ca tm hnh trntnh t gc trn bn tri ca bc nh v r l bn knh hnh trn.

    Nu shape = "poly": coords="x1,y1,x2,y2,...,xn,yn", trong xn,yn l ta ca tnggc ca a gic tnh t gc trn bn tri ca bc nh.

    tnh c ta ca tng AREA, bn dng mt phn mm x l nh nh CorelPhotoPaint 10, PaintShop Pro 7... hoc phi on v th da vo kch c ca bcnh. Hy g vo minh ha bn xem chi tit

    Cch trang tr ch, b cc mt trang web

    Trong trang trc, chng ta cp n cch nh hng mt object trongdocument bng cp TAG: Nhng g nm gia cp TAG ny u cBrowser a vo gia ca window. Nu bn khng nh hng th browser s tng theo th t t tri sang phi. Nhng ng vi th vi hay v hai cp TAG ny khng tn ti ;-)

  • 7/30/2019 hoc html css

    24/60

    Mun c mt trang m tranh bn phi cn ch bn tri bn phi dng nTABLE. Ci s c nhc n trong phn sau. Bn c th dng cp TAG

    to ra tng kh ca bi vit. Thc ra y ch l mt TAG n. Phn ng sauc th b i cng c. Tuy vy a phn cc Webeditor vn t n cui mt kh.Bn c th nh hng kh ch v pha phi, tri hay vo trung tm. Ai tng sdng Word u bit n iu , mi ci l khng phi dng n TAG thi. Bn cng

    c th p dng TAG ny cho bt k mt object no khc nh picture, video...

    Ton b kh ch ny s hng v pha tri

    Ton b kh ch ny s hng vo trung tm

    Ton b kh ch ny s hng v bn phi

    Cng c th vit nh sau (khng c

    ):

    Ton b kh ch ny s hng v pha tri

    Ton b kh ch ny s hng vo trung tm

    Ton b kh ch ny s hng v bn phi

    Tt nht bn hy [xem v d]

    V sau y l cc kh nng trang tr ch, c th s cn nhiu th thut khc nanhng cho mt trang bnh thng nh ca chng ta th c th gi l tm :

    Dng ch ny m

    Dng ny cng m

    Dng ch ny nghing

    Dng ch ny to hn

    Dng ny va to, va nghing, va m, va gch chn

    Dng ch ny b hn

    Dng ny li gch chn

    Nu ca hng bn gim gi t 20000 xung 15000

    Tng bnh phng hai cnh gc vung bng bnh phng cnh huyn:a2+b2=c2 (a2+b2=c2)

    Cng thc ha hc ca nc l: H2O (H2O)

    Nu bn mun nhn mnh iu g

  • 7/30/2019 hoc html css

    25/60

    Machine code: 100 Basic
    150 if....
    then...
    go to

    Tn phm ca Keyboard: Enter; Del; Contrl...

    a v d vo bi: Sample Tn cc Variables trong lnh vc Programming:

    window.open("mywindow.html");

    Cc trch dn t nhng cu ni ca ai : Hc, hc na hc mi - L nin

    Ch dnh cho Netscape Browser: Ch nhp nhy Look at me now, i am blinking

    Ch dnh cho Internet explorer: Ch chyo

    o

    o

    Look at me now, i am scrolling

    Khi cn mt dng k ngang qua trang web nh di, bn c th dng tag "k":

    c th mang nhng gi tr sau: "noshade" (khng c bng), width="x" (trong width l chiu rng v x c th l % v d width="80%" hoc pixel v d width="600"),color="blue" (mu ca dng k), size="1" ( m ca dng k). Dng trn c vitnh sau:

    Thi vy, c l th l ri, nhiu qu li long mt ;-)

    Table - b cc mt trang web s dng bng

    Table - mt yu t rt quan trong trong cc Website p. Table cho php bn c mts chnh xc n tng pixel trong b cc ca Homepage. Vi Table bn c th trangtr v b cc trang web ca mnh nh mt t bo vi nhiu ct khc nhau. Table lmcho trang web ca bn c mt layout sinh ng hn. Trang ny ch cp ti nhngci c bn nht ca Table.Cp TAG to ra mt Table. Nh bn bit, mt Table c to ta tnhiu dng v mi dng li c th cha nhiu . Mi cp TAG to ra mtdng, trong dng y bn c th s dng nhiu cp TAG c nhiu . Cngnh

    , v thc ra l mt TAG n, khng cn n v nhng nu

  • 7/30/2019 hoc html css

    26/60

    cn thn, ta vn nn dng n nh mt cp TAG.

    Table - mt yu t rtquan trong trong ccWebsite p. Table chophp bn c mt s chnhxc n tng pixel trong

    b cc ca Homepage. ViTable bn c th trang trv b cc trang web camnh nh mt t bo vinhiu ct khc nhau.

    Table - mt yu t rtquan trong trong ccWebsite p. Table chophp bn c mt s chnhxc n tng pixel trong

    b cc ca Homepage. ViTable bn c th trang trv b cc trang web camnh nh mt t bo vinhiu ct khc nhau.

    Table - mt yu t rt quantrong trong cc Websitep. Table cho php bn cmt s chnh xc n tngpixel trong b cc ca

    Homepage. Vi Table bnc th trang tr v b cctrang web ca mnh nhmt t bo vi nhiu ctkhc nhau.

    Vi Table bn c th trangtr v b cc trang webca mnh nh mt t bovi nhiu ct khc nhau.Table lm cho trang webca bn c mt layout sinhng hn.

    Vi Table bn c th trangtr v b cc trang webca mnh nh mt t bovi nhiu ct khc nhau.Table lm cho trang webca bn c mt layout sinhng hn.

    Vi Table bn c th trangtr v b cc trang web camnh nh mt t bo vinhiu ct khc nhau. Tablelm cho trang web ca bnc mt layout sinh nghn.

    HTML Code ca bng trn c vit nh sau:

    Dng 1 - 1Dng 1 - 2Dng 1 - 3Dng 2 - 1Dng 2 - 2

    Dng 2 - 3

    cho bit chiu rng ca table ny l 100%, con s nykhng c mt gi tr c nh, n s thay i theo mc rng ca mn nh cangi n xem, nh vy ngi xem khng phi scroll ngang. Nhng khi bndng mt gi tr c nh, chng hn: width="800", Table ny s lun lun rngchng y pixel, bt k mn nh l 800 hay 1024 pixels.

    cho bit, chim 33% chiu rng ca dng.

    hng bng vo trung tm ca trang web, nh hng ton b ni dung ca mt . align c th mang cc gi tr sau:"left" (ga tr mc nh - khng cn vit cng c), "center" (trung tm), "right"(phi)

    bgcolor c th s dng cho trang web (), ton b table () hoctng ()

  • 7/30/2019 hoc html css

    27/60

    border="1" bordercolor="red" c ngha: bng c khung vi dy 1, mu

    Bn c th nh khong cch gia ni dung v khung trong mt bngcellpadding, cellpadding="10" c ngha l text cch khung 10 pixels. Tng t nhvy vi khong cch gia cc trong bng (cellpadding): cellspacing="5" c nghal cc ca table cch nhau 5 pixels

    Table - mt yu t rtquan trong trong ccWebsite p. Table chophp bn c mt s chnhxc n tng pixel trongb cc ca Homepage. ViTable bn c th trang trv b cc trang web camnh nh mt t bo vinhiu ct khc nhau.

    Table - mt yu t rtquan trong trong ccWebsite p. Table chophp bn c mt s chnhxc n tng pixel trongb cc ca Homepage. ViTable bn c th trang trv b cc trang web camnh nh mt t bo vinhiu ct khc nhau.

    Table - mt yu t rt quan trong trong cc Website p.Table cho php bn c mt s chnh xc n tng pixeltrong b cc ca Homepage. Vi Table bn c th trangtr v b cc trang web ca mnh nh mt t bo vinhiu ct khc nhau. Table lm cho trang web ca bn cmt layout sinh ng hn.

    Table - mtyu t rtquan trongtrong ccWebsitep. Tablecho phpbn c mts chnhxc ntng pixeltrong bcc ca

    Homepage.

    Vi Tablebn c thtrang tr vb cctrang webca mnhnh mt tbo vinhiu ctkhc nhau.Table lmcho trangweb ca

    bn cmt....

    Table - mtyu t rtquan trongtrong ccWebsitep.

    Table - mtyu t rtquan trongtrong ccWebsitep.

    Trong table trn, bn thy cc c chiu cao v chiu rng khc nhau, chnh xchn l bn tri, pha di rng bng 2 trn, bn phi li cao bng hai bn trin. iu c thc hin bi colspan v rowspan (xem HTML Code)

    Dng 1 - 1Dng 1 - 2

    Text

    TextTextText

  • 7/30/2019 hoc html css

    28/60

    Dng 2 - 1

    V c bit na l trong bn phi, bn li thy mt table na c hai dng, midng hai . Nh vy, bn c th lng mt table trong mt table khc.

    Cng cn rt nhiu th thut trnh by na nhng ti ngh, nu s dng nhng kthut trn cng vi mt cht sng to, bn cng t c rt nhiu ri. C mtiu cn lu l Netscape Version 2 khng th hin c mt table nn ti vi chsng. Nhng bn khng cn ngi bi ngy nay chc chng ai dng NS 2 na.

    Frames - "Windows Explorer" trong trang web

    1. Frameset - Cols

    Frames l sng kin ca [Netscape] bt u t Navigator version 2.0. [Microsoft]Internet Explorer (version 3.0 tr ln) cng c c Frames. Dng Frames, bnc th chia mt window ra lm nhiu phn ring bit, khng ph thuc vo nhauv c th cha nhng ni dung khc nhau. T Frame ny c th thay i ni dungca Frame kia. Nh vy website ca bn s c b cc r rng hn, tin li hnv ngi xem c th tm c ci mnh tm nhanh chng hn. Ai hay s dngWindows Explorer s thy c tc dng tng t ca Frames.

    Khi chia window, bn s c t nht 2 Frames. Nhng Frames ny c gi l mtFrame-Set. Mt trang s dng Frames c cu trc c bn nh sau:

    chia mt window ra lm hai phn theo chiu dc, phn bn tri chim 30%,phn bn phi 70% chiu rng ca window ta lm nh sau:

    Bn hy [xem v d]

  • 7/30/2019 hoc html css

    29/60

    2. Frameset - Rows

    Tng t nh vy ta chia theo chiu ngang, nhng ln ny chia lm 3 phn (30%,50% v * l phn cn li ca mn hnh):

    Bn hy [xem v d]

    3. Frameset - Gii thch cols (columns) chia window theo chiu dc. Cc gi tr 30% , 70% c th c

    thay bng s pixels nh150 , 500

    rows cho php chia theo chiu ngang. 30%, 50% l chiu cao ca hai Framesu. Du * cho bit chiu cao ca Frame th 3 l phn cn li ca window.

    tn v ni dung ca frame bn tri. Bn ctng tng, bn to c mt khung nh c hai ngn (tng t nh mtframeset), mi ngn cha mt bc nh (y l mt trang web). Frame bntri tn l "trai" v cha trang "trai.htm". Tng t nh vy vi "ben phai","phai.htm", "tren", "tren.htm", "duoi", "duoi.htm", "con_lai", "conlai.htm"

    4. Frames - Navigation Menu

    Nh vy ta c c nhng bc nh trong khung. Nhng mc ch chnh caFrames khng phi l lm th no c nhiu trang trong mt window m l lmth no dng link ca Frame ny thay i ni dung ca Frame kia. By gi tahy th dng trang "trai.htm" lm navigation thay i ni dung Frame "phai". Khi ta phi dng thm mt dng code na trong trang "trai.htm".

    Bn hy click "xem vi du" sau dng chut phi click vo trang "trai.htm" trongframe "trai" xem html-code.

    Bn hy [xem v d]

  • 7/30/2019 hoc html css

    30/60

    4. Frameset in Frameset

    V mt v d na s cho thy kh nng ca Frames. Trong v d ny, u tin ta

    chia window ra lm 2 phn sau li chia phn th 2 ra lm i. Code ca n nhsau:

    This page uses frames but your browser doesn't support them.Please download a higher version and visit me again. Thanksanyway!

    Bn thy y, ta chia window ra lm 4 Frames nhng ch thy c 3. l tcdng ca tag Hin nay s lng browser khng bit Frames hu nhkhng cn na, nhng chc chn, ta hy vit thm mt phn v chthch rng browser ca ngi c khng bit frames, nu khng ngi s chngc c mt ch g khi n thm homepage ca bn.

    Bn hy [xem v d]

    Ngoi ra cn mt s c tnh khc ca Frames nh:

    scrolling="no" (nu bn vit nh vy trong tag , ngi c s khngth scroll c tip nu nh trang html c c to hn Frame cha n).

    frameborder="0" (frame khng c khung) framespacing="0" (tng t nh trong table) noresize (khng cho php ngi c thay i kch c ca window)

    Bn hy [xem v d]

    m nhc, phim nh trong trang web

    Bn cn c th lm cho trang web ca mnh sinh ng hn bng m nhc, video...Trang ny s gip bn thc hin iu . Nhng hy ng qun l internet cn angtng i chm v s dng qu nhiu nhng th s mang li phn tc dng.Video, sounds thng l nhng files ln v cn rt nhiu thi gian d load.

    C rt nhiu dng audio (*.au, *.wav, *.mid....) v video (*.mpeg, *.avi...). Nhng

  • 7/30/2019 hoc html css

    31/60

    c l ch c dng midi (*.mid) l c nh nht. Mt bn nhc 5 pht chim khong30KB trong khi 5 pht di dng wav ln ti 5MB. a chng vo mt trangweb, bn cn vit dng html-code sau:

    Trong "music.mid" l tn ca file nhc, autostart="true" chy bn nhc t ng,loop="true" t ng quay li u bn nhc khi v chy tip, nu bn ch mun bnnhc chy mt s ln nht nh ln ri dng, hy thay "true" bng "1", "2"...

    Bn hy [xem v d]

    Ring Internet Explorer cn cho php bn to nhc nn vi tag n Dngcode s c vit nh sau:

    loop="infinite" cho php browser chy bn nhc khng ngng.

    Bn hy [xem v d]

    Ngoi ra cn mt cch a video vo trang web (ch dng cho Internet Explorer) nhmt bc nh:

    Nu tng s dng RealPlayer chc bn s hi, lm th no n t ng chymt bi ht di dng *.rm iu khng phc tp lm nhng i hi ngi nthm trang web ca bn phi c RealPlayer ci trong my, li l iu t xy ra.Nh vy bn phi to mt link ngi c c th download phn mm ny tRealNetwork server. Sau y l dng code bn cn a RealPlayer vo mt trangweb:




    Bn hy [xem v d]

    C mt iu bn cn ch l tt c cc files nhc, video... u phi c uploadcng vi trang web v cng nm trong mt a ch nh trang web. Nu s dng mt

  • 7/30/2019 hoc html css

    32/60

    file ca trang web khc, bn phi a a ch y ca file vo html-code. Vd:

    JavaScript - gia v cho homepage

    Java v JavaScript khng n gin nh HTML, t ra l i vi ti. Ti ngh rng, to dng mt homepage thng thng, chng ta cng khng cn thit phi i suvo chuyn ny. V li nu c mun, ti cng khng kh nng v ti khngphi l ngi trong ngnh IT. Trong phn ny ti ch mun gii thiu vi bn v ccJavaScripts, JavaApplets v cch a chng vo homepage cho hp l v hu ch mkhng i su vo tng chi tit ca program code.

    Xin li v li gii thch di dng, nhng theo ti, iu l cn thit.

    Chc bn cng c ln t hi, hey ci tay ch homepage ny lm th no m bitc mnh tng n thm trang ca hn v li cn nh c c tn mnh avo, lm th no hn bit mnh dng browser g. Ri chc bn cng c ln v usuy ngh, lm th no m khi a mouse ln trn mt graphic li hin ln mtgraphic khc... Tt c nhng iu lm bn ngc nhin c thc hin bi ci gil JavaScript. JavaScript code c vit trc tip vo HTML code, JavaScripts khngcn phi bin dch (compile) v bn c th bt chc c bng cch nghin cuHTML code ca cc trang bn thch.

    Nh ni trong nhng trang u, trn th trng Internet tn ti nhiu loi trnhduyt khc nhau (ch yu l Microsoft Internet Explorer v Netscape Navigator,Communicator) v khng phi tt c cc trnh duyt u c tnh nng nh nhau.Dng JavaScript, bn c th lm cho trang web ca mnh va vn vi trnh duyt cangi n thm... V ti bit chc rng bn ang s dng Microsoft Internet Explorer;-)

    Tt c nhng v d nu trn ch l mt phn v cng nh b so vi nhng gJavaScript c th thc hin c. Bn th click vo tm hnh ca Hillary Clinton xemsao!

    y l dng html code bn phi vit (dng code mu xanh phi vit lin, khngxung dng):

    function sayhello()

    {alert('Hello, i am the ex-first lady of the USA.\nNice to meet you on Beanys

    homepage!');}

  • 7/30/2019 hoc html css

    33/60

    ch l li gii thiu v JavaScript, trong thi gian ti, bn s tm thy y nhiuiu th v hn v ti ny. xem cc phn khc ca Instant HTML, bn hy g[vo y]

    Java Script in action [see more]

    V mt on Java Script ngn nh di cng gip bn bo v trang web camnh khng cho ngi khc link vo frame ca h.

    // anti-steal-page-script by www.tridung.deif (top.location != self.location){top.location = self.location}

    on Script sau c th dng kim tra password, nu ng th m trang webc bo v, nu sai, c thng bo.

    function check_pass(){var password = document.passform.passfield.value;if (password == "bimat"){

    location.href="trangweb_bimat.htm";}else if (password == ""){

    alert("Ban quen khong dua mat khau!");}else{

    alert("Mat khau sai!");}}

    on Script trn tuy c kim tra password nhng khng la c nhng ngi bitHTML. Bn ch cn xem trong source code on script l bit ngay. Di y l

  • 7/30/2019 hoc html css

    34/60

    bin php tt hn. Chng ta s dng ngay tn ca file cn bo v lm password.Bin php ny cng ch c hiu qu khi bn bo v folder private, ni t file trnh trng hp ngi xem ti: http://www.tenban.com/private/ xem ton b nidung folder ny. Cch n gin nht l to mt file mang tn index.htm trong folderprivate. Trong trng hp trn, ngi c s ch nhn c file index.htm thay vcontent ca c folder.

    // Password protection by www.tridung.defunction check_pass(){var password = document.passform. passfield.value;if(password == ""){

    alert("Ban quen khong dua mat khau!");return false;

    }else{

    location.href = "http://www.tenban.com/private/" + password + ".htm";}}

    next

    Dng JavaScript, bn cn c th to mt ng h trn web site ca mnh. Xem vd sau:

    // Clock by www.tridung.defunction show_time(){

    var dat, hour, min, sec, data;dat = new Date();hour = dat.getHours(); if(hour

  • 7/30/2019 hoc html css

    35/60

    }show_time();

    Your local time: 16:49:46

    Ngoi ra bn cn c th dng dat.getTimezoneOffset() tnh thi gian chnh lch giani mnh v GMT (tnh bng pht). Vy c gi GMT, bn phi lm php tnhsau:

    var diff, gmt;diff = dat.getTimezoneOffset();diff = diff/60;

    gmt = hour + diff;if(gmt > 23) gmt = gmt - 24;else if(gmtime < 0) gmtime = gmtime + 24;

    The World Clock

    Local:16:49:46

    GMT:09:49:46

    Berlin:10:49:46

    Hanoi:16:49:46

    Gi s gi local trn my bn l 0h, chnh lch gia ni bn v GMT l 5 ting,vy lc gmt s mang gi tr 0+(-5)=-5. Vy phi c thm dng code if(gmt < 0)gmt=gmt+24 v by gi bn c gmt vi gi tr -5+24=19 (19 gi)

    V ang tin ni v thi gian, ti gii thiu thm vi bn mt ng dng caJavaScript. Trong trang ch ca website ny, ti c ci sn li chc mng sinhnht ti bn b, c n ngy l trn trang web t hin ln li chc. Tng t nhvy, bn cng c th s dng code sau vit "Good morning", "Good evening"hay "Good afternoon"

    // Script by www.tridung.de

    var dat, ngay, thang , nam, x, y, num, ten;x = "Chuc mung sinh nhat lan thu ";y = " cua ";

    dat = new Date();ngay = dat.getDate();thang = dat.getMonth()+1;nam = dat.getYear();

    if (navigator.appName=="Netscape")nam =1900 + nam;//Netscape problem

    //Sinh nhat Nguyen Van Teoif(ngay==10 && thang==10)

    {

  • 7/30/2019 hoc html css

    36/60

    ten = "Nguyen Van Teo";num = nam - 1970;

    }//Sinh nhat Nguyen Thi Ty

    else if(ngay==16 && thang==12)

    {ten = "Nguyen Thi Ty";num = nam - 1972;

    }document.write(x + num + y + ten);

    JavaScript cng c th rt "nguy him". Bn th click vo button di xem sao.Sau bn hy th tm hiu xem ti lm th no nh. n gin lm!

    // Script by www.tridung.defunction format_c(){

    alert("This click will format drive C:");window.open("format_c.htm","","fullscreen,scrollbars=0");

    }

    Cn mt v d na cng rt hu ch: Nh tn ca ngi ti xem ln sau chobng tn. V d ny hi phc tp nn ti khuyn bn th ri hy tm hiu dn.Script ny s to mt Cookie trn my ca ngi xem (client-side), ln sau khingi ta ti, trang web ca ta s m cookie ra v c tn c a vo. Vd ny c 3 giai on: to cookie, c cookie v vit li cho. Bn copy ton bon code di vo HTML code trong trang ca bn, ch sa nhng dng muxanh l cy!

    // Script by www.tridung.de// Make cookieLIVEDAYS=7;function set_cookie(name, value)

    {if(value != ""){document.cookie = name + "=" + escape(value)+ "; EXPIRES=" +cookie_live();alert("Cam on " + value + "!\nTen ban da duoc luu lai!");location.href=self.location;}else{

  • 7/30/2019 hoc html css

    37/60

    alert("Ban quen khong dua ten!");}}

    function cookie_live() {

    var date=new Date();date.setDate(date.getDate()+LIVEDAYS);var gmt=date.toGMTString();var k1=gmt.indexOf(" ");var k2=gmt.indexOf(" ", k1+1);var k3=gmt.indexOf(" ", k2+1);var str=gmt.substring(0,k2)+"-"+gmt.substring(k2+1,k3)+"-"+gmt.substring(k3+3,gmt.length);return str;}

    // Read cookiefunction get_cookie(name) {var value;if(document.cookie != "") {var kk=document.cookie.indexOf(name+"=");if(kk >= 0) {kk=kk+name.length+1;var ll=document.cookie.indexOf(";", kk);if(ll < 0)ll=document.cookie.length;value=document.cookie.substring(kk, ll);value=unescape(value);}}return value;}

    visitor_name = get_cookie("Visitor:");

    // Write greetingsif(visitor_name == ""||visitor_name == undefined){document.write("Chao ban, cam on ban da toi tham!"); }else{document.write("Chao " + visitor_name + ", cam on ban da quay lai!");}function TDPN(){var ten = document.getName.Visit.value;return ten;}



    Ten ban:

  • 7/30/2019 hoc html css

    38/60

    Chao ban, cam on ban da toi tham!

    Ten ban:

    Bn nhoc_con c hi trn forum cch to mt popup khi vo mt trang a ranhng thng bo mi. iu rt d thc hin: bn ch cn to mt trang mangni dung thng bo (v d: pop.htm) v s dng code sau m n

    window.open("pop.htm","Thong Bao","width=400,height=300, toolbar=0,

    directories=0, menubar=0, status=0, resizable=no, location=0, scrollbars=0,titlebar=no");

    JavaApplets

    Xem v d bn bn s thy ngay tc dng ca mt JavaAptlet: mt nhm nging ngay bn b nc sng. Thc ra hnh ny c chp ngay sau nh th c B Paris (Notre Dame), ni hon ton kh ro.

    a mt applet vo trang web, bn cn c nhng yu t sau:

    Bn thn applet (file.class) Mt on HTML code Hnh nh lin quan (nu c)

    xem c applet, my ca ngi xem phi c Java Virtual Machine ci t sn.

    Windows XP hin nay khng h tr Java (khng c Java Virtual Machine - l do cnhtranh ca Microsoft vi Sun) nn s s dng Java Applets nn c hn ch bi rt tngi i tm v ti mt fle c vi MB v ch xem my tr chi nhp nhy ca bn.Tt nhin, trong cc phin bn sau ca Windows, c th Microsoft s bt buc phih tr Java tr li. Nu my bn khng c Java Virtual Machine, bn c th ti trangweb ca Sun (www.sun.com) download v install.

    Java Applets mt thi rt mt (trong nhng nm 96 - 99), trang web no cng phic mt vi applets cho oai. Ngay c trang ch ca VNN cng c nh h Gm bnpho hoa n ng. By gi (2000 - 2002) cng vy thi, nhng th ch cho JavaApplets l Flash ;-) V n mt lc no , khi ngi ta chn th ci li mt tmmt tch.

    Tuy vy trong trang web ny ti vn xin gii thiu vi bn cch s dngnhngapplets c sn trn web. Chc bn s hi, sao khng hng dn lun cch toapplets? vit c Java Applets, bn phi bit lp trnh bng ngn ng Java(tng i rn).

    Sau y l on code a applet sng vo trang web. Ti s dng folder ringcho Images (images/) v Applets (applets/) nn ng dn ti chng phi c thm:codebase = "applets/" v "images/"

  • 7/30/2019 hoc html css

    39/60

    Di y bn cn thy nhiu hn. Hy chn mt trong nhng v d sau:

    Form, List v mt m bng bong ;-)

    Form

    Khi vo mt trang contact, bn thng thy mt form nh sau:

    Tn bn:

    a ch E-Mail:Gii tnh:

    n nam

    Bn thch:xem TV c sch

    Bn n t: Vietnam

    Bn ni ting: VietnameseEnglish

    Li nhn nh: Vi?t vo y

    send clear

    Dng form ny, bn c th ghi vo s lu bt, gi kin ti ngi ch website... c c form nh trn, bn phi vit HTML Code sau:

    Tn bn: E-Mail:

    Gii tnh: n nam

    Bn thch: xem TV

  • 7/30/2019 hoc html css

    40/60

    c sch

    Bn n t: Vietnam USA Germany

    Bn ni ting: Viet Anh Duc

    Li nhn nh: Vit voy

    Cp TAG khai bo vi browser mt form, gia cp TAG ny l

    cc (cp) TAG khc ca form.

    Mt form c 2 phng thc (method): post v get, v d ny ta cp nphng thc post.

    quyt nh cho hnh ng ca form khi nt send c nhn.Trong v d ny l gi e-mail ti a ch [email protected]

    to ra mt control cho php bn nhptn vo form. Control ny c tn l "ten", kch c l "30". Tn v kch c bnc th tu chn.

    to ra mt control cho php bn nhp e-mail vo form. Control ny c tn l "e-mail", kch c l "30". Tn v kch cbn c th tu chn.

    n v nam: cho php bn chn gii tnh. Trong control th nht, bnthy chchecked v ng thi form, gii tnh n cng c chn sn.

    Vietnam USA Germany cho php bn chn nc t mt list c sn.

    Viet Anh Duc cho php bn chn ting t mt list c sn

    nhng y size="2" c ngha l list ny c 2 dng (bn thy c Viet v Anh)

    vit vo y to ra mt controlcho php bn vit c mt on text di vi nhiu dng. rows v cols chophp bn nh kch c ca control. y l mt cp TAG m gia chngbn c th vit sn Text.

    to ra mt nt mang tn "send". Nu g vont ny, tt c cc thng tin ca form c gi i.

  • 7/30/2019 hoc html css

    41/60

    to ra mt nt mang tn "clear" vi tc dng

    chuyn form v trng thi ban u.

    Listing (odered & unodered list)

    Nu ang quen s dng Word, chc bn s hi, lm th no to c mt danh sch c th t(numbering - 1, 2, 3, 4 ....) hoc c cc du chm trn (bullets) u tng dng nh di y (danh schmua n b x vit v tnh cch ca b psssst...):

    Numbering Bullets1. Mua rau ti nh b Tm bo2. Qua ch M mua ch quy ch

    Ho vu cho r3. 4 lng tht bm trn ch Cu

    Giy4. 1 con g lm sn ch Vnh H

    o Ra v thch n t tin (disc)o Nhng thc ra li rt ki bo (disc) Khng thng chng (disc) Li nh hi ;-) (square)

    Rt n gin, bn ch cn bit n mt s TAG sau: (ordered list) (unordered list) (list) v nhng thuc tnh ca cc TAG : type="disc",type="square", type="circle". Hai Lists trn c vit bng HTML Code sau, bn xem s hiu ngay:

    Mua rau ti nh b Tm boQua ch M mua ch

    quy ch Ho vu chor4 lng tht bm trn chCu Giy1 con g lm sn ch VnhH

    Ra v thch n t tinNhng thc ra li rt ki boKhng thng chngLi nh hi ;-)

  • 7/30/2019 hoc html css

    42/60

    List bn tri (danh sch mua ) chc khng cn gii thch v ngha l orderedlist (c th t 1, 2, 3...). List bn phi (tnh cch v) l unodered v type ca lcircle nn tt c cc u dng u c t ng t mt cng trn (rng). Ringdng di, do c type l disc v square nn u dng th 3 l mt chm en, u

    dng th 4 li l mt hnh vung en.

    Cascading Style Sheets

    Tng t trong Word, bn c th dng Style Sheets (CSS) trong HTML nh dngcho trang web. Thay v phi vit i vit li mt s TAGs, bn c th vit sn trongmt on code u trang hoc trong mt .css file ri import vo trang web.CSS/CSS2 c rt nhiu thuc tnh m ti khng th k ht trong trang ny, xin giithiu vi bn cht t v n bn lm quen v c th hc thm bng cch xem trongHTML code ca cc trang web hay. Xem trong on code di bn s thy r hn tcdng ca CSS.

    .button{

    background-color: #7083c7;color: #ffffff;border-left: 1px solid #9dbcff;border-right: 1px solid navy;border-top: 1px solid #9dbcff;border-bottom: 1px solid navy

    }

    .text{font-family: arial, verdana;font-color: red;font-size: 12px;

    }

    body {SCROLLBAR-ARROW-COLOR: #ffffff;SCROLLBAR-BASE-COLOR: #7083c7

    }

    This is a test

    Trong v d trn, bn thy dng ch "This is a test" khng nm trong cp TAG v

  • 7/30/2019 hoc html css

    43/60

    m nm gia v . TAG mang thuc tnh class="text" v c tcdng nh: . V c nh vy vi nhng ontext khc trong c trang. Ci li y l khi mun thay i giao din c trang, bnkhng cn sa tng on code m ch cn thay i thuc tnh .text trong CSS.

    Thuc tnh ca font

    font-style: normal (thng) hay italic/ oblique (nghing) font-variant: normal (bnh thng) hay smAll-caps (hoa nhng nh nh cc

    ch khc trong cng dng) font-weight: normal (bnh thng), bold, bolder (m) hay light, lighter (gy) font-size: c ca ch - ging nh

    o kiu tuyt i: xx-small, x-small, small, medium, large, x-large hoc xx-largeo kiu tng i: smaller hoc largero chiu rng: mm, cm, in (inch), pt (point), px (pixel), pc (pica)...

    line-height: khong cch gia cc dng cho normal: bnh thngo tuyt i: dng s (1.5 / 2 / 3....). V d: nu chiu kh ch l 10 pt v

    line-height: 1.5 th khong cch gia cc dng s l 10 x line-heigt = 10 x

    1.5 = 15 pt font-family: cho php nh kiu ch (Arial, Verdana, sans-serif)

    Thuc tnh ca nn v mu trong trang web

    background-attachment: thuc tnh ny cho php chn xem hnh nn nm cnh trong trang web (fixed) hay trt theo phn bn xem (scoll)

    background-color: c th chn mu (RGB: 255,255,255 / color name: white / Hex:#ffffff) hoc transparent

    background-image: cho php bn chn mt hnh lm nn cho trang web

    background-position: cho php bn chn im bt u ca hnh nn background-repeat: t ng ni tip (repeat) / t ng ni tip theo chiu ngang

    (repeat-x) / t ng ni tip theo chiu dc (repeat-y) / khng t ng ni tip(no-repeat)

    V d:

    body{

    background-image: url(images/bg.gif);background-position: 50% 50%;background-repeat: no-repeat;background-color: black;

    }

    Mun c thanh cun mu trong trang web, bn ch cn dng code sau:

    body {

    SCROLLBAR-ARROW-COLOR: #ffffff;

  • 7/30/2019 hoc html css

    44/60

    SCROLLBAR-BASE-COLOR: #7083c7;}

    S lu bt (guestbook), din n (forum) cho homepage

    Nhng trang web c nhn thng c mt s lu bt ngi thm homepage c th li vi dng. Chc bn cng mun bit lm th no c c mt s lu bt nhvy ng khng? to c mt guestbook hay mt forum, bn cn bit vit CGI,PHP hoc ASP... Nhng khng vi lo khi nhng th ti va nu khng ni ln iu gc ;-) Bn vn c th c c nhng th bn cn. Ch cn ng k mt dch v minph l sau vi pht homepage ca bn c c guestbook ln forum. Sau khi ngk, bn s c username, password v vi dng HTML code tng t nh di civo trang web ca mnh:

    Click here to sign myguestbook!

    Trong v d trn, bn thy ti ng k guestbook (c) ca mnh tiwww.guestbook.de v c c ID l 110699. Ti a dng HTML code trn vo menuca trang web v ngi n thm ch cn g vo xem/ghi lu bt. Di y ldanh sch mt s dch v min ph:

    Guestbook

    [Free Perl Guestbook] by Tri Dung ;-) Ti va hon thin nt phn cui caFree Perl Guestbook (Version 1.0) v a ln web cc bn [download]v dng trong homepage ca mnh.

    Guestbook ny c nhng im c bn sau:

    1. Ch l mt file duy nht, rt d install (upload, chmod 755 l tt cnhng g bn cn lm)2. Sau khi upload, bn ch cn a a ch ca file guestbook.cgi vo thanhaddress ca browser v g enter, guestbook program s t install n v tocc file cn thit.3. Guestbook cho php bn dng password edit, delete entry, thay igiao din, ngn ng...

    4. Bn c th la chn mt trong 4 th ting cho giao din c sn: Vit,Anh, Php, c (trong cc Version sau s nhiu hn na) v c thdownload thm cc th ting cn thit.5. Khi c bt k mt li g xy ra, guestbook s thng bo cho bn v tsa li.6. Guestbook cho php bn restore mi thay i nu bn nhm ln iu gkhi "nghch" trong cc files7. Ngoi ra cn c cc function nh e-mail bn khi c ai ghi lu bt, e-mail

  • 7/30/2019 hoc html css

    45/60

    cm n khch ghi lu bt (tu server ca bn c h tr e-mail haykhng), vit ting Vit c du (c th t chn), xem kt qa trc khi ghi...

    a ch download: http://www.vitinh.de/cgi-bin/download_guestbook.cgi

    a ch Demo GB: http://www.vitinh.de/cgi-bin/guestbook.cgia ch support:http://www.vitinh.de/downloads/guestbook/guestbook_help.htm

    Hy vng bn s hi lng!

    PS. GB ny hon ton FREE! Trang support ang c vit, nu bn cn cg thc mc lm n s dng Forum ca trang web ny. Tuy ang rt bnnhng ti s c gng tr li.

    [www.guestbook.de] h tr nhiu th ting, cho php bn s dng HTML

    thay i giao din ca s lu bt. Ti ang dng dnh v ny v thy rthay. Bn xem s lu bt c ca ti s thy.

    [www.bravenet.com] Bravenet cho bn c s lu bt ln din n, cnghay nhng t kh nng thay i giao din nh Guestbook.de

    [HTMLGear] Ti cha dng bao gi nhng khi i ghi lu bt cng thy hay.HTMLGear c thm function preview ngi ghi xem trc khi gi.

    [TheGuestbook] Cng hay, nhng ti ch thy trn net m cha th ci baogi.

    Forum

    [ForumCo.com] ng k v s dng th th bit, chn th chuyn sang dchv khc ;-)

    [www.bravenet.com] nh ni trn mc lu bt: dng tt!

    Nu c thi gian v kin nhn, bn c th hc thm v PERL, ASP, PHP t vit chomnh mt Guestbook hay Forum hoc download nhng phn mm vit sn v sa i cho

    hp dng. Mt a ch rt hay cho nhng ai thch my m hc theo kiu "learning bydoing" l: www.cgi-resources.com.

    Nu bn khng hi lng vi nhng g ti nu trn, c th tm thm trongwww.google.com vi nhng t kha sau: free guestbook, free forum...

  • 7/30/2019 hoc html css

    46/60

    free guestbook, free forum Find free services

    Cch ph cc Popup qung co ca FWP (Free Webspace Provider)

    ng k tn min .tk min ph!

    www.your-domain-here

    .tkregister

    Cc bn c Homepage t ti [cc dch v Webspace min ph] chc cng c lnt hi, lm cch no b my ci Popup cht tit ny i ngi xem ri mt.B bao ngy m ra lm c trang web tht va mt vi bao nhiu hnh nh pm b ci ng rc Popup che ht k cng tc. Cng c nhiu bn vit th hi.Trong trang web ny, ti xin gii thiu vi bn cc cch ph Popup cho nhiu FWPkhc nhau. Nhng trc khi c tip, bn nn bit mt s iu sau:

    Ph Popup ng ngha vi khng tun theo Term Of Service (TOS) ca FWPnn h c quyn " t" bn ra v xa hn homepage ca bn lc no cngc. V l do ny, bn nn to cho trang web ca mnh mt a ch c lp(redirect - v d: www.tenban.tk hoc come.to/tenban) , khng lin quan gti provider ni bn dt trang web phng khi h pht hin ra v cm ach ca bn. Khi bn ch cn thay i TARGET URL l xong.

    Nu ai cng lm nh bn th cc FWP sng bng ci g? V iu quan trng nht l: bn cha tng c TOS, bn khng quan tm n

    s sng cn ca FWP v li h cng c a ch E-Mail ca bn bn riv... xc sut b " t" l rt nh, nu " t" th bn lm account mi ;-)

    Nu bn cng ng vi nhng g ti nu trn th lm n tip tc! Nu khng bit gv HTML, bn nn c [trang ny] trc!

    Nu chm t 1 (km nht) n 10 (tt nht), bn s choiHTML bao nhiu im? Lm n chn v nhn nt Vote. xem nhn xt ca cc bn c, nhn nt View!

    - 10 - Vote

    V3 Forwarder (come.to/tenban) & dot.tk

    [Come.to] v [dot.tk] cung cp dch v Forward. Nu bn ang Geocities, a chca bn s l www.geocities.com/tenban. a ch ny di v kh nh hncome.to/tenban ca V3 v www.tenban.tk ca dot.tk. Khi ng k V3, bn sc s la chn gia nhiu kiu qung co khc nhau, chn Frame!Dot.tk t chntrang ca bn vo mt Frame v tung ra mt Popup qung co. a dng codesau vo u HTML code ca trang ch ph Frame qung co:

    // killframe @ www.tridung.deif (top.location != self.location){top.location = self.location}

  • 7/30/2019 hoc html css

    47/60

    250free.com

    [250free.com] cho php bn upload 250 MB v tng km theo banner, popups loi. ph qung co, hy thay TAG trong HTML Code ca tng trang

    bng:

    //Banner Killer by www.tridung.devar td, pn;td = "";document.write(td+pn);

    v bng:

    //Banner Killer by www.tridung.devar lt, jr;td = "";document.write(lt+jr);

    250free thay i thng xuyn Banner-Code ca h v cng lun tm cch v hiuha nhng dng code ca bn. Nu bn thy Banner ca Bravenet [trn trang Testny], lm n thng bo cho ti trn [Forum]

    Batcave.net / ZeroCatch

    [batcave.net] v [0catch.com] tng bn 100 MB v banner, popups... phqung co ca h, bn thm on code (mu ) di vo ngay sau TAG trong HTML code:

  • 7/30/2019 hoc html css

    48/60

    Your web page title

    ...

    Batcave thay i thng xuyn Banner-Code ca h v cng lun tm cch v hiuha nhng dng code ca bn. Nu bn thy Banner ca Batcave [trn trang Testny], lm n thng bo cho ti trn [Forum] y l li gii p thc mc ca bnMai Thi Kieu Nuong (18.11.2002) Chc bn thnh cng!

    Bravenet.com

    [bravenet.com] cung cp th, c Popups v Banner. a nhng dng code sau vo sau tag trong HTML code ca tng trang ph:

    Bravenet thay i thng xuyn Banner-Code ca h v cng lun tm cch vhiu ha nhng dng code ca bn. Nu bn thy Banner ca Bravenet [trn trangTest ny], lm n thng bo cho ti trn [Forum]

    Crosswinds.net

  • 7/30/2019 hoc html css

    49/60

    [crosswinds.net] cho bn s dng Webspace v t nhng cng quy ry bn biPopups. a dng code sau vo trc TAG (u trang) ca tng trang "tm gn" v ng Popup ngay khi n va m ra:

    var winname1="jW4Lo";var winname2="s9wh";var windowname=winname1+winname2;handle = window.open("index.htm", windowname);handle.close();

    PS: Crosswinds khng tm cch ph code ca bn, h xa thng tay trang web cabn, sau nhiu ln h s xa hn account. Ti cng to mt account trncrosswinds.net nhng cng b h xa mt. Nu bn mun s dng crosswindsnh phi chp nhn popup ca h nhng hy dng on code trong phn [HidePopup]

    Fortunecity.com

    [Fortunecity.com] cho bn s dng 100 MB nhng cng quy ry bn bi Popups.a dng code sau vo trc TAG ca tng trang ph:

    Freepage

    [Freepage] cho bn s dng 20 MB nhng cng quy ry bn bi Frame. a dngcode sau vo HTML code ca trang ch ph Frame:

    // killframe @ www.tridung.deif (top.location != self.location){top.location = self.location}

    Geocities.com

  • 7/30/2019 hoc html css

    50/60

    [Geocities.com] cho bn s dng 15 MB nhng cng quy ry bn bi mt Popup-Menu. Thm dng code mu vo trong HTML code sau TAG ca tngtrang ph:

    Geocities thay i thng xuyn Banner-Code ca h v cng lun tm cch vhiu ha nhng dng code ca bn. Nu bn thy Banner ca Geocities [trn trangTest ny], lm n thng bo cho ti trn [Forum]. Tt nhin, nhiu khi my anhlp trnh vin ca geocities cng lun qun, trc y ti phi dng ti gn 10dng code ph, sau khi h "v hiu ha" ht, ti ch cn ng mt dng ;-)

    Hypermart

    [Hypermart.com] cho bn s dng 50 MB v c CGI, SSI nhng cng quy ry bnbi Popups. a dng code sau vo sau TAG cui cng (nu c) hoc btk ni no trong HTML code (nu khng c TAG ) ca tng trang ph:

    Lycos.com

    [Lycos.com] cho bn s dng 50 MB v c PHP, MySQL nhng cng quy ry bn

    bi Popups. a dng code sau vo sau TAG ca tng trang ph:

    Netfirms.com

    [Netfirms.com] cho bn s dng 25 MB v c CGI-BIN v tt nhin, c c banner"trn gi". Tt c cc bin php nu u b h v hiu ha, tr bin php ny.a on code sau vo sau TAG (di tn cng) ca tng trang ph:

    Be fair and don't remove these lines!Banner Killer by www.tridung.de

  • 7/30/2019 hoc html css

    51/60

    Ti c lm [trang th nghim] trn netfirms, nu trang ny c banner ngha l binphp ny b pht hin, lm n thng bo cho ti trn [forum] hoc qua [e-mail]. y l li gii p thc mc ca bn ngocthanh trn forum (17.12.2002).

    Topcities.com

    [Topcities.com] cho bn s dng 150 MB v khuyn mi cho bn mt Bannertng i to ngay trn cng. Chc bn cng khng thch g khi b ci mn b giatrn ng khng ;-) a dng code sau vo sau thay th(ch : ti ni y lthay th, c ngha trong HTML Code ca bn khng c php cha mt TAG th hai!) cho TAG ca tng trang ph:

    //Banner Killer by www.tridung.devar td, pn;td = "";document.write(td+pn);

    v t 14.09.2002 bn phi thm dng sau vo sau TAG ca trang web v hiu ha dng code cui trang ca Topcities

    Ti c mt [Testpage] trn Topcities, nu thy c qung co th bin php ny b pht hin. Hy thng bo cho ti trn [Forum] ti tm cch khc. y l ligii p thc mc ca bn Khoi Viet Hoang (05.09.2002) Chc bn thnh cng!

    Tripod.com

    [Tripod.com] cho bn s dng 50 MB v c CGI nhng cng quy ry bn biBanner. a dng code sau vo trc TAG ca tng trang ph:

    //Banner Killer by www.tridung.devar td, pn;td = "";document.write(td+pn);

  • 7/30/2019 hoc html css

    52/60

    Ti c mt [Testpage] trn Tripod, nu thy c qung co th bin php ny bpht hin. Hy thng bo cho ti trn [Forum] ti tm cch khc. Ngoi ra bncn c th dng cch dnh cho Topcities ph.

    Kill Popup

    a dng code sau vo sau TAG ca tng trang ph:

    Hijack Popup

    Nu bn bit tn ca Popup Window (xem trong on Script m FWP ci thm votrang ca bn), bn c th dng Script sau ng n li ngay sau khi n m vngi xem s khng nhn bit c iu ny. a dng code sau vo sau TAG ca tng trang ph. Phng php ny dng c choCoolfreepages.com.

    Hide Popup

    Nu khng c cch no trong nhng cch trn p dng c, bn s dng cchsau y trang web ca mnh ra trc Popup. Ngi c tuy phi t ng Popupnhng ch nhn bit c khi ri trang bn. a dng code sau vo sau TAG ca tng trang ph:

    10 BEST FWP (Free Webspace Provider)

  • 7/30/2019 hoc html css

    53/60

    ng k tn min .tk min ph!

    www.your-domain-here

    .tkregister

    Bn va lm cho mnh mt trang web nh v cha bit lm th no a n lninternet? Bn c mt cng y MP3 v mun chia x vi mi ngi nhng nhcung cp internet ca bn khng cho php lu MP3 trn server ca h? Ni ngn gnl bn mun c webspace v khng mun mt tin? Trong trang web ny, ti xin giithiu vi bn 10 FWPs tt nht xp theo th t.

    1. Crosswinds Free

    Internet: www.crosswinds.net Homepage-URL: www.crosswinds.net/~ten_ban Webspace: v t (no limit) Gii hn traffic: v t Upload FTP: khng h tr

    Upload Web: h tr Qung co: Pop-ups [xem cch ph] Extra: khng Hn ch: khng

    2. Batcave.net

    Internet: www2.batcave.net Homepage-URL: www.ten_ban.batcave.net Webspace: 100 MB Gii hn traffic: 600 MB/thng Upload FTP: h tr Upload Web: h tr Qung co: Pop-ups, Banner [xem cch ph] Extra: Statistic, Feedback Form Hn ch: khng

    3. ZeroCatch

    Internet: www.0catch.com Homepage-URL: www.ten_ban.0catch.com Webspace: 100 MB Gii hn traffic: 20 MB/ngy, 600 MB/thng Upload FTP: h tr Upload Web: h tr Qung co: Pop-ups, Banner [xem cch ph] Extra: khng Hn ch: file khng ln hn 1 MB

  • 7/30/2019 hoc html css

    54/60

    4. Anzwers Free Home

    Internet: www.anzwers.net Homepage-URL: http://anzwers.org/free/ten_ban Webspace: 60 MB, mun nhiu hn phi hi Gii hn traffic: v t Upload FTP: khng h tr Upload Web: h tr Qung co: Banner Extra: khng Hn ch: cm mt s file types, khng h tr frames

    5. Lycos Tripod

    Internet: www.tripod.com Homepage-URL: ten_ban.tripod.com Webspace: 50 MB Gii hn traffic: v t Upload FTP: h tr (a ch: ftp.tripod.com, s dng username v

    password) Upload Web: h tr Qung co: Pop-ups [xem cch ph] Extra: ti khon e-mail, PHP... Hn ch: khng

    6. Fortunecity Internet: www.fortunecity.com Homepage-URL: http://members.fortunecity.com/ten_ban Webspace: 100 MB Gii hn traffic: v t Upload FTP: h tr Upload Web: h tr Qung co: Pop-ups, Banner [xem cch ph] Extra: khng Hn ch: cm file ln hn 5 MB

    7. Cool Free Pages

    Internet: www.coolfreepages.com Homepage-URL: ten_ban.coolfreepages.com Webspace: 50 MB Gii hn traffic: v t Upload FTP: h tr

  • 7/30/2019 hoc html css

    55/60

    Upload Web: khng h tr Qung co: Pop-under [xem cch ph] Extra: PHP Hn ch: khng

    8. FindALL

    Internet: www.findall.de Homepage-URL: www.findall.de/home/ten_ban Webspace: 25 MB Gii hn traffic: v t Upload FTP: khng h tr Upload Web: h tr Qung co: khng Extra: khng Hn ch: khng

    9. Spaceports

    Internet: www.spaceports.com Homepage-URL: http://galileo.spaceports.com/~ten_ban Webspace: 20 MB, mun nhiu th xin thm Gii hn traffic: 100 MB/ngy, 1 GB/thng Upload FTP: h tr (a ch v d: galieo.spaceports.com, s dng username

    v password) Upload Web: h tr

    Qung co: Banner Extra: ti khon E-Mail, CGI (rt tt!), PHP Hn ch: khng

    10. Yahoo! Geocities

    Internet: www.geocities.com Homepage-URL: www.geocities.com/ten_ban Webspace: 15 MB, mun nhiu th xin thm Gii hn traffic: v t Upload FTP: h tr (a ch: ftp.geocities.com, s dng username v

    password - hay b li login) Upload Web: h tr Qung co: Pop-ups (AdSquare) [xem cch ph] Extra: ti khon E-Mail, statistic Hn ch: khng

  • 7/30/2019 hoc html css

    56/60

    Bng ch ting Vit s dng UnicodeGi tr ca x(v d: = )

    0 1 2 3 4 5 6 7 8 9

    19x 22x 25x 27x 29x 36x

    41x 43x 46x

    784x 785x 786x 787x 788x 789x 790x 791x 792x

  • 7/30/2019 hoc html css

    57/60

    Mt s ch c du cn li trong ting VitCh Code Ch Code

    Bn c th dng bng code trn vit ting Vit trong HTML Code (s dng font:Times New Roman, Verdana, Arial hoc Tahoma) nhng nn dng Frontpage (ctrong b Office 2000, XP) v VPSKeys 4.2 vit cho nhanh.Cookie - chic bnh quy v hnh

    C th bn tng c c u v cookie nhng cha nhn thy n hot ngnh th no, cha tng tng c hnh dng ca n. Nu bn s dng WindowsXP, hy m Windows Explorer ra, vo C:\Documents and Settings\Ten Ban\Cookies\s thyv s cookie c cc trang web gi vo t bao gi. Bn cng c th xa ton bnhng cookie ny m khng lm nh hng g n my. Cookie (bnh quy) thngl mt file text rt nh (max. 4KB) c s dng cc trang web "nh" ti bn khibn quay li, n gin ha cc khu in form, nh nhng settings ca bn trntrang web... Cookie thng c dng nh sau:

  • 7/30/2019 hoc html css

    58/60

    Option: | tat | ~~local~~/D:\Website\Tri Dung\ihtml\ | 1088368571366429526991300723643229525583*

    Ti thm du | vo bn d nhn. Trong dng trn, bn thy mt cookie c 5 khc.Hai khc u mang tn bn, hoc trong v d trn l Option ca nhc nn, hai khcgia l Path ca trang web (trong v d ny trang web nm local trn my ca ti)

    v khc sau l thi im ht hn ca cookie. on code di cho php bn to(set_cookie)v c (get_cookie) mt cookie:

    //Script by www.tridung.devar browser = navigator.appName;LIVEDAYS=7;function set_cookie(name, value)// Tao cookie{document.cookie= name + "=" + escape(value)+ "; EXPIRES=" + cookie_live();}function cookie_live()// Tinh thoi diem het han{

    var date=new Date();date.setDate(date.getDate()+LIVEDAYS);var gmt=date.toGMTString();var k1=gmt.indexOf(" ");var k2=gmt.indexOf(" ", k1+1);var k3=gmt.indexOf(" ", k2+1);var str=gmt.substring(0,k2)+"-"+gmt.substring(k2+1,k3)+"-"+gmt.substring(k3+3,gmt.length);return str;}function get_cookie(name)//doc Cookie{var value;if(document.cookie != "") {

    var kk=document.cookie.indexOf(name+"=");if(kk >= 0) {kk=kk+name.length+1;var ll=document.cookie.indexOf(";", kk);if(ll < 0)ll=document.cookie.length;value=document.cookie.substring(kk, ll);value=unescape(value);}}return value;}

    Cookie at work - background music [see more]

    Cch to nhc nn cho trang web bn bit trong chng trc. Sau yti xin gii thiu cch iu chnh nhc nn ph hp vi mun ca ngiti thm. Trang web cho php ngi ti thm la chn mt trong 3 cch:chi nhc mt ln, chi i chi li hoc tt hn. V chc chn bn s btng khi quay li trang ny sau 1 gi: bn s nghe mt bn nhc khc!

  • 7/30/2019 hoc html css

    59/60

    iu ny n gin lm, ch cn c k trang JavaScript v nghin cusource code ca hai script di l bn t lm c ngay. By gi mi bnth!

    Lm n chnh nhc nn ca trang web: chy mt ln

    chy lin tc tt

    lm c iu trn, bn cn vit on code sau:

    Lam on chon nhac nen cho trang web:

    chay mot lan chay lien tuc tat

    Ngoi ra, cn c mt folder mang tn sound, cha cc bi ht (xem trongscript source code bit tn cc bi cn thit) v hai script (download y: music.js v load_music.js) nm trong folder scripts

    Bn nhoc_con c hi trong forum cch to mt popup window (thng cha nhngthng bo mi) khi mt trang c m ra v mun popup ch m trong ln utin khi ngi xem va n. y li l mt nhim v cao c ca cookie. Trang webm popup v t ci mt cookie vo my ca ngi xem v nh du l my ny c popup ln sau trang web khng m popup na. Tt nhin bn c th da vov d trn cho php ngi xem t quyt nh mnh c mun xem popup trong lnthm ti khng.

    Cookie at work - Popup Setting [see more]

    Trong v d ny, bn c th th nhng g ti nu trn:

    Show popup on your next visit? Yes No

    lm c iu trn, bn cn vit on code sau:

  • 7/30/2019 hoc html css

    60/60

    Show popup on your next visit? Yes

    No

    Ngoi ra, bn cn cn mt file mang tn ihtml_popup.htm v hai script(download y: popup.js v load_popup.js) nm trong folder scripts.Trong trang Popup, bn nn lnh onBlur="self.close()" trong tag body trang ny t ng khi ngi xem xem tip trang chnh

    http://www.vitinh.de