調整筆電對比度

HTML img介紹

有點陣圖 和 向量圖

點陣圖 由畫素構成。
向量圖由點線面做出來的圖案。

檔案類型有:
jpg
png
gif
svg 屬於向量圖

html表單製作

若是要達到如下的結果

可以打出如下的程式

padding後面四個數字、三個數字、二個數字

padding後面四個數字、三個數字、二個數字的意義

padding後面四個數字，例如padding:1px,2px,3px,4px 則依序表示為上、右、下、左的間距

padding後面三個數字，例如padding:1px,2px,3px, 則依序表示為上、右、下的間距，因為沒有打出左間距所以其實是跟右間距一樣的值也就是2px



padding後面二個數字，例如padding:1px,2px,, 則依序表示為上、右的間距，因為沒有打出下和左間距所以其實下間距會和對應的上間距一樣，而左間距沒有打也會跟對應的右間距一樣的值。

文字效果

在這邊要介紹所謂的區塊元素比如div和行內元素比如span的差別，程式碼如下圖:

呈現的結果如下:

我們看得出來，每一個區塊元素div都是各成一列，而行內元素span不一樣，span是排成水平一列，不同的span都排在同一列上，和區塊元素不同。

另外若是加上css效果，則寬高不會影響span，會對div產生效果。

HTML是由上往下依序顯示在網頁上以及Javascript之docutment語法介紹

打份HTML的程式如下:

則由於HTML是由上往下依序顯示在網頁上，所以呈現出來的結果會是如下。
由上圖可知在head標籤內的是顯示文字二字，由上而下第二個出現的是在body內的h1標籤內文，再來是script標籤中的文字。所以顯示如下的結果:

Javascript之docutment語法介紹:
docutment.write("");
雙引號內可以是個字串也可以有元素，例如上上圖中head標籤內是字串"文字"，而body標籤內的是為<h2>第三段<h3>，是個元素。

使用chrome執行Javascript程式的方法

在chrome瀏覽器最上方處是可以執行Javascript的，可以在下圖紅色方框處打入程式。

例如打入下方的程式:

 則會顯示剛有的效果出來，如下圖。

mvc架構

在項目中，我們經常使用著名的Model-View-Controller(MVC)架構。MVC架構是隨著smalltalk language語言的發展提出的，它是一個著名的用戶介面設計架構


1MODEL 則是 JAVA 寫的 CLASS






2JSP 就當作 VIEW 視覺部分
JavaServer Pages(JSP)

3SERVLET 是 後面的CONTROLLER










集成開發環境（IDE：Integrated Development Enviroment）


轉載自:https://read01.com/7024DR.html#.WjsJg9-WbIU

建立網站步驟

1.安裝一些基本軟體:
如果是要專業一點，像是一般專家會用到蠻多種軟體的,很多所以先不贅述。
而基本來說:
要文字編輯器就可以，至少要先安裝好二個瀏覽器
再來
2.確定好網站的樣式
這意思是先規劃，先確定要的主題，可以用一段話來形容比如要茶的主題，那可以寫下項是要茶的品茗心得及介紹之類。
再來設計，先拿出紙筆在紙上設計出想要網站的內容。
再來確定想要的風格，像是顏色、文字字型(可去google font找)、圖片(可去google 圖片找)
以及在建立一個index.html，最後將上述這些資料夾及檔案都放到test資料夾內。3.準備好需要的檔案:
先建立一個資料夾再來是在它底下再建立一個資料夾命名為test或其他你喜歡的名稱，在命名的時候要注意英文小寫避免空格出現，也可使用底線或是中間一橫線。
接下來再建立三個資料夾，名稱依序如下:
4.html檔案建立好後存在index.html
6.css檔案做好後放在styles資料夾
5.javascript檔案做好後放在scripts資料夾
7發佈網站

方法大概有這幾種，見下圖

p.s.部分知識來源取自Mozilla



p.s.補充一些相關的知識:
電腦連接到網站的稱為客戶和伺服器端
彼此request  response

Clients:網路使用者的網路連結設備及網路連絡軟體通常是一個瀏覽器
(比如Wi-Fi
手機網路)


當client要一個網頁:
複製的網頁被下載到client的machine

建構網站的三個要素

先建立一個資料夾，在裡面再見立一個資料夾，命名時要記得小寫避免空格，可以中間一橫或是底線，先建立一個index.html再來是其他三個資料夾，images、styles、scripts

Publishing your website:

1

取得主機(hosting)和網域名稱(domain name)

2

使用線上工具，像是 GitHub 或 Google App Engine

3

Using a web-based IDE such as Thimble

• 網路主機
• 網站的網址
• 網站/網頁資料

• 主機 — 跟主機租借商(hosting company)的網頁伺服器(web server)租一個放置檔案的空間。你把你建置的網頁檔案放到這個空間中，然後想要連結到網頁的人就能透過網頁伺服器連結到你的網站。

網域名稱註冊商(domain registrar)租借網域名稱。

只要搜尋"web hosting"和"domain names"

使用開發人員工具除錯，看程式哪裡有錯

可以開啟瀏覽器chrome
按下F12
選擇console
會有顯示錯誤內容 可以知道錯在哪裡!

比如如下的程式有錯誤，於是乎照上述步驟後會顯示如右的圖。
會顯示程式哪裡錯誤

在網頁中加進javascript 以便呈現文字

讓網頁上呈現出文字:
 

首先用這樣的語法，在head標籤內打下document.write("想要的文字");

於是乎會有如下的效果:

一共有三種方法:2.連結外部JavaScript程式檔

首先，這個方法是可以先建立一個JavaScripy檔案，如下面範例是先建立一個檔案，內文是一個函式跳出message box。

再來，先在head標籤內打上<script></script>，在<script>打上<script src="檔案名稱.js">，如下這樣就可以連結外部JavaScript了。

這個時候把網頁叫出來，會顯示如下的畫面，成功了!

一共有三種方法:1.以script元素將JavaScript加入於網頁中:讓javascript不執行的方法

雖然幾乎Javascript是大多 網頁都必備了，但有時候為了安全性需要關閉瀏覽器的Javascript功能，如何關閉呢?

若想要在關閉這功能時顯示一段提醒的文字,比如:

本網頁需要使用JavaScript，請開啟瀏覽器的功能。

那麼請在程式中head標籤內打入:

<noscript>本網頁需要使用JavaScript，請開啟瀏覽器的功能</noscript>

也可以在body標籤內打入也可。

程式如下圖所示:

要關閉功能的話，若瀏覽器是chrome，那請到瀏覽器的右上角設定內選擇JavaScript設定

，在按照如下的流程走。

如此便完成關閉了，這個時候重新整理網頁的時候會出現如下的畫面:

在網頁中加進javascript 有三種方法之一共有三種方法:1.以script元素將JavaScript加入於網頁中

一共有三種方法:1.以script元素將JavaScript加入於網頁中2.以事件屬性將JavaScript加入於元素標籤中3.連結外部JavaScript程式檔

先介紹第一種方法:

1.以script元素將JavaScript加入於網頁中:

首先，請在head標籤內打上如下圖中的標籤:<script> 

  alert("Hello!!!");

</script>

 這個規則alert("Hello");的說明:
alert是一種函式，它會跳出頁面，而頁面會顯示括號內的字。
括號內可以雙引號或是單引號，而這邊要注意的是，在JavaScript中大小寫是不同的意思，所以alert不可寫成ALERT。
結果會顯示如下的畫面:

bootstrap 如何做出響應式圖片

比如想要作出如下的效果:

上一次有關bootstrap的文章已經提過也介紹過容器(container)，在bootstrap的使用中一開始就要先打出容器，而關於做出響應式圖片也不例外，所以下述的程式碼中開頭也是container

也就是不論視窗怎樣拉寬或拉窄都會呈現四個圖片並列的話，可以打下如下的程式碼:

提醒:若是要響應式圖片的話，記得在img內的class打入 img-fluid，如上圖的第二十五行。

JAVA物件導向的筆記

    類別的意思就比如學生、老師，是一種身分，而類別的屬性是指特徵，像是學生類別，他的屬性就可以是學號或是姓名，而方法就是一種行為。

定義物件類別,規則如下:
class 類別名稱{
屬性
行為
}


比如程式如下:
class IcCard {  // 代表 IC 卡的類別
  long id;      // 卡號
  int money;    // 卡片餘額

  void showInfo() {  // 顯示卡片資訊的方法
    System.out.print("卡片卡號 "+ id);
    System.out.println(", 餘額 " + money + " 元 ");
  }
}

public class CardArray {
  public static void main(String[] argv) {
    IcCard[] manyCards = new IcCard[3];     // 建立物件陣列

    for(int i=0;i<manyCards.length;i++) {
      manyCards[i] = new IcCard();       // 建立物件
      manyCards[i].id = 0x336789AB + i;
      manyCards[i].money = 100 + i * 123;
    }

    for(IcCard c : manyCards)  // 也可以用 For-each 迴圈
      c.showInfo();      // 呼叫方法
  }
}

介紹CSS的選擇器總共有這幾種，今天介紹其中之一組合選擇器:

CSS的選擇器有:

1.元素選擇器
2.類別選擇棄
3.識別碼選擇器
4.組合選擇器
5.虛擬類別

而今天要介紹的是組合選擇器。
組合選擇器意思是透過前面三種選擇器的組合來指定後代或者是相鄰的元素。

它的語法有四種:
1.A B
2.A>B
3.A~B
4.A+B


以下是原始程式檔案:




尚未使用任何CSS時的畫面如下:

接下來會以組合選擇器來介紹這四種各別是什麼。

A B

這個意思是樣式規則作用在A的所有後代

結果如下

A>B

這個意思是樣式規則作用在A的第一個後代

舉例如下:

li的第一個後代會有這樣的樣式

 結果如下:

A~B

A的同層所有元素

結果如下

A+B

 這個語法的意思是樣式規則作用在A的相鄰的同層元素，指的是在A以後的。

程式如下

結果如下

框線的應用之一:用來強調文字

首先若是要目標要做成如下的效果:

也就是標題部分是有上下框線來做強調。

而第一行內文中的茶藝社三個字要用底線來強調，這些效果可以用框線來達到，以下跟大家說明。

首先如下圖，先將內文打完後，在head標籤內打上CSS:

用style標籤內打

h1{border-top:solid green thick}

再來由於茶藝社三個字要有下框線，所以在那局部用span將這三個字框起來，再去head標籤內用CSS，如下圖，這樣大功告成了。

做表格(有框線者，無用到css)

首先要做表格的時候，假使要做如下的表格

步驟1先打table如下。

步驟2  因為表格是有框線的，所以在後面打上屬性border="1"，沒有打是沒框線。

步驟3 打上表格的標題，可以用caption，如下圖。

步驟4     打上thead tbody tfoot。

 步驟5 看表格總共有幾列，打幾個tr。
                          

步驟6 要顯示粗體的打上th  因為第一列的三欄都是粗體，所以打三個th。

                        

 步驟7 再將內文打進去。