Bài giảng Thiết kế Web - Chương 3: Ngôn ngữ HTML

• Tổng quan về HTML

• Cấu trúc tổng quát trang HTML

• Các Tag HTML thông dụng

• Các thẻ ñịnh dạng danh sách

pdf45 trang | Chuyên mục: HTML | Chia sẻ: dkS00TYs | Lượt xem: 2011 | Lượt tải: 3download
Tóm tắt nội dung Bài giảng Thiết kế Web - Chương 3: Ngôn ngữ HTML, để xem tài liệu hoàn chỉnh bạn click vào nút "TẢI VỀ" ở trên
 CutrúctngquáttrangHTML
 • CácTagHTMLthôngdng
 • Cácthñnhdngdanhsách
Thitkweb KhoaCNTT 9
 CácTagHTMLthôngdngCácTagHTMLthôngdng
  CácTagxlývănbnCácTagxlývănbn
 TaghìnhnhTaghìnhnh
 TagâmthanhTagâmthanh
Thitkweb KhoaCNTT 10
 CáctagxlývănbnCáctagxlývănbn
 Cácthñnhdngkhivănbn
 – Tiêuñ(Heading): ,,,,,
 –ðonvănbn(Paragraph): 
 – Danhsách(ListItems): 
 –ðưngkngang(HorizontalRules): 
  Cácthñnhdngchuivănbn
 – ðnhdngch: ,, và 
 – Tosiêuliênkt: 
 – Xungdòng: 
Thitkweb KhoaCNTT 11
 CáctagxlývănbnCáctagxlývănbn  HeadingHeading
 Víd:
 HTMLBasicTags 
 Thisisaheadingh1 
 Thisisaheadingh2 
 Thisisaheadingh3 
 Thisisaheadingh4 
 Thisisaheadingh5 
 Thisisaheadingh6 
Thitkweb KhoaCNTT 12
 Cáctagxlývănbn(tt)Cáctagxlývănbn(tt)
 ParagraphParagraph 
 Thisisaparagraph
 Thisisanotherparagraph
 Thisisaparagraphwithattribute
 LineBreaksLineBreaks
 Thnàykhôngcóthktthúctươngng().
 ThưngdùngñtíchhpviXHTML.
 VD: Thisisaparagraphwithlinebreaks
 Thghichú(Comment)Thghichú(Comment)
Thitkweb KhoaCNTT 13
 DefinesahorizontalruleDefinesahorizontalrule
 HR…>
 – Thuctinh:
 •align:Canhhàngñưngkngangsovitrangweb
 •width:Chiudàiñưngkngang
 •size:Brngcañưngkngang
 •noshade:Khôngcóbóng
 VD:
Thitkweb KhoaCNTT 14
 C¸cC¸c thÎthÎ ®Þnh®Þnh d¹ngd¹ng kýký tùtù 
 ... Inch  ®Ëm
 ...
 ... Inch  nghiªng
 ...
 ... Inch  g¹chch©n
 ... Inch  bÞg¹chngang.
 ...
Thitkweb KhoaCNTT 15
 C¸cC¸c thÎthÎ ®Þnh®Þnh d¹ngd¹ng kýký tùtù
 ... Inch lnhơnbìnhthưng
 ... Inch nhhơnbìnhthưng
 ... Ch s trên (SuperScript)
 ... chØ sè d−íi(SubScript)
 ñÞnhnghÜakÝchth−ícfontch  ®−îcsö
 dôngcho®ÕnhÕtvănb n.ThÎ nychØ
 cãmétthamsè size.ThÎ 
 kh«ngcãthÎ kÕtthóc.
 ... Chnkiuch hinth.Có haithams
 sizevà color.Kíchthưccó th nhngiá
 tr1ñn7.
Thitkweb KhoaCNTT 16
 VDVD C¸cC¸c thÎthÎ ®Þnh®Þnh d¹ngd¹ng kýký tùtù
 Thistextisbold 
 Thistextisstrong 
 Thistextisbig 
 Thistextisemphasized 
 Thistextisitalic 
 Thistextissmall 
 Thistextcontainsa 2
 Thistextcontainsx 2 =axa
 XemktquDisplay
Thitkweb KhoaCNTT 17
 VDVD C¸cC¸c thÎthÎ ®Þnh®Þnh d¹ngd¹ng kýký tùtù
Thitkweb KhoaCNTT 18
 C¸cC¸c thÎthÎ ®Þnh®Þnh d¹ngd¹ng kýký tùtù
 C¨nlÒv¨nb¶ntrongtrangWeb
 CórtnhiuTagsdngbincănl align như HR, P, 
 IMG,…Cácgiátrca align nhưsau:
 LEFT Cănl trái
 CENTER Giatrang
 RIGHT Cănl phi
 NgoàiracòncóTag center:
 V¨nb¶nsÏ ®−îcc¨ngi÷atrang 
Thitkweb KhoaCNTT 19
 C¸cC¸c thÎthÎ ®Þnh®Þnh d¹ngd¹ng kýký tùtù
 C¸ckýtù®ÆcbiÖt
 Kýt Môt Tên Mã
 “ ” Khongtrng(nonbreaking    
 space)
 © Bnquyn © ©
 ® Thươnghiuñãñưcñăngký ® ®
 ™ Thươnghiu ™ ™
 € ðngEuro € €
 £ BngAnh &puond; £
 < Kýtnhhơn(lessthan) < <
 > Kýtlnhơn(greaterthan) > >
 & Kýhiu&(ampersand) & &
Thitkweb KhoaCNTT 20
 ððnhdngvănbntrưcnhdngvănbntrưc
 WYSIWYG vi tag 
 Hinthñúngdngvănbnñãsontho
 (khong trng,xungdòng,tag,…)
 VD:
 Thistextis
 inafixedpitch
 font,anditpreserves
 both spacesand
 linebreaks
Thitkweb KhoaCNTT 21
 VDVD C¸cC¸c thÎthÎ ®Þnh®Þnh d¹ngd¹ng kýký tùtù
Viduphan3.5
NoidungtrongP
canletrai
NoidungtrongP
canlephai
Noidungtrong
Pcanogiua
NoidungtrongCENTER
 Copyright©MR.Bean
 Copyright©MR.Bean
Thitkweb KhoaCNTT 22
 SdngmàuscSdngmàusc
 Giátrmàuñưcxácñnh:
 #RR GG BB
 RR :Màuñ
 GG :Màuxanhlácây
 BB :Màuxanhnưcbin
 Giátrmàutronghthplcphân0>F
 Víd:
 #0000FF
 #FF0000
 #00FF00
 #112233
Thitkweb KhoaCNTT 23
 SdngmàuscSdngmàusc
 Màusc Giátr TêntingAnh
 ñ #FF0000 RED
 ñsm #8B0000 DARKRED
 Xanhlácây #00FF00 GREEN
 #90EE90
 Xanhnht LIGHTGREEN
 #0000FF BLUE
 Xanhnưcbin
 #FFFF00 YELLOW
 Vàng #FFFFE0 LIGHTYELLOW
 Vàngnht #FFFFFF WHITE
 Trng #000000 BLACK
 ðen #808080 GRAY
 Xám #A52A2A BROWN
 Nâu #FF00FF MAGENTA
 #EE82EE VIOLET
 Tím
 #FFC0CB PINK
 Tímnht
 #FFA500 ORANGE
 Hng #000080 NAVY
 Dacam #4169E1 ROYALBLUE
 Màuñngphchiquân #7FFFD4 AQUAMARINE
Thitkweb KhoaCNTT 24
 SdngmàuscSdngmàusc
Thitkweb KhoaCNTT 25
 VídvmàuVídvmàu
 Màuñbngs
 Màuñbngch
 MauGREEN
 MauBLUE
 Mau
 "112233"
Thitkweb KhoaCNTT 26
 TaghìnhnhTaghìnhnh
  : Khôngcóthñóng
 Cácthuctinhchínhcatag:
 – SRC :ðưngdnñnfilehìnhnh
 – ALT :Chúthichchohìnhnh
 – Position :Top,Bottom,Middle
 – Border :ðdàynétvinquanhnh(default=0)
 ðtnhnnchotrangweb
 – Sdungth
Thitkweb KhoaCNTT 27
 VDTaghìnhnhVDTaghìnhnh
 UntitledDocument
 VídTaghìnhnh
Thitkweb KhoaCNTT 28
 TagâmthanhTagâmthanh
  : Khôngcótagñóng
 Thuctinhcatag 
 – SRC:ðưngdnñnfileâmthanh
 – Loop:Slnlp(bng1:Lpvôhn)
 –Thưngñttrongtagcatrang
 web.
 Víd:
Thitkweb KhoaCNTT 29
 • TngquanvHTML
 • CutrúctngquáttrangHTML
 • CácTagHTMLthôngdng
 • Cácthñnhdngdanhsách
Thitkweb KhoaCNTT 30
 C¸cC¸c thÎthÎ ®Þnh®Þnh d¹ngd¹ng danhdanh s¸chs¸ch 
 CãCã 44 kiÓukiÓu danhdanh s¸ch:s¸ch:
 • Danhs¸chkh«ngs¾pxÕp
 • Danhs¸chcãs¾pxÕp 
 • Danhs¸chthùc®¬n Môcthø nhÊt
 • Danhs¸chph©ncÊp Môcthø hai
 Cóph¸p:
 
 Mucthunhat
 Mucthuhai
 Mucthuba
Thitkweb KhoaCNTT 31
 C¸cC¸c thÎthÎ ®Þnh®Þnh d¹ngd¹ng danhdanh s¸chs¸ch
 mcthI
 McthII
 Danhsáchcóñánh
 s
 I
 II
 DanhsachMenu
 Menu1
 Menu2
 DanhsachDir
 Dir1
 Dir2
Thitkweb KhoaCNTT 32
 MtsththôngdngMtsththôngdng
 ThBODY
 <BODY
 LINK = COLOR
 ALINK = COLOR
 VLINK = COLOR
 BACKGROUND = URL
 BGCOLOR = COLOR
 TEXT = COLOR
 TOPMARGIN = PIXELS
 RIGHTMARGIN = PIXELS
 LEFTMARGIN = PIXELS
 >
 NidungtrongBODY
Thitkweb KhoaCNTT 33
 VídthBODYVídthBODY
 <bodylink="blue"alink="magenta"
 vlink="darkred"
 bgcolor="#90EE90"text="red">
 TrongthBODY
 Mtcái
 LINKchưam 
 MtcáiLINK
 ñãtưngm
 MtcáiLINK
 vam
Thitkweb KhoaCNTT 34
 MtsththôngdngMtsththôngdng
 ThHR <HR
 ALIGN =LEFT/CENTER/
 RIGHT
 COLOR = color
 NOSHADE
 SIZE = n
 WIDTH = width
 >
Chnkiuchchovănbn <FONT
ThFONT FACE = font-name
 COLOR = color
 SIZE = n >
 ...
 Thitkweb KhoaCNTT 35
 MtsththôngdngMtsththôngdng
 ðnhnnnhcchotrang Thêmhìnhnh ThIMG
 ThBGSOUND
 <IMG
ðtdưinhưngtrên ALIGN =aligntype
<BGSOUND ALT = text
SRC = url BORDER = n
LOOP =n SRC = url
... WIDTH = width
> HEIGHT = height
 HSPACE =h space
 VSPACE = vspace
 >
 Aligntype:TOP,MIDDLE,BOTTOM,LEFT,RIGHT
Thitkweb KhoaCNTT 36
 MtsththôngdngMtsththôngdng
 TrongphnBODY
 <hralign="center"color="blue"size="2"
 with="200">
 ðnhdng
 fontc4vàmàuNAVY
 <img border="1"
 src="images/banner_03.jpg"width="145"
 height="97"align="left"alt="Hìnhnưc
 VN">
Thitkweb KhoaCNTT 37
 MtsththôngdngMtsththôngdng
 Tobngth
 TABLE BtríTABLE
 TABLE
 ALIGN =aligntype
 BORDER =n ……
 BORDERCOLOR
 =color ……
 BACKGROUND =url
 BGCOLOR =color 
 CELLPADDING =int
 WITH = int %
 >
 Tiªu®Òcñab¶ngbiÓu
Thitkweb KhoaCNTT 38
 MtsththôngdngMtsththôngdng
<table align="center"border="1"
bordercolor="blue"width="80%">
Tiêuñbng
 Ô(1,1)
  Ô(1,2)
 <td align="center" colspan="2" 
bgcolor="#90FF90"> COLSPAN=
2 bgcolor=90FF90
Thitkweb KhoaCNTT 39
 MtsththôngdngMtsththôngdng
 Tosiêuliênkt <A
 th A HREF = url
 NAME = name
 TABINDEX = n
 TITLE = title
 TARGET = _blank / _self
 >
 Siêuvănbn
 Linkñnmtñonchñnhtrongtranghinhành
Thitkweb KhoaCNTT 40
 Linkñnmtñonchñnhtrongtranghinhành
Chươngtrìnhhcdchvmng
 FTPFileTransferProtocol
 SdngOutlookExpress
 SdngFrontpage
1.FTP
 NidunghcphnFTPdài2trang
2.Email
 Nidungdài3trang
3.Frontpage
 Nidungdai5trang
 Thitkweb KhoaCNTT 41
 Mtsththôngdng
 Toktni 
 mailto Michititxinliênh vichúngtôiqua
 <A
 href=”mailto:webmaster@vnuh.edu.vn” >
 WEBMASTER
 
Thitkweb KhoaCNTT 42
 ThMARQUEEThMARQUEE
  Dùngñtohiungchchytrênmànhình
 trìnhduyt
  Cúpháp
 <MARQUEE
 BEHAVIOR=ALTERNATE|SCROLL|SLIDE
 DIRECTION=DOWN|LEFT|RIGHT|UP
 LOOP=string
 SCROLLAMOUNT=long
 SCROLLDELAY=long> Dòngchcnchy
Thitkweb KhoaCNTT 43
 VídthMarquee
 <MARQUEE
 bgcolor="#009999"
 width="550"
 loop="1"
 scrollamount="15"
 scrolldelay="100"
 behavior=scroll
 direction=left
 >Chàomngcácbnñãñnvitrangwebcatôi
Thitkweb KhoaCNTT 44
 Tñngrefresh/redirecttrangwebTñngrefresh/redirecttrangweb
  Tñngchuynhưngtrangweb sang
 trangwebkhác (URL)saumtkhong
 thigiant(tínhtheogiây)
  Cúpháp
 <METAHTTPEQUIV=“refresh”
 CONTENT=“t”;URL=“URL”>
Thitkweb KhoaCNTT 45

File đính kèm:

  • pdfBài giảng thiết kế web_Chương 3_Ngôn ngữ HTML.pdf
Tài liệu liên quan