Download presentation
Presentation is loading. Please wait.
1
文字與圖片 Yen-Cheng Chen IM, NCNU 例子與練習:
2
區塊元素 與 行內元素 區塊元素(block-level) 行內元素(inline): 不會重啟新行，只佔所需的寬度
保留矩形區塊，換行重新開始，寬度: 自左至右占滿 h1, h2, h3, h4, h5, h6 div, p, pre hr blockquote, address, ol, ul, li dl, dt, dd 行內元素(inline): 不會重啟新行，只佔所需的寬度 span, b, i, u, font, sub, sup, br,…
3
Example <h1>Heading 1</h1> <p>The first paragraph is here.</p><hr /> <p>The second paragraph is here. There is a span area <span style="color:red">red area</span>. E = m<i>c</i><sup>2</sup></p>
4
標題文字<hx> h1, h2, h3, h4, h5, h6
<h1>This is heading 1</h1> 線上練習:
5
建立段落(p, blockquote) <p> <blockquote>
<p>使用p元素來建立…</p> <blockquote> <h3>區塊元素</h3> <p>瀏覽器在遇到區塊元素(例如指定段落的p元素)的時候，會保留一塊長方形…</p> … </blockquote>
6
預先格式化的文字<pre> 使用 顯示一個空白字元 使用<pre>, 完全依照原始檔空白及換行顯示
不建議使用 使用 顯示一個空白字元 使用<pre>, 完全依照原始檔空白及換行顯示
7
項目列表(List) Unordered list 巢狀列表 <ul> <li> XHTML規範的版本 :
<li>XHTML 1.0</li> <li>XHTML 1.1</li> <li>XHTML 2.0</li> </ul> 巢狀列表 <ul> <li> XHTML規範的版本 : <li>XHTML 1.0</li> <li>XHTML 1.1</li> <li>XHTML 2.0</li> </ul> </li> …
8
Ordered List <ol> <li>XHTML 1.0</li>
<ol start="5">
9
定義列表 <dl> <dt>HTML</dt> <dd>網頁所使用的標記語言</dd> <dt>XHTML</dt> <dd>由HTML與XML整合而成的標記語言</dd> <dt>CSS</dt> <dd>用來改變網頁元素的外觀與樣式</dd> <dt>JavaScript</dt> <dd><h3>用來建立動態的網頁</h3></dd> </dl>
10
換行<br /> 與 水平線<hr />
HTML<br /><br />XHTML<br /> CSS<br /><br /> <hr /> <hr />網頁設計所需要的技術 <hr />HTML <hr />XHTML<hr />CSS<hr />
11
表示語意的文字元素 ex3-8.html <cite>背影</cite>
<code>var i = 1;</code> <var>i</var> <samp>:\></samp> <kbd>EXIT</kbd> <del>李小程</del> <ins>陳大龍</ins> <em>不要</em> <q>今日事今日畢</q> ex3-8.html
12
指定外觀的文字元素 不建議使用 <b>粗體</b> <big>比預設的字體稍大</big>
<center>這一行顯示置中的文字</center> <i>斜體</i> <small>比預設的字體稍小</small> <strike>加刪除線</strike> πr<sup>2</sup> H<sub>2</sub>SO<sub>4</sub> <tt>電報字體</tt> <u>加底線</u>
13
一般用途元素 區塊元素 <div> 行內元素 <span> <div id="fish">
<h1>捕魚歌</h1> <img src="大魚.jpg" alt="" /> <p>白浪滔滔我不怕，掌起舵兒… </p> </div> 行內元素 <span> <span style="color: #FF0000">紅</span>, <span style="color: #0000FF">藍</span>, <span style="color: #00FF00">綠</span>
14
特殊字元
15
Deprecated Tags and Attributes
(不建議使用)
16
HTML Style HTML Style Attribute
<body style="background-color:yellow">…</body> <p style="font-family:courier new; color:red">…</p> <span style="font-size:20px">…</span> <h1 style="text-align:center">…</h1> <span style="font-weight:bold">…</span> <span style="text-decoration:line-through">…</span>
17
<body style="background-color:#cff">
<h1 style="text-align:center">HTML Style</h1> <p style="font-family:courier new; color:darkblue">In HTML 4, some <span style="font-size:24px">tags and attributes</span> are defined as deprecated. <span style="font-weight:bold">Deprecated</span> means that they will not be supported in future versions of HTML and XHTML. The message is clear: <span style="text-decoration:line-through">Don't</span> Avoid the use of deprecated tags and attributes.</p> </body>
18
Semantic Elements Semantic Elements: Elements with a meaning
Semantic Elements: Elements with a meaning <div id="content"> <div id="header">…</div> <div id="nav">…</div> … <div id="footer">…</div> </div>
19
HTML5 Semantic Elements
Tag Description <article> an article <aside> content aside from the page content <details> additional details that the user can view or hide <figcaption> a caption for a <figure> element <figure> self-contained content (illustrations, diagrams, photos, code listings) <footer> a footer for a document or section <header> a header for a document or section <main> the main content of a document <mark> marked/highlighted text <nav> navigation links <section> a section in a document <summary> a visible heading for a <details> element <time> a date/time
20
圖片( Image)
21
<img src="…" alt="…" … />
<img src="fish.jpg" alt="大魚" /> 屬性 src alt width height title usemap ismap longdesc
22
<img src="yellow.jpg" alt="黃花風鈴" title="暨大黃花風鈴" /><br /> <img src="yellow.jpg" alt="黃花風鈴" width="200" /> <img src="yellow.jpg" alt="黃花風鈴" height="200" /> <img src="yellow.jpg" alt="黃花風鈴" width="200" height="200" />
Similar presentations
