【HTML】快速學習網站架設基礎

2018年10月16日 17:26
還沒看過第一篇或想複習一下的話,先送上傳送門~~~~~😇
上次簡單介紹了HTML的大架構了~~那今天就來講一些跟設計有關的部分吧!😄 如果一個網站的畫面全部都是白底黑字,想必看起來很無聊吧! 那首先,我們先學學怎麼換背景顏色吧~~ 👉背景顏色 因為背景顏色是影響整個網站的範圍,所以我們就直接在<body>後面加上bgcolor=”xxx”,如果你想要的顏色比較單純,直接打顏色的名字就可以了!
像我用淺藍色就是lightblue;紅色是red,綠色是green......簡單的英文就不廢話了哈哈哈,但如果你想精確一點表達顏色的話,也可以用#xxxxxx的方式來表達喔! 網站重新整理之後長這個樣子
這邊也附給大家色碼表可以參考參考😊!
👉字體顏色 會設定背景顏色,那接下來就是要設定字體顏色啦~~~ 假如我想要更改h1的字體顏色,那就在<h1>後面增加style=color:”blue”
當然!如果你想要用#xxxxxx或者是rgb(xxx, xxx, xxx)來設定顏色也可以喔~~~
呈現出來就長這樣! 👉水平線 那顏色介紹一個段落了,我想要加一條平行線在中間,那就在想加入的地方打上<hr>,那<hr>一樣是沒有範圍的概念,也就不用加上結尾標籤囉!
(嗚嗚嗚忘記截到只有預設平行線的網頁圖惹… 如果你想要改變線的長度,那就可以在標籤裡面加上width=xx%代表平行線縮短成原來的幾趴,加入color=”xxx”也可以換顏色喔!
上面就是預設的平行線,下面是有調整過的平行線! 👉對齊 那如果我想置左置中置右要怎麼做呢🤔? 那就在標籤裡面加上align=”xxx”就可以囉! 置左是left;置中是center;置右是right
看出來三個的差別了吧😄 👉超連結 那再來教大家怎麼插入超連結吧! 如果我想要在This is normal text這些字上加上超連結,點進去可以連到google首頁,那就需要用<a>這個標籤了,<a>代表超連結的標籤,可以連到外部的網站,也可以連到自己的網站的某一個部分,但因為後面這個的小複雜就先不討論哈哈哈😅 完整打出來長這樣:
在<a>後面加上href=”目的”,目的不一定要是網址,也可以是想要連結過去的檔案,或者像我剛剛說連到同一個網站的某一個部分,也都是用這個屬性做連結,那This is normal text這一段文字就是你想要超連結連接的文字內容
有沒有成功產生超連結啊!! 再跟大家說個小技巧,如果你想要這個連結是用新視窗開啟,可以在href後面加上target=”_blank”,不然原本預設的會是原本的網頁直接跳轉到那個連結喔 (這個部份我也忘記截到圖了嗚嗚嗚...不過下面還是有打!
連結點開會像這樣!用新索引標籤打開連結 👉圖片 最後要教大家插入圖片~~~ 圖片的標籤就叫<img> 在屬性的地方加上src=”xxx”也就是圖片的來源或者說是圖片位置,假如我想要在最後面插入google的logo,那就在剛剛開啟的網頁的中間大大的google按右鍵,接著"複製圖片位址"
然後在剛剛的src後面貼上變成
這樣就完成啦! 圖片就會出現在最下面囉!
------------------------------------------------------- 那最後的最後要來跟大家分享一下HTML的優點,讓大家更了解你在學習的東西😀! 👉HTML優點 1.容易學習:HTML的文檔製作非常簡單易懂,除了功能強大之外還能支持不同格式的文件鑲入哦 2.製作門檻低:就像上一篇提到的,只要你學會HTML,也可以直接在記事本製作以及編輯呢哈哈哈(雖然應該沒人會這樣做啦… 3.有利於搜索引擎優化SEO:Google爬蟲會優先收錄靜態網頁,HTML就是屬於這種靜態的網站,所以HTML對於Google來說就像是鯊魚聞到血腥味一樣,有利於吸引到Google爬蟲 4.加快瀏覽速度:因為靜態網頁不需要連接到數據庫,因此會比打開動態網頁的速度還要快,對於消費者體驗來說也有所幫助喔 5.網站更安全:因為HTML的頁面不會受到Asp(動態伺服器網頁)相關漏洞所影響,也會相對更安全呢 6.減輕伺服器負擔:HTML不需要調動系統數據庫,自然就能減輕伺服器負擔啦 在最後面也附上原文文章給大家參考哈哈哈 【HTML的這些優點你都知道了嗎?】 👉
24
.回應 7
文章資訊
共 7 則回應
B1 哈哈哈哈哈怎麼覺得好心酸😭😭
今天怪怪的 我記得上一篇滿多人的
推 真的用心 但印象中style之前查到的格式都是style="color:red"不知道有沒有差🤔
台南應用科技大學
推用心 如果有粉絲頁一定追蹤
B4 我也是第一次看到 好新奇