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
•
•
•
•
•
• /
• Yahoo! Google
HTML Browser+, Gears

• FLEX / Silverlight
•
• User
• HTML
•
•

•
•
• Dreamweaver

• Search Engine
Optimization

• HTML <table/>

• HTML

• HTML

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>

<html>
<head>
<title> </title>
</head>
<body>

</body>
</html>

DOCTYPE
X HTML

•
• <h1> ~ <h6>

• h1

<em>~</em>
<html>
<head>
<title> </title>
</head>
<body>
<h1>1 HTML</h1>
<p> HTML <em>Semantic </em> </p>
</body>
</html>

<strong>~</strong>
<html>
<head>
<title> </title>
</head>
<body>
<h1>1 HTML</h1>
<p> HTML <strong>Semantic </strong>
</p>
</body>
</html>

<a href=”...”>~</a>
<html>
<head>
<title> </title>
</head>
<body>
<h1>1 HTML</h1>
<p> HTML Semantic </strong> </p>
<a href=”http://josephj.com/”> </a>
</body>
</html>

<a href=”...”>~</a>
<html>
<head>
<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>
<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>
<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>
</tr>
<tr>
</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

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (15)

More from Joseph Chiang

More from Joseph Chiang (19)

Semantic HTML Basic