文章

網頁設計 – HTML 基本排版

在瞭解 HTML 文件結構 之後,您已經知道,不論您如何在 <body> 標籤內將任何文字換行,網頁的結果其實還是不會換行,而且不論您加了多少空白,始終最多看到的結果還是只有一個空白,這樣怎麼行呢?

當然不行,我們可是要在網頁上放一些文章,或是寫一些產品介紹的啊,所以一定要有方式可以讓我們做一些基本排版呀。

HTML 的換行

換行其實很簡單,加入 <br> 標籤就可以了。

<html>

  <head>
    <title>網頁設計教學 HTML - 換行</title>
  </head>
  
  <body>
    哈囉!<br><br>我換了 2 行喔 ...
  </body>
  
</html>

執行結果如下:

哈囉!

我換了 2 行喔 ...

換行為什麼叫 <br> 呢?它是取自英文 a line break 斷行之意,而 break 就是中斷、換行的動作, <br> 取自 break 的前兩個字母縮寫。這樣您記起來了嗎?

另外,眼尖的你可能有發現到,一般 HTML 的標籤不是都有像是 <body> 這樣的開始標籤,和 </body> 這樣的結束標籤嗎?為何 <br> 沒有呢?原因很簡單,因為 <br> 並不像其它標籤是一個「區塊」,在它所出現的地方就是立即要強迫換行的地方了,它不會包住任何其它的內容,所以它不需要有 </br> 結束標籤。聰明如你,這樣應該很容易懂吧!

HTML 的空白 (空格)

為什麼我編寫的 HTML 中,加了很多空白還是無效呢?因為我們在 HTML 文件結構 這篇有提到, 網頁瀏覽器 其實是不管你的換行和多餘的空白的,即使所有內容都寫在同一行,瀏覽器還是會依您所下達的標籤語法去判斷要如何顯示。

就像上面的換行 <br> 連續用了 2 次,就換了兩行,而且 <br> 後面直接接著文字,它還是出現在換兩行後的最開頭,不會跟「哈囉!」連接在一起。

也就像在 HTML 文件結構 這篇的最後,我們有建議您儘量讓不同的標籤區塊去換行和內縮 HTML 內容,這樣您會比較好閱讀 (但對電腦而言是沒差的) ,也比較不容易寫錯,一個好的網頁設計師通常會這麼做。也因此,如果因為換行或內縮就讓你實際的內容格式跑掉了,那可不行呢!所以,當然瀏覽器預設對於內文換行和多餘空白是當作視而不見的。

因此,如果您直接在文字和文字中間空白了 5 次,或放更多的空白,實際上它還是只會有一個空白。例如:

<html>

  <head>
    <title>網頁設計教學 HTML - 無效空白</title>
  </head>
  
  <body>
    哈囉!這邊     空白了五次,但只有一個空白效果。
  </body>
  
</html>

執行結果如下:

哈囉!這邊 空白了五次,但只有一個空白效果。

上面的結果中,多餘的空白是不會有作用的。

而如果我們希望能夠連續顯示好幾個空白的話,可以像下面這樣以 &nbsp; 代替空白:

<html>

  <head>
    <title>網頁設計教學 HTML - 空白 (空格)</title>
  </head>
  
  <body>
    哈囉!這邊&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;有五個空白。
  </body>
  
</html>

執行結果如下:

哈囉!這邊     有五個空白。

在 HTML 語法中,有一些已定義好的特殊符號,它們是以 "&" 為開頭,以 ";" 做結尾,之後我們會在別的篇章另外說明還有哪些常用的特殊符號。而 &nbsp; 就是屬於 HTML 的特殊符號之一「空格符號」,其 nbsp 取自於英文 a non-breaking space 的英文簡稱,其原意是「不會被間斷的空白」。

HTML 的預先格式化文字

上面的換行或空格方式,不是要打 <br> 就是要用 &nbsp; ,如果偶爾用之還好,若一篇文章中許多地方用到,您可能會覺得有點麻煩吧 …

沒關係,我們另外還有一個 <pre> 的標籤,可以用來解決您的困擾:

<html>

  <head>
    <title>網頁設計教學 HTML - 預先格式化文字</title>
  </head>
  
  <body>
  
<pre>
哈囉!這邊   有五個空白。

我沒有加 &lt;br&gt; 也換行囉。
</pre>

  </body>
  
</html>

執行結果如下:

哈囉!這邊   有五個空白。

我沒有加 <br> 也換行囉。

看到上面的執行結果之後,應該會覺得 <pre> 標籤還蠻方便的吧!想空幾格就空幾格,想換幾行就換幾行,不用再打一些標籤語法和符號上去。

這麼好康的 <pre> 標籤語法,它的 pre 取自於英文 preformatted text ,即「預先格式化文字」的簡稱,用白話一點的方式說,就是在 <pre> 標籤區塊中的文字,您已經自己定好換行和空白的格式了,請網頁瀏覽器就按照那樣顯示就對了!

不過有個小地方您也要注意一下,看看上面 <body> 標籤中所包的 <pre> 這整個區塊,我不在把它內縮進去,而是讓它出現在每一列的開頭。那是因為既然 <pre> 已是「預先格式化的文字」,那麼如果您又為了 HTML 好閱讀而把它內縮的話,就會讓實際顯示在網頁瀏覽器上的執行結果文字也被內縮喔!所以使用時要注意這一點。

<< 上一篇: HTML 文件結構 [ HTML 教學目錄 ] 下一篇: HTML 文章段落及排版 >>

網頁設計 – HTML 文件結構

HTML 的文件結構其實很簡單,它是由多個標籤 (Tag) 組成一個個內容區塊,而不同的標籤區塊,內容會有不同的呈現方式。

在說明 HTML 結構之前,我們先看一下底下 hello.html 網頁檔案的範例:

<html>

  <head>
    <title>網頁設計教學 HTML 測試</title>
  </head>
  
  <body>
    哈囉!我的第一個 HTML 測試範例 ...
  </body>
  
</html>

眼尖的你應該已經發現,在上面的 HTML 標籤中, <html> 、 <head> 、 <title> 和 <body> 代表的就是一個區塊內容的開始標籤,而 </html> 、 </head> 、 </title> 和 </body> 即是代表一個區塊內容的結束標籤。

想知道這個 HTML 建立好後,在 網頁瀏覽器 上觀看到底是長怎樣的話,可以 按這裡觀看 。您可以把整個網頁透過網頁瀏覽器的功能另存下來,或是在網頁上空白處按滑鼠右鍵,然後點選「檢視原始碼」,就可以看到這個網頁實際上的 HTML 原始碼內容是什麼囉!是不是真的跟我們範例上所寫的一模一樣呢?做網頁真的不難對吧?!

HTML 基本標籤說明

在上面的範例 HTML 當中,您可以發現 <html> 和 </html> 正好包圍著整個 HTML 檔案,這就表示 <html> 是整個 HTML 檔案的開始,而 </html> 是整個 HTML 檔案的結束,因此 <html> 標籤是相當重要不可或缺的一個標籤啊!

<html>

  <head>
    <title>網頁設計教學 HTML 測試</title>
  </head>
  
  <body>
    哈囉!我的第一個 HTML 測試範例 ...
  </body>
  
</html>

如果您有點選上面的範例連結去觀看網頁執行的結果,您應該也會發現,整個網頁的內容,您在畫面上只有看到「哈囉!我的第一個 HTML 測試範例 …」,並沒有看到「網頁設計教學 HTML 測試」在瀏覽器的內容檢視區當中。這是為什麼呢?是哪裡寫錯了嗎?

不,網頁範例並沒有寫錯。而是因為瀏覽器的內容檢視區中真正看得到的網頁內容,是被包在 <body> 和 </body> 標籤之間的「主體區塊」,而在主體區塊之外的內容,是不會被顯示在瀏覽器的內容檢視區的。

<html>

  <head>
    <title>網頁設計教學 HTML 測試</title>
  </head>
  
  <body>
    哈囉!我的第一個 HTML 測試範例 ...
  </body>
  
</html>

那麼「網頁設計教學 HTML 測試」到底出現在哪裡呢?答案是,它會出現在網頁瀏覽器最左上角的網頁標題列上,而一般也會被當作 搜尋引擎 找到您網頁時的網頁標題。如果您還沒有找到這段文字出現在哪裡,您可以再 按這裡觀看 一次結果。

好的,我們再簡單說明一下,在 <head> 標籤區塊中出現的所有內容,都是給網頁瀏覽器或搜尋引擎看的「文件表頭」。而 <head> 區塊內,又包著一個 <title> 標籤區塊,指示出這個網頁的「標題」是什麼。

<html>

  <head>
    <title>網頁設計教學 HTML 測試</title>
  </head>
  
  <body>
    哈囉!我的第一個 HTML 測試範例 ...
  </body>
  
</html>

以上是一個基本的網頁最少應該有的標籤。而其實在 <head> 和 <body> 中,還有其它更多用途的標籤,我們將會在後續的教學網頁中,分門別類為您做介紹。

HTML 學習小提示

養成良好的習慣:您應該有發現我上面的範例在不同的標籤區塊之間有加空格去內縮,不同的區塊間甚至還有加空白行,為得是讓整個 HTML 檔案較容易讓「人」閱讀。但事實上,這 HTML 不論妳在不同的標籤之間加多少空格、空行,甚至你都不換行,它的執行結果都是一模一樣的,因為「瀏覽器」只會去認它的標籤。

<html><head><title>網頁設計教學 HTML 測試</title></head>
<body>哈囉!我的第一個 HTML 測試範例 ...</body></html>

上面的 HTML 跟最前面的 HTML 執行結果都相同,有興趣您也可以試看看。

但是還是建議您以階層式內縮的方式來撰寫 HTML ,這樣對於您日後回頭來看時,要修改什麼地方,可以一目瞭然,更不容易出錯。 ^_^

<< 上一篇: HTML 簡介 [ HTML 教學目錄 ] 下一篇: HTML 基本排版 >>

網頁設計 – HTML 簡介

常常在逛一些網站會看到 HTML 的檔案,到底 HTML 是什麼東西呢?
HTML 的英文原文是 HyperText Markup Language ,中文譯為「超文字標示語言」。為什麼要說「超文字」呢?如果你曾經用過 Windows 上的「記事本」打過字,你應該知道一般的純文字輸入是無法顯示不同的字型大小、不同的文字顏色、甚至插入與文字說明相關的圖片的。而超文字則可包含這些不同的文字變化、加入圖片或影音多媒體、畫表格、甚至可做一些基本的排版功能。而「標記語言」指的是 HTML 透過一些定義好的結構化標籤 (Tag) 語法,讓你把超文字放到你所想要的位置、或去指定它的呈現方式。因此,再簡單的說, HTML 就是可以讓你將您所想要呈現給別人看的資料,儘可能以較豐富的方式去呈現。
網頁設計跟 HTML 有什麼關係呢?
當然有關係囉,關係可大了。我們一般在看的網頁,裡面的所有內容幾乎都是用 HTML 語言標示出許許多多的超文字所組成的,如果沒有 HTML ,那麼我們現在可看不到五彩繽紛、各式各樣豐富的 網頁設計 內容了呢。
HTML 是一種程式嗎?
不,許多人誤以為 HTML 語法是一種程式設計,那是錯誤的!請不要自己嚇自己,把 HTML 想得太過複雜。您可以把 HTML 當作是一種網頁排版的語法,或單純當作是一種資料內容的呈現方式,只要您依照後面所指示的內容一步步去練習,相信您一定可以學得會的。
我可以用什麼工具編寫 HTML 網頁?
很簡單,用 Windows 內建的「記事本」小軟體,就可以拿來練習編寫網頁了。但如果可以的話,真心推薦您使用以下其中一套「免費的進階版記事本」小軟體: Notepad++PSPad ,因為它們可以幫您將 HTML 語法和您的網頁文章內容用不同的顏色做一些區隔,讓您更方便閱讀 HTML 內容,並且也可以及早讓您發現可能的編寫錯誤,讓您的學習之路更為順暢。
我要如何瀏覽及測試我的 HTML 網頁呢?
當您使用前述的「記事本」工具編寫完內容後,可以將檔案儲存成 test.html 這樣的檔名, test 即是您網頁的主檔名,而 .html 則為網頁的副檔名。假設您的檔案是儲存在「桌面」,您可用檔案總管或是任何可能的方式到桌面去找到 .html 的檔案,例如前述的 test.html 檔,然後用滑鼠在 test.html 檔案上按左鍵快速點選兩下,則電腦即會自動以您系統預設的 網頁瀏覽器 開啟這個練習的網頁,您就可以看得到您所撰寫的內容實際在網頁瀏覽時是長怎樣囉! ^^

透過上面的說明,相信您已經大概知道什麼是 HTML 了,並且您可能也想趕緊開始上機練習了。現在就請繼續往下學習囉!

<< 返回 HTML 教學目錄 下一篇: HTML 文件結構 >>

網頁設計 – HTML 教學目錄

好的開始,就是成功的一半!

您會逛到這裡來,表示您可能打算要製作網頁了,或是您想要瞭解一些網頁設計的基本知識。

雖然市面上有一些網頁設計工具,可以讓您簡單的拉一拉、設定一下,就能把網頁製作出來了。然而,使用這些工具的人之中,有不少人在學習網頁設計的過程中,並沒有好好的去瞭解網頁是如何構成的,因此在往後的學習路上,時常會遇到一些瓶頸,找不到問題出在哪裡。然而, HTML 正是網頁設計中最主要的關鍵,觀念通了,對後續的學習之路是很有幫助的。

現在,就讓我們一起來瞭解一下吧!

HTML 入門知識

HTML 簡介
HTML 到底是什麼呢?放輕鬆來一探究竟吧!
HTML 文件結構
HTML 語言的簡單範例及結構說明。
HTML 基本排版
文字要如何在 HTML 中換行或加多個連續空白呢?
HTML 文章段落及排版
寫文章囉!文章段落如何安排,如何置左、置中、置右對齊呢?
HTML 文字變化
指定網頁文字的大小、顏色、字型、粗體、斜體、底線…等。
HTML 超連結
超連結是什麼?一定是個很厲害的東西吧!什麼?它就是參考連結?
HTML 影像、圖片
文字敘述很生硬,有圖有真相,來放張圖片吧!
HTML 條列項目 (待續)
流水編號手動修改也太麻煩了吧,條列清單要怎麼顯示較好呢?
HTML 表格 (待續)
網頁不能畫表格的話就太遜了!我要怎麼合併儲存格呢?

HTML 中級知識

影音、多媒體 (待續)
光是圖片還不夠,能撥放影片就更好了。

HTML 進階技能

HTML 表單、輸入資料 (待續)
網頁上常看到一些查詢介面、會員登入、註冊頁面,這些是怎麼做的呢?

延伸學習

CSS 樣式表 (待續)
XHTML 網頁語法 (待續)
Java Script 小程式 (待續)

網頁設計相關連結


曾媽精緻蛋糕小舖 E-DM

商家簡介

曾媽蛋糕 (J.M Cake) 目前有紅豆麻糬乳酪、藍莓優格乳酪、草莓優格乳酪、焦糖咖啡乳酪、巧克力布朗尼等多種蛋糕口味,以及北海道半熟乳酪、乳酪球、彌月四合一禮盒等產品。服務項目共包含有:伴手禮、彌月蛋糕禮盒、生日蛋糕、公司團購服務、彌月試吃服務。

E-DM 設計說明

以 A4 DM 的設計原稿風格轉製而成,調整為瘦長的版面,以方便 mail 發送及閱覽。 E-DM 之設計,是希望能用於 E-mail 發送之推廣用途。

E-DM 設計展示 (2010-03)

曾媽精緻蛋糕小舖 E-DM (2010-03)

相關連結

網頁設計與架站

網站建置與設計 (Web Design, Programming and Deploy)

隨著科技的進步,網站的規劃與建置需求愈來愈高,現在已經不是為了網站而建置網站的時代了,而是要更仔細的去想,我們需要網站來為我們做些什麼?希望能夠達到什麼樣的功效?

這是我們所擅長的,我們所擁有的專業技術,能夠為您打造一個特有的網站,符合您所想要的需求,我們也會儘量提出我們的建議,告訴您什麼樣的網站功能對您的幫助最大。

網站建置類型 (Solutions of Website Plan)

  • 公司網站、形象網站、官方網站、機關單位網站、社團網站
  • 企業內部入口網站 (EIP)
  • 客戶關係管理系統 (CRM)
  • 電子商務 (EC)、網路商店、線上金流
  • 拍賣整合
  • 個人化網站、部落格、網路相簿
  • 群眾募資網站
  • Facebook 整合: Facebook 粉絲團建立、 Facebook 應用程式開發
  • 其它客製化專案

網站建置技術分類 (Types and Technologies of Website)

HTML 網頁設計
以美工頁面及文字內容所組成,可穿插 Flash 使網站更有生氣。
PHP / JSP 網站
以 MySQL 為資料庫或以 XML 為資料來源,可增加與使用者互動之功能,以及更多進階後台管理。
ASP / ASP.NET 網站
Access 或 SQL Server 為資料庫或以 XML 為資料來源,可增加與使用者互動之功能,以及更多進階後台管理。

我們所擅長的網頁相關資訊技術

作業平台:
Linux 、 FreeBSD 、 Windows Server
網頁技術:
HTML 、 HTML5 、 DHTML 、 XHTML 、 CSS 、 CSS3 、 Java Script 、 Ajax 、 jQuery 、 jQuery UI 、 jQuery Mobile 、 MVC 、 XML 、 JSON 、 RWD 、 Bootstrap
網頁程式:
PHP 、 ASP 、 ASP.NET (Web Form) 、 ASP.NET (MVC) 、 ASP.NET (Core MVC) with (Entity Framework Core) 、 JSP 、 Python 、 Django 、 Action Script 、 Flex
地圖定位:
Google Map API 整合、 Mapbox API 整合
資 料 庫:
MySQL 、 SQL Server 、 Access
Web App:
iPad 、 iPhone 、 Android
多 媒 體:
Flash
網路環境:
網路規劃、佈線及伺服器架設
其  它:
ADSI 、 LDAP 、 Web Standards 、搜尋引擎最佳化 (SEO) 、系統整合、平台開發、無障礙規範

網站案例

https://phd.com.tw/category/客戶案例/網站案例/

頁面

網頁設計 – HTML 基本排版

在瞭解 HTML 文件結構 之後,您已經知道,不論您如何在 <body> 標籤內將任何文字換行,網頁的結果其實還是不會換行,而且不論您加了多少空白,始終最多看到的結果還是只有一個空白,這樣怎麼行呢?

當然不行,我們可是要在網頁上放一些文章,或是寫一些產品介紹的啊,所以一定要有方式可以讓我們做一些基本排版呀。

HTML 的換行

換行其實很簡單,加入 <br> 標籤就可以了。

<html>

  <head>
    <title>網頁設計教學 HTML - 換行</title>
  </head>
  
  <body>
    哈囉!<br><br>我換了 2 行喔 ...
  </body>
  
</html>

執行結果如下:

哈囉!

我換了 2 行喔 ...

換行為什麼叫 <br> 呢?它是取自英文 a line break 斷行之意,而 break 就是中斷、換行的動作, <br> 取自 break 的前兩個字母縮寫。這樣您記起來了嗎?

另外,眼尖的你可能有發現到,一般 HTML 的標籤不是都有像是 <body> 這樣的開始標籤,和 </body> 這樣的結束標籤嗎?為何 <br> 沒有呢?原因很簡單,因為 <br> 並不像其它標籤是一個「區塊」,在它所出現的地方就是立即要強迫換行的地方了,它不會包住任何其它的內容,所以它不需要有 </br> 結束標籤。聰明如你,這樣應該很容易懂吧!

HTML 的空白 (空格)

為什麼我編寫的 HTML 中,加了很多空白還是無效呢?因為我們在 HTML 文件結構 這篇有提到, 網頁瀏覽器 其實是不管你的換行和多餘的空白的,即使所有內容都寫在同一行,瀏覽器還是會依您所下達的標籤語法去判斷要如何顯示。

就像上面的換行 <br> 連續用了 2 次,就換了兩行,而且 <br> 後面直接接著文字,它還是出現在換兩行後的最開頭,不會跟「哈囉!」連接在一起。

也就像在 HTML 文件結構 這篇的最後,我們有建議您儘量讓不同的標籤區塊去換行和內縮 HTML 內容,這樣您會比較好閱讀 (但對電腦而言是沒差的) ,也比較不容易寫錯,一個好的網頁設計師通常會這麼做。也因此,如果因為換行或內縮就讓你實際的內容格式跑掉了,那可不行呢!所以,當然瀏覽器預設對於內文換行和多餘空白是當作視而不見的。

因此,如果您直接在文字和文字中間空白了 5 次,或放更多的空白,實際上它還是只會有一個空白。例如:

<html>

  <head>
    <title>網頁設計教學 HTML - 無效空白</title>
  </head>
  
  <body>
    哈囉!這邊     空白了五次,但只有一個空白效果。
  </body>
  
</html>

執行結果如下:

哈囉!這邊 空白了五次,但只有一個空白效果。

上面的結果中,多餘的空白是不會有作用的。

而如果我們希望能夠連續顯示好幾個空白的話,可以像下面這樣以 &nbsp; 代替空白:

<html>

  <head>
    <title>網頁設計教學 HTML - 空白 (空格)</title>
  </head>
  
  <body>
    哈囉!這邊&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;有五個空白。
  </body>
  
</html>

執行結果如下:

哈囉!這邊     有五個空白。

在 HTML 語法中,有一些已定義好的特殊符號,它們是以 "&" 為開頭,以 ";" 做結尾,之後我們會在別的篇章另外說明還有哪些常用的特殊符號。而 &nbsp; 就是屬於 HTML 的特殊符號之一「空格符號」,其 nbsp 取自於英文 a non-breaking space 的英文簡稱,其原意是「不會被間斷的空白」。

HTML 的預先格式化文字

上面的換行或空格方式,不是要打 <br> 就是要用 &nbsp; ,如果偶爾用之還好,若一篇文章中許多地方用到,您可能會覺得有點麻煩吧 …

沒關係,我們另外還有一個 <pre> 的標籤,可以用來解決您的困擾:

<html>

  <head>
    <title>網頁設計教學 HTML - 預先格式化文字</title>
  </head>
  
  <body>
  
<pre>
哈囉!這邊   有五個空白。

我沒有加 &lt;br&gt; 也換行囉。
</pre>

  </body>
  
</html>

執行結果如下:

哈囉!這邊   有五個空白。

我沒有加 <br> 也換行囉。

看到上面的執行結果之後,應該會覺得 <pre> 標籤還蠻方便的吧!想空幾格就空幾格,想換幾行就換幾行,不用再打一些標籤語法和符號上去。

這麼好康的 <pre> 標籤語法,它的 pre 取自於英文 preformatted text ,即「預先格式化文字」的簡稱,用白話一點的方式說,就是在 <pre> 標籤區塊中的文字,您已經自己定好換行和空白的格式了,請網頁瀏覽器就按照那樣顯示就對了!

不過有個小地方您也要注意一下,看看上面 <body> 標籤中所包的 <pre> 這整個區塊,我不在把它內縮進去,而是讓它出現在每一列的開頭。那是因為既然 <pre> 已是「預先格式化的文字」,那麼如果您又為了 HTML 好閱讀而把它內縮的話,就會讓實際顯示在網頁瀏覽器上的執行結果文字也被內縮喔!所以使用時要注意這一點。

<< 上一篇: HTML 文件結構 [ HTML 教學目錄 ] 下一篇: HTML 文章段落及排版 >>

網頁設計 – HTML 文件結構

HTML 的文件結構其實很簡單,它是由多個標籤 (Tag) 組成一個個內容區塊,而不同的標籤區塊,內容會有不同的呈現方式。

在說明 HTML 結構之前,我們先看一下底下 hello.html 網頁檔案的範例:

<html>

  <head>
    <title>網頁設計教學 HTML 測試</title>
  </head>
  
  <body>
    哈囉!我的第一個 HTML 測試範例 ...
  </body>
  
</html>

眼尖的你應該已經發現,在上面的 HTML 標籤中, <html> 、 <head> 、 <title> 和 <body> 代表的就是一個區塊內容的開始標籤,而 </html> 、 </head> 、 </title> 和 </body> 即是代表一個區塊內容的結束標籤。

想知道這個 HTML 建立好後,在 網頁瀏覽器 上觀看到底是長怎樣的話,可以 按這裡觀看 。您可以把整個網頁透過網頁瀏覽器的功能另存下來,或是在網頁上空白處按滑鼠右鍵,然後點選「檢視原始碼」,就可以看到這個網頁實際上的 HTML 原始碼內容是什麼囉!是不是真的跟我們範例上所寫的一模一樣呢?做網頁真的不難對吧?!

HTML 基本標籤說明

在上面的範例 HTML 當中,您可以發現 <html> 和 </html> 正好包圍著整個 HTML 檔案,這就表示 <html> 是整個 HTML 檔案的開始,而 </html> 是整個 HTML 檔案的結束,因此 <html> 標籤是相當重要不可或缺的一個標籤啊!

<html>

  <head>
    <title>網頁設計教學 HTML 測試</title>
  </head>
  
  <body>
    哈囉!我的第一個 HTML 測試範例 ...
  </body>
  
</html>

如果您有點選上面的範例連結去觀看網頁執行的結果,您應該也會發現,整個網頁的內容,您在畫面上只有看到「哈囉!我的第一個 HTML 測試範例 …」,並沒有看到「網頁設計教學 HTML 測試」在瀏覽器的內容檢視區當中。這是為什麼呢?是哪裡寫錯了嗎?

不,網頁範例並沒有寫錯。而是因為瀏覽器的內容檢視區中真正看得到的網頁內容,是被包在 <body> 和 </body> 標籤之間的「主體區塊」,而在主體區塊之外的內容,是不會被顯示在瀏覽器的內容檢視區的。

<html>

  <head>
    <title>網頁設計教學 HTML 測試</title>
  </head>
  
  <body>
    哈囉!我的第一個 HTML 測試範例 ...
  </body>
  
</html>

那麼「網頁設計教學 HTML 測試」到底出現在哪裡呢?答案是,它會出現在網頁瀏覽器最左上角的網頁標題列上,而一般也會被當作 搜尋引擎 找到您網頁時的網頁標題。如果您還沒有找到這段文字出現在哪裡,您可以再 按這裡觀看 一次結果。

好的,我們再簡單說明一下,在 <head> 標籤區塊中出現的所有內容,都是給網頁瀏覽器或搜尋引擎看的「文件表頭」。而 <head> 區塊內,又包著一個 <title> 標籤區塊,指示出這個網頁的「標題」是什麼。

<html>

  <head>
    <title>網頁設計教學 HTML 測試</title>
  </head>
  
  <body>
    哈囉!我的第一個 HTML 測試範例 ...
  </body>
  
</html>

以上是一個基本的網頁最少應該有的標籤。而其實在 <head> 和 <body> 中,還有其它更多用途的標籤,我們將會在後續的教學網頁中,分門別類為您做介紹。

HTML 學習小提示

養成良好的習慣:您應該有發現我上面的範例在不同的標籤區塊之間有加空格去內縮,不同的區塊間甚至還有加空白行,為得是讓整個 HTML 檔案較容易讓「人」閱讀。但事實上,這 HTML 不論妳在不同的標籤之間加多少空格、空行,甚至你都不換行,它的執行結果都是一模一樣的,因為「瀏覽器」只會去認它的標籤。

<html><head><title>網頁設計教學 HTML 測試</title></head>
<body>哈囉!我的第一個 HTML 測試範例 ...</body></html>

上面的 HTML 跟最前面的 HTML 執行結果都相同,有興趣您也可以試看看。

但是還是建議您以階層式內縮的方式來撰寫 HTML ,這樣對於您日後回頭來看時,要修改什麼地方,可以一目瞭然,更不容易出錯。 ^_^

<< 上一篇: HTML 簡介 [ HTML 教學目錄 ] 下一篇: HTML 基本排版 >>

網頁設計 – HTML 簡介

常常在逛一些網站會看到 HTML 的檔案,到底 HTML 是什麼東西呢?
HTML 的英文原文是 HyperText Markup Language ,中文譯為「超文字標示語言」。為什麼要說「超文字」呢?如果你曾經用過 Windows 上的「記事本」打過字,你應該知道一般的純文字輸入是無法顯示不同的字型大小、不同的文字顏色、甚至插入與文字說明相關的圖片的。而超文字則可包含這些不同的文字變化、加入圖片或影音多媒體、畫表格、甚至可做一些基本的排版功能。而「標記語言」指的是 HTML 透過一些定義好的結構化標籤 (Tag) 語法,讓你把超文字放到你所想要的位置、或去指定它的呈現方式。因此,再簡單的說, HTML 就是可以讓你將您所想要呈現給別人看的資料,儘可能以較豐富的方式去呈現。
網頁設計跟 HTML 有什麼關係呢?
當然有關係囉,關係可大了。我們一般在看的網頁,裡面的所有內容幾乎都是用 HTML 語言標示出許許多多的超文字所組成的,如果沒有 HTML ,那麼我們現在可看不到五彩繽紛、各式各樣豐富的 網頁設計 內容了呢。
HTML 是一種程式嗎?
不,許多人誤以為 HTML 語法是一種程式設計,那是錯誤的!請不要自己嚇自己,把 HTML 想得太過複雜。您可以把 HTML 當作是一種網頁排版的語法,或單純當作是一種資料內容的呈現方式,只要您依照後面所指示的內容一步步去練習,相信您一定可以學得會的。
我可以用什麼工具編寫 HTML 網頁?
很簡單,用 Windows 內建的「記事本」小軟體,就可以拿來練習編寫網頁了。但如果可以的話,真心推薦您使用以下其中一套「免費的進階版記事本」小軟體: Notepad++PSPad ,因為它們可以幫您將 HTML 語法和您的網頁文章內容用不同的顏色做一些區隔,讓您更方便閱讀 HTML 內容,並且也可以及早讓您發現可能的編寫錯誤,讓您的學習之路更為順暢。
我要如何瀏覽及測試我的 HTML 網頁呢?
當您使用前述的「記事本」工具編寫完內容後,可以將檔案儲存成 test.html 這樣的檔名, test 即是您網頁的主檔名,而 .html 則為網頁的副檔名。假設您的檔案是儲存在「桌面」,您可用檔案總管或是任何可能的方式到桌面去找到 .html 的檔案,例如前述的 test.html 檔,然後用滑鼠在 test.html 檔案上按左鍵快速點選兩下,則電腦即會自動以您系統預設的 網頁瀏覽器 開啟這個練習的網頁,您就可以看得到您所撰寫的內容實際在網頁瀏覽時是長怎樣囉! ^^

透過上面的說明,相信您已經大概知道什麼是 HTML 了,並且您可能也想趕緊開始上機練習了。現在就請繼續往下學習囉!

<< 返回 HTML 教學目錄 下一篇: HTML 文件結構 >>

網頁設計 – HTML 教學目錄

好的開始,就是成功的一半!

您會逛到這裡來,表示您可能打算要製作網頁了,或是您想要瞭解一些網頁設計的基本知識。

雖然市面上有一些網頁設計工具,可以讓您簡單的拉一拉、設定一下,就能把網頁製作出來了。然而,使用這些工具的人之中,有不少人在學習網頁設計的過程中,並沒有好好的去瞭解網頁是如何構成的,因此在往後的學習路上,時常會遇到一些瓶頸,找不到問題出在哪裡。然而, HTML 正是網頁設計中最主要的關鍵,觀念通了,對後續的學習之路是很有幫助的。

現在,就讓我們一起來瞭解一下吧!

HTML 入門知識

HTML 簡介
HTML 到底是什麼呢?放輕鬆來一探究竟吧!
HTML 文件結構
HTML 語言的簡單範例及結構說明。
HTML 基本排版
文字要如何在 HTML 中換行或加多個連續空白呢?
HTML 文章段落及排版
寫文章囉!文章段落如何安排,如何置左、置中、置右對齊呢?
HTML 文字變化
指定網頁文字的大小、顏色、字型、粗體、斜體、底線…等。
HTML 超連結
超連結是什麼?一定是個很厲害的東西吧!什麼?它就是參考連結?
HTML 影像、圖片
文字敘述很生硬,有圖有真相,來放張圖片吧!
HTML 條列項目 (待續)
流水編號手動修改也太麻煩了吧,條列清單要怎麼顯示較好呢?
HTML 表格 (待續)
網頁不能畫表格的話就太遜了!我要怎麼合併儲存格呢?

HTML 中級知識

影音、多媒體 (待續)
光是圖片還不夠,能撥放影片就更好了。

HTML 進階技能

HTML 表單、輸入資料 (待續)
網頁上常看到一些查詢介面、會員登入、註冊頁面,這些是怎麼做的呢?

延伸學習

CSS 樣式表 (待續)
XHTML 網頁語法 (待續)
Java Script 小程式 (待續)

網頁設計相關連結


曾媽精緻蛋糕小舖 E-DM

商家簡介

曾媽蛋糕 (J.M Cake) 目前有紅豆麻糬乳酪、藍莓優格乳酪、草莓優格乳酪、焦糖咖啡乳酪、巧克力布朗尼等多種蛋糕口味,以及北海道半熟乳酪、乳酪球、彌月四合一禮盒等產品。服務項目共包含有:伴手禮、彌月蛋糕禮盒、生日蛋糕、公司團購服務、彌月試吃服務。

E-DM 設計說明

以 A4 DM 的設計原稿風格轉製而成,調整為瘦長的版面,以方便 mail 發送及閱覽。 E-DM 之設計,是希望能用於 E-mail 發送之推廣用途。

E-DM 設計展示 (2010-03)

曾媽精緻蛋糕小舖 E-DM (2010-03)

相關連結

網頁設計與架站

網站建置與設計 (Web Design, Programming and Deploy)

隨著科技的進步,網站的規劃與建置需求愈來愈高,現在已經不是為了網站而建置網站的時代了,而是要更仔細的去想,我們需要網站來為我們做些什麼?希望能夠達到什麼樣的功效?

這是我們所擅長的,我們所擁有的專業技術,能夠為您打造一個特有的網站,符合您所想要的需求,我們也會儘量提出我們的建議,告訴您什麼樣的網站功能對您的幫助最大。

網站建置類型 (Solutions of Website Plan)

  • 公司網站、形象網站、官方網站、機關單位網站、社團網站
  • 企業內部入口網站 (EIP)
  • 客戶關係管理系統 (CRM)
  • 電子商務 (EC)、網路商店、線上金流
  • 拍賣整合
  • 個人化網站、部落格、網路相簿
  • 群眾募資網站
  • Facebook 整合: Facebook 粉絲團建立、 Facebook 應用程式開發
  • 其它客製化專案

網站建置技術分類 (Types and Technologies of Website)

HTML 網頁設計
以美工頁面及文字內容所組成,可穿插 Flash 使網站更有生氣。
PHP / JSP 網站
以 MySQL 為資料庫或以 XML 為資料來源,可增加與使用者互動之功能,以及更多進階後台管理。
ASP / ASP.NET 網站
Access 或 SQL Server 為資料庫或以 XML 為資料來源,可增加與使用者互動之功能,以及更多進階後台管理。

我們所擅長的網頁相關資訊技術

作業平台:
Linux 、 FreeBSD 、 Windows Server
網頁技術:
HTML 、 HTML5 、 DHTML 、 XHTML 、 CSS 、 CSS3 、 Java Script 、 Ajax 、 jQuery 、 jQuery UI 、 jQuery Mobile 、 MVC 、 XML 、 JSON 、 RWD 、 Bootstrap
網頁程式:
PHP 、 ASP 、 ASP.NET (Web Form) 、 ASP.NET (MVC) 、 ASP.NET (Core MVC) with (Entity Framework Core) 、 JSP 、 Python 、 Django 、 Action Script 、 Flex
地圖定位:
Google Map API 整合、 Mapbox API 整合
資 料 庫:
MySQL 、 SQL Server 、 Access
Web App:
iPad 、 iPhone 、 Android
多 媒 體:
Flash
網路環境:
網路規劃、佈線及伺服器架設
其  它:
ADSI 、 LDAP 、 Web Standards 、搜尋引擎最佳化 (SEO) 、系統整合、平台開發、無障礙規範

網站案例

https://phd.com.tw/category/客戶案例/網站案例/