從未接觸過 HTML 的朋友，不必擔心，這篇文章將帶你一步步完成你的第一個簡易 HTML 網頁。透過以下六個步驟，你將能看到你的作品在瀏覽器上呈現。
步驟 (一)：
首先，打開電腦上的記事本或任何簡單的文字編輯器，將檔案存為一個 .html 檔案。例如，將檔名命名為 index.html 。
步驟 (二) ：
現在我們來編輯 index.html 檔案。在第一行宣告這個文件是 HTML5 版本，如下所示：
<!DOCTYPE html>
接著，加入成對的 <html> 和 </html> 標籤，表示 HTML 文件的開始和結束，如下所示：
<html>
</html>
在 <html> 標籤內加入 <body> 和 </body>，其中的內容將會在瀏覽器中顯示：
<html>
<body>
</body>
</html>
步驟 (三)：
目前為止的程式碼應該如下：
<!DOCTYPE html>
<html>
<body>
</body>
</html>
現在，我們要在瀏覽器上顯示「Hello, World!」，只需將文字加入 <body> 標籤內：
<!DOCTYPE html>
<html>
<body>
Hello, World!
</body>
</html>
存檔後，開啟這個 HTML 檔案，即可在瀏覽器中看到「Hello, World!」。
步驟 (四) ：
HTML 中還有其他標籤，例如 <head>、<meta>、<div> 等等，這些標籤可以視需要加入到 HTML 文件中。
步驟 (五)：
如果想要讓網頁中的文字字體變大、顏色變成綠色，我們可以使用 CSS 來美化頁面。這裡介紹一種簡單的方法 ( 內嵌 CSS )：在 <head> 標籤內加入 <style> 標籤，並在裡面寫入 CSS 語法：
<head>
<style>
body {
font-size:30px;
color:green;
}
</style>
</head>
步驟 (六) ：
最後，我們可以給這個 HTML 文件加上一個標題。這個標題會顯示在瀏覽器的標籤頁上，並對搜尋引擎的檢索有幫助。加入 <title> 標籤如下：
<head>
<title>My first HTML page</title>
</head>
重新整理程式碼，最終版本如下：
<!DOCTYPE html>
<html>
<head>
<title>My first HTML page</title>
<style>
body {
font-size:30px;
color:green;
}
</style>
</head>
<body>
Hello, World!
</body>
</html>
沒有留言:
張貼留言
請注意 : 您的留言發佈成功 , 需經審核後 , 才能決定是否回覆 . 謝謝 !!