http archive orgweb HTML html head head body
網頁設計進步歷程 http: //archive. org/web/
HTML 基本架構 <html> <head> </head> <body> </html>
HTML title(頁面標題) <html> <head> <title>HTML Reference</title> </head> <body> The content of the document </body> </html>
HTML headings(文字標題) <html> <body> <h 1>This is heading 1</h 1> <h 2>This is heading 2</h 2> <h 3>This is heading 3</h 3> <h 4>This is heading 4</h 4> <h 5>This is heading 5</h 5> <h 6>This is heading 6</h 6> </body> </html>
HTML paragraphs (文字段落) <html> <body> <h 1>This is heading 1</h 1> <p>This is paragraph 1</p> <p>This is paragraph 2</p> <h 2>This is heading 2</h 2> <p>This is paragraph 1</p> <p>This is paragraph 2</p> </body> </html>
HTML Horizontal Rules (水平線 ) <html> <body> <h 1>This is heading 1</h 1> <p>This is paragraph 1</p> <hr> <h 2>This is heading 2</h 2> <p>This is paragraph 1</p> </body> </html>
HTML Line Break (換行) <html> </html> <body> <h 1>This is heading 1</h 1> <p> This is paragraph 1 word </p> <h 2>This is heading 2</h 2> <p>This is paragraph 1</p> <h 3>This is heading 3</h 3> <pre> This is paragraph 1 </pre> </body>
HTML links (連結) <html> <body> <a href="http: //www. ncu. edu. tw/">This is a link</a> </body> </html>
HTML links (使用名稱作為定位點) <html> <body> <a id="first">First Section</a> <h 1>This is heading 1</h 1> <h 2>This is heading 2</h 2> <h 3>This is heading 3</h 3> <h 4>This is heading 4</h 4> <h 5>This is heading 5</h 5> <h 6>This is heading 6</h 6> <a href="#first">Go To First Section</a> </body> </html>
HTML images (圖片) <html> <body> <img src= "google. jpg" width= "512" height="512" /> </body> </html>
HTML images(若有錯誤發生, 如圖 片不存在) <html> <body> <img src= "google" width= "512" height="512" alt="Google Icon"/> </body> </html>
HTML images (檔案存放路徑修改, HTML 亦須修正) <html> <body> <img src= "images/google. jpg" width= "512" height="512" /> </body> </html>
HTML 編碼 <html> <head> <meta charset="UTF-8"> </head> <body> <p>哈囉!中央大學!</p> </body> </html>
HTML tables (表格) <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
HTML tables (表格+圖片) <table border="1"> <tr> <td><a href="http: //www. ncu. edu. tw/">This is a link</a></td> <td>row 1, cell 2</td> </tr> <td>row 2, cell 1</td> <td><img src= "images/google. jpg" width="128" height="128" /></td> </tr> </table>
HTML tables (跨 column 列) <table border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table>
HTML tables (跨 row 行) <table border="1"> <tr> <th>First Name: </th> <td>Bill Gates</td> </tr> <th rowspan="2">Telephone: </th> <td>555 77 854</td> </tr> <td>555 77 855</td> </tr> </table>
HTML tables (增加表格標題) <table border="1"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <td>January</td> <td>$100</td> </tr> <td>February</td> <td>$50</td> </tr> </table>
HTML lists (列表) <html> <body> <ul> <li>Coffee</li> <li>Milk</li> </ul> </body> </html>
HTML lists (列表) <html> <body> <ol> <li>Coffee</li> <li>Milk</li> </ol> </body> </html>
HTML lists (列表標頭) <html> <body> <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> </body> </html>
HTML iframe (子視窗) �顯示其他網頁在當前的網頁上 <html> <body> <iframe src="http: //www. ncu. edu. tw/" width="500" height="500"></iframe> </body> </html>
使用 iframe 鑲嵌 You. Tube video
HTML 嵌入 �Embed(影音、聲音、Flash以及PDF檔嵌入網頁) �http: //www. w 3 schools. com/tags/tryit. asp? filename=tr yhtml 5_embed �Video(視頻嵌入網頁) �http: //www. w 3 schools. com/tags/tryit. asp? filename=tr yhtml 5_video �Audio(聲音嵌入網頁) �http: //www. w 3 schools. com/tags/tryit. asp? filename=tr yhtml 5_audio 補充：http: //www. ezonesoft. com. tw/Java. Script/Audio. Vedio. htm
HTML embed <html> <body> <embed width="420" height="315" src=https: //www. youtube. com/embed/IZXK 7 x. Sig. Mc/> </body> </html> 補充 ： http: //kcs. kcjh. ptc. edu. tw/~spt/computer/html/embed. htm
HTML audio <!DOCTYPE html> <body> <!--註解 <audio controls> <source src="a. mp 3" type="audio/mpeg"> Your browser does not support the audio element. </audio> --> <audio src= "a. mp 3" controls> </body> </html>
HTML text formatting(文字樣式) <html> <body> <p> <b> This text is bold </b> </p> <strong> This text is strong </strong> </p> <small> This text is small </small> </p> <i> This text is italic </i> </p> <mark> This text is marked </mark> </p> <p> This is <sub> subscript </sub> and <sup> superscript </sup> </body> </html>
HTML text formatting (E-mail) <html> <body> <address> Written by abc. com <a href="mailto: abc@abc. org">Email us</a> Address: Box 123, Taitung Phone: +12 34 56 78 </address> </body> </html>
HTML styles (於 HTML 元素增添樣式) <html> <body style="background-color: lightgrey"> <h 1>This is a heading</h 1> <p>This is a paragraph. </p> </body> </html>
HTML styles (於 HTML 元素增添樣式) <html> <body> <h 1 style="color: blue">This is a heading</h 1> <p style="color: red">This is a paragraph. </p> </body> </html>
HTML styles (於 HTML 元素增添樣式) �顏色給定方式 1. 使用顏色名稱 如 Red, Orange, Yellow, Cyan, Blue 等 2. 使用 RGB 數值 (red, green, blue) 如 rgb(255, 0, 0), rgb(255, 0), rgb(0, 255, 255), rgb(0, 0, 255) 3. 使用 HEX 數值 �如 #FF 0000, #FFFF 00, #00 FFFF, #0000 FF
HTML styles (於 HTML 元素增添樣式) <html> <body> <h 1 style="font-family: verdana">This is a heading</h 1> <p style="font-family: courier">This is a paragraph. </p> </body> </html>
HTML styles (於 HTML 元素增添樣式) <html> <body> <h 1 style="font-size: 300%“ >This is a heading</h 1> <p style="font-size: 160%“ >This is a paragraph. </p> </body> </html>
HTML styles (於 HTML 元素增添樣式) <html> <body> <h 1 style="font-size: 300%; color: blue">This is a heading</h 1> <p style="font-size: 160%; color: red">This is a paragraph. </p> </body> </html>
HTML form – Text fields (表單) <html> <body> <form> First name: <input type="text" name="firstname" /> Last name: <input type="text" name="lastname" /> </form> </body> </html>
HTML form - Text area (文本範圍) <html> <body> <textarea rows="4" cols="50"> The cat was playing in the garden. </textarea> </body> </html>
HTML form – Password field (密碼) <html> <body> <form> Password: <input type="password" name="pwd" /> </form> </body> </html>
HTML form – Radio buttons (單選按鈕) <html> <body> <form> <input type="radio" name="sex" value="male" /> Male <input type="radio" name="sex" value="female" />Female </form> </body> </html>
HTML form – Checkboxes (複選 ) <html> <body> <form> <input type="checkbox" name="vehicle" value="Bike" /> I have a bike <input type="checkbox" name="vehicle" value="Car" /> I have a car </form> </body> </html>
HTML form – Drop down list (下拉選單) <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select>
HTML form – Button (按鈕) <html> <body> <button>Click Me!</button> </body> </html>
HTML form – Button (增加按鈕互 動) <html> <body> <button onclick=alert("Hello!") >Click Me!</button> </body> </html>
HTML Layout (by Div) <html> <body> <div style="color: yellow"> <h 1>City Gallery</h 1> </div> <div style="color: green"> <h 2>London</h 2> <p>London is the capital city of England</p> </div> </body> </html>
HTML Layout (by Div) <html> <body> <div style="height: 150 px; backgroundcolor: lightgray"> <h 1 style="margin: 0 px">Header</h 1> </div> <div style="height: 300 px; backgroundcolor: lightblue"> <h 1 style="margin: 0 px">Content</h 1> </div> </body> </html>
HTML Layout (by Div) <html> <body> <div style="height: 150 px; background-color: lightgray"> <h 1 style="margin: 0 px">Header</h 1> </div> <div style="float: left; width: 200 px; height: 300 px; backgroundcolor: lightgreen"> <h 1 style="margin: 0 px">Menu</h 1> </div> <div style="height: 300 px; background-color: lightblue"> <h 1 style="margin: 0 px">Content</h 1> </div> </body> </html>
<html> <body> <div style="height: 150 px; background-color: lightgray"> <h 1 style="margin: 0 px">Header</h 1> </div> <div style="float: left; width: 200 px; height: 300 px; backgroundcolor: lightgreen"> <h 1 style="margin: 0 px">Menu</h 1> </div> <div style="height: 300 px; background-color: lightblue"> <h 1 style="margin: 0 px">Content</h 1> </div> <div style="height: 75 px; background-color: lightgray"> <h 1 style="margin: 0 px">Footer</h 1> </div> </body> </html>
<html> <body> <div style="height: 150 px; background-color: lightgray"> <h 1 style="margin: 0 px">Header</h 1> </div> <div style="float: left; width: 200 px; height: 300 px; background-color: lightgreen"> <h 1 style="margin: 0 px">Left Menu</h 1> </div> <div style="float: right; width: 200 px; height: 300 px; background-color: lightyellow"> <h 1 style="margin: 0 px">Right Menu</h 1> </div> <div style="height: 300 px; background-color: lightblue"> <h 1 style="margin: 0 px">Content</h 1> </div> <div style="height: 75 px; background-color: lightgray"> <h 1 style="margin: 0 px">Footer</h 1> </div> </body> </html>
<html> <body> <div style="height: 150 px; background-color: lightgray"> <h 1 style="margin: 0 px">Header</h 1> </div> <div style="float: left; width: 200 px; height: 300 px; background-color: lightgreen"> <h 1 style="margin: 0 px">Left Menu</h 1> </div> <div style="float: right; width: 200 px; height: 300 px"> <div style=height: 150 px; background-color: purple>Row 1</div> <div style=height: 150 px; background-color: blue>Row 2</div> <div style="height: 300 px; background-color: lightblue"> <h 1 style="margin: 0 px">Content</h 1> </div> <div style="height: 75 px; background-color: lightgray"> <h 1 style="margin: 0 px">Footer</h 1> </div> </body> </html>
- Slides: 56
