
初探 HTML
HTML 是 (HyperText Markup Language –> 超文本標記語言) 的縮寫,是一種用來製作網頁的標記式語言。
標記式語言是指在內容的前後加上標籤,例如:
<h1>這是我的第一個網頁</h1>
h1 是指標題,標題總共有 h1 ~ h6 種可以使用,這六個的區別是標題的大小不同,效果如下:
我是 h1
我是 h2
我是 h3
我是 h4
我是 h5
我是 h6
接著來實際製作一個簡單的網頁!
1. 開啟文字編輯器,新增一個檔案,並將以下內容寫到編輯器上。
<html>
<head>
</head>
<body>
</body>
</html>

在這裡我用的編輯器是 EmEditor,這是一個免費好用的文字編輯器!
平常我在寫網頁用的是 Brackets 和 Dreamweaver,Brackets 是免費的編輯器,雖然是免費,但它有一個及時預覽的功能,非常好用!
這裡來簡單的介紹一下上述的標籤:
html 標籤裡放置整個網頁的資料,網頁上的所有資料都在裡面。
head 標籤存放網頁的資訊,例如瀏覽器上方的標題、這個網頁的編碼…… 等等。
body 標籤放要給使用者看的網頁內容。
2. 將上面內容複製完後,請將檔案存檔,檔名為 index.html,最重要的是,存檔時的編碼,請選擇 UTF-8。
通常首頁的名稱都是 index.html,寫 PHP 程式時也是,首頁檔名會取 index.php。
當我們在瀏覽器輸入網址時,進去之後它就會先抓 index.html 來顯示。
3. 設定網頁的標題,請將以下內容放到 head 標籤裡面。
<title>這是我的第一個網頁</title>

接著開啟瀏覽器看看,會發現標題變成了「這是我的第一個網頁」。

4. 最後,在網頁上顯示一些資料,將以下內容放到 body 標籤裡。
<p>Hello World</p>
<p> 標籤是段落

恭喜你完成了第一個網頁!可以打開瀏覽器來確認一下

如果覺得文章內容還不錯的話,麻煩請幫我點個讚!感謝
可以多點幾次喔~~
第一次點讚需使用 Google 或 Facebook 帳號註冊

