做一個初始網頁!
HTML被使用來創造我們每天造訪的網頁,並提供了一條捷徑去架構內容在網頁上。
定義:
如果我們把「HTML」分解,可以了解其中包含的許多定義。
Hyper -超
Text -文本
Markup -標記
Language -語言
中文譯名為「超文本標記語言」,是www上所有網頁的基礎,用途為對網頁文件進行視覺化和功能性的標記。
Q:什麼是視覺化標記呢? A:標題、顏色、表格、項目清單等。
Q:什麼是功能性標記呢? A:超連結、圖片、或文字輸入等互動元件。
基礎認識:
在我們開始之前,有些專業術語必須認識一下。
角括號(Angle brackets)- 就是鍵盤上的 < 與 >,使用來框住HTML元件。
HTML元件(HTML element)- 存在於一對角括號<>裡的HTML碼
開頭標籤(Opening tag)- 放在開頭,<>,被用來開始一個HTML元件。
結束標籤(Closing tag)- 放在尾端,</>,被用來結束一個HTML元件。
動手做:
1. 新增並開啟記事本
2. 打出HTML元件<html>與</html>
要開始一加上HTML架構與內容時,首先必須要打出一對開始標籤<html>與結束標籤</html>,任何東西只要在<html>與</html>之間,都會被辨識為HTML碼。反之,如果沒有這對標籤,瀏覽器有可能會不正確地解讀,並沒辦法呈現出你想要的HTML內容。
<html> 一個網頁的開始
</html>一個網頁的結束
3. 打出HTML元件<head>與</head>,在這之間再打入<title>與</title>
<head>網頁標頭,就好比你擁有名子一樣。
<title>標頭名稱,你有名子,可是你的名子是什麼?因此這個元件能呈現出你的名子叫什麼。
4. 打出HTML元件<body>與</body>
<body>文章的內容,可以在這對元件間打內容,寫作文除了要有標題,總該有身體內容吧?
5. 認識<p>和<h1>
<p>換行的意思,放這個可以跳下一行。
<h1>段落的小標題,數字部分是可以換1~6的,<h1>是最小的,<h6>是最大的。
6. 另存新檔及更改副檔名
寫完程式碼,另存新檔後,別以為你就完成了,因為它還只是個記事本呀!
因此如圖,我們就要把.txt 改成 .html的形式。
6.用瀏覽器開啟
用你喜歡的瀏覽器開吧,然後你就可以看到你程式碼呈現出來的網頁。