HTML
        Yahoo!
   Joseph Chiang /
  josephj@yahoo-inc.com
HTML
HTML

•                 HyperText Markup
    Language
    •
    •
        <.../>
•
http://fgps.tcc.edu.tw/~jon/jon.htm
HTML ?



• <big> </big>
• <font size=7 face=”   ”>   </
  font> 7
HTML
•
•
•
•
•
•
•
FLEX          Silverlight

• RIA (Rich Interface Application)
•           Player
•
•
•              HTML
•                ...
...
      HTML
HTML
•
    •
•
•
•
•                   /
• Yahoo!   Google
    HTML                Browser+, Gears
• FLEX / Silverlight
 •
 •           User
• HTML
 •
 •
Semantic


 vs. HTML
•
•
•                  Dreamweaver


•                         Search Engine
    Optimization
•    HTML   <table/>



•    HTML


•   HTML
HTML
             JavaScript
       CSS
Semantic

•                     HTML


• HTML
  •             CSS          JavaScript
•                      Dreamweaver
 ...
HTML
• http://www.w3schools.com/html/
•
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://
www.w3.org/TR/html4/strict.dtdquot;>
<html>
<head>
...
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://
www.w3.org/TR/html4/strict.dtdquot;>
<html>
<head>
...
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://
www.w3.org/TR/html4/strict.dtdquot;>
<html>
<head>
...
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://
www.w3.org/TR/html4/strict.dtdquot;>
<html>
<head>
...
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://
www.w3.org/TR/html4/strict.dtdquot;>
<html>
<head>
...
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://
www.w3.org/TR/html4/strict.dtdquot;>
<html>
<head>
...
•
•      <h1> ~ <h6>


• h1
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://
www.w3.org/TR/html4/strict.dtdquot;>
<html>
<head>
...
<p>~</p>
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://
www.w3.org/TR/html4/strict.dtdquot;>
<html...
<em>~</em>
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://
www.w3.org/TR/html4/strict.dtdquot;>
<ht...
<strong>~</strong>
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://
www.w3.org/TR/html4/strict.dtdqu...
<a href=”...”>~</a>
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://
www.w3.org/TR/html4/strict.dtdq...
<a href=”...”>~</a>
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://
www.w3.org/TR/html4/strict.dtdq...
<div>~</div>
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/
strict.dtdquot;>
<...
<span>~</span>
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/
strict.dtdquot;>...
Orz
               |   |○
          这样


                        (
)
<dl>
     <dt>Orz</dt>
       <dd>                |   |○
                      这样                   </dd>
     <dt>     </...
Nike


Dphiten
Nike Dry Fit
Nike


Casio


Nike
Adidas
Sony Cybershot
Dakine
<h2>                  </h2>
<ul>
       <li>Nike        </li>
       <li>         </li>
       <li>Dphiten           </li>...
4:00                (Energy-in +       )
5:00     GPS
5:00 ~ 10:00    (        ,         )
11:00 ~ 12:00
13:00 ~ 16:00
16:...
<h2>         </h2>
<ol>
       <li>4:00                  (Energy-in +               )</li>
    <li>5:00         GPS       ...
<table></table>
 120G + 1G RAM             Eee PC    8G + 1G RAM



Intel 800MHz / 120G HDD / 1G RAM            Intel Mobi...
<table></table>
<h3>       </h3>
<table>
<tr>
   <th></th><th>               120G + 1G RAM    </th><th> Eee PC   8G + 1G R...
id        class
<ol class=quot;bibliographyquot;>
    <li>
       <cite>quot;Colorimetry, Second Editionquot;, CIE    Publ...
• The Elements of Meaningful XHTML
  http://tantek.com/presentations/2005/09/
  elements-of-xhtml/
• Bring on the tables
 ...
•
    •
    •
    •
        •          http://tw.myblog.yahoo.com/jw!
            Q3lkkBafERy7ixxachp8Pg--/article?
      ...
Semantic HTML Basic
Semantic HTML Basic
Semantic HTML Basic
Upcoming SlideShare
Loading in …5
×

Semantic HTML Basic

1,980
-1

Published on

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
  • 感謝分享,內容很不錯,但這個網站的體驗太差了。實在是無語。
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
1,980
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
45
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Semantic HTML Basic

  1. 1. HTML Yahoo! Joseph Chiang / josephj@yahoo-inc.com
  2. 2. HTML
  3. 3. HTML • HyperText Markup Language • • <.../> •
  4. 4. http://fgps.tcc.edu.tw/~jon/jon.htm
  5. 5. HTML ? • <big> </big> • <font size=7 face=” ”> </ font> 7
  6. 6. HTML • • • • • • •
  7. 7. FLEX Silverlight • RIA (Rich Interface Application) • Player • • • HTML • Flash
  8. 8. ... HTML
  9. 9. HTML • • • • • • / • Yahoo! Google HTML Browser+, Gears
  10. 10. • FLEX / Silverlight • • User • HTML • •
  11. 11. Semantic vs. HTML
  12. 12. • • • Dreamweaver • Search Engine Optimization
  13. 13. • HTML <table/> • HTML • HTML
  14. 14. HTML JavaScript CSS
  15. 15. Semantic • HTML • HTML • CSS JavaScript • Dreamweaver Frontpage
  16. 16. HTML
  17. 17. • http://www.w3schools.com/html/ •
  18. 18. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http:// www.w3.org/TR/html4/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title> </title> </head> <body> </body> </html>
  19. 19. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http:// www.w3.org/TR/html4/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title> </title> </head> <body> </body> </html> DOCTYPE X HTML
  20. 20. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http:// www.w3.org/TR/html4/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title> </title> </head> <body> </body> </html>
  21. 21. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http:// www.w3.org/TR/html4/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title> </title> </head> <body> </body> </html>
  22. 22. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http:// www.w3.org/TR/html4/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title> </title> </head> <body> </body> </html>
  23. 23. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http:// www.w3.org/TR/html4/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title> </title> </head> <body> </body> </html>
  24. 24. • • <h1> ~ <h6> • h1
  25. 25. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http:// www.w3.org/TR/html4/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title> </title> </head> <body> <h1>1 HTML</h1> <p>HTML </p> <h2>HTML </h2> <p> </p> <h3> </h3> <p> </p> </body> </html>
  26. 26. <p>~</p> <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http:// www.w3.org/TR/html4/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title> </title> </head> <body> <h1>1 HTML</h1> <p>HTML </p> <h2>HTML </h2> <p> </p> <h3> </h3> <p> </p> </body> </html>
  27. 27. <em>~</em> <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http:// www.w3.org/TR/html4/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title> </title> </head> <body> <h1>1 HTML</h1> <p> HTML <em>Semantic </em> </p> </body> </html>
  28. 28. <strong>~</strong> <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http:// www.w3.org/TR/html4/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title> </title> </head> <body> <h1>1 HTML</h1> <p> HTML <strong>Semantic </strong> </p> </body> </html>
  29. 29. <a href=”...”>~</a> <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http:// www.w3.org/TR/html4/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title> </title> </head> <body> <h1>1 HTML</h1> <p> HTML Semantic </strong> </p> <a href=”http://josephj.com/”> </a> </body> </html>
  30. 30. <a href=”...”>~</a> <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http:// www.w3.org/TR/html4/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title> </title> </head> <body> <h1>1 HTML</h1> <p> HTML Semantic </strong> </p> <a href=”http://josephj.com/” target=”_blank”> </a> </body> </html>
  31. 31. <div>~</div> <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/ strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title> </title> </head> <body> <div> <a href=”about.html”> </a> <a href=”forum.php”> </a> </div> <div> <h1> </h1> <p> josephj.com <p> </div> </body> </html>
  32. 32. <span>~</span> <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/ strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title> </title> </head> <body> <div> <h1> </h1> <div> <span> </span> <a href=”...”>Yahoo! </a> </div> </div> </body> </html>
  33. 33. Orz | |○ 这样 ( )
  34. 34. <dl> <dt>Orz</dt> <dd> | |○ 这样 </dd> <dt> </dt> <dd> ( ) </dd> </dl>
  35. 35. Nike Dphiten Nike Dry Fit Nike Casio Nike Adidas Sony Cybershot Dakine
  36. 36. <h2> </h2> <ul> <li>Nike </li> <li> </li> <li>Dphiten </li> <li>Nike Dry Fit </li> <li>Nike </li> <li> </li> <li>Casio </li> <li> </li> <li>Nike </li> <li>Adidas </li> <li>Sony Cybershot </li> <li>Dakine </li> </ul>
  37. 37. 4:00 (Energy-in + ) 5:00 GPS 5:00 ~ 10:00 ( , ) 11:00 ~ 12:00 13:00 ~ 16:00 16:00 ~ 19:00 , , 19:00 ~ 21:00 21:30
  38. 38. <h2> </h2> <ol> <li>4:00 (Energy-in + )</li> <li>5:00 GPS </li> <li>5:00 ~ 10:00 ( , ) </li> <li>11:00 ~ 12:00 </li> <li>13:00 ~ 16:00 </li> <li>16:00 ~ 19:00 , , </li> <li>19:00 ~ 21:00 </li> <li>21:30 </li> </ol>
  39. 39. <table></table> 120G + 1G RAM Eee PC 8G + 1G RAM Intel 800MHz / 120G HDD / 1G RAM Intel Mobile / 8G HDD (Flash) / 1G RAM 29,900 14,490 Vista XP 130 30 Web
  40. 40. <table></table> <h3> </h3> <table> <tr> <th></th><th> 120G + 1G RAM </th><th> Eee PC 8G + 1G RAM </th> </tr> <tr> <th> </th><td>Intel 800MHz / 120G HDD / 1G RAM</td><td>Intel Mobile / 8G HDD (Flash) / 1G RAM</td> </tr> <tr> <th> </th><td>29,900</td><td>14,490</td> </tr> <tr> <th> </th><td>Vista</td><td>XP</td> </tr> <tr> <th> </th><td>130 </td><td>30 Web </td> </tr> <tr> <th> </th><td> </td><td> </td> </tr> <tr> <th> </th><td> </td><td> </td> </tr> <tr> <th> </th><td> </td><td> </td> </tr> </table>
  41. 41. id class <ol class=quot;bibliographyquot;> <li> <cite>quot;Colorimetry, Second Editionquot;, CIE Publication 15.2-1986, ISBN 3-900-734-00-3.</cite> </li> <li> <cite>quot;Cascading Style Sheets, level 1quot;, H. W. Lie, B. Bos, 17 December 1996.</cite> </li> <li> <cite>quot;Cascading Style Sheets, level 2, CSS2 Specificationquot;, B. Bos, H. W. Lie, C. Lilley, I. Jacobs, 12 May 1998</cite> </li> </ol> id id=”navigation”, id=”relate-site”, id=”login”
  42. 42. • The Elements of Meaningful XHTML http://tantek.com/presentations/2005/09/ elements-of-xhtml/ • Bring on the tables http://www.456bereastreet.com/archive/ 200410/bring_on_the_tables/
  43. 43. • • • • • http://tw.myblog.yahoo.com/jw! Q3lkkBafERy7ixxachp8Pg--/article? mid=5084
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×