03 WebCourse - HTML Can Ban

7/25/2019 03 WebCourse - HTML Can Ban

1/58

Lp trnh v Thit k Web 1

2007 Khoa Cng ngh thng tin

Khoa CNTT H.KHTN

Bai 3Thit k trng Web HTML Cn bn

L n g ! " # i n h


2/58

Lp trnh v Thit k Web 1 $ %i & ' Thit k trang Web $ (T#L C)n b*n

2007 Khoa C+TT , -(K(T+

+.i /ng

ii thi v3 (T#L

C4 tr56 6a 1 ti 8i (T#L

C96 Tag 6 b*n

C96 Tag /anh :96h

Tag 8i;n kt trang

Tag k< b*ng


3/58


2007 Khoa C+TT , -(K(T+

+.i /ng

ii thi v3 (T#L

C4 tr56 6a 1 ti 8i (T#L

C96 Tag 6 b*n

C96 Tag /anh :96h

Tag 8i;n kt trang

Tag k< b*ng


4/58


2007 Khoa C+TT , -(K(T+

ii thi v3 (T#L

(T#L =(>per Te?t #arkp Langage@ , +gn ngAB9nh /4 :i; v)n b*n

L .t ngn ngA /Dng BE ?F> /Gng .t trang WebH

ChIa 696 thnh phJn Bnh /ng BE b9o 6ho trnh/>t Web bit 696h BE hiEn th .t trang WebH

#.t trang Meb thng thNng gO 6P 2 thnh phJn6hQnh'

$RA 8i 6a trang Meb =v)n b*nS F thanhS hnh *nhHHH@$ C96 th< =tag@ (T#L /Dng BE Bnh /ng t* 696h thI6 696/A 8i tr;n hiEn th tr;n trnh />tH


5/58


2007 Khoa C+TT , -(K(T+

ii thi v3 (T#L $ Trnh />tS trnh :on th*o

Trnh duyt web (Brw!er" Trnh !#n th ($ditr"

%te&d %'T$)*++

,i!u- .tudi /%$T


6/58


2007 Khoa C+TT , -(K(T+

ii thi v3 (T#L $ Th< =Tag@ (T#L

Welcome to HTML

My first HTML document

(iEn th vQ / trong UV
http://localhost/Demohtml/showexampcode2w.asp?tmp=../demohtml/taghtml.htmhttp://localhost/Demohtml/showexampcode2w.asp?tmp=../demohtml/taghtml.htm


7/58


2007 Khoa C+TT , -(K(T+

ii thi v3 (T#L $ Th< =Tag@ (T#L

Dng ch ny c in m

Tag XY *0 -iu Tag BPngY

T;n Tag8n ang tQnh gZi nh

$ !Q /' B[ %o8/S 1[ Uta8i6S [ \aragraph

-i khi khng 6Jn TagBPng
,

C5 ph9p 6hng

T] T;n^th.6^tQnh_`gi9^tr HHY RA 8i cT]Y$ !Q / '$ /iv YThong ai Rien t 1c/ivY

$ /iv i/_dt?tRivd:t>8e_d6o8or'0000CCdYThong ai Rien t 2c/ivY


8/58


2007 Khoa C+TT , -(K(T+

ii thi v3 (T#L $ Th< =Tag@ (T#LHC5 ph9p

M2 HTML Hin th4

bY -F> 8 .t /fng BZ6 in -cbY

h&Y #I6 6hA X ti; B3 & ch&Y

56y -a 78t d9ng :;7

#I6 6hA X ti; B3 &

M2 HTML Hin th4

ont ]CV_`]ria8 ije_`&Y

(e88o

contY

He--

Lu : Gi tr Thuc tnh ca Th nn t trong du nhy n hoc nhy kp Khng phn !i"t ch# HOA$%thng &' (ua cc khongtrngthavccdungt

dng, xung dng
http://localhost/Demohtml/showexampcode2w.asp?tmp=../demohtml/chuhoa.htmhttp://localhost/Demohtml/showexampcode2w.asp?tmp=../demohtml/chuthuong.htmhttp://localhost/Demohtml/showexampcode2w.asp?tmp=../demohtml/khoangtrang.htmhttp://localhost/Demohtml/showexampcode2w.asp?tmp=../demohtml/khoangtrang.htmhttp://localhost/Demohtml/showexampcode2w.asp?tmp=../demohtml/khoangtrang.htmhttp://localhost/Demohtml/showexampcode2w.asp?tmp=../demohtml/khoangtrang.htmhttp://localhost/Demohtml/showexampcode2w.asp?tmp=../demohtml/khoangtrang.htmhttp://localhost/Demohtml/showexampcode2w.asp?tmp=../demohtml/khoangtrang.htmhttp://localhost/Demohtml/showexampcode2w.asp?tmp=../demohtml/khoangtrang.htmhttp://localhost/Demohtml/showexampcode2w.asp?tmp=../demohtml/khoangtrang.htmhttp://localhost/Demohtml/showexampcode2w.asp?tmp=../demohtml/khoangtrang.htmhttp://localhost/Demohtml/showexampcode2w.asp?tmp=../demohtml/khoangtrang.htmhttp://localhost/Demohtml/showexampcode2w.asp?tmp=../demohtml/khoangtrang.htmhttp://localhost/Demohtml/showexampcode2w.asp?tmp=../demohtml/khoangtrang.htmhttp://localhost/Demohtml/showexampcode2w.asp?tmp=../demohtml/khoangtrang.htmhttp://localhost/Demohtml/showexampcode2w.asp?tmp=../demohtml/khoangtrang.htmhttp://localhost/Demohtml/showexampcode2w.asp?tmp=../demohtml/khoangtrang.htmhttp://localhost/Demohtml/showexampcode2w.asp?tmp=../demohtml/khoangtrang.htmhttp://localhost/Demohtml/showexampcode2w.asp?tmp=../demohtml/khoangtrang.htmhttp://localhost/Demohtml/showexampcode2w.asp?tmp=../demohtml/khoangtrang.htmhttp://localhost/Demohtml/showexampcode2w.asp?tmp=../demohtml/khoangtrang.htmhttp://localhost/Demohtml/showexampcode2w.asp?tmp=../demohtml/khoangtrang.htmhttp://localhost/Demohtml/showexampcode2w.asp?tmp=../demohtml/khoangtrang.htmhttp://localhost/Demohtml/showexampcode2w.asp?tmp=../demohtml/khoangtrang.htmhttp://localhost/Demohtml/showexampcode2w.asp?tmp=../demohtml/chuthuong.htmhttp://localhost/Demohtml/showexampcode2w.asp?tmp=../demohtml/chuhoa.htm


9/58


2007 Khoa C+TT , -(K(T+

ii thi v3 (T#L $ Th< =Tag@ (T#LHC5 ph9p

L l' C96 Tag n;n 8Ong nha t>t Bmi


10/58


2007 Khoa C+TT , -(K(T+

ii thi v3 (T#L $ Th< =Tag@ (T#LH!Q /

Welcome to HTML


11/58


2007 Khoa C+TT , -(K(T+

+.i /ng

ii thi v3 (T#L

C4 tr56 6a 1 ti 8i (T#L

C96 Tag 6 b*n

C96 Tag /anh :96h

Tag 8i;n kt trang

Tag k< b*ng


12/58


2007 Khoa C+TT , -(K(T+

C4 tr56 1 ti 8i (T#L

Bt u vKt thcca trang

HT!

"hn utrang HT!

#$% dungtrang HT!

T%&u '

#$% dung (#$% dung )

#$% dung *


13/58


2007 Khoa C+TT , -(K(T+

C4 tr56 1 ti 8i (T#L

ht8Ycht8Y '-nh ngh"a ph vi 6a v)n b*n (T#L

hea/Ychea/Y '-nh ngh"a 696 t* v3 trang (T#LHThng tin trong tag n> khng BZ6 hiEn th tr;n trang Meb

tit8eYctit8eY ' # t* ti; B3 trang Meb

+ 96 Bnh vDng thFn 6a trang MebSni 6hIa 696 thng tin


14/58


2007 Khoa C+TT , -(K(T+

C4 tr56 1 ti 8i (T#L $ !Q /

Welcome to HTML

My first HTML document


15/58


2007 Khoa C+TT , -(K(T+

+.i /ng

ii thi v3 (T#L

C4 tr56 6a 1 ti 8i (T#L

C96 Tag 6 b*n

C96 Tag /anh :96h

Tag 8i;n kt trang

Tag k< b*ng


16/58


2007 Khoa C+TT , -(K(T+

C96 Tag C b*n

C96 Tag ? 8l v)n b*n

Tag hnh *nh

Tag F thanh


17/58


2007 Khoa C+TT , -(K(T+

C96 tag ? 8l v)n b*n $ KhmiS 6hi v)n b*n

C96 th< Bnh /ng khmi v)n b*n

$ Ti; B3 =(ea/ing@ ', , , , ,

$-on v)n b*n =\aragraph@'

$ Ranh :96h =Li:t Ute:@'$-Nng k< ngang =(orijonta8 q8e:@'

C96 th< Bnh /ng 6hi v)n b*n

$-nh /ng 6hA ', , v

$ To :i; 8i;n kt '

$ mng /fng '


18/58


2007 Khoa C+TT , -(K(T+

C96 tag ? 8l v)n b*n $ !Q / v3 (ea/ing

HEADING

Introduction to HTML

Introduction to HTML & H'

Introduction to HTML & H(

Introduction to HTML & H3

Introduction to HTML & H)

Introduction to HTML & H*

Introduction to HTML & H+
http://localhost/Demohtml/showexampcode2w.asp?tmp=../demohtml/heading.htmhttp://localhost/Demohtml/showexampcode2w.asp?tmp=../demohtml/heading.htm


19/58


2007 Khoa C+TT , -(K(T+

C96 tag ? 8l v)n b*n $ !Q / v3 \aragraph

PARAGRAPH-


20/58


2007 Khoa C+TT , -(K(T+

C96 tag ? 8l v)n b*n $ !Q / v3 \aragraph

HORIZONTAL RULES


21/58


2007 Khoa C+TT , -(K(T+

C96 tag ? 8l v)n b*n $ !Q / tag -nh /ng 6hA

-nh /ng

Thi: te?t i: bo8/

Thi: te?t i: :trong

Thi: te?t i: big

Thi: te?t i: epha:ije/

Thi: te?t i: ita8i6

Thi: te?t i: :a88Thi: te?t 6ontain: a2

Thi: te?t 6ontain: ?2_ a ? a

L t h Thit k W b 1 %i & Thit k t W b (T#L C) b*
http://localhost/Demohtml/showexampcode2w.asp?tmp=../demohtml/dinhdang.htmhttp://localhost/Demohtml/showexampcode2w.asp?tmp=../demohtml/dinhdang.htm


22/58


2007 Khoa C+TT , -(K(T+

C96 tag ? 8l v)n b*n $ !Q / tag -nh /ng 6hA

-nh /ngCopter 6ien6e:

Copter 6ien6e:

Copter 6ien6e:

Copter 6ien6e:

Copter 6ien6e:

Copter 6ien6e:

Copter 6ien6e:

Copter 6ien6e:

Copter 6ien6e:

Copter 6ien6e:

L t h Thit k W b 1 %i & Thit k t W b (T#L C) b*
http://localhost/Demohtml/showexampcode2w.asp?tmp=../demohtml/dinhdang2.htmhttp://localhost/Demohtml/showexampcode2w.asp?tmp=../demohtml/dinhdang2.htm


23/58


2007 Khoa C+TT , -(K(T+

C96 tag ? 8l v)n b*n $ WUW vi tag preY

(iEn th B5ng /ng v)n b*n Bs :on th*o =kho*ngtrngS ?mng /fngS tagS@

,? d@A

%an 6o the ?ong /ong

va 6a6h khoang trang thoai ai

Lp trnh Thit k Web 1 %i & Thit k trang Web (T#L C)n b*n
http://localhost/Demohtml/showexampcode2w.asp?tmp=../demohtml/tegpre.htmhttp://localhost/Demohtml/showexampcode2w.asp?tmp=../demohtml/tegpre.htm


24/58


2007 Khoa C+TT , -(K(T+

C96 tag ? 8l v)n b*n $ Kl tG Bu6 bit

L :ao hiEn th 696 kl hi Bu6 bit

R4 S YS w

R4 nh9> kxp y

C96 kl tG Bu6 bit ' z {

Lp trnh v Thit k Web 1 %i & ' Thit k trang Web (T#L C)n b*n


25/58


2007 Khoa C+TT , -(K(T+

C96 tag ? 8l v)n b*n $ Ranh :96h Kl tG Bu6 bit

e!u-t *e!=ri&tin $ntity %7e $ntity %u7ber

d |otation ark w|ot} w&~}

w aper:an/ wap} w&}

8e::,than w8t} w0}

Y greater,than wgt} w2}

-E hin th BZ6th s (T#L tng Ing 8 '

Khoa hoa t nhienY dKhoa ho6 t nhiend

w8t}Khoa hoa t nhienwgt}wnb:p}wnb:p}wnb:p}wnb:p}w|ot}Khoa ho6 t nhienw|ot}



26/58


2007 Khoa C+TT , -(K(T+

Tag hnh *nh

igY ' Khng 6P th< BPng

C96 th.6 tQnh 6a tag igY'$ qC ' -Nng /n Bn i8e hnh *nh

$]LT ' Ch5 thQ6h 6ho hnh *nh$ \o:ition' TopS %ottoS #i//8e

$ %or/er ' -. /> nxt vi3n |anh *nh =/ea8t_0@

-ut *nh n3n 6ho trang Meb

$ /ng th< bo/> %a6kgron/_`Uage \athY



27/58


2007 Khoa C+TT , -(K(T+

Tag F thanh

bg:on/Y ' Khng 6P tag BPng

Th.6 tQnh 6a tag bg:on/Y$ qC ' -Nng /n Bn i8e F thanh

$ Loop ' m 8Jn 8up =bng ,1 ' Lup v hn@$ bg:on/Y ThNng But trong tag hea/Y 6a trang MebH

!Q /' %+R :r6_`batanHi/ L\_`1Y



28/58


2007 Khoa C+TT , -(K(T+

+.i /ng

ii thi v3 (T#L

C4 tr56 6a 1 ti 8i (T#L

C96 Tag 6 b*n

C96 Tag /anh :96h

Tag 8i;n kt trang

Tag k< b*ng



29/58


2007 Khoa C+TT , -(K(T+

C96 tag Ranh :96h

iu dnh !D=h ThE hFn tG trng *.

Ranh :96h 6P thI tG

Ranh :96h khng 6P thI tG

Ranh :96h tG Bnh ngh"a ,



30/58


2007 Khoa C+TT , -(K(T+

C96 tag Ranh :96h $ Ranh :96h 6P thI tG



31/58


2007 Khoa C+TT , -(K(T+

C96 tag Ranh :96h $ Ranh :96h 6P thI tG



32/58


2007 Khoa C+TT , -(K(T+

C96 tag Ranh :96h $ Ranh :96h khng 6P thI tG



33/58


2007 Khoa C+TT , -(K(T+

C96 tag Ranh :96h $ Ranh :96h tG Bnh ngh"a



34/58


2007 Khoa C+TT , -(K(T+

+.i /ng

ii thi v3 (T#L

C4 tr56 6a 1 ti 8i (T#L

C96 Tag 6 b*n

C96 Tag /anh :96h

Tag 8i;n kt trang

Tag k< b*ng



35/58

p g

2007 Khoa C+TT , -(K(T+

Tag 8i;n kt trang , qL

proto6o8'cc:ite a//re::c/ire6tor>ci8enae

C96 /ng Ba 6h (TT\'

THA http'ccserverc

,? d@A http'ccMMMH>ahooH6oc

THIA http'ccservercfile

,? d@A http'ccgae:H>ahooH6ocin/e?Hphp

TH3A http'ccservercdirectoryc

,? d@A http'ccgae:H>ahooH6ocgae:c

THJA http'ccservercdirectorycfile

,? d@A http'ccgae:H>ahooH6oc/oMn8oa/c Roinoe:He?e



36/58

p g

2007 Khoa C+TT , -(K(T+

Tag 8i;n kt trang , qL

THKA http'cc:erverc/ire6tor>ci8earker

,? d@ A http'ccgae:H>ahooH6ocin/e?Hphp \jj8e

THA http'ccserver/directory/file?parameters

,? d@ A http'ccMMMHgoog8eH6oHvnc:ear6hh8_viw|_Tea6hweta_

THA http'cc:erver'portc/ire6tor>ci8e

,? d@ A http'ccMMMHi6ro:otH6o'00cpro/6t:cgreeting:Hht8



37/58

p g

2007 Khoa C+TT , -(K(T+

Tag 8i;n kt trang $ Tag aY =an6hor@

C5 ph9p ' Linke/ 6ontent

Th.6 tQnh target 6a tag aY$ nae' t*i trang Meb vo rae 6P t;n +]#V

$ ^b8ank' t*i trang Meb vo 6a : i$ ^parent' t*i trang Meb vo 6a : 6ha 6a nP

$ ^:e8' t*i trang Meb vo 6hQnh 6a : hin hnh

$ ^top' t*i trang Meb vo 6a :m 6ao nh4t

!Q / '



38/58

p g

2007 Khoa C+TT , -(K(T+

Tag 8i;n kt trang $ \hFn 8oi 8i;n kt

\hFn 8oi '$ Li;n kt ngoi =e?terna8 8ink@

$ Li;n kt n.i =interna8 8ink@

$ Li;n kt eai8 =eai8 8ink@



39/58

g

2007 Khoa C+TT , -(K(T+

Tag 8i;n kt trang $ Li;n kt ngoi =V?terna8 Link@

,,,,,,,,,,,,,,,,,,,,,

B% h-c ),,,,,,,,,,,,,,

Trang h%.n t%

ba%hoc(0htm

,,,,,,,,,,,,,,

,,,,,,,,,,,,,,,,,,,,,,,,,,,,

Trang c1 2a ch345c 2nh t6 78!

ba%hoc)0htm

9l%c:chu$t

Te?t Bi /in



40/58

2007 Khoa C+TT , -(K(T+

Tag 8i;n kt trang $ Li;n kt n.i =Unterna8 Link@

!i tri bat /a Te?t Bi /in

,,,,,,,,,,,,,,Te4t % d%.n,,,,,,,

,,,,,,,,,,,,,,,,,,,,,;% tr% bat dau0,abcdegh,000=()*?@A,0,,,,,,,

#$%dungtrang :h%chal%&n:t

0,,,,,,,0,,,,,,,Te4t % d%.n,,,,,,,,,,,,,,,,,,,,,

,,,,,,,;% tr% bat dau0,abcdegh,000=()*?@A,0,,,,,,,0,,,,,,,0,,,,,,,

0,,,,,,,0,,,,,,,

#$%dungtrang :h%bCml%&n:t

9l%c:chu$t



41/58

2007 Khoa C+TT , -(K(T+

M1C'.'NT 'OTL'' IPP

Tag 8i;n kt trang $ Li;n kt Vai8

,,,,,,,,,,,,,,,,,,,,,!%&n h. Ddm%n,,,,,,,

,,,,,,,

9l%c:chu$t

:iAn hB8$min



42/58

2007 Khoa C+TT , -(K(T+

Tag 8i;n kt trang $ \hFn 8oi Ba 6h qL

-a 6h qL phFn 8 2 8oi '$-a 6h t>t Bmi ' L v trQ t>t Bmi :o vi #ng Unternet

$-a 6h tng Bmi ' L v trQ tng Bmi :o vi trang Mebhin hnh Bang 6hI 8i;n ktH

Linke/ 6ontent

Q hiu R nghSc TrX v3 th 6 gm6 6a Meb:ite

Hc Th 6 hin ti 6a trang Meb : /ng 8ink =u6 Bnh@

HHc a> ra th 6 6ha c Bi ngZ6 8i 1 64p th 6

#.t :m kl hi BNng /n Bu6 bit'



43/58

2007 Khoa C+TT , -(K(T+

!Q /

!le A "# l!n$ %&n !le B' v() *r+n, !leA "# HTL ele.en*

l!3n $&* %&n B

,tt01//'(244'/demo/T,u muc '/file B,tmURL =

/demo/T,u muc '/file B,tm

5 '(244'/demo

T,u muc '/file B,tm

/T,u muc '/file B,tm



44/58

2007 Khoa C+TT , -(K(T+

!Q /

!le B "# l!n$ %&n !le C' v() *r+n, !leB "# HTL ele.en*

l!3n $&* %&n C

,tt01//'(244'/demo/T,u muc '/

T,u muc '6'/file !,tm

URL =

/demo/T,u muc '/T,u muc '6'/file !,tm

5 '(244'/demo

T,u muc '6'/file !,tm

/T,u muc '6'/file !,tm



45/58

2007 Khoa C+TT , -(K(T+

!Q /

!le C "# l!n$ %&n !le D' v() *r+n, !leD "# HTL ele.en*

l!3n $&* %&n D

,tt01//'(244'/demo/T,u muc '/

T,u muc '6(/file D,tm

URL =

/demo/T,u muc '/T,u muc '6(/file D,tm

5 '(244'/demo

/T,u muc '6(/file D,tm

//T,u muc '6(/file D,tm



46/58

2007 Khoa C+TT , -(K(T+

!Q /

!le D "# l!n$ %&n !le 4' v() *r+n, !le 4"# HTL ele.en*

l!3n $&* %&n 4

,tt01//'(244'/demo/T,u muc (/file 7,tm

URL =

/demo/T,u muc (/file 7,tm

5 '(244'/demo

//T,u muc (/file 7,tm

///T,u muc (/file 7,tm



47/58

2007 Khoa C+TT , -(K(T+

!Q /

!le 4 "# l!n$ %&n !le E' v() *r+n, !le 4"# HTL ele.en*

l!3n $&* %&n E

,tt01//'(244'/demo/T,u muc '/ T,u muc

'6(/T,u muc '6(6'/file E,tm

URL =

/demo/T,u muc '/T,u muc '6(/

T,u muc '6(6'/file E,tm

5 '(244'/demo

/T,u muc ' /T,u muc '6(/T,u muc'6(6'/

file E,tm



48/58

2007 Khoa C+TT , -(K(T+

!Q /

!le E "# l!n$ %&n !le A 5 v6 *r7 89"%6n0' v() *r+n, !le A "# HTLele.en*

l!3n $&* %&n A *a! v!*r! B

URL =

5 '(244'/demo

///file A,tm50ositionB



49/58

2007 Khoa C+TT , -(K(T+

%i tp



50/58

2007 Khoa C+TT , -(K(T+

+.i /ng

ii thi v3 (T#L

C4 tr56 6a 1 ti 8i (T#L

C96 Tag 6 b*n

C96 Tag /anh :96h Tag 8i;n kt trang

Tag k< b*ng



51/58

2007 Khoa C+TT , -(K(T+

Tag k< b*ng , Tab8e



52/58

2007 Khoa C+TT , -(K(T+

Tag k< b*ng $ Tab8e =tt@



53/58

2007 Khoa C+TT , -(K(T+

Tag k< b*ng $ Tab8e =tt@



54/58

2007 Khoa C+TT , -(K(T+



55/58

2007 Khoa C+TT , -(K(T+



56/58

2007 Khoa C+TT , -(K(T+



57/58

2007 Khoa C+TT , -(K(T+

T&-et/&ng T&right/&ng

btt7-et/&ng btt7right/&ng

T&/&ng

Btt7/&ng

-et/&ng right/&ng



58/58

Date post:	27-Feb-2018
Category:	Documents
Upload:	dreamhigh-my
View:	233 times
Download:	0 times

03 WebCourse - HTML Can Ban

Documents