資工一 111010506 林維新
序:
本筆記為110學期下網頁設計的課程筆記，記錄著課程所學部分內容，筆記內容包含HTML及CSS語法之使用方式。及如何引用Google forms及設定。將會以我個人網也使用之語法去介紹，本筆記分為三部分，第一章為<HTML>第二章<CSS>第三章<Google forms>，筆記順序將依照W3S進行介紹。
第一章 HTML
1-1 開始撰寫HTML
開始撰寫HTML時，需要再VSCode建立一附檔名為.html之檔案，如:Myweb.html或test.html。將檔案建立好之後就需要開始撰寫HTML，一開始宣稱語法為開頭 <!DOCTYPE html> ，HTML 文檔本身以 . 開頭<html>和結尾</html>，HTML 文檔的可見部分在<body>和之間</body>。
----------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<body>
<h1>需要注意!結尾處需要加上[ / ] 如:</body> </h1>
</body>
</html>
================================================================
1-2 HTML標題及段落
文法<p>&<h1>~<h6>，<p>為一段落允許用戶換行但空白將會被一些瀏覽器跳過不顯示。<h>為標題有後墜1~6，字體由大到小一序排列，當然如有需要更大或更小的標題可以用CSS中的style="font-size:60px;去進行設定大小。
----------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<body>
<h1>我是標題標籤 </h1>
<p>
我是段落標籤
允許自由換行
但 中間如有空白將會被網頁無視
</p>
</body>
</html>
================================================================
1-3 鏈接
HTML 鏈接是超鏈接，您可以單擊一個鏈接並跳轉到另一個文檔，當您將鼠標移到鏈接上時，鼠標箭頭會變成一隻小手。HTML<a>標籤定義了一個超鏈接內加入href=”#”。
----------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<body>
<a href=”#”>#為網址放置處</a>
</body>
</html>
----------------------------------------------------------------------------------------------------------------
也可以加入target屬性進入設定。
================================================================
1-4 圖像
使用<img src=”#”>標籤用於在網頁中嵌入圖像。src屬性指定圖像的路徑 (URL)。
alt如果用戶由於某種原因無法查看圖像（由於連接速度慢、src 屬性中的錯誤或用戶使用屏幕閱讀器），則required屬性提供圖像的替代文本。
----------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<body>
<img src="我是張帥照.jpg" alt="我不帥">
</body>
</html>
----------------------------------------------------------------------------------------------------------------
也可以使用CSS中的style="width:500px;height:600px;";去進行設定大小。
================================================================
1-5 HTML的<head>屬性
----------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
這裡可以多種隱藏屬性
</head>
<body>
</body>
</html>
================================================================1-6 HTML的icon設置
可以用<link>標籤去設定icon，語法大概如下<link rel="icon" type="image/x-icon" href="你想要使用的圖片位置">
----------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/x-icon" href="你想要使用的圖片位置">
</head>
<body>
</body>
</html>
================================================================
1-7 區塊<div>
使用<div>進行網頁的設計布局，可以想像成一塊塊積木進行拼貼。內部可以使用如<img><h1~h2><p><div>...等各類屬性。也可以使用CSS中的style="width:500px;height:600px;";去進行設定大小或是顏色之類的。
================================================================
1-8 class使用
這將會與css使用相同，也可以獨立成單一css資料夾去做連結使用。
================================================================
以上是我在HTML中所使用的語法做簡單的介紹。
第二章 CSS
2-1 開始撰寫CSS
開始撰寫HTML時，需要再VSCode建立一附檔名為.css之檔案，如:Myweb.css或test.css。
================================================================
2-2 如何在HTML中引用CSS檔
<link rel=”stylesheet” type=”text/css” href=”想要引用的檔案位置”>
================================================================
2-3 CSS指定元素
在CSS中寫入 指定元素名子後加上{}後可更改顯示或是位置，語法大致如下
p { background-color:(0,0,0); }這樣引入這個css檔的html中所有 p的標籤都會套用此顏色。
或是使用class的方式定義，其語法如下 用[ . ]+[ 自訂class的名稱 ]+{ }
範例:
css
.test {
background-color:(0,0,0);
}
html
<div class="test”> 文字 </div>
================================================================
2-4 關於css的註釋:
/* 裡面會被註釋喔 */
================================================================
2-5 關於顏色
background-color去制定背景顏色
color制定內文字顏色
opacity制定透明度
各背景顏色間如果調整到透明度將有可能會混色，比如背景是黑色不透明上方優一區塊是白色但透明度是0.5其最後顯示為灰色，請注意使用透明度以免混色。
================================================================
2-6 關於背景
使用background-image: url(" 檔案名 ");語法去制定背景圖片，要注意如沒設定顯示大小可能在排版上，會出現圖片跑偏的情況。如何解決情況可以設定圖片高度或是設定顯示%數。且如果大量引用為壓縮之圖片會導致網頁加載過慢，請對放置網頁內圖片進行壓縮。
================================================================
2-7 引用google字體
需要再<head>中加入一段文字敘述，<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">(此段取自w3s)，就可以引用google字體。
也可以使用系統內置字體。
================================================================
2-8 字體位置
調整字體在div或其他區塊內的位置時，可以使用text-align去設定，
有幾種設定方式centre將字置中right置右left置左，需要注意宣告時在哪一層，可能與其他內部或外部class宣告起衝突導致不正常顯示。
================================================================
2-9 float & margin
margin屬性為給定元素設置所有四個（上下左右）方向的外邊距屬性，margin-top，margin-right，margin-bottom，和 margin-left 四個外邊距屬性設置的簡寫。
我常用的設定:
margin: 0; 可以將div之間的空格或稱間隙消除。
margin: 0px auto; 交給網頁去自動排版消除左右間隙。
這個設定非常實用可以是網頁整體排版是滿的，不錯。
float屬性可以將<div>區塊強制移動至上下左右任意區塊，適合與width&height用來堆疊區塊作排版，但請注意，如長寬設定為px或是絕對單位em可能會導致在縮放視窗時，排版嚴重錯誤影響觀看。
================================================================
2-10 font-size
這是一個可以變字體大小的一項宣告，在我網頁中我是以
font-size: xxx%去做宣告，但建議是以絕對值的方式去宣告(em & ex)
這視情況去調整使用方式，但還是小心使用後墜單位以免再變更視窗大小時有排版跑掉的問題。
================================================================
2-11 自動適應排版方式之一
將@media only screen and (最大或最小寬度)寫在在css中，寫法為如下
---------------------------------------------------------------------------------------------------------------------------
body {
background-color: red;
}
.test {
height: 100px:
width: 100%
}
@media only screen and (max-width: 920px){
.test{
height: 100px;
width: 30%;
}
}
/* 這段用意是在說 寬度在920px以下時，會套用內部的.test 將會讓有使用.test這個class的元件設定寬度在30%上，如果視窗大於920px會使用width為100%的設定值，兩者互不衝突 */
================================================================
2-12 固定相對或絕對位置
如何固定位置我們可以使用position這個宣告，可以像是margin一樣固定區塊置某處，但她可以做到像是精準置某一座標上(網頁設似乎沒有座標??)，也可以允許區塊間重疊。
position属性用于指定一个元素在文檔中的定位方式，top，right，bottom 和 left 属性
就可以更改區塊所ˇ在位置，但更強大的是
相對定位relative, absolute, fixed 或 sticky
relative 的元素。
絕對定位元素absolute 或 fixed
================================================================
第三章 引用google form
googleforms是由google提供的圖表插建，使用方式很簡單只需在head上宣告插建，及在body引用即可，設定圖表值可以在head的jsq語法中設定，下面舉例:
---------------------------------------------------------------------------------------------------------------------------
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", { packages: ["corechart"] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['HTML', 45.2],
['CSS', 32.1],
['Python', 5.9],
['JavaScript', 2.8],
['C#',30]
]);
var options = {
title: '',
pieHole: 0.4,
backgroundColor: {
fill: 'rgb(136, 136, 136)',
//fillOpacity: 0.8
},
};
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
chart.draw(data, options);
}
</script>
上方為在head中引用googleform插建，紅色標示內容為在網頁中圖表所顯示之內容，可以按照上方格式去做更改。
<div id="donutchart" style="width: 500px; height: 350px;"></div>
這段是將宣告的插建引入div 設定大小為500*350px
將上方兩段分別放入head及body即可看到顯示結果。
注意:如需要更改圖表底色請參考亮綠色之部分。
關於我個人網所用到之元件或插建以介紹完畢。
111010506 資工一 林維新