HTML的優點?快速學習如何進一步組織你的網站


這篇是接著第一篇打的,還沒看或想複習一下的話,可以先來看看!
上次簡單介紹了HTML的大架構了~~那今天就來講一些跟設計有關的部分吧!😄
 
如果一個網站的畫面全部都是白底黑字,想必看起來很無聊吧!
那首先,我們先學學怎麼換背景顏色
 
 

背景顏色

因為背景顏色是影響整個網站的範圍,所以我們就直接在<body>後面加上bgcolor=”xxx”,如果你想要的顏色比較單純,直接打顏色的名字就可以了!
Post images
像我用淺藍色就是lightblue;紅色是red,綠色是green......簡單的英文就不廢話了哈哈哈,但如果你想精確一點表達顏色的話,也可以用#xxxxxx的方式來表達喔!
 
網站重新整理之後長這個樣子
Post images
 
這邊也附給大家色碼表可以參考參考😊!
 
 

字體顏色

會設定背景顏色,那接下來就是要設定字體顏色啦~~~
假如我想要更改h1的字體顏色,那就在<h1>後面增加style=color:”blue”
Post images
當然!如果你想要用#xxxxxx或者是rgb(xxx, xxx, xxx)來設定顏色也可以喔~~~
 
Post images
呈現出來就長這樣!
 
 

水平線

那顏色介紹一個段落了,我想要加一條平行線在中間,那就在想加入的地方打上<hr>,那<hr>一樣是沒有範圍的概念,也就不用加上結尾標籤囉!
Post images
(嗚嗚嗚忘記截到只有預設平行線的網頁圖惹…
 
 
如果你想要改變線的長度,那就可以在標籤裡面加上width=xx%代表平行線縮短成原來的幾趴,加入color=”xxx”也可以換顏色喔!
Post images
Post images
上面就是預設的平行線,下面是有調整過的平行線
 
 

對齊

那如果我想置左置中置右要怎麼做呢🤔?
那就在標籤裡面加上align=”xxx”就可以囉!
置左是left; 置中是center; 置右是right
Post images
 
Post images
看出來三個的差別了吧!😄
 
 

超連結

那再來教大家怎麼插入超連結吧!
如果我想要在This is normal text這些字上加上超連結,點進去可以連到google首頁,那就需要用<a>這個標籤了,<a>代表超連結的標籤,可以連到外部的網站,也可以連到自己的網站的某一個部分,但因為後面這個的小複雜就先不討論哈哈哈😅
 
完整打出來長這樣:
Post images
<a>後面加上href=”目的”目的不一定要是網址,也可以是想要連結過去的檔案,或者像我剛剛說連到同一個網站的某一個部分,也都是用這個屬性做連結,那This is normal text這一段文字就是你想要超連結連接的文字內容
 
Post images
有沒有成功產生超連結啊!!
 
 
再跟大家說個小技巧,如果你想要這個連結是用新視窗開啟,可以在href後面加上target=”_blank”,不然原本預設的會是原本的網頁直接跳轉到那個連結
(這個部份我也忘記截到圖了嗚嗚嗚...不過下面還是有打!
 
Post images
連結點開會像這樣!用新索引標籤打開連結
 
 

圖片

最後要教大家插入圖片~~~
圖片的標籤就叫<img>,在屬性的地方加上src=”xxx”也就是圖片的來源或者說是圖片位置,假如我想要在最後面插入google的logo,那就在剛剛開啟的網頁的中間大大的google按右鍵,接著"複製圖片位址
Post images
 
然後在剛剛的src後面貼上變成
Post images
這樣就完成啦!
 
圖片就會出現在最下面囉!
Post images
 
 
 
-------------------------------------------------------
那最後的最後要來跟大家分享一下HTML的優點,讓大家更了解你在學習的東西😀!
 
 

HTML優點

1.容易學習
HTML的文檔製作非常簡單易懂,除了功能強大之外還能支持不同格式的文件鑲入哦
 
2.製作門檻低
就像上一篇提到的,只要你學會HTML,也可以直接在記事本製作以及編輯呢哈哈哈(雖然應該沒人會這樣做啦…
 
3.有利於搜索引擎優化SEO
Google爬蟲會優先收錄靜態網頁,HTML就是屬於這種靜態的網站,所以HTML對於Google來說就像是鯊魚聞到血腥味一樣,有利於吸引到Google爬蟲
 
4.加快瀏覽速度
因為靜態網頁不需要連接到數據庫,因此會比打開動態網頁的速度還要快,對於消費者體驗來說也有所幫助喔
 
5.網站更安全
因為HTML的頁面不會受到Asp(動態伺服器網頁)相關漏洞所影響,也會相對更安全呢
 
6.減輕伺服器負擔
HTML不需要調動系統數據庫,自然就能減輕伺服器負擔啦
 
 
在這裡也附上原文文章
 
參考文章也給大家參考參考:
 
想了解更多跟程式相關知識的也可以到這裡 來看看~~

本文章發表於:課程

加入72

程式海獺

國立臺北大學 企業管理學系

追蹤 84 鼓勵作者

鼓勵作者

目前持有 Blink Coin: Loading..

選擇禮物


愛心

(Coin 10)

幫高調

(Coin 20)

咖啡

(Coin 30)

掌聲鼓勵

(Coin 40)

崇拜眼神

(Coin 50)

驚呆了

(Coin 60)

神人4ni

(Coin 70)

花束

(Coin 100)

鑽石

(Coin 300)

紅寶石

(Coin 500)

藍寶石

(Coin 1000)

黃寶石

(Coin 3000)


送出鼓勵



發表匿名文章不會出現你的大頭圖與名稱,你可暢所欲言,但文章內容務必遵守「佈告欄使用規範」!


回應

送出回應


5 則回應

雪怪

2018-10-17 18:52 #1

配色真的很重要,我之前拉個框,也調了很久的配色

 

想請教問原波,像圖片的那個連結,用在icon也適用嗎?

如果那個網站的圖檔移位了,是不是在自己網站的顯圖也會跑不出來

1

程式海獺

2018-10-18 21:48 #2

icon如果是在網路上也可以用複製圖片位址的方式,如果是下載下來的檔案的話一樣連結改成檔名就可以囉~~然後記得要加附檔名.jpg等等(圖片跟做出來的網站最好可以放在同一個資料夾比較好 但如果沒有同一個資料夾的話也沒關係 只是檔名前面還要再加上“資料夾名稱/”) 所以格式會變成“資料夾名稱/檔名.jpg” 講得有點抽象 希望你看得懂哈哈哈哈😅😅

如果是複製網路上的圖片位址 但之後那個網站的圖片拿掉的話 那在自己的網站也會沒辦法顯示哦😊

0

匿名

2018-10-19 11:49 #3

鼓勵了作者

0

匿名

2018-10-19 12:00 #4

鼓勵了作者

0

匿名

2018-10-19 16:08 #5

鼓勵了作者

0

想回應這篇文章嗎?也想發表文章嗎?
馬上登入來發表文章、追蹤作者、收藏文章或回應文章吧!

註冊 登入