HTML簡介LOGIN

HTML簡介

HTML 的概念

我們學習HTML ,我們就要知道HTM是什麼?

長話短說,HTML是由一位叫TimBerners-Lee的科學家發明的。他發明HTML的目的,是為了方便不同大學的科學家可以更容

易地取得彼此的研究文件。 HTML取得了的巨大成功,大大超越了TimBerners-Lee的原本預期。透過發明HTML,他為我們今天

所認識的萬維網奠定了基礎。 HTML是一門語言,它讓我們可以在網際網路上展示資訊(例如科學研究資訊)。你所看到的網頁,是

瀏覽器對HTML進行解釋的結果。要查看一個網頁的HTML程式碼,只需在瀏覽器選單列上點擊查看原始文件,然後選擇"原始檔"即可

 #對於生手來說,HTML程式碼看似複雜,不過本教學將幫助你弄清楚它們的意義。


HTML能用來做什麼?

HTML是用來製作網站的。就這麼簡單!


#HTML檔

什麼是HTML檔?

  •  HTML的英文全名是Hypertext      Marked Language,中文稱為「超文本標記語言」。

  •  和一般文本的不同的是,一個HTML文件不僅包含文本內容,還包含一些Tag,中文稱「標記」。

  •  一個HTML檔案的字尾名是.htm或是.html。

  •  用文字編輯器就可以寫HTML檔案


HTML 文件= 網頁

  • HTML 文件描述網頁

  • HTML 文件包含HTML 標籤和純文字

  • #HTML 文件也稱為網頁


讓我們先看一個HTML檔

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>php.cn</title>
 </head>
 <body>
 
 建立的第一个HTML文件 <b> bold :粗体</b>
 
 </body>
 </html>

範例解釋:

### #<!DOCTYPE> 宣告必須是HTML 文件的第一行,位於<html> 標籤之前。它是指示web 瀏覽器關於頁面使用哪個 HTML 版本進行編寫的指令###

<!DOCTYPE html> 向下相容

<html> 與</html> 標籤限定了文件的開始點和結束點,在它們之間是文件的頭部和主體。另外,一般在HTML5裡<html>會寫

成<html lang="zh-CN">告訴瀏覽器網站是中文網站。

在<head>和</head>之間的內容,是Head訊息。 Head資訊是不顯示出來的,你在瀏覽器裡看不到。但這並不表示這些資訊

沒有用處。例如你可以在Head資訊裡加上一

些關鍵字,有助於搜尋引擎能夠搜尋到你的網頁。

<meta charset="UTF-8">這句話表示我們用的程式碼是UTF-8的編碼

在< title>和</title>之間的內容,是這個文件的標題。你可以在瀏覽器最頂端的標題列看到這個標題。

在<body>和</body>之間的訊息,是可見的頁面內容。

在<b>和</b>之間的文字,用粗體表示。 <b>顧名思義,就是bold的意思。

HTML檔案看起來和一般文字類似,但它比一般文字多了Tag,像是<html>,<b>等,透過這些Tag,可以告訴瀏覽器如何顯示

示這個文件。

Tag:英文中的意思是標籤


#HTML元素(HTML Elements)

·   HTML元素(HTML Element)用來標記文本,表示文本的內容。比如body, p, title就是HTML元素。 

·   HTML元素以Tag表示,Tag以<開始,以>結束。

·   Tag通常是成對出現的,例如<body></body>。起始的叫做開始 Tag,結尾的叫做結尾 Tag。

·   目前HTML的Tag不區分大小寫的。例如,<HTML>和<html>其實是相同的。


我們看過了HTML 文件,那應該是用什麼來寫我們的html檔呢,這就要用到我們的HTML編輯器了

#HTML 編輯器

使用Notepad 或TextEdit 來寫HTML

可以使用專業的HTML 編輯器來編輯HTML:

  • #Adobe Dreamweaver

  • ############################################################################### # Microsoft Expression Web##################CoffeeCup HTML Editor######

到百度去搜索,把他們下載安裝下來即可

不過,我們同時推薦使用文字編輯器來學習HTML,例如Notepad (PC) 或TextEdit (Mac)。我們相信,使用簡單的文字編

輯是學習 HTML 的好方法。

透過記事本,依照以下四個步驟來建立您的第一張網頁。

網頁的內容是:  哇!這是我的第一個網站


#步驟一:啟動記事本

#如何啟動記事本:在桌面滑鼠右鍵,新文字文檔,

步驟二:用記事本來編輯HTML

在記事本中輸入下列HTML 程式碼:

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>php.cn</title>
 </head>
 <body>
 哇!这是我的第一个网站
 </body>
 </html>

1.png




#步驟三:儲存HTML文件

#儲存文件,將檔案重新命名,將檔案的後綴名改為.htm 或.html 後綴名,兩者沒有區別,完全根據您的喜好。

6.png

步驟四:執行這個HTML 檔案



#直接雙擊開啟你的HTML檔案


#######運行效果如下:########## #####搞定!你已經完成了自己第一個真正的網站(儘管它只包含一個簡單的網頁)! #####################################下一節
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> 哇!这是我的第一个网站 </body> </html>
章節課件