HTML

1
HTML ??????
2
HTML ??????

• ?????????
• ????????
• Microsoft Front Page
• Macromedia Dreamweaver
• Notepad
• HTML????????
• ? ????

• My First HTML
• ?????

3
HTML?????????

• ?????????????
• HTML????????(size3)
• ??? size ??
• ???
• ???????????RGB?????
• ???color??
• ?????
• ?????
• ?????face???
• ??
• ??????,???????font??
• ???????????
• ?????

4
???????

• ????????????
• ??????????(center)???(left)???(right)
• ???align??,????
• ??
• ????
  
• ???
• ??

5
?????????

• ????,?????????,???????src???,???????????align
  ????
• ????.gif?.jpg????,?????????????????
• ??????????????,???????width?height??
• height75

6
????

• GIF (Graphic Interchange format)
• ??????,?????.bmp???
• ??????????
• ????????
• ??????????
• ??????256?????,?????????
• JPEG (Joint Photographic Experts Group)
• ????24 bits??????,????????
• ????GIF?
• ???????????,??????,???????

7
??????????

• ?????bgcolor?????????,????color?????
• ?????background?????????,????src?????
• ?????????

8
????????????

• ?????name???????????(mark)??,?????????????????
• ?????href???????
• ??????????????,?????????,????name??????
• ????
• ????????href?????????(show.jsp)
• ????
• ????????href?????URL (http//www.hinet.net)
• Hinet
• E-mail ??
• ???

9
HTML??????

• ?HTML??????????????????????????
• ???nbsp
• ? gt
• ? amp
• ? quot

10
?????

• ??????,????????(row),
  ?????????????
• ???border??????????,???0??????width??????,
  ????????,????????
• ???bgcolor??????row????,???bgcolor????????
  ????,???????????()?
• ???colspan??????,rowspan??????
• ??????
• colorred????
• ???12345678

11
Table Elements and Their Attributes
12
Table example

• Fruits and Vegetables
• Name
• Category
• apple
• fruit
• tomato
• fruit
• carrot
• vegetable

13
????????

• ?????????(disc),?????type?? square????,
  typecircle?????
• ?????1,2,3?????type?? I??I, II,
  III,IV, typeA??A,B,C , typea??a,b,c,
  typei??i,ii,iii
• ????
???
• • Java
  • VB
  • C

14
??(Form)

• methodPOST
• name????????
• action???????????????????,?????????jsp, asp,
  php, ? servlet
• method ?? ?????
• get ?????????????????,????????????????,??????,?
  ????????
• post ??????HTTP request???,??????????,??????

15
HTML Form components
16
Input tag attributes

• TYPE-The type of the GUI component
• Text, submit, reset, checkbox, radio, password,
  and hidden.
• NAME The name of the form parameter.
• VALUE The default value of the GUI component

17
??????

• text (??) ??
• value SIZE 20 maxlength 30
• submit(???)
• Reset (??)
• checkbox(???)
• valueApple I like apples
  
• valueOrange checked I like oranges
  

18
??????

• radio(???)
• ???????????,???????
• valueF?
  
• valueM?
  
• password(??)
• ??????
• hidden(??)
• ??????????
• select (????)
• Apple
• Orange
• textarea(????)
• columns70Default text

19
????

• ????
• ??????
  
• method"POST"
• ??
  
• ??
  
• ??value"?"?value"?"?
  
• ??
• ???
• ???
• ???
• ???

• ???
• ???
• ???
• ???
• ???
• ???
• ???
• ???
• 
  
• ???? value"??"?? name"taiwanese" value"???"??? type"CheckBox" name"english" value"??"??
  value"??"?? name"french" value"??"??
  
• ??cols"30"
  

20
CSS (Cascading Style Sheets)

• Embeded CSS ??HTML???
• ??????,???????
• ???CSS??.css?????
• ??????,?????????
• href3-1.css
• body font-family Arial color
  FF00FF background-color 00FFFF
• avisited color FF0000
• p color 800080
• href3-1.css
• ??
• abcde

21
Image Map Links

• ?HTML??????????????????????
• href"lefttop.htm" alt"top left"
• href"abcd" alt"ddd"
• border"0" usemap"Map"

22
????????(Frame)

• ????
• ?????(banner)??????
• ??????(menu)?????????????????????
• ???????????,???????????
• Frame??????,??????????????????
• ???????????????????
• ????body????

23
Frame ????

• Untitled Document
• content"text/html charsetbig5"
• scrolling"NO" noresize
• border"0"
• scrolling"NO" noresize

24
Frame

• Frameset???????????,???????,?????Frameset??
• rows20,200,??????,????20,????200pixel,?????
  ???
• border1????pixel?
• frameborderyes??????,no?????
• Frame?????
• scrollingNO???scrolling bar,???yes???scrolling
  bar
• Noresize ????????????????

25
??????????

• ?????target????????????????,??????????????????
• Target??
• ???????frame???????
• _blank ??????????
• _top ???????????,???????
• _parent???????frameset?????

26
Lab

• ?frame??????(index.html)
• ???frame???banner,????banner.htm??
• ??frame???links,????links.htm??
• ??frame???main,????main.htm??
• ??????(??????)?