9. HTML headings
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
10. HTML paragraphs
<html>
<body>
<h1>This is heading 1</h1>
<p>This is paragraph 1</p>
<p>This is paragraph 2</p>
<h2>This is heading 2</h2>
<p>This is paragraph 1</p>
<p>This is paragraph 2</p>
</body>
</html>
12. HTML Line Break
<html>
<body>
<h1>This is heading 1</h1>
<p>This is paragraph 1</p>
<br>
<h2>This is heading 2</h2>
<p>This is paragraph 1</p>
</body>
</html>
15. HTML links (使用名稱作為定位點)
<html>
<body>
<a id="first">First Section</a>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<a href="#first">Go To First Section</a>
</body>
</html>
30. HTML lists
1.A definition list is a list of items, with a description of
each item
2.The <dl> tag defines a definition list
3.The <dl> tag is used in conjunction with <dt> (defines
the item in the list) and <dd> (describes the item in the
list)
32. HTML text formatting
<html>
<body>
<p> <b> This text is bold </b> </p>
<p> <strong> This text is strong </strong> </p>
<p> <small> This text is small </small> </p>
<p> <i> This text is italic </i> </p>
<p> <em> This text is emphasized </em> </p>
<p> <mark> This text is marked </mark> </p>
<p> This is <sub> subscript </sub> and
<sup> superscript </sup> </p>
</body>
</html>
34. HTML Entities
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>
<p>Put space in the content</p>
<p>Put space in the content</p>
<p>Put   space in the content</p>
<p>哈 囉</p>
<p>哈 囉</p>
<p>哈   囉</p>
</body></html>
35. HTML styles (於 HTML 元素增添樣
式)
<html>
<body style="background-color:lightgrey">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
36. HTML styles (於 HTML 元素增添樣
式)
<html>
<body>
<h1 style="color:blue">This is a heading</h1>
<p style="color:red">This is a paragraph.</p>
</body>
</html>
38. HTML styles (於 HTML 元素增添樣
式)
<html>
<body>
<h1 style="font-family:verdana">This is a
heading</h1>
<p style="font-family:courier">This is a
paragraph.</p>
</body>
</html>
39. HTML styles (於 HTML 元素增添樣
式)
<html>
<body>
<h1 style="font-size:300%“ >This is a
heading</h1>
<p style="font-size:160%“ >This is a
paragraph.</p>
</body>
</html>
40. HTML styles (於 HTML 元素增添樣
式)
<html>
<body>
<h1 style="font-size:300%;color:blue">This is a
heading</h1>
<p style="font-size:160%; color:red">This is a
paragraph.</p>
</body>
</html>
41. HTML iframe
An iframe is used to display a web page within a web
page
<html>
<body>
<iframe src="http://eclass.nttu.edu.tw/"
width="500" height="500"></iframe>
</body>
</html>
42. HTML iframe
Try to display Facebook within web page
<html>
<body>
<iframe src="http://facebook.com" width="500"
height="500"></iframe>
</body>
</html>
45. 使用 iframe 鑲嵌 YouTube video
If you want to display a video in a web page, you can
upload the video to YouTube and insert HTML code to
display the video in your web page
46. 使用 iframe 鑲嵌 YouTube video
If you want to display a video in a web page, you can
upload the video to YouTube and insert HTML code to
display the video in your web page
47. 使用 iframe 鑲嵌 YouTube video
If you want to display a video in a web page, you can
upload the video to YouTube and insert HTML code to
display the video in your web page
48. HTML form – Text fields
<html>
<body>
<form>
First name: <input type="text" name="firstname"
/> <br>
Last name: <input type="text" name="lastname"
/>
</form>
</body>
</html>
49. HTML form - Text area
<html>
<body>
<textarea rows="4" cols="50">
The cat was playing in the garden.
</textarea>
</body>
</html>
50. HTML form – Password field
<html>
<body>
<form>
Password: <input type="password" name="pwd"
/>
</form>
</body>
</html>
51. HTML form – Radio buttons
<html>
<body>
<form>
<input type="radio" name="sex" value="male" />
Male<br>
<input type="radio" name="sex" value="female"
/>Female
</form>
</body>
</html>
52. HTML form - Checkboxes
<html>
<body>
<form>
<input type="checkbox" name="vehicle"
value="Bike" /> I have a bike<br>
<input type="checkbox" name="vehicle"
value="Car" /> I have a car
</form>
</body>
</html>
53. HTML form – Drop down list
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
54. HTML form - Drop down list (with
classification)
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
55. HTML form - Button
<html>
<body>
<button>Click Me!</button>
</body>
</html>
56. HTML form – Button (增加按鈕互
動)
<html>
<body>
<button onclick=alert("Hello!") >Click
Me!</button>
</body>
</html>
57. HTML Layout (by Div)
The div element is a block level element used for
grouping HTML elements
透過 div (再搭配 CSS 樣式) 是目前主流的排版方法
排版時亦須考慮不同裝置 (螢幕、平板、手機) 的顯示
能力, 並做動態調整
