2015 羅東高中網頁設計工作坊－HTML 初心者指南

HTML ⴲ䗱罏䭸⽂ 2015.7.20 羅東⾼高中網⾴頁設計⼯工作坊䓹꧉蘟〵抓猰䪮㣐㷸

HTML㋐軋ㅕ

僽♧珏垦爚铃鎊欽⢵䲾鶤笪갤涸Ⰹ㺂鷴麕笪갤懳錒㐼*& $ISPNF 'JSFGPY 4BGBSJ瘞㼟笪갤ツ植ⴀ⢵

⢿㥶 邍呔垦겗 ⴪邍 Ⰹ俒鸮穡䕧⫹

㖈Ꟛ㨥㻨)5.-⛓⵹  䧮⦛銴⯓钢陏

➊랃僽垦硹5BH

垦硹Ꟁ鸏垺 UBH 䎙⛖䨾剤)5.-涸垦硹鿪僽䧭㼩涸

Q俒㶶Q ⢿㥶

Q俒㶶Q Ꟛ㨥垦硹 ⢿㥶

Q俒㶶Q 穡㽵垦硹銴㢵⸈♳♧⦐չպ ⢿㥶

UBHUBH 䨾⺫㕠涸Ⰹ㺂剚「ⵌ鑪穉垦硹涸䕧갠罜ツ植ⴀ♶ず涸垺㶩ㄤ⸆腋

UBH" UBH#UBH# UBH" ♧穉垦硹〳⟃⺫わ〥♧穉垦硹

UBH" UBH$UBH$ UBH# UBH%UBH% UBH&UBH& UBH# UBH" 䖎㢵䖎㢵垦硹 䧴罏

垦硹涸䕧갠僽剤鸮䌟ꡠ⤚涸 UBH" UBH$UBH$ UBH# UBH%UBH% UBH&UBH& UBH# UBH"

UBH" UBH$UBH$ UBH# UBH%UBH% UBH&UBH& UBH# UBH" ⴕ遤簮䱖植㖈䧮⦛⢵溏溏玑䒭焺涸垺㶩

➊랃僽簮䱖ⴕ遤

剤ⴕ遤㽠銴簮䱖

UBH" UBH$UBH$ UBH# IPOFI QUXPQ UBH# UBH" ⴕ遤

UBH" UBH$UBH$ UBH# UBH%UBH% UBH&UBH& UBH# UBH" 簮䱖

䌢欽涸簮䱖僽 չⰍ⦐⼱㘗瑠涯պ䧴չ♧⦐5BCպ ♶〳⟃幋欽

HTML 㛇劥卺圓

<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First
Heading</h1> <p>My first paragraph.</p> </body> </html>

%0$5:1&㹁纏鸏⦐俒⟝涸겳㘗僽)5.- <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My
First Heading</h1> <p>My first paragraph.</p> </body> </html>

IUNM䲾鶤鸏⦐俒⟝僽)5.- <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My
First Heading</h1> <p>My first paragraph.</p> </body> </html>

㖈)5.-⚥〳ⴕ捀չ걧պㄤչ魨넓պⰍ鿈ⴕ 걧\ 魨넓\ <!DOCTYPE html> <html> <head> <title>Page Title</title> </head>
<body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>

걧\ IFBE 欽倴鋊眕ㄤ侮넓笪갤湱ꡠ涸须鎝 <!DOCTYPE html> <html> <head> <title>Page Title</title>
</head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>

⢿㥶 UJUMF 欽⢵铞僈姽笪갤涸垦겗姽垦겗 剚ツ植㖈懳錒㐼鋕璭剓♳倰涸俒㶶鿈ⴕ <!DOCTYPE html> <html> <head> <title>Page Title</title>

魨넓\ CPEZ 㽠僽笪갤涸Ⰹ㺂鸏 ❉Ⰹ㺂㼟湬䱺ツ植㖈笪갤♳ <!DOCTYPE html> <html> <head> <title>Page Title</title>

I剚㖈笪갤♳ツ植չ.ZSTU)FBEJOHպ Q⵱剚ツ植չ.ZSTUQBSBHSBQIպ ⢿㥶 <!DOCTYPE html> <html> <head> <title>Page Title</title> </head>
<body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>

笪갤懳錒㐼㖈隡《)5.-墂呪⚥涸玑䒭焺儘僽歋♳䖃♴♧遤♧遤隡《㖈♳꬗涸玑䒭焺剚⮛⯓鄄㛂遤

<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First
Heading</h1> <p>My first paragraph.</p> </body> </html>

<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <p>My first
paragraph.</p> <h1>My First Heading</h1> </body> </html>

俒㶶 5FYUT

I)FBEJOHI 垦겗

<h1> Heading 1 </h1> <h2> Heading 2 </h2> <h3> Heading
3 </h3> <h4> Heading 4 </h4> <h5> Heading 5 </h5> <h6> Heading 6 </h6> 㣐㼭 ꅾ銴䚍

Q1BSBHSBQIQ 媯衆俒㶶

懳錒㐼㖈隡《)5.-玑䒭焺儘剚荈⹛䙐殜㢵긅涸瑠涯ㄤ遤侸㶶⯋莅㶶⯋⛓꟦剓㢵〫剚⥃殆♧⦐⼱㘗瑠涯

Q繏匌넞⚥笪갤鏤鎙 խխ䊨⡲ խխ㖷Q 繏匌넞⚥笪갤鏤鎙䊨⡲㖷 ⢿㥶

齡銴䙦랃䳖遤

CS#SFBL ⚥倬

Q繏匌넞⚥CS笪갤CS䊨⡲CS㖷Q ⢿㥶 繏匌넞⚥ 笪갤 䊨⡲ 㖷

C#PMEC 磧넓 J*UBMJDJ 俷넓

C-54)8FC8PSLTIPQC J-54)8FC8PSLTIPQJ LTSH 2015 Web Workshop LTSH 2015 Web Workshop
⢿㥶

IS)PSJ[POUBM-JOF 宐䎂箁

Q繏匌넞⚥笪갤鏤鎙䊨⡲㖷Q IS Q㽠㖈➛䎃㢚㣔Q ⢿㥶 繏匌넞⚥笪갤鏤鎙䊨⡲㖷㽠㖈➛䎃㢚㣔

$PNNFOU-JOF 鏽鍑

Q繏匌넞⚥笪갤鏤鎙䊨⡲㖷Q 銴鎹䖤⸈♳鸮穡鏽鍑俒㶶♶剚ツ植㖈笪갤♳ ⢿㥶 繏匌넞⚥笪갤鏤鎙䊨⡲㖷

鸮穡 -JOL

BISFGVSM鸮穡俒㶶B

ISFG➿邍鸏⦐鸮穡䭸ぢ涸⡙縨㼟VSM剐䳖䧭笪갤涸笪㖧㽠腋鸮穡ⵌ鑪笪갤 BISFGVSM鸮穡俒㶶B

BISFGIUUQHPPHMFDPNUX(PPHMFB ⢿㥶 笪㖧銴곏爚涸鸮穡俒㶶

殹䧮⦛䒊用♧⦐乩剤侸⦐ⴕ갤涸笪畀儘䧮⦛⛳꨾銴鷴麕鸮穡涸倰䒭㼟嫦⦐ⴕ갤⚮㖈♧饱

BISFGQBHFIUNMⴕ갤そ珖B ⢿㥶 㼟VSM剐䳖䧭ⴕ갤涸墂そ㽠腋鸮穡ⵌ鑪ⴕ갤

Ⰽ⦐✽湱鸮穡涸)5.-墂呪䗳갭㖈ず♧⦐湡ꏗ 须俲㣰 ⚥ 鸏垺B䩞䪪䖤ⵌ墂呪涸⡙縨⚛䒊用鸮穡や⵱䗳갭僈焷垦爚ⴀ墂呪⡙縨

䕧⫹ *NBHFT

JNHTSDVSMBMU

䕧⫹搂岁ツ植儘䨾欴欰涸俒㶶 JNHTSDVSMBMU

JNH TSDIUUQEHJDEQMGQWLBDMPVEGSPOUOFU JNBHFTEPHCSFFETMBSHF8FMTI$PSHJ1FNCSPLFKQH BMU鸏僽♧ꦷ〳䠦涸叕㛇朄 ⢿㥶 笪㖧䕧⫹搂岁ツ植儘䨾欴欰涸俒㶶

JNHTSDJNBHFTDPSHJKQHBMU ⢿㥶

겳ⴽ*% $MBTT*%

➊랃僽겳ⴽ

欽⢵ⴕ겳 䘰鸠㤛欽$44 雊玑䒭焺隶䖤㥪溏

FMFNFOUDMBTTWBMVF

FMFNFOU〳⟃僽ꤑ✫暶㹁垦硹⟃㢫涸⟤䠑垦硹 FMFNFOUDMBTTWBMVF

WBMVF㽠僽겳ⴽ涸そ㶶〳⟃荈歋ㄐそ FMFNFOUDMBTTWBMVF

IDMBTTCMVF)FBEJOHI QDMBTTSFE5IJTJTBOFYBNQMFQ VMDMBTTCMVF MJ'JSTUMJ MJ4FDPOEMJ VM QDMBTTCMVFSFE5IJTJTBOPUIFSFYBNQMFQ ⢿㥶

➊랃僽*%

*%僽㈔♧涸 㖈)5.-〫腋ⴀ植♧妄

FMFNFOUJEWBMVF

㖈ㄐそDMBTT䧴JE儘锞黾㸛⟃♴ㄐそ鋊⵱ ♧䖒⢪欽㼭㻨薊俒 ♶腋⟃侸㶶Ꟛ걧 ♶腋⺫わ瑠涯䏁箁瘞⟤⡦ꬌ薊俒㶶嫢涸暶婌㶶⯋ そ珖湈ꆀ痘ざ겳ⴽ垺䒭涸暶蒀剤ⵄ倴ꠗ隡儘〳⟃꼛
♳濼麥鑪겳ⴽ涸垺䒭

⴪邍 -JTU

搂䎸⴪邍 6OPSEFSFEMJTU

VM MJ痧♧갪MJ MJ痧✳갪MJ MJ痧♲갪MJ VM

VM MJ繏匌넞⚥MJ MJ笪갤鏤鎙䊨⡲㖷MJ MJ-54)8FC8PSLTIPQMJ VM ⢿㥶 • 羅東⾼高中 • 網⾴頁設計⼯工作坊
• LTSH Web Workshop

剤䎸⴪邍 0SEFSFEMJTU

PM MJ痧♧갪MJ MJ痧✳갪MJ MJ痧♲갪MJ PM

PM MJ繏匌넞⚥MJ MJ笪갤鏤鎙䊨⡲㖷MJ MJ-54)8FC8PSLTIPQMJ PM ⢿㥶 1. 羅東⾼高中 2. 網⾴頁設計⼯工作坊
3. LTSH Web Workshop

<ul> <li>羅東⾼高中網⾴頁設計⼯工作坊 <ol> <li>HTML</li> <li>CSS</li> </ol> </li> <li>資訊 <ul> <li>時間：2015.7.20
~ 21</li> <li>地點：羅東⾼高中</li> </ul> </li> <li>LTSH Web Design Workshop</li> </ul>

• 羅東⾼高中網⾴頁設計⼯工作坊 1. HTML 2. CSS • 資訊 • 時間：2015.7.20
~ 21 • 地點：羅東⾼高中 • LTSH Web Design Workshop

邍呔 5BCMF

UBCMF US UE痧⴪痧遤UE UE痧⴪痧遤UE UE痧⴪痧遤UE US US UE痧⴪痧遤UE UE痧⴪痧遤UE UE痧⴪痧遤UE
US UBCMF

US UBCMF UBCMF欽⢵㹁纏侮⦐邍呔

US UBCMF US➿邍չUBCMFSPXTպ 㽠僽邍呔涸չ堾⴪պ

US UBCMF UE➿邍չUBCMFEBUBպ 㽠僽邍呔涸չ湬遤պ

痧⴪痧遤痧⴪痧遤痧⴪痧遤痧⴪痧遤痧⴪痧遤痧⴪痧遤

銴䙦랃ざ⢘⮭㶸呔

UBCMF US UEDPMTQBO痧⴪痧遤UE UE痧⴪痧遤UE US US UESPXTQBO痧⴪痧遤UE UE痧⴪痧遤UE UE痧⴪痧遤UE US
US UE痧⴪痧遤UE UE痧⴪痧遤UE US UBCMF

US UE痧⴪痧遤UE UE痧⴪痧遤UE US UBCMF 㖈UE垦硹⚥⸈ⰅչDPMTQBOպざ⢘堾⴪⮭㶸呔 邍呔⚥籏堾⴪侸

US UE痧⴪痧遤UE UE痧⴪痧遤UE US UBCMF 㖈UE垦硹⚥⸈ⰅչDPMTQBOպざ⢘湬遤⮭㶸呔 邍呔⚥籏湬遤侸

խ痧⴪痧遤痧⴪痧遤痧⴪痧遤痧⴪痧遤痧⴪痧遤痧⴪痧遤痧⴪痧遤

Happy Coding!

2015 羅東高中網頁設計工作坊－HTML 初心者指南

2015 羅東高中網頁設計工作坊－HTML 初心者指南

More Decks by Irene Chang

Other Decks in Education

Featured

Transcript