[數學軟體應用] 05 HTML+CSS
•
0 likes•1,936 views
政大應數「數學軟體應用」課程, 雖然主要教的是 Python 程式語言, 但今天介紹 HTML+CSS 的基礎。
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to [數學軟體應用] 05 HTML+CSS
Similar to [數學軟體應用] 05 HTML+CSS (20)
More from Yen-lung Tsai
Recently uploaded
Recently uploaded (6)
[數學軟體應用] 05 HTML+CSS
- 3. 網頁基本上只是個文字檔
- 6. 網頁語言叫 HTML
- 7. <!DOCTYPE html> <html lang="zh-TW"> <head> <title> </title> <meta charset="utf-8"> </head> <body> </body> </html> 簡單的 HTML 架構
- 9. HTML ⽤ tag 來表⽰這裡要放⼤、要插個圖、要做 表格等等。⽽ tag 有開必需有關 (以前是這樣, HTML 5 吹⽑求疵狀況都不⽤)。 我們先來一一解釋 <title> </title> ｛tag 有開必需有關
- 10. <html lang="zh-TW"> </html> 最外面用 <html>…</html> 包起來 順便告訴大家這是繁體中文網頁
- 11. <head> <title> </title> <meta charset="utf-8"> </head> head 區 放網頁的基本資訊, 如視窗標題、網頁資訊、一 些程式等等 (注意所有在網頁上出現的基本上 都在等等的 body 中)。
- 13. HTML 基本 tags
- 14. <!-- --> 加入註解
- 15. <h1> ... </h1> <h2> ... </h2> <h3> ... </h3> 標題 最大標題是 h1, 而 h2 次之, h3 再次之, 餘類 推。
- 16. <p> </p> 段落 用 <p> 和 </p> 把一段文字包起來。
- 17. <br> 強迫換行 你不久後就會發現, 如果沒有用段落包你的文 字, 換行時 HTML 是不。會。理。你的。這時 要強迫換行可用 但非必要請少用。 以前我們受過良好 HTML 訓練的, 為了死守有 關一定要有關這個原則, 會寫成 <br />。但現 在 HTML 5 不需要。
- 18. <img src="beans.png" alt=" "> 插入圖片 假設我們現在有一張咖啡豆的圖片叫 beans.png, 想放到網頁中。插入方式是這樣的: 如果檔案名那裡是一個超連結也是可以的。而 alt 屬性非常重要, 是圖 形無法顯示時的替代文 字 (良好設計的網頁現在列為必要選項)。
- 22. HTML 5 結構相關
- 23. 我們介紹兩個看起來沒什麼⽤, 但是很重要的 HTML 標籤。 <div> </div> 神秘的 div 和 span <span> </span>
- 24. ⽤同樣的標籤, 可能會有不同的作⽤, ⽐如說都⽤ p 標籤, 有時是平常⽂ 章⼀段, 有時是重點段落, 有時 是引述等等。我們可以⽤兩種屬性標記, ⽐如說 <p class="normal"> ... </p> id 和 class 屬性
- 26. CSS 美化你的網頁
- 27. HTML 基本上只管要放連結、要放⼤等等。 HTML 不管字型、顏⾊、排版。 這些東⻄現在都交給 CSS。 CSS 要做什麼
- 28. 假設我們有個 mystyle.css 檔, 可以在 HTML 的 <head>…</head> 中引⼊。 <link rel="stylesheet" type="text/css" href="mystyle.css"> CSS 基本引入法之一
- 29. 直接把所有的 CSS 放在 <head>…</head> 中。 <style type="text/css"> h1{ color:#FFCCCC; } </style> CSS 基本引入法之二
- 30. 直接加⼊在某個 tag 之中。 <h1 style="color:#FF0000;"> </h1> CSS 基本引入法之三
- 31. 設定好每個屬性⽤分號分開。 基本 CSS 語法 h1{ color: #FF0000; font-size: 20px; }
- 32. 假設我們有個 class 叫做 foo。 .foo{ ...; ...; } 定義某個 class 的 CSS p.foo{ ...; ...; } 改類型下某個標籤的 CSSfoo 這個 class 的 CSS
- 33. 假設我們有個 id 叫做 foo。 #foo{ ...; ...; } 定義某個 id 的 CSS #foo p{ ...; ...; } 改類型下某個標籤的 CSSfoo 這個 id 的 CSS
- 34. 連結標籤 a:link ⼀般連結 a:visited 已訪問過之連結 a:hover 指標移到連結上時 a:active 按下滑⿏鍵時
- 35. CSS 的 BOX 注意, 一個 box 可以是 div 畫出的區域, 也可以是幾乎 所有其他標籤, 如 p, h1 等等。
- 36. HTML 5 + CSS 進一步學習
- 38. HTML 5 + CSS 和我們什麼關係
- 39. Jupyter Notebook
- 40. Markdown Jupyter Notebook 下可以直接寫 HTML
- 42. 可以寫在程式裡
- 43. from IPython.display import display from IPython.display import HTML, Latex Jupyter 專屬 display