網頁

2019/7/7

HTML 撰寫你的第一個HTML網頁教學

本篇教您如何撰寫你的第一個HTML網頁教學。

HTML文件,為所有網站(Websites)的基礎,我們使用瀏覽器(Browser)在網路上瀏覽網站時,每一個在瀏覽器中顯示的畫面,背後的基礎都是由HTML文件(HTML documents)所構成的網頁(Web pages)。每一個頁面背後其實就是一份HTML文件,所以學習如何製作網站的第一步就是要知道什麼是HTML。


下面是一個簡單的HTML範例。此時你先不用管內容裡面的那些奇怪符號,先照著步驟做就對了,之後我會在一一解釋每個符號的意義。

welcome.html

<!DOCTYPE html>
<html>
<head>
</head>
<body>

  <h1>您好,歡迎光臨</h1>

</body>
</html>

一般來說,HTML標籤都會有一個開始標籤(Start tag),一個結束標籤(End tag),中間包夾著內容(Content)。

結束標籤前面會有一條斜線/



HTML標籤是大小寫不敏感的(case-insensitive),意思是說
<H1><h1>意思相同。


首先打開文字編輯器(Text editor),例如Windows的記事本(Notepad)。打開記事本後將以上內容複製(copy)(請習慣使用Ctrl + C)貼到(Ctrl + V)記事本中。



然後在功能選單點選檔案(File) -> 另存新檔(Save as)

接著依下圖紅圈部分做修改,
把[存檔類型(Save as type)]更改為[All Files (*.*)],
[檔案名稱(File name)]命名為welcome.html(你可以任意命名,只要記得後面要加上副檔名.html,例如home.html),
[編碼(Encoding)]改為[UTF-8],
點選[桌面(Desktop)]做為存檔的位置,
最後按存檔(Save)確定儲存。



存檔後在桌面就會出現一個剛存檔的welcome.html



welcome.html的檔案圖示(icon)可能因為你預設開啟的程式和我不同而長得不一樣,例如我預設都是用Chrome瀏覽器來打開副檔名為.html的文件,所以顯示的是Chrome瀏覽器的圖示,但不用管圖示是否一樣,直接點選兩下welcome.html,通常就會你的瀏覽器就會自動開啟這份文件如下。



恭喜你完成了你的第一個HTML網頁了。

不過多數的前端工程師都是用Visual Studio Code這套程式編輯器來工作,所以請參考在Visual Studio Code建立第一個HTML文件

然後請看HTML 練習作業-建立一份HTML文件


以下是上面HTML中各種符號的說明連結:


參考:

沒有留言:

張貼留言