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
340
4

 HTML

Avatar for Pokai Chang

Pokai Chang

December 11, 2013

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
220
Functional, Declarative and Modular System Environment 
with Nix and NixOS
Avatar for Pokai Chang zetavg
3
680
Building the Ruby × Elixir Conf App
Avatar for Pokai Chang zetavg
0
210
Overview of GraphQL & Clients
Avatar for Pokai Chang zetavg
5
1.5k
GraphQL & Relay － 串起前後端世界的橋樑
Avatar for Pokai Chang zetavg
16
2.7k
Automated Deploy Flow with CodeShip & OpsWorks & Hubot
Avatar for Pokai Chang zetavg
3
370
機器學習與自然語言辨識 Deep Learing & NLP
Avatar for Pokai Chang zetavg
3
420
Colorgy - 校園 Open API
Avatar for Pokai Chang zetavg
3
690
Git 版本控管－平行宇宙時光穿梭機
Avatar for Pokai Chang zetavg
5
550

Other Decks in Technology

See All in Technology
GoCon2026 - Open Source, Open World
Avatar for sanposhiho sanposhiho
1
210
AIで開発は速くなったのに、なぜ現場は楽にならないのか 〜あなたの組織のボトルネックを突き止めるワークショップ〜
Avatar for Kazuto Kusama jacopen
1
270
コスト最適化の「めんどくさい」を AWS FinOps Agent でチョット楽にする
Avatar for kaz classmethod_kaz
0
270
生成AI時代の クレデンシャルとパーミッション設計
Avatar for NRI Netcom nrinetcom
PRO
4
1.6k
設計の世代交代を乗り越える、14年続くAndroidアプリの開発戦略
Avatar for SansanTech sansantech
PRO
1
150
Multica × 長期記憶：40個のミニプロジェクト管理
Avatar for eiei114 eiei114
1
200
多層防御と最⼩権限で実現する、安全なAIエージェント設計パターン
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
210
AIエージェントの開発・提供におけるセキュリティリスクの論点と対策
Avatar for GMO Flatt Security flatt_security
2
600
2026-09-10 【Snowflake World Tour Tokyo 2026】dbt Core と Snowflake で実現する多層的なデータガバナンス / Multi-Layered Data Governance Powered by dbt Core and Snowflake
Avatar for civitaspo civitaspo
0
180
Bet AI Day 2026丨How We Bet AI: AIとともに働く場をつくる
Avatar for LayerX layerx
PRO
2
2.8k
PfEingのアプローチで働こう
Avatar for rin（林晃 / Akira Hayashi） rindrics
0
200
Sigmaユーザーのための有用リソース一挙公開 & Sigmaで使えるMCP #sigma_ucj /useful-resources-for-sigma-computing-users-and-mcps-with-sigma
Avatar for shinyaa31 shinyaa31
0
150

Featured

See All Featured
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
530
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.3k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
8
2.2k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
1
2.7k
Designing for Performance
Avatar for Lara Hogan lara
611
70k
It's Worth the Effort
Avatar for 3n 3n
188
29k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.6k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
450
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
320
A Soul's Torment
Avatar for Nat Ma seathinner
7
3.6k
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
1.2k
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.9k

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