HTML

HTML 是沙毀

HTML 是沙毀 !3 ▪ HyperText Markup Language  超⽂文字標記語⾔言 HTML／

HTML 是沙毀 !6 ▪ HyperText Markup Language  超⽂文字標記語⾔言 ▪ 純⽂文字檔
(.htm/.html) HTML／

(.htm/.html) ▪ 不是程式語⾔言，只是標記語⾔言 HTML／

!10 網頁技術 HTML JavaScript CSS HTML／架構樣式⾏行為網⾴頁的內容
網⾴頁的外觀網⾴頁和使⽤用者的互動

!11 網頁技術 HTML JavaScript CSS HTML／架構樣式⾏行為網⾴頁的內容
網⾴頁的外觀網⾴頁和使⽤用者的互動

Hands On

!13 準備工具 ▪ Browser 瀏覽器 ▪ Google Chrome ▪ FireFox
▪ Text Editor 純⽂文字編輯器 ▪ Sublime Text ▪ Vim ▪ Notepad++

Why not Dreamweaver? or FrontPage, Namo WebEditor, etc…

手寫比較快＆乾淨

手寫比較快＆乾淨沒有新技術時差

手寫比較快＆乾淨沒有新技術時差不被工具限制

!19 基本架構 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hi</title> </head>
<body> ... </body> </html>

基本標籤

基本標籤主標題 <h1> </h1> (heading)

基本標籤標題ㄧ <h1> </h1> 標題二標題三標題四標題五標題六 <h2>
</h2> <h3> </h3> <h4> </h4> <h5> </h5> <h6> </h6>

段落段落，段落段落段落段落，段落段落段落段落段落段落，段落段落段落段落，段落段落段落段落，段落段落段落段落段落段落，段落段落，段落段落，段落段落，段落段落，段落段落段落段落，段落段落。 ! 段落段落，段落段落段落段落，段落段落段落段落段落段落，段落段落段落段落，段落段落段落段落，段落段落段落段落段落段落。基本標籤
<p> </p> <p> </p> (paragraph)

!32 Hands On <!DOCTYPE html> <html < < < </
< ! ! </ </ <h1>如何⽤用利瑪竇造句？</h1> <p>我昨天才剛把綠⾖豆種下去，今天⽴立⾺馬  ⾖豆⼦子就⻑⾧長出來了呢！</p> <p>此監聽內容有利⾺馬⾾鬥⾛走⺩王⾦金平。</p>

文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字  文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 ! 基本標籤 <br> (break)

重要基本標籤 <strong> </strong>

基本標籤 <em> </em>

刪除線基本標籤 <del> </del>

‧項目一 ‧項目二 ‧項目三 ‧項目四 ‧項目五基本標籤 <ul> </ul> <li> </li>
<li> </li> <li> </li> <li> </li> <li> </li>

1. 項目一 2. 項目二 3. 項目三 4. 項目四 5. 項目五
基本標籤 <ol> </ol> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li>

!39 Hands On ! ! ! < < </ <
! ! ! ! ! </ </ <ul> <li>君⼦子坦蕩盪，⼩小⼈人寫作業。</li> <li>商⼥女不知亡國恨，⼀一天到晚寫作業。</li> <li>舉頭望明⽉月，低頭寫作業。</li> <li>洛陽親友如相問，就說我在寫作業。</li> <li>少壯不努⼒力，⽼老⼤大寫作業。</li> <li>垂死病中驚坐起，今天還沒寫作業。</li> </ul>

!40 Hands On ! ! ! < < </ <
! ! ! ! ! </ </ <ol> <li>君⼦子坦蕩盪，⼩小⼈人寫作業。</li> <li>商⼥女不知亡國恨，⼀一天到晚寫作業。</li> <li>舉頭望明⽉月，低頭寫作業。</li> <li>洛陽親友如相問，就說我在寫作業。</li> <li>少壯不努⼒力，⽼老⼤大寫作業。</li> <li>垂死病中驚坐起，今天還沒寫作業。</li> </ol>

超連結基本標籤 <a href="http://google.com"> </a> (anchor)

超連結基本標籤 <a href="http://google.com" target=“_blank"> </a>

超連結基本標籤 <a href="anotherpage.htm"> </a>

超連結基本標籤 <a href="/index.htm"> </a>

!45 Hands On ! ! ... < < </ <
! </ </ <a href="homework.html">寫作業</a> index.html

!46 Hands On ! ! ! ! ! ! ...
< < < < < < < </ ! </ </ <a href="index.html">回⾸首⾴頁</a> homework.html

基本標籤 <img src="...">

基本標籤 <hr>

表格欄位表格欄位表格欄位表格欄位表格欄位表格欄位表格欄位表格欄位表格欄位基本標籤
<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>

<center> <font> <small> <big> <u> <b> <i> HTML 只管內容、意義看起來怎樣是
CSS 的事

!52 More ▪ W3School http://www.w3schools.com/

HTML

HTML

More Decks by Pokai Chang

Other Decks in Technology

Featured

Transcript