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

HTML

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

 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
190
Functional, Declarative and Modular System Environment 
with Nix and NixOS
Avatar for Pokai Chang zetavg
3
630
Building the Ruby × Elixir Conf App
Avatar for Pokai Chang zetavg
0
200
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
350
機器學習與自然語言辨識 Deep Learing & NLP
Avatar for Pokai Chang zetavg
3
400
Colorgy - 校園 Open API
Avatar for Pokai Chang zetavg
3
670
Git 版本控管－平行宇宙時光穿梭機
Avatar for Pokai Chang zetavg
5
520

Other Decks in Technology

See All in Technology
猫でもわかるKiro CLI(AI 駆動開発への道編)
Avatar for Hiroo Katoh kentapapa
0
220
CyberAgentの生成AI戦略 〜変わるものと変わらないもの〜
Avatar for katayan katayan
0
230
AIエージェント時代に備える AWS Organizations とアカウント設計
Avatar for Hajime KOSHIRO kossykinto
3
1k
TypeScript 7.0の現在地と備え方
Avatar for uhyo uhyo
6
990
わからなくて良いなら、わからなきゃだめなの？
Avatar for kota oue kotaoue
1
360
Postman v12 で変わる API開発ワークフロー (Postman v12 アップデート) / New API development workflow with Postman v12
Avatar for Yoichi Kawasaki yokawasa
0
130
アーキテクチャモダナイゼーションを実現する組織
Avatar for SatohJohn satohjohn
2
940
Zero Data Loss Autonomous Recovery Service サービス概要
Avatar for oracle4engineer oracle4engineer
PRO
2
13k
頼れる Agentic AI を支える Datadog のオブザーバビリティ / Powering Reliable Agentic AI with Datadog Observability
Avatar for Kento Kimura aoto
PRO
0
120
JAWS Days 2026 楽しく学ぼう！ 認証認可 入門/20260307-jaws-days-novice-lane-auth
Avatar for opelab opelab
11
2.3k
SRE NEXT 2026 CfP レビュアーが語る聞きたくなるプロポーザルとは？
Avatar for Yuta Kawasaki yutakawasaki0911
1
360
複数クラスタ運用と検索の高度化：ビズリーチにおけるElastic活用事例 / ElasticON Tokyo2026
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
0
160

Featured

See All Featured
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
140
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
240
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.4k
Done Done
Avatar for chrislema chrislema
186
16k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
150
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.7k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
67
37k
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
190

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