top of page

做一個初始網頁!

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.用瀏覽器開啟

用你喜歡的瀏覽器開吧,然後你就可以看到你程式碼呈現出來的網頁。


Featured Posts
Recent Posts
Archive
Search By Tags
Follow Us
  • Facebook Basic Square
  • Twitter Basic Square
  • Google+ Basic Square
bottom of page