sa st atase dta tp

1
??sa???? st?? ?atas?e?? d??t?a??? t?p??
2
??sa???? st?? e??t?ta
3
?? e??a? ? HTML

• ???e ???? se ??a s??desµ? (link), µetaß?ß??e? µ?a
  se??da st? ???st?
• ?????? e?d??µese? e????e?e? http, tcp, ip, ?
  p???? p??fa??? e??a? ? se??da p?? ß??pete
• ?? se??de? ????? t? s???e???µ??? eµf???s? ????
  HTML
• H HTML de? e??a? ???ssa p????aµµat?sµ??, ?p?? ?
  C,C, Java
• H HTML de? e??a? p????aµµa (p.?. ?pe?e??ast??
  ?e?µ???? ? desktop publishing)
• H HTML ??e? st?? browser p?? ?a eµfa??se? t?
  ?e?µe?? p?? st???e? ? server
• H HTML ???eta? ?a? ???ssa t?p?? markup d??t?
• S?µa??e? ta d??f??a st???e?a t?? ?e?µ????
• ?ee? st?? browser p?? t? e??a? ep??efa??da, p??
  a????e? ? pa????af?? ...
• ??? ?a µp??? ?a? µe p??? µ??e??? ?? e????e?
• H HTML e??a? d?e???? standard, p??
  ???s?µ?p??e?ta? ??a t?? ??d?s? ?e?µ???? st? Web

4
?pe?s??desµ?? ?a? ??af???

• ?e ???L p??s??t??µe ?pe?s??d?sµ??? (hyperlinks)
  ap? ?p???d?p?te s?µe?? e??? ?e?µ???? se
  ?p???d?p?te ?e?µe??, ?p??d?p?te a???? st?? ??sµ?.
• ? HTML p??sf??e? d??at?t?ta e?sa????? ??af????,
  video, ???? ?a? p??s?µ???se?? se µ?a se??da.

5
??p?p???µ??? eµf???s?

• H HTML d??e? sta ?e?µe?a µ?a s?ed?? t?p?p???µ???
  eµf???s?.
• ?e? ??e? t?? ?pe??e? d??at?t?te? e??? epe?e??ast?
  ?e?µ????.
• ??t? e??a? p?e????t?µa se d?af??et????
  ?p?????st???? µ??a???, µe d?af??et????? browser
  t? ?d?? HTML ?e?µe?? µp??e? ?a e??a? ????
  d?af??et??? (eµfa??s?a??)
• ??af????, st?? eµf???s? ??aµµat?se????, ???µata
  ?a? a????s? ??af????.
• ???? a? e??e p???e?? pe????af?? ta a??e?a HTML ?a
  ?ta? p??? µe?a??te?a

6
HTML standard

• ?????? ? HTML ?ta? ??p??e? p??d?a??af?? ...
• ?e t? e??p??s? t?? web ????e standard, p??
  e????eta? ap? t? World Wide Web Consortium (W3C).
• HMTL e??a? ???ssa t?p?? mark up, d??ad? µp??e? ?a
  ???s?µ?p????e? ??a ?a ?a?a?t???se? t? d?µ? t??
  ?e?µ???? ?a? ?a ?atas?e??se? ?pe?s??d?sµ???
• H p???? p??sfat? ??d?s? e??a? ? HTML 4.01

7
?? p??t? ?e?µe?? html

• Ge??!
• To p??t? ?e?µe?? HTML
• ? p??t? µ?? p??sp??e?a se html.
• ?e?te?? ep??efa??da
• ?e?te?? pa????af??. ???a? ??a??.
• ???t? pa????af??.

8
?µf???s? to? ?e?µ???? µe html

• ?? p??t? ?e?µe?? html
• H p??t? µ?? p??sp??e?a se html.
• ?e?te?? ep??efa??da
• ?e?te?? pa????af??. ???a? ??a??.
• ???t? pa????af??

9
?as??? html tags a

• ?? e?t???? html µpa????? µeta?? , ?????ta?
  tags
• tag a??????e?ta? ap? tag. ?d???a
  p??? browser ?t? ß??s?eta? µeta?? t??? e??a?
  html.
• f????? ep?p??s?ete? p????f???e? se
  p???p???a html ?e?µe?a.
• eµfa???eta? st? title bar t??
  browser
• eµfa???eta? st? pa?????? t??
  browser, ?????? ?e?µe??
• To p??t? ?e?µe?? HTML , e??a? d???t???
  ep??efa??da?

10
?as??? html tags ß

• ?e?te?? pa????af??, ?e????e? ?a???????a
  pa????af?.
• S?ed???eta? µ?a ??????t?a ??aµµ?
• t?p??e? µe ??t??a ???µµata

11
?pe?s??desµ??

• My Second Document
• The Wonderful World of Hyperlinks
• Let's create a hyperlink to
• Sun
  Microsystems,Inc.
• If we move our cursor over the words "Sun
  Microsystems, Inc.", our cursor should turn into
  a hand. We can access the Sun Microsystems
  homepage with just a click of the mouse.
  

12
S??ta?? ?pe?s???sµ??

• Sun
  Microsystems,Inc.
• ?a tags p?? ???s?µ?p?????ta? ??a ?pe?s??d?sµ???
  e??a? and .
• ?? ?e?µe?? Sun Microsystems, Inc. ???a? a?t? p??
  fa??eta? µe
• ?? http//www.sun.com e??a? ? t?p?? st?? ?p???
  p?µe.
• tag, s?µa??e? italics

13
?a?at???se??

• ?a tags, µp??e? ?a ???f??ta? µe ?efa?a?a ? µ????
  ???µµata p.?. e??a? t? ?d??
• ?p?????? ??? ep?peda ep??efa??d??, d?? h1, h2,
  h3, h4, h5, h6
• ?a ?e??, ?? ?a?a?t??e? ?e??? ??aµµ??,
  µetaf?????ta? se ??a ?e??.
• ?? ???ete a??a?? pa?a???f??, t? d????ete ??t??,
  µe .
• Ta tags, p??pe? ?a e??a? eµf???asµ??a
• tml , s?st?!
• , ?????!

14
???e??? ??aµµat?se????

• ?a??de??µa
• ???sd?????e? t? µ??e??? t?? ??aµµ?t??, ? pa???e?
  t?µ?? -6 .. 6
• ?a?at???s?
• H e?t??? ??t?e? ??a ?a???????? µ??e???
  ??aµµat?se????
• ???e? ??a a???µ?, p?? d????e? t? µ??e???.
• ??t? ?a?e?ta? attribute. ???ad? ?p???e?
• ???µa font size
• ??µ? ??a? a???µ?? ap? -6 .. 6
• Attributes/µe t?µ?? e?daµe ?a? st???
  ?pe?s??d?sµ???

15
???????µµ?s? ?e?µ????

• G?a e??????µµ?s? ?e?µ????
• ???t??
• a??ste??
• de???
• ?a?at???s?
• ?e?te t? attribute ?a? t?? t?µ? p?? pa???e?
• ????µe ep??tas? t?? e?t???? a??a??? pa?a???f??.
• ?pa?a?t?t? t? ??e?s?µ?

16
?pe?s??desµ?? ß
Ype?s??d?sµ?? p?? ?d??e? st?? SUN. href e??a? t?
attribute, http. ? t?µ? t??. ?p?s?ef?e?te t? href"http//www.sun.com"SUN
?pe?s??desµ?? p?? ?d??e? st? email href"mailtojburns_at_htmlgoodies.com"Click Here
To Write Me
17
???s???? ?????a?

• IMG s?µa??e? p??s???? e????a? st? s?µe?? p??
  µpa??e? t? tag
• SRC e??a? attribute, source,
• ?mage.gif e??a? t? ???µa t?? e????a?, ?a? t?µ?
  t?? attribute
• gif bmp jpeg/jpg e??a? µ??f?? ap????e?s??
  e????a?. ?a s?????ste?a e??a? gif, bmp

18
?????a ?a? ?pe?s??desµ?? a

• ??? µp????µe ?a ß????µe e????a, ?a? ?????ta? ????
  ?a p?µe se ??a site
• SRC"homepage.gif"
• ??af??? se s??s? µe p??????µe???? ?pe?s??d?sµ???
  st? ??s? p?? ?µpa??e t? ?e?µe?? ß??? e????a

19
?????a ?a? ?pe?s??desµ?? ß

• ?a?????e? t? µ??e??? t?? pe????????, ???? ap? t??
  e????a. ?? p???e?µ??? 0

20
??p???t?s? e????a? st? se??da

• ?? e????e? t?p??et???ta? ap? t?? browser sta
  a??ste??.
• ??t? µp??e? ?a a????e? p.?.

21
S??s? e????a? µe ?e?µe??

• text text
  text rwrwer
• text
  text text qweqwe
• text
  text text qweqweqweqwe

22
??? ?e?µ????, e????a

• ?p??e? ?a pa?at???sate ?t? top, middle, bottom
  attributes, ep?t??pe? µ??? µ?a ??aµµ? ?e?µ????
  ?a? t? ?p????p? p?e? ??t? ap? t?? e????a
• ??s? µ?? ???s?µ?p??e?te top, middle, bottom
  attributes. ???s?µ?p??e?ste ALIGN"left" and
  ALIGN"right".

23
???µ?s? µe?????? e????a?

• ?p??e? ?a ???µ?ste? t? ???? ?a? t? p??t?? t??
  e????a? se pixels

24
??????t?a d?a????st??? ??aµµ?

• ????µe a?af??e? t? p?? af??e? ??????t?a
  d?a????st??? ??aµµ?.
• ?atas?e???e? ??aµµ? 40 t?? µ???st??

25
???µata ?p?ß?????

• ?p?te?e? ep??tas? t?? tag.
• ?? ???µa p??sd?????eta? ap? t?? e?a??f?? ??d???.
• ? ap? t? ???µa t?? ???µat??
• ?a?ade??µata ??d????

26
Wallpapers

• ?p??e?te ?a ???s?µ?p???sete ?a? µ?a e????a ??
  background.
• ??t? ?a epa?a??f?e? p????? f????, ?ste ?a ?eµ?se?
  t?? ????? t?? browser
• ? e????a µp??e? ?a e??a? t?p?? gif/jpeg

27
???a?? ???µat?? ?e?µ???? a

• ??t???? p?? a??????? t? ???µa ???? t?? ?e?µ????
• text""-- To ???µa t?? ?e?µ????.
• link"" -- ?? ???µa t?? s??d?sµ??.
• alink"" -- ?? ???µa t?? s??d?sµ?? ?t?
  ???e? click.
• vlink"" -- ?? ???µa t?? s??d?sµ?? µet? t??
  ep?s?e?? t???.
• ???p?? ???s??
• ?
• ?
  t?.

28
???a?? ???µat?? ?e?µ???? ß

• ?? p??????µe?e? e?t???? a??????? ??? ???µa ????
  t?? ?e?µ????.
• ?? ???ete ?a a????ete µ???? t?? ?e?µ????
• ??????? ?e?µe??
• ?????e? µ??? t? s???e???µ??? ??µµ?t? ?e?µ????

29
???a?e? html

• Me t??? p??a?e? ß????µe se t??? ded?µ??a.
• ??? ?atas?e?????µe t?? p??a?a

30
??d??a? ??a d?µ??????a p??a?a

• The Directors
• Alfred
• Hitchcock
• David
• Lynch

• a??? t???? p??a?a.
• ep??efa??da p??a?a.
• ta ded?µ??a t?? p??a?a.
• table row, ??aµµ? p??a?a

31
???a?e? µ??f?p???s?

• cellpadding"13"
• The Directors
• Alfred
• Hitchcock
• David
• Lynch

• Bordersize, t? µ??e??? t?? e??te????? p?a?s???
  t?? p??a?a
• Cellspacingap?stas? µeta?? t?? ?e????
• Cellpaddingap?stas? ap? ta ???a t?? ?e????

32
???a?e? ??a ?µad?p???s? ?pe?s??d?sµ??

• cellpadding"12"
• 
  Sun
• Microsystems,Inc.
  
• 
  ?a?ep?st?µ?? ??p???
• 1.com/22"Formula
• 1
• CNN
  

Se t? d?af??e? ? ??d??a?, ap? a?t? t??
p??????µe??? d?af??e?a?
33
?????e? se p??a?e?

• ?p??e?te ?a t?p??et?sete e????e? st?? ??aµµ?? ?a?
  t?? st??e? e??? p??a?a
• ? µ??? p??s????/a??a?? st?? ??d??a
• ?p?? image.gif e??a? ? e????a p?? ???ete

34
??ste? a

• • O? ??ste? ?at??????p?????.
  • ?? ??ste? e??a? ??a?e?.
  • ?? ??ste? e??a? e????e?.

• O? ??ste? ?at??????p?????.
• ?? ??ste? e??a? ??a?e?.
• ?? ??ste? e??a? e????e?.

UL unordered list, d??ad? de? ???s?µ?p?????ta?
a???µ?? LI list item
35
??ste? ß
36
??ste? ?
37
?µf???asµ??e? ??ste?
38
??ste? ???sµ?? (Definition lists)
39
(No Transcript)