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

HTML

Avatar for Pokai Chang Pokai Chang
December 11, 2013
Technology
4
260

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

Other Decks in Technology

See All in Technology
PythonとLLMで挑む、 4コマ漫画の構造化データ化
Avatar for esuji esuji5
0
120
生成AIで「お客様の声」を ストーリーに変える 新潮流「Generative ETL」
Avatar for Satoru Ishikawa ishikawa_satoru
1
220
RailsのPostgreSQL 18対応
Avatar for Yasuo Honda yahonda
0
1.2k
今改めてServiceクラスについて考える 〜あるRails開発者の10年〜
Avatar for Tomohiro Hashidate joker1007
20
8.8k
AIが書いたコードをAIが検証する！自律的なモバイルアプリ開発の実現
Avatar for henteko henteko
1
230
analysis パッケージの仕組みの上でMulti linter with configを実現する / Go Conference 2025
Avatar for Ken’ichiro Oyama k1low
1
240
AWSのProductのLifecycleについて
Avatar for Takuya Shibata stknohg
PRO
0
290
CData MCP ナイト！「CData × Oracleで実現する新しいデータ活用 ― 国産SaaS 連携から MCP Server for Oracle Database まで」
Avatar for KoheiOgawa shisyu_gaku
0
180
Goのビルドシステムの変遷 / The history of Go's build system
Avatar for ymotongpoo ymotongpoo
12
3.4k
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
Avatar for Sagara sagara
0
110
業務でAIの力を最大限に発揮するために #弁護士ドットコム
Avatar for 弁護士ドットコム bengo4com
0
290
いま注目しているデータエンジニアリングの論点
Avatar for Ikki Miyazaki ikkimiyazaki
0
520

Featured

See All Featured
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
431
66k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
59
9.5k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
460k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
4k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
45
7.7k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.8k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
114
20k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k

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