[數學軟體應用] 05 HTML+CSS

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>'))

美化你的輸出

[數學軟體應用] 05 HTML+CSS

Education

Transcript of [數學軟體應用] 05 HTML+CSS