Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Django Girls 2015 - HTML
Search
Randy Lien
May 30, 2015
Programming
200
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Django Girls 2015 - HTML
Django Girls Taipei 2015 training material.
Randy Lien
May 30, 2015
More Decks by Randy Lien
See All by Randy Lien
The ideas of Clojure - Things I learn from Clojure
randylien
0
200
Django Girls 2015 - CSS
randylien
1
170
React.JS Conf & f8
randylien
1
230
Immutable, Performance and Component Communication
randylien
0
130
Introduce Flux & React in KKBOX
randylien
6
450
What is the next step for a front end beginner
randylien
1
110
Understand front end developer
randylien
2
210
Introduce Flux & React in practice
randylien
8
470
UI Engineering Introduction
randylien
0
64
Other Decks in Programming
See All in Programming
技術記事、 専門家としてのプログラマ、 言語化
mizchi
14
7.2k
ECSアプリログをFireLensでコスト削減しようとしたけど諦めた話 in Fargate×Node.js
akihisaikeda
2
4.2k
act1-costs.pdf
sumedhbala
0
150
Signal Forms: Details & Live Coding @enterJS 2026 in Mannheim
manfredsteyer
PRO
0
210
キャリア迷子上等 ─ "ない道"は自分で作ればいい
16bitidol
3
2.7k
Creating Composable Callables in Contemporary C++
rollbear
0
180
AIを活用したE2Eテスト実装効率化のあゆみ / ebisu-mobile-14-kotetu
kotetuco
0
150
symfony/aiとlaravel/boost
77web
0
110
TAKTでAI駆動開発の品質を設計する
j5ik2o
7
1.6k
SLOをサービス品質の共通言語にするために 取り組んできたこと
wakana0222
0
250
Datadog × OpenTelemetry 入門と実践のあいだ
kn_to_maxpno
1
180
1B+ /day規模のログを管理する技術
broadleaf
0
120
Featured
See All Featured
Utilizing Notion as your number one productivity tool
mfonobong
4
340
[SF Ruby Conf 2025] Rails X
palkan
2
1.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
Typedesign – Prime Four
hannesfritz
42
3.1k
Getting science done with accelerated Python computing platforms
jacobtomlinson
2
250
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
ryanjones
0
180
Side Projects
sachag
455
43k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
1.1k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
67
56k
Odyssey Design
rkendrick25
PRO
2
720
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
aleyda
1
2.1k
Redefining SEO in the New Era of Traffic Generation
szymonslowik
1
350
Transcript
Django Girls 2015 HTML Randy Lien
HyperText Markup Language
超⽂文字標注語 聽起來好像很厲害
HTML 結構
<div class='sidebar'> <ul class='menu-‐list'>
<li class='menu-‐item'>Home</li> <li class='menu-‐item'>Profile</li> <li class='menu-‐item'>Facebook</li> </ul> </div> <div class='content'> <h1 class='article-‐title'>Title</h1> <h2>Tagname</h2> <p>................</p> </div>
<div class='sidebar'> <ul class='menu-‐list'>
<li class='menu-‐item'>Home</li> <li class='menu-‐item'>Profile</li> <li class='menu-‐item'>Facebook</li> </ul> </div> <div class='content'> <h1 class='article-‐title'>Title</h1> <h2>Tagname</h2> <p>................</p> </div> Tags
None
HTML HTML CSS JavaScript JavaScript CSS
JavaScript 互動⾏行為 HTML 結構 CSS 視覺呈現
<!DOCTYPE html> <html> <head>
<title>我的旅⾏行⽇日誌</title> <style> body { background-‐color: lightyellow; } em { color: LightSeaGreen; } </style> </head> <body> <h1>Hello World!</h1> <em>歡迎來到我的旅⾏行⽇日誌</em> </body> </html>
<h1>Header 1</h1> <h2>Header 2</h2> <h3>Header 3</h3> <h4>Header 4</h4> <h5>Header 5</h5>
<h6>Header 6</h6> <p>Paragraph.</p> ⽂文字類型的標籤
<h1>旅⾏行與我</h1> <h2>什麼是旅⾏行呢?</h2> <p>I <em>love</em> traveling!</p> <p>旅⾏行就像是⼀一段⼈人⽣生的⼩小旅程的縮影,妳不知道
妳會碰⾒見誰,你不知道會往那裡⾛走。</p> <h2>喜歡那個國家呢?</h2> <p><strong>⻄西班⽛牙!!!</strong>那裡是⼀一個夢 幻的國度,有美⻝⾷食,午覺,跟藝術。</p>
旅⾏行與我 什麼是旅⾏行呢? I love traveling! 旅⾏行就像是⼀一段⼈人⽣生的⼩小旅程的縮影,妳不知道妳會碰 ⾒見誰,你不知道會往那裡⾛走。
喜歡那個國家呢? ⻄西班⽛牙!!!那裡是⼀一個夢幻的國度,有美⻝⾷食,午覺,跟藝術。
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <ol> <li>Item
1</li> <li>Item 2</li> <li>Item 3</li> </ol> • Item 1 • Item 2 • Item 3 1. Item 1 2. Item 2 3. Item 3
<a name='like' href='/like/' rel='like'> Like
</a> Like
<h2>⻄西班⽛牙</h2> <p>⻄西班⽛牙⺠民⾵風奔放熱情,當地⼈人喜愛⾾鬥⽜牛, 並且勢衷跳弗拉明⼽戈舞。同時也是吉他之鄉, 近代古典吉他就發源並興盛⾃自⻄西班⽛牙。</p> <h2>義⼤大利</h2> <p>義⼤大利⺫⽬目前擁有 44 處世界遺產,也是世 界上擁有最多世界遺產的國家。義⼤大利全國估 計有
100,000 個任何形式的紀念物。</p>
<div> <h2>⻄西班⽛牙</h2> <p>⻄西班⽛牙⺠民⾵風奔放熱情,當地⼈人喜愛⾾鬥⽜牛, 並且勢衷跳弗拉明⼽戈舞。同時也是吉他之鄉, 近代古典吉他就發源並興盛⾃自⻄西班⽛牙。</p> </div> <div> <h2>義⼤大利</h2> <p>義⼤大利⺫⽬目前擁有 44
處世界遺產,也是世 界上擁有最多世界遺產的國家。義⼤大利全國估 計有 100,000 個任何形式的紀念物。</p> </div>
<h2>⻄西班⽛牙</h2> <p>⻄西班⽛牙⺠民⾵風奔放熱情,當地⼈人喜愛⾾鬥⽜牛, 並且勢衷跳弗拉明⼽戈舞。同時也是吉他之鄉, 近代古典吉他就發源並興盛⾃自⻄西班⽛牙。</p>
<p><span>⻄西班⽛牙</span>⺠民⾵風奔放 熱情,當地⼈人喜愛⾾鬥⽜牛,並且熱衷跳 <span>弗拉明⼽戈舞</span>。同時也 是<span>吉他</span>之鄉,近代古 典吉他就發源並興盛⾃自⻄西班⽛牙。</p>
<div class='sidebar'> <ul class='menu-list'> <li class='menu-item'>Home</li> <li class='menu-item'>Profile</li> <li class='menu-item'>Facebook</li>
</ul> </div> <div class='content'> <h1 class='article-title'>Title</h1> <h2>Tagname</h2> <p>................</p> </div>
fin