2021 年 5 月 11 日
ORDPRESS 架站之小工具-自訂HTML語法教學1與嵌入GOOGLE行事曆應用

WORDPRESS 架站之小工具-自訂HTML語法教學1與嵌入GOOGLE行事曆應用

點閱: 13

想要架網站、做網頁,有時想改一個小地方,但若不懂語法,總是要麻煩別人,甚至把帳號密碼都給對方,請他進來幫忙改,這樣真的永遠在麻煩別人!而且需要等到對方有空才做的了事!對於個性急的人,是否覺得如果我自己會改,是不是比較快?網頁的組成全是文字,無論您想讓它出現一張圖、影片、粗體字或者超連結,都是利用語法即能達成,如果自己將常用語法學會了,也就能做很多事!甚至想出現GOOGLE 行事曆在您的網頁上都不是問題喔!

一、自訂HTML語法教學

原本WORDPRESS在製件網頁已經有許多區塊可以直接使用,例如標題、段落、圖片、超連結、字體顏色設定,建議初學者首先要學習HTML基本功,再來學習進階的部份。

HTML語法

HTML語法為純文字,以結構化式標籤集結,所謂結構化以一句話表示:大巢包小巢,小巢分開獨立。標籤稱做TAG,TAG即稱為:標題標籤、段落標籤、圖片標籤、超連結標籤、字體標籤。。。等等一一介紹。因為今天專門談的是小工具之自訂HTML,所以太過艱深的留待下次說明。

簡易標籤介紹

以小工具自訂HTML常使用之標籤介紹

段落標籤 <p>HTML語法</p>

<p>HTML語法</p>. P:代表為段落,標籤的前後,要用<標籤> 包住,結尾要用</標籤> ,二個標籤差異於何?結尾標籤多了一條「/」。

超連結標籤<a href=”網址”> 顯示之文字</a>

a 代表 anker 下錨,安佳奶粉公司標誌,船航行到某個定點,把錨抛下去,讓船不亂飄移,即為下錨的意思。於網際網路中則為至哪個網址,因此 href 意即 hyper reference ,英文之意:跳至哪個參考點

例如:

1.我們要想設定TN姐姐生活饗宴網站之超連結,滑鼠移至該處時呈現”手指頭”,則語法如下:

<a href=”tcic58.com”>TN姐姐生活饗宴</a>

2.YOUTUBE影片亦一樣,把影片網址帶入” “中即可,例如,我們想介紹巨大聖蹟將在聖天湖展示,影片網址https://youtu.be/nG33tMR7tGM,那麼語法如下

<a href=”https://youtu.be/nG33tMR7tGM“>巨大聖蹟將在聖天湖展示</a>

範例解說

ORDPRESS 架站之小工具-自訂HTML語法教學1與嵌入GOOGLE行事曆應用
ORDPRESS 架站之小工具-自訂HTML語法教學1與嵌入GOOGLE行事曆應用

以上圖之相關連結如何寫出HTML?

天啊,是不是好可怕!

如果這麼一長串,要新手寫出HTML,實在是一件難事,有個超簡單作法,利用WORDPRESS文章編寫方式,把字先打好,連結做好,再顯示HTML,複製貼到小工具即可。

網路行銷 案例學校招生廣告學校網頁設計旅遊極短篇國教署 向上集中佩珊老師學校網站

請看影片操作

二、於WORDPRESS 側邊欄 嵌入GOOGLE行事曆

首先,本篇教授於側邊欄顯示GOOGLE行事曆,若您要顯示於頁尾也是可以的,但都如上面所示,全部利用小工具之自訂HTML即可。

每一使用GOOGLE 郵件、或應用程式者,都可建立GOOGLE行事曆,GOOGLE行事曆的嵌入語法並不容易一下子找到,簡單的利用網頁順序來跟大家說明:

  1. 登入CHROME
  2. 進入GOOGLE九宮格 選取GOOGLE日曆,或者網頁搜尋GOOGLE 行事曆,進入自己的行事曆
  3. 右上角齒輪處點選設定,再點選要顯示於WORDPRESS的行事曆。
  4. 點選 日曆設定/整合日曆/ 內嵌程式碼/ 複製
  5. 轉換至WORDPRESS
  6. 點選 WORDPRSS儀表板/外觀/小工具/自訂HTML 貼上

底下為實際操作畫面。

Facebook Comments