9 walker studio-9w個人設計工作室
Google
.網頁設計接案業務
.加入GForce手機娛樂聯盟

.基礎HTML教學
.CSS樣式表教學
.基礎JAVASCRIPT教學
.JAVASCRIPT收集
.自製ASP程式下載
.色彩英文名對照
.16進位色碼對照一
.16進位色碼對照二
.可愛包子動畫圖庫
.MSN表情小圖示下載
.9W2U-1024X768桌布下載

.GForce付費手機遊戲
.免費遊戲房
.免費線上遊戲房
.免費檔案報報
.免費資源報報
.網站漫遊報報
.多國語言字母發音表

因網友留言內容
含成人色情內容
討論區即時停止運作
不便之處敬請見諒
● LOGO交換登錄
● 和我們連絡

 友站及其它連結
刑事警察局網際網路資訊站
591租屋網站
反毒害大聯盟
台灣認養地圖
KTzone日記, 論壇
::S.H.E 青春組織國際後援會::
基礎HTML教學
Hyper Markup Language

01 HTML簡介 10 分割畫面(Frameset)
02 HTML文件的基本架構及指令 11 超鏈結(Hyper Link)
03 製作第一份HTML文件 12 拋錨(Anchor)
04 網頁背景(Background) 13 表單(Form)
05 控制標題字元大小及字型指令 14 跑馬燈Internet Exploer專用
06 使用CSS控制字元屬性 15 文字編排
07 表格的運用(Table) 16 Meta 指令運用
08 清單(List) 17 標註指令列表
09 加入圖片
18 其他

09、加入圖片
加入圖片的簡單語法如下:
<IMG SRC="圖檔位址">說明文字

圖檔位址所代表的是圖檔案的 URL,其 URL 的語法與 HREF 中連結的語法一樣,圖檔格式是 GIF 的話,其副檔名須 是 .gif;是 JPEG 的話,其副檔名須是 .jpg或是 .jpeg

對齊方式如下:
top : 對齊整行最頂端排列。
texttop : 對齊文字部份最頂端排列。
middle : 對齊文字中間排列。
absmiddle : 物件的中間線對齊整列的中間線。
baseline : 對齊文字底線排列,此為預設的對齊方式。
bottom : 對齊文字底線排列,與baseline相同。
absbottom : 對齊整行最底端排列。
left : 圖片在文字左邊。
right : 圖片在文字右邊。

<IMG SRC="cy_ball.gif">這是一個圓球喲

結果:

這是一個圓球喲

我們可加上border的屬性來設定圖片的邊框粗細,例如:
<IMG SRC="cy_ball.gif" border=2>這是一個加了框的圓球喲
結果:
這是一個圓球喲


加上align的屬性則可調整圖片和說明文字的排列方式;
<IMG SRC="cy_ball.gif" align=left>圖片在左,說明文字在右
<IMG SRC="cy_ball.gif" align=right>圖片在右,說明文字在左

結果:
圖片在左,說明文字在右
圖片在右,說明文字在左

若訪客將瀏覽器的顯示圖片選項給關閉,則訪客將看不到圖片內容,此時我們可加上ALT屬性在圖片位置顯示文字說明,如下例子。
<IMG SRC="cy_ball.gif" alt="這是一顆圓球">這是圓球
結果:
這是一顆圓球這是圓球

加上width和height屬性可設定圖檔大小,例如:
<img src="book.gif" border=0 width=282 height=62>
加上了這個屬性可讓瀏灠器先預算出圖片的放置空間大小,而不必等到每張圖片都得從主機傳輸過來後才能排版,如此可以加速顯示速度。
結果:


圖文排列、對齊方式

文字靠下
<IMG SRC="../homepage/graph/xxxxx.jpg" ALIGN="bottom">


文字靠中
<IMG SRC="../homepage/graph/xxxxx.jpg" ALIGN="middle">

文字靠上
<IMG SRC="../homepage/graph/xxxxx.jpg" ALIGN="top">


圖片靠左
<IMG SRC="../homepage/graph/xxxxx.jpg" ALIGN="left">

圖片靠右
<IMG SRC="../homepage/graph/xxxxx.jpg" ALIGN="right">


設定圖文間隔
<IMG SRC="../homepage/graph/xxxxx.jpg" VSPACE="20" HSPACE="50" ALIGN="left">

圖片連結:

<A HREF="http://..........." TARGET="_new"><IMG SRC="圖檔位址">說明文字</A>
<a href="http://www.9w2u.com/" TARGET="_blank"><img src="http://www.9w2u.com/images/Main_01.gif" width="253" height="69" border="0">9W個人設計工作室</a>
顯示結果: 9W個人設計工作室



本站內容屬私人所有 請勿任易轉載 如須轉載 請通知本站
本站所鏈結標題及鍊結內容 皆歸原權利人所有
網站內容如有任何侵權 亦請通知本站刪除 謝謝!

Power by 9 Walker Studio
本站內容屬私人所有 請勿任易轉載 如須轉載請通知本站