fbpx

HTML, CSS, JAVASCRIPT 筆記

HTML、CSS、JAVASCRIPT 是網站的編程語言,對 Digital Marketing 和從業網站建設來說,這些基礎知識總會有用武之地,所以我報讀了 University of London 和 Coursera (網上課程平台) 合作的 網上課程,以下是我個人的學習筆記,希望可以有助大家掌控這些編程語言:

01 引言:

HTML 是結構,CSS 是外觀,JAVASCRIPT 是互動。有不少編寫這些語言的免費軟件包括:

TextWrangler (OSX)、Notepad++ (PC)、Sublime Text (OSX, Windows, Linux),

而我使用的是:Atom (OSX, Windows, Linux) 。

02 簡單介紹 HTML

HTML 用 tag 的方式告訴瀏覽器該如何呈現這些內容。HT 指 Hyber-text (鏈接),ML 指 Markup Language (標記)。

我在 Atom 做一個簡單的示範:

html1

<?> 是指令開始,? 是指令的內容,以上圖為例:h1 是指接著的內容 This is my first web page 由標題1字體顯示。最後用 /h1 結束指令。

[註:index.html 一般是指首頁。]

在瀏覽器的顯示:

html2

其他有 p (段落字型), h2, h3…一般文書的顯示可以參考 online html editor:

html3

左邊是 word 的編輯,右面顯示 HTML 的編程。

另一個常用的是 a href=“example.html”,這個指令是新增連結。a 是指 anchor 中文是錨 ,h 是 hyber-text reference。我們稱 a 為 tag,href 為 attribute。這個指令用來把不同網站頁面連結在一起,構成一個網站。以下是例子:

[註:在 Google Chrome 按滑鼠右鍵「檢查」,便能看到網站 source code。]

03 其他常用指令 (加入圖片)

img 指圖片,src 指來源,後面是網址,如果有自己的 hosting (寄存) 可以打

html5

src=“example.png”。

還有 ol 是指 ordered list (以數字排列),li 指 list items,一般用法如下:

html6

顯示:

html7

常用的指令還有:

  • &nbsp 指 non breaking space 即 “不隔行”
  • hr 水平分隔線
  • br 隔行
  • !  留意見 (網站不顯示,只供編程人員看)等等。
  • ul 和上述 ol 用法相同,指 unordered list 即以點列式排列。

更多指令可參考:w3schools.com 有更多的指令、教學和練習。(包括:CSS、JAVASCRIPT)

04 HTML 的結構…

最後關於 HTML 檔案的結構分為:

是用來紀錄檔案的資料 metadata,metadata 是 html 檔案供瀏覽器看的資料,如:標顯,則是網站內容如:文字、圖片。一般的結構如下:

html8

html 檔案例子

05 CSS 簡單應用

之前亦提到過 CSS (Cascading Style Sheet)負責外觀顯示,HTML 負責內容。當編寫 HTML 可以額外建立一個 css 檔案,協助調整網頁外觀。例如:在背景加上綠色。檔案名:2_css_example.css,body 是指網頁在頁腳和頁首之間的位置,body 亦是 HTML 標籤,除了 body 外你還可以更改其他標籤的外觀,例如:button, h1,做法相同,把 body 更改即可。

建立 css 檔案後,你需要在 HTML 鏈結 css 檔,告訴電腦 (在 head 內編寫):這個 HTML 網頁的外觀會用 2_css_example.css 的內容。rel 是指 relationship。

這個做法可以令多個網頁擁有相同外觀,當然你亦可以在單獨 HTML 檔案加上 css 的編寫。最後顯示:

06 CSS – Font

和上述一樣更改字型,首先是編寫文字的標籤如:h1 大標顯,  p 段落, 字型 font family,以下是例子:

結果:

07 CSS – 連結文字 – hover

Hover 是指滑鼠指向文字,文字會改變。如果需要更改:color (顏色)、text-decoration (底線),如果想更改連結文字的顏色和底線,只要把 a:hover 改為 a 即可。

網頁的佈局是透過 padding, margin, border, content 組成,簡單來說就是利用這4項東西設置網頁的內容位置。而這些在一般 cms 網頁如 wordpress 調整圖片或其他元素位置時亦會常用。

首先,在 css 編寫佈置,例如:margin left 10px 即 margin 左面大小為 10px,試想想,如果 margin 左則闊度只是 1px,當 margin 變大,內容便會向右。

以下的 “.” 後面可以隨意起名字,該名字是為了方便在 HTML 時 call 出來用。

結果:

如果只是想 .space 作用於部分內容,利用 span (意思是把 style 放進去); class (選擇自訂標籤)。

08 CSS – Responsive – media queries

相信大家都聽過 Responsive,中文是響應式,意思是網頁會根據不同大小的螢幕 (如手機、桌上電腦),內容因此改變。例如:在桌上電腦,產品圖片是4個1行,在手機上看卻會轉為2個1行,以方便手機用戶更清楚看到圖片。

而在 CSS 上應用 Responsive 稱為:media queries (@media)。例如:設定如果屏幕闊度大於 1000 px,背景轉為黑色:

亦可以利用 “.” 和 “class” 把指定的內容佈置成 responsive。示範:div 是指分區塊內容,可以方便一些佈局如:css,現在先建立兩個區塊內容 (為免麻煩,class 先指向預設標籤的名稱 responsive,雖然還未建立),顯示為:

column1

column2

建立預設標籤 resposnive,設置如果幕闊度大於 1000 px,把 column1、column2 排成水平、闊度為:100 px、黑色外框:

09 CSS – Bootstrap

Bootsrtap 可以算是目前最受歡迎的CSS framework之一,能夠用來套用目前主流的設計概念  responsive。

Bootsrtap 提供了 css 及 javascript 檔,內裡已經有了基本的設計,例如:表格等,你只需要 call Bootsrtap css 關於表格的標籤即可,不用自己慢慢編寫,如果不喜歡它預設的外觀,可以再開一個 css 檔編寫需要部分。

下載:Bootstrap https://getbootstrap.com

教學:https://www.minwt.com/webdesign-dev/html/9966.html

如果有興趣可以試試喔!

html、css  檔案例子

10 JAVASCRIPT 簡單應用

除了簡單的網頁內容外,還需要和瀏覽者 ”互動”,例如:瀏覽者點擊 ”show video” 按鈕,網頁會彈出影片 (pop up video),而編寫互動的語言則是 JavaScript。

做一個例子,當點擊文字會出現提示如下圖:

javascript1

Coding 如下:

javascript2

h1 是 tag (HTML),onclick 是 attribute 指當 element 被點擊 value 會發生。  Alert (…) 是 value,屬於 JavaScript。

javascript3

JavaScript 和 HTML 寫法不同,alert 是 function (指令:跳出提示框),’hello’ 是 argument (有什麼變化),’ 單引號是告訴電腦 hello 是文字顯示,(…) 括號是指 argument 的開始和結束。

11 JAVASCRIPT – console

console 中文是控制臺,類似 alert,主要是開發者用來調試 javascript 用,可以看到頁面中輸出的內容。最簡單是 console.log,log 是指日志的意思。是一種 debug 的方法。

javascript4

在 Google Chrome 上方,檢視 > 開發人員選項 > javascript 控制台 > 右方出現 console 方框 > 編寫 console.log(“hi”); 便會看到 hi ,hi 的左方記錄了瀏覽時點擊了 “hi” 的次數。

javascript5

Console 是瀏覽器視窗一部分,在 javascript 稱為 object,而在編碼中的 “.” 是指連按 object 和 function。 

javascript6

12 JAVASCRIPT – manipulating html elements

接下來提及的是改變網頁的內容的 javascript:例如當點擊時 “hello” 會改為 “goodbye”:

javascript7

首先,要先解釋第一行 script scr 的編碼是什麼… 那就必須先介紹 jquery,jquery 其實是類似資料庫 (library),平時 javascript 編寫一些互動時需要大量的編碼,因此出現了 jquery,預先把一些互動的 function 編寫好,當需要某些互動指令時不需要重新編寫,簡化 javascript 的編寫。

jquery 網站及下載:https://jquery.com

w3schools 教程:http://www.w3schools.com/jquery/

回到正題,第一句的意思即是連結網址 jquery 的資料庫,那樣就能利用簡單縮寫, 不用繁復的編寫。

jquery 基礎語化為:$(selector).action(…),$ 符號是指 jquery,# 符號是css 選擇某 id 的內容。.html 是指在 html 運行一個 function,在 html 內所有 id 為 title 都會改變。

13 JAVASCRIPT – script tag

和 head 和 body 一樣,javascript 亦有 tag,如下:

javascript8

Function 後的 sayHello 是名稱,編寫 onclick 時可透過 sayHello() 找到 function。無論有無 argument 亦需要括號。

14 JAVASCRIPT – Anonymous function

之前做過當在網頁點擊 hello 會變成 goodbye,而現在我想每次點擊都會有改變。

javascript9

稱為 anonymous function 因為在這裡 function 是沒有名稱,.click 是新的 function 用來改變 onclick 的 function。在 javascript fucntion 可以成為變數、argument 用於其他 function。

.click 後 {body} 定義 onclick,第一句是當點擊改變為 Goodbye 後,再點擊出現 Hello,.off 意思是指完結 .click 這個 function,即是重頭開始。最後 console 這句是用來給編程人員檢查看的。

15 JAVASCRIPT – Image gallery

現在要做的是把 image 加上互動,例如:當點擊圖片時會改變為另一張圖片:

javascript10

.attr 是指設置圖片的 attribute。(例如:href 是 a 的 attribute,在這裡 attribute 是 src) .this 是指event,在這裡即是我們點擊的圖片。整體 function 意思即是,當點擊 crop-image 的圖片,bigimage 圖片的 attribute (src) 會變為被點擊的圖片的 attribute (src)。即是點擊 crop-image ,bigimage 變為 crop-image。

javascript11

html、css 、javascript 檔案例子

16 更多應用 Variable

Variable 中文是變數,常用於 function,例如:f(x)=y,x 則是 variable。

variable1

var 指 variable,counter 是變數的名稱,= 等於是設置變數的 value (0)。

variable2

17 運用 Variable

以下是利用 Variable 做到顯示數字 0,當點擊時會 +1 變為 1,所以數字會是點擊的次數。

variable3

在 body 可以看到 onclick 這個 event 是跟從 count(…) 這個 function。

在 script 可以看到 var counter=0 即是名叫 count 的變數等於0,

然後下一段是指,id 為 number 會被 counter 的變數所覆蓋,即最初顯示為 0。

Function count() 即是每當 event 發生一次 (點擊) ,就會重覆 function。

counter = counter+1 即是變數會加一。

18 Image Gallery 運用 Variable (If, Boolean)

之前建立了 image gallery,在 image gallery 當點擊小圖示 (thumbnail),大圖示變為該圖片。

現在運用 variable 的 javascript,建立箭嘴圖標,當點擊圖標,圖片會按排列更改,例如向右圖標:image1 > image2 > image3 >image4 >image1…循環,並且預設大圖片自動由 image1 > image 2… 改變。(走馬燈)

variable4

以下是 body:留意圖片 id 以 image1, image2… 排列。

variable5

Script 分為數個部分:

第一,var paused 是定義變數 paused = false 在 javascript,false 是指 undefined, null, false, 0,””空字串等五種。(先別管) (看到最後回來看:定義變數 paused 是 false 則是自動進行走馬燈,如果是 true 預設應該是沒有走馬燈。 )

variable6

第二,之後的編碼是指:用 jquery 把點擊 crop-img 的圖片 (thumbnail) 這個動作 (event) 以 function 再定義為:大圖片更改為點擊的 thumbnail。- 這個是之前做過的 script。

第三,是指 Variable 名稱是 counter,最初圖片為”image”+”1”即 image1。.click 是 jquery 用來取代原來的點擊的內容。

variable7

第四,這是向右箭嘴圖示的 function,當點擊圖示 image 為 image(x-1),如果原來是image1則轉為image4。向左箭嘴圖示亦是如此。(這是 if 的用途,細於1是條件 condition,從而帶出兩個不同的結果 counter=4 / counter=counter-1)

variable8

第五,用 jquery 再定義點擊大圖片時,變數 paused 將會以 paused 的相反動作 (!paused)。在這裡 paused 這個變數是圖片自動更換的動作 (走馬燈),因此點擊大圖片則會停止走馬燈或開始走馬燈。

variable9

最後,setinterval 指動作每隔一段時間會進行一次。依照 setinterval 的 function,如果 !paused,會以 jquery 再定義點擊向右圖標的動作,意思是每隔一段時間會進行一次點擊向右圖標。時間則是點擊的間隔。(這是 Boolean,如果 paused (true) 則無反應,不是 paused (false) 則進行動作。)

variable10

下載 image gallery 檔案

19 更多例子:e Reader

以下是 eReader 的檔案,可以自行看看它的編碼:

下載 e Reader 檔案

By |2020-04-18T23:28:14+08:00六月 13th, 2019|Categories: Course, Digital Marketing|Tags: , , , |0 Comments

About the Author:

Ken Chu 畢業於塔斯曼尼亞大學-工商管理。從事 Digital Marketing / Media 工作。

Leave A Comment