[HTML&CSS教學] Lesson 1 - HTML和CSS的基本架構

張貼者： 日期：

簡介

本篇將介紹HTML和CSS的基本架構，以及架構內的基本概念，繼一張圖就讓你知道什麼是HTML、CSS、Javascript 之後，本篇一樣用簡單的圖示來說明。在開始之前，雖然大家可以用文字檔(.txt)來進行網頁編輯，但本人比較推薦用Notepad++來編輯，這樣在編輯時會方便許多，可以到Notepad++安裝網站下載最新版本的安裝檔。


內文

在一張圖就讓你知道什麼是HTML、CSS、Javascript一文中，我提到了可以將HTML視為是一個人，其互動行為和打扮分別是由Javascript和CSS來傳授給HTML，那麼HTML的基本架構就可以想像如下圖:

enter image description here

HTML基本架構的程式碼如下: 

 <html>

     <head>
     </head>

     <body>
     </body>

 </html>

可以看到每個標籤(Tag)都是兩個兩個組成，一個代表開始，另一個代表結束(用/表示)。那麼我們就先來在網頁版面上寫點文字看看吧，程式碼如下: 

<html>

    <head>
    </head>

    <body>
    Hello World
    哈囉世界
    </body>

</html>

結果如下圖:

enter image description here

“咦?怎麼中文字變成亂碼啦?”，這是因為HTML的頭殼裡(head)空空的，它根本看不懂中文字到底是什麼意思，因此我們得在head裡頭寫些東西讓HTML看得懂中文字，除此之外，應該也可以發現到，我們程式碼是將兩句話打在不同行，但是為什麼網頁顯示是將兩句顯示在同一行呢?一樣的道理，因為HTML也根本不知道這兩句話有換行，因此我們必須將程式碼改成如下: 

<html>

    <head>
    <meta charset = "UTF-8">
    </head>

    <body>
    Hello World <br>
    哈囉世界 <br>
    こんにちは せかい　
    </body>

</html>

結果如下圖:

enter image description here

如果要讓HTML看得懂除了英文之外的語言，只要在head內打上<meta charset = "UTF-8">標籤讓它能對不同語言進行編碼，你看!除了中文之外，日語也能顯示了!另外換行的指令就是<br>，非常的簡單吧!

那麼我們就來看看CSS的基本架構以及基本例子吧!不管是CSS還是Javascript(JS)都有兩種方式”傳授”(正確講法是"引入:include")給HTML，一種是內嵌，意思是將CSS或JS的語言與HTML放置在同一個文字檔案裡頭，通常是要在CSS或JS傳授的內容不多時使用此法。另一種就是外嵌，當有大量的傳授內容時，避免語言彼此間搞混，而在各別的文字檔內寫上要傳授的內容。

那麼我們就來看看這兩種方式的例子吧!

內嵌程式碼 

<!--CSS內嵌方式-->
<style>
body{
    color:blue;
}
</style>

<html lang="zh-Hant-TW">
<head>
 <meta charset="UTF-8">

 <!--JS內嵌方式-->
 <script type="text/javascript">
 //*********************
 //***JS程式碼放置區****
 //*********************
 </script>

</head>
<body>
Hello World<br>
哈囉世界<br>
こんにちは せかい　
</body>
</html>

結果如下圖:

enter image description here

可以看到字體的顏色改為藍色了，從程式碼的意思來看，就是CSS傳授了HTML的body內的文字都變為藍色了。而CSS內嵌為了避免與HTML混在一起，自己必須也要用標籤<style></style>來區隔，JS也是一樣用<script></script>來區隔，可以想像內嵌的方式當程式語言越來越繁多時，整個版面會非常不好辨識哪個是哪個語言區塊(如果再加上PHP語言時，那就更不好辨識了)，因此外嵌的方式就可以解決這樣的問題，我們只需要每個語言都各別新增一個檔案，並且將內容寫入其中，然後再將它傳授給HTML的頭殼(head)裡即可。

另外我們也分析一下CSS的語法結構，如下:
HTML元素 or 元素ID(#ID) or 元素類別(HTML元素.類別){
屬性名  :  屬性值;
}
每個屬性名與屬性值都以":(冒號)"隔開，且最後一定要用";(分號)"代表結束，以上面的CSS碼為例，color就是屬性名，我們要將它設置的顏色，就稱為屬性值，也就是blue。可以說不僅僅是CSS會這樣對一個屬性(或變數)給予特定的值，所有的程式語言都是用類似的形式來達到此效果，只不過符號會稍做改變，例如常見的就是用"=(等號)"來隔開。那麼我們就來看看外嵌的例子吧!

外嵌程式碼

在Notepad++新增一個空白頁，並且另存為”檔名”.css檔(JS是”檔名”.js)，另存檔放置在與主頁.html同一個目錄下，檔名可自行編名。

CSS檔案內文(這次連背景色也一起改改看)
body{
    color:blue;
    background-color:black;
}

HTML檔案內文:
<html lang="zh-Hant-TW">

<head>
 <meta charset="UTF-8">
 <link rel="stylesheet" type="text/css" href="stylesheet.css">
 <script src="JS檔名.js"></script>
</head>

<body>
Hello World<br>
哈囉世界<br>
こんにちは せかい　
</body>

</html>

結果如下圖:

enter image description here

在HTML頭殼(head)裡外嵌CSS語言，是以標籤來達成，rel="stylesheet"是來表示HTML與外嵌檔案的關係(relation)，因為CSS的全名為Cascading Style Sheets，因此等號後面就是stylesheet，type=”text/css”是表示外嵌檔的類型，淺顯易懂，最後href就是指定要嵌入的檔案，外嵌JS的src也是一樣的意思(source)。

外嵌的方式不管是CSS還是JS，就不需再用特定的標籤來區隔了，直接就可以在檔案內進行撰寫，這是外嵌其中一個好處，另一個好處就是一樣的效果，HTML卻變得簡單許多，與內嵌相比就不會搞得難以區分程式區塊。



本篇所介紹到的標籤彙整表:
標籤名用途
html用來表明HTML語言區塊
headHTML通常用來引入檔案的區域
bodyHTML元素放置區域
style用來表明CSS語言區塊
link用來連結CSS檔案或額外來源
script用來表明JS語言區塊或嵌入JS檔案


參考

  1. W3C School
  2. 自己實作經驗

留言

張貼留言