2017 0815 Html 第二堂課 煥凱老師

Html語法課程
因為第一堂課沒上，綜合兩天地課程內容大致在Html內文的編排，主要還是在文字編排上，今天的課程內容另外是加入圖片及影像及音訊檔地插入，由於日後會有CSS3的課程，所以許多內文的編排會由CSS3來主導。

<articl> </articl>
<section> </section>
圖片插入要件 1. RGB樣式                        2. 只接受 JPG，GIF，PNG 三種檔案格式
<img src= "news/phtot1.jpg" alt = "beegees封面" >
                  插入圖片是在文檔同一個資料夾的News資料夾內photo1.jpg

<img src = "../news/photo1.jpg" alt="beegees封面">
                  插入圖片是在文檔上一層資料夾的News資料夾內的photo1.jpg

所以圖檔如果是在上N層資料夾內的檔案，需在scr 內加入"../"
圖片的來源可以是資料及內檔案，也可是外部連結，老師沒提到的是，圖片也可以是在資料庫內。可以利用mysql 建立圖片或影像的資料庫，而從資料庫中擷取檔案。

<audio src="media/rose.mp3" contorls="controls" autoplay="autoplay"></audio>
<video src="media/alive.mp4 contorls loop poster="photo/alive.mp4"></video>

controls 可以不打值 會顯示控制鈕
loop可以不打值 會變成無限循環

<p align=center><img src="photo/beegees.jpg" alt="beegees 唱片封面" width="200">beegees 唱片封面</p>
<p align=center><video src="media/alive.mp4" controls loop>你的瀏覽器不支援mp4播放</video>
<p align = center><audio src="media/rose.mp3" controls="controls">你的瀏覽器不支援mp3播放</audio></p>

超連結網頁
<a href = "index.html" target="_blank">首頁</a>
<a href = "media.html" target="_blnak"><img src="photo/beegees.jpg" width="200"></img></a>
<a href = "http://www.microsoft;com" target="_blank" >微軟</a>
<a href = "mailto:dualxu@outlook.com"?subject=help">外寄郵寄</a>

利用圖片做外部超連結按鈕，上課沒教，我記得過去練習過，所以利用google搜尋資料把HTML語法查出來，其實就是在<a href> 的語法中，再插入<img>語法就可以了
但是這樣的語法其實很陽春，未來利用dreamwave及CSS即可做較多元的變化