[HTML][新手] 02. 什麼是HTML與如何建立它 - 進度條

如果你要開啟HTML檔，無論你是使用手機、平板或是電腦。

你都會需要網頁瀏覽器(Web browser)才能解析HTML的檔案"內容格式"。

這件事基本上你也不用想得 ... 進度條 登入 線上教學 優惠組合 顧問服務 架站服務 所有文章 系列教學 筆記 [HTML][新手]02.什麼是HTML與如何建立它 本文將示範如何建立第一個HTML檔 作者:進度條編輯群 更新日期: 2020/10/03 此文章也有影片介紹，可以搭配影片一起學習！ 01.建立第一個HTML檔 (所屬課程) 以下正式開始文章 在我們開始建立自己的網站之前，我們需要先了解什麼是HTML，以及如何去建立它。

  如果要在簡短的文字內敘述了解什麼是HTML，我建議把它想成是一個檔案，例如Word檔，只是他的檔案"內容格式"與Word檔不一樣，副檔名也與Word檔不一樣。

Word檔的副檔名是.doc或是.docx，HTML則大多是.html。

  正如同你開啟Word檔需要MicrosoftWord這隻程式。

如果你要開啟HTML檔，無論你是使用手機、平板或是電腦。

你都會需要網頁瀏覽器(Webbrowser)才能解析HTML的檔案"內容格式"。

這件事基本上你也不用想得太複雜，反正這個格式是一群大公司在商業競爭下的產物，最後就變成了"規定"。

你一般也不會去質疑微軟的Word格式，畢竟是他們公司的產品。

  不過現在，最後競爭的結果，就是大家協商好去支持網際網路之父柏內茲·李在麻省理工學院所成立的中立組織(叫做W3C-全球資訊網協會)去規定HTML的內容格式，以工程師來說，我們將”內容格式“稱之為語法。

  網頁瀏覽器這種程式各大公司都有做。

比較常見的主流網頁瀏覽器就是Google的Chrome，Apple的Safari,微軟的IE以及取代IE的新瀏覽器Edge或是Mozilla旗下Firefox(Mozilla一般大眾比較陌生點，它是由瀏覽器大戰的失敗者Netscape網景公司所分出來的)。

要被稱作網頁瀏覽器需要幾個特點，基本上你必須要能正確的依照W3C的規範，正確的將HTML語法轉變成一般我們看到的網站。

除此之外，還有其他兩個必要的要素：CSS與JavaScript。

其中HTML管網站內容，CSS管樣式排版，JavaScript則是動態效果與互動。

我們這篇文章只講HTML的部分。

  這邊要特別提到的是，W3C雖然有規範，但並沒有法律效應。

所以你當然也可以隨便做一個程式然後號稱它是網頁瀏覽器，只是別人可能不會承認。

雖然上面這個例子有點極端，不過可以類推說如果大公司做出一個支援度不完全的網頁瀏覽器，它一樣可以自稱自己是優秀的網頁瀏覽器。

而且這些公司如果想的話，也可以自訂規格。

再加上W3C的語法規格其實也是因為歷史因素而有很多版本。

因此導致於網路上的資訊有時候並不符合目前的情況(比較舊已經不支援，或是只有特定公司的網頁瀏覽器才支援)。

目前最多支援的HTML版本為HTML5，不過也有少數規範主流網頁瀏覽器不支援，所以在撰寫的時候會需要稍微注意一下。

  前情提要說完了以後，就開始建立一個簡單的HTML頁面吧！ 在開始建立HTML檔之前，請先下載並準備好一個程式編輯器，本文所示範的程式編輯器是Brackets。

所以在開始之前請先安裝它，相關介紹請看這篇文章。

Brackets基本功能介紹:   安裝完Brackets以後，他會有個預設的資料夾叫做GettingStarted。

Brackets左側管理是以資料夾為單位來做樹狀的檔案顯示。

你可以把根目錄從預設的GettingStarted換成你的專案資料夾。

不過我們這裡先稍微使用它預設的檔案來做一些示範。

    打開Brackets，點擊左側的index.html，可看到完整的HTML檔。

這個index.html是他的歡迎頁面，HTML檔案可以放在本機端(Localhost)或是遠端主機(Server)上。

網頁瀏覽器其實並不在意你的HTML檔案的所在位置，所以你可以讓他顯示本機端的檔案。

這就跟你在公司工作的時候，有時候Word檔放在公司的Server上，你還是可以直接點擊兩下就開啟一樣。

Word這隻程式可以開啟自己電腦上面的Word檔，也可以開啟公司Server上的Word檔。

網頁瀏覽器同樣除了可以開啟遠端Server上的HTML檔，也可以開啟自己電腦上的HTML檔。

    在Brackets右側的閃電符號是Live Preview(即時預覽)功能，打開時呈現橘色狀態，未打開時呈現灰色狀態。

Live Preview是Brackets的一項內建功能，只要在HTML檔內新增任一串文字，儲存後不需要重開，即可透過瀏覽器預覽新增文字後的網頁頁面。

讓我們先在這個index.html上面隨便加點字看看結果。

    所以上圖就可以發現，我們新增的字成功被加上去了。

  接下來是透過Brackets來建立我們自己的第一個HTML檔 :    STEP1新增資料夾 在任意你喜歡的檔案位置裡新增一個英文資料夾，是之後要用來放HTML檔的。

這個位置要記好，之後會用到。

新增資料夾可以使用Brackets新增，或是我們單純使用檔案管理員或是Mac的Finder新增，總之能新增就好，並不用在意手段。

  資料夾名稱建議全英文，並且不要有空白，如果有需要空白可以使用底線來取代。

如果需要比較正式一點，可以以Pascal命名法來命名。

這是因為空白會有跳脫字元的問題，不過現在先不細講。

原因大改可以理解為因為空白在程式語言的語法裡面可以代表很多用途，如果要指定空白為“空白字元”，需要特殊的寫法。

為了怕製造出寫程式上的捆擾，所以最好不要在命名的時候使用空白。

    STEP2建立HTML檔案 打開Brackets，按新增檔案。

    將新增的檔案儲存到剛剛新增的資料夾，並將檔案命名為index.html。

    STEP3寫入HTML5程式碼 剛建立好的HTML檔利用Live preview功能將其網頁頁面打開時，內容是空白的，因為我們尚未寫入任何HTML程式碼。

這邊要確認一下檔案是否打開正確。

很容易會有其他檔案也叫做index.html。

    這邊我們將填入基本的HTML5程式架構內容。

HTML程式碼是由角括號組成的標籤式程式語言，欲查尋HTML程式碼請參閱w3c網站。

    在與的範圍裡放的是html所有設定檔及檔案內容。

在

與的範圍裡放的是設定檔。

在與的範圍裡放的是html檔要呈現的內容。

  如果我們要在的範圍裡建立一個title，叫"我的新HTML專案"就在與的範圍打上。

    然後打開Live Preview瀏覽頁面，在頁籤的部份就會呈現"我的新HTML專案"     如果我要在網頁裡面呈現一些內容，就在與的範圍打上直接打上任一串文字。

    然後再打開Live Preview瀏覽頁面，在網頁內容的部份就會顯示剛打在與的範圍的文字。

    所以我們就可以正確的顯示了!!   以上就是今天的建立第一個HTML檔的示範內容。

    最後，如果你喜歡我們的文章，別忘了到我們的FB粉絲團按讚喔!! 圖文系列教學: HTML新手網站基礎教學 [HTML][新手]02.什麼是HTML與如何建立它 [HTML][新手]03.分行與分隔線(br,hr)與註解 [HTML][新手]04.中文編碼表示metacharset [HTML][新手]05.文字標籤h1~h6,p與span [HTML][新手]06.其他方便的文字標籤與圖文編輯器的關係-以CKEditor為例 [HTML][新手]07.Div標籤以及CSS高,寬與背景顏色屬性 [HTML][新手]08.其他與Div相似的HTML5所建議的標籤Main,Header,Footer等 [HTML][新手]09.tag(連結標籤)介紹1,轉址與開啟新頁籤 [HTML][新手]10.tag(連結標籤)介紹2,定位點與寄信 [HTML][新手]11.列表介紹ul,ol,dl [HTML][新手]12.表格介紹Table [HTML][新手]13.Imgtag-圖片介紹 [HTML][新手]14.影片與網頁嵌入(iframe)-例如youtube [HTML][新手]15.輸入欄位(input)-簡介與瀏覽器顯示比較 從另一個方向介紹網頁、HTML、CSS與JavaScript。

[HTML][新手]01.程式編輯器Brackets安裝教學 進度條編輯群 進度條編輯團隊 關聯文章 [HTML][新手]05.文字標籤h1~h6,p與span [HTML][新手]05.文字標籤h1~h6,p與span [JavaScript]上傳圖片不難，那上傳同時預覽呢？ 很多程式功能看起來是一件事，但其實它們只是被設計成剛好一起發生。

[HTML][新手]02.什麼是HTML與如何建立它 本文將示範如何建立第一個HTML檔 從React.js切入跨團隊開發的合作模式-以Airbnb為例 從React.js切入跨團隊開發的合作模式-以Airbnb為例 [JavaScript]上傳圖片同時預覽一張不夠，那你有試過兩張嗎？ 上傳圖片同時預覽已經會了，但改成多張圖片好像就不會了。

你知道SEO是指「搜尋引擎優化」嗎？提升搜尋關鍵字又有哪些方法呢？ 架設網站就是要讓人看見，如果沒有人在瀏覽就跟沒架是一樣的！ [ReactJS]01.為什麼要用ReactJS 從頭開始，從使用面與程式碼來介紹ReactJS 前後端分離要用SSR?Serversiderender(SSR)是什麼嗎？跟SPA和SEO又有什麼關聯？ SPA對SEO不好？為了SEO所以要捨棄CSR?多了解一點原理答案就自然浮現了！ 響應式頁面只能用Bootstrap3製作嗎？不，但它最方便！ 響應式頁面(Responsive)框架百花齊放，但依情況其實並不真的有那麼多的選擇。

多想一下，或許這個專案不需要用ReactJS。

大家瘋狂學習JavaScriptES6的原因，從劣勢來反向介紹ReactJS 顯示全部 最新文章 5分鐘自架免費VPN設定步驟教學，在LinuxVPS上自架OpenVPN搞定跳板連線 自架VPN超快，照著做輕鬆簡單不失敗！ 你的地區可能無法觀看此影片？快使用VPN跳板來解決地須限制跨區解鎖觀看！ 被限制IP地區使用VPN已經是常識，但你知道基本VPN原理與自架和服務商的差別嗎？ [LayerStack]完整LinuxVPS使用PM2與Nginx架設Node.js站台設定中文教學 使用LayerStackVPS透過CN2GIA最高級線路，讓網站在中國大陸也可順暢連線 桌面太小被電腦螢幕佔據嗎？Ultrarm螢幕支架應該就是你要的推薦方案喔！扎實用料一次到位。

台灣公司Ultrarm螢幕支架相當堅固可以一次架兩個螢幕，最高支援49"吋螢幕。

如何避免自製WordPress外掛被GPL授權？顧客購買「付費版」可以免費無限複製不用付授權費嗎？ 開不開源是個人選擇，豐富社群當然是件好事。

但是被強迫開源就不是開發者所樂見的事了。

【微創業】電商為何要自架站台？被平台綁架的下場只有流量營業額減半等著你-自架站台的重要性(二) 我電商就賺飽了，為何要架設一個網站？架設網站一定要用WordPress嗎？ 【IKoula】使用LinuxVPS上架設PHP站台全紀錄！從Ubuntu設定到網站上線一次搞定 經濟實惠的IKoulaVPS，適合初學者練習與進階商業架站的好選擇！ 後端工程師(BackendDeveloper)是什麼？成為後端需要學習什麼技術？很難嗎？ 前端與後端差別在哪？如何選擇？為何後端工程師也要學習基礎「前端」技術？ 想快速保障網站安全？快嘗試SucuriCDNWAF雲端應用防火牆！遠振代理台灣專業服務協助設定。

架站不會程式？WordPress被入侵？使用SucuriCDNWAF以銅板價格讓你一天內就確保網站安全！ WordPress推薦必裝外掛(一)，精選常用Plugins超好用清單，免費實用外掛絕不能錯過！ WordPress外掛這麼多種，先從免費實用外掛開始，這些是即使會寫程式也很方便的外掛 顯示全部 線上課程 Bootstrap5與Sass，製作RWD客製化響應式網站 Laravel後端PHP架站，APIServer與訂閱軟體全攻略 WordPress-從頭教起的網站架設 程式客製WooCommerce，WordPress購物系統全解析 iOS-Swift5手機程式開發，使用APP與網站互動 Electron跨平台桌面程式，建立點餐系統與裝置控制 C語言-近代程式語言的基礎 ES6,ReactJS與Webpack，前端JavaScript全攻略 從零開始的SQL語法與資料庫設計-以MySQL來攻略 Linux雲端伺服器，用AWS暸解Apache與Nginx HTML,CSS,JavaScript,jQuery網頁從零開始 Git程式版本管控-由簡單到難 快速開發，從頭教起的RubyonRails後端之旅 行動第一!使用Bootstrap建立響應式RWD網站!