HTML

Transcript

1. HTML
2. HTML 是沙毀
3. HTML 是沙毀 !3 ▪ HyperText Markup Language
 超⽂文字標記語⾔言 HTML／
4. HTML 是沙毀 !4 ▪ HyperText Markup Language
 超⽂文字標記語⾔言 HTML／
5. HTML 是沙毀 !5 ▪ HyperText Markup Language
 超⽂文字標記語⾔言 HTML／
6. HTML 是沙毀 !6 ▪ HyperText Markup Language
 超⽂文字標記語⾔言 ▪ 純⽂文字檔 (.htm/.html) HTML／
7. HTML 是沙毀 !7 ▪ HyperText Markup Language
 超⽂文字標記語⾔言 ▪ 純⽂文字檔 (.htm/.html) ▪ 不是程式語⾔言，只是標記語⾔言 HTML／
8. HTML 是沙毀 !8 ▪ HyperText Markup Language
 超⽂文字標記語⾔言 ▪ 純⽂文字檔 (.htm/.html) ▪ 不是程式語⾔言，只是標記語⾔言 HTML／
9. HTML 是沙毀 !9 ▪ HyperText Markup Language
 超⽂文字標記語⾔言 ▪ 純⽂文字檔 (.htm/.html) ▪ 不是程式語⾔言，只是標記語⾔言 HTML／
10. !10 網頁技術 HTML JavaScript CSS HTML／ 架構 樣式 ⾏行為 網⾴頁的內容 網⾴頁的外觀 網⾴頁和使⽤用者的互動
11. !11 網頁技術 HTML JavaScript CSS HTML／ 架構 樣式 ⾏行為 網⾴頁的內容 網⾴頁的外觀 網⾴頁和使⽤用者的互動
12. Hands On
13. !13 準備工具 ▪ Browser 瀏覽器 ▪ Google Chrome ▪ FireFox ▪ Text Editor 純⽂文字編輯器 ▪ Sublime Text ▪ Vim ▪ Notepad++
14. Why not Dreamweaver? or FrontPage, Namo WebEditor, etc…
15. 手寫比較快＆乾淨
16. 手寫比較快＆乾淨 沒有新技術時差
17. 手寫比較快＆乾淨 沒有新技術時差 不被工具限制
18. Setup
19. !19 基本架構 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hi</title> </head> <body> ... </body> </html>
20. !20 基本架構 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hi</title> </head> <body> ... </body> </html>
21. !21 基本架構 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hi</title> </head> <body> ... </body> </html>
22. !22 基本架構 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hi</title> </head> <body> ... </body> </html>
23. !23 基本架構 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hi</title> </head> <body> ... </body> </html>
24. !24 基本架構 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hi</title> </head> <body> ... </body> </html>
25. !25 基本架構 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hi</title> </head> <body> ... </body> </html>
26. !26 基本架構 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hi</title> </head> <body> ... </body> </html>
27. !27 基本架構 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hi</title> </head> <body> ... </body> </html>
28. 基本標籤
29. 基本標籤 主標題 <h1> </h1> (heading)
30. 基本標籤 標題ㄧ <h1> </h1> 標題二 標題三 標題四 標題五 標題六 <h2> </h2> <h3> </h3> <h4> </h4> <h5> </h5> <h6> </h6>
31. 段落段落，段落段落段落段落，段落段落段落 段落段落段落，段落段落段落段落，段落段落 段落段落，段落段落段落段落段落段落，段落 段落，段落段落，段落段落，段落段落，段落 段落段落段落，段落段落。 ! 段落段落，段落段落段落段落，段落段落段落 段落段落段落，段落段落段落段落，段落段落 段落段落，段落段落段落段落段落段落。 基本標籤 <p> </p> <p> </p> (paragraph)
32. !32 Hands On <!DOCTYPE html> <html < < < </ < ! ! </ </ <h1>如何⽤用利瑪竇造句？</h1> <p>我昨天才剛把綠⾖豆種下去，今天⽴立⾺馬
 ⾖豆⼦子就⻑⾧長出來了呢！</p> <p>此監聽內容有利⾺馬⾾鬥⾛走⺩王⾦金平。</p>
33. 文字文字文字文字文字文字文字文字文 字文字文字文字文字文字文字文字文字 文字文字文字文字文字
 文字文字文字文字文字文字文字文字文 字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字 ! 基本標籤 <br> (break)
34. 重要 基本標籤 <strong> </strong>
35. 基本標籤 <em> </em>
36. 刪除線 基本標籤 <del> </del>
37. ‧項目一 ‧項目二 ‧項目三 ‧項目四 ‧項目五 基本標籤 <ul> </ul> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li>
38. 1. 項目一 2. 項目二 3. 項目三 4. 項目四 5. 項目五 基本標籤 <ol> </ol> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li>
39. !39 Hands On ! ! ! < < </ < ! ! ! ! ! </ </ <ul> <li>君⼦子坦蕩盪，⼩小⼈人寫作業。</li> <li>商⼥女不知亡國恨，⼀一天到晚寫作業。</li> <li>舉頭望明⽉月，低頭寫作業。</li> <li>洛陽親友如相問，就說我在寫作業。</li> <li>少壯不努⼒力，⽼老⼤大寫作業。</li> <li>垂死病中驚坐起，今天還沒寫作業。</li> </ul>
40. !40 Hands On ! ! ! < < </ < ! ! ! ! ! </ </ <ol> <li>君⼦子坦蕩盪，⼩小⼈人寫作業。</li> <li>商⼥女不知亡國恨，⼀一天到晚寫作業。</li> <li>舉頭望明⽉月，低頭寫作業。</li> <li>洛陽親友如相問，就說我在寫作業。</li> <li>少壯不努⼒力，⽼老⼤大寫作業。</li> <li>垂死病中驚坐起，今天還沒寫作業。</li> </ol>
41. 超連結 基本標籤 <a href="http://google.com"> </a> (anchor)
42. 超連結 基本標籤 <a href="http://google.com" target=“_blank"> </a>
43. 超連結 基本標籤 <a href="anotherpage.htm"> </a>
44. 超連結 基本標籤 <a href="/index.htm"> </a>
45. !45 Hands On ! ! ... < < </ < ! </ </ <a href="homework.html">寫作業</a> index.html
46. !46 Hands On ! ! ! ! ! ! ... < < < < < < < </ ! </ </ <a href="index.html">回⾸首⾴頁</a> homework.html
47. 基本標籤 <img src="...">
48. 基本標籤 <hr>
49. 表格欄位 表格欄位 表格欄位 表格欄位 表格欄位 表格欄位 表格欄位 表格欄位 表格欄位 基本標籤 <table> </table> <tr> </tr> <tr> </tr> <tr> </tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td>
50. <center> <font> <small> <big> <u> <b> <i>
51. <center> <font> <small> <big> <u> <b> <i> HTML 只管內容、意義 看起來怎樣是 CSS 的事
52. !52 More ▪ W3School http://www.w3schools.com/
53. CSS