什麼是HTML?

 





1. HTML 是什麼呢 ?

html介紹

HTML 的英文原文是 HyperText Markup Language ，中文譯為「超文字標示語言」。為什麼要說「超文字」呢？如果你曾經用過 Windows 上的「記事本」打過字，你應該知道一般的純文字輸入是無法顯示不同的字型大小、不同的文字顏色、甚至插入與文字說明相關的圖片的。而超文字則可包含這些不同的文字變化、加入圖片或影音多媒體、畫表格、甚至可做一些基本的排版功能。而「標記語言」指的是 HTML 透過一些定義好的結構化標籤 (Tag) 語法，讓你把超文字放到你所想要的位置、或去指定它的呈現方式。因此，再簡單的說， HTML 就是可以讓你將您所想要呈現給別人看的資料，儘可能以較豐富的方式去呈現。

我可以用什麼工具編寫 HTML 網頁？

很簡單，用 Windows 內建的「記事本」小軟體，就可以拿來練習編寫網頁了。但如果可以的話，真心推薦您使用以下其中一套「免費的進階版記事本」小軟體： Notepad++ 、 sublime，因為它們可以幫您將 HTML 語法和您的網頁文章內容用不同的顏色做一些區隔，讓您更方便閱讀 HTML 內容，並且也可以及早讓您發現可能的編寫錯誤，讓您的學習之路更為順暢。

我要如何瀏覽及測試我的 HTML 網頁呢？

當您使用前述的「記事本」工具編寫完內容後，可以將檔案儲存成 test.html 這樣的檔名， test 即是您網頁的主檔名，而 .html 則為網頁的副檔名。假設您的檔案是儲存在「桌面」，您可用檔案總管或是任何可能的方式到桌面去找到 .html 的檔案，例如前述的 test.html 檔，然後用滑鼠在 test.html 檔案上按左鍵快速點選兩下，則電腦即會自動以您系統預設的 網頁瀏覽器 開啟這個練習的網頁


2. HTML 基本語法

基本的HTML文件格式

<HTML>
　<HEAD>
　　<TITLE>網頁主題</TITLE>
　　<Meta>
　</HEAD>
　<BODY>
　　網頁內容的主要呈現部分
　</BODY>
</HTML>

<html></html> 文件格式 檔案的開頭與結尾

<title></title> 網頁主題 必須放在抬頭區段

<head></head> 抬頭區段 描述文件的資訊，如「網頁主題」

<body></body> 內文區段 內容所在


主題常用的HTML語法

<title>我是本文章的主題</title>

標題

<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>

段落

<p>段落</p>

連結

<a href= "https:/www.knowhowfarm.com/" target="_blank">This is my blog</a>

target="_blank" 在新窗口打開文檔

圖片

<img src="test.jpg" alt="說明可以寫在這邊" title="滑鼠移動到圖片會顯示" width="寬度" height="高度">

按鈕

<button>click</button>

列表

<ul> #unorder list 無序列表
    <li>a</li>
    <li>b</li>
</ul>
<ol> #order list 有序列表

表格

<table border='邊框的粗度 , 請填數字'>
    <tr>
        <td> row 1, cell 1</tr>
        <td> row 1, cell 2</tr>
    </tr>
    <tr>
        <td> row 2, cell 1</tr>
        <td> row 2, cell 2</tr>
    </tr>
</table>

區塊標籤<div>

<div>
    //內容
</div>

小區塊標籤<span>

<span>內容</span>

表單

<!-- 文字輸入框 -->
<input type="text" value="初始資料" placeholder="提示文字">

<!-- 大量文字輸入框 -->
<textarea value="初始資料" placeholder="提示文字"></textarea>

<!-- 下拉選單 -->
<select size="value" multiple>
	<option value="value" selected>選項1</option>
	<option value="value">選項2</option>
	<option value="value">選項3</option>
</select>

<!-- 單選框 -->
<input type="radio" name="sex" value="man"> 男
<input type="radio" name="sex" value="woman"> 女

<!-- 復選框 -->
<input type="checkbox" name="location" value="Taipei"> 台北
<input type="checkbox" name="location" value="Taipei"> 台南

其他常用標籤

<br/> //下一行
<hr>  //分格線
<iframe></iframe> //用來載入其他網頁作為子畫面用的標籤 , 像是內嵌FB的文章

3. HTML - SEO優化

標題Tag : <title>標題...</title>

Title Tag 是任何頁面最重要的元素，就好像是一本書的書名。如果你的每個頁面都是同樣的Title Tag，就好像你寫了很多書，但是每一本書的書名都是一樣的。這樣有誰能夠知道這些書的內容是什麼呢？

你放在Title tag的內容，通常也就是搜尋引擎列出的標題：

要讓搜尋引擎認識你的網站，Title tag 可以說是最重要的HTML訊號。此外，這個標題就是網友搜尋後看到的標題，標題念起來是否通順？標題是否具有吸引力？也會直接關係到點擊率，即流量的導入狀況。因此，不要過於著重在置入關鍵字，而是要盡量讓標題顯得自然，甚至，應該當成是在寫廣告標題一樣去寫它。

假設你的標題下得很糟，或是關鍵字堆疊、而非描述性的標題，Google有可能會改變呈現出來的標題。

Google 的Matt Cutts曾經在說明影片中提出，會被Google採用的Title Tag 需要符合的準則：

  1. 相對簡短
  2. 有良好的頁面描述，且符合該頁面內容
  3. 跟搜尋詞有相關性

架設不符合這個準則，Google可能改寫你的標題，採用的內容為：1. 網頁中的內容 2. 指向這個頁面的錨點文字 3. 也可能會使用公開的目錄頁面內容(即黃頁網站的內容)

H 標籤 : <h1>主要標題...</h1>

H1 Heading是一個頁面的主要標題，它也是用來增加吸引力，引導訪客進一步瀏覽頁面的重要元素。

就像你進入一個新聞網站，新聞標題是非常重要的，但它的重要性主要是在影響訪客是否繼續往下瀏覽。

下一個層級的標題，則是使用H2 Heading。Header Tag是用來辨識一個頁面的關鍵區塊的方式，搜尋引擎將他們當成線索，來釐清一個頁面的內容。如果Header tag 包含關鍵字的話，對於排名也是略有幫助。

總結:

1. 不要使用多個H1標籤
搜尋引擎演算法會認為是作弊，是會妨礙到文章SEO的分數。H1標籤每個文章、頁面使用一次為限，並排在H2-H6之前。

2. 不要過度使用H2、H3標籤
H1只能用一次那其他全部標H2或H3，這種想法是很常見的。過度使用H2或H3標籤，或會跳過H2標籤，只使用H3標籤。這類做法都是不利於搜尋引擎演算法的理解，並可能會妨礙文章SEO分數。

圖片 Alt Tag

理想的Alt tag也是描述性文字，只放關鍵字也可以。這個Tag是在告訴搜尋引擎，這張圖片的內容是什麼。這可以幫助你的圖片，在圖片搜尋的部分得到更高的排名。如果你的網站是電商網站的話，Alt是非常重要的。例如，假設今天的搜尋詞是商品規格表，這個圖片可能會將顧客導到你的網站。


較佳的Alt tag

<img src="test.gif" alt="三星手機j7完整規格表"/>
<!-- 因為這個Alt tag 的描述性更強，因此相對而言是更好的Alt tag。 -->

不建議的用法

<img src="test.gif" alt=""/>
<img src="test.gif" alt="手機,三星手機,三星j7,三星手機截圖"/>


Alt tag 不要用在裝飾性圖片，而是應該用在：

  • 商品圖案
  • 圖片
  • 資訊圖表
  • LOGO
  • 螢幕截圖
  • 團隊成員照片

描述 : <meta description="這個網站的簡短介紹...">

Meta Description作用為「內容的簡述」，常見於網站或是頁面的介紹。建議描述內容能夠加入「主要關鍵字」，並附帶一至三個「次要關鍵字」，中文字數75字以內（英文字數150字）

注意 : meta description 已經不列入seo了, 如果描述下得好的話 , 還是會吸引使用者點進網站的


留言

張貼留言

這個網誌中的熱門文章

網頁入門教材目錄

  0.網頁運作原理 網頁運作原理與專業名詞 1.程式編輯器sublime 3 介紹 sublime 3 使用介紹 2. PHP開發環境介紹  Xampp介紹 3. 認識HTML HTML介紹 4. 認識CSS CSS基礎篇 CSS基礎語法 5.認識 Javascript Javascript基礎 6. 認識 Jquery Jquery與ajax介紹 7. Bootstrap 4 基礎介紹 Bootstrap 4 介紹 Bootstrap 4 範例製作 8. 資料庫入門 MariaDB入門教學 9. PHP介紹 PHP基礎用法 - 1 PHP基礎用法 - 2 PHP物件導向 PHP與資料庫連線 10. Laravel框架入門 Laravel 基礎概念 Laravel下載安裝、MVC流程編寫、資料庫設定 Laravel 新增資料與顯示資料 Laravel 資料修改與刪除 Laravel 完整筆記本範例
閱讀完整內容

網頁是怎麼運作的呢?

圖片
  短期來看，在撰寫網站程式碼時，這些理論並不是非懂不可，但在之後，了解這些背後原理，對你會很有幫助。 網頁know-how : 用戶端與伺服器端 用戶端 是網路用戶的典型上網設備（像是連到 Wi-Fi 的電腦、或是連到手機網路的手機），這些設備通常有能夠上網的軟體（通常是 Firefox 或 Chrome 之類的瀏覽器）。 伺服器端 是放著網頁、網站、或著 app 的電腦。當用戶端設備要訪問網頁時，網頁的副本會從伺服器下載到用戶端，以便顯示在用戶的瀏覽器。 IP位址 為Internet Protocol Address的縮寫，中文被稱為網際協議位址。 是一種在Internet上的給主機編址的方式。  IP位址可以說是網頁伺服器的門牌 讓系統可以透過這個號碼找到正確的網頁伺服器在哪裡。 DNS Domain Name System的縮寫，中文又稱領域名稱解析系統。 是網際網路的一項的服務，是個可將網址和IP位址相互對應的資料庫，能夠使人更方便的存取網際網路。( 不用記長長一串的數字啦！ ) 伺服器 伺服器作為硬體來說，通常是指那些具有較高計算能力，能夠提供給多個使用者使用的電腦。伺服器與PC機的不同點太多了，例如PC機在一個時刻通常只為一個使用者服務。伺服器與主機不同，主機是透過終端給使用者使用的，伺服器是透過網路給用戶端使用者使用的。 而近期 雲端伺服器 越來越盛行,常見的雲端服務有 AWS , GCP , AZURE 等.... , 雲端伺服器擁有非常多的服務, 可以節省開發時間 , 直接使用服務(但通常都不便宜...) 、擁有高擴展的硬體資源, 隨時調整你的硬體資源、安全性高等等.... , 想必之後會成為伺服器的主流 網頁伺服器 又叫做 Web Server 。 Apache是接洽的服務員負責將網頁畫面傳遞給瀏覽器，只要網頁中有需要資料的部分Apache就會向DB索取資料後一起交給瀏覽器。 DB(Data Base)就是存放資料的地方。 web server 的種類有： apache、nginx、iis apache 和nginx的差別在於nginx可能速度會比較快，用的資源少。 iis是微軟做的，如果是寫 asp.net  就可用這套iis但環境就是要在window server上。 瀏覽器輸入網址的流程 :...
閱讀完整內容