Django Girls 2015 - HTML

Django Girls Taipei 2015 training material.

Transcript

1. Django Girls 2015
 HTML Randy Lien
2. HyperText Markup Language
3. 超⽂文字標注語 聽起來好像很厲害
4. HTML 結構
5. <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>  
6. <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
8. HTML HTML CSS JavaScript JavaScript CSS
9. JavaScript 互動⾏行為 HTML 結構 CSS 視覺呈現
10. <!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>
11. <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>   ⽂文字類型的標籤
12. <h1>旅⾏行與我</h1>   <h2>什麼是旅⾏行呢?</h2>   <p>I  <em>love</em>  traveling!</p>   <p>旅⾏行就像是⼀一段⼈人⽣生的⼩小旅程的縮影，妳不知道   妳會碰⾒見誰，你不知道會往那裡⾛走。</p>   <h2>喜歡那個國家呢?</h2>   <p><strong>⻄西班⽛牙!!!</strong>那裡是⼀一個夢   幻的國度，有美⻝⾷食，午覺，跟藝術。</p>
13. 旅⾏行與我   什麼是旅⾏行呢?   I  love  traveling!   旅⾏行就像是⼀一段⼈人⽣生的⼩小旅程的縮影，妳不知道妳會碰
 ⾒見誰，你不知道會往那裡⾛走。   喜歡那個國家呢?   ⻄西班⽛牙!!!那裡是⼀一個夢幻的國度，有美⻝⾷食，午覺，跟藝術。
14. <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
15. <a  name='like'  href='/like/'  rel='like'>          Like   </a>   Like
16. <h2>⻄西班⽛牙</h2> <p>⻄西班⽛牙⺠民⾵風奔放熱情，當地⼈人喜愛⾾鬥⽜牛， 並且勢衷跳弗拉明⼽戈舞。同時也是吉他之鄉， 近代古典吉他就發源並興盛⾃自⻄西班⽛牙。</p> <h2>義⼤大利</h2> <p>義⼤大利⺫⽬目前擁有 44 處世界遺產，也是世 界上擁有最多世界遺產的國家。義⼤大利全國估 計有 100,000 個任何形式的紀念物。</p>
17. <div> <h2>⻄西班⽛牙</h2> <p>⻄西班⽛牙⺠民⾵風奔放熱情，當地⼈人喜愛⾾鬥⽜牛， 並且勢衷跳弗拉明⼽戈舞。同時也是吉他之鄉， 近代古典吉他就發源並興盛⾃自⻄西班⽛牙。</p> </div> <div> <h2>義⼤大利</h2> <p>義⼤大利⺫⽬目前擁有 44 處世界遺產，也是世 界上擁有最多世界遺產的國家。義⼤大利全國估 計有 100,000 個任何形式的紀念物。</p> </div>
18. <h2>⻄西班⽛牙</h2> <p>⻄西班⽛牙⺠民⾵風奔放熱情，當地⼈人喜愛⾾鬥⽜牛， 並且勢衷跳弗拉明⼽戈舞。同時也是吉他之鄉， 近代古典吉他就發源並興盛⾃自⻄西班⽛牙。</p>
19. <p><span>⻄西班⽛牙</span>⺠民⾵風奔放
 熱情，當地⼈人喜愛⾾鬥⽜牛，並且熱衷跳 <span>弗拉明⼽戈舞</span>。同時也 是<span>吉他</span>之鄉，近代古 典吉他就發源並興盛⾃自⻄西班⽛牙。</p>
20. <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>
21. fin