adsense

顯示具有 HTML教學 標籤的文章。 顯示所有文章
顯示具有 HTML教學 標籤的文章。 顯示所有文章

HTML教學(17)如何設定圖片的位置

圖片在部落格裡斬了很重要的一環,圖片可以讓你一目了然, 賞心悅目,增加你部落格的可看性。

圖片要如何與文字結合呢?這就關系到位置問題了。

我們可以利用【img】標籤里的【align】來設定圖片的位置在左邊,右邊或中間。

下列為上樹葉圖的程式碼。

<img src=
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdwxcN7MIYj0gXbqILb07a2gW6AbOBH6FZrjfU9F13ROMDLe7hynwj5m-yH-BeBBPO8_dIy_DZrhSEJpf1TtowR32MhPBNw2DfUWjnzSw7TdbteLnv-onMSm4pZqDEl4mZY5ZiVrcC83k/" align="left"
height="32" width="32" vspace="20"
hspace="20" />

這里我們要注意的是【align】,"left"=左邊,"right"=右邊,"center"=中間

【vspace="20"】- 在圖片的上下與文字的距離為20

【hspace="20"】- 在圖片的左右與文字的距離為20

【img src】- 圖片的網址

HTML 教學(16)- 如何制作點小圖看大圖網頁

如果你要在一個網頁顯示多個圖片的話,利用點小圖看大圖的方法會讓你的網頁下載速度加快。

請點按下圖,就會在另一視窗顯示大圖。

penguin-01.jpg

penguin-02.jpg penguin-03.jpg

其實要制作點小圖看大圖的方法并不難。

1. 首先我們利用<img>標籤顯示小圖。

   <body>
   <img src="penguin-01.jpg" width="200" height="200">
   </body>


Scr_ Oct. 28 14.5401.jpg

2. 接下來,在加入<a>標籤。

   <body>
   <a><img src="penguin-01.jpg" width="90"
   height="62"></a>
   </body>
   

然后再放入大圖的網址就完成了。

   <body>
   <a href="penguin-big-01.jpg">
          <img src="penguin-01.jpg" width="200" height="200"></a>
   </body>
   

Scr_ Oct. 28 15.0502.jpg

3. 如果你不喜歡那藍色的框的話,你也可以把它去掉。

   <body>
   <a href="penguin-big-01.jpg">
          <img src="penguin-01.jpg" width="200" height="200" border="0"></a>
   </body>
   

制作小圖的方法可參考:

3款制作 thumbnail 縮備圖的免費工具


HTML 教學(15)- 何時用jpg格式何時用gif格式呢?

在網頁顯示圖片是我們常常要做的,圖片的體積往往影響網頁的下載速度,一個加速網頁下載的方法是利用我們下一課要講的點小圖看大圖的功能。
製作小圖的方法可參考我之前寫的3款製作thumbnail縮備圖的免費工具一文。
我們在網頁上顯示的圖片格式大多數是gif或是jpg。因為這兩個格式的體積比較小,但是何時用gif,何時用jpg格式呢?
如果你的圖片線條及顏色比較簡單的話,選用gif,如果顏色比較複雜的選擇用jpg。

HTML 教學(14)- 檔案下載鏈接

如何讓你的讀者在你的網頁上點按下載檔案呢?

只要把你的檔案鏈接起來就可以了。

<a href="我的告白.txt">請下載我的告白</a> 完整的程式碼如下:

<html>
<head>
<title>我的第一個網頁</title>
</head>
<body>
<a href="我的告白.txt">請下載我的告白</a>
</body>
</html>


請下載我的告白

如果要讓你的鏈接被點按時在另一個視窗打開如何呢?

只要在鏈接裡加入target="_blank" 即可。

<html>
<head>
<title>我的第一個網頁</title>
</head>
<body>
到 <a href="http://fungnyitfen.blogspot.com/" target="_blank">阿宏的海洋去</a>
</body>
</html>

HTML 教學(13)- 電郵鏈接

1.請用notepad開啟一個新檔案。輸入下列代碼。然后把檔案儲存為page13.html

<html>
<head>
<title>我的第一個網頁</title>
</head>
<body>
請電郵給我的 <a href="mailto:123@456.com">電郵地址!</a>
</body>
</html>

Scr Sep. 30 11.0002.jpg

2. 電郵的鏈接與普通的鏈接沒什么分別,只是我們用mailto:再加上電郵地址即可。

HTML 教學(12)- 鏈接

1.請用notepad開啟一個新檔案。輸入下列代碼。然后把檔案儲存為page12.html

我今天是要鏈接到yahoo!奇摩的網頁去。

<html>
<head>
<title>我的第一個網頁</title>
</head>
<body>
我們到Yahoo!奇摩
</body>
</html>

Scr Sep. 24 15.1501.jpg

2. 在yahoo!奇摩的前後插入<a>及</a>(anchor tag-標記標籤)

<html>
<head>
<title>我的第一個網頁</title>
</head>
<body>
我們到 <a>yahoo!奇摩</a>
</body>
</html>

3. 在<a>標籤處插入Yahoo!奇摩的網址(url)即可完成了。

<html>
<head>
<title>我的第一個網頁</title>
</head>
<body>
我們到 <a href="http://tw.yahoo.com/">Yahoo!奇摩</a>
</body>
</html>

Scr Sep. 24 15.2602.jpg

HTML 教學(11)- 插入圖片時width及 height屬性有什么好處

1.請用notepad開啟一個新檔案。輸入下列代碼。然后把檔案儲存為page11.html

<html>
<head>
<title>我的第一個網頁</title>
</head>
<body>
<img src="Kitten-Ducklings.jpg">
</body>
</html>

Scr Sep. 1815.jpg

2. 根據上圖的顯示,沒有設定圖片的尺寸規格(width及 height),游覽器也可以準切的顯示圖片的大小,那么設定圖片的尺寸規格(width及 height)用意何在?

設定圖片的尺寸規格(width及 height)的好處是,當游覽器開啟你的網頁時速度比較快,游覽器會先保留(reserve)足夠的圖片位置,然后先把網頁的其他資料先下載,最后再到會來下載相關圖片,如此就不會妨礙網頁的下載速度了。

3. 插入圖片還有一個值得注意到屬性是alt,alt是讓你設定有關圖片的描述,萬一有不能顯示圖片的游覽器時,你的讀者還可看到圖片的描述。

<html>
<head>
<title>我的第一個網頁</title>
</head>
<body>
<img src="Kitten-Ducklings.jpg" width="500" height="375" alt="我的貓咪與小鴨子">
</body>
</html>

HTML 教學(10)- 如何插入圖片

1. 首先把你的滑鼠移到下圖,點按滑鼠右鍵,選擇『Save Image as』或『Save picture as』,把這個圖片儲存到你電腦的文件夾裡(與你的所有html文件同一個文件夾)。

把文件名稱改為 "Kitten-Ducklings.jpg"

Kitten-Ducklings.jpg

2.接著請用notepad開啟一個新檔案。輸入下列代碼。然后把檔案儲存為page10.html

<html>
<head>
<title>我的第一個網頁</title>
</head>
<body>
<img src="Kitten-Ducklings.jpg" width="500" height="375">
</body>
</html>

3. 我們是利用<img>標籤來插入圖片的,src=圖片的所在地,width=圖片的寬度,heigth=是圖片的高度。

Scr Sep. 1815.jpg

4. 我們怎么得知圖片的的寬與高度你,我是利用 Irfan View 得知的。在左下角滑鼠指標出可看出圖片的大小體積。

Scr Sep. 1816.jpg

5. 你可在此下載 Irfan View

6. 另一個插入圖片的方法是不須下載圖片,直接連接到網址即可,請把滑鼠移到本頁最上面的圖片出,點按滑鼠右鍵,如果你的游覽器是firefox的話,選擇『Copy Image Location』;Google Chrome 選擇『Copy Image URL』;Internet Explorer 好像沒有這個功能。然后把以上代碼改成如下。

<html>
<head>
<title>我的第一個網頁</title>
</head>
<body>
<img src="http://img187.imageshack.us/img187/1016/kittenducklingsuo4.jpg">
</body>
</html>

HTML 教學(9)- 如何插入空白

1.首先請用notepad開啟一個新檔案。輸入下列代碼。然后把檔案儲存為page9.html

<html>
<head>
<title>我的第一個網頁</title>
</head>
大 家 好
</body>
</html>

2. 從下圖我們可以看到游覽器只認識一個空白位。

ScreenHunter_ Sep. 12 10.2701.jpg

3.在HTML我們以 "&nbsp;" 來代表空白。請把代碼更改如下。

<html>
<head>
<title>我的第一個網頁</title>
</head>
大&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
家&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
好&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

</body>
</html>

ScreenHunter_ Sep. 12 10.3802.jpg

4. & 告訴游覽器這是特殊符號的開始,是特殊符號的結束。

以下的幾個特殊符號常常會用到:

&nbsp; non-breaking space 無間斷的空白

&lt; < less-than symbol 小于符號

&gt; > greater-than symbol 大于符號

&amp; & ampersand 和號

&quot; " quotation mark 引號

HTML 教學(8)- <p></p>段落標籤的使用方法

上一篇我們學習了<br>分行標籤的用法,今天我們來學習<p></p>段落標籤的使用方法。

1.首先請用notepad開啟一個新檔案。輸入下列代碼。然后把檔案儲存為page8.html

<html>
<head>
<title>我的第一個網頁</title>
</head>
<body>
站在大街上,望著川流不息的人群,你能知道誰是誰的情人嗎?我想,只有在咖

啡館那熹微的燈光下,只有在酒吧那幽微的音樂中,或是在影劇院那昏暗的包廂

裡,你才能一眼看出誰是誰的情人來的。因此,在日常生活中,情人是隱約的,

是迷離的,是朦朧的,是混沌不清的。情人是影子,是夢幻,是雲霧,是虹霓,

是附體的魔,是攝魂的妖,是叫人茶飯無心徹夜難眠的那樣一些綿長又綿長的日

子……

情人,不是老婆,也不是老公,因此,情人總是超越著家庭,總是鄙夷著綱常,

總是唾棄著倫理。情人只為情而存在,而纏綿,而牽腸掛肚,而朝思暮想,而難

解難分。離開了情,天下所有的情人,統統會被抽空靈魂。沒有情的情人,哪裡

還是情人?只能是陌生的路人,只能是麻木的動物。
</body>
</html>

Mezer_09-05_10-18-29.jpg

2. 從上圖我們可以看到,文章是沒有分段落的。把上列代碼更改如下即可分段了。

<html>
<head>
<title>我的第一個網頁</title>
</head>
<body>
<p>
站在大街上,望著川流不息的人群,你能知道誰是誰的情人嗎?我想,只有在咖啡館那熹微的燈光下,只有在酒吧那幽微的音樂中,或是在影劇院那昏暗的包廂裡,你才能一眼看出誰是誰的情人來的。因此,在日常生活中,情人是隱約的,是迷離的,是朦朧的,是混沌不清的。情人是影子,是夢幻,是雲霧,是虹霓,是附體的魔,是攝魂的妖,是叫人茶飯無心徹夜難眠的那樣一些綿長又綿長的日子……
</p>
<p>
情人,不是老婆,也不是老公,因此,情人總是超越著家庭,總是鄙夷著綱常,總是唾棄著倫理。情人只為情而存在,而纏綿,而牽腸掛肚,而朝思暮想,而難解難分。離開了情,天下所有的情人,統統會被抽空靈魂。沒有情的情人,哪裡還是情人?只能是陌生的路人,只能是麻木的動物。
</p>
</body>
</html>

Mezer_09-05_10-22-41.jpg

3. <p>標籤的另一個用處是排列定位。

<html>
<head>
<title>我的第一個網頁</title>
</head>
<body>
<p align="left">大家好,</p>
<p align="center">今天有什么好介紹嗎?</p>
<p align="right">歡迎你與我們分享。</p>

<p align="left">
大家好,<br>
今天有什么好介紹嗎?<br>
歡迎你與我們分享。</p>

<p align="center">
大家好,<br>
今天有什么好介紹嗎?<br>
歡迎你與我們分享。</p>

<p align="right">
大家好,<br>
今天有什么好介紹嗎?<br>
歡迎你與我們分享。</p>
</body>
</html>

resized_Mezer_09-05_10-40-23.jpg

上一篇

HTML 教學(7)- 如何利用分行標籤<br>來顯示下一行

1.首先請用notepad開啟一個新檔案。輸入下列代碼。然后把檔案儲存為page7.html

<html>
<head>
<title>我的第一個網頁</title>
</head>
<body>
大家好,
今天有什么好介紹嗎?
歡迎你與我們分享。
</body>
</html>

Mezer_09-03_09-49-44.jpg

2. 哎呀!你這個游覽器怎么啦!明明是三行的,為什么變成一行了?

原來游覽器是不會排版的,除非你告訴它如何排。不然它就把你的內容一條龍似的顯示出來。

我們可以用<br>標籤來告訴游覽器顯示下一行。

<html>
<head>
<title>我的第一個網頁</title>
</head>
<body>
大家好,<br>
今天有什么好介紹嗎?<br>
歡迎你與我們分享。<br>
</body>
</html>

Mezer_09-03_09-58-26.jpg

3. 哈哈!果然可以哦。

4. 可以用<br>來插入一空行嗎? 當然可以了。

<html>
<head>
<title>我的第一個網頁</title>
</head>
<body>
大家好,<br>
<br>
今天有什么好介紹嗎?<br>
<br>
歡迎你與我們分享。<br>
</body>
</html>

Mezer_09-03_10-02-10.jpg

上一篇

下一篇

HTML 教學(6)- 如何利用標題標籤<h></h>來顯示標題

1.首先請用notepad開啟一個新檔案。輸入下列代碼。然后把檔案儲存為page6.html

<html>
<head>
<title>我的第一個網頁</title>
</head>
<body
<h1>大家好</h1>
<h2>大家好</h2>
<h3>大家好</h3>
<h4>大家好</h4>
<h5>大家好</h5>
<h6>大家好</h6>
</body>
</html>

Mezer_09-01_09-48-57.jpg

<hn></hn> 標籤的主要功能是把標示的文字以粗黑的方式顯示在網頁中。

它共有六個層次,1為最大,6為最小。

在<hn>中較為常用的屬性為 align,此屬性用以控制標題的對齊方式,其語法如下:

align="left" 或

align="center" 或

align="right"

left=向左對齊

center=向中對齊

right=向右對齊

請把上述代碼更改如下:

<html>
<head>
<title>我的第一個網頁</title>
</head>
<body
<h1 align="left">大家好</h1>
<h2 align="center">大家好</h2>
<h3 align="right">大家好</h3>
<h4>大家好</h4>
<h5>大家好</h5>
<h6>大家好</h6>
</body>
</html>

resized_Mezer_09-01_10-07-23.jpg

上一篇

下一篇

HTML 教學(5)- 如何利用<big>及<small>標籤來控制文字的格式

1.首先請用notepad開啟一個新檔案。輸入下列代碼。然后把檔案儲存為page5.html

<html>
<head>
<title>我的第一個網頁</title>
</head>
<body
<big>大</big>家<small>好</small>
</body>
</html>

Mezer_08-28_10-40-53.jpg

<big></big> = 字型大

<small></small> = 字型小

上一篇

下一篇

HTML 教學(4)- 如何利用<font>標籤來控制文字的格式

1.首先請用notepad開啟一個新檔案。輸入下列代碼。然后把檔案儲存為page4.html

<html>
<head>
<title>我的第一個網頁</title>
</head>
<body
<font face="細明體" size="6" color="blue">大家好</font>
</body>
</html>

Mezer_08-25_10-21-54.jpg

<font> = 標籤(tag)

face = 字型屬性

size = 文字大小屬性

color = 文字顏色屬性

屬性 = attribute

注意:

屬性(attribute)必須包含在標籤(tag)裡面。

屬性的數值必須在引號(quotes)內。

引號(quotes)=""

上一篇

下一篇

HTML 教學(3)

1.首先請用notepad開啟一個新檔案。輸入下列代碼。然后把檔案儲存為page3.html

<html>
<head>
<title>我的第一個網頁</title>
</head>
<body>
大家好
</body>
</html>

html02.jpg

2. 我們可以把內容的字體加粗。

<html>
<head>
<title>我的第一個網頁</title>
</head>
<body>
大家<b></b>
</body>
</html>

ScreenHunter_01 Aug. 23 15.33.jpg

<b></b>是把字體加粗的tag

3. 我們也可以把字體變成斜的。

<html>
<head>
<title>我的第一個網頁</title>
</head>
<body>
<i></i><b>好</b>
</body>
</html>

ScreenHunter_02 Aug. 23 15.37.jpg

<i></i> 是吧字體變斜的tag

4. 當然我們也可以把字體下面劃線。

<html>
<head>
<title>我的第一個網頁</title>
</head>
<body>
<u></u><i>家</i><b>好</b>
</body>
</html>

ScreenHunter_03 Aug. 23 15.42.jpg

5. 可以把字體加粗有變斜嗎?可以的。

<html>
<head>
<title>我的第一個網頁</title>
</head>
<body>
大家<i><b></b></i>
</body>
</html>

ScreenHunter_04 Aug. 23 15.44.jpg

上一篇

下一篇

HTML 教學(2)

上一篇我們學習了每一個HTML文件必備的4對TAG:

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

今天我們來給他添加一點顏色。

【首先我們來更改他的背景顏色。】

1. 啟動notepad,打開『page1.html』,加入下列的紅色代碼。

<html>
<head>
<title>我的第一個網頁</title>
</head>
<body bgcolor="#ccffcc">
大家好
</body>
</html>

修改后點按『File』->『Save』存檔。

雙點擊page1.html, 背景顏色已變成綠色了。

html03.jpg

『#ccffcc 』是綠色的代碼(color code )

點按這里下載color code

上一篇

下一篇

HTML 教學(1)

1. 點按『start』-》『All Programs』-》『Accessories』-》『Notepad』打開記事本。

2.輸入下列代碼》

<html>
<head>
<title>我的第一個網頁</title>
</head>
<body>
大家好
</body>
</html>

3. 點按『File』->『Save as』-『My Computer』->『Local Disk (c:)』->點按 (New folder),然后把文件夾命名為 HTML Tutorial

把『File Name』輸入為 page1.html
『Save as type』選為『All Files』
『Encoding』選為『UTF-8』

最后點按『Save』存檔即可。

html01.jpg

現在試試看你的第一個網頁。

1. 點按『start』-》『My Computer』-》『Local Disk (c:)』-》『HTML Tutorial』-》雙點擊『page1.html』

這就是你的第一個網頁了。

html02.jpg

-------------------------------------------------------

HTML code 分析:

<html>
</html>


以上的兩個代碼叫做『tag』。它們都是一對的,一個是『starting tag開始』,在『starting tag』的前面加一個 / 就是『closing tag關閉』了。
網頁游覽器就是靠它們來確認某一文件為HTML文件。

-----------------------------------------------------------------------------

<html>
<head>
</head>
</html>


每一個HTML文件必須要有一對head tags。

------------------------------------------

<html>
<head>
<title>我的第一個網頁</title>
</head>
<body>
大家好
</body>
</html>


title tag - 網頁的主題
body tag - 網頁的內容

下一篇