网际网路程式设计幻灯片.ppt

HTML教學 Agenda HTML簡介 HTML基本語法 HTML標籤介紹 HTML範例教學 HTML Resource HTML簡介 HTML (Hyper Text Markup Language)中文稱做超文件標示語言，是建構網頁的最基本元素。 HTML文件是像一般文字 格式檔一樣，可用任何文書編輯器(如Notepad，Ultra Edit等軟體)來編輯產生。只不過這文件中的字元或圖片，甚至檔案名稱是由一些富有不同意義的標籤 (tags)所標示。 HTML 檔副檔名必須為 htm 或是 html。 HTML基本語法 HTML 語法是由許多的 Tag、屬性、文字所組成。 Tag 是指令。 屬性是指令的內容。 文字是要呈現的內容。 HTML的標籤通常是成對的，如html/html HTML標籤介紹 html/html標籤 一個網頁最基本的一對標籤 分別放在網頁的最前及最後 ，這一對標籤告知瀏覽器讀取時認得這是一個超文件標籤檔案。 body/body標籤 嵌在html中的一對標籤，要顯示在網頁上的各種文字或圖片全部都置於這一對標籤內。 EX1.html html body 這是我的第一張網頁 body html body/body標籤之屬性 bgcolor：設定背景顏色 background：設定背景圖檔 屬性設定方式： 1.設定背景顏色 body bgcolor=“#CCCCCC” or body bgcolor=“red” 2.設定背景圖檔 body background=“background.gif” EX2.html html body bgcolor=#CCCCCC 設定背景顏色 /body /html 表格 一般在使用Word編輯文件的時候，表格的運用可能並不是非常的重要，但在編輯網頁時，有時為了文字定位的方便以及版面編排的需要，表格適當的運用是非常必要的。 一個表格是以table開始，以/table結尾，表格又分為欄(column)及列(row)，直的稱為table column，橫的稱為table row。 練習(一) 試利用之前所學的HTML標籤製作個人的網頁。 表單(FORM) 表單的製作在HTML語法來說是相當重要的，舉例來說，學校選課系統中所提供輸入選課代碼及送出這些資料都是必須透過表單來完成。 一個表單中可有許多種不同的元件來組成，不同元件有不同的功能，例如可提供輸入資料的text元件，可提供勾選選項的option元件等等。 input標籤中各物件介紹 Text元件 input type=“text” name=“ObjName” value=“ObjValue” size=“20” Password元件 input type=“password” name=“ObjName” value=“ObjValue” size=“20” Radio元件 input type=“radio” name=“ObjName” value=“ObjValue” 通常會由多個相同名稱之Radio元件來提供單選功能 Checkbox元件 input type=“checkbox” name=“ObjName” value=“ObjValue” 通常會由多個相同名稱之Radio元件來提供複選功能 Button元件 input type=“button” name=“ObjName” value=“ObjValue” Reset元件 input type=“button” name=“ObjName” value=“ObjValue” 可將表單中所有的資料全部清除。 Submit元件 input type=“submit” name=“ObjName” value=“ObjValue” 可將表單中的資料送出。 Hidden元件 input type=“hidden” name=“ObjName” value=“ObjValue” 隱藏式的元件，通常為儲存資料時使用。 其他元件介紹 textarea/textarea標籤與其屬性 與text元件相同可供輸入，另外text元件僅提供輸入一行文字，而textarea元件則提供多行輸入的功能，常用於留言版中。 cols屬性：設定textarea元件的行數。 rows屬性：設定textarea元件的列數。 name屬性：設定textarea元件的名稱。 使用方式： textarea name=“ObjName” cols=“40” rows=“3”/textarea 另外，在textarea與/textarea中可輸入文字當成此元件的預設值，相當於設定其他元件中value的屬性。 select/