Semantic HTML Basic

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

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 • Flash

... 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 Frontpage

• 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> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title> </title> </head> <body> </body> </html>

<!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

<!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>

• • <h1> ~ <h6> • h1

<!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>

<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>

<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>

<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>

<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>

<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>

<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>

Orz | |○ 这样 ( )

Nike Dphiten Nike Dry Fit Nike Casio Nike Adidas Sony Cybershot Dakine

<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>

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

<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>

<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

<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>

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”

• 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/

• • • • • http://tw.myblog.yahoo.com/jw! Q3lkkBafERy7ixxachp8Pg--/article? mid=5084

Semantic HTML Basic

by Joseph Chiang

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 4

Statistics

Semantic HTML Basic Presentation Transcript