HTML 是 Hyper Text Markup Language 的縮寫，在這種語言架構下，所有與版面相關的命令都是以文字標註 (tag) 的方式儲存在單一的檔案內，這和 WORD 文件內以二進位命令碼來儲存版面格式是不相同的，以文字方式來儲存的話其格式是完全透明的，任何人可以用一般的文字編輯器來編輯文件的內容，此格式遵循一個由許多廠商與學術研究機關共同參予的標準制定協會的規定，排版的動作是在瀏覽器內動態進行的，以下我們分為幾個部份簡介一下基本的 HTML 架構：
基本架構
<--Author:Pei-yih Ting-->
<--Create Date :12/15/1998-->
<html>...</html>
<head>...</head>
<meta>...</meta>
<body>...</body>
範例：
<HTML>
<HEAD>
<title>文件標題</title>
<meta charset="BIG5">
</HEAD>
<BODY>
文件主體
</BODY>
</HTML>
<title> 標籤的用途：自行訂定文件的標題名稱，每一個 HTML 文件只有一個標題，這個標題將會顯示於瀏覽器的視窗標題欄上。而大部份瀏覽器所顯示的書簽或是過去瀏覽主題頁也都是顯示這個文件標題。
背景顏色與文字顏色
<body bgcolor=#rrggbb text=#rrggbb
link=#rrggbb vlink=#rrggbb>
<body background="image-URL">
bgcolor --- 背景顏色
text --- 文字顏色
link --- 連結文字顏色
vlink --- 已閱讀過連結文字顏色
background ---背景圖案
顏色是以十六進位數來表示 分別為(紅 藍 綠 red-green-blue)三原色，rr gg bb 的每一值為十六進位數: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f
例如 BGCOLOR="#FFFF00"
代表紅色成分 FF (十進位的 255), 代表綠色成分 FF (十進位的 255), 代表x藍色成分 0 ,紅配綠為黃色背景顏色。
背景圖案
<body background="image-URL" bgproperties=FIXED>
在選用背景圖案時 , 應力求花樣簡單清晰 ,以免造成文字或是其它內容不易辨認的現象。
連結
<a href="URL"> ... </a>
範例:
請按一下畫底線的藍字，參觀
<a href="http://www.ntou.edu.tw">海洋大學首頁</a>請按一下畫底線的藍字，參觀 海洋大學首頁
連結到同文件的其它部份
<a href="#name"> ... </a>
....
<a name="name"> ... </a>
範例：連結處：
<a href="#jump-test">
如果您要看 "文件基本架構"
</a>
被連結處：
<a name="jump-test">文件基本架構</a>
連結到不同文件的其它部份
<a href="URL#name"> ... </a>
<a name="name"> ... </a>
影像地圖
水平線
<hr>
<hr size=#>
<hr width=#>
<hr align=#> #=left, right
範例：<hr size=10>
<hr width=50>
<hr width=50%>
<hr width=50% align=left>
標題
國立台灣海洋大學
<h1>國立台灣海洋大學</h1> (24pt)
國立台灣海洋大學
<h2>國立台灣海洋大學</h2> (18pt)
國立台灣海洋大學
<h3>國立台灣海洋大學</h3> (14pt)
國立台灣海洋大學
<h4>國立台灣海洋大學</h4> (12pt)
國立台灣海洋大學
<h5>國立台灣海洋大學</h5> (10pt)
國立台灣海洋大學
<h6>國立台灣海洋大學</h6> (8pt)
字形大小
國立台灣海洋大學
<font size=7>國立台灣海洋大學</font> (36pt)
國立台灣海洋大學
<font size=6>國立台灣海洋大學</font> (24pt)
國立台灣海洋大學
<font size=5>國立台灣海洋大學</font> (18pt)
國立台灣海洋大學
<font size=4>國立台灣海洋大學</font> (14pt)
國立台灣海洋大學
<font size=3>國立台灣海洋大學</font> (12pt)
國立台灣海洋大學
<font size=2>國立台灣海洋大學</font> (10pt)
國立台灣海洋大學
<font size=1>國立台灣海洋大學</font> (8pt)
更改字體
國立台灣海洋大學 Bold
<b>國立台灣海洋大學 Bold</b>
國立台灣海洋大學 Italic
<i>國立台灣海洋大學 Italic</i>
國立台灣海洋大學 Underline
<u>國立台灣海洋大學 Underline</u>
blink
<blink>國立台灣海洋大學 Typewriter</blink>
國立台灣海洋大學 Superscript
國立台灣海洋大學 <sup>Superscript</sup>
國立台灣海洋大學 Subscript
國立台灣海洋大學 <sub>Subscript</sub>
國立台灣海洋大學 Strike through
<s>國立台灣海洋大學 Strike through</s>
段落排版 <p>
範例：
WWW到底能做什麼？
基本上這是不可限量的。
WWW到底能做什麼？<p>基本上這是不可限量的。
換列 <br>
範例：
WWW到底能做什麼？
基本上這是不可限量的。
WWW到底能做什麼？<br>基本上這是不可限量的。
不准換列 <nobr>
置於頁面中央
<hn align=center>...</hn>
<p align=center>...</p>
<center>...</center>
範例：
<h3 align=center>
網際網路!!
</h3>
<center>
網際網路!!
</center>
列示
無編號列示
<ul>
<li>...
<li>...
</ul>
範例：
- 集線器
- 網路卡
- 路由器
<ul><ul>
<li>集線器
<li>網路卡
<li>路由器
</ul></ul>
有編號列示
<ol>
<li>...
<li>...
</ol>範例：
- 電子郵件 (E-Mail)
- 全球資訊網 (WWW)
<ul>
<li>電子郵件 (E-Mail)
<li>全球資訊網 (WWW)
</ul>
大多數瀏覽器都可以顯示 GIF 和 JPG 兩種格式的圖形檔 ，GIF 檔一般用於商標、圖示、與插圖，JPG 檔用於照片。
其他影像格式像 BMP 檔案，Internet Explorer 可以直接看到，但是 NetScape 就只能下載存檔或是用外掛的程式來觀看。
<img src=image_URL>
<img src=image_URL alt=alternate-text>
只能顯示文字的瀏覽器或是當你將瀏覽器的自動下載影像選像關閉後，瀏覽器只會顯示 "alternate-text" 而不顯示圖片。
範例：
<img src=URL alt="替代文字" align=top>
<img align=#> #=top, left, right, middle, bottom
<img vspace=# hspace=#> #=value
<img border=#> #=value
表格基本標籤
<table>...</table> - 表格
<tr>...</tr>- 表格列
<th>...</th>- 表格標題
<td>...</td>- 表格內涵
範例：
國語 數學 音樂 80 70 85
<table border=1>
<tr>
<th>國語</th>
<th>數學</th>
<th>音樂</th>
<tr>
<td>80</td>
<td>70</td>
<td>85</td>
</table>