元元不絕

前言（HTML）

前陣子為了網站需要，我自學HTML和CSS，因為本身有一點程式語言的基礎，所以HTML標籤語言，學起來相對輕鬆許多。

我自學HTML和CSS也沒其他特別厲害的方法，就是買書看，遇到問題上網看文章、找答案，然後用痞克邦（任何有後台的都行）來試試看效果。

終極目標當然是可以寫出自己理想的頁面，達到內容和背景都可以隨著自己的想法做調整。

當然我現在功力還遠遠不到，大多時候也都是遇到問題再上網找答案。

-----

圖片超連結

前天我寫了一篇推薦我姐的貼圖，然後把網址埋在圖片裡放在側欄，讓大家可以點擊圖片就連結到購買的網址，就像下圖所示；或者你可以把網頁轉換成＂電腦版”，到右上角點擊那一隻＂歡迎購買的仙人掌＂，就知道效果如何。

這個技能算是部落客必學，幾乎每個比較有名的美食或旅遊部落客都會在旁邊放圖片連結。

程式碼

<a target="_blank" href="https://store.line.me/stickershop/product/14682819/?ref=Desktop">

<img border="0"

heigh="200"

width="200"

src="https://pic.pimg.tw/elsa02232492/1616340236-58304657-g_n.png">

</a>

以上的內容複製到側欄，就會顯示出我的＂仙人掌圖片超連結＂。（你如果要用的話，記得內容的連結處和圖片位址要換過，不然會連到我的仙人掌）

程式碼解析

我們可以分成兩個部份看：

1）

<a target="_blank" href="https://store.line.me/stickershop/product/14682819/?ref=Desktop">

target：開啟的頁面資訊。所以在＜＞裡面的都是關於開啟頁面的資訊

＿blank：在新的頁面開啟

herf=＂XXX＂：XXX就是你要連結到的網址（上面舉例就是我姐的貼圖的購買網站）

提醒：標籤語言記得把等號後面的內容加上雙引號＂＂

2）

<img border="0"

heigh="200"

width="200"

src="https://pic.pimg.tw/elsa02232492/1616340236-58304657-g_n.png">

img：圖片的資訊。所以在＜>裡面的內容都是關於圖片的資訊。

border：圖片邊界；heigh：圖片的高；weigh：圖片的寬，這些就是關於圖片的外型敘述，隨著你要的大小作調整。

src：指的是圖片的位址。你要抓到圖片的位址，圖片必須在網路上，你才抓的到，所以如果你要用的是自己的圖，要先把他丟到網路上，再把他的位址複製下來。我上面舉例的就是我的仙人掌的位址。

那要怎麼找到圖片的位址呢？

1）滑鼠右鍵點圖片→在新分頁開啟圖片→上面的網址就是圖片的位址

2）滑鼠右鍵點圖片→複製圖片位址

複製完圖片的位址，就可以把它貼在src後面了。