HTML ???

1
HTML ???
Wen-Nung Tsai Ref http//www.csie.nctu.edu.tw/jg
lee/teacher/content.htm
2
(No Transcript)
3
(No Transcript)
4
(No Transcript)
5
(No Transcript)
6
(No Transcript)
7
(No Transcript)
8
What is an HTML File?

• Web pages (??) is simply an HTML file.
• HTML file is Essentially a text file, containing
  small markup tags.
• Markup tags tell the Web browser how to read and
  display the page.
• An HTML file can be created using a simple text
  editor or FrontPage, .

9
HTML ?

• HTML HyperText Markup Language
• HTML are the instructions that tell a browser how
  to lay out the information (text, images, etc) in
  the browser window ( ????)
• It is made up of tags an opening tag lthtmlgt and
  a closing tag lt/htmlgt with the content that the
  tag is applied to, in between them.

10
????-HTML ??????
lthtmlgt ltheadgt lttitlegt????lt/titlegt
lt/headgt ltbodygt lt/bodygt lt/htmlgt
? lthtmlgt ??
???
???
? lt/htmlgt ??
Titile??????????????????????Title???????????????
?????????,?Title??????????
11

• HTML??ltHTMLgtlt/HTMLgt
• ????????HTML?????HTML??.
• HEAD??ltHEADgtlt/HEADgt
• ????HTML??????????,?????.
• ????ltTITLEgtlt/TITLEgt
• ??????HTML???????,??????????????
• ???.
• ????ltBODY ?? gtlt/BODYgt
• ??
• ????BACKGROUND?????URL
• ????BGCOLORRRGGBB,R?G?B0F
• ????TEXTRRGGBB,R?G?B0F
• ?????LINKRRGGBB,R?G?B0F
• ????????VLINKRRGGBB,R?G?B0F
• ????????ALINKRRGGBB,R?G?B0F

12
HTML Elements

• Headings, Font Sizes, Color
• Comments
• Backgrounds
• Links and hyperlinks
• E-mail
• Pictures
• Lists
• Tables, Frames,

13
Some HTML tags

• lthtmlgtlt/htmlgt - The start and closing tags of an
  html document
• ltheadgtlt/headgt - found at the beginning of an html
  document, will contain information such as the
  title, meta tags (content, keywords), css and
  javascript information.
• ltbodygtlt/bodygt - the bulk of your webpage
  information is found between these two tags
• lttablegtlt/tablegt - For tables, you also need the
  row and column tags (you can also add a
  border in the opening table tag)
• lttrgtlt/trgt row
• lttdgtlt/tdgt column (the column tags are contained
  within the row tags)
• For example lttablegt lttrgt lttdgtlt/tdgtlttdgtlt/tdgtlt/trgtlt/
  tablegt will produce a table with one row, two
  columns
• ltfontgtlt/fontgt - applies font type and size to
  text
• ltbgtlt/bgt - bold
• ltigtlt/igt - italicize
• lta hrefgtlt/agt - hyperlink
• ltpgtlt/pgt - paragraph
• ltbrgt line break

14
HTML??tag???

• ??HTML?????????????,?????
• lt???? ???????gt??lt/????gt
• ??? lt??gt ? lt/??gt ????????????????
• ?????????,????????????,?????????????????????
• lt????/gt

15
????-????(1/4)

• Internet
• ???????????,?????????????????,???????????????60?
  ?????????????,???????????????????!
• WWW(World Wide Web)?????
• ?????????,????????,WWW?????Internet???????,??????
  ??????????!
• HTML(Hyper Text Markup Language.???????)
• ??HomePage???,????????

16
????-????(2/4)

• Hypertext ???
• ??????????????????????,???????????????,?????????
  ????????????,???????????,?????????????????
• ?????,HTML????????????????????
• ,?????????????????????
• Hyperlink ???
• ??????,???????????????????,??? ??,???????????????
  ????????????????????
• HomePage ??HTML??,????????????????????????????????
  ??????????????
• Browser ???(IE?Netscape)

17
????-????(3/4)

• HTTP (Hyper Text Transmission Protocol.???????)
• ISP (Internet Service Provider)
• ?????????,???????????????????????????????????Hin
  et,Seednet??.
• FTP (File Transfer Protocol)TCP/IP
  ??????????????????
• TCP/IP
• ????/??????(Transmission Control
  Protocol/Internet Protocol)???Internet????????????
  ?

18
????-????(4/4)

• URL(Uniform Resource Locator)
• ?WWW????,??????URL??????Uniform Resource Locator
  ?????????????? URL???????,?????????????,??????????
  ?,?????//?????????
• scheme//host.domainport/path/filenam
• ???????URL???http//www.csie.nctu.edu.twgopher
  //gopher.csie.nctu.edu.twftp//nctuccca.nctu.edu.
  twtelnet//bbs.csie.nctu.edu.tw/newstw.bbs.comp
  .wwwmailtojglee_at_csie.nctu.edu.tw

19
????-??????

• ????????
• ?????Word?Excel?PowerPoint
• ?????????
• ?HTMLabc?HotDog
• ???????????
• ?MicroSoft FrontPage?Macromedia Dreamwaver

20
Terminologies

• WWW World Wide Web
• URL Uniform Resource Locator
• HTML Hyper Text Markup Language
• HTTP Hyper Text Transfer Protocol
• Hyperlinks and Links
• Web Browser
• Web Server, Application Server
• http//w3c.org

21
(No Transcript)
22
The World Wide Web (WWW)

• Originated at the Conseil Européen pour la
  Recherche Nucléaire (CERN).
• Uses a browser (?? IE?Netscape) program to access
  Web documents called Web pages and to display the
  hypertext (including text, pictures, etc.) in the
  Web pages.
• Uses HyperText Mark-up Language (HTML) to write
  Web pages.

23
WWW ?

• The World Wide Web, or simply Web, is an
  information-sharing model that is built on top of
  the Internet. The Web uses HTTP, only one of the
  languages spoken over the Internet, to transmit
  data and receive data from an Application Server.
  The Netizen uses browsers, such as Internet
  Explorer or Netscape, to access Web documents
  called Web pages that are linked to each other
  via hyperlinks. Web documents also contain
  graphics, sounds, text and video.

24
WWW-related Events
Date Event
03/1989 WWW project was originated by Timothy Berners-Lee
11/1990 A revised version of project by NeXT computer
03/1991 Release of WWW for testing
09/1993 Release of 1st version of Marc Andreessens Mosaic by NCSA
10/1993 gt 500 known HTTP servers in operation
10/1994 gt 10,000 know HTTP servers in operation
25
Head??????? big5 ??

• ltmeta http-equiv"Content-Type"
  content"text/html charsetbig5"gt

26
?????
ltcentergt?????lt/centergt lth1gt?????lt/h1gt????lth2gt
?????lt/h2gt????lth3gt?????lt/h3gt????lth4gt?????lt/h4gt??
??lth5gt?????lt/h5gt????lth6gt?????lt/h6gt????
27
lth1gt?????lt/h1gt
28
?????? tag

• ltfont sizen color??gt?? lt/fontgt
• ltbrgt?? new Line
• ltpgt????
• ltpregt ?????????,
• ????
• lt/pregt
• lt bgt???lt/bgt
• ??ltsupgt??lt/supgt??ltsubgt??lt/subgt??

29
???? ltHTMLgt ltBODYgt ltCENTERgt ltFONT SIZE"7"
COLOR"FF0000"gt???lt/FONTgtltBRgt ltFONT SIZE"7"
COLOR"00FF00"gt???lt/FONTgtltBRgt ltFONT SIZE"7"
COLOR"0000FF"gt???lt/FONTgtltBRgt ltFONT SIZE"7"
COLOR"000000"gt???lt/FONTgtltBRgt lt/CENTERgt lt/BODYgt lt
/HTMLgt
30
???? ltHTMLgt ltBODYgt ltCENTERgt ltFONT
SIZE"1"gt???lt/FONTgtltBRgt ltFONT SIZE
"2"gt???lt/FONTgtltBRgt ltFONT SIZE "3"gt???lt/FONTgtltBRgt
ltFONT SIZE "4"gt???lt/FONTgtltBRgt ltFONT SIZE
"5"gt???lt/FONTgtltBRgt ltFONT SIZE "6"gt???lt/FONTgtltBRgt
ltFONT SIZE "7"gt???lt/FONTgtltBRgt lt/CENTERgt lt/BODYgt
lt/HTMLgt
31
???? ltHTMLgt ltBODYgt ltCENTERgt ltFONT
SIZE"6"gt ???ltBRgt ltBgt???lt/BgtltBRgt ltIgt???lt/IgtltBRgt ltU
gt???lt/UgtltBRgt lt/FONTgt lt/CENTERgt lt/BODYgt lt/HTMLgt
32
ltHTMLgtltheadgtlttitlegt?????lt/titlegtlt/headgtltBODYgt
ltHR ALIGN"left" WIDTH60 SIZE3gtlthr width50
size5 align"right"gtlt/BODYgtlt/HTMLgt
????-???
33
??????-??

• ltP ALIGN LEFTgt????????...????????..
  ????????????????   (???) lt/Pgt   
• ltP ALIGN CENTERgt????????...????????..????????
  lt/Pgt
• ltP ALIGN RIGHTgt???????? ...????????..????????
  lt/Pgt

34
???? lthtmlgt ltbodygt lt!-- ????? --gt ltPgt??lt/Pgt ltCENTE
Rgt????lt/CENTERgt ltpgtnbsp????????????ltBRgtltBR
gt???? lt/pgt lt/bodygt lt/htmlgt
35
???????
36
(No Transcript)
37
(No Transcript)
38
(No Transcript)
39
(No Transcript)
40
(No Transcript)
41
?? (comments)

• ?C???? /??/
• ?C???? // ??
• HTML?? lt!-- ?? --gt
• ????????????????,??????????????
• ?? lthr sizeXX widthXX alignXXgt

42
???? lt gt "

• lt ???????gt ???????amp
  ?????quot ??????
• nbsp ?????

43
??(Links)

• lta href"URL"gt?????lt/agt
• lta hrefhttp//www.nctu.edu.tw target_blank
• alignbottom gt??lt/agt
• ltA href "mailtotsaiwn_at_csie.nctu.edu.tw "gt
• ltimg src "??/????" alt "????????? ??"
• width?? height?? border"????"gt
• lta nameAnchorsgt Links within a page

44
???? ltHTMLgt ltheadgt lttitlegt????lt/titlegt lt/headgt ltBO
DYgt ltimg src"http//www.sinica.edu.tw/nick/image
s/000.gif"gt??I lt/imggt ltbrgt ltimg
srcimages/001.gif alt????? width90
height20gt??II lt/imggt lt/BODYgt lt/HTMLgt
45
(No Transcript)
46
Music and Sound

• ltbgsound src"together.mid" LOOPINFINITE gt
• ltembed src"together.mid" LOOPtruegt.

???????????,??????BODY?????,????????????????????WI
DTH??????????,HEIGHT????????,?????????,?? WIDTH2
HEIGHT0(??????WIDTH0 HEIGHT0),??
HIDDENTRUE? AUTOSTARTTRUE???????????????(????FAL
SE,??????PLAY????????)? LOOPTRUE?????????,LOOP2?
?????,?????
47
??? ???(Table)

• ltbody background"??/????"gt
• lttable bordern bgcolorpinkgtltcaptiongt????lt/capt
  iongtltTRgtltTHgt???lt/THgtltTHgt???lt/THgtlt/TRgt
• lttrgtlttdgt????lt/tdgtlttdgt????lt/tdgtlt/trgtlttrgtlttdgt????lt/
  tdgtlttdgt????lt/tdgtlt/trgtlt/tablegt

48
????-??

• ltTABLEgt????
• ltTABLE BORDERgt????????ltCAPTIONgt????
• ltTHgt??????
• ltTRgt????
• ltTDgt????????
• lt/tablegt????

49
???? ltHTMLgt ltheadgt lttitlegt????lt/titlegt lt/headgt ltBO
DYgt ltTABLE BORDER5gtltTRgtltTHgt???lt/THgtltTHgt???lt/THgtlt
/TRgtltTRgtltTDgt???lt/TDgtltTDgt???lt/TDgtlt/TRgtltTRgtltTDgt???
lt/TDgtltTDgt???lt/TDgtlt/TRgtlt/TABLEgt lt/BODYgt lt/HTMLgt
50
Tables again

• lttablegt lt/tablegt defines a table
• lttrgt lt/trgt - Table row
• lttdgt lt/tdgt - Table column
• lttable bordergt
• lttrgt lt!-- start a table row --gt
• lttd colspan3gt If you have two ltTRgt
  tags
• in your table, you will have two rows in
  your table. lt/tdgt
• lt/trgt
• lttrgt
• lttdgtIf you have three lttdgt tagslt/tdgt
• lttdgtin a row, you will havelt/tdgt
• lttdgtthree cells in the row.lt/tdgt
• lt/trgt
• lt/tablegt

51
Hover Button
lta href"content.htm" onMouseOver'document.haha.s
rc"http//www.csie.nctu.edu.tw/tsaiwn/course/FLC
S/images/button2.gif" ' onMouseOutdocument.haha.s
rc"http//www.csie.nctu.edu.tw/tsaiwn/course/FLC
S/images/button1.gif"gt ltimg namehaha src
"http//www.csie.nctu.edu.tw/tsaiwn/course/FLCS/i
mages/button1.gif" border0gt lt/agt
52
????-????

• ltHTMLgt
• ltHEADgt
• ltTITLEgt????lt/TITLEgt
• ltmeta http-equiv"refresh" content"5urlhttp//w
  ww.cwb.gov.tw/"gt
• lt/HEADgt
• ltBODYgt
• ?????????????????????????????
• ??????,??!
• lta href"http//www.cwb.gov.tw/"gthttp//www.cwb.go
  v.tw/lt/agt
• lt/BODYgt
• lt/HTMLgt

53
????-???
lthtmlgt ltheadgt lttitlegt?????lt/titlegt lt/headgt ltbodygt
ltMARQUEE BEHAVIORALTERNATE width50gt ltIMG
SRC"http//www.sinica.edu.tw/nick/images/005.gif
" border0gt ltFONT color0bcdefgt?????????!lt/FONTgtlt
/MARQUEEgt ltMARQUEE DIRECTIONLEFTgt????lt/MARQUEEgtltP
gt ltMARQUEE DIRECTIONRIGHTgt????lt/MARQUEEgtltPgt lt/bod
ygt lt/htmlgt
54
(No Transcript)
55
????-??JavaScript

• ??????

• ????
• lthtmlgt
• ltheadgt
• lttitlegt?????lt/titlegt
• lt/headgt
• ltbodygt
• ltscript language"JavaScript"gt
• lt!--
• document.write("????? " document.lastModified)
  
• //--gt
• lt/scriptgt
• lt/bodygt
• lt/htmlgt

56
(No Transcript)
57

• ????

58
??????? (1/2)

• lthtmlgt
• ltheadgt
• lttitlegtlt/titlegt
• lt/headgt
• ltbodygt
• ltscript language"JavaScript"gt
• lt!--
• if (document.all)
• //To add more stars simply add more colours in
  below array!!
• coloursnew Array('0000E1','E6EAD5','DDFF78','
  FF2828','C675EC','FFD350','B9A03A')
• //Alter nothing below!!
• amountcolours.length
• YgetDelay0,XgetDelay0,Ydelay0,Xdelay0,step0.2
  ,currStep0,my0,mx0
• document.write('ltdiv id"ie" style"positionabsol
  utetop0left0"gtltdiv style"positionrelative"gt
  ')
• for (i0 i lt amount i)
• document.write('ltdiv id"iestars"
  style"positionabsolutetop0pxleft0pxheight5
  0pxwidth50pxfont-familyCourier
  Newfont-size5pxcolor'coloursi'padding-top
  20pxtext-aligncenter"gt.lt/divgt')

• document.write('lt/divgtlt/divgt')
• ini1
• gstep1
• function iMouse()
• myevent.ymxevent.x
• document.onmousemoveiMouse
• function dim()
• ini-gstep
• dtsetTimeout('dim()',10)
• if (ini lt 2)
• clearTimeout(dt)
• glow()
• function glow()
• inigstep

59
??????? (2/2)

• function stars()
• ie.style.topdocument.body.scrollTop
• for (i0 i lt amount i)
• var layeriestarsi.style
• layer.filter'glow(color'coloursi',
  strength'ini')'
• layer.top Ydelay100Math.sin((5Math.sin((currS
  tep-15.99)/10))i70)Math.sin((currStep)/10)Math
  .cos((currStepi25)/10)
• layer.leftXdelay180Math.cos((5Math.sin((currS
  tep-15.99)/10))i70)Math.sin((currStep)/10)Math
  .cos((currStepi25)/10)
• currStepstep

• function delay()
• Ydelay YgetDelay(my-YgetDelay)1/20
• Xdelay XgetDelay(mx-XgetDelay)1/20
• stars()
• setTimeout('delay()',10)
• delay()
• glow()
• //--gt
• lt/scriptgt
• lt/bodygt
• lt/htmlgt

60
????- Frame
61
Frame test 1

• ltHTMLgtltHEADgt
• ltTITLEgtFrame???? test 1lt/TITLEgt lt/HEADgt
• ltFRAMESET COLS"120,"gt
• ltFRAME SRC"http//www.sinica.edu.tw/" gt
• ltFRAMESET ROWS"100,"gt
• ltFRAME SRC"http//www.pchome.com.tw"gt
• ltFRAME SRC"http//www.yam.com"gt
• lt/FRAMESETgt
• lt/FRAMESETgt
• ltBODYgt
• lt/BODYgt
• lt/HTMLgt

62
Frame test2 --????
63
????-CSS??

• ??????
• ????
• 1.?ltheadgtlt/headgt??????
• ltstylegt
• atext-decorationnone
• lt/stylegt
• 2.?ltbodygtlt/bodygt??????
• lta style"text-decoration none"
  href"??"gt????lt/agt

64
????-CSS?? (cont)

• lthtmlgt
• ltheadgt
• lttitlegtCSS??lt/titlegt
• ltstylegt
• atext-decorationnone
• lt/stylegt
• lt/headgt
• ltbodygt
• lta style"text-decoration none"
• href"http//www.sinica.edu.tw"gt?????lt/agt
• lt/bodygt
• lt/htmlgt

65
????- FORM
http//www.csie.nctu.edu.tw/tsaiwn/sample/
66
?? Browsers ? View Source??

• One of the most important thing is to look at the
  source of a file.
• Explorer View Source
• Netscape View Page Source
• Helps to learn HTML
• Get new ideas from other guys Web pages..?

67
Some Acronyms ???

• WWW World Wide Web
• URL Uniform Resource Locator
• HTML Hyper Text Markup Language
• HTTP Hyper Text Transfer Protocol
• FTP File Transfer Protocol
• BBS Bulletin Board System

68
Tools to build a Web Page

• You can just use NOTE PAD
• Write some bunch of code in a HTML file
• Or you can use WYSIWYG (pronounced "wiz-ee-wig",
  means What You See Is What You Get) editors.
• Netscape Composer
• Microsoft Front Page
• Dreamweaver MX
• Hundreds of other Editors available on the
  Internet the Cyber spaces ?

69
HTML editor? DreamWeaver? FrontPage?

• Why do I need to know HTML when I have an html
  editor?
• An HTML editor will work fine for what you want
  to do 99 of time, but there are little quirks
  to the GUI interface that will cause your webpage
  to look slightly different than what you
  intended. But if you know some html you can look
  at the code of the html document and make
  simple adjustments.
• So, why dont you just write in HTML all the
  time?
• Why dont you walk to Taipei from hsinchu instead
  of drive? Because it takes too long!
• Except for the occasional code tweak, you will
  design a website infinity faster in an HTML
  editor and with less errors.
• I cant type more than a line or two before I
  will mistype or misspell something. If you do
  this in your code, the webpage will not work
  and/or will not look the way you intended.
• Trouble shooting a large page of code is tedious
  and difficult.

70
The Internet versus the Web
THE INTERNET The Internet is a collection of
interconnected networks.
THE WEB The Web is a system that provides
access to documents formatted in hypertext that
uses languages such as HTML or XML.
versus
Slide 5 of 30
71
????(Advanced Topics)

• CGI
• JavaScripts (?? JavaScript ?? Java)
• ASP, ASP.NET
• PHP
• JSP
• MS SQL, MySQL
• Structure Query Language

72
ISP Internet Service Providers

• ISPs offer
• Linking consumers and businesses to Internet
• Payment system for online purchases
• Monitoring and maintaining a customers Web site
• Network management and system integration
• Backbone access services for other ISPs

73
????

• ?? 56K ??
• ?????? ????KKMAN????????
• ADSL
• http//www.cc.nctu.edu.tw/network/ADSL-9211.htm
• ? ? http//www.cc.nctu.edu.tw/network/
• ???? ADSL ??

74
HTML ???

• ????
• http//www.csie.nctu.edu.tw/tsaiwn/course/introcs
  /
• http//gogle.com/