WWW_WEB_入門實踐—網頁設計HTML_CSS語言描述的網頁
網頁內容與表現形式
一般新聞或科技報導—文本與圖形
網頁描述語言—語言規則格式與例子。元素、標籤、屬性、標題、段落、樣式、引用、註解、連結、下劃線、字體、色彩、字號、……。紙介質或網頁版面涉及到的元素及其屬性。
HTML語言—基礎描述語言
後臺計算機語言描述—HTML代碼
<html>
<body style="background-color:#ffff00">
</body>
</html>
文件保存
瀏覽器解釋輸出的前臺描述—表現形式
後臺計算機語言描述—HTML與CSS代碼
<html>
<styletype="text/css">
body{background-color: yellow}
</style>
<body>
</body>
</html>
前臺描述--瀏覽器解釋輸出—表現形式
後臺計算機語言描述—HTML代碼
<html>
<body>
<bodybgcolor="yellow">
<h1>第一個標題：我的網頁製作嘗試</h1>
<hr />
<pstyle="font-family:華文新魏;color:red;font-size:30px">
這是我的網頁製作嘗試的第一個段落。</p>
<hr />
<addressstyle="font-family:華文新魏;color:red;font-size:20px">
作者：工程師基礎</br>
發布者：訂閱號-蜘蛛網計算機語言
</address> <hr />
<p style="font-family:華文楷體;color:green">
這是我的網頁製作嘗試的第二個段落。<br/>
記事本文本編輯器建立fierst.txt，
將fierst.txt改為first.htm或first.html。
HTML 文檔描述網頁
請試運行該文件，體驗結果
/!--這是一段注釋。<>注釋不會在瀏覽器中顯示。--/
<!--這是一段注釋。注釋不會在瀏覽器中顯示。-->
</p>
<pstyle="font-family:隸書;color:green;font-size:20px">
這是第一次嘗試將圖片在網頁上顯示</p>
<pstyle="font-family:times;color:blue">
"圖first.jpg"width="460" height="220"
<img src="圖first.jpg"width="460" height="220" />
</p>
<p style="color:red;font-size:20px">
標題、內容章節（分段、……）、字體（大小、顏色、……）、……等等；
一種編排版式。
只要是自己想要的模式--表現形式-表達方式，基本上都可以滿足。瀏覽器開發者能想到大家的需求
--這是一款應用軟體產品呀。
</p>
</body>
</html>
前臺描述--瀏覽器解釋輸出—表現形式
後臺計算機語言描述—HTML與CSS代碼
<html>
<styletype="text/css">
body{background-color: yellow}
address{font-family:華文新魏;color:red;font-size:16px}
P1{font-family:華文新魏;color:red;font-size:30px}
P{font-family:華文楷體;color:green}
P2{font-family:隸書;color:green;font-size:20px}
P3{font-family:times;color:blue}
P4{color:red;font-size:20px}
</style>
<body>
<h1>第一個標題：我的網頁製作嘗試</h1>
<hr />
<p1>
這是我的網頁製作嘗試的第一個段落。</p1>
<hr />
<address >
作者：工程師基礎</br>
發布者：訂閱號-蜘蛛網計算機語言
</address> <hr />
<p>
這是我的網頁製作嘗試的第二個段落。<br/>
記事本文本編輯器建立fierst.txt，
將fierst.txt改為first.htm或first.html。
HTML 文檔描述網頁
請試運行該文件，體驗結果
/!--這是一段注釋。<>注釋不會在瀏覽器中顯示。--/
<!--這是一段注釋。注釋不會在瀏覽器中顯示。-->
</p>
<p2>
這是第一次嘗試將圖片在網頁上顯示</p2>
<p3 >
<img src="圖first.jpg"width="460" height="220" />
"圖first.jpg"width="460" height="220"
</p3>
<p4>
標題、內容章節（分段、……）、字體（大小、顏色、……）、……等等；
一種編排版式。
只要是自己想要的模式--表現形式-表達方式，基本上都可以滿足。瀏覽器開發者能想到大家的需求
--這是一款應用軟體產品呀。
</p4>
</body>
</html>
把網頁內容與修飾分開表達，人們可以專注某個特別關心的事情。
便於修改、重用、……。
請注意：
網頁設計模式—信息表達與表現形式—信息量與理解效率。
網頁描述需求與實現