2013-03-11

HTML語法教學 <IMG>貼圖語法教學

當我們要設計網頁或使用網路服務需要放圖片時(如:露天拍賣怎麼多放圖片?)等等的相關問題,都是需要使用到HTML語法中的<IMG>貼圖語法,如果會使用時,便可以在許許多多採用HTML編輯器的網路服務中貼取許許多多的華麗圖片。


<img src="圖片網址">

範例一:顯示大明小站的LOGO

<img src="http://4.bp.blogspot.com/-iAEw-W-RkS8/ULeE-KFtuZI/AAAAAAAAAGo/TeiMNMiSDzk/s320/LOGO.JPG" />

顯示結果:




圖片網址只的是將圖片上傳至網路伺服器中,若自己沒有伺服器,則可以使用線上有提供的相簿網路服務或是免費空間(如:Google相簿等)。上面的範例一是採取最簡單的設定方式,另外也有其他相關函式可以設定如:長度、寬度等其他設定項目。

width:寬度設定。
height:長度設定。
border:邊框設定。
alt:圖片文字說明。
hspace:水平(左右)間距。
vspace:垂直(上下)間距。
align:對齊方式。

而對齊方式又有分為:

left : 圖片在文字左方。
right : 圖片在文字右方。
top : 對齊整行最頂端。
texttop : 對齊文字部份最頂端。
middle : 對齊文字中間。
absmiddle : 物件中間線對齊整列中間線。
baseline : 對齊文字底線排列(預設模式)。
absbottom : 對齊整行最底端排列。




範例二:設定長度400、寬度150、加上圖片文字、邊框5。

<img border="5" height="150" width="400" alt="大明小站LOGO"src="http://4.bp.blogspot.com/-iAEw-W-RkS8/ULeE-KFtuZI/AAAAAAAAAGo/TeiMNMiSDzk/s320/LOGO.JPG" />


顯示結果:

大明小站LOGO

Related Posts Plugin for WordPress, Blogger...
无觅相关文章插件,快速提升流量
友荐云推荐




沒有留言:

張貼留言