03-建立第一個網頁檔案

9 月 23, 2021 | 基礎網頁設計, 網站設計

所謂網頁,可以先理解成就是網路節點上的一個檔案,這個檔案型態是.html,瀏覽器會知道怎麼去解析.html檔案型態,就像是word可以開啟.doc或.docx; excel可以開啟.exl等,而瀏覽器就是專門來開啟.html型態的,而「瀏覽」這個動作就是我們在瀏覽器上方輸入一個「位置」,不管是網路上的位置還是本機的位置,瀏覽器就會去試著看這個位置是否有網頁的檔案,有的話就將其開啟並解析,然後呈現給我們看

建立.html檔案

安裝好vscode之後,我們將vscode打開。並點選新增檔案

VSCODE會幫我們開啟一個新的空檔案,我們先將這個檔案存檔。

存檔的位置可以在自已電腦的任一地方,只要自已知道位置不管是桌面還是某個資料夾都好,重點是我們得先替這個檔案的副檔名命名為index.html

index.html可以這麼理解,index就是這個檔案的檔名,瀏覽器若導航的位置是一個目錄資料夾(一般也都是),那瀏覽器會優先去拿該目錄資料夾內的index.html檔案,所以我們可以先命名成這個檔名,而.html就是前面所說的網頁的檔案型態了。

若要命名成aaa.html也是OK的,因為我們目前練習只是單一檔案,還不會導覽到該目錄底下

存檔後就會發現vscode偵測到我們的檔案型態是html,也幫我們把對應的標示都套好了

我們先在這個檔案裡打上

hello world!

當然你要打任何其他的文字也沒有任何問題,完成之後存檔,存檔後在電腦的該目錄資料夾應該也可以看到檔案本身

直接選擊這個檔案,一般來說系統會用預設的瀏覽器開啟,這時後就可以直接看到我們建立的網頁

很簡單對吧,瀏覽器會很單純的把我們的內容直接反應出來,那如果我們希望這個字大一點呢?

我們在vscode裡面打 h1然後按下鍵盤的 TAB

前面有提過,html就是由一對一對的標籤所構成的,標籤的格式就是< > xxx </ >
vscode會自動偵測到我們要輸入一對指定的標籤叫作h1,所以幫我們直接把標籤完成。
然後我們在標籤內一樣打入 hello wolrd!的字並且存檔

接下來的課程只要是說在「標籤內」,意思就是在 < > 這邊 </> 不要打成 < 這邊> 了哦

hello world!
<h1>hello world</h1>

我們在瀏覽器看一下目前的樣子

可以發現被h1包起來的文字變大了,標籤的功能就是告訴瀏覽器:「我現在這個標籤裡面的東西,都要用h1這個格式來呈現」,所以在這個標籤內的文字就會以內定的h1標題大小呈現出來了,內定的標題有h1~h6可以使用。