??? ??? - HTML - PowerPoint PPT Presentation

About This Presentation
Title:

??? ??? - HTML

Description:

- html : – PowerPoint PPT presentation

Number of Views:60
Avg rating:3.0/5.0
Slides: 70
Provided by: Abi70
Category:

less

Transcript and Presenter's Notes

Title: ??? ??? - 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? ?? ????? ????? ???? ?? ?? ???? ?? ??? ??
    ????? ?? ??? ?? ???? ???? ??? ???. (?????? ?????
    ????? ??????)
Write a Comment
User Comments (0)
About PowerShow.com