1 / 36

HTML

HTML. 認識─ HTML 簡介 1. 超文件標示語言 (Hyper Text Markup Language) 起源： Tim Berners-Lee 促進國際物理交流所設計 ，以純文字格式為基礎，可用任何文字編輯器撰寫。 朝多媒體發展： M arc Andreessen 在 Mosaic 瀏覽器中加入 <img> 標籤。. 認識─ HTML 簡介 2. Mosaic Windows 版 3.0 瀏覽器一睹. 認識─ HTML 簡介 3. 語法標準制定： 全球資訊網協會

dash
Download Presentation

HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML

  2. 認識─HTML簡介1 • 超文件標示語言 • (Hyper Text Markup Language) • 起源： • Tim Berners-Lee促進國際物理交流所設計 • ，以純文字格式為基礎，可用任何文字編輯器撰寫。 • 朝多媒體發展： • Marc Andreessen在Mosaic瀏覽器中加入<img>標籤。

  3. 認識─HTML簡介2 • Mosaic Windows版3.0 瀏覽器一睹

  4. 認識─HTML簡介3 • 語法標準制定： • 全球資訊網協會 • (World Wide Web Consortium，簡稱W3C或W3C理事會) • 最新標準： • HTML 4.01 • XHTML 1.0 • XHTML 1.1

  5. 認識─HTML的編輯工具 • 任何只要能輸入文字的程式都可以寫HTML • 上課使用軟體：Notepad++ • 軟體： • http://0rz.tw/yz6hH • 相關套件： • http://0rz.tw/201Qa

  6. 認識─HTML的原始碼架構 • 由<html></html>標籤包住，裡面分成由<head></head>與<body></body>兩標籤包住的部份。 • <html></html>：說明這是一份HTML文件 • <head></head>：有關HTML檔案核心 • <body></body>：有關HTML顯現的內頁

  7. 認識─標籤與讀取順序 • 標籤成對：<x>標籤內容</x> • 像洋蔥一樣層層包：<a><b></b></a> • 單標籤：<x /> • 標籤讀取：由上到下，由左到右

  8. 認識─標籤的屬性 • 屬性套用：<x a=“…”>標籤內容</x> • 元素：一組<x>內容</x> • 標籤只是標示用，真正有作用的是內容。

  9. 觀念─分層與繼承1 • 層級： • 透過標籤一層包一層所產生的相對階級關係。 • 分層： • 透過排版原始碼以方便了解元素間的層級關係。

  10. 觀念─分層與繼承2 • 父元素：層級相對高的元素 • 子元素：層級相對低的元素 • 繼承：子元素會擁有父元素的性質

  11. p h1 body h2 p 哈哈哈哈 h1 h2 文字 觀念─分層與繼承3 p body

  12. 基本標籤介紹─架構網頁的標籤 • <html></html> • 說明這是一份HTML檔案 • <head></head> • 裡面放置的標籤都是有關網站本身的核心部份(如網站名稱、語言編碼…etc)(不會顯示效果) • <body></body> • 裡面放置的標籤都是有關網站顯現出來的樣貌(會顯示效果)

  13. 基本標籤介紹─重要核心標籤1 • <title>網站名稱</title>：顯示網站名稱 • <link />：設定要連結的額外檔案 • <link href=“路徑” type=“文件內文” rel=“文件類型”

  14. 基本標籤介紹─重要核心標籤2 • <meta http-equiv=“類型” content=“值”> • 利用meta標籤可以做到轉址、自動更新、設定語言等功用。 • 設定語言： • <meta http-equiv=“Content-Type” content=“text/html;charset=utf-8”> • 自動更新： • <meta http-equiv=“refresh” content=“秒數”> • 轉址服務： • <meta http-equiv=“refresh” content=“秒數;url=網址”>

  15. 註解 • <!--註解內容--> • 用途： • 測試效果 • 增加原始碼可讀性(提醒用) • 在註解標籤中的內容不會被讀取並顯現出來

  16. 文字標籤<p></p> • 段落標籤：<p>文字</p> • =>顯示一個段落(不換行) • 在輸入文字時常用的標籤，網頁讀取時較快 • 要注意：<p>標籤沒有可以設定文字的屬性

  17. 文字標籤<font></font> • 文字屬性標籤：<font>文字</font> • =>顯示文字，用來改變文字樣貌 • 相關屬性 • 字體大小：<font size=“#”>文字</font> • #為-6~-1,1~7,+1~+6，越往右越 • 字型：<font face=“字型”>文字</font> • 顏色：<font color=“$”>文字</font> • $為RGB色碼(#aabbcc)或指定顏色(blue,red…etc)

  18. 文字標籤<hx></hx> • 標題標籤：<hx>文字</hx> x=1~6 • =>常用在顯示標題文字 • 注意事項： • 1.x越小字越大 • 2.會在文字下方自動空一行

  19. 文字標籤<pre></pre> • 格式文字標籤：<pre>文字</pre> • =>顯示換行文字，實用性不高 • 注意事項： • 1.若原始碼有換行，顯示文字自動換行 • 2.內含HTML標籤不會顯現，但會顯現效果

  20. 文字標籤─字體樣式變化1 • 粗體字：<b>文字</b> • <strong>文字</strong> • 斜體字：<i>文字</i> • <em>文字</em> • 底線字：<u>文字</u>

  21. 文字標籤─字體樣式變化2 • 上標字：<sup>文字</sup> • 下標字：<sub>文字</sub> • 加大的字：<big>文字</big> • 縮小的字：<small>文字</small> • 以上這些標籤的實用性不高

  22. 認識RGB色碼與指定顏色 • 指定顏色：HTML語法中事先設定好的顏色關鍵字，如blue,yellow,red,green…etc。 • RGB色碼： • #aabbcc • aa:紅光亮度 bb:綠光亮度 cc:藍光亮度 • abc為16進位的數字，ff最強，00最弱

  23. 對齊標籤 • 置左標籤：<left></left> • 置右標籤：<right></right> • 置中標籤：<center></center> • 更好的取代：align屬性 • <x align=“#”></x> • #=left,center,right

  24. 超連結標籤1 • <a href=“路徑”>連結名稱</a> • =>建立一個可以連結其他檔案的超連結 • 相關屬性： • 設定頁面跳轉方式 target=“#” #= _blank , _self…etc

  25. 超連結標籤2 • 連結外部檔案 • <a href=“路徑”>連結名稱</a> • 同一頁之區域跳轉 • <a href=“#錨點名稱”>連結名稱</a> • 錨點就是指利用name屬性為其標籤所在取個名字。以後有需要可以利用<a></a>標籤連結到該區域，可做為回到頁首頁尾的功能。回頁首可以不用輸入錨點名稱。 • 錨點：<x name=“abc”></x>

  26. 圖片標籤 • <img src=“圖片路徑”alt=“圖片說明”/> • 相關屬性 • 圖片路徑：src=“路徑” • 圖片說明：alt =“說明” • 設定寬高 (寬)width=“數值” • (高)height=“數值” • 圖片請先使用繪圖軟體(PI.PS..)處理大小與解析度

  27. 常見圖片格式 • JPG： • 檔案小，品質中等。使用在逼真圖片 • GIF： • 檔案較大，顏色在256色之內。使用在有動畫或是純質顏色的圖片。 • PNG： • 檔案較大，高清晰度與保真度，可使用透明。 • BMP： • 檔案較大，且有些瀏覽器不支援，建議不使用。

  28. 觀念─絕對路徑與相對路徑1 • 絕對路徑： • 表示檔案在電腦上的「精確位置」 • ex. D:\study\html\web\index.htm • 觀看檔案絕對路徑： • 工具→資料夾選項→檢視→在網址列顯示完整路徑 • 工具→資料夾選項→檢視→在標題列顯示完整路徑 • 不方便使用，使用率較低。

  29. 觀念─絕對路徑與相對路徑2 • 相對路徑： • 利用檔案所在資料夾之間的相對關係表示檔案位置 • ex. Index.html or ./index.html • 較方便使用，使用率相當高。

  30. 觀念─絕對路徑與相對路徑3

  31. 列表標籤1 • 無序列表 • 意指項目符號為圖形的清單列表 • <ul></ul>：建立一個空的無序列表 • <li>項目內容</li>：建立一個清單細目 • 屬性： • type=“#” • #=disc(實心圓點) squere(實心方塊) circle(空心圓點)

  32. 列表標籤2 • 有序列表 • 意指項目符號為數字的清單列表 • <ol></ol>：建立一個空的有序列表 • <li>項目內容</li>：建立一個清單細目 • 屬性： • type=“#” • #=A(大寫字母) a(小寫字母) • I(大寫羅馬數字) i(小寫羅馬數字) • start=“數字” 決定從第幾個數字(字母)開始數

  33. 列表標籤3 • 定義列表 • 意指項目符號為文字的清單列表 • <dl></dl>：建立一個空的定義列表 • <dt></dt>：建立一個清單細目標題 • <dd></dd>：建立一個清單細目內文 • 屬性： • margin=“數值” 邊框與外面的距離(邊距,間距) • padding=“數值” 內文與邊框距離(內距) • border=“數值” 邊框粗度

  34. 表格標籤1 • <table></table>建立一個空的表格 • <tr></tr>建立一個列(左到右) • <th></th>建立一個欄，裡面放標題(粗體字) • <td></td>建立一個欄，裡面放內文(一般字) • 要注意的是，先<th></th>與<td></td>都要放在<tr></tr>裡面才行。 • 至於<tr></tr>要放在<table></table>中。

  35. 表格標籤2 • <table>的屬性 • border=“數值” 表格框線粗度 • cellspacing=“數值” 欄與欄的距離(間距) • cellpadding=“數值” 內文與欄的框線的距離(內距) • <tr><td><th>的屬性 • colspan=“數值” 橫向併格 • rowspan=“數值” 直向併格

  36. 區段標籤 • 段落標籤：<p>文字</p> • 換行標籤：<br /> • 水平線：<hr /> • 相關屬性： • 橫線厚度 size=“數值” • 橫線寬度 width=“數值 or %數” • 實橫線(無立體) noshade

More Related