程式語言教學誌 FB, YouTube: PYDOING: HTML 4.01 快速導覽

瀏覽器裡的基本度量單位與電腦螢幕一樣都是畫素 (pixel) ，例如文書編輯軟體中字型大小為 12 的文字，就是高為 12 畫素

由於中文為正方形的字體，所以中文字型大小高、寬相等，英文或其他外文，高、寬可能會不同。

我們可以指定文字、圖形或任何在瀏覽器 (broswer) 中顯示的畫素，畫素為絕對單位，例如下例中的圖檔，我們在 <img> 中利用 width 屬性設定為 320 畫素，原圖為 500×375

<html>
<head>
<title>網頁標題</title>
</head>
<body>
指定圖檔的顯示畫素 <br / >
<img width="320" src="example.jpg" />
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：example17.html
     功能：示範 HTML 4.01 標記語言的使用 
     作者：張凱慶
     時間：西元 2011 年 5 月 -->

瀏覽器開啟如下

除了設定畫素的絕對單位外，也可以設定成百分比的相對單位，例如

<html>
<head>
<title>網頁標題</title>
</head>
<body>
指定圖檔的顯示百分比 <br / >
<img width="25%" src="example.jpg" />
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：example18.html
     功能：示範 HTML 4.01 標記語言的使用 
     作者：張凱慶
     時間：西元 2011 年 5 月 -->

瀏覽器開啟如下

下例為文字的例子

<html>
<head>
<title>網頁標題</title>
</head>
<body>
<p>網頁的預設文字樣式</p>
<p style="font-size:12;">文字為 12 畫素</p>
<p style="font-size:25%;">文字為 25% 大小</p>
<p style="font-size:400%;">文字為 400% 大小</p>
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：example19.html
     功能：示範 HTML 4.01 標記語言的使用 
     作者：張凱慶
     時間：西元 2011 年 5 月 -->

如下