1 / 19

在春天遇見 HTML

在春天遇見 HTML. HTML 網頁基礎實作. 關於我. 資工 系四年級 CNA 現任會長 宿網網管 @GD. 薛好人. A. N. C. 沒什麼，只是想放。. ampus. etwork. ssociation. 今天要上的課. HTML 是什麼 ? HTML 的基本 架構 HTML 常用語法介紹 HTML 網頁實作時間. HTML 是什麼 ?. H yper T ext M arkup L anguage 又稱超 文件標示 語言，是為了「 網頁創建和其它可在網頁瀏覽器中看到的信息」設計的一種標示語言。 HTML 的歷史

gordy
Download Presentation

在春天遇見 HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 在春天遇見 HTML HTML網頁基礎實作

  2. 關於我 資工系四年級 CNA現任會長 宿網網管@GD 薛好人 A N C 沒什麼，只是想放。 ampus etwork ssociation

  3. 今天要上的課 • HTML是什麼? • HTML的基本架構 • HTML常用語法介紹 • HTML網頁實作時間

  4. HTML是什麼? • HyperTextMarkup Language • 又稱超文件標示語言，是為了「網頁創建和其它可在網頁瀏覽器中看到的信息」設計的一種標示語言。 • HTML的歷史 • HTML的年紀跟我們差不多!

  5. HTML的基本架構 • <TAG> • HTML是由很多對<TAG>所組成的! • 範例如下: <html> <head> <title>我是頭</title> </head> <body> 我是身體 </body> </html>

  6. HTML的基本架構 <html> <head> <title>我是頭</title> </head> <body> 我是身體 </body> </html> ←html標記 ←標頭內容 ←標題內容 ←網頁內容

  7. DEMO時間到了! • 事前準備 • 開發套件 • 筆記本、記事本、小畫家…各種文字編輯器。 • 瀏覽器 • Firefox、GoogleChrome、IE。 • GO!!!

  8. HTML常用語法介紹 • 來一些更花俏的功能吧! • <center>放在中間</center> • <h1>字體等級</h1> • <font face=微軟正黑體 color=black>各種文字設定</font> • <br>換行 • <S>刪除線</S> • <u>底線</u> • <imgsrc=“路徑”alt=“圖片介紹">

  9. 又是DEMO時間!!! 圖片網址 http://0rz.tw/EMoyR

  10. HTML網頁實作時間!!! • 最簡單的網頁架構設計 • TABLE! • TABLE的格式 <table border=n> <caption>表格標題</caption> <tr><td>列一行一</td><td>列一行二</td></tr> <tr><td>列二行一</td><td>列二行二</td></tr> </table>

  11. HTML網頁實作時間!!! • 來小小的DEMO一下下 <center> <table border=5width=30%> <caption>不知道是什麼對照表</caption> <tr><td></td><td>好人</td> <td>壞人</td> </tr> <tr><td>好人</td><td>好人</td> <td>大熊</td> </tr> <tr><td>壞人</td><td>古堡</td> <td>酥皮</td> </tr> </table> </center>

  12. HTML網頁實作時間!!! • 更進階的TABLE玩法! • ROWSPAN=n&COLSPAN=n • 簡單來說就是合併儲存格! • ROWSPAN=n • 對列做合併 • COLSPAN=n • 對行做合併

  13. HTML網頁實作時間!!! • 有關COLSPAN的範例 <table border=10> <tr><td colspan=2>AAA</td><td>BBB</td></tr> <tr><td>CCC</td><td>DDD</td><td>EEE</td></tr> </table> • 有關ROWSPAN的範例 <table border=10> <tr><td rowspan=2>AAA</td><td>BBB</td></tr> <tr><td>CCC</td></tr> </table> • DEMO以上的範例!

  14. HTML網頁實作時間!!! • 試著做出來看看吧!!!!! TRYIT!!!

  15. HTML網頁實作時間!!! • 來完成一個網頁吧! • 利用剛剛畫好的table當架構 • 下載需要的素材 • http://0rz.tw/D4j4x • 記得要把網頁跟圖片都放在同一個資料夾底下

  16. HTML網頁實作時間!!! <table width=50% border=0 cellspacing=0 cellpadding=0 align="Center"> <tr><td colspan=2><imgsrc="title.gif" width=1024 height=209></td></tr> <tr><td><imgsrc="banner1.gif" width=213 height=43></td> <td background="banner2.gif" width=811 height=43> <imgsrc="button2.gif" align="center"></td></tr> <tr><td><imgsrc="body0.gif" width=213 height=516 align='left'></td> <td background="body_w.gif" width=812 height=516 align='left'> <font size='7' color='black' face='微軟正黑體'> 你好<br> 我是薛好人<br> 歡迎大家加入CNA </font></td></tr> <tr><td colspan=2><imgsrc="foot.gif" width=1024 height=44></td></tr> </table>

  17. HTML網頁實作時間!!! 檢視成果!!!

  18. Q&A Rise your hand!!!!

  19. THANKYOU!!! 3/28(三) 轉角遇見CSS

More Related