Post on 11-Jan-2017
05 HTML+CSS 網頁第一課
2016年「數學軟體應用」
政⼤應數蔡炎⻯
網⾴ 只是某種格式的文件檔
網頁基本上只是個文字檔
文件存在你的電腦
世界各地的人用他們的電腦
把這個純文字檔抓回去看。
當然不是什麼都要讓人看所以有「網頁伺服器」 (如 Apache)
網頁語言叫 HTML
<!DOCTYPE html><html lang="zh-TW"> <head><title> </title> <meta charset="utf-8"> </head><body>
</body></html>
簡單的 HTML 架構
一打開就是好驚人的網頁
什麼也沒有!
HTML ⽤ tag 來表⽰這裡要放⼤、要插個圖、要做表格等等。⽽ tag 有開必需有關 (以前是這樣, HTML 5 吹⽑求疵狀況都不⽤)。
我們先來一一解釋
<title> </title>｛tag 有開必需有關
<html lang="zh-TW">
</html>
最外面用 <html>…</html> 包起來
順便告訴大家這是繁體中文網頁
<head><title> </title> <meta charset="utf-8"> </head>
head 區
放網頁的基本資訊, 如視窗標題、網頁資訊、一
些程式等等 (注意所有在網頁上出現的基本上
都在等等的 body 中)。
<body>
</body>
Body: 真正網頁要呈現的內容
HTML 基本 tags
<!-- -->
加入註解
<h1> ... </h1><h2> ... </h2><h3> ... </h3>
標題
最大標題是 h1, 而 h2 次之, h3 再次之, 餘類
推。
<p> </p>
段落
用 <p> 和 </p> 把一段文字包起來。
<br>
強迫換行
你不久後就會發現, 如果沒有用段落包你的文
字, 換行時 HTML 是不。會。理。你的。這時
要強迫換行可用
但非必要請少用。
以前我們受過良好 HTML 訓練的, 為了死守有
關一定要有關這個原則, 會寫成 <br />。但現
在 HTML 5 不需要。
<img src="beans.png" alt=" ">
插入圖片
假設我們現在有一張咖啡豆的圖片叫
beans.png, 想放到網頁中。插入方式是這樣的:
如果檔案名那裡是一個超連結也是可以的。而
alt 屬性非常重要, 是圖 形無法顯示時的替代文
字 (良好設計的網頁現在列為必要選項)。
<a href="http://yenlung.km.nccu.edu.tw"> </a>
插入超連結
接著我們來做網頁很常見的超連結, 請看範例。
<ul><li>HTML</li><li>CSS</li><li>Python</li>
</ul>
列表之一
HTML 的清單或列表有兩種, 一種是沒有標號的,
比如說:
<ol><li>HTML</li><li>CSS</li><li>Python</li>
</ol>
列表之二
另一種是有標號的列表, 比如說:
HTML 5 結構相關
我們介紹兩個看起來沒什麼⽤, 但是很重要的 HTML 標籤。
<div> </div>
神秘的 div 和 span
<span> </span>
⽤同樣的標籤, 可能會有不同的作⽤, ⽐如說都⽤ p 標籤, 有時是平常⽂ 章⼀段, 有時是重點段落, 有時是引述等等。我們可以⽤兩種屬性標記, ⽐如說
<p class="normal"> ... </p>
id 和 class 屬性
HTML 5 的基本結構
<header>…</header>
<nav>…</nav>
<article>…</article>
<aside>…</aside>
<footer>…</footer>
頁首
導覽連結
網頁的主要內容
邊欄
頁尾
CSS 美化你的網頁
HTML 基本上只管要放連結、要放⼤等等。 HTML 不管字型、顏⾊、排版。 這些東⻄現在都交給 CSS。
CSS 要做什麼
假設我們有個 mystyle.css 檔, 可以在 HTML 的 <head>…</head> 中引⼊。
<link rel="stylesheet" type="text/css" href="mystyle.css">
CSS 基本引入法之一
直接把所有的 CSS 放在 <head>…</head> 中。
<style type="text/css">h1{color:#FFCCCC;
}</style>
CSS 基本引入法之二
直接加⼊在某個 tag 之中。
<h1 style="color:#FF0000;"></h1>
CSS 基本引入法之三
設定好每個屬性⽤分號分開。
基本 CSS 語法
h1{color: #FF0000;font-size: 20px;
}
假設我們有個 class 叫做 foo。
.foo{...;...;
}
定義某個 class 的 CSS
p.foo{...;...;
}
改類型下某個標籤的 CSSfoo 這個 class 的 CSS
假設我們有個 id 叫做 foo。
#foo{...;...;
}
定義某個 id 的 CSS
#foo p{...;...;
}
改類型下某個標籤的 CSSfoo 這個 id 的 CSS
連結標籤
a:link ⼀般連結 a:visited 已訪問過之連結 a:hover 指標移到連結上時 a:active 按下滑⿏鍵時
CSS 的 BOX
注意, 一個 box 可以是 div 畫出的區域, 也可以是幾乎
所有其他標籤, 如 p, h1 等等。
HTML 5 + CSS 進一步學習
學習資源
http://www.w3schools.com/
HTML 5 + CSS 和我們什麼關係
Jupyter Notebook
MarkdownJupyter Notebook 下可以直接寫 HTML
swipe.to用 Markdown 快速做簡報!
可以寫在程式裡
from IPython.display import displayfrom IPython.display import HTML, Latex
Jupyter 專屬 display
display(HTML('<h2>hi</h2>'))
美化你的輸出