??? ??? - HTML

1
?????? ?????? ????? ??

• ??? ??? - HTML

????? ???? ????? ????? ???? ???????? ??????
???????? ??????? ???? ?????
???? 1
2
?????? ?????

• ?? ?????
• Web 2
• ?????? HTTP
• ?????? ??
• ?????? HTTPS
• ?????? FTP
• ?????? ??? ???? ??
• HTML ?????

3
?? ?????
4
?? ?????

• ??? ?????? ????? (World Wide Web) ?????? ??????
  ??? ???? ?? ?? ?? ???? ??????? ???.
• ????? ?? (??????) ???? ?????? ?? (Web Browser)
  ???? ?????? ?????.
• ????????????? ??? ??? HTML ?? HyperText Markup
  Language (???? ???? ???????) ?????? ???? ?? ??
  ????? ???? ???.
• ?? ?? ??? 1980 ????? ??.
• ????? ?? ?? ???? ???????? (Hyperlink) ?? ??????
  ???? ?????.
• ???????????? ?? ?? ??? World Wide Web Consortium
  (W3C) ? Internet Engineering Task Force (IETF)
  ??? ?? ????.
• ?????????? ?? ???? ?? ?? ??????????? ????? ???
  ??? ? ???????????? ??? ?? ??? ????? ???.

5
Web 2

• ????? ???? ?? ????????? ???? ??? ????? ? ?????
  ?????? ?? ?? ???.
• ?? ???? ??????? ? ??? ?????? ??? ?? 2 ?? ??? 2004
  ??? ????.
• ?? 2 ??????? ????? ?????? ???????? ??? ?? ??
  ?????
• ???? ?? ??????? ?? ????? ???? ????? ??? ?????
  ???.
• ?? ???? ???????? ?? 2 ?????? ?? ?? ?????? ???? ??
  2 ???? ?????? ?? ??? ??????? ? ????????? ?????
  ???? ?? ??? ?? ???? ???? ? ?? ????? ?? ?????
  ?????.
• ?? ????? ?? 2 ??????? ?? ???????? ??? ??? ?? ???
  ???? ???? ????? ???? ???? ? ????? ????? ?? ??? ??
  ??? ??.
• ?? ?? 2? ?????? ????? ? ??????? ??? ?? ?? ??? ??
  ? ???? ?? ????? ?? ????.
• ?? 2 ?? ???? ??? ??? ?? ????? ???? ??? ??? ??
  ???? ?????.

6
?????? HTTP

• ?????? ???? ?? ?????? HTTP ?? HyperText Transfer
  Protocol ???.
• HTTP ?? ?????? ?????-????? (Request-Responce)
  ???. ?? ??? ?????? ??????? ?? ??????? ?? ????
  ??????? ? ???? ??????? ?? ?? ???? ?? ????. ?? ??
  ??? ??????? ????? ????? ????? ????? ?? ????.
• HTTP ?? ?????? ???? ????? (Stateless) ???? ????
  ???? ?? ???? ?? ????? ???? ?????? ???? ????? ?
  ???? ?????? ?? ?? ?????? ?? ???.
• ????? ????? ?????? ??????. ????? ???? ???? ??????
  POST ? GET ???.
• ???? ???? ?? ????? ?? ????? ???????? HTML? ????
  ??? ?????? (????? ??????) ? ?? ????? ???? ????
  ????.
• ?? ????? ?? ???? ???? HTML ????? ?? ???? ?? ????
  ????? ??????? ?? ???.

7
?????? ??

• ?????? ?? (?? Web Browser) ??? ???????? ?? ??
  ????? ??? ?????? ??? ?? ?? ??????? ??? ???.
• ?????? ?? ?????? ????? ?? ?? ???? ?????????? HTTP
  ???? ???? ????? ?? ??? ? ????? ???? ?? ????? ??
  ???.
• ?????? ?? ????? ?? ?????? ???? ???? ? ????? ?????
  HTML? ??????? ?????? ???? ??????? ?????? ?? ??
  ??? HTML ??????? ??? ??? ?? ?? ???? ??????
  ??????.
• ????????? ?????? ?? ????? ?? ??????? ??? ????
  ????? ?????? ??? ?????? ????? ??? ???? ?????.
• ????????? ????? ?? ?? ???? Internet Explorer
  ?????????? ?? ?? ???? ?? ???????????? ?? ?????
  ??? ???? Firefox ?????? ?? ??????????? ??????
  ???? ?? ?????? ?? ??? ? ????? Google Chrome ??
  ???? ????? ?? 2 ????? ??? ???? ?????.

8
?????? HTTPS

• ?????? HTTP ?? ???? ???? ??? ? ?????? ??? ?????.
  ?? ??? ?? ???????? ?????? ?? ??????? ??? ????.
  ???? ???? ??????? ????? ?? ?? ??????? ?? HTTP
  ????? ????? ????? ???? ??? ???? ????? ?????? ???.
• ???? ????? ??? ???????? ?????? HTTPS ?? Secure
  HTTP ????? ??. ??? ?????? ?? ??????? ?? ??????
  ?????? SSL ( Secure Sockets Layer ) ? ?? TLS (
  Transport Layer Security) ??????? ???? ? ??????
  ?? ??? ?? ????. ?? ??? ?????? ?? ????? ?? ???? ??
  ?? ????? ?????? ??? ??????? ?? ????.
• ???? ?????? ???? HTTPS? ???? ??? ?? ???? ??? ??
  ?? ?? ????????? ??????? (Digital Certificate)
  ????? ???? ???. ???? ???? ?? ????????? ????????
  ???? ??? ?? ?? ????? ????? ????? ????? ?? ?????
  100 ???? ????? ???? ?? ??? ??????.
• ?? ???? ????? ???? ? ????? ???? ???? ????? ????
  ??? HTTPS? ??? ?????? ???? ?????? ?????? ?? ????
  ?? ??? ?????? ???.

9
?????? FTP

• FTP ?? File Transfer Protocol ?? ????????? ?????
  ??????? ?? ???? ????? ???? ?? ?? ??????? ?? ???.
  ?????? ???? ?? ?? ???? ?? ??????? ?? HTTP ??
  ????? FTP ????? ???.
• ?? ???? FTP ??? ????? ?????? ?? ???? ??? ????? ??
  ??? ??????? ?? ???? ?? ?????? ?? ?? ??????
  ??????? ?? ???
• ?????? ??????? ????? ???? ?? ???????
• ???????? ?????? ? ????? ?? ??? ?? ???? ?????????
  ?? ?????? ??
• ?? ?????? ?? FTP ??? ???? ????? ???? ????? ???
  ???? ??? ??? ????? ???? ????? (????? HTML ????
  HTTP) ?????.

10
?????? ??? ???? ??

• ?????? ??? ?????? ????? ?? ?? ???? ????? ?? ?????
  ????? ????? ?? ???? ???? ????? ???? ??? ???? ?
  ?????? ?? ??? ?? ????. ???? ?????? ?? ?? ???????
  ??? ????? ????? ?? ?????? ?????? ???.
• ?? ??? ??? ???? ?? 2 ? ???????? ??? ???? ??? ????
  ?? ?????? ??? ???? ?????? ????? ??? ???. ?? ????
  ???? ???? ?????? ????????? ????? ??? ?? ?? ???
  ???? ? ?????? ??? ???.

11
HTML ?????
12
HTML ?????

• ???? ????????? ????? ??. ??? ???? ?? ???? ?? ????
  ????? ??????? ??? ? ?????? ????? ???? ?? ?? ????
  ?????.
• ?????? HTML ?????? ??????? ????? ?????? ???? ??
  ?? ?? ????? ?? ??????.
• ?? ???? ???? ?? ???? ???? ???? ????? ?? ????? PDF
  ? Word ?????? ??? ? ???? ??? ???? ?? ?? ????
  ?????? ????? ?? ???.
• HTML ?? ???? ?????? (Tag) ???. ?? ??? ?? Markup
  Language ?????? ?? ???? ????? XML ?? ?? ????
  ?????? ???? ??????? ????? ???.
• ????? ??? HTML ??????? ? ?????? ???????? ????
  ???? ?????.
• ????? ???? ????? ?? ???? ????? ?????? ? ??????
  ???? ?? ????? ? ????? ????? ?????? ???? ??? ???
  ?? ????? ?? / ???
• lttagNamegttagdata here, as mush as you want
  lt/tagNamegt

13
????? ?????

• ???? ??????? ?? ??? ??????? ?? ???? ????? ?? ????
  ?? ????. ?? ????? 3 ??? ????
• ????? ????? (???? ????? ??? ??)
• ???? ????? (???? ????? ??????? ? ????? ??)
• ???? ????? (???? ????? ???? ?? ?? ????? ????? ??
  ???)
• ????? ?? ?? ?????? ?? ?? ?????? ????? ?? ????
  ?????? ???? ?????? ???? ???? ?? ???? ?? ????? ??
  ????? ??? ???? ???????? ???? ????.
• ???? ???? ????? ?? ?? ?? ?? ????? ???? ? ?????
  ???? ?????
• lttag attribute1attributeValue
  attribute2attributeValue2gt
• ltinnerTaggt some data ltanotherInnerTag /gt
  lt/innerTaggt
• lt/taggt
• ??????? ?? ?? ???? ???? ???? ?????? ?? ????
  ?????? ????? ?? ???? ??? ???? ?? ???.

14
????? ????

• ???????? ?? ?? ???? XML? ?? ????? ??? ??? ??
  ?????? ????? ?? ???? ?? ???? ?? ???? ???? (?????
  ????)? ???? ??????? HTML ?? ????? lthtmlgt ???.
  ???? ??????? ???? ?? ?? ???? ??? ????? ???? ??
  ????.
• ???? ?????? ??????? XML ?? ?????? ?? ??? ? ????
  ??? ???? ??????? HTML ????? ????. ??? ??? ?????
  ?? ?? ????????? ????? ??? ? ???? ??? ????? ???.
  ??? ?? ?? ??? ???? ???? ?? ????. ????? ????
  ???????
• HTML 4.01 Strict (??? ????? ??)
• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http//www.w3.org/TR/html4/strict.dtd"gt
• HTML 4.01 Transitional
• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
  Transitional//EN" "http//www.w3.org/TR/html4/loos
  e.dtd"
• HTML 4.01 Frameset
• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
  Frameset//EN" "http//www.w3.org/TR/html4/frameset
  .dtd"gt

15
????? ???? (?????)

• XHTML 1.0 Strict
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/xhtml
  1-strict.dtd"gt
• XHTML 1.0 Transitional
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD
  /xhtml1-transitional.dtd"gt
• XHTML 1.0 Frameset
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Frameset//EN" "http//www.w3.org/TR/xhtml1/DTD/xht
  ml1-frameset.dtd"gt
• XHTML 1.1 (strict)
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"gt

16
?????? ? ????

• ?? ??? HTML ?? ?? ???? ???? ????? ??? ???? ??????
  (Head) ? ???? (Body). ??????? ????? ?? ???? ??
  ????? ????? ??????? ?? ?????? ???? ????? ?
  ??????? ?????? ???? ?? ???? ???? ??? ?? ?????. ??
  ????? ????
• lthtmlgt
• ltheadgt
• lttitlegt Sample Webpage lt/titlegt
• lt/headgt
• ltbodygt
• ltpgt hello there this is a paragraph lt/pgt
• ltpgt hello again another paragraph with ltbgt bold
  lt/bgt text! lt/pgt
• lt/bodygt
• lt/htmlgt

17
???? ????

• ?? ?????? ?? HTML ?? ???? ???? ???? ?????? ?????
  ?? ???? ???? ???? ?????? ?? ??? ?? ???
• ???? ??? ???? ?? ??? ????? ?? ?????
• ??????? ???? ASCII ?? ??? ??? ?? ??????? 1 ????
  ?? ???? ? 256 ???? ????. ??? ??? ??????? ????
  ???? ??????? ????? ??????? ??? ??????? ???.
• ??????? ???? ?????? ?? ??? ??? ?? ??????? ??
  ???? ???? 2 ???? ?? ???? ? ?? ???? ?????????
  ?????? ?? ??? ???? ????? ?? ???.
• ??????? ???? Unicode ?? ??? ???? ?? ??????? 2
  ???? ?? ???? ? ?????? ????? ?? ???? ?????? ????
  ????. ?????? ??? ?? ???????????? ??????? ????? ??
  ???? ?? ???? ????? ?? ????????? ???? ??? UTF-8
  ???????? ??? ???.
• ??????? ?????? ?? ?? ?????? ? ?????? ????? ??
  ???? ?? ?????? ?? ??????? 13 (Enter) ? ?? ???????
  ???? ?? ????? 10 ???? ????? ????? ?? ??? ??? ??
  ?????? ??????? 10 ???? ?????. ????? ?? ???????
  ???? ?????? ?? ??????? ????? ? ???? ?? ???? ??
  ??? ?? ????.

18
???? HTML

1. ????? ?????? ???? (whitespace) ??????? ?? ?????
   ?? Space ?? ????.
2. ?? ?????? ?? ????? ??? lt gt ???? ???? ????
   ????? ?? ?????? ?????? ???? ???? ???? ???? ?? ???
   ???? ????? ??? ????? ???
3. lt lt
4. gt gt
5. amp
6. ???? ????? ????? HTML ?? ?????? ?? ??? ????????
   ?????? ???? ?????? ??? ???????? ??? ?? ?????????
   ???? ?????
7. Microsoft Frontpage
8. Adobe Dreamweaver
9. ZendStudio for Eclipse

19
???????? HTML
20
????? ??? ????

• HTML ????? ???? 75 ????? ???? (??????) ? ???? 100
  ????? ????? ???. ?? ???? ?? ??? ????? ??? ??????
  ???? ????? ? ??????? ???? ?? ????? ?? ????. ??
  ??? ???? ?????? ?? ????? ???? ??? ????? ?? ??
  ????? ?????? ???.
• ???? 25 ????? HTML ?? ??? ???? ????? ??? ???
  (??????? ?? ???? ??? ????????? ??? ???) ?????
  ???? ????? ??? ???? ???? ????? ?? ?? ?? ???? ????
  CSS ??????? ?? ???? ?????? ?????? ?? ???.
• HTML ????? ?? ???? ?????? ????? ? ??????????
  ?????? ?? ??????? (Comments) ???????? ?? ???? ???
  ???????? ???? ?? ??? ????? ???
• lt!-- this is a comment! --gt
• ?? HTML ?? ??????? ??????? ??? ??? ??? ?? ?????
  ????? ?????? ???? ??? ????? ????? ??? ??? ? ??
  ??? ???? ???? ???? ????? ????.

21
????? lthtmlgt

• HTML ?? ????? ? ????? ???? ?? ??? ????? ?? ????
  ????.
• ??? ????? HTML
• ????? ???? ???? ?? ??? HTML
• ???? ????? ???
• ???? ?????????
• ???????
• Dir ???? ????? ??? ??? (?? ?? ???? ?? ??????)
  ?????? ???? rtl ? ltr
• ????? ??? ??? rtl
• Lang ???? ????? ???? ??? (?? ???? ???? 2 ????
  ????) ????? fa ?? en

22
???? lthtmlgt

• lthtml dir'rtl' lang'fa'gt
• ltheadgtlt/headgt
• ltbodygt
• ???? ??? ??? ?? ???
• lt/bodygt
• lt/htmlgt
• lthtmlgtltheadgtlt/headgt
• ltbodygt
• Hello, World! lt/bodygtlt/htmlgt

23
????? ltheadgt

• ??? ????? Head
• ????? ???? ???? ?????? ??????? ???? ?? ?? ???
• ???? ????? ???
• ???? ????????? ?????
• ??? ???????? ???? Html
• ???? ???? ????? ???? ?? ?? head ???? ?? ??????
  ?? ?????? ?? body ? ?? ??? ???? ??? ??????? ?????
  ??? ????????? ?? ??? ?? ???? head ??????? ????.

24
????? lttitlegt

• ??? ????? Title
• ????? ???? ???? ????? ????
• ???? ????? ???
• ???? ????????? ?????
• ??? ???????? ???? Head
• ????? ???? ?? ????? ????? ?????? ????? ???? ??
  ???.

25
???? lttitlegt

• lthtml lang'fa'gt
• ltheadgt
• lttitlegt????? ????lt/titlegt
• lt/headgt
• ltbodygt
• ???? ??? ??? ?? ???
• lt/bodygt
• lt/htmlgt

26
????? ltpgt

• ??? ????? P
• ????? ????? ????????
• ???? ????? ???
• ???? ?????????
• Align ???? ???? ??? ???? ????????? ?????? ????
• Left ?? ?? (??????)
• Right?? ????
• Center ?? ????
• Justify ?? ????
• ??? ???? ?? ???? ??? ??? RTL ??? ?? ? ???? ?? ???
  ???? ???? ????? ?? ????.
• ??? ???????? ???? Body ? ????

27
????? ltbrgt

• ??? ????? Br
• ????? ???? ???? ?????? ?? (???? ?? ?? ????)
• ???? ????? ???
• ???? ????????? ?????
• ??? ???????? ??? ??

28
????? ltimggt

• ??? ????? Img
• ????? ????? ?????
• ???? ????? ???
• ???? ?????????
• src ???? ???? ??????
• Alt ??? ??????? (?? ?????? ?? ????? ??? ???? ??
  ??? ????? ??? ??? ?? ??? ?? ????? ???? ?? ???)
• Align ?????? ???? ??????? top, bottom, middle,
  left , right
• Width , Height ????? ?????? ?? ????? ?? ??? ????
  ?????? ??? ?????
• Title ??? ??????? ???? (Tooltip)
• Usemap ?????? ???? ?? (??? ?????? ?? ???? ?????
  ???? ?? ?????)
• ???? ?? ??? ??? ?? ?????? ???? ????? ??? HTML ??
  ??? Title ???????? ??????? ?? ??? ?? ?? ????? ??
  ?? ???????.
• ??? ???????? ???? Body ? ????

29
???? ltimggt

• lthtmlgt
• ltheadgt
• lttitlegt????? ????lt/titlegt
• lt/headgt
• ltbodygt
• ltpgt???? ??? ??? ?? ???? ??? ???????? ??? ????
  ltbr/gt
• ????? ?? ????.
• ltimg src'image1.jpg' width'200'
• align'middle'/gtlt/pgt
• ltpgt??? ?? ???????? ???lt/pgt
• ltimg src'image1.jpg' width'200'
• height'200' /gt
• lt/bodygt
• lt/htmlgt

30
????? ltagt

• ??? ????? A
• ????? ????? ???????? ????? ?? ????? ???? ??
  ????? ?? ???? ????
• ???? ????? ???? ????? ????? ????? ???
• ???? ?????????
• href ???? (URL) ????? ?? ???????
• Name ????? ??? ??????? ???? ?????
• Target ???? ????? ?? ??? ??? ???
• _blank ???? ???? (????? ???? ??? ?? ???)
• _parent ?? ???? ???? ?? ?? ???? ???? ?? ???
  ???? ???
• _self (??????) ?? ???? ????
• ??? ???? ???? ????? ???? ???? ???
• ??? ???????? ???? Body ? ????
• ??? ????? ?? ????? ?????? ?? ?? ???? ???? ??????
  ???? ?? ?? ??????? ?? ??? ???? ????? ???.
  (??????? ?????)

31
???? ltagt

• lthtmlgt
• ltbodygt
• ltpgt This is a sample paragraph. Click
• lta href'http//www.google.com'gtHerelt/agt
• to visit Google website.
• ltbr/gt
• lta href'http//hackersite.com/hack.html'
• title'Click me to die!'gtYahoo!lt/agt
• ltbr/gtltbr/gt
• lta href'http//somesite.com/somepage.htmlanchor
  'gt
• ltimg src'img.gif' /gt
• lt/agt
• lt/bodygt
• lt/htmlgt

32
????? ltbgt

• ??? ????? B
• ????? ????? ??? Bold
• ???? ????? ???
• ???? ????????? ?????
• ??? ???????? ???? Body ? ????
• ????? ??? ????? ????? i ? big ? small ? ... ???
  ???? ???? ???? ??? ?? ??? ?? ???? ?? ?????? ????
  ?? css ??????? ??? ???.

33
????? ltsupgt,ltsubgt

• ??? ????? Sup, Sub
• ????? ????? ??/??? ???
• ???? ????? ???
• ???? ????????? ?????
• ??? ???????? ???? Body ? ????
• ????? ??? ????? ????? i ? big ? small ? ... ???
  ???? ???? ???? ??? ?? ??? ?? ???? ?? ?????? ????
  ?? css ??????? ??? ???.

34
?????lthrgt

• ??? ????? Hr
• ????? ????? ?? ??? ????? ???? (Horizontal Line)
• ???? ????? ???
• ???? ????????? ?????
• ??? ???????? ???? Body ? ????
• ?? ????? ????? br ?? ?? ?? ?? ???? ?? ??? ? ??
  ?????? ?? ???? ?? ???? hr ??? ??? ???? ????? ??
  ?? ???? ?? ?? ???? ???? ???? ??? ?? ??? ? ??
  ?????? ?? ???? ?? ???.

35
???? ltsubgt,ltsupgt

• lthtmlgt
• ltbodygt
• Some text with
• ltsupgtsuperlt/supgt
• text.
• lthr/gt
• Some more text with
• ltsubgtsublt/subgt
• text.
• lt/bodygt
• lt/htmlgt

36
?????ltolgt,ltulgt

• ??? ????? OL,UL
• ????? ????? ???? ???? (Ordered List) ? ????
  ?????? (Unordered List)
• ???? ????? ???
• ???? ????????? ?????
• ??? ???????? ???? Body ? ????
• ??? ?? ????? ?????? ?? ???? ???? ? ?? ????? ?? ??
  ???? ?? ????. ??? ?? ??????? ?? ????? li ?? ????
  ?? ???? ????? ???? ?????.
• ???? ?? ????? ?? ?? ???? ????? ??? ?????? ?????
  ?? ????? ??? ???? ??????? ???? (???? ?? li)? ????
  ???????? ???? ?? ????? ????? ?????? ??? ??? ??
  ????????? ???? ??? ???.

37
?????ltligt

• ??? ????? LI
• ????? ????? ???? ???? (List Item)
• ???? ????? ???
• ???? ????????? ?????
• ??? ???????? ???? OL ? UL
• ?? ???? ???? ?? ??????? ???? ?? ????? ?? ???? ?
  ?? ???? ??? ????? ?? ?? ????? ?? ?????? ?? ????
  ?? ????. ???? ?? ?? ?????? ?? ?? ?? ??????? ????.

38
???? ???? ??

• lthtmlgt
• ltbodygt
• ltolgt
• ltligt???? ???lt/ligt
• ltligt???? ???lt/ligt
• ltligt???? ???lt/ligt
• lt/olgt
• ltulgt
• ltligt List 1lt/ligt
• ltligt List 2lt/ligt
• ltligt List 3lt/ligt
• lt/ulgt
• lt/bodygt
• lt/htmlgt

39
????? ??? ????? ????

• ??? ????? Span, Div
• ????? ????? ?? ????? ?? ???
• ???? ????? ???
• ???? ????????? ?????
• ??? ???????? ??? ??
• ????? ??? ????? ???? ???? ??? ???? ????? ??? HTML
  ??????? ?? ????. ??? ????? ?? ????? ???????? ????
  ? ?? ????? HTML ?? ????? ??????? ?? ????.
• ????? Span ???? ????? ???? ????? ?? ??? ???????
  ?? ??? ? ?????? ?? ???? ??? ????? ??? ???.
• ????? Div ???? ????? ???? ????? ?? ??? ??????? ??
  ??? ? ?? ????? ????? ????? ??? ???? (??? Div) ??
  ?? ??? ??? ????.
• ?? ??? CSS ????? ???? ?? ??? ????? ?? ??? ?????
  ??.

40
???? ??
41
???? ??? HTML

• ???? ?? ?? ??????? ? ???????????? ????? ??? HTML
  ?????. ???? ????????? ????? ????? ?? ????
• ????? ??????? ???? ???? ???
• ???? ???? ?????
• ???? ???? ??????
• ?? ???? ???? ?? ?? ????? Table ???? ? ????? ??
  ????.
• ?? ???? ?? ????? ?? ???? ?????? (Header)? ?? ????
  ????? (Body) ? ?? ???? ?????? (Footer) ?????
  ????.
• ??? ?? ? ???? ?? ?? ?? ????? ??????? ???? ??
  ????.

42
????? ltTablegt

• ??? ????? Table
• ????? ????? ?? ???? ????
• ???? ????? ???
• ???? ?????????
• Border ?????? ???? ???? ??? ????. ?? ??? ????
• Cellpadding ????? ???? ?????? ???? ??? ???? ?
  ???? ???? ????
• Cellspacing ????? ???? ?? ???? ????
• Width ??? ???? ?? ??? ?? ???? (???? ?? ?????? ??
  ????)
• ??? ???????? ???? Body

43
????? ltTrgt

• ??? ????? Tr
• ????? ????? ?? ??? ???? (Table Row)
• ???? ????? ???
• ???? ?????????
• Align ??? ???? ?????? ?? ???? (4 ?????)
• VAlign ??? ???? ????? ?????? ?? ????
• Top
• Middle
• Bottom
• Baseline
• ??? ???????? ???? Table,Tbody,Thead,Tfoot

44
????? ltTdgt

• ??? ????? Td
• ????? ????? ?? ???? ???? ?? ?? ??? ???? (Table
  Data)
• ???? ????? ???
• ???? ?????????
• Align ??? ???? ?????? ?? ???? (4 ?????)
• VAlign ??? ???? ????? ?????? ?? ????
• Colspan ??? ???? ??? ???? ?? ?? ?? ????? (?????
  ????? ???? ??)
• Rowspan ??? ???? ??? ???? ?? ?? ?? ?????(?????
  ????? ???? ??)
• ??? ???????? ???? tr,th

45
???? ???? ????

• lthtmlgt
• ltbodygt
• lttable border'1'gt
• lttrgt lttdgtCell 11lt/tdgt
• lttdgtCell 12lt/tdgt
• lt/trgtlttrgt
• lttdgtCell 21lt/tdgt
• lttdgtCell 22lt/tdgt
• lt/trgtlt/tablegt
• lthr/gt
• lttable border'1'gt
• lttrgt lttd rowspan'2'gtCell 11 ltbr/gtCell 21lt/tdgt
• lttdgtCell 12lt/tdgt
• lt/trgtlttrgt
• lt!-- Cell 21 ommited --gt
• lttdgtCell 22lt/tdgt
• lt/trgtlt/tablegt
• lt/bodygt
• lt/htmlgt

46
????? ltTbodygt

• ??? ????? Tbody
• ????? ????? ????? ???? ???? (Table Body)
• ???? ????? ???
• ???? ?????????
• Align ??? ???? ?????? ?? ???? (4 ?????)
• VAlign ??? ???? ????? ?????? ?? ????
• ??? ???????? ???? Table

47
????? ltTheadgt

• ??? ????? Thead
• ????? ????? ????? ?????? ???? (Table Header)
• ???? ????? ???
• ???? ?????????
• Align ??? ???? ?????? ?? ???? (4 ?????)
• VAlign ??? ???? ????? ?????? ?? ????
• ??? ???????? ???? Table

48
????? ltTfootgt

• ??? ????? Tfoot
• ????? ????? ????? ?????? ???? (Table Footer)
• ???? ????? ???
• ???? ?????????
• Align ??? ???? ?????? ?? ???? (4 ?????)
• VAlign ??? ???? ????? ?????? ?? ????
• ??? ???????? ???? Table

49
????? ltThgt

• ??? ????? Th
• ????? ????? ?? ???? ???? ?? ??? ????? ??????
  ???? ( Table Header Data)
• ???? ????? ???
• ???? ?????????
• Align ??? ???? ?????? ?? ???? (4 ?????)
• VAlign ??? ???? ????? ?????? ?? ????
• ??? ???????? ???? TheadgtTr

50
???? ???? ????? ???? ???

• lthtmlgt
• ltbodygt
• lttable border"1"gt
• lttheadgtlttrgt
• ltthgtMonthlt/thgt
• ltthgtPayslt/thgt
• lt/trgtlt/theadgtlttbodygtlttrgt
• lttdgtJanuarylt/tdgt
• lttdgt100lt/tdgt
• lt/trgtlttrgt
• lttdgtFebruarylt/tdgt
• lttdgt80lt/tdgt
• lt/trgtlt/tbodygtlttfootgtlttrgt
• lttdgtSumlt/tdgt
• lttdgt180lt/tdgt
• lt/trgtlt/tfootgtlt/tablegt
• lt/bodygt
• lt/htmlgt

51
???? ??? ???? ????

• ?????? ?? ?? ????? ???? ???? ???? ???? ??????? ??
  ???? Border ???? ??? ???? ?? ???? ?? ???? ??????.
• ?? ??????? ?? CSS ?? ???? ?? ???? ?? ???? ?????
  ??? ? ?????? ???.
• ???? ???? ?? ????? ???? ????????? ??? ???? ?????
  ???? ?? ???.
• ???? ?? ?? ???? ??? ??? (DOCTYPE) ?? ????? ??????
  ????? ?? ????.
• ???? ???? ???? bazitab.com ?? ??????? ?? ?????
  ???? ???? ??? ???

52
(No Transcript)
53
(No Transcript)
54
??? ??
55
??? ??? HTML

• ???????? ?? ????? ??? ?????? HTTP ?? ?????
  ?????/???? ??? ?? ???. ???? ????? ?? ?????? ????
  ?? ????? ?? ?? ?? ????? ?? ?????? HTML ??????? ??
  ???.
• ??? ? ????? ?? ??? ????? ??? HTML ?????. ?? ?????
  ????? (Submit) ?? ???? ?????? ?? ???? ????????
  ?????? ??????? ??? ?? ?? ???? ????? ?? ?????.
• ?? ??????? ?? ???????? ?? ???? ??????? ??? Get
  ????? ????? ???.
• ??????? ?? ?? ??? ????? ????? Get ? Post
• ?? ??? Get ?????????? ??????? ?? ?????? URL ?????
  ?? ???? ? ???? ???? ?????? ?? ???? ???? ???????
  ?????? ????? (1 ????????)
• ?? ??? Post ?????????? ??????? ??????? ??? ??
  ???? ??????? ?? ???? ? ??????? ????? ????? (64
  ???????)
• ????? ? ????? Post ? Get ?? ?????
• http//hosting.pershe.com/viewticket.php?tid10933
  8cX4jQ3Ukc
• ?????????? Get (c , tid) ????????
  ????????? ?? ????
• ???????? ????????? ?? ??????

56
ltformgt

• ?? ??? HTML ???? ?? ????? Form ???? ?? ????. ??
  ??? ?? ????? (?? ???? ?????) ?? ???? ?????
  (Submit) ????? ????? ?? ?? ???? ??? ?? ?? ?????
  ??? ???? Enter ?? ?? ??? ???? ?????? ?? ???
  ?????? ?????? ??? ?? ????? ???? ? ???? ??
  ???????? ???? ?? ???.
• ?? ??? ?? ??????? ???? ??????
• Method ???? ????? ?? ???? ?? ??? (Get/Post)
• Action ????? ?? ??????? ?? ?? ????? ?? ???? ??
  ???? ?? ????.
• ???? ???? ?? ??? ??? ???? ????
• ltformgtlt/formgt
• ltform actiongetData.php methodgetgtlt/formgt
• ltform actionhttp//google.com/
  methodgetgtlt/formgt

57
ltinputgt

• ????? ???? ???????? ?? ?? ?? ??? ???? ???????
  ???? ?? ?????? ??????? ???? ?????? ??????? (????
  ?? ???? ???) ?????. ????? ????? ??? ?????? ????
  ??? type ???? ?? ????
• Button ?? ???? ?????? (???? ????????? ????????)
• Checkbox ?? ???? ???? ???? ???? ??? ?????
• File ?? ???? ?????? ???? (???? ?????)
• Hidden ?? ???? ???? ??????? ???? (?????
  ????????? ??????)
• Password ?? ???? ???? ?? ?????? ??? ?? ?? ???
  ????? ???? ?? ???
• Radio ?? ????? ????. ?? ?? ?????? Radio ???? ???
  ?? ????? ?????? ???
• Text ???? ???? ??????
• Submit ???? ????? ???
• Reset ???? ??? ???? ?????? ???? ??????? ???

58
???? ltinputgt

• lthtmlgtltbodygt
• ltform method'get'gt
• ltinput type'checkbox'gt I am a checkbox! ltbr/gt
• ltinput type'file'gt ltbr/gt
• ltinput type'password' value'sth'gt ltbr/gt
• ltinput type'radio'gt Radio button! ltbr/gt
• ltinput type'text' value'Normal!'gt ltbr/gt
• ltinput type'submit'gt ltinput type'button'gt
• lt/formgt
• lt/bodygtlt/htmlgt

59
ltinputgt (?????)

• ?????? ???? ??????? ?? ??? ?? ??????? ?? ?????
  input ????? ?? ????! ???? ????? ?? input ?? ???
  ?????
• Checked ?? ????? ?? Radio ?? Checkbox ???????
  ???? ?? ????? ??? ????? ?? ?????? ???? ???? ???
  CheckedChecked or else
• Disabled ?? ????? ?? ??????? ???? ??????? ??? ?
  ??????? ????? ????? ??.
• MaxLength ???? text ?? password ?????? ?????
  ??????? ???? ???? ???
• Readonly ???? ??????? text ?? password? ???? ??
  ??????? ????? ?? ???
• Size ?????? ????? ???? ?? ???? ?? ??? (?? ???
  ????? ???????)
• Value ???? ???? ??? ??? ??? ???? ?? ???? ??
  ????. ???? ?????? ?????? ?????? ?? ???? ?? ???
  (?? ??? ?? ??????? ???? ???? ?????? ???). ???
  ????? ?? ?? ????? ???? ?? ???? ????? ?? ???.
• Name ?????? ?? ???? ??????? ?? ???? ?? ?? ??
  ???? ?? ???.

60
???? ??? ltinputgt

• lthtmlgtltbodygt
• ltform method'get'
• action'http//google.com/search'gt
• ?????? ?? ???? ???? ?? ?? ???? ????? ???ltbr/gt
• ltinput text' value'Search String' /gt
• ltbr/gt
• ltinput type'submit' value'Search'gtltbr/gt
• lt/formgt
• lt/bodygtlt/htmlgt

61
lttextareagt

• ????? lttextareagt ??? ????? ?? ???? ???? ??? (???
  ???) ??????? ?? ???. ?? ??? ????? ?????? ?? ????
  ??? ??? ????? ???? ???? ??????? ?? ????.
• ??? readonly ???? ??? ????? ????? ???.
• ???? rows ? cols ?? ????? ????? ????? ? ???? ???
  ?? ????? ???? ?? ?? ??? ??????? ???? ?? ????.
• ??? ???? ?????? ?? ?? ?????? ?? ???? ??? ????
  ????? ????? ??? ???? ? ????? ?????? ?? ?? ?????
  ???? ?????? ????? ???? ?????? ?? ????? ?? ?????
  textarea ????? ????? ?? ????? ?? ????
• lttextarea rows5 cols10gtHello
• Therelt/textareagt
• ??????? ?? ?????? ?? ????? ?????? textarea ??
  ????
• HTML ????? ??? ??? (??? ?????? ?? ltbr/gt)

62
ltselectgt

• ????? Select ?? Dropdown Combo ????? ?? ???? ????
  ????? ?? ???? ?? ???? ?? ???? ??? ? ?? ???? ??
  ??? ??? ????? ?? ???? ????? ?? ???? ?????? ??
  ?????.
• ?? ????? ?? ??? Mutiple ?? ?? Select ????? ????
  ???? ????? ?? ????? ? ?? ????? ?? ???? ?????? ??
  ?????? ?????? ????? ???? ????? ???. ???????
  ??????? ??????? ?? ???? ?? ????? ???? ???? ?????
  ?? ????.
• ????? ?? ???? Select ???? ????? ??? Option ????
  ?? ?????.
• ?? Option ?? ?? ??? Selected ?? ????? ??? ?????
  ?? ???? ?? ???? ?????? ??? ????? ???.
• ?? Option ??? ??? Value ????? ??? ????? ????? ??
  ???? ??????? Value ?? ?? ???? ????? ?? ??? ? ??
  ??? ??????? ?????? ???? ??.

63
???? ltselectgt

• lthtmlgtltbodygt
• ltselectgt
• ltoption value'Wood'gt???lt/optiongt
• ltoption value'Iron'gt???lt/optiongt
• ltoption value'Stone'gt???lt/optiongt
• lt/selectgt
• lt/bodygtlt/htmlgt

64
ltlabelgt,ltfieldsetgt

• ???? ????? ?????? ? ??? ???? ?? ???? ?? ?? ????
  ???? ??? ???? ??? ???? ?? ????? Label ???????
  ????. ?????? ??????? ???? ???? ????? ?? ????? ??
  ???.
• ???? ??? ?? Label? For ??? ?? ??? ?? ???? ???? ??
  ?????? ?? ???.
• ltlabel formynamegtEnter your namelt/labelgt
• ltinput typetext namemyname /gt
• ???? ???? ???? ????? ???? ?? ?? ??????? ?? ????
  ?? ????? fieldset ??????? ?? ???. ?????? ??????
  ?? ????? ??????? ?? Radio ??? ????? ???? ???
• ltfieldsetgt
• ltinput typeradiogtltinput typeradiogt
• lt/fieldsetgtltfieldsetgt
• ltinput typeradiogtltinput typeradiougtlt/fieldse
  tgt

65
???? ??????
66
?????? ???????

• ?? ??? ???? ????? ?? ???? ????? ????? ??? HTML
  ????? ?????
• ?????? ???? ??
• Class ???? ?? ????? ?? ???? ?? ???? (????
  ??????? ?? CSS)
• Id ?? ??? ???? ????? ???? ?? ???. ?? ?? ??? HTML
  ??? ??? ?? ?????? ????? ????? ????. ?? ??????? ?
  CSS ?? ???? ?? ??? ???? ?? ????? ?? ?? ??????
  ????.
• Style ????? ????? ?? ????? ?? ???? ?? ??? (?????
  ?? ??? ?? ??? ?? ?? CSS ??????? ???)
• Title ??? ??????? ???? ????? ?? ???? ?? ??? (??
  ??? ????? ???? ?????? ?? ???)
• ??? ?????
• Dir ??? ???? LTR ?? RTL
• ??? ???????
• Tabindex ????? ?????? ?? ?? ????? ?? ????
  ??????? ??????? ?? ????? ???? ?? ????. ?? ?????
  ?? ?? ??? ?????? ???? TAB ?? ???? ????? ?? ?????
  Tabindex ??? ????? ????? ?????? ??.

67
????? ??? ????

• ????? ??? ??? ??? ?? HTML ???? ????? ?? ?? ????
  ??? ????? ???? ?????? ??
• Style ?? ??? CSS ?? ???? ??? ????? ????? ?? ???
• Script ?????????? Javascript ???? ??? ?????
  ????? ?? ????
• Meta ???? ????? ??????? ?? Head ?? ???. ?????
  ??? ??? ?? ???? ?? ?????? ???? ?????????? HTTP
  ?????.
• ??? Content ???? ???? ???? ?????? Header
• ??? http-equiv ???? ???? ???? ??? Header
• ??? Name ???? ???? ???? ??? ??? ????
• Link ???? ????? ?? ???? ?????
• Rel ????? ???? ?? ???
• Href ???? ????
• Type ??? ????
• ltlink rel"shortcut icon" href"/favicon.ico"
  type"image/x-icon" /gt

68
???????
69
???????

1. ?? ??? HTML ?????? ?? ???? ?? ??????? ??????
   ?????? ???? ?? ????? ????.
2. ?? ???? ?? ????? (????? SBCE) ?????? ? ???? ??
   ????? ?????? ?? ????? ??? ???? ?? ??? ?????????
   ????? (????? Firefox ? IE) ??? ???? ? ??????? ??
   ???? ????. ??? ???? ??? ?? ???? ????? ???? ?? ??
   ??? ???????? ????? ???? ???.
3. ?? ????? ???? ??????. ????? ??? ???? ????? ????
   ????? ????. ?????? ?? ????? ???? ??? ???? ????
   ?????? ???? ????? ????.
4. ?? ???? ????? (????? Download.com) ?? ??? ?????
   ??? ???? ?????? ???? ?????? (?? ??? ???? ????
   ????? ????). ???? ???????? ?? ?? ?? ???? ????
   ???? ?? ?? ???? ???? ????? ?????? ?? ???? ?? ???
   ??? ??? ??? ?? ???? ?????? ????? ???? ?? ????
   ???? ????? ???.
5. ?? ??? ???? ? ???? ???? ??? ???? ?????? ???????
   ???? ?? ????? ????? ????.
6. ?? ?????? ?? ??????? ? ?????? ????? ???? ?? ?????
   IMG? ?? ????? ????? ???? ?? ?? ???? ?? ??? ??
   ????? ?? ??? ?? ???? ???? ??? ???. (?????? ?????
   ????? ??????)