HTML的基礎架構

Andy 0

所有網站的基礎,都是從最基礎的程式碼開始的!

由最外層HTML包住所有的程式碼

其中包含head標頭的區塊,告訴判讀網站內容的程式說,這個區塊是「HEAD」區塊,也就是整個網站的頭,最重要的資訊都在這裡。

接在head之後,就是body,而body顧名思義,就是網站的身體,網站最主要的部份都在這裡,所以基礎的結構如下

<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

如果上述程式碼編譯出來

就是


HTML Tutorial

This is a heading

This is a paragraph.


HTML的部分,通常決定了網站的「內容」

如果我們要加內容的「樣式」「設計」或是排版,那就必須用到CSS

階層式樣式表(英語:Cascading Style Sheets,縮寫:CSS;又稱串樣式列表、級聯樣式表、串接樣式表、階層式樣式表)

而CSS必須用<style>標籤包住,CSS可以針對標籤進行選定,也可以透過元件定義class或是id,再透過CSS選定。

例如以下的例子,我們將h1的顏色改成紅色

<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial</title>

<style>
h1
{
color:#FF0000;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

上方的程式碼得到的結果如下


HTML Tutorial

This is a heading

This is a paragraph.


CSS語法的規則是在選擇器(上述的h1,意思是選擇h1這個標籤)之後,用{ }大括號包住程式碼,把選擇器選到的東西套用大括號裡面的規則。

而範例提到的,是CSS語法當中最常用的顏色color語法,透過RGB共六碼取得顏色的數值。

顏色的選用可以透過繪圖軟體調色,也可以利用選取顏色的工具,或是利用Google很酷的顏色選擇工具

只要搜尋Color Selector就可以選擇了

https://www.google.com/search?q=color+selector

以上就是HTML與CSS的基礎概念!

Andy

現職橡實網頁設計工程師,經歷了近十年的CMS開發經驗,走向減法思考的WordPress玩家,期望用最乾淨的程式,最少的外掛,解決最多的問題!