HTML5教學網路行銷必知2-怎麼利用HTML製作表格?

HTML5教學網路行銷必知2-怎麼利用HTML製作表格?
HTML5教學網路行銷必知2-怎麼利用HTML製作表格?

 

一定要知道的網路行銷HTML5教學第二篇!! 今天要來談的是要怎麼樣用HTML製作表格~ 快往下拉吧!!

 

表格標籤<Table >指令一覽表

 

HTML5教學基礎篇2-如何使用HTML5做表格?許多網頁的表格都是使用jpg等圖片來表示,但是圖片的表現方式對於SEO優化的效果較弱,因為Google等搜尋引擎是認字勝過於認圖片!若你希望你的網站兼顧美觀與網路行銷課程必學的SEO優化效果,那你一定要學會辨認HTML5的表格標籤

在網頁中除了項目清單標籤:無照順序排列的<ul>和有照順序排列的<ol>,還有可以按照階層排列的<dl>之外,還有更複雜的表格標籤。(起始標為<table></table>)。

HTML5教學網路行銷必知2-怎麼利用HTML製作表格?
HTML5教學網路行銷必知2-怎麼利用HTML製作表格?

由此可以看得出表格標記<th>、<tr>、<td>之間的關係以及設定的方式。同時在每一個標記之內還可以使用其他的標記,做更細部的設定。如圖中的<td>標籤就加入了<width>標籤來設定寬度,是為<td width=100>。HTML5教學整理出表格標籤的常用屬性如下所示:

<align> 設定整張表格在網頁的對齊方式,有左 (left)、中 (center)、右 (right)

<bgcolor> 設定表格的背景色。以 #rrggbb 為色彩格式

<border> 設定表格的邊框寬度,以像素為單位

<cellpadding> 設定表格邊框與內容中間的留白要留多少,以像素為單位

<cellspacing> 設定格子與格子中間的空白。

<width> 設定表格的寬度,以像素為單位。

以上是針對整個表格的<table>屬性。至於<td><tr>也有相應的屬性設定如下:

<align> 對齊儲存格的內容,有靠左 (left)、靠中 (center)、靠右 (right)、還有分散對齊 (justify),這樣每行都可以有相等的長度(就像在報紙和雜誌中)、將內容對準指定字 (char)

<bgcolor> 設定儲存格的背景色。以 #rrggbb 為色彩格式

<colspan> 合併橫向的儲存格,數字以欲合併的格數為單位

<rowspan> 合併直向的儲存格,數字以欲合併的格數為單位

<height> 設定儲存格高度。

<width> 設定儲存格寬度。

<rowrap> 限制儲存格的內容不能換列,也許可以維持美觀,但是會犧牲多出來的文字內容。

<valign> 儲存格內容的字對齊,有靠上對齊 (lop)、靠中對齊 (middle)、靠下對齊 (bottom)。不過,如果文的字體不相同,baseline 的效果會最好。

以上都是能與網路行銷課程所學相輔相成的網頁應用項目。

 

其他閱讀

 

HTML5教學網路行銷必知1-初學一用就上手免費編輯器!!

 

HTML5教學網路行銷必知3-HTML新增了些什麼?

 

電腦選花生不稀奇~ 現在人工智慧還會養蝦呢!! 存活率大幅提升,蝦隻變大!!

 

你聽過的大企業都投入AI領域,你還不趕緊來個Python課程先? (下)

 

你聽過的大企業都投入AI領域,你還不趕緊來個Python課程先?

 

中國IT教育領導品牌 達內教育集團第一家海外授權中心

 

美國NASDAQ上市公司、外商IT教育培訓企業

讓Python課程學員傻眼的Google中國相關業內新聞(下)

讓Python課程學員傻眼的Google中國相關業內新聞(下)
讓Python課程學員傻眼的Google中國相關業內新聞(下)

 

Python課程學員很有關係的新聞!! 下篇的真正原因更讓你不敢相信!! 還沒看上篇得也快去看喔~

 

參與 Dragonfly 計畫的團隊:他們正在做的事,他們卻不知道

 

有些參與「Dragonfly」計畫的工程師,使用金鑰,進入「與 265.com 關聯的應用程式」並獲得搜尋數據 – 然而他們不知道他們用的是 265.com。他們只是取得了這些人使用「中文」的搜尋行為後,建構了「Dragonfly」的原型。他們使用名稱為「培根塔 (BeaconTower)」的工具(上過Python課程的你應該已經學過了),檢查這些中國人所蒐尋的字串,若是藉由 Google 搜尋出來的結果,是否會被中國國家防火牆擋住。經由這些過程,工程師們彙整出好幾千個被禁的網站,並且整合到「Dragonfly」搜尋平台使其被清除掉。這些網站都是被中國官方禁止的網站,知名網站包含維基百科與 BBC。

 

違反業內行規 Google員工怒

 

據業內行規,對於使用者搜尋字詞的分析,是需要受制於嚴格的管制,並且被負責用戶隱私的相關人員查核過的 – 他們的工作就是要維護用戶的隱私嘛!但是 Google 負責用戶隱私的團隊,卻是在第三方媒體 The Intercept 發現自家公司瞞著他們進行 Dragonfly 計畫,憤而警告負責 Dragonfly 計畫的工程師們:不得再繼續使用藉著python搜尋引擎 265.com 所匯集的用戶搜尋行為資料。

 

最近幾周,負責 Dragonfly 計畫的團隊們,也被告知只能使用「其它的」資料庫:全球華人的 Google 搜尋行為據,而不是中國大陸的 265.com。當然,全球華人(如美國、馬來西亞等地區)的搜尋行為一定跟單單大陸的數據非常不同。這時若要求參與 Dragonfly 計畫的人員「ㄍㄧㄣ」出準確的結果,根本就不可能!因此有好幾個團隊的工程師們紛紛離開了參與 Dragonfly 計畫。

 

內憂外患接踵而至,逼得Dragonfly計畫停止

 

雖然公開否認未來會排除 Dragonfly,但是上一周 Google 的 CEO 桑德佩奇標示「現在」對於啟動 Dragonfly 已無進一步的計畫。因為內部與外部的反彈接踵而至,讓最初的計畫:要在明年一月到四月啟動 Dragonfly,已經造成很大的變動。至少短期內 Dragonfly 是被擱置的~

 

其他閱讀

 

讓Python課程學員傻眼的Google中國相關業內新聞(上)

 

電腦選花生不稀奇~ 現在人工智慧還會養蝦呢!! 存活率大幅提升,蝦隻變大!!

 

台灣人工智慧APP雅婷逐字稿,讓你省去打字的煩惱!! 轉的精準快又好!!

 

你聽過的大企業都投入AI領域,你還不趕緊來個Python課程先? (下)

 

你聽過的大企業都投入AI領域,你還不趕緊來個Python課程先?

 

中國IT教育領導品牌 達內教育集團第一家海外授權中心

 

美國NASDAQ上市公司、外商IT教育培訓企業

HTML5教學網路行銷必知1-初學一用就上手免費編輯器!!

HTML5教學網路行銷必知1-初學一用就上手免費編輯器!!
HTML5教學網路行銷必知1-初學一用就上手免費編輯器!!

 

學習網路行銷HTML5教學的你看到賺到!! 如果你又正好是第一次寫HTML更是要看阿!! 免費的編輯器上就上手喔!!

第一次寫HTML網頁?那你一定要先學這些HTML標籤與線上免費網頁編輯器

初學者上 HTML5教學 卻沒有 Dreamweaver 怎麼辦? 還好線上練習網站 codepen 提共了免費的HTML5網頁平台。你可以在網頁上輸入程式碼,並立即獲得輸出的樣式。他有免費以及付費的方式可以使用,若你只是單純想練習 HTML/CSS/Javascript 的話,使用免費模式即可。付費模式則可在此網站建立屬於你個人的文件內容,並且擁有網頁空間可以放自己的網站。那要如何進入到純練習的介面呢?達內網路行銷課程提供的操作步驟如下:

1. 進入codepen首頁(如下圖),並且點選左側的「Create」,並選擇「Pen」。

HTML5教學網路行銷必知1-初學一用就上手免費編輯器!!
HTML5教學網路行銷必知1-初學一用就上手免費編輯器!!

2. 進入練習的頁面如下,左側是HTML;中間是CSS;右側是Javascript。下方則是即時預覽介面。如下圖所示:

HTML5教學網路行銷必知1-初學一用就上手免費編輯器!!
HTML5教學網路行銷必知1-初學一用就上手免費編輯器!!

HTML 基本架構

上過HTML5教學網路行銷課程就知道 HTML 沒有像一般程式語言一樣有變數儲存的功能、不能操作記憶體、不能算是一個正規的語言,而比較像是一種排版的標記。

所有的 HTML 標籤 (又稱標記、tag) 大都是成對的,如「<p>」和「</p>」,只有少部分如斷行用的「<b>」和「</b>」來完成

所有的 HTML 都以「<html>」開始和「</html>」結束

HTML檔的開頭,都會有<!DOCTYPE html>來當作HTML的識別標記。

HTML的檔案架構如下:

HTML5教學網路行銷必知1-初學一用就上手免費編輯器!!
HTML5教學網路行銷必知1-初學一用就上手免費編輯器!!

在「<html>」和「</html>」主要分成<head></head>和<body></body>兩部分。

如圖所示,<head></head>裡面又有<meta charset=”utf-8″>,是用來設定本網頁的字元編碼是用utf-8,因為現今網頁普遍編碼皆為UTF-8。

而<title></title>為標題標記,是用來定義網頁的標題,同時 Title 也會被 Google 設定為搜尋結果上顯示的網頁標題,因此在 SEO 上是非常重要的優化項目之一。

另外,在<head></head>標籤裡面除了<meta>和<title></title>之外,大部分對於 CSS 以及 Javascript 的設定也會放在這裡面。後續的文章會陸陸續續做說明。

重要、基本的 HTML 標記

真正網頁的內容,是放在<body>和</body>中間。常用的、任何版本皆通用的 HTML 如下所示:

<h1>~<h6> 可用來設定標題格式,若沒有另外規定的話,<h1>最大;<h6>最小。

<p> 可設定文章中的段落,被<p></p>包住的文字為一個段落,也會自動換行。

<br> 可讓文章強制換行

<table>系列 以<table></table>來插入表格,每一列的內容都包在 <tr></tr> 中間,每一列的內容包含每一格,包在 <td></td> 中間,又以 <th></th> 設定每一欄位的標題名稱。

<div> 透過 DIV 標籤可以在網頁中創造各個不同的區塊。這裡的「區塊」可視為一大段落的文字,做同一種格式設定,每個區塊內還可以增加更小的區塊。設計師也可以善用 HTML div 區塊來進行排版。區塊內容,可以是文字、圖片、影片、框架 … 等網頁內容,開頭的<div> 區塊內可以設置 id、class 或直接開始一段樣式設計,也就是 style 的部份。

<span> 和<div>相似,不同的是<span>是小範圍的格式設定,多在一行之內。

<img/> 連結圖檔的標記,圖片來源可為同一台主機的圖片或是網路上任一張圖片。

<a> 超連結URL。

<hr/> 橫的分隔線。

<ul> 項目清單(無順序)。

<ol> 項目清單(具有順序性)。

<ol> 項目清單的單一項目。

<iframe> 在網頁中嵌入其他網頁,如 Youtube。

<dl> 有階層項目的清單,<dt>為第一階層;<dd>為第二階層。


以下為文字的 HTML 標籤

<center> 置中文字。

<i> 把文字斜體。

<u> 在文字上加上底線。

<sub> 上標

<sup> 下標

<em> 強調文字

<big> 字體放大。

<small> 字體縮小。

<pre> 讓文字內容以原本的樣式出現,不加任何其他的格式。

<strong><b><em> 粗體、強調文字。雖然外觀上無益,但是在意義上,<strong>的權重高於<b>和<em>。

上述 tag 中還可以自行置入參數,做細部的設定。如上述 <h2>即可在標籤內加入「align」指令設定標題二(h2)的對其方式,如以下所示:

<h2 align=right></h2>即為向右對齊;<h2 align=left></h2>即為向右對齊;<h2 align=center></h2>即為向中對齊

除了像是<p></p>、、<hr/> 等簡單的標籤之外,許多標籤會自動依照其特殊的結構而組合成預期的樣子,如<dl>,與其他的標籤顯示如下:

HTML5教學網路行銷必知1-初學一用就上手免費編輯器!!
HTML5教學網路行銷必知1-初學一用就上手免費編輯器!!

由以上圖片可知,原始碼的部分,所有的標籤與文字雖然都沒有分行,但是顯示出來的樣子卻可以依照標籤屬性而有次序的排版。像這樣的 HTML 標籤,還有更複雜的表格標籤(點此看說明)。

其他閱讀

 

HTML5教學網路行銷必知2-怎麼利用HTML製作表格?

 

HTML5教學網路行銷必知3-HTML新增了些什麼?

 

電腦選花生不稀奇~ 現在人工智慧還會養蝦呢!! 存活率大幅提升,蝦隻變大!!

 

你聽過的大企業都投入AI領域,你還不趕緊來個Python課程先? (下)

 

你聽過的大企業都投入AI領域,你還不趕緊來個Python課程先?

 

中國IT教育領導品牌 達內教育集團第一家海外授權中心

 

美國NASDAQ上市公司、外商IT教育培訓企業

讓Python課程學員傻眼的Google中國相關業內新聞(上)

讓Python課程學員傻眼的Google中國相關業內新聞(上)
讓Python課程學員傻眼的Google中國相關業內新聞(上)

 

Python課程學習人員知道了一定很震驚!! Google之前突然宣布停止中國搜尋引擎Dragonfly的開發計畫!!

 

外界媒體爆料後才知真相!憤怒的Google員工促使秘密計畫終止

 

Google 公司內負責用戶隱私的團隊,為著 Google 瞞著他們,進行中國地區搜尋引擎的開發計畫「Dragonfly」,感到強烈的不滿。因為這個搜尋引擎的搜尋結果都是「被過濾」的。

 

這個內部的裂痕越來越深,大到日前 Google 正式宣布終止「Dragonfly」計畫。對比兩年前 Google 的 CEO 桑德佩奇 (Sundar Pichai) ,將大陸列為優先執行的地區。形成一個強烈的對比。

 

學習Python課程外你也要知道的新聞 – 衝突於今年八月中旬就開始,那時一家美國網路媒體 The Intercept(攔截者)爆料:參與「Dragonfly」的 Google 團隊們使用架設在北京的網站,建構了要給搜尋引擎過濾搜尋結果的黑名單。黑名單的對象則是依據中國共產政府嚴格的審查制度,包含的是關於民主、人權、和平抗爭等資訊相關的網站。

 

「美圖秀秀」董座手中購得「中國最多人使用的入口網站」 Dragonfly 蒐集大量數據

 

Dragonfly 計畫所需的分析資料來自於 Google 2008 年購買的入口網站 265.com。這個建立在北京的網站是「265.com」-曾經是「中國最多人使用的入口網站」,由 Google 2008 年從億萬富豪蔡文勝 (美圖秀秀董事長、天使投資人) 手中購得。265.com 當時提供了中國人多種資訊 (如金融市場、便宜機加酒等實用資訊) 以及網站、圖片與影片的python搜尋引擎。儘管它搜尋的運作原理,是先把用戶輸入的訊息導到百度後,再回傳結果給用戶,但是它已經藉由用戶輸入的訊息的過程,蒐集儲存了相當的用戶資料。

 

然而這樣子的行為,為何會需要瞞著員工? 為何會引起外界媒體的爆料、並引起 Google 內部員工如此大的反彈? 請看下一篇~

 

其他閱讀

 

讓Python課程學員傻眼的Google中國相關業內新聞(下)

 

電腦選花生不稀奇~ 現在人工智慧還會養蝦呢!! 存活率大幅提升,蝦隻變大!!

 

台灣人工智慧APP雅婷逐字稿,讓你省去打字的煩惱!! 轉的精準快又好!!

 

你聽過的大企業都投入AI領域,你還不趕緊來個Python課程先? (下)

 

你聽過的大企業都投入AI領域,你還不趕緊來個Python課程先?

 

中國IT教育領導品牌 達內教育集團第一家海外授權中心

 

美國NASDAQ上市公司、外商IT教育培訓企業

實用HTML5教學小技巧二-如何使用HTML來做表格~

實用HTML5教學小技巧二-如何使用HTML來做表格~
實用HTML5教學小技巧二-如何使用HTML來做表格~

 

超實用的HTML5教學第二篇!! 這一篇要分享的小技巧是如何用HTML製作表格!! 認清表格標籤好簡單!!

 

表格標籤<Table >指令一覽表

 

HTML5教學基礎篇2-如何使用HTML5做表格?許多網頁的表格都是使用jpg等圖片來表示,但是圖片的表現方式對於SEO優化的效果較弱,因為Google等搜尋引擎是認字勝過於認圖片!若你希望你的網站兼顧美觀與網路行銷課程必學的SEO優化效果,那你一定要學會辨認HTML5的表格標籤

在網頁中除了項目清單標籤:無照順序排列的<ul>和有照順序排列的<ol>,還有可以按照階層排列的<dl>之外,還有更複雜的表格標籤。(起始標為<table></table>)。

實用HTML5教學小技巧二-如何使用HTML來做表格~
實用HTML5教學小技巧二-如何使用HTML來做表格~

由此可以看得出表格標記<th>、<tr>、<td>之間的關係以及設定的方式。同時在每一個標記之內還可以使用其他的標記,做更細部的設定。如圖中的<td>標籤就加入了<width>標籤來設定寬度,是為<td width=100>。HTML5教學整理出表格標籤的常用屬性如下所示:

<align> 設定整張表格在網頁的對齊方式,有左 (left)、中 (center)、右 (right)

<bgcolor> 設定表格的背景色。以 #rrggbb 為色彩格式

<border> 設定表格的邊框寬度,以像素為單位

<cellpadding> 設定表格邊框與內容中間的留白要留多少,以像素為單位

<cellspacing> 設定格子與格子中間的空白。

<width> 設定表格的寬度,以像素為單位。

以上是針對整個表格的<table>屬性。至於<td><tr>也有相應的屬性設定如下:

<align> 對齊儲存格的內容,有靠左 (left)、靠中 (center)、靠右 (right)、還有分散對齊 (justify),這樣每行都可以有相等的長度(就像在報紙和雜誌中)、將內容對準指定字 (char)

<bgcolor> 設定儲存格的背景色。以 #rrggbb 為色彩格式

<colspan> 合併橫向的儲存格,數字以欲合併的格數為單位

<rowspan> 合併直向的儲存格,數字以欲合併的格數為單位

<height> 設定儲存格高度。

<width> 設定儲存格寬度。

<rowrap> 限制儲存格的內容不能換列,也許可以維持美觀,但是會犧牲多出來的文字內容。

<valign> 儲存格內容的字對齊,有靠上對齊 (lop)、靠中對齊 (middle)、靠下對齊 (bottom)。不過,如果文的字體不相同,baseline 的效果會最好。

以上都是能與網路行銷課程所學相輔相成的網頁應用項目。

 

其他閱讀

 

實用HTML5教學小技巧一-免費編輯器寫HTML這樣用!!

 

實用HTML5教學小技巧三-HTML新增的標籤有哪些?

 

電腦選花生不稀奇~ 現在人工智慧還會養蝦呢!! 存活率大幅提升,蝦隻變大!!

 

你聽過的大企業都投入AI領域,你還不趕緊來個Python課程先? (下)

 

你聽過的大企業都投入AI領域,你還不趕緊來個Python課程先?

 

中國IT教育領導品牌 達內教育集團第一家海外授權中心

 

美國NASDAQ上市公司、外商IT教育培訓企業

Python課程學習者非知不可Dragonfly計畫停止內幕(下)

Python課程學習者非知不可Dragonfly計畫停止內幕(下)
Python課程學習者非知不可Dragonfly計畫停止內幕(下)

 

Python課程學習相關人員都逃不了干係的業內消息下篇!! 幕後原因超傻眼!! 想知 到詳情也請看上篇喔!!

 

參與 Dragonfly 計畫的團隊:他們正在做的事,他們卻不知道

 

有些參與「Dragonfly」計畫的工程師,使用金鑰,進入「與 265.com 關聯的應用程式」並獲得搜尋數據 – 然而他們不知道他們用的是 265.com。他們只是取得了這些人使用「中文」的搜尋行為後,建構了「Dragonfly」的原型。他們使用名稱為「培根塔 (BeaconTower)」的工具(上過Python課程的你應該已經學過了),檢查這些中國人所蒐尋的字串,若是藉由 Google 搜尋出來的結果,是否會被中國國家防火牆擋住。經由這些過程,工程師們彙整出好幾千個被禁的網站,並且整合到「Dragonfly」搜尋平台使其被清除掉。這些網站都是被中國官方禁止的網站,知名網站包含維基百科與 BBC。

 

違反業內行規 Google員工怒

 

據業內行規,對於使用者搜尋字詞的分析,是需要受制於嚴格的管制,並且被負責用戶隱私的相關人員查核過的 – 他們的工作就是要維護用戶的隱私嘛!但是 Google 負責用戶隱私的團隊,卻是在第三方媒體 The Intercept 發現自家公司瞞著他們進行 Dragonfly 計畫,憤而警告負責 Dragonfly 計畫的工程師們:不得再繼續使用藉著python搜尋引擎 265.com 所匯集的用戶搜尋行為資料。

 

最近幾周,負責 Dragonfly 計畫的團隊們,也被告知只能使用「其它的」資料庫:全球華人的 Google 搜尋行為據,而不是中國大陸的 265.com。當然,全球華人(如美國、馬來西亞等地區)的搜尋行為一定跟單單大陸的數據非常不同。這時若要求參與 Dragonfly 計畫的人員「ㄍㄧㄣ」出準確的結果,根本就不可能!因此有好幾個團隊的工程師們紛紛離開了參與 Dragonfly 計畫。

 

內憂外患接踵而至,逼得Dragonfly計畫停止

 

雖然公開否認未來會排除 Dragonfly,但是上一周 Google 的 CEO 桑德佩奇標示「現在」對於啟動 Dragonfly 已無進一步的計畫。因為內部與外部的反彈接踵而至,讓最初的計畫:要在明年一月到四月啟動 Dragonfly,已經造成很大的變動。至少短期內 Dragonfly 是被擱置的~

 

其他閱讀

 

Python課程學習者非知不可Dragonfly計畫停止內幕(上)

 

電腦選花生不稀奇~ 現在人工智慧還會養蝦呢!! 存活率大幅提升,蝦隻變大!!

 

台灣人工智慧APP雅婷逐字稿,讓你省去打字的煩惱!! 轉的精準快又好!!

 

你聽過的大企業都投入AI領域,你還不趕緊來個Python課程先? (下)

 

你聽過的大企業都投入AI領域,你還不趕緊來個Python課程先?

 

中國IT教育領導品牌 達內教育集團第一家海外授權中心

 

美國NASDAQ上市公司、外商IT教育培訓企業

實用HTML5教學小技巧一-免費編輯器寫HTML這樣用!!

實用HTML5教學小技巧一-免費編輯器寫HTML這樣用!!
實用HTML5教學小技巧一-免費編輯器寫HTML這樣用!!

 

關於HTML5教學的實用小技巧有很多,今天先要說的是適合初學者的免費編輯器!! 有了它就可以盡情的練習了!!

第一次寫HTML網頁?那你一定要先學這些HTML標籤與線上免費網頁編輯器

初學者上 HTML5教學 卻沒有 Dreamweaver 怎麼辦? 還好線上練習網站 codepen 提共了免費的HTML5網頁平台。你可以在網頁上輸入程式碼,並立即獲得輸出的樣式。他有免費以及付費的方式可以使用,若你只是單純想練習 HTML/CSS/Javascript 的話,使用免費模式即可。付費模式則可在此網站建立屬於你個人的文件內容,並且擁有網頁空間可以放自己的網站。那要如何進入到純練習的介面呢?達內網路行銷課程提供的操作步驟如下:

1. 進入codepen首頁(如下圖),並且點選左側的「Create」,並選擇「Pen」。

實用HTML5教學小技巧一-免費編輯器寫HTML這樣用!!
實用HTML5教學小技巧一-免費編輯器寫HTML這樣用!!

2. 進入練習的頁面如下,左側是HTML;中間是CSS;右側是Javascript。下方則是即時預覽介面。如下圖所示:

實用HTML5教學小技巧一-免費編輯器寫HTML這樣用!!
實用HTML5教學小技巧一-免費編輯器寫HTML這樣用!!

HTML 基本架構

上過HTML5教學網路行銷課程就知道 HTML 沒有像一般程式語言一樣有變數儲存的功能、不能操作記憶體、不能算是一個正規的語言,而比較像是一種排版的標記。

所有的 HTML 標籤 (又稱標記、tag) 大都是成對的,如「<p>」和「</p>」,只有少部分如斷行用的「<b>」和「</b>」來完成

所有的 HTML 都以「<html>」開始和「</html>」結束

HTML檔的開頭,都會有<!DOCTYPE html>來當作HTML的識別標記。

HTML的檔案架構如下:

實用HTML5教學小技巧一-免費編輯器寫HTML這樣用!!
實用HTML5教學小技巧一-免費編輯器寫HTML這樣用!!

在「<html>」和「</html>」主要分成<head></head>和<body></body>兩部分。

如圖所示,<head></head>裡面又有<meta charset=”utf-8″>,是用來設定本網頁的字元編碼是用utf-8,因為現今網頁普遍編碼皆為UTF-8。

而<title></title>為標題標記,是用來定義網頁的標題,同時 Title 也會被 Google 設定為搜尋結果上顯示的網頁標題,因此在 SEO 上是非常重要的優化項目之一。

另外,在<head></head>標籤裡面除了<meta>和<title></title>之外,大部分對於 CSS 以及 Javascript 的設定也會放在這裡面。後續的文章會陸陸續續做說明。

重要、基本的 HTML 標記

真正網頁的內容,是放在<body>和</body>中間。常用的、任何版本皆通用的 HTML 如下所示:

<h1>~<h6> 可用來設定標題格式,若沒有另外規定的話,<h1>最大;<h6>最小。

<p> 可設定文章中的段落,被<p></p>包住的文字為一個段落,也會自動換行。

<br> 可讓文章強制換行

<table>系列 以<table></table>來插入表格,每一列的內容都包在 <tr></tr> 中間,每一列的內容包含每一格,包在 <td></td> 中間,又以 <th></th> 設定每一欄位的標題名稱。

<div> 透過 DIV 標籤可以在網頁中創造各個不同的區塊。這裡的「區塊」可視為一大段落的文字,做同一種格式設定,每個區塊內還可以增加更小的區塊。設計師也可以善用 HTML div 區塊來進行排版。區塊內容,可以是文字、圖片、影片、框架 … 等網頁內容,開頭的<div> 區塊內可以設置 id、class 或直接開始一段樣式設計,也就是 style 的部份。

<span> 和<div>相似,不同的是<span>是小範圍的格式設定,多在一行之內。

<img/> 連結圖檔的標記,圖片來源可為同一台主機的圖片或是網路上任一張圖片。

<a> 超連結URL。

<hr/> 橫的分隔線。

<ul> 項目清單(無順序)。

<ol> 項目清單(具有順序性)。

<ol> 項目清單的單一項目。

<iframe> 在網頁中嵌入其他網頁,如 Youtube。

<dl> 有階層項目的清單,<dt>為第一階層;<dd>為第二階層。


以下為文字的 HTML 標籤

<center> 置中文字。

<i> 把文字斜體。

<u> 在文字上加上底線。

<sub> 上標

<sup> 下標

<em> 強調文字

<big> 字體放大。

<small> 字體縮小。

<pre> 讓文字內容以原本的樣式出現,不加任何其他的格式。

<strong><b><em> 粗體、強調文字。雖然外觀上無益,但是在意義上,<strong>的權重高於<b>和<em>。

上述 tag 中還可以自行置入參數,做細部的設定。如上述 <h2>即可在標籤內加入「align」指令設定標題二(h2)的對其方式,如以下所示:

<h2 align=right></h2>即為向右對齊;<h2 align=left></h2>即為向右對齊;<h2 align=center></h2>即為向中對齊

除了像是<p></p>、、<hr/> 等簡單的標籤之外,許多標籤會自動依照其特殊的結構而組合成預期的樣子,如<dl>,與其他的標籤顯示如下:

實用HTML5教學小技巧一-免費編輯器寫HTML這樣用!!
實用HTML5教學小技巧一-免費編輯器寫HTML這樣用!!

由以上圖片可知,原始碼的部分,所有的標籤與文字雖然都沒有分行,但是顯示出來的樣子卻可以依照標籤屬性而有次序的排版。像這樣的 HTML 標籤,還有更複雜的表格標籤(點此看說明)。

其他閱讀

 

實用HTML5教學小技巧二-如何使用HTML來做表格~

 

實用HTML5教學小技巧三-HTML新增的標籤有哪些?

 

電腦選花生不稀奇~ 現在人工智慧還會養蝦呢!! 存活率大幅提升,蝦隻變大!!

 

你聽過的大企業都投入AI領域,你還不趕緊來個Python課程先? (下)

 

你聽過的大企業都投入AI領域,你還不趕緊來個Python課程先?

 

中國IT教育領導品牌 達內教育集團第一家海外授權中心

 

美國NASDAQ上市公司、外商IT教育培訓企業

Python課程學習者非知不可Dragonfly計畫停止內幕(上)

Python課程學習者非知不可Dragonfly計畫停止內幕(上)
Python課程學習者非知不可Dragonfly計畫停止內幕(上)

 

學習Python課程的人非知不可的業內消息!! Google停止了中國Dragonfly的開發計畫!! 究竟是怎麼了?

 

外界媒體爆料後才知真相!憤怒的Google員工促使秘密計畫終止

 

Google 公司內負責用戶隱私的團隊,為著 Google 瞞著他們,進行中國地區搜尋引擎的開發計畫「Dragonfly」,感到強烈的不滿。因為這個搜尋引擎的搜尋結果都是「被過濾」的。

 

這個內部的裂痕越來越深,大到日前 Google 正式宣布終止「Dragonfly」計畫。對比兩年前 Google 的 CEO 桑德佩奇 (Sundar Pichai) ,將大陸列為優先執行的地區。形成一個強烈的對比。

 

學習Python課程外你也要知道的新聞 – 衝突於今年八月中旬就開始,那時一家美國網路媒體 The Intercept(攔截者)爆料:參與「Dragonfly」的 Google 團隊們使用架設在北京的網站,建構了要給搜尋引擎過濾搜尋結果的黑名單。黑名單的對象則是依據中國共產政府嚴格的審查制度,包含的是關於民主、人權、和平抗爭等資訊相關的網站。

 

「美圖秀秀」董座手中購得「中國最多人使用的入口網站」 Dragonfly 蒐集大量數據

 

Dragonfly 計畫所需的分析資料來自於 Google 2008 年購買的入口網站 265.com。這個建立在北京的網站是「265.com」-曾經是「中國最多人使用的入口網站」,由 Google 2008 年從億萬富豪蔡文勝 (美圖秀秀董事長、天使投資人) 手中購得。265.com 當時提供了中國人多種資訊 (如金融市場、便宜機加酒等實用資訊) 以及網站、圖片與影片的python搜尋引擎。儘管它搜尋的運作原理,是先把用戶輸入的訊息導到百度後,再回傳結果給用戶,但是它已經藉由用戶輸入的訊息的過程,蒐集儲存了相當的用戶資料。

 

然而這樣子的行為,為何會需要瞞著員工? 為何會引起外界媒體的爆料、並引起 Google 內部員工如此大的反彈? 請看下一篇~

 

其他閱讀

 

Python課程學習者非知不可Dragonfly計畫停止內幕(下)

 

電腦選花生不稀奇~ 現在人工智慧還會養蝦呢!! 存活率大幅提升,蝦隻變大!!

 

台灣人工智慧APP雅婷逐字稿,讓你省去打字的煩惱!! 轉的精準快又好!!

 

你聽過的大企業都投入AI領域,你還不趕緊來個Python課程先? (下)

 

你聽過的大企業都投入AI領域,你還不趕緊來個Python課程先?

 

中國IT教育領導品牌 達內教育集團第一家海外授權中心

 

美國NASDAQ上市公司、外商IT教育培訓企業