Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Pokai Chang Pokai Chang
December 11, 2013
Technology
4
280

 HTML

Avatar for Pokai Chang

Pokai Chang

December 11, 2013
Tweet

More Decks by Pokai Chang

See All by Pokai Chang
Teaching English Speaking Language Models to Speak Taiwanese Mandarin
Avatar for Pokai Chang zetavg
2
180
Functional, Declarative and Modular System Environment 
with Nix and NixOS
Avatar for Pokai Chang zetavg
3
620
Building the Ruby × Elixir Conf App
Avatar for Pokai Chang zetavg
0
200
Overview of GraphQL & Clients
Avatar for Pokai Chang zetavg
5
1.4k
GraphQL & Relay － 串起前後端世界的橋樑
Avatar for Pokai Chang zetavg
16
2.7k
Automated Deploy Flow with CodeShip & OpsWorks & Hubot
Avatar for Pokai Chang zetavg
3
350
機器學習與自然語言辨識 Deep Learing & NLP
Avatar for Pokai Chang zetavg
3
400
Colorgy - 校園 Open API
Avatar for Pokai Chang zetavg
3
660
Git 版本控管－平行宇宙時光穿梭機
Avatar for Pokai Chang zetavg
5
510

Other Decks in Technology

See All in Technology
usermode linux without MMU - fosdem2026 kernel devroom
Avatar for Hajime Tazaki thehajime
0
210
入社1ヶ月でデータパイプライン講座を作った話
Avatar for Yuta Ozaki waiwai2111
1
220
プロポーザルに込める段取り八分
Avatar for ShoheiMitani shoheimitani
0
160
生成AI時代にこそ求められるSRE / SRE for Gen AI era
Avatar for ymotongpoo ymotongpoo
5
2.6k
Bill One 開発エンジニア 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
4
17k
We Built for Predictability; The Workloads Didn’t Care
Avatar for Michael Stahnke stahnma
0
130
システムのアラート調査をサポートするAI Agentの紹介/Introduction to an AI Agent for System Alert Investigation
Avatar for SadayoshiTada taddy_919
2
1.7k
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
10k
予期せぬコストの急増を障害のように扱う――「コスト版ポストモーテム」の導入とその後の改善
Avatar for Masahiro Yoshizawa muziyoshiz
1
1.5k
30万人の同時アクセスに耐えたい！新サービスの盤石なリリースを支える負荷試験 / SRE Kaigi 2026
Avatar for GENDA genda
1
240
【５分でわかる】セーフィー エンジニア向け会社紹介
Avatar for Safie safie_recruit
0
42k
（金融庁共催）第4回金融データ活用チャレンジ勉強会資料
Avatar for tak takumimukaiyama
0
120

Featured

See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
97
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
3.9k
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
2.2M
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.1k
A Soul's Torment
Avatar for Nat Ma seathinner
5
2.2k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
0
740
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
350
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
580
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
1
1.3k

Transcript

  1. HTML

  2. HTML 是沙毀

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

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

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

  6. HTML 是沙毀 !6 ▪ HyperText Markup Language
 超⽂文字標記語⾔言 ▪ 純⽂文字檔

    (.htm/.html) HTML／

  7. HTML 是沙毀 !7 ▪ HyperText Markup Language
 超⽂文字標記語⾔言 ▪ 純⽂文字檔

    (.htm/.html) ▪ 不是程式語⾔言，只是標記語⾔言 HTML／

  8. HTML 是沙毀 !8 ▪ HyperText Markup Language
 超⽂文字標記語⾔言 ▪ 純⽂文字檔

    (.htm/.html) ▪ 不是程式語⾔言，只是標記語⾔言 HTML／

  9. HTML 是沙毀 !9 ▪ HyperText Markup Language
 超⽂文字標記語⾔言 ▪ 純⽂文字檔

    (.htm/.html) ▪ 不是程式語⾔言，只是標記語⾔言 HTML／

  10. !10 網頁技術 HTML JavaScript CSS HTML／ 架構 樣式 ⾏行為 網⾴頁的內容

    網⾴頁的外觀 網⾴頁和使⽤用者的互動

  11. !11 網頁技術 HTML JavaScript CSS HTML／ 架構 樣式 ⾏行為 網⾴頁的內容

    網⾴頁的外觀 網⾴頁和使⽤用者的互動

  12. Hands On

  13. !13 準備工具 ▪ Browser 瀏覽器 ▪ Google Chrome ▪ FireFox

    ▪ Text Editor 純⽂文字編輯器 ▪ Sublime Text ▪ Vim ▪ Notepad++

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

  15. 手寫比較快＆乾淨

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

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

  18. Setup

  19. !19 基本架構 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hi</title> </head>

    <body> ... </body> </html>

  20. !20 基本架構 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hi</title> </head>

    <body> ... </body> </html>

  21. !21 基本架構 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hi</title> </head>

    <body> ... </body> </html>

  22. !22 基本架構 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hi</title> </head>

    <body> ... </body> </html>

  23. !23 基本架構 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hi</title> </head>

    <body> ... </body> </html>

  24. !24 基本架構 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hi</title> </head>

    <body> ... </body> </html>

  25. !25 基本架構 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hi</title> </head>

    <body> ... </body> </html>

  26. !26 基本架構 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hi</title> </head>

    <body> ... </body> </html>

  27. !27 基本架構 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hi</title> </head>

    <body> ... </body> </html>

  28. 基本標籤

  29. 基本標籤 主標題 <h1> </h1> (heading)

  30. 基本標籤 標題ㄧ <h1> </h1> 標題二 標題三 標題四 標題五 標題六 <h2>

    </h2> <h3> </h3> <h4> </h4> <h5> </h5> <h6> </h6>

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

    <p> </p> <p> </p> (paragraph)

  32. !32 Hands On <!DOCTYPE html> <html < < < </

    < ! ! </ </ <h1>如何⽤用利瑪竇造句？</h1> <p>我昨天才剛把綠⾖豆種下去，今天⽴立⾺馬
 ⾖豆⼦子就⻑⾧長出來了呢！</p> <p>此監聽內容有利⾺馬⾾鬥⾛走⺩王⾦金平。</p>

  33. 文字文字文字文字文字文字文字文字文 字文字文字文字文字文字文字文字文字 文字文字文字文字文字
 文字文字文字文字文字文字文字文字文 字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字 ! 基本標籤 <br> (break)

  34. 重要 基本標籤 <strong> </strong>

  35. 基本標籤 <em> </em>

  36. 刪除線 基本標籤 <del> </del>

  37. ‧項目一 ‧項目二 ‧項目三 ‧項目四 ‧項目五 基本標籤 <ul> </ul> <li> </li>

    <li> </li> <li> </li> <li> </li> <li> </li>

  38. 1. 項目一 2. 項目二 3. 項目三 4. 項目四 5. 項目五

    基本標籤 <ol> </ol> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li>

  39. !39 Hands On ! ! ! < < </ <

    ! ! ! ! ! </ </ <ul> <li>君⼦子坦蕩盪，⼩小⼈人寫作業。</li> <li>商⼥女不知亡國恨，⼀一天到晚寫作業。</li> <li>舉頭望明⽉月，低頭寫作業。</li> <li>洛陽親友如相問，就說我在寫作業。</li> <li>少壯不努⼒力，⽼老⼤大寫作業。</li> <li>垂死病中驚坐起，今天還沒寫作業。</li> </ul>

  40. !40 Hands On ! ! ! < < </ <

    ! ! ! ! ! </ </ <ol> <li>君⼦子坦蕩盪，⼩小⼈人寫作業。</li> <li>商⼥女不知亡國恨，⼀一天到晚寫作業。</li> <li>舉頭望明⽉月，低頭寫作業。</li> <li>洛陽親友如相問，就說我在寫作業。</li> <li>少壯不努⼒力，⽼老⼤大寫作業。</li> <li>垂死病中驚坐起，今天還沒寫作業。</li> </ol>

  41. 超連結 基本標籤 <a href="http://google.com"> </a> (anchor)

  42. 超連結 基本標籤 <a href="http://google.com" target=“_blank"> </a>

  43. 超連結 基本標籤 <a href="anotherpage.htm"> </a>

  44. 超連結 基本標籤 <a href="/index.htm"> </a>

  45. !45 Hands On ! ! ... < < </ <

    ! </ </ <a href="homework.html">寫作業</a> index.html

  46. !46 Hands On ! ! ! ! ! ! ...

    < < < < < < < </ ! </ </ <a href="index.html">回⾸首⾴頁</a> homework.html

  47. 基本標籤 <img src="...">

  48. 基本標籤 <hr>

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

    <table> </table> <tr> </tr> <tr> </tr> <tr> </tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td>

  50. <center> <font> <small> <big> <u> <b> <i>

  51. <center> <font> <small> <big> <u> <b> <i> HTML 只管內容、意義 看起來怎樣是

    CSS 的事

  52. !52 More ▪ W3School http://www.w3schools.com/

  53. CSS