HTML - Speaker Deck

Slide 1

Slide 1 text

HTML

Slide 2

Slide 2 text

HTML 是沙毀

Slide 3

Slide 3 text

HTML 是沙毀 !3 ■ HyperText Markup Language  超⽂文字標記語⾔言 HTML／

Slide 4

Slide 4 text

HTML 是沙毀 !4 ■ HyperText Markup Language  超⽂文字標記語⾔言 HTML／

Slide 5

Slide 5 text

HTML 是沙毀 !5 ■ HyperText Markup Language  超⽂文字標記語⾔言 HTML／

Slide 6

Slide 6 text

HTML 是沙毀 !6 ■ HyperText Markup Language  超⽂文字標記語⾔言 ■ 純⽂文字檔 (.htm/.html) HTML／

Slide 7

Slide 7 text

HTML 是沙毀 !7 ■ HyperText Markup Language  超⽂文字標記語⾔言 ■ 純⽂文字檔 (.htm/.html) ■ 不是程式語⾔言，只是標記語⾔言 HTML／

Slide 8

Slide 8 text

HTML 是沙毀 !8 ■ HyperText Markup Language  超⽂文字標記語⾔言 ■ 純⽂文字檔 (.htm/.html) ■ 不是程式語⾔言，只是標記語⾔言 HTML／

Slide 9

Slide 9 text

HTML 是沙毀 !9 ■ HyperText Markup Language  超⽂文字標記語⾔言 ■ 純⽂文字檔 (.htm/.html) ■ 不是程式語⾔言，只是標記語⾔言 HTML／

Slide 10

Slide 10 text

!10 網頁技術 HTML JavaScript CSS HTML／架構樣式⾏行為網⾴頁的內容網⾴頁的外觀網⾴頁和使⽤用者的互動

Slide 11

Slide 11 text

!11 網頁技術 HTML JavaScript CSS HTML／架構樣式⾏行為網⾴頁的內容網⾴頁的外觀網⾴頁和使⽤用者的互動

Slide 12

Slide 12 text

Hands On

Slide 13

Slide 13 text

!13 準備工具 ■ Browser 瀏覽器 ■ Google Chrome ■ FireFox ■ Text Editor 純⽂文字編輯器 ■ Sublime Text ■ Vim ■ Notepad++

Slide 14

Slide 14 text

Why not Dreamweaver? or FrontPage, Namo WebEditor, etc…

Slide 15

Slide 15 text

手寫比較快＆乾淨

Slide 16

Slide 16 text

手寫比較快＆乾淨沒有新技術時差

Slide 17

Slide 17 text

手寫比較快＆乾淨沒有新技術時差不被工具限制

Slide 18

Slide 18 text

Setup

Slide 19

Slide 19 text

!19 基本架構 Hi ...

Slide 20

Slide 20 text

!20 基本架構 Hi ...

Slide 21

Slide 21 text

!21 基本架構 Hi ...

Slide 22

Slide 22 text

!22 基本架構 Hi ...

Slide 23

Slide 23 text

!23 基本架構 Hi ...

Slide 24

Slide 24 text

!24 基本架構 Hi ...

Slide 25

Slide 25 text

!25 基本架構 Hi ...

Slide 26

Slide 26 text

!26 基本架構 Hi ...

Slide 27

Slide 27 text

!27 基本架構 Hi ...

Slide 28

Slide 28 text

基本標籤

Slide 29

Slide 29 text

基本標籤主標題

(heading)

Slide 30

Slide 30 text

基本標籤標題ㄧ

標題二標題三標題四標題五標題六

Slide 31

Slide 31 text

段落段落，段落段落段落段落，段落段落段落段落段落段落，段落段落段落段落，段落段落段落段落，段落段落段落段落段落段落，段落段落，段落段落，段落段落，段落段落，段落段落段落段落，段落段落。 ! 段落段落，段落段落段落段落，段落段落段落段落段落段落，段落段落段落段落，段落段落段落段落，段落段落段落段落段落段落。基本標籤

(paragraph)

Slide 32

Slide 32 text

!32 Hands On 如何⽤用利瑪竇造句？

我昨天才剛把綠⾖豆種下去，今天⽴立⾺馬  ⾖豆⼦子就⻑⾧長出來了呢！

此監聽內容有利⾺馬⾾鬥⾛走⺩王⾦金平。

Slide 33

Slide 33 text

文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字  文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 ! 基本標籤
(break)

Slide 34

Slide 34 text

重要基本標籤

Slide 35

Slide 35 text

基本標籤

Slide 36

Slide 36 text

刪除線基本標籤

Slide 37

Slide 37 text

‧項目一 ‧項目二 ‧項目三 ‧項目四 ‧項目五基本標籤

Slide 38

Slide 38 text

1. 項目一 2. 項目二 3. 項目三 4. 項目四 5. 項目五基本標籤

Slide 39

Slide 39 text

!39 Hands On ! ! ! < <

君⼦子坦蕩盪，⼩小⼈人寫作業。

商⼥女不知亡國恨，⼀一天到晚寫作業。

舉頭望明⽉月，低頭寫作業。

洛陽親友如相問，就說我在寫作業。

少壯不努⼒力，⽼老⼤大寫作業。

垂死病中驚坐起，今天還沒寫作業。

Slide 40

Slide 40 text

!40 Hands On ! ! ! < <

君⼦子坦蕩盪，⼩小⼈人寫作業。

商⼥女不知亡國恨，⼀一天到晚寫作業。

舉頭望明⽉月，低頭寫作業。

洛陽親友如相問，就說我在寫作業。

少壯不努⼒力，⽼老⼤大寫作業。

垂死病中驚坐起，今天還沒寫作業。

Slide 41

Slide 41 text

超連結基本標籤 (anchor)

Slide 42

Slide 42 text

超連結基本標籤

Slide 43

Slide 43 text

超連結基本標籤

Slide 44

Slide 44 text

超連結基本標籤

Slide 45

Slide 45 text

!45 Hands On ! ! ... < < 寫作業 index.html

Slide 46

Slide 46 text

!46 Hands On ! ! ! ! ! ! ... < < < < < < < 回⾸首⾴頁 homework.html

Slide 47

Slide 47 text

基本標籤

Slide 48

Slide 48 text

基本標籤

Slide 49

Slide 49 text

表格欄位表格欄位表格欄位表格欄位表格欄位表格欄位表格欄位表格欄位表格欄位基本標籤