html语法与元素-土法制作法费下载

HTML語法與元素-土法製作法,HTML語法與元素,HTML就是 超文件標記語言 HTML語法介紹HTML元素CSS Cascaded Style sheets,大綱,名詞與觀念文字編排列表有序，無序，定義表格表格圖片圖或背景,重要觀念,Intranet，區域網路(Local Net)，網際網路(internet)請參考網路觀念與架構網頁：Documents on Web任何網頁都是純文字檔經過瀏覽器處裡之後 才有 圖片、聲音、影像、超連結網站：Host, Web Site, Server，A Computer running some server programs至少一台電腦執行(跑RUN)網路服務程式 SERVERMAIL SERVER, WEB SERVER, BBS SERVER, FTP SERVER,特別注意事項,1.電腦系統包含軟體系統與硬體系統沒有思維能力，只有邏輯2.所以任何的語法指令，都必須明確每個字都是必要而且是正確的3.電腦語法的特性在於給電腦明確的指令構詞構句要符合一定的規定,名詞解釋(1/4),Hyper Text：超文件。超文件是指在文件中包含有鏈結到其他文件的能力。其他文件可以是存放於 (可以擷取到的地方)本機區域網路網際網路使用者只需經由滑鼠點取，便可鏈結到其他相關的文件。以HTML 編輯的超文件具備展現多媒體的能力文件還可加入圖片、聲音、及動畫等效果。,名詞解釋(2/4),WWW：World Wide Web全球資訊網。HomePage：首頁以HTML寫成，網站的第一個被開啟的網頁。可以用瀏覽器看到的超文件。瀏覽器【Browser】看WWW上Homepage的工具程式。解讀網頁上HTML並按其指示執行顯示網頁的用戶端程式。：Mosaic【第一代】：Netscape【第二代】【後現代】：Internet Explorer4. Firefox5. Google_chrome6. Opera7. Safari,名詞解釋(3/4),URL：Uniform Resource Locator。在WWW的世界裡，統一使用URL來說明存取方式與存取位址。URL格式第一個部份用來指定存取方式，第二個部份用來指定位址，兩者之間以：符號隔開。一般常見的URL格式.tw.twtelnet:/.tw/mailto:.tw,名詞解釋(4/4),HTML：Hyper Text Markup Language。製作Homepage的語言，是一種標記語言只使用純文字。所以必須在文件中做標記(tag)此語言用一定的元素與格式指示網頁伺服器與瀏覽器，如何顯示設計者設計的網頁。 Tag Language：標記語言。製作HTML文件必須加入標記，讓瀏覽器知道該如何處理及呈現原始文件的內容。在HTML語法中，除了少數例外，大都是以開始open，以結束close；其中XX就是HTML的標記。,網站首頁：HOMEPAGE,首頁-網頁排版文字圖片聲音動畫超連結(超鏈結 Hyper link)E-mail影音,HTML網頁基本架構 (1/2), 名稱內容Title讓製作者以簡短的文字表達此一首頁之內容。Title的內容會出現在瀏覽器的頂端的標題欄。若將某個首頁加入我的最愛中的書籤(Bookmark)，則Title內容變成該書籤名稱。,HTML基本架構 (2/2),使用 記事本 (Notepad) 製作，寫完存檔(副檔名改成 htm)範例 台灣文學專題04/26 陳雪 講題：從惡女書到 橋上的孩子 一個小說家的形成。 執行結果。,置中 - 對齊,內容置中 台灣文學專題04/26 陳雪 講題：從惡女書到 橋上的孩子 一個小說家的形成。 執行結果。,各級標題字 (Header 1 6),標題測試 第一級標題正常文字第二級標題正常文字第三級標題正常文字第四級標題正常文字第五級標題正常文字第六級標題正常文字 自動加粗、前後都換行。H後的數字越大，字體反而越小。執行結果。,Font(1/3)- Size and Color,字串字體設定： 大小、顏色、字體風格屬性設定： 關鍵字=“選項”Font測試天上星多月不明 執行結果。,Font Attributes字型屬性,原意是鉛字、聽說將會被取消,Font(1/2)-字體,字串 李魁賢-麻雀 我們在田野追逐陽光 芒草 流泉我們一群來 一群去有時打成一片有時成群散去自自然然 歡歡喜喜我們聲音小卻符合大自然的韻律在工作中愉快的唱歌即使農夫對我們吆喝我們還是辛勤地把種子帶去,Font(2/2)-字型,播種在很偏僻的荒地我們一群來 一群去從不在廟堂棲息也不食磁杯裏的玉米 田野是我們開放的世界我們在此默默工作期待著季節的嬗替執行結果。,瀏覽器缺字體只會顯示成新細明體,換行,指定換行的所在 line break，不必結束 ()地上人多心不平執行結果。,段落,段落文字xxxxxxxxxxxxx. 指示段落起點，會自動與前段文字拉開一段距離(瀏覽器決定，或網頁設計者自行指定) 試：This is a paragraph.指示段落起點，會自動與前段文字拉開一段距離(瀏覽器決定，或網頁設計者自行指定) 執行結果。,PRE, 鸚鵡 - 李魁賢 主人對我好 主人只教我這一句話 主人對我好 我從早到晚學會了這一句話 遇到客人來的時候,我就大聲說 主人對我好 主人高興了 給我好吃好喝 客人也很高興 稱讚我乖巧 主人有時也會 得意地對我說： 有什麼話儘管說。 我還是重複著： 主人對我好 執行結果。,文字xxxxxxxxxxxxx.定義預先 格式化的 文字內容,斜、粗、底線、中線字與上、下標字,標準字斜體字標準字 標準字粗體字標準字標準字底線字標準字標準字中線字標準字標準上標標準下標標準 執行結果。,列表 List UL, OL, DL,無序：，只有項目，沒有編號有序 ：，按順序編號階層：列表內含列表，不可交錯定義列表： 沒有編號，沒有項目，,無序列表(1/2),標題 第一項第二項第三項範例電腦課上課規定不睡覺不吵鬧不走動 不唱歌執行結果。,無序列表(2/2 換項目記號),電腦課上課規定不睡覺不吵鬧不走動 不唱歌電腦課上課規定不睡覺不走動不吵鬧執行結果。,有序列表 (1/2),標題 第一項第二項第三項範例電腦課上課規定不睡覺不走動不唱歌執行結果。,有序列表 (2/2 換順序號碼與格式),電腦課上課規定不睡覺不走動不唱歌 執行結果。 電腦課上課規定上課不睡覺睡覺不打呼打呼不流口水執行結果。,階層式列表,母階 第一項子階第一點第二點第二項第三項執行結果。,定義列表,標題第一個專有名詞定義內容01 定義內容02第二個專有名詞定義內容00 定義內容01.,定義列表,範例交通大學工學院資工系電工系電信系理學院物理系化學系數學系執行結果。,表格架構 Table,表格範例,表格標題列一行一列一行二列二行一列二行二 師大附中高三導師 人數 493班侯蘭蓓 40 498班鄭清文 32 512班李魁賢 37 執行結果。,表格、顏色,Border:邊線寬度Cellspacing: 格子寬度Cellpadding: 格子跟邊線距離 格子內底色 表格的 一列 某列中的一格 若要兩格,表格若要跨兩格,Total span Month Savings Savings for holiday! January $100 $50 February $80 ,超文件 三 種 超連結, 圖、照片 影像、聲音 文件、網頁Email: ,插入圖片 ,執行結果。路徑：圖檔所在的資料夾（或稱為目錄， / 或 為目錄結構記號）URL ：路徑/圖檔檔名需含副檔名、大小寫有差別。,網頁背景圖片, 背景圖只能一張，滑鼠左鍵無法點選。範例：執行結果。,註解,註解 應該要 半形 才對 註解的意思是說：這段文字是給網頁維護的人看的。 因為是給人看的，所以電腦不會去理會該段文字。範例： 註解 執行結果。做為網頁設計的說明，維護方便用。,BLOCKQUOTE, . . . 範例區段引用，用於編排時顯示文章中之引文。 ： 小引文,Life itself is a quotation, quotation is not life.,網頁運作的背後概念,網站伺服器網路服務程式,發出 url 要求,送來 url 所要求的資源,使用者,解讀程式軟體瀏覽器 Microsoft Internet Explorer 或 Firefox, Safari, Opera,Chrome,網頁設計屬服務端一定要考慮使用者端的電腦 瀏覽器功能能否顯示網頁設計所需的格式、效果,特殊符號,在HTML中、 等符號用來當成標記使用，當瀏覽器讀到這些符號時，會自動把它們當成標記。因此要在瀏覽器中顯示這些符號，保持網頁完整性就必須用 ：；來顯示小於符號 ；來顯示符號 範例,符號字元,一些特殊符號的表示可以用 學 這 4 個 字 成功大學 就 可 以 保 證 在 同 一 行, 而 不 會 被 拆 在 不 同 的 兩 行 中. 事 實 上, 我 們 可 利 用 來 達 到 同 樣 的 效 果, 例 如 成 功 大 學.,線段 horizonatal rule,要注意各個選項的各別用意 百分比 標示法絕對執行結果。,超連結 hyper link 超文件的核心,網頁內連結 (文件自身內部)網頁外連結 ,網頁內連結下錨點定錨,在這一份長文件的內容裡跳來跳去，那就得用下錨點(英語 anchor)了，做法如下：先下錨點1. 將預備作為被連結的段落位置設置一個錨點2. 定義一個用來作為連結的名字命名，定錨語法為： some things here 超連結至下錨處-語法為 說明文字,網頁內定錨範例,01 HTML(Hyper Markup Language)簡介.01 HTML(Hyper Markup Language)簡介.回目錄 ! 超連結到 m1，網頁上顯示 回目錄執行結果,網頁外連結,超連結文字輸入名稱 title=“開啟新視窗瀏覽”，加入顯示標題的文字方塊。假如希望點選超鏈結文字後,鏈結到的網頁顯示在新產生的視窗中,只需加上 target=_blank 即可,範例如下:真理大學麻豆校區 真理大學 新視窗執行範例,連結 E-mail地址, .tw信件標題 .tw 信件標題及內容 .tw 寄信給多人,.tw執行結果。範例二,網頁風格：顏色(1/3), Bgcolor : 背景顏色Text : 文字顏色Link : 未參觀過的鏈結顏色Vlink : 已參觀過的鏈結顏色Alink : 滑鼠按下鏈結未放開手之前的顏色,顏色(2/3),顏色的指定有兩種方式。 第一種是利用三原色來表示出所要的顏色。三原色是指紅(Red)、綠(Green)、和藍(Blue)。 指定方式是#。的值可以是到代表紅色光的量。的值可以是到代表綠色光的量。的值可以是到代表藍色光的量。所以：#是紅色。 #是綠色。#是藍色。 #是黑色。#是白色。 #是藍綠。#是紫紅。 #是黃色。,顏色(3/3),第二種是利用顏色的英文名稱 。常用英文名稱:,戲院看板 Marquee (1/2),Marquee也就是大家常說的跑馬燈，其語法如下： . 內容 xxx= 代表選項，可以設定，也可以沒有 xxx=| - 中的 | 代表 或,戲院看板 Marquee (2/2),範例:麻豆!麻豆!麻豆站到了! 要下車的旅客請準備下車! MARQUEE 是 Microsoft Internet Explorer 特有的執行結果。,按鈕型態,輸入要顯示的文字,Frame分割視窗網頁框架,左右分割左邊框架分割大小為20%，右邊框架的大小瀏覽器會自動調整上下分割將上面框架分割大小為20%，下面框架的大小瀏覽器會自動調整 一個星號代表一個單位，將螢幕大小依比例分配給各個窗框。,網頁框架範例,範例：執行結果,框窗實作 ,窗框名:可用於指定超連結顯示之場所,網頁框架範例,看 a.htm 內容：BODY cursor: url(StarCraft.ani); 在 3 號 框 顯示 khai 的網頁南真理的網頁北真理的網頁 ,框架限制,不能直接秀出src=URL“超連結文件的內容 不能放到 body中看例子：執行結果,網頁框架實作 不能直接秀出 超連結文件的內容 不能放到 body中 ,Embed撥放聲音(1/2),聲音檔分為：附檔名為wav，au，mid首頁中加入背景音樂的格式如下： 網頁說明用文字,撥放聲音(2/2),可撥放：.mid , .ra , .ram , .rm 等音效檔。 重複撥放 自訂撥放次數數值 ,type 屬性是在網頁安全中非常重要 , 你可以根據所播放的副檔名 加上其專屬的型別來告訴瀏覽器播放檔案的是什麼東西 ? 避免網頁被綁架。我整理的一些副檔名所對應的型別清單如下副檔名 型別 mp3 audio/mpeg wma application/x-mplayer2 wmv application/x-mplayer2 wav audio/x-wav asf video/x-ms-asf,mid audio/mid rm audio/x-pn-realaudio ra audio/x-pn-realaudio ram audio/x-pn-realaudio avi video/x-msvideo mov video/quicktime mpg video/mpeg mpeg video/mpeg,背景聲音 , 是將音樂加入網頁最普遍使用的方式。在（Internet Explorer 和 Netscape）瀏覽器都接受, 也能在 PC 和 Mac使用。 指令只支持背景聲音而 指令還可設定各種各樣的按鈕，如播放、停止、快速選曲等 。,embed 是 HTML 中的 element (元素) 最常用來崁入音樂、影片在網頁中1. 連結路徑src 屬性是用來連結要播放的檔案 , 是 embed 標籤播放時必需的核心屬性常見副檔名: mp3、wma、wmv、wav、asf、mid、rm、ra、ram、avi、mpg、mpeg、mov2. 尺寸大小分別填上數值後 , 就會改變整個播放器的寬度、高度3. 自動播放autostart 屬性是控制播放器要 自動 or 不自動播放 , 未設定時預設值是 false4. 重複播放loop 屬性是控制播放器要 重複 or 不重複播放 , 未設定時預設值是 false,5. 播放次數loop 屬性的額外控制設定 , 可決定重複播放的次數 (不適用 IE)若要同時支援 IE 的瀏覽器 , 需額外加上專屬的屬性那就是 playcount6. 音量大小volume 屬性可以用來控制音量 , 100% 音量是最大值 , 未設定時預設時只有 50% 的音量7. 隱藏進度拉 Barshowtracker 屬性是控制播放器中的拉 Bar , 未設定時預設值是 true8. 隱藏音量按鈕showaudiocontrols 屬性是控制音量調整的按鈕 , 未設定時預設值是 true9. 隱藏其他按鈕showpositioncontrols 屬性是控制其他調整的按鈕 , 未設定時預設值是 true10. 顯示相關資訊 showstatusbar 屬性是控制其他調整的按鈕 , 未設定時預設值是 false11. 禁止使用右鍵enablecontextmenu 屬性可防人從播放器中按右鍵取得連接網址 , 未設定時預設值是 true,CSS Cascading Style Sheets,放在 之間#id properties: options; .class properties: options; HTML tag properties: options; 或是 inline 或是 另外存檔 xxx.css自由電子報的：,個例子,/Style/Examples/011/firstcss My first styled page body padding-left: 11em; font-family: Georgia, Times New Roman, Times, serif; color: purple; background-color: #d8da3d ul.navbar list-style-type: none; padding: 0; margin: 0; position: absolute; top: 2em; left: 1em; width: 9em h1 font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif ul.navbar li background: white; margin: 0.5em 0; padding: 0.3em; border-right: 1em solid black ul.navbar a text-decoration: none a:link color: blue a:visited color: purple address margin-top: 1em; padding-top: 1em; border-top: thin dotted ,跳頁 meta http-equiv,meta 標籤用於網頁的head與/head中其中的content=“3就是要停留三秒鐘其中的url=jump3.htm“就是要接著顯示jump3.htm。範例：執行結果。,Meta name 內容,1、meta name=Generator content=用以說明生成工具（如Microsoft FrontPage 4.0）等；2、meta name=KEYWords content=向查詢引擎說明你的網頁的關鍵詞；3、meta name=DEscription content=告訴查詢引擎你的網站台的主要內容；4、meta name=Author content=你的姓名告訴查詢引擎你的網站台的製作的作者；5、meta name=Robots content=all|none|index|noindex|follow|nofollow設定為all：檔案將被檢索，且頁面上的連結可以被查詢；設定為none：檔案將不被檢索，且頁面上的連結不可以被查詢；設定為index：檔案將被檢索；設定為follow：頁面上的連結可以被查詢；設定為noindex：檔案將不被檢索，但頁面上的連結可以被查詢；設定為nofollow：檔案將不被檢索，頁面上的連結可以被查詢。,Meta http-equiv內容,meta http-equiv=Content-Type content=text/html;charset=gb_2312-80和 meta http-equiv=“Content-Language” content=“zh-CN”用以說明主頁製作所使用的文字以及語言；又如英文是ISO-8859-1字集，還有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字集meta http-equiv=Expires content=Mon,12 May 2001