HTML语法与元素-土法制作法.ppt

HTML語法與元素-土法製作法,HTML語法與元素,HTML就是超文件標記語言HTML語法介紹HTML元素CSSCascadedStylesheets,大綱,名詞與觀念文字編排列表有序，無序，定義表格表格圖片圖或背景,重要觀念,Intranet，區域網路(LocalNet)，網際網路(internet)請參考網路觀念與架構網頁：DocumentsonWeb任何網頁都是純文字檔經過瀏覽器處裡之後才有圖片、聲音、影像、超連結網站：Host,WebSite,Server，AComputerrunningsomeserverprograms至少一台電腦執行(跑RUN)網路服務程式SERVERMAILSERVER,WEBSERVER,BBSSERVER,FTPSERVER,特別注意事項,1.電腦系統包含軟體系統與硬體系統沒有思維能力，只有邏輯2.所以任何的語法指令，都必須明確每個字都是必要而且是正確的3.電腦語法的特性在於給電腦明確的指令構詞構句要符合一定的規定,名詞解釋(1/4),HyperText：超文件。超文件是指在文件中包含有鏈結到其他文件的能力。其他文件可以是存放於(可以擷取到的地方)本機區域網路網際網路使用者只需經由滑鼠點取，便可鏈結到其他相關的文件。以HTML編輯的超文件具備展現多媒體的能力文件還可加入圖片、聲音、及動畫等效果。,名詞解釋(2/4),WWW：WorldWideWeb全球資訊網。HomePage：首頁以HTML寫成，網站的第一個被開啟的網頁。可以用瀏覽器看到的超文件。瀏覽器【Browser】看WWW上Homepage的工具程式。解讀網頁上HTML並按其指示執行顯示網頁的用戶端程式。：Mosaic【第一代】：Netscape【第二代】【後現代】：InternetExplorer4.Firefox5.Google_chrome6.Opera7.Safari,名詞解釋(3/4),URL：UniformResourceLocator。在WWW的世界裡，統一使用URL來說明存取方式與存取位址。URL格式第一個部份用來指定存取方式，第二個部份用來指定位址，兩者之間以：符號隔開。一般常見的URL格式http:/khai.mtwww.mt.au.edu.twftp:/ftp.nctu.edu.twtelnet:/bbs.csie.nctu.edu.tw/mailto:khaimail.au.edu.tw,名詞解釋(4/4),HTML：HyperTextMarkupLanguage。製作Homepage的語言，是一種標記語言只使用純文字。所以必須在文件中做標記(tag)此語言用一定的元素與格式指示網頁伺服器與瀏覽器，如何顯示設計者設計的網頁。TagLanguage：標記語言。製作HTML文件必須加入標記，讓瀏覽器知道該如何處理及呈現原始文件的內容。在HTML語法中，除了少數例外，大都是以開始open，以結束close；其中XX就是HTML的標記。,網站首頁：HOMEPAGE,首頁-網頁排版文字圖片聲音動畫超連結(超鏈結Hyperlink)E-mail影音,HTML網頁基本架構(1/2),名稱內容Title讓製作者以簡短的文字表達此一首頁之內容。Title的內容會出現在瀏覽器的頂端的標題欄。若將某個首頁加入我的最愛中的書籤(Bookmark)，則Title內容變成該書籤名稱。,HTML基本架構(2/2),使用記事本(Notepad)製作，寫完存檔(副檔名改成htm)範例台灣文學專題04/26陳雪講題：從惡女書到橋上的孩子一個小說家的形成。執行結果。,置中-對齊,內容置中台灣文學專題04/26陳雪講題：從惡女書到橋上的孩子一個小說家的形成。執行結果。,各級標題字(Header16),標題測試第一級標題正常文字第二級標題正常文字第三級標題正常文字第四級標題正常文字第五級標題正常文字第六級標題正常文字自動加粗、前後都換行。H後的數字越大，字體反而越小。執行結果。,Font(1/3)-SizeandColor,字串字體設定：大小、顏色、字體風格屬性設定：關鍵字=“選項”Font測試天上星多月不明執行結果。,FontAttributes字型屬性,原意是鉛字、聽說將會被取消,Font(1/2)-字體,字串李魁賢-麻雀我們在田野追逐陽光芒草流泉我們一群來一群去有時打成一片有時成群散去自自然然歡歡喜喜我們聲音小卻符合大自然的韻律在工作中愉快的唱歌即使農夫對我們吆喝我們還是辛勤地把種子帶去,Font(2/2)-字型,播種在很偏僻的荒地我們一群來一群去從不在廟堂棲息也不食磁杯裏的玉米田野是我們開放的世界我們在此默默工作期待著季節的嬗替執行結果。,瀏覽器缺字體只會顯示成新細明體,換行,指定換行的所在linebreak，不必結束()地上人多心不平執行結果。,段落,段落文字xxxxxxxxxxxxx.指示段落起點，會自動與前段文字拉開一段距離(瀏覽器決定，或網頁設計者自行指定)試：Thisisaparagraph.指示段落起點，會自動與前段文字拉開一段距離(瀏覽器決定，或網頁設計者自行指定)執行結果。,PRE,鸚鵡-李魁賢主人對我好主人只教我這一句話主人對我好我從早到晚學會了這一句話遇到客人來的時候,我就大聲說主人對我好主人高興了給我好吃好喝客人也很高興稱讚我乖巧主人有時也會得意地對我說：有什麼話儘管說。我還是重複著：主人對我好執行結果。,文字xxxxxxxxxxxxx.定義預先格式化的文字內容,斜、粗、底線、中線字與上、下標字,標準字斜體字標準字標準字粗體字標準字標準字底線字標準字標準字中線字標準字標準上標標準下標標準執行結果。,列表ListUL,OL,DL,無序：，只有項目，沒有編號有序：，按順序編號階層：列表內含列表，不可交錯定義列表：沒有編號，沒有項目，,無序列表(1/2),標題第一項第二項第三項範例電腦課上課規定不睡覺不吵鬧不走動不唱歌執行結果。,無序列表(2/2換項目記號),電腦課上課規定不睡覺不吵鬧不走動不唱歌電腦課上課規定不睡覺不走動不吵鬧執行結果。,有序列表(1/2),標題第一項第二項第三項範例電腦課上課規定不睡覺不走動不唱歌執行結果。,有序列表(2/2換順序號碼與格式),電腦課上課規定不睡覺不走動不唱歌執行結果。電腦課上課規定上課不睡覺睡覺不打呼打呼不流口水執行結果。,階層式列表,母階第一項子階第一點第二點第二項第三項執行結果。,定義列表,標題第一個專有名詞定義內容01定義內容02第二個專有名詞定義內容00定義內容01.,定義列表,範例交通大學工學院資工系電工系電信系理學院物理系化學系數學系執行結果。,表格架構Table,表格範例,表格標題列一行一列一行二列二行一列二行二師大附中高三導師人數493班侯蘭蓓40498班鄭清文32512班李魁賢37執行結果。,表格、顏色,Border:邊線寬度Cellspacing:格子寬度Cellpadding:格子跟邊線距離格子內底色表格的一列某列中的一格若要兩格,表格若要跨兩格,TotalspanMonthSavingsSavingsforholiday!January$100$50February$80,超文件三種超連結,圖、照片影像、聲音文件、網頁Email:,插入圖片,執行結果。路徑：圖檔所在的資料夾（或稱為目錄，/或為目錄結構記號）URL：路徑/圖檔檔名需含副檔名、大小寫有差別。,網頁背景圖片,背景圖只能一張，滑鼠左鍵無法點選。範例：執行結果。,註解,註解應該要半形才對註解的意思是說：這段文字是給網頁維護的人看的。因為是給人看的，所以電腦不會去理會該段文字。範例：註解執行結果。做為網頁設計的說明，維護方便用。,BLOCKQUOTE,.範例區段引用，用於編排時顯示文章中之引文。：小引文,Lifeitselfisaquotation,quotationisnotlife.,網頁運作的背後概念,網站伺服器網路服務程式,發出url要求,送來url所要求的資源,使用者,解讀程式軟體瀏覽器MicrosoftInternetExplorer或Firefox,Safari,Opera,Chrome,網頁設計屬服務端一定要考慮使用者端的電腦瀏覽器功能能否顯示網頁設計所需的格式、效果,特殊符號,在HTML中、等符號用來當成標記使用，當瀏覽器讀到這些符號時，會自動把它們當成標記。因此要在瀏覽器中顯示這些符號，保持網頁完整性就必須用：；來顯示小於符號；來顯示符號範例,符號字元,一些特殊符號的表示可以用學這4個字成功大學就可以保證在同一行,而不會被拆在不同的兩行中.事實上,我們可利用來達到同樣的效果,例如成功大學.,線段horizonatalrule,要注意各個選項的各別用意百分比標示法絕對執行結果。,超連結hyperlink超文件的核心,網頁內連結(文件自身內部)網頁外連結,網頁內連結下錨點定錨,在這一份長文件的內容裡跳來跳去，那就得用下錨點(英語anchor)了，做法如下：先下錨點1.將預備作為被連結的段落位置設置一個錨點2.定義一個用來作為連結的名字命名，定錨語法為：somethingshere超連結至下錨處-語法為說明文字,網頁內定錨範例,01HTML(HyperMarkupLanguage)簡介.01HTML(HyperMarkupLanguage)簡介.回目錄!超連結到m1，網頁上顯示回目錄執行結果,網頁外連結,超連結文字輸入名稱title=“開啟新視窗瀏覽”，加入顯示標題的文字方塊。假如希望點選超鏈結文字後,鏈結到的網頁顯示在新產生的視窗中,只需加上target=_blank即可,範例如下:真理大學麻豆校區真理大學新視窗執行範例,連結E-mail地址,khaimail.au.edu.tw信件標題khaimail.au.edu.tw信件標題及內容khaimail.au.edu.tw寄信給多人,khaimail.au.edu.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是MicrosoftInternetExplorer特有的執行結果。,按鈕型態,輸入要顯示的文字,Frame分割視窗網頁框架,左右分割左邊框架分割大小為20%，右邊框架的大小瀏覽器會自動調整上下分割將上面框架分割大小為20%，下面框架的大小瀏覽器會自動調整一個星號代表一個單位，將螢幕大小依比例分配給各個窗框。,網頁框架範例,範例：執行結果,框窗實作,窗框名:可用於指定超連結顯示之場所,網頁框架範例,看a.htm內容：BODYcursor:url(StarCraft.ani);在3號框顯示khai的網頁南真理的網頁北真理的網頁,框架限制,不能直接秀出src=URL“超連結文件的內容不能放到body中看例子：執行結果,網頁框架實作不能直接秀出超連結文件的內容不能放到body中,Embed撥放聲音(1/2),聲音檔分為：附檔名為wav，au，mid首頁中加入背景音樂的格式如下：網頁說明用文字,撥放聲音(2/2),可撥放：.mid,.ra,.ram,.rm等音效檔。重複撥放自訂撥放次數數值,type屬性是在網頁安全中非常重要,你可以根據所播放的副檔名加上其專屬的型別來告訴瀏覽器播放檔案的是什麼東西?避免網頁被綁架。我整理的一些副檔名所對應的型別清單如下副檔名型別mp3audio/mpegwmaapplication/x-mplayer2wmvapplication/x-mplayer2wavaudio/x-wavasfvideo/x-ms-asf,midaudio/midrmaudio/x-pn-realaudioraaudio/x-pn-realaudioramaudio/x-pn-realaudioavivideo/x-msvideomovvideo/quicktimempgvideo/mpegmpegvideo/mpeg,背景聲音,是將音樂加入網頁最普遍使用的方式。在（InternetExplorer和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,CSSCascadingStyleSheets,放在之間#idproperties:options;.classproperties:options;HTMLtagproperties:options;或是inline或是另外存檔xxx.css自由電子報的：,個例子,http:/www.w3.org/Style/Examples/011/firstcssMyfirststyledpagebodypadding-left:11em;font-family:Georgia,TimesNewRoman,Times,serif;color:purple;background-color:#d8da3dul.navbarlist-style-type:none;padding:0;margin:0;position:absolute;top:2em;left:1em;width:9emh1font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-seriful.navbarlibackground:white;margin:0.5em0;padding:0.3em;border-right:1emsolidblackul.navbaratext-decoration:nonea:linkcolor:bluea:visitedcolor:purpleaddressmargin-top:1em;padding-top:1em;border-top:thindotted,跳頁metahttp-equiv,meta標籤用於網頁的head與/head中其中的content=“3就是要停留三秒鐘其中的url=jump3.htm“就是要接著顯示jump3.htm。範例：執行結果。,Metaname內容,1、metaname=Generatorcontent=用以說明生成工具（如MicrosoftFrontPage4.0）等；2、metaname=KEYWordscontent=向查詢引擎說明你的網頁的關鍵詞；3、metaname=DEscriptioncontent=告訴查詢引擎你的網站台的主要內容；4、metaname=Authorcontent=你的姓名告訴查詢引擎你的網站台的製作的作者；5、metaname=Robotscontent=all|none|index|noindex|follow|nofollow設定為all：檔案將被檢索，且頁面上的連結可以被查詢；設定為none：檔案將不被檢索，且頁面上的連結不可以被查詢；設定為index：檔案將被檢索；設定為follow：頁面上的連結可以被查詢；設定為noindex：檔案將不被檢索，但頁面上的連結可以被查詢；設定為nofollow：檔案將不被檢索，頁面上的連結可以被查詢。,Metahttp-equiv內容,metahttp-equiv=Content-Typecontent=text/html;charset=gb_2312-80和metahttp-equiv=“Content-Language”content=“zh-CN”用以說明主頁製作所使用的文字以及語言；又如英文是ISO-8859-1字集，還有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字集metahttp-equiv=Expirescontent=Mon,12May200100:20:00GMT可以用於設定網頁的到期時間，一旦過期則必須到伺服器上重新呼叫。需要注意的是必須使用GMT時間格式metahttp-equiv=Pragmacontent=no-cache是用於設定禁止瀏覽器從近端機的緩存中調閱頁面內容，設定後一旦離開網頁就無法從Cache中再調出；metahttp-equiv=set-cookiecontent=Mon,12May200100:20:00GMTcookie設定，如果網頁過期，存盤的cookie將被刪除。需要注意的也是必須使用GMT時間格式；metahttp-equiv=Pics-labelcontent=網頁等級升等職稱，在IE的internet選項中有一項內容設定，可以防止瀏覽一些受限制的網站，而網站的限制層級就是通過meta內容來設定的；metahttp-equiv=windows-Targetcontent=_top強制頁面在目前的視窗中以獨立頁面顯示，可以防止自己的網頁被別人當作一個frame頁呼叫；metahttp-equiv=Page-Entercontent=revealTrans(duration=10,transtion=50)和metahttp-equiv=Page-Exitcontent=revealTrans(duration=20，transtion=6)設定進入和離開頁面時的特殊效果，這個功能即FrontPage中的格式/網頁過渡，不過所加的頁面不能夠是一個frame頁面。,參考資料,HTML制定者文件HTMLSpecificationhttp:/www.fcic.org.tw/html-1.htmhttp:/www.w3.org/TR/html401/cover.html#minitocHTML語法大全HTML超連結代碼說明細說HTML標籤參考http:/internet.class.kmu.edu.tw/barebone_tw.htmlhttp:/www.csie.nctu.edu.tw/jglee/teacher/content.htm,