什麼是HTML?網頁設計概念，開始使用HTML製作網頁

HTML是一種網頁使用的語言，是一種描述超文件的註記語言SGML(Standard Generalized Markup Language)所制訂出的 ... HTML教學課程(入門篇)：4個章節- 由淺入深學習HTML. Home >認識網頁設計- 什麼是HTML?網頁設計概念，開始使用HTML製作網頁 認識網頁設計Q&A 搜尋 只要了解這些，馬上變成網站達人! 網頁設計相關 網頁空間選擇 網址購買重點 網頁(網站)行銷-如何讓你的網站變搖錢樹? 教學相關 全部 認識網頁設計- 網頁設計相關 什麼是HTML?網頁設計概念，開始使用HTML製作網頁 HTML簡介 HTML是一種網頁使用的語言，是一種描述超文件的註記語言SGML(StandardGeneralizedMarkupLanguage)所制訂出的一種網頁語言，基本上現行的瀏覽器都可以讀取HTML，使用HTML可以編輯設計出網頁，也可以在網頁中加入所有HTML語言可支援的方式，例如表格、表單、圖片、文字、連結、程式等等。

HTML與XML的區別 而XML是由W3C所發展出的一種網頁語言規格，是SGML的精簡版本，特別用來設計網頁文件，XML可以讓使用者自己定義所需要的標籤，並且任意啟動定義、轉換、驗證等工作，同時可以在網頁和應用程式間讀取資料和傳遞資料。

所以HTML與XML的差別在於HTML無法自訂標籤，但是基本上全世界的瀏覽器都可以看到他寫出來的網頁，而XML則是一種可以自由轉換資訊以及定義標籤的方式，可以讓其他網頁自己去轉換分享者的標籤，並轉為自己的標籤，進而直接讀取跟引用。

開始 超文件標示語言（HTML）是建立網站的主要基石。

HTML是一種非常基礎的標記示語言，且需要記住數十種建置網頁格式與外觀的HTML指令（commands）。

編寫任何HTML編碼（code）或設計您的第一個網頁前，您必須決定是使用HTML網頁編輯器（HTMLeditor）還是文字編輯器（texteditor），例如：Notepad或WordPad。

當您決定了HTML網頁編輯器（HTMLeditor）且開始準備製作您的網站，請考慮一下您希望的網站外觀與功能。

您甚至可以考慮畫出您的想法，這可以幫助您對網站與網頁的想像更具體。

以下是一些網頁設計時需要考慮的注意事項。

1.您想要怎麼存取所有的文件？所有的文件都存在相同的文件夾或路徑（directory）嗎？假如您有大量不同的圖片與文件，我建議您將頁面、文件和圖片分別儲存在不同的路徑裡。

2.HTML文件都會被儲存為.HTM還是.HTML？用.htmor.html.都可，沒有任何影響，但最好可以使用相同的副檔名。

3.網頁打算使用相同的版型嗎？是否要有相同的外觀與感覺？ 4.主導覽列要怎麼做？放在每個網頁的左側、下方還是上方好？ 小提示：請意識到您設計網頁時，網頁會隨著您的想法而不斷變化。

就像是這個網站“新視野網頁設計公司”從開始到現在，已經被改過數十次一樣。

編寫基本的HTML 在安裝HTML網頁編輯器（HTMLeditor）和設置文件夾後，您就可以開始創建您的網頁。

一開始先建立一個名為index.htm或index.html的文件首頁。

若沒有任何具體指定，所有瀏覽器基本上都會把index當作首頁。

比如，當您輸入https://www.newscan.com.tw，瀏覽器則會自動進入https://www.newscan.com.tw/index.htm這個地址。

當您建立index.htm或index.html文件且用HTML網頁編輯器（HTMLeditor）打開，我們建議您將以下的原始碼（sourcecode）插入頁面裡。

假如您的HTML網頁編輯器（HTMLeditor）會自動把下面的HTML編碼（code）放入您的頁面，或著您使用的是WYSIWYGeditor，那您可以跳過此步驟。

  上面的編碼是一個非常基本、幫助每個網頁組成的例子。

如您所見，這個編碼以＜html＞開始，而這代表著＜html＞裡面的所有內容都是HTML編碼。

接著是＜head＞，這是HTML文件的標題。

再來是＜title＞，這是會顯示在瀏覽器上方的網頁標題。

最後則是＜body＞，包含網頁內所有的內文。

下面則是一些可放在＜body＞裡額外的編碼，可幫助您熟悉一些較常使用的HTML指令。

  從上面的編碼您會發現基本的HTML指令（HTMLcommands）使用起來相當簡單。

首先，從＜center＞開始，而這代表著告訴瀏覽器從這裡開始的內文都置中表示。

接著＜h1＞和一個句子，告訴瀏覽器這列是標題，且需要用最大的字體大小。

再來是＜hr＞，是一條分隔線，水平橫向整個頁面。

第三行的＜br＞是換行。

＜p＞則是每段落的換行。

＜b＞標籤是粗體的縮寫，用以加粗標籤中內文的文字。

接著的＜ul＞是項目清單符號，連接著的每個項目都是由＜li＞標籤標示。

最後的“＜ahref="路徑"＞＜/a＞是超連結，從網站內部連結到外部網站的方式。

在這裡則是連結到Google。

檢視網站 現在您已經有一個基本的網站，也想要檢視網站的樣子。

由於您把文件儲存在您的電腦裡，您將不需要經由連線網際網路來查看您的網頁。

您只要開啟您的電腦瀏覽器並輸入您的網頁位置。

比如說，您若是使用IBM相容的電腦，且把index.htm或index.html放在一個名為"網站（website）"的文件夾裡，您只要在瀏覽器上輸入c:websiteindex.htm或c:websiteindex.html就可預覽您的網站。

若您是使用微軟或蘋果，您只要雙擊網頁文件，它就會自動用您的電腦瀏覽器開啟網頁。

小提示：有一些HTML網頁編輯器（HTMLeditor）有預覽功能可讓您瀏覽頁面。

上傳網頁到伺服器前，在自己的電腦檢視網頁可讓您試驗網頁的功能並確保頁面的正常運作。

若您沒有儲存網頁的空間，這也很有用。

圖片顯示 現在您已經有一個基本的網站，您可以通過添加圖片的方式來增加網站的美觀度和氣氛。

顯示圖片在您的網頁上有兩種方式。

第一種方式是通過下方的編碼連結到另個網站的圖片。

  ＜imgsrc="https://www.computerhope.com/logo.gif"alt="logo"＞   藉由使用上面的HTML標籤，您可以顯示位於其他網站上的圖片，這也稱作是熱連結（直接連結）。

然而，我們建議您不要使用這種類型的連結，因為它會導致您的網頁載入速度變慢。

若放置圖片的網站刪除了圖片，您的網頁也就無法正常顯示圖片。

下方的編碼為建議與替代的方式：   ＜imgsrc="mypic.gif"alt="Mypicture"＞   或著若您有個名為"圖片（images）"的文件夾：   ＜imgsrc="images/mypic.gif"alt="Mypicture"＞   您把mypic.gif文件存在那裡，圖片則將顯示在你的網站上。

添加圖片是美化網站的最好方式。

然而，若增加過多圖片（尤其是動態圖片），這將使網頁過於俗不可耐且增加了網頁載入所需的時間。

請記住，瀏覽者平均瀏覽網站的時間是10秒，所以您必須讓您的網頁載入速度越快越好。

最後，永遠不要在首頁放置檔案太大的圖片。

大檔案的圖片會大大的降低網頁的載入速度而導致於瀏覽者離開您的網站。

若您想在網站上放檔案大的圖片，我們建議您建立一個小一點的縮圖（thumbnail）。

若瀏覽者真的想看大檔案的圖片，就可以透過點擊縮圖來觀看原圖。

了解路徑 當在包含圖片與HTML文件的電腦建立其它目錄（文件夾）時，了解路徑的結構是非常重要的。

很多時候，使用者誤建一個錯誤的連結，讓頁面只能離線工作，而並不能在網絡或其他電腦上顯示。

  image/mypic.gif   請注意，在上面的路徑中，是先指定目錄，然後再指定該文件。

接著，若您想回到上一層目錄的圖檔mypic.gif，則可以使用下面的例子：   ../mypic.gif   在這個例子裡，請注意有兩個點（..），而這是告訴瀏覽器說您想要回到上一層目錄。

但若您想回到上一層，然後再到名為“other”的同層目錄內的圖檔，您可以先輸入../，再輸入想去的那個目錄和文件名，下面為例子：   ../other/mypic.gif   這個規則可以使用多次。

假如若您想到3層外的目錄內的圖片，那您可以使用下面的例子：   ../../../image/mypic.gif   PC(Windows)用戶常見的錯誤是HTML網頁編輯器（HTMLeditor）可能會指定把文件儲存在電腦硬碟，如c:mywebpageimagemypic.gif。

這樣的本地路徑在自己的電腦硬碟可以顯示正常，然而當上傳到網絡後，卻無法正常顯示文件。

最後，請記住，指定路徑時，需使用“/”而不是“＼”。

大小寫區隔性 非常重要，請切記，許多網絡瀏覽器使用Linux或*nix。

而Linux和Unix對文件名的大小寫非常敏感。

若您想連結到“Mypage.htm”，但這個文件在伺服器上的名稱卻是“mypage.htm”，那伺服器就會因為大寫的“M”而無法找到這份文件。

因此我們強烈建議把所有的文件檔，圖檔檔名全用小寫顯示。

發佈網站 對大多數人而言，上傳文件到網絡上是設置網站中最複雜的步驟之一。

為了讓其他人可順利看到網站，您必須將網站發布在可讓網絡上每個人看到的伺服器裡。

由於網站發布的方法很多，我們將會解釋其中一種最常使用的方式。

網際網路服務供應商（InternetServiceProviders）和虛擬主機商（webhostingcompanies）可用FTP（FileTransferProtocol）讓您把自己電腦中的檔案複製到它們的伺服器裡。

PC使用者有兩種可用的方式上傳，一種是使用Windows內建的FTP程式，而另一種比較建議的方式則是下載FTP軟體。

不管使用這兩種之中的哪一種，都可讓您用FTP的方式傳輸文件到伺服器。

一旦伺服器連接到您放置網頁的文件夾或路徑。

通常這個文件夾為public_html。

假如您使用Windows內建的FTP，可輸入cdpublic_html或dir來查看文件夾的名稱。

或是您可使用CUTEFTP或是其他FTPclient軟體打開文件夾。

當您打開這個文件夾後，您可以經由傳送您的HTML文件到伺服器來發布網站在網際網絡上。

若您使用Windows內建的FTP來傳送文件，舉例來說，可輸入sendindex.htm。

我們了解這是個複雜的過程，但您的網際網路服務供應商和虛擬主機商通常都會有關於網站發佈的使用說明，有些甚至有線上操作介面，可允許用戶不必遵循上面繁瑣的命令來傳輸文件。

若您沿著上述建議仍然無法發佈您的網站，我們建議您仔細閱讀網際網路服務供應商和虛擬主機商的說明文件。

註冊網域 請參考我們的“我該如何註冊網域”頁面內的步驟來設定網域。

網站託管 網站託管商允許用戶讓其他公司儲存和維護您或是您公司的網站。

且依據您的網際網路服務供應商可提供的服務，您不一定需要一個網站託管商。

您可以與您的網際網路服務供應商詢問，看他們提供的服務是否可媲美網站託管商所提供的。

當您準備與網站託管商合作時，我們建議您先與他們檢視以下的訊息： 網域註冊－詢問他們是否可讓您的公司有自己的域名，比如：www.newscan.com.tw，並看看他們是否可以為您設置以及費用。

郵件轉發－看看他們是否可提供郵件轉發，將郵件從[email protected]轉發到另一個郵件地址，比如說，您的私人郵箱。

技術支援－詢問技術支援的時間與電話，並確認該電話是否為免付費電話。

換託管商－檢視他們關於換託管商的政策，若未來有需求的話，該怎麼進行。

網站統計－這雖然不是必要的，但這是一個很好的功能，看看他們是否可提供網頁的網站統計資料，讓您監控網站的運作情況。

頻寬限制－詢問他們是否有嚴格的頻寬限制，因為這很可能會限制您能夠接受的流量。

您必須要知道所有託管商都會限制流量，但您必須確定它的流量不會讓您的網站爆掉。

CGI、Perl和PHP程式語言－雖然您可能不會馬上用CGI、Perl和PHP寫網站，但您將來也許會用到，這時先跟他們確認是否支持此技術非常重要。

這些程式可讓您設置記數器、留言板，留言簿和其他功能。

結語 設計網頁比這裡的網頁基礎介紹更深奧。

當您了解HTML和FTP後，您就可以用CSS來編排設計您的網頁版面。

接著，若您想讓網站擁有更高階的功能，例如：論壇、網頁計數器或電子郵件表單，您就必須要熟悉CGI程式語言，例如：Perl和PHP。

若對您來說，這些基本知識讓您不知所措，網絡上有很多CMS服務，例如：WordPress和部落格服務，這些都可以讓整個流程變得簡單。

然而，請記住這些服務通常都有既定的版型和插件，能修改的地方不多。

若您想要擁有自己的網站，您還是需要了解一些網頁製作的基本知識。

HTML教學課程(入門篇)：4個章節-由淺入深學習HTML 歡迎推廣本文，請務必連結(LINK)本文出處：新視野網頁設計 分類列表( 網頁設計相關)全部列表 gotop