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

HTML

Avatar for Pokai Chang Pokai Chang
December 11, 2013
Technology
310
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
210
Functional, Declarative and Modular System Environment 
with Nix and NixOS
Avatar for Pokai Chang zetavg
3
650
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
360
機器學習與自然語言辨識 Deep Learing & NLP
Avatar for Pokai Chang zetavg
3
410
Colorgy - 校園 Open API
Avatar for Pokai Chang zetavg
3
680
Git 版本控管－平行宇宙時光穿梭機
Avatar for Pokai Chang zetavg
5
540

Other Decks in Technology

See All in Technology
現地で盛り上がった WWDC26 Keynote
Avatar for ZOZO Developers zozotech
PRO
1
200
Socrates × Looker　〜セマンティックレイヤーで進化するデータ分析エージェント〜
Avatar for Uchide Hiroki(ucchi-) hanon52_
3
2.1k
FinOps × AIエージェントで実現する コストインシデントの自動調査
Avatar for T.REX oasis1994liveforever
0
120
LLMと共に進化するプロセスを目指して
Avatar for y_matsuwitter ymatsuwitter
12
4k
小さくはじめるSLI/SLO ～育てながら組織に定着させる実践知～ / Starting Small with SLI/SLOs: Building Adoption Through Continuous Growth
Avatar for Narimichi Takamura nari_ex
4
1.7k
Android の公式 Skill / Android skills
Avatar for Yuki Anzai yanzm
0
130
「速く作る」から「正しく作る」へ ─ 生成AI時代の開発フロー改革の ロードマップと実行 ─
Avatar for starfish719 starfish719
0
9.8k
AIっぽい文章を採点して人間らしく直すアプリを作ってみた
Avatar for Yuuki Yamashita yama3133
2
120
AGENTS.mdとSkillsで始めるAIエージェント活用
Avatar for そのだ sonoda_mj
2
190
Oracle AI Database@AWS：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
4
2.9k
Djangoユーザが知っ得なPostgreSQL機能 - 設計の選択肢を増やす / Djang-use-PostgreSQL
Avatar for soudai sone soudai
PRO
1
230
地球に⽣きるAI —GeoAIと「中間領域」— / AI Living on Earth — GeoAI and the “Intermediate Layer” —
Avatar for Kiyota Yoji, Ph.D. ykiyota
0
280

Featured

See All Featured
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
420
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.3k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
2k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
11k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
210k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.7k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.3k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.4k
Visualization
Avatar for Eitan Lees eitanlees
152
17k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.2k

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