| 參訪目的地/連結網址 | 參訪目的地/連結網址 |
文居士學佛網誌
這是我個人學佛園地。 |
其他 |
手機APP教學
我個人手機APP教學。 |
其他 |
2017年12月26日 星期二
2017年12月11日 星期一
六、下拉選單
六、表單下拉選單 select option
(一)HTML 表單有項功能爲下拉選單：
即 select option 元素，像是網站提供給會員註冊或報名的表單，常常可以見到讓網友下拉選擇生日、居住縣市區，或是線上購物時，選購商品的規格，都可以使用 select option 來設計，優點是選項可以很多，而且可以節省表單版面空間。每一組 select option 下拉選製作的都是單選，若要製作復選功能，通常會採用核取方塊
checkbox。
(二)下拉選單
select option 基本語法
<select
name="選單名稱"><option value="選項值"></option></select>
標準的下拉選單是由
<select> 標籤開始，到 </select> 結束，中間的 <option> 則是每個選項，可以很多組，用 value 來判斷網友所選擇的項目，每個 option 的 value 都應該不同才有意義。
(三)下拉選單
select option 範例
<form>
<select
name="請選擇">
<option
value="Taipei">台北</option>
<option
value="Taoyuan">桃園</option>
<option
value="Hsinchu">新竹</option>
<option
value="Miaoli">苗栗</option>
</select>
</form>
上面範例的下拉選單一個名稱叫做「請選擇」，裡面共有三個選擇，透過 value 判斷網友所選擇的是那個選項，當網友選擇好並送出表單，後端的程式就可以接收此結果。若要呈現當網頁一開起，預設選擇好某個選項，可以在其中一個開頭的 <option> 增加 selected 參數，寫法像這樣 <option value="" selected> 即可，每組下拉選單只可以用一個預設選項。
2017年12月10日 星期日
五、網頁跑馬燈
五、網頁跑馬燈語法教學 HTML marquee 程式設計
(一) 兩種不同的 HTML marquee 跑馬燈設計
1.基本款式（要跑的文字會依瀏覽器預設方向跑動）
<marquee>這裡放要跑的文字</marquee>
2.進階款式（參數可以設定要跑的方向與速度）
<marquee 這裡放參數設定>這裡放要跑的文字</marquee>
(二) HTML
marquee 跑馬燈可用的參數如下
1. 方向設定：direction="參數值"；可設定 up（向上）、dun（向下）、left（向左）、right（向右）。
2. 對齊設定：align="參數值"；可設定 top（向上對齊）、midden（垂直至中）、botton（向下對齊）。
3. 速度設定：scrollamount="參數值" ；可設定為數字，通常設定 1~10 的範圍，數字越大跑得越快。
4. 長度設定：height="參數值"；數字，自行設定。
5. 寬度設定：width="參數值"；數字，自行設定。
6. 行為設定：behavior="參數值"；可設定 alternate（來回跑）、slide（跑入後停止）。
7. 背景顏色：bgcolor="參數值"；可設定為顏色的色碼，不設定則沒有顏色。
(三) HTML marquee 跑馬燈範例：
<marquee
direction="right" height="30" scrollamount="5"
behavior="alternate">** 歡迎光臨 **</marquee>
顯示結果：參考右上方。
2017年12月9日 星期六
img 圖片標籤
四、HTML img 圖片標籤：
(一)HTML img 圖片標籤用來在網頁上插入圖片，增加網頁的豐富程度，標準的 HTML
img 圖片標籤不需要像其他標籤，有開始標籤與結尾標籤，而是可以為一個獨立個體，很容易的將圖片插入到要顯示的地方，HTML img 圖片標籤還包含許多不同的參數，用來替圖片做些設計，例如 border 可以替圖片增加邊框、width 可以現置圖片的顯示寬度、height 可以限制圖片的顯示高度 ... 等。
(二)語法：
<img
src="要插入的圖片 URL" alt="圖片替代文字" title="要顯示的文字"
border="圖片邊框">
基本語法中除了 src 必須之外，其他項目都是選擇項目，其中「要插入的圖片 URL」就是要顯示的圖片網址，若不需要替圖片做任何的設計，也不需要做任何的文字標示，只要寫
『<img src="圖片網址">』
這樣，就可以把一張圖片插入到網頁中，其實寫部落格文章時，插入圖片至文章中，用的也一樣是 img 標籤，以下為常用到的一些 HTML img 參數。
(三)HTML
img 圖片參數
|
參數
|
用法說明
|
|
src
|
圖片網址，必要項目。
|
|
border
|
圖片邊框，例如 border="0" 代表邊框為 0。
|
|
alt
|
圖片替代文字，當圖片顯示失效，則顯示 alt 文字。
|
|
title
|
圖片文字標示，當滑鼠移經圖片，自動顯示的文字。
|
|
width
|
圖片寬度，例如 width="120px" 代表寬度限制在 120px。
|
|
height
|
圖片高度，例如 height="100px" 代表高度限制在 100px。
|
(四)HTML <img> 插入圖片實做範例
<img src="圖片001.gif" alt="替代文字一" title="範例圖片一">
<img src="圖片002.gif" alt="替代文字二" title="範例圖片二" width="100px" height="100px">
<img
src="upload/20131017185230.gif" alt="替代文字三"
title="範例圖片三" width="100px;">
(五)為圖片加上超連結
<a href="http://www.wibibi.com"><img src="範例圖片" border="0"
title="Wibibi 網頁設計教學百科"></a>
要替圖片加上超連結，就必須使用到 HTML 超連結語法，一般來說替圖片加上超連結都會同時使用
border="0" 讓邊框隱藏，否則在部分瀏覽器如 IE，可能會出現醜醜的邊框。
2017年12月1日 星期五
第一個 HTML
三、撰寫第一個 HTML 網頁範例：
(一)將下列程式碼 Copy 至記事本內。
(二)在記事本中左上角點選「檔案」→「儲存檔案」→ 輸入檔名(中英皆可)，副檔名要用「.htm」或「.html」，例如 myweb1.htm 或 myweb1.html
(三)最好在 C 槽之外存檔(例D：E：或F：)
(四)到存放 myweb1.htm 檔名上按右鍵，選擇「開啟檔案」→選擇以「Internet Explorer」或其他例如 Chrome、Firefox 開啟。
範例1
<html>
<head>
<title>我的第一個網頁</title>
</head>
<body>歡迎光臨</body>
</html>
二、基本架構
二、HTML基本的網頁架構
<html>
<head>
<title>聖誕快樂</title>
</head>
<body>
網頁內容
</body>
</html>
標籤解說：
<html></html>
此標籤是置於整個文件的開始(<html>)和結束(</html>)之處，以供瀏覽器識別此文件為合法的文件。
<head></head>
此標籤是用以表示標頭資訊的開始與結束，在<head>與</head>之間可加入其它標籤<title></title>等。
<title></title>
此標籤中的就是此網頁的標題，也就是您瀏覽器最左上面的標題，若沒設則只會顯示成此網頁所在的網址。
<body></body>
此標籤中所寫的內容即會顯示於網頁裡面，至於裡面要寫些什麼、可以寫些什麼，往後的單元再介紹。
一、何謂HTML?
一、何謂HTML?
HTML就是超文件標示語言（HyperText Markup Language，簡稱：HTML）是一種用於建立網頁的標準標示語言。HTML是一種基礎技術，常與CSS、JavaScript一起被眾多網站用於設計令人賞心悅目的網頁、網頁應用程式以及行動應用程式的使用者介面。
網頁瀏覽器可以讀取HTML檔案，並將其彩現成視覺化網頁。HTML描述了一個網站的結構語意隨著線索的呈現，使之成為一種標示語言而非程式語言。
HTML元素是構建網站的基石。HTML允許嵌入圖像與物件，並且可以用於建立互動式表單，它被用來結構化資訊——例如標題、段落和列表等等，也可用來在一定程度上描述文件的外觀和語意。
HTML的語言形式為尖括弧(< >)包圍的HTML元素（如<html>），瀏覽器使用HTML標籤和指令碼來詮釋網頁內容，但不會將它們顯示在頁面上。
HTML可以嵌入如JavaScript的手稿語言，它們會影響HTML網頁的行為。網頁瀏覽器也可以參照層疊樣式表（CSS）來定義文字和其它元素的外觀與布局。
目前國外HTML和CSS標準的組織全球資訊網協會（W3C）建議使用CSS替代一些HTML功能較為彈性或可讀性。
訂閱：
文章 (Atom)