第六天：認識網站 - iT 邦幫忙

txt 代表他是一個很單純的文字檔。

接著嘗試修改副檔名，修改副檔名的方法跟修改檔名的方法一樣，所以我們對檔案按右鍵選 ... 2018iT邦幫忙鐵人賽 DAY 6 6 ModernWeb 只要有心，人人都可以做卡米狗系列第 6篇 第六天：認識網站 2018鐵人賽 瀏覽器 網站 卡米哥 2017-12-2502:51:1232204瀏覽 （本系列文假設讀者沒有資訊背景，使用windows作業系統電腦，會使用中文輸入法。

） 今天要來教大家認識網站。

在介紹網站之前，我想先介紹一下瀏覽器。

認識瀏覽器 瀏覽器就是能讓你的電腦或手機(以下統稱電腦)顯示網頁的程式。

不過科技日新月異，瀏覽器能作的事情越來越多，古代的瀏覽器只能用來開網頁。

現代的瀏覽器以Chrome為例，除了可以用來開網頁，還可以用來看檔案和資料夾。

支援各種檔案：PDF、SVG、各種圖檔、聲音檔和影片檔。

常見的瀏覽器 InternetExplorer(IE)：這是微軟出的瀏覽器，也是一般人買一台新電腦時就會內建的瀏覽器。

對一般人來說，這就是唯一的瀏覽器。

但對宅宅來說，這是用來安裝瀏覽器的瀏覽器。

MozillaFirefox(火狐)：這款瀏覽器在2004年發布第一版，他的特色是可以安裝很多外掛，讓你可以做事更有效率。

GoogleChrome：這款是Google出的瀏覽器，在2008年發布第一版，是目前主流的瀏覽器，因為接下來的說明會使用這個瀏覽器，所以請大家安裝。

安裝Chrome請點連結：https://www.google.com.tw/chrome/browser/desktop/index.html 請先安裝完Chrome再繼續閱讀本文。

認識網頁 一個網頁其實就是一個文字檔，而且你可以很容易地用記事本作出一個網頁。

現在我要教你怎麼作一個網頁。

認識檔案總管 先按住鍵盤上的windows鍵然後按一下E鍵，就可以叫出檔案總管。

windows長這樣： 就是在Ctrl跟Alt中間的那顆鍵。

成功的話就會看見檔案總管： 先按住鍵盤的windows鍵然後按一下E鍵，我們通常會簡寫為windows+E。

像這樣透過鍵盤快速鍵叫出程式的方法，學會之後，只要在朋友面前露兩手，人家就會覺得你很厲害。

這裡教你兩招： windows+D可以顯示桌布，再按一次就會復原。

windows+L可以鎖定螢幕。

新增資料夾 先點一下左側的本機 有D槽(D:)就點D槽，沒有D槽的點C槽(C:)。

點進去之後捲到最下面，找到一個空白處比較多的地方，然後對著空白處點右鍵。

然後你會看到上圖，點一下新增(W)，然後點資料夾(F)。

輸入「只要有心，人人都可以作卡米狗」，然後按Enter。

資料夾名稱只是為了識別用，你不打也沒關係，只是我怕你到時候找不到，所以幫你想了一個很棒的資料夾名稱，就甘心耶。

新增文字檔 先點進去剛作好的資料夾裡面，這次點新增文字文件。

新增完檔案應該會看到這個樣子： 請注意看這個位置： 如果你看不到.txt的話，代表你的系統目前是不顯示副檔名。

認識副檔名 先點上面的檢視，然後把副檔名打勾，應該就會顯示副檔名了。

一個檔案名稱最後一個.的右邊就是這個檔案的副檔名，以這個檔案為例，副檔名就是txt。

txt代表他是一個很單純的文字檔。

接著嘗試修改副檔名，修改副檔名的方法跟修改檔名的方法一樣，所以我們對檔案按右鍵選重新命名，然後我們把副檔名改成html。

你會看到這個警告：「如果您變更副檔名，檔案可能會變成無法使用。

您確定要變更嗎？」，我們當然是選「是」。

改完之後，你會注意到檔案前面的圖示變成chrome的圖示了。

那是因為html代表他是一個網頁檔，所以會用瀏覽器開啟，而我電腦的預設瀏覽器是chrome，所以顯示圖示是chrome的圖示。

這表示什麼呢？ 電腦會根據副檔名來決定要怎麼解讀檔案的內容。

雖然他是一個空網頁！但你已經會作網頁了！ 點兩下開啟檔案，是不是看到一個全白的網頁了呢？ 修改網頁 接下來我們來作個有內容的網頁！首先把檔案的副檔名改回txt，然後點兩下開啟記事本，然後輸入：

只要有心，人人都可以作卡米狗

看起來像這樣： 你要用複製貼上的也可以，然後存檔，存檔的快捷鍵是Ctrl+S，存好檔案就按右上角的叉叉關閉記事本。

對了，我說過瀏覽器可以開啟很多種檔案，其中也包含了txt檔。

這次我們用瀏覽器開啟txt檔。

用瀏覽器開啟txt檔(純文字檔) 用滑鼠左鍵按住檔案。

拖曳滑鼠到瀏覽器。

然後放開滑鼠，就成功使用瀏覽器開啟檔案了。

當然你在網址列輸入以下文字也能夠開啟檔案： file:///D:/只要有心，人人都可以作卡米狗/新文字文件.txt 這時候我們看到的內容，就跟我們輸入在記事本裡的一模一樣。

用瀏覽器開啟html檔(網頁檔) 接著把副檔名改成html然後再用瀏覽器開啟看看。

你會看到字變大了，而且開頭的

和結尾的

消失了。

那是因為

代表接下來的內容是大標題(比較大的字)，而

代表的是大標題就到這裡結束。

瀏覽器的運作原理 瀏覽器就是一個用來看網頁的工具，而你可以把一個網址想像成別人硬碟裡的檔案。

當你輸入一個網址時，瀏覽器會從別人的硬碟讀取網頁檔並顯示在畫面上。

認識網站 網站就是一堆網頁檔，透過點超連結來切換目前正在看的網頁。

你可以想成點超連結就是自動幫你在網址列輸入那個網頁路徑。

所以架網站就是弄一台開著給人家下載網頁的電腦，術語叫做網站伺服器。

網站伺服器的電腦都是從來不關機的。

今天就先講到這裡。

明天講網站伺服器。

留言1 追蹤 檢舉 上一篇 第五天：認識LineMessagingAPIWebhook 下一篇 第七天：認識網頁伺服器 系列文 只要有心，人人都可以做卡米狗 共33篇 目錄 RSS系列文 訂閱系列文 547人訂閱 29 第二十九天：卡米狗發公告 30 第三十天：卡米狗查天氣 31 只要有心，人人都可以作卡米狗-完賽心得 32 系統不讓我回文惹 33 LineMessagingAPI的各種訊息格式 完整目錄 1則留言 0 fuga iT邦新手5級‧ 2018-08-2823:10:17 大大如果沒有出現副檔名 點檢視也沒看到顯示/隱藏的選項 是電腦版本的問題嗎 回應 檢舉 登入發表回應 我要留言 立即登入留言 iT邦幫忙鐵人賽 參賽組數 1087組 團體組數 52組 累計文章數 20456篇 完賽人數 572人 鐵人賽最新文章 做不好資金控管，一檔大賠，獲利全吐 DevFest'21Hsinchu&Taichung議程錄影上線啦！ 建立第一個單元測試(golang)-2(Day21) 更新網格交易機器人 STM32的開發生態，Cube、HAL庫、LL庫 閒聊STM32CubeMX和STM32CubeIDE 建立第一個單元測試(golang)-1(Day20) Day38-在AWSLambda中使用YOLO推估(Inference) Day37-在AWSLambda建立OpenCVLayer Day36-使用Container建立AmazonSageMaker端點 前往鐵人賽 技術推廣專區 [Day2]抓取每日收盤價 [Day1]基本工具安裝 利用python取得永豐銀行API的Nonce [Day03]tinyML開發板介紹 永豐金融API測試員 [Day01]在享受tinyML這道美食之前 [Day3]使用ta-lib製作指標 [Day4]函數打包與買進持有報酬率試算 計算API所需要的參數:HashID 計算API所需要的參數:IV 前往鐵人賽 熱門問題 入門軟體工程師一些術語 想用網路線達到KVM的效果??? Chrome暗黑模式，CSS的媒體選擇器 系統工程師的sideproject ASP.NET發行網站IIS架站連接資料庫發生錯誤【於資料庫'master'中，CREATEDATABASE的權限遭拒】 考研究所需有關的資安題目 解析郵件附檔 一台電腦可否同時安裝Win7和Win10作業系統嗎? pdf多頁轉成ppt單頁 請提供台灣的資料庫社群、論壇、社團、技術交流 IT邦幫忙 站方公告 2021iThome鐵人賽精彩文章超過2萬篇，預計12月揭曉本屆獲勝鐵人 熱門tag 看更多 13th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 windows php python windowsserver linux c# 程式設計 資訊安全 css vue.js sql 分享 熱門回答 入門軟體工程師一些術語 MySQLselect後刪除問題 如何用pyhton在網頁中呈現可互動的資料視覺化圖形 想用網路線達到KVM的效果??? 解析郵件附檔 ASP.NET發行網站IIS架站連接資料庫發生錯誤【於資料庫'master'中，CREATEDATABASE的權限遭拒】 Pythonrequests時報錯certificateverifyfailed pdf多頁轉成ppt單頁 請問用VM架FTP.如何讓外網連入(NAT&映射) linux常用服務架設 熱門文章 桃園機場公司徵求資訊夥伴,邀請您一起加入我們的團隊! DevFest'21Hsinchu&Taichung議程錄影上線啦！ ITCertificationsExamPreparation Python&SQLALchemy學習筆記_查詢 HTML筆記(00)-為什麼我會想學網頁開發? 【必看】網頁截圖Chrome超簡單方法，輕鬆捕捉擷取畫面 為了轉生而點技能，難題紀錄(一)Hoisting篇。

[SAP][PP]計劃單轉工單_BOM問題？ Python&SQLALchemy學習筆記_資料表的建立 【徵才】台北網路廣告業尋找MIS夥伴 一週點數排行 更多點數排行 海綿寶寶(antijava) raytracy(raytracy) ㊣浩瀚星空㊣(yoching) ccenjor(ccenjor) japhenchen(japhenchen) fillano(fillano) 一級屠豬士(hitomitanaka) chun8106(chun8106) souda(souda) juck30808(juck30808) × At 輸入對方的帳號或暱稱 Loading 找不到結果。

標記 {{result.label}} {{result.account}} 關閉