You are on page 1of 34

Gio trnh Thit k Web : Nguyn Hu Tun

www.cloudmedianews.com

Website: www.cloudmedianews.com Website: www.sosanhtinhnang.com

Phn I Gii thiu ngn ng Html I. Cc th nh cu trc ti liu


1.1 HTML Cp th ny c s dng xc nhn mt ti liu l ti liu HTML, tc l n c s dng cc th HTML trnh by. Ton b ni dung ca ti liu c t gia cp th ny. <HTML> C php:

... Ton b ni ca ti liu c t y


</HTML>

Trnh duyt s xem cc ti liu khng s dng th <HTML> nh nhng tp tin vn bn bnh thng. 1.2 HEAD Th HEAD c dng xc nh phn m u cho ti liu. C php:
<HEAD>

... Phn m u (HEADER) ca ti liu c t y


</HEAD>

1.3 TITLE Cp th ny ch c th s dng trong phn m u ca ti liu, tc l n phi nm trong th phm vi gii hn bi cp th <HEAD>. C php:
<TITLE>Tiu ca ti liu</TITLE>

Gio trnh thit k Web

Gio trnh Thit k Web : Nguyn Hu Tun

www.cloudmedianews.com

1.4 BODY Th ny c s dng xc nh phn ni dung chnh ca ti liu - phn thn (body) ca ti liu. Trong phn thn c th cha cc thng tin nh dng nht nh t nh nn cho ti liu, mu nn, mu vn bn siu lin kt, t l cho trang ti liu... Nhng thng tin ny c t phn tham s ca th.
<BODY> .... phn ni dung ca ti liu c t y </BODY>

C php:

Trn y l c php c bn ca th BODY, tuy nhin bt u t HTML 3.2 th c nhiu thuc tnh c s dng trong th BODY. Sau y l cc thuc tnh chnh:

BACKGROUND=

t mt nh no lm nh nn (background) cho vn bn. Gi tr ca tham s ny (ph n sau du bng) l URL ca file nh. Nu kch thc nh nh hn ca s trnh duyt th ton b mn hnh ca s trnh duyt s c lt kn bng nhiu nh. t mu nn cho trang khi hin th. Nu c hai tham s BACKGROUND v BGCOLOR cng c gi tr th trnh duyt s hin th mu nn trc, sau mi ti nh ln pha trn. Xc nh mu ch ca vn bn, k c cc mc. Xc nh mu sc cho cc siu lin kt trong vn bn. Tng ng, alink (active link) l lin kt ang c kch hot - tc l khi c kch chut ln; vlink (visited link) ch lin kt tng c kch hot;

BGCOLOR=

TEXT= ALINK=,VLINK=,LINK=

Nh vy mt ti liu HTML c bn c cu trc nh sau:


<HTML> <HEAD> <TITLE>Tiu ca ti liu</TITLE> </HEAD> <BODY Cc tham s nu c> ... Ni dung ca ti liu </BODY> </HTML>

Gio trnh thit k Web

Gio trnh Thit k Web : Nguyn Hu Tun

www.cloudmedianews.com

II. Cc th nh dng khi


2.1. th P Th <P> c s dng nh dng mt on vn bn. C php:
<P>Ni dung on vn bn</P>

2.2. Cc th nh dng mc H1/H2/H3/H4/H5/H6 HTML h tr 6 mc mc. Ch rng mc ch l cc ch dn nh dng v mt logic, tc l mi trnh duyt s th hin mc di mt khun dng thch hp. C th trnh duyt ny l font ch 14 point nhng sang trnh duyt khc l font ch 20 point. mc cp 1 l cao nht v gim dn n cp 6. Thng thng vn bn mc cp 5 hay cp 6 thng c kch thc nh hn vn bn thng thng. Di y l cc th dng nh dng vn bn dng mc:
<H1> ... </H1> <H2> ... </H2> <H3> ... </H3> <H4> ... </H4> <H5> ... </H5> <H6> ... </H6> nh dng mc cp 1 nh dng mc cp 2 nh dng mc cp 3 nh dng mc cp 4 nh dng mc cp 5 nh dng mc cp 6

2.3 Th xung dng BR Th ny khng c th kt thc tng ng ( </BR>), n c tc dng chuyn sang dng mi. Lu , ni dung vn bn trong ti liu HTML s c trnh duyt Web th hin lin tc, cc khong trng lin nhau, cc k t tab, k t xung dng u c coi nh mt khong trng. xung dng trong ti liu, bn phi s dng th <BR> 2.4 Th PRE gii hn on vn bn c nh dng sn bn c th s dng th <PRE>. Vn bn gia hai th ny s c th hin ging ht nh khi chng c nh vo, v d du xung dng trong on vn bn gii hn bi th <PRE> s c ngha chuyn sang dng mi (trnh duyt s khng coi chng nh du cch) C php:

<PRE>Vn bn c nh dng </PRE>


Gio trnh thit k Web 3

Gio trnh Thit k Web : Nguyn Hu Tun

www.cloudmedianews.com

III. Cc th nh dng danh sch


3.1. Danh sch thng thng C php:
<UL> <LI> Mc th nht <LI> Mc th hai </UL>

C 4 kiu danh sch: ` Danh sch khng sp xp ( hay khng nh s) <UL> Danh sch c sp xp (hay c nh s) <OL>, mi mc trong da nh sch c sp xp th t. Danh sch thc n <MENU> Danh sch phn cp <DIR>

Vi nhiu trnh duyt, danh sch phn cp v danh sch thc n ging danh sch khng nh s, c th dng ln vi nhau. Vi th OL ta c c php sau:
<OL TYPE=1/a/A/i/I> <LI>Muc thu nhat <LI>Muc thu hai <LI>Muc thu ba </OL>

trong :

TYPE =1 =a =A =i =I

Cc mc c sp xp theo th t 1, 2, 3... Cc mc c sp xp theo th t a, b, c... Cc mc c sp xp theo th t A, B, C... Cc mc c sp xp theo th t i, ii, iii... Cc mc c sp xp theo th t I, II, III...

Ngoi ra cn thuc tnh START= xc nh gi tr khi u cho danh sch. Th < LI > c thuc tnh TYPE= xc nh k hiu u dng (bullet) ng trc mi mc trong danh sch. Thuc tnh ny c th nhn cc gi tr : disc (chm trn m); circle (vng trn); square (hnh vung). 4

Gio trnh thit k Web

Gio trnh Thit k Web : Nguyn Hu Tun

www.cloudmedianews.com

IV. Cc th nh dng k t
4.1. Cc th nh dng in k t Sau y l cc th c s dng quy nh cc thuc tnh nh in nghing, in m, gch chn... cho cc k t, vn bn khi c th hin trn trnh duyt.

<B> ... </B> <STRONG> ... </STRONG> <I> ... </I> <EM> ... </EM> <U> ... </U>
<DFN>

In ch m

In ch nghing

In ch gch chn nh du on vn bn gia hai th ny l nh ngha ca mt t. Chng thng c in nghing hoc th hin qua mt kiu c bit no . In ch b gch ngang. In ch ln hn bnh thng bng cch tng kch thc font hin thi ln mt. Vic s dng cc th <BIG>lng nhau to ra hiu ng ch tng dn. Tuy nhin i vi mi trnh duyt c gii hn v kch thc i vi mi font ch, vt qu gii hn ny, cc th < BIG> s khng c ngha. In ch nh hn bnh thng bng cch gim kch thc font hin thi i mt. Vic s dng cc th <SMALL>lng nhau to ra hiu ng ch gim dn. Tuy nhin i vi mi trnh duyt c gii hn v kch thc i vi mi font ch, vt qu gii hn ny, cc th < SMALL> s khng c ngha. nh dng ch s trn (SuperScript) nh dng ch s di (SubScript) nh ngha kch thc font ch c s dng cho n ht vn bn. Th ny ch c mt tham s size= xc nh c ch. Th <BASEFONT> khng c th kt thc. Chn kiu ch hin th. Trong th ny c th t hai tham s size= hoc color= xc nh c ch v mu sc on vn bn nm gia hai th. Kch thc c th l tuyt i (nhn gi tr t 1 n 7) hoc tng i (+2,-4...) so vi font ch hin ti.

<S> ... </S>

<STRIKE> ... </STRIKE> <BIG> ... </BIG>

<SMALL> ... </SMALL>

<SUP> ... </SUP> <SUB> ... </SUB> <BASEFONT>

<FONT> ... </FONT>

Gio trnh thit k Web

Gio trnh Thit k Web : Nguyn Hu Tun

www.cloudmedianews.com

4.2. Cn l vn bn trong trang Web Trong trnh by trang Web ca mnh cc bn lun phi ch n vic cn l cc vn bn trang Web c c mt b cc p. Mt s cc th nh dng nh P, Hn, IMG... u c tham s ALIGN cho php bn cn l cc vn bn nm trong phm vi gii hn bi ca cc th . Cc gi tr cho tham s ALIGN:
LEFT CENTER RIGHT Cn l tri Cn gia trang Cn l phi

Ngoi ra, chng ta c th s dng th CENTER cn gia trang mt khi vn bn. C php:
<CENTER>Vn bn s c cn gia trang </CENTER>

4.3. Cc k t c bit K t & c s dng ch chui k t i sau c xem l mt thc th duy nht. K t ; c s dng tch cc k t trong mt t. K t < > & M ASCII &#060 &#062 &#038 Tn chui &lt &gt &amp

4.4. S dng mu sc trong thit k cc trang Web Mt mu c tng hp t ba thnh phn mu chnh, l: (Red), Xanh l cy (Green), Xanh nc bin (Blue). Trong HTML mt gi tr mu l mt s nguyn dng hexa (h m c s 16) c nh dng nh sau: #RRGGBB trong :

RR - l gi tr mu . GG - l gi tr mu Xanh l cy. BB - l gi tr mu Xanh nc bin.


Gio trnh thit k Web 6

Gio trnh Thit k Web : Nguyn Hu Tun

www.cloudmedianews.com

Mu sc c th c xc nh qua thuc tnh bgcolor= hay color=. Sau du bng c th l gi tr RGB hay tn ting Anh ca mu. Vi tn ting Anh, ta ch c th ch ra 16 mu trong khi vi gi tr RGB ta c th ch ti 256 mu. Sau y l mt s gi tr mu c bn:

Mu sc sm Xanh l cy Xanh nht Xanh nc bin Vng Vng nht Trng en Xm Nu Tm Tm nht Hng Da cam Mu ng phc hi qun

Gi tr #FF0000 #8B0000 #00FF00 #90EE90 #0000FF #FFFF00 #FFFFE0 #FFFFFF #000000 #808080 #A52A2A #FF00FF #EE82EE #FFC0CB #FFA500 #000080 #4169E1 #7FFFD4

Tn ting Anh RED DARKRED GREEN LIGHTGREEN BLUE YELLOW LIGHTYELLOW WHITE BLACK GRAY BROWN MAGENTA VIOLET PINK ORANGE NAVY ROYALBLUE AQUAMARINE

C php:

<BODY LINK ALINK VLINK BACKGROUND BGCOLOR TEXT TOPMARGIN = color = color = color = url = color = color = pixels

Gio trnh thit k Web

Gio trnh Thit k Web : Nguyn Hu Tun


RIGHTMARGIN LEFTMARGIN > .... phn ni dung ca ti liu c t y </BODY> = pixels = pixels

www.cloudmedianews.com

Sau y l ngha cc tham s ca th BODY:

Cc tham s LINK ALINK VLINK BACKGROUND BGCOLOR TEXT SCROLL TOPMARGIN RIGHTMARGIN LEFTMARGIN

ngha Ch nh mu ca vn bn siu lin kt Ch nh mu ca vn bn siu lin kt ang ang chn Ch nh mu ca vn bn siu lin kt tng m Ch nh a ch ca nh dng lm nn Ch nh mu nn Ch nh mu ca vn bn trong ti liu YES/NO - Xc nh c hay khng thanh cun L trn L phi L tri

4.5. Chn kiu ch cho vn bn C php:


<FONT FACE COLOR SIZE ... = font-name = color =n>

</FONT> 4.6. Khi nim vn bn siu lin kt Vn bn siu lin kt hay cn gi l siu vn bn l mt t, mt cm t hay mt cu trn trang Web c dng lin kt ti mt trang Web khc. Siu vn bn l mi
Dch v Cng Tn file

http://selab.vnuh.edu.vn:8080 /~dir1/dir2/dir3/index.HTML#chapter001 Gio trnh thit k Web


Tn h thng ng dn Cc tham s, bin, truy vn

V d v URL

Gio trnh Thit k Web : Nguyn Hu Tun

www.cloudmedianews.com

trng trong cha cc lin kt (link) ca cc thng tin. Do WWW cu thnh t nhiu h thng khc nhau, cn phi c mt quy tc t tn thng nht cho tt c cc vn bn trn Web. Quy tc t tn l URL (Universal Resource Locator).

Cc thnh phn ca URL c minh ho hnh trn. Dch v: L thnh phn bt buc ca URL. N xc nh cch thc trnh duyt ca my khch lin lc vi my phc v nh th no nhn d liu. C nhiu dch v nh http, wais, ftp, gopher, telnet. Tn h thng : L thnh phn bt buc ca URL. C th l tn min y ca my phc v hoc ch l mt phn tn y trng hp ny xy ra khi vn bn c yu cu vn nm trn min ca bn. Tuy nhin nn s dng ng dn y . Cng : Khng l thnh phn bt buc ca URL. Cng l a ch socket ca mng dnh cho mt giao thc c th. Giao thc http ngm nh ni vi cng 8080. ng dn th mc : L thnh phn bt buc ca URL. Phi ch ra ng dn ti file yu cu khi kt ni vi bt k h thng no. C th ng dn trong URL khc vi ng dn thc s trong h thng my phc v. Tuy nhin c th rt gn ng dn bng cch t bit danh (alias). Cc th mc trong ng dn cch nhau bi du gch cho (/). Tn file : Khng l thnh phn bt buc ca URL. Thng thng my phc v c cu hnh sao cho nu khng ch ra tn file th s tr v file ngm nh trn th mc c yu cu. File ny thng c tn l index.html, index.htm, default.html hay default.htm. Nu cng khng c cc file ny th thng kt qu tr v l danh sch lit k cc file hay th mc con trong th mc c yu cu Cc tham s : Khng l thnh phn bt buc ca URL. Nu URL l yu cu tm kim trn mt c s d liu th truy vn s gn vo URL, chnh l on m ng sau du chm hi (?).URL cng c th tr li thng tin c thu thp t form. Trong trng hp du thng (#) xut hin on m ng sau l tn ca mt v tr (location) trong file c ch ra. to ra mt siu vn bn chng ta s dng th <A>. C php:

Gio trnh thit k Web

Gio trnh Thit k Web : Nguyn Hu Tun


<A HREF NAME TABINDEX TITLE TARGET > = url = name =n = title = _blank / _self

www.cloudmedianews.com

... siu vn bn
</A>

ngha cc tham s:

HREF NAME TABLEINDEX TITLE TARGET

a ch ca trang Web c lin kt, l mt URL no . t tn cho v tr t th. Th t di chuyn khi n phm Tab Vn bn hin th khi di chut trn siu lin kt. M trang Web c lin trong mt ca s mi ( _blank) hoc trong ca s hin ti (_self), trong mt frame (tn frame).

4.7. a ch tng i URL c trnh by trn l URL tuyt i. Ngoi ra cn c URL tng i hay cn gi l URL khng y . a ch tng i s dng s khc bit tng i gia vn bn hin thi v vn bn cn tham chiu ti. Cc thnh phn trong URL c ngn cch bng k t ngn cch (k t gch cho /). to ra URL tng i, u tin phi s dng k t ngn cch. URL y hin ti s c s dng to nn URL y mi. Nguyn tc l cc thnh phn bn tri du ngn cch ca URL hin ti c gi nguyn, cc thnh phn bn phi c thay th bng thnh phn URL tng i. Ch rng trnh duyt khng gi URL tng i, n b sung vo URL c s xc nh trc thnh phn URL tng i xc nh sau thuc tnh href=. K t u tin sau du bng s xc nh cc thnh phn no ca URL hin ti s tham gia to nn URL mi. V d, nu URL y l: http://it-department.vnuh.edu.vn/HTML/index.htm th: Du hai chm ( :) ch dch v gi nguyn nhng thay i phn cn li. V d ://www.fpt.com/ s ti trang ch ca my phc v www.fpt.com vi cng dch v http. Du gch cho ( /) ch dch v v my phc v gi nguyn nhng ton b ng dn thay i. V d /Javascript/index.htm s ti file index.htm ca th mc Javascript trn my phc v www.it-department.vnuh.edu.vn. 10

Gio trnh thit k Web

Gio trnh Thit k Web : Nguyn Hu Tun

www.cloudmedianews.com

Khng c du phn cch ch c tn file l thay i. V d index1.htm s ti file index1.htm trong th mc HTML ca my phc v www.itdepartment.vnuh.edu.vn. Du thng ( #): ch dch v, my phuc v, ng dn v c tn file gi nguyn, ch thay i v tr trong file.

Do ng dn c xem l n v c lp nn c th s dng phng php ng dn tng i nh trong UNIX hay MS-DOS (tc l . ch th mc hin ti cn .. ch th mc cha ca th mc hin ti). URL c s c th c xc nh bng th <BASE>. 4.8. Kt ni mailto Nu t thuc tnh href= ca th <a> gi tr mailto:address@domain th khi kch hot kt ni s kch hot chc nng th in t ca trnh duyt.
<ADDRESS> Trang WEB ny c <A href=mailto:webmaster@vnuh.edu.vn > WEBMASTER <\A> bo tr <\ADDRESS>

4.9. V mt ng thng nm ngang C php:


<HR ALIGN COLOR NOSHADE SIZE WIDTH > =n = width = LEFT / CENTER / RIGHT = color

ngha cc tham s:

ALIGN COLOR NOSHADE SIZE WIDTH

Cn l (cn tri, cn phi, cn gia) t mu cho ng thng Khng c bng dy ca ng thng Chiu di (tnh theo pixel hoc % ca b rng ca s

Gio trnh thit k Web

11

Gio trnh Thit k Web : Nguyn Hu Tun


trnh duyt).

www.cloudmedianews.com

Th ny ging nh th BR, n cng khng c th kt thc tng ng.

V. Cc th chn m thanh, hnh nh


5.1. Gii thiu Lin kt vi file a phng tin cng tng t nh lin kt bnh thng. Tuy vy phi t tn ng cho file a phng tin. Phn m rng ca file phi cho bit kiu ca file.
Kiu Image/GIF Phn m rng .gif M t Vit tt ca Graphics Interchange Format. Khun dng ny xut hin khi mi ngi c nhu cu trao i nh trn nhiu h thng khc nhau. N c s dng trn tt c cc h thng h tr giao din ho. nh dng GIF l nh dng chun cho mi trnh duyt WEB. Nhc im ca n l ch th hin c 256 mu. M rng ca chun ny l GIF89, c thm nhiu chc nng cho cc ng dng c bit nh lm nh nn trong sut - tc l nh c th ni bng cch lm mu nn ging vi mu nn ca trnh duyt. Image/JPEG .jpeg Vit tt ca Joint Photographic Expe rt Group. L khun dng nh khc nhng c thm kh nng nn.u im ni bt ca khun dng ny l lu tr c hng triu mu v nn cao nn kch thc file nh nh hn v thi gian download nhanh hn. N l c s cho khun dng MPEG. Tt c cc trnh duyt u c kh nng xem nh JPEG. Vit tt ca Tagged Image File Format. c Microsoft thit k qut nh t my qut cng nh to cc n phm.

Image/TIFF

.tiff

Text/HTML PostScript Adobe Acrobat

.HTML, .htm .eps, .ps .pdf c to ra hin th v in cc vn bn c cht lng cao. Vit tt ca Portable Document Format. Acrobat cng s dng cc siu lin kt ngay trong vn bn cng ging nh HTML. T phin bn 2.0, cc sn phm ca Acrobat cho php lin kt gia nhiu vn bn. u im ln nht ca n l kh nng WYSISYG. Vit tt ca Motion Picture Expert Group, l nh dng dnh cho cc loi phim (video). y l khun

Video/MPEG

.mpeg

Gio trnh thit k Web

12

Gio trnh Thit k Web : Nguyn Hu Tun


Video/AVI Video/QuickTi me .avi .mov

www.cloudmedianews.com

dng thng dng nht dnh cho phim trn WEB. L khun dng phim do Microsoft a ra. Do Apple Computer a ra, chun video ny c cho l c nhiu u im hn MPEG v AVI. Mc d c tch hp vo nhiu trnh duyt nhng vn cha ph bin bng hai loi nh dng trn. L khun dng dnh cho m nhc in t ht sc thng dng c nhiu trnh duyt trn cc h thng khc nhau h tr. File Midi c tng hp s ho trc tip t my tnh. nh dng audio theo dng. Mt bt tin khi s dng cc nh dng khc l file m thanh thng c kch thc ln - do vy thi gian ti xung lu, Tri li audio dng bt u chi ngay khi ti c mt phn file trong khi vn ti v cc phn khc.Mc d file theo nh dng ny khng nh hn so vi cc nh dng khc song chnh kh nng dng khin nh dng ny ph hp vi kh nng chi ngay lp tc. Vit tt ca Virtual Reality Modeling Language. Cc file theo nh dng ny cng ging nh HTML. Tuy nhin do trnh duyt c th hin th c ca s 3 chiu nn ngi xem c th cm nhn c cm gic ba chiu.

Sound/AU Sound/MIDI

.au .mid

Sound/RealA udio

.ram

VRML

.vrml

5.2. a m thanh vo mt ti liu HTML C php:


<BGSOUND SRC = url LOOP = n >

Th ny khng c th kt thc tng ng (</BGSOUND>). chi lp li v hn cn ch nh LOOP = -1 hoc LOOP = INFINITE. Th BGSOUND phi c t trong phn m u (tc l nm trong cp th HEAD). 5.3. Chn mt hnh nh, mt on video vo ti liu HTML chn mt file nh (.jpg, .gif, .bmp) hoc video (.mpg, .avi) vo ti liu HTML, bn c th s dng th IMG. C php:
<IMG ALIGN = TOP/MIDDLE/BOTTOM

Gio trnh thit k Web

13

Gio trnh Thit k Web : Nguyn Hu Tun


ALT BORDER SRC WIDTH HEIGHT HSPACE VSPACE TITLE DYNSRC START LOOP > = text =n = url = width = height = vspace = hspace = title = url = FILEOPEN/MOUSEOVER =n

www.cloudmedianews.com

Trong :
ALIGN = TOP/ MIDDLE/ BOTTOM/ LEFT/ RIGHT ALT = text Cn hng vn bn bao quanh nh Ch nh vn bn s c hin th nu chc nng show picture ca browser b tt i hay hin th thay th cho nh trn nhng trnh duyt khng c kh nng hin th ho. Vn bn ny cn c gi l nhn ca nh. i vi trnh duyt c kh nng h tr ho, dng vn bn ny s hin ln khi di chut qua nh hay c hin th trong vng ca nh nu nh cha c ti v ht. Ch phi t vn bn trong hai du nhy kp nu triong vn bn cha du cch hay cc k t c bit trong trng hp ngc li c th b du nhy kp. t kch thc ng vin c v quanh nh (tnh theo pixel). a ch ca file nh cn chn vo ti liu. Ch nh kch thc ca nh c hin th. Ch nh khong trng xung quanh hnh nh (tnh theo pixel) theo bn pha trn, di, tri, phi. Vn bn s hin th khi con chut tr trn nh a ch ca file video. Ch nh file video s c chi khi ti liu c m hay khi tr con chut vo n. C th kt hp c hai gi tr ny nhng phi phn cch chng bi du phy. Ch nh s ln chi. Nu LOOP = INFINITE th file video s c chi v hn ln.

BORDER = n SRC = url WIDTH/HEIGHT HSPACE/VSPACE TITLE = title DYNSRC = url START = FILEOPEN/MOUSEOVER

LOOP = n/INFINITE

Gio trnh thit k Web

14

Gio trnh Thit k Web : Nguyn Hu Tun

www.cloudmedianews.com

VI. Cc th nh dng bng biu


Sau y l cc th to bng chnh:

<TABLE> ... </TABLE> <TR> ... </TR> <TD> ... </TD> <TH> ... </TH> <CAPTION> ... </CAPTION>

nh ngha mt bng nh ngha mt hng trong bng nh ngha mt trong hng nh ngha cha tiu ca ct Tiu ca bng

C php:
<TABLE ALIGN BORDER BORDERCOLOR BORDERCOLORDARK BORDERCOLORLIGHT BACKGROUND BGCOLOR CELLSPACING CELLPADDING > <CAPTION>Tiu ca bng biu</CAPTION> ... nh ngha cc dng <TR ALIGN = LEFT/CENTER/RIGHT VALIGN = TOP/MIDDLE/BOTTOM> ... nh ngha cc trong dng <TD ALIGN VALIGN BORDERCOLOR BORDERCOLORDARK BORDERCOLORLIGHT BACKBROUND BGCOLOR COLSPAN ROWSPAN > = LEFT / CENTER / RIGHT = TOP / MIDDLE / BOTTOM = color = color = color = url = color =n =n = LEFT / CENTER / RIGHT =n = color = color = color = url = color = spacing = pading

Gio trnh thit k Web

15

Gio trnh Thit k Web : Nguyn Hu Tun


... Ni dung ca </TD> ... </TR> ... </TABLE>

www.cloudmedianews.com

ngha cc tham s:
ALIGN / VALIGN BORDER Cn l cho bng v ni dung trong mi . Kch thc ng k chia trong bng, c o theo pixel. Gi tr 0 c ngha l khng xc nh l, gia cc trong bng ch c mt khong trng nh phn bit. Nu ch border th ngm nh border=1. Vi nhng bng c cu trc phc tp, nn t l ngi xem c th phn bit r cc dng v ct. Mu ng k Mu pha ti v pha sng cho ng k ni. a ch ti tp nh dng lm nn cho bng Mu nn Khong cch gia cc trong b ng Khong cch gia ni dung v ng k trong mi ca bng. Ch nh s ko di trong bao nhiu ct Ch nh s ko di trong bao nhiu hng

BORDERCOLOR BORDERCOLORDARK BORDERCOLORLIGHT BACKGROUND BGCOLOR CELLSPACING CELLPADDING COLSPAN ROWSPAN

VII. FORM
7.1. HTML Forms Cc HTML Form c th c cc hp vn bn, hp danh sch la chn, nt bm, nt chn... 7.2. To Form to ra mt form trong ti liu HTML, chng ta s dng th FORM vi c php nh sau: C php:
<FORM

Gio trnh thit k Web

16

Gio trnh Thit k Web : Nguyn Hu Tun


ACTION METHOD TARGET > = ulr = GET | POST

www.cloudmedianews.com

NAME = name = frame_name | _blank | _self

<!-- Cc phn t iu khin ca form c t y --> <INPUT ...> <INPUT ...> </FORM>

Trong

ACTION METHOD NAME TARGET

a ch s gi d liu ti khi form c submit (c th l a ch ti mt chng trnh CGI, mt trang ASP...). Phng thc gi d liu. Tn ca form. Ch nh ca s s hin th kt qu sau khi gi d liu t form n server.

t cc i tng iu khin (nh hp vn bn, kim tra, nt bm...) vo trang Web

C php th INPUT:
<INPUT ALIGN = LEFT | CENTER | RIGHT TYPE = BUTTON | CHECKBOX | FILE | IMAGE | PASSWORD | RADIO | RESET | SUBMIT | TEXT VALUE = value >

7.3. To mt danh sch la chn C php:

<SELECT NAME="tn danh sch" SIZE="chiu cao"> <OPTION VALUE=value1 SELECTED> Tn mc chn th nht <OPTION VALUE=value2> Tn mc chn th hai <!-- Danh sch cc mc chn -->

Gio trnh thit k Web

17

Gio trnh Thit k Web : Nguyn Hu Tun


</SELECT>

www.cloudmedianews.com

7.4. To hp son tho vn bn C php:

<TEXTAREA COLS=s ct ROWS=s hng NAME=tn > Vn bn ban u </TEXTAREA>

Gio trnh thit k Web

18

Gio trnh Thit k Web : Nguyn Hu Tun

www.cloudmedianews.com

Phn II thit k web s dng ms frontpage


I. CC THAO TC C BN 1. Cc thao tc chnh khi son tho mt trang web To mi mt trang web: Chn chc nng File/New/Page /Normal Page hay chn icon New trn Toolbar. Lu trang web: Chn chc nng File/Save hay chn icon Save trn Toolbar. lu trang web di dng mt tn khc chn chc nng File/Save As Xem trc hin th ca trang web ang thit k: Chn chc nng File/Preview in Browser. Lc ny ca s trnh duyt Internet Explorer (IE) s hin th trang web m chng ta ang son tho. Nn lu trang web trc khi chn chc nng ny. Ca s mn hnh son tho trang web cung cp 3 cch hiu (view) khc nhau v 1 trang web. o Nu bn chn Normal view, bn c th bin tp trang web di dng WYSIWYG. V d bn c th g vn bn vo, thay i mu sc, kch thc ch, b o Nu bn chn HTML view, bn s thy c cc m HTML tng ng vi cch trnh by ca trang web ca bn. V d, nu trong Normal view bn chn vo mt table th trong HTML view, bn s thy cc tag tng ng nh sau: <table border="1" width="100%"> <tr><td width="100%">&nbsp;</td></tr> </table> o Nu bn chn Preview view, tng t vi chc nng Preview in Browser 2. To cc thnh phn ca trang web\ 2.1. Thi gian cp nht (Time stamp) Chn Insert/Date and Time. Chn nh dng ngy thng v thi gian ph hp vi nhu cu ca bn Chn Insert/Horizotal line. t cc thuc tnh cho ng k ngang bng cch double click chut ln n. Sau chn cc thng s v Width, Height, Color, Alignment 2.3. List Chn Format/Bullets and Numbering. Sau khi hp hi thoi xut hin, bn hy chn cc dng bullet v numbering tng ng. thay i cc thuc tnh ca bullet nh mu sc, kiu ch, , ta chn Format/Bullets and Numbering/Style

2.2. ng k ngang (Horizontal line)

Gio trnh thit k Web

19

Gio trnh Thit k Web : Nguyn Hu Tun

www.cloudmedianews.com

Ngoi ra, ta cn c th chn hnh nh thay cho cc kiu bullet thng thng. thay i, ta chn Format/Bullets and Numbering/Picture bullets, ri chn nh dng lm bullet

b nh dng bullets, ta chn Format/Bullets and Numbering/Plain Bullets. Ngi ta thng dng table : o o Hin th cc thng tin c dng dng/ct, v d nh bng thi kha biu, thng tin sn phm, .. Trnh by (layout) cc vn bn(text) v cc nh ha(graphics). Chn Table/Insert Table. Khi hp hi thoi to bng hin ra, bn phi cung cp cc thng tin chi tit cho vic to bng, v d nh s dng, s ct, kch thc, ... o Chn Table/Draw Table. Vi chc nng ny, bn s dng bt v to cc dng, ct

2.4. Tables

to mt bng, ta c th dng mt trong hai cch: o

khng hin (hide) border ca bng, ta click phi chut ln table, chn Table Properties/Border/Sizes bng 0. tch mt cell hay trn nhiu cell li, ta chn Tabe ri chn Split /Merge Cells. thm hoc xa cc cell, ta chn Table ri chn Insert/Delete Cells. Chuyn trang (Page transition): Chn Format/Page Transition Hiu ng ch chuyn ng theo chiu ngang (Marquees): Chn Insert/Component/Marquee. Sau khi hp thoi hin ra, bn g vo dng ch cn chuyn ng v t cc thuc tnh khc nh mu sc, font ch,

2.5. Mt s hiu ng c bit

Thm hiu ng font ch cho cc hyperlink: Chn Format/Background, check vo Enable hyperlink rollover effects. Sau bn c th chn cc mu theo mun.

2.6. Chn nh Chn chc nng Insert/Picture/From File. t thuc tnh v kch thc ca nh, click phi chut ln nh, ri chn Picture Properties. to cc hotspot hyperlink, ta chn hnh v tng ng (hnh ch nht, ellipse, ) trn thanh toolbar pictures. Chn vng trn nh, ri in thng tin ca hyperlink vo 2.7. Chn hyperlink Chn chc nng Insert/Hyperlink. Sau khi hp thoi hin ra, g vo hyperlink tng ng. C 3 dng: o o o a ch Internet, c dng: http:// V d: http:// www.yahoo.com Lin kt ti mt trang trong site, c dng: /th mc/tn tp tin. V d: ../images/shopping.htm Lin kt ngay chnh trong trang, t bng bookmark. 3. nh dng trang Click phi chut ln trang, chn Page Properties.

Gio trnh thit k Web

20

Gio trnh Thit k Web : Nguyn Hu Tun


www.cloudmedianews.com

t mu nn cho trang, chn Background/Colors/Background t nh nn cho trang, chn Background/Formatting/Background picture. t cc thng s v mu sc cho hyperlink, chn Background/Colors/Hyperlink t tiu cho trang chn General/Title.

Gio trnh thit k Web

21

Gio trnh Thit k Web : Nguyn Hu Tun


II. THC HNH

www.cloudmedianews.com

1. To trang web cho nhm.

Khi ng Microsoft Front Page 2000. Son trang web c nhn ca nhm t tn l InfoGroup<n>.htm (v d nhm 1 s ly tn l InfoGroup1.htm). Cc thng tin chnh ca cc thnh vin trong nhm bao gm: H v tn, Cng vic v chc v hin nay, a ch lin lc, in thoi, Fax, Email, Mobile Phone, ... Ngoi ra cc nhm c th b sung cc thng tin khc.

Upload trang web son ln website. Th truy cp trang web ti ln.

2. Tham kho cc site thng tin ca Vit Nam http://vnexpress.net/ http://www.vnn.vn/. http://www.vdc.com.vn http://shopping.yahoo.com http://www.amazon.com http://greetings.yahoo.com http://www.vnn.vn/ecards/ http://www.fpt.vn/Postcard/main.asp http://www.geraldstevens.com/ http://www.1800flowers.com/ http://203.162.5.43/ld2000/ http://www.vietname-business.com/jobnld/ http://www.jobsonline.saigonnet.vn/ To trang web t tn l Links.htm cha cc hyperlink cp trn. B sung thm cc hyperlink v cc phn loi khc m cc anh ch bit. Upload ln website v kim tra li. To trang web HomePage t tn l Default.htm gii thiu v nhm v cc cng vic m nhm ang trin khai. Kt ni hai trang to vo HomePage. Upload ln website v kim tra li. Website v dch v vic lm. Website v dch v nh t (http://www.nhadat.com). Website bo in t (http://vnexpress.net ) 7. To trang HomePage

3. Tham kho cc site bn hng ni ting

4. Tham kho cc site gii tr

5. Tham kho cc site v lao ng vic lm ti VN

6. To trang web cha cc hyperlink dng truy cp nhanh

8. Chn ch thit k website

Gio trnh thit k Web

22

Gio trnh Thit k Web : Nguyn Hu Tun


Website trng hc.

www.cloudmedianews.com

Website bn hng (ca hng, siu th o trn Internet) Website dch v gii tr nh ECards, in hoa, ... Cc ch khc...

Gio trnh thit k Web

23

Gio trnh Thit k Web : Nguyn Hu Tun


III. NG K WEBSITE MIN PH TRN INTERNET

www.cloudmedianews.com

1. Vo a ch http://www.freeservers.com ng k website min ph vi a ch truy cp c dng http://<yourname>.freeservers.com

2. G vo a ch m bn d nh ng k ti yourname. Sau click Go. Mn hnh tip theo s hin ra, bn chn mc cui cng 100% Free Hosting Option v click vo SignUp

Gio trnh thit k Web

24

Gio trnh Thit k Web : Nguyn Hu Tun

www.cloudmedianews.com

3. Sau bn hy in vo cc thng tin lin quan cn thit nh H tn, mt khu, email, Cui cng g vo ARTK chc rng bn ng vi cc qui nh ca FreeServers khi cung cp dch v min ph ny.

4. Nu ng k thnh cng, mn hnh sau s hin ra cung cp cho bn mt s la chn khi xy dng website ca mnh.

Gio trnh thit k Web

25

Gio trnh Thit k Web : Nguyn Hu Tun

www.cloudmedianews.com

Gio trnh thit k Web

26

Gio trnh Thit k Web : Nguyn Hu Tun


IV.THIT K MT S WEBSITE MU

www.cloudmedianews.com

1. Thit k website theo mu sau (http://greetings.yahoo.com)

2. Thit k website theo mu sau (http://www.flowers.com)

Gio trnh thit k Web

27

Gio trnh Thit k Web : Nguyn Hu Tun

www.cloudmedianews.com

3. Thit k website theo mu sau (http://shopping.yahoo.com)

Gio trnh thit k Web

28

Gio trnh Thit k Web : Nguyn Hu Tun

www.cloudmedianews.com

4. Thit k website theo mu sau (http://www.is-edu.hcmuns.edu.vn)

Gio trnh thit k Web

29

Gio trnh Thit k Web : Nguyn Hu Tun

www.cloudmedianews.com

5. Thit k website theo mu sau (http://vnexpress.net)

6. Thit k website theo mu sau (http://www.codeproject.com)

Gio trnh thit k Web

30

Gio trnh Thit k Web : Nguyn Hu Tun

www.cloudmedianews.com

Gio trnh thit k Web

31

Gio trnh Thit k Web : Nguyn Hu Tun

www.cloudmedianews.com

7. Thit k website theo mu sau (http://www.bttvn.com )

tham kho cch thit k cc trang web trn, hy: Ti v my bng cch chn chc nng Save ca IE. Dng MS Front Page m tp tin lu ln Chuyn qua li gia cc mn hnh Normal View v HMTL View bit cch thit k Vi mi trang web xem hy ch cc vn sau: Cch b tr cc bng (table) Cch s dng font ch Cch chn vo cc hnh nh trang tr Cch nh ngha cc thuc tnh nh mu ch, mu nn, ... Phn tnh (khng thay i) mi khi click vo cc hyperlink chuyn qua mt ni dung mi T cc trang web trn, hy t thit k cc trang cho website ca nhm.

Gio trnh thit k Web

32

Gio trnh Thit k Web : Nguyn Hu Tun

www.cloudmedianews.com

Phn I Gii thiu ngn ng Html ........................................................................1 I. Cc th nh cu trc ti liu............................................................ 1 1.1 HTML ............................................................................................................... 1 1.2 HEAD................................................................................................................ 1 1.3 TITLE ............................................................................................................... 1 1.4 BODY................................................................................................................ 2 II. Cc th nh dng khi.........................................................................3 2.1. th P.................................................................................................................. 3 2.2. Cc th nh dng mc H1/H2/H3/H4/H5/H6 ........................................... 3 2.3 Th xung dng BR .......................................................................................... 3 2.4 Th PRE............................................................................................................ 3 III. Cc th nh dng danh sch ........................................................... 4 3.1. Danh sch thng thng.................................................................................. 4 IV. Cc th nh dng k t......................................................................5 4.1. Cc th nh dng in k t .............................................................................. 5 4.2. Cn l vn bn trong trang Web..................................................................... 6 4.3. Cc k t c bit ............................................................................................ 6 4.4. S dng mu sc trong thit k cc trang Web.............................................. 6 4.5. Chn kiu ch cho vn bn ............................................................................. 8 4.6. Khi nim vn bn siu lin kt ...................................................................... 8 4.7. a ch tng i............................................................................................ 10 4.8. Kt ni mailto ................................................................................................ 11 4.9. V mt ng thng nm ngang ................................................................... 11 V. Cc th chn m thanh, hnh nh ...................................................12 5.1. Gii thiu........................................................................................................ 12 5.2. a m thanh vo mt ti liu HTML ......................................................... 13 5.3. Chn mt hnh nh, mt on video vo ti liu HTML ............................. 13 VI. Cc th nh dng bng biu ......................................................... 15 VII. FORM .........................................................................................................16 Gio trnh thit k Web 33

Gio trnh Thit k Web : Nguyn Hu Tun

www.cloudmedianews.com

7.1. HTML Forms................................................................................................. 16 7.2. To Form ....................................................................................................... 16 7.3. To mt danh sch la chn.......................................................................... 17 7.4. To hp son tho vn bn............................................................................ 18 Phn II thit k web s dng ms frontpage .................................................19

Gio trnh thit k Web

34

You might also like