Ch.13 HTML????

1
Ch.13 HTML????
2
?????

• HTML??? Hyper Text Markup Language?
• ?? 1991 ????
• ?????????????
• ???????????
• ???????????????????
• ??? HTML ???? HTML5?

3
HTML???

• ?? HTML ??????????????
• ?????????
• Microsoft Internet Explorer
• Mozilla Firefox
• Google Chrome
• Apple Safari
• Opera

4
HTML ??

• ?????????????,?????,?????????
• lthtmlgt..lt/htmlgt
• ltbodygt.lt/bodygt
• ??????? HTML ???????????????????????

5
HTML ????

• ?? HTML ????
• lt!DOCTYPE HTML PUBLIC gt
• lthtmlgt
• ltheadgt lt/headgt
• ltbodygt lt/bodygt
• lt/htmlgt

6
HTML ???????

• ??????? lthtmlgt,???lt/htmlgt?
• ???????,??????????????????????,?????ltbodygt...lt/bod
  ygt??
• ltheadgtlt/headgt ???????????,????????

7
HTML ?????

• ???????????????
• ltbody backgroundbg.jpggt.lt/bodygt
• background ? ltbodygt ?????,??????????????,? bg.jpg
  ????????????

8
HTML ??

• ?????
• ????????
• ????
• ????
• ????
• ????
• ????
• Meta??
• ????

9
HTML ????
lt!DOCTYPEgt  ???????????HTML??
lthtmlgt ?????????lthtmlgt???,lthtmlgt????ltheadgt?ltbodygt???
ltbodygt ???????,
lth1gt to lth6gt heading,??16
ltpgt paragraph,????,????????ltbrgt?
ltbr /gt break,????
lthr /gt horizontal,??????
lt!--...--gt ???
10
HTML ?????
ltbgt bold,??????
ltbiggt ??????
ltcentergt ????
ltcitegt citation,??????
ltcodegt ????????
ltemgt emphasis, ????????
ltfontgt ????,??,????
ltigt ?????
ltpregt preformatted,??????????
ltsmallgt ?????
ltstrikegt ??????
ltstronggt ?????????
ltsubgt ??????
ltsupgt ??????
ltugt ???????
11
HTML ????????
ltagt anchor,?????
ltimg /gt image,????
ltmapgt ????
ltarea /gt ????????
12
HTML ????
lttablegt ????
ltcaptiongt ??????
ltthgt table header,????????
lttrgt table row,?????
lttdgt table data,???????????
lttheadgt table header,????header??
lttbodygt table body,????body?
lttfootgt table footer,????footer??
13
HTML ????
ltulgt ???????
ltolgt ???????
ltligt ??????
ltdlgt ????????
ltdtgt ??????
ltddgt ??????
14
HTML ????
ltformgt ????????????
ltinput /gt ????
lttextareagt ?????
ltbuttongt ????
ltselectgt ???????
ltoptgroupgt ????????
ltoptiongt ??????????
ltlabelgt ???????
15
HTML ????
ltframe /gt ????
ltframesetgt ?????
ltiframegt ??????
16
HTML ???Meta??
????
ltstylegt ??????CSS??
ltdivgt division,????,????????????
ltspangt ????div,??span?????
Meta ??
lttitlegt ??????
ltmetagt ????meta??,????
17
HTML ????
ltscriptgt ??????Javascript???
ltappletgt ?????Java???
ltobjectgt ??????
ltparam /gt ?????????
18
HTML ????-1

• ???????????????????,? Windows ????
• ?? W3School TryIt Editor ??,???????

19
HTML????

• ???????
• (????) http//www.w3schools.com/tags/
• (????) http//www.w3school.com.cn/tags/
• ???????HTML???

20
HTML ????-2

• ????????,?????? Word ?????????????
• ???????? html ? htm ??????
• ???????????????????????,?????????,???????????????

21
HTML ????-3

• ??????????,??????? HTML ?? Javascript ????
• ??????????
• Microsoft FrontPage
• Namo WebEditor
• Adobe Dreamweaver
• Microsoft Expression Web
• Kompozer ???????????

22
HTML Kompozer
23
13-2 HTML ????

• ? 2010 ? 4 ? 21 ?????????????

24
TKU????????
25
??????(1) table??
t1-11.jpg (1,1) t1-12.jpg (1,2) t1-12.jpg (1,2)
t1-11.jpg (1,1) t1-21.jpg (2,2) t1-22.jpg(2,3)
t1-11.jpg (1,1) t1-31.jpg (3,2) t1-31.jpg (3,2)
26
??????(1) HTML ?

• lthtmlgt
• ltheadgt
• ltmeta http-equiv"Content-Type"
  content"text/html charsetutf-8"gt
• lttitlegtTKU Website Structurelt/titlegt
• lt/headgt
• ltbodygt
• lttable cellspacing0 cellpadding0gt
• lttrgt
• lttd rowspan3gt ltimg src"t1-11.jpg"gtlt/tdgt
• lttd colspan2gt ltimg src"t1-12.jpg"gtlt/tdgt
• lt/trgt
• lttrgt
• lttdgt ltimg src"t1-21.jpg"gt lt/tdgt
• lttdgt ltimg src"t1-22.jpg"gt lt/tdgt
• lt/trgt
• lttrgt
• lttd colspan2gt ltimg src"t1-31.jpg"gtlt/tdgt
• lt/trgt
• lt/tablegt

27
??????(2) td ? table
28
??????(2) HTML ?

• lttablegt
• lttrgt
• lttd valign"top"gt
• lttablegt
• lttrgt lttdgt ltimg src"t2-11-1.jpg"gt lt/tdgt
  lt/trgt
• lttrgt lttdgt ltimg src"t2-11-2.jpg"gt lt/tdgt
  lt/trgt
• lt/tablegt
• lt/tdgt
• lttdgt
• lttablegt
• lttrgt
• lttd valign"top" align"center"gt ltimg
  src"t2-12-1.jpg"gtlt/tdgt
• lt/trgt
• lttrgt lttdgt ltimg src"t2-12-2.jpg"gtlt/tdgt
  lt/trgt
• lt/tablegt
• lt/tdgt
• lttdgt ltimg src"t2-13.jpg"gt lt/tdgt lt/trgt
• lttrgt lttd colspan3gt ltimg src"t2-21.jpg"gt lt/tdgt
  lt/trgt
• lt/tablegt

29
??????(3) td ????
30
??????(3) ?? td
? HTML ??
lttrgt lttd valign"top" align"center"gt ltimg
src"t2-12-1.jpg"gtlt/tdgt lt/trgt
31
??????(3) HTML ?
????? HTML ??

• lttrgt
• lttd valign"top" align"center"gt
• ltiframe title"YouTube video player" width"480"
  height"390" src"http//www.youtube.com/embed/Rec
  hrtUxfQc" frameborder"0" allowfullscreengtlt/iframe
  gt
• lt/tdgt
• lt/trgt
• lttrgt
• lttd style"color0000ffbackground-colorffccff"
  gtltcentergtlth3gt ???? Part lta href
  "http//www.youtube.com/watch?vRechrtUxfQcplayne
  xt1listPLA134F7F5E4A537D2" gt1lt/agt
• lta href "http//www.youtube.com/watch?vMRWX49Fur
  ewfeaturerelated"gt2lt/agt
• lta href "http//www.youtube.com/watch?vMEThdbL_i
  Mwfeaturerelated"gt3lt/agt
• lta href "http//www.youtube.com/watch?vZyDbq-lEK
  Tofeaturerelated"gt4lt/agt
• lta href "http//www.youtube.com/watch?vNlsrJbVvj
  aAfeaturerelated"gt5lt/agtlt/h3gtltcentergt
• lt/tdgt
• lt/trgt

32
??YouTube??????
33
?? -- ?????
lttd style"color0000FFbackground-colorFFCCFF"
gt
??? lttdgt ????????(FFCCFF),???????(0000FF)???????RG
B???????,R???(Red),G???(Green),B???(Blue),RGB?????
?256???,??????00255,???????00FF?
34
?? ???RGB?
35
????????

• ???? 100 ????????????? Web ???s00.tku.edu.tw
• FTP ???ftp.s00.tku.edu.tw
• ?????????,??????? URL ? http//s00.tku.edu.tw/ID
• ID ????????????

36
FTP ???????

• ? Google ?? FileZilla,??????

37
FTP ?? -- Filezilla ??

• ??Filezilla,????????,?????
• ?????????????????,???????(?ftp.s00)
• ????100????????? ftp.s00.tku.edu.tw,99???????
  ftp.s99.tku.edu.tw,?????
• ????????,????????????,???????ftp.s00???????,??????
  ????
• ???????????ftp.s00.tku.edu.tw

38
FTP ?? Filezilla ??
39
Filezilla ??TKU ???ftp ??
40
????TKU???????
?????,???? http//s00.tku.edu.tw/ID,?????????????
??????????? ??????????,???????????
ftp.s00.tku.edu.tw ???
41
13-3 ?? HTML
42
CSS ??

• HTML???????????????
• CSS (Cascading Style Sheets) ???????HTML????????
• ???????,?????CSS??????????

43
CSS?????

• ??? CSS ??????? (Selector) ??? (Declaration)
  ????, ???? (Declaration) ????? (Property) ??
  (Value) ????, ??

44
CSS?????

• ?????????????????????, ??????? lth1gt ????????12?,
  ??????, ????

45
CSS?????

• ???, lth1gt ??????????, ???????h1?font-size?color???
  ????????12pt ? red ??????font-size?color ?????
• ???????????, ???????"" ??????

46
CSS?????

• ????????????????????, ???? lth1gt?lth2gt?lth3gt?????????
  ?12 ?
• ????????????????, ????????, ????????? "," ????

47
????CSS?????

• Inline Styles (????,????????style ??)
• ltp stylecolorsiennamargin-left20pxgt???????lt/
  pgt

48
????CSS?????

• Internal Style Sheet (?????,? lt head gt ?? ltstyle
  gt ???? CSS)
• ltheadgt
• ltstylegt
• hr colorsienna
• p margin-left20px
• body background-imageurl("imagesmypic.gif")
• lt/stylegt
• lt/headgt

49
????CSS?????

• External Style Sheet (?????,? ltlink gt ???? CSS ?)
• ltheadgt
• ltlink rel"stylesheet" type"text/css"
  href"mystyle.css"gt
• lt/headgt

50
CSS ??

• ltbodygt
• lth1gt????lt/h1gt
• lthrgt
• lth2gtWorld Wide Weblt/h2gt
• lttable border"1" width"100"gt
• lttbodygt
• lttrgt
• ltth align"left"gtChapterlt/thgt
• ltth align"left"gtTitlelt/thgt
• lt/trgt
• lttrgt
• lttd width"10"gt13lt/tdgt
• lttd width"50"gt????lt/tdgt
• lt/trgt
• lttrgt
• lttd width"10"gt14lt/tdgt
• lttd width"50"gt?????lt/tdgt
• lt/trgt
• lt/tbodygt

51
CSS ??
? ltheadgtlt/headgt ???????
ltstyle type"text/css"gt body
font-family"lucida calligraphy",arial,'sans
serif' background-colorDCDCDC
color8A2BE2 margin10px h1
font-size250 h2 font-size150 th
background-colorD3D3D3 td background-color
FFFAF0A lt/stylegt
52
????????

• The tag Selector (?????)
• The class Selector (????)
• The id Selector (id???)

53
????

• html
• lth1 class"bluefont"gt?????lt/h1gt
• ltp class"right"gt?????lt/pgt
• ltp class"center"gt?????lt/pgt
• ltp class"bluefont"gt?????lt/pgt
• css
• p.right text-alignright
• p.center text-aligncenter
• .bluefont colorblue

54
id???

• html
• ltp id"red"gt?????lt/pgt
• ltp id"green"gt?????lt/pgt
• ltp id"blue"gt?????lt/pgt
• css
• red colorred
• green colorgreen
• pblue colorblue

55
CSS ????

• (????) http//www.w3schools.com/css/
• (????) http//www.w3school.com.cn/css/
• ???????CSS?????????,??????????,???????????CSS???,?
  ?????????????

56
?? HTML ????

• DynamicDrive (http//www.dynamicdrive.com/)

57
13-4 HTML ????
58
HTML ???- CKEditor

• ckEditor(http//ckeditor.com/demo)

59
CKEditor ????
60
CKEditor ????
61
HTML ???- Blogger
62
HTML ???- Blogger
63
Google ?????
64
Google ????HTML??
65
Google ????HTML
66
Google ?? Facebook??
67
Google?? ????
68
Google?? ????