Website Series 2 - HTML
-
Upload
eugene-yang -
Category
Engineering
-
view
133 -
download
2
Transcript of Website Series 2 - HTML
![Page 2: Website Series 2 - HTML](https://reader035.fdocuments.net/reader035/viewer/2022062401/58a501ab1a28abce778b64d3/html5/thumbnails/2.jpg)
Basic Concept Tag language Nested Structure Build the page structure See a tag as a component
![Page 3: Website Series 2 - HTML](https://reader035.fdocuments.net/reader035/viewer/2022062401/58a501ab1a28abce778b64d3/html5/thumbnails/3.jpg)
Ordinary Basic Structure<html>
<head><title>TEST</title>
</head><body>
<h1>Hello World!</h1></body>
</html>
![Page 4: Website Series 2 - HTML](https://reader035.fdocuments.net/reader035/viewer/2022062401/58a501ab1a28abce778b64d3/html5/thumbnails/4.jpg)
How Tags Work? (1)
<p id=“myID” class=“sample” …>
…</p>
![Page 5: Website Series 2 - HTML](https://reader035.fdocuments.net/reader035/viewer/2022062401/58a501ab1a28abce778b64d3/html5/thumbnails/5.jpg)
How Tags Work? (1)
<p id=“myID” class=“sample” …>
…</p>
Attributes
![Page 6: Website Series 2 - HTML](https://reader035.fdocuments.net/reader035/viewer/2022062401/58a501ab1a28abce778b64d3/html5/thumbnails/6.jpg)
How Tags Work? (2)
<input id=“myID” type=“text” …/>
<div id=“myID” data-name=“zzz”>…</div>
![Page 7: Website Series 2 - HTML](https://reader035.fdocuments.net/reader035/viewer/2022062401/58a501ab1a28abce778b64d3/html5/thumbnails/7.jpg)
How Tags Work? (2)
<input id=“myID” type=“text” …/>
<div id=“myID” data-name=“zzz”>…</div>
![Page 8: Website Series 2 - HTML](https://reader035.fdocuments.net/reader035/viewer/2022062401/58a501ab1a28abce778b64d3/html5/thumbnails/8.jpg)
How Tags Work? (2)
<input id=“myID” type=“text” …/>
<div id=“myID” data-name=“zzz”>…</div> Data Attributes
![Page 9: Website Series 2 - HTML](https://reader035.fdocuments.net/reader035/viewer/2022062401/58a501ab1a28abce778b64d3/html5/thumbnails/9.jpg)
Head<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/style.css"><script src="script/jquery-2.1.3.min.js"></script><title>TEST</title>
</head>
![Page 10: Website Series 2 - HTML](https://reader035.fdocuments.net/reader035/viewer/2022062401/58a501ab1a28abce778b64d3/html5/thumbnails/10.jpg)
Head<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/style.css"><script src="script/jquery-2.1.3.min.js"></script><title>TEST</title>
</head>
![Page 11: Website Series 2 - HTML](https://reader035.fdocuments.net/reader035/viewer/2022062401/58a501ab1a28abce778b64d3/html5/thumbnails/11.jpg)
Body<body>
…</body>
![Page 12: Website Series 2 - HTML](https://reader035.fdocuments.net/reader035/viewer/2022062401/58a501ab1a28abce778b64d3/html5/thumbnails/12.jpg)
Tags for layout <div>
<div><div></div>
</div><div></div>
</div>
<table><tr>
<th></th><th></th>
</tr><tr>
<td></td><td></td>
</tr></table>
![Page 13: Website Series 2 - HTML](https://reader035.fdocuments.net/reader035/viewer/2022062401/58a501ab1a28abce778b64d3/html5/thumbnails/13.jpg)
HTML Table<table> <tr> <td rowspan="2"></td> <td></td> </tr> <tr> <td></td> </tr> <tr> <td colspan="2"></td> </tr></table>
![Page 14: Website Series 2 - HTML](https://reader035.fdocuments.net/reader035/viewer/2022062401/58a501ab1a28abce778b64d3/html5/thumbnails/14.jpg)
Basic Tags <p></p> <span></span> <pre></pre> <a href=“…” alt=“some text”></a> <img src=“…”>
![Page 15: Website Series 2 - HTML](https://reader035.fdocuments.net/reader035/viewer/2022062401/58a501ab1a28abce778b64d3/html5/thumbnails/15.jpg)
List tags <ul>
<li>Item a</li><li>Item b</li><li>Item c</li>
</ul> <ol>
<li value=“300”>Item a</li>
<li>Item b</li><li value=“-
1”>Item c</li></ol>
Item a Item b Item c
300. Item a301. Item b-1. Item c
![Page 16: Website Series 2 - HTML](https://reader035.fdocuments.net/reader035/viewer/2022062401/58a501ab1a28abce778b64d3/html5/thumbnails/16.jpg)
Form Tags (1)<form>
<input name=“username”><fieldset>
…</fieldset>
</form>
![Page 17: Website Series 2 - HTML](https://reader035.fdocuments.net/reader035/viewer/2022062401/58a501ab1a28abce778b64d3/html5/thumbnails/17.jpg)
Form Types
![Page 18: Website Series 2 - HTML](https://reader035.fdocuments.net/reader035/viewer/2022062401/58a501ab1a28abce778b64d3/html5/thumbnails/18.jpg)
Form Types <input type=“text” /> 一般輸入框
![Page 19: Website Series 2 - HTML](https://reader035.fdocuments.net/reader035/viewer/2022062401/58a501ab1a28abce778b64d3/html5/thumbnails/19.jpg)
Form Types <input type=“text” /> 一般輸入框 <input type=“password”> 密碼輸入框
![Page 20: Website Series 2 - HTML](https://reader035.fdocuments.net/reader035/viewer/2022062401/58a501ab1a28abce778b64d3/html5/thumbnails/20.jpg)
Form Types <input type=“text” /> 一般輸入框 <input type=“password”> 密碼輸入框 <input type=“radio”> 單選
![Page 21: Website Series 2 - HTML](https://reader035.fdocuments.net/reader035/viewer/2022062401/58a501ab1a28abce778b64d3/html5/thumbnails/21.jpg)
Form Types <input type=“text” /> 一般輸入框 <input type=“password”> 密碼輸入框 <input type=“radio”> 單選 <input type=“checkbox”> 複選
![Page 22: Website Series 2 - HTML](https://reader035.fdocuments.net/reader035/viewer/2022062401/58a501ab1a28abce778b64d3/html5/thumbnails/22.jpg)
Form Types <input type=“text” /> 一般輸入框 <input type=“password”> 密碼輸入框 <input type=“radio”> 單選 <input type=“checkbox”> 複選 <input type=“submit”> 送出
![Page 23: Website Series 2 - HTML](https://reader035.fdocuments.net/reader035/viewer/2022062401/58a501ab1a28abce778b64d3/html5/thumbnails/23.jpg)
Form Types <input type=“text” /> 一般輸入框 <input type=“password”> 密碼輸入框 <input type=“radio”> 單選 <input type=“checkbox”> 複選 <input type=“submit”> 送出 …
![Page 24: Website Series 2 - HTML](https://reader035.fdocuments.net/reader035/viewer/2022062401/58a501ab1a28abce778b64d3/html5/thumbnails/24.jpg)
Form Types <input type=“text” /> 一般輸入框 <input type=“password”> 密碼輸入框 <input type=“radio”> 單選 <input type=“checkbox”> 複選 <input type=“submit”> 送出 … http://www.w3schools.com/html/html_forms.asp
![Page 25: Website Series 2 - HTML](https://reader035.fdocuments.net/reader035/viewer/2022062401/58a501ab1a28abce778b64d3/html5/thumbnails/25.jpg)
Form Types <input type=“text” /> 一般輸入框 <input type=“password”> 密碼輸入框 <input type=“radio”> 單選 <input type=“checkbox”> 複選 <input type=“submit”> 送出 … http://www.w3schools.com/html/html_forms.asp http://140.114.89.25/~geniusturtle/tutor_web/html_form.php
![Page 26: Website Series 2 - HTML](https://reader035.fdocuments.net/reader035/viewer/2022062401/58a501ab1a28abce778b64d3/html5/thumbnails/26.jpg)
An Example – Building HTML Structure
![Page 27: Website Series 2 - HTML](https://reader035.fdocuments.net/reader035/viewer/2022062401/58a501ab1a28abce778b64d3/html5/thumbnails/27.jpg)
An Example – Building HTML Structure
![Page 28: Website Series 2 - HTML](https://reader035.fdocuments.net/reader035/viewer/2022062401/58a501ab1a28abce778b64d3/html5/thumbnails/28.jpg)
An Example – Building HTML Structure<div class=“ad”> </div>
![Page 29: Website Series 2 - HTML](https://reader035.fdocuments.net/reader035/viewer/2022062401/58a501ab1a28abce778b64d3/html5/thumbnails/29.jpg)
An Example – Building HTML Structure<div class=“ad”> </div>
![Page 30: Website Series 2 - HTML](https://reader035.fdocuments.net/reader035/viewer/2022062401/58a501ab1a28abce778b64d3/html5/thumbnails/30.jpg)
An Example – Building HTML Structure<div class=“ad”> </div>
![Page 31: Website Series 2 - HTML](https://reader035.fdocuments.net/reader035/viewer/2022062401/58a501ab1a28abce778b64d3/html5/thumbnails/31.jpg)
An Example – Building HTML Structure<div class=“ad”>
<div class=“banner”><div>贊助</div><img src=“…” /><a href=“”>刊登廣告</a>
</div> </div>
![Page 32: Website Series 2 - HTML](https://reader035.fdocuments.net/reader035/viewer/2022062401/58a501ab1a28abce778b64d3/html5/thumbnails/32.jpg)
An Example – Building HTML Structure<div class=“ad”>
<div class=“banner”><div>贊助</div><img src=“…” /><a href=“”>刊登廣告</a>
</div> </div>
![Page 33: Website Series 2 - HTML](https://reader035.fdocuments.net/reader035/viewer/2022062401/58a501ab1a28abce778b64d3/html5/thumbnails/33.jpg)
An Example – Building HTML Structure<div class=“ad”>
<div class=“banner”><div>贊助</div><img src=“…” /><a href=“”>刊登廣告</a>
</div> </div>
![Page 34: Website Series 2 - HTML](https://reader035.fdocuments.net/reader035/viewer/2022062401/58a501ab1a28abce778b64d3/html5/thumbnails/34.jpg)
An Example – Building HTML Structure<div class=“ad”>
<div class=“banner”><div>贊助</div><img src=“…” /><a href=“”>刊登廣告</a>
</div><img class=“main” src=“…”>
</div>
![Page 35: Website Series 2 - HTML](https://reader035.fdocuments.net/reader035/viewer/2022062401/58a501ab1a28abce778b64d3/html5/thumbnails/35.jpg)
An Example – Building HTML Structure<div class=“ad”>
<div class=“banner”><div>贊助</div><img src=“…” /><a href=“”>刊登廣告</a>
</div><img class=“main” src=“…”>
</div>
![Page 36: Website Series 2 - HTML](https://reader035.fdocuments.net/reader035/viewer/2022062401/58a501ab1a28abce778b64d3/html5/thumbnails/36.jpg)
An Example – Building HTML Structure<div class=“ad”>
<div class=“banner”><div>贊助</div><img src=“…” /><a href=“”>刊登廣告</a>
</div><img class=“main” src=“…”>
</div>
![Page 37: Website Series 2 - HTML](https://reader035.fdocuments.net/reader035/viewer/2022062401/58a501ab1a28abce778b64d3/html5/thumbnails/37.jpg)
An Example – Building HTML Structure<div class=“ad”><div class=“banner”><div>贊助</div><img src=“…” /><a href=“”>刊登廣告</a></div><img class=“main” src=“…”><div class=“text-container”>…</div></div>
![Page 38: Website Series 2 - HTML](https://reader035.fdocuments.net/reader035/viewer/2022062401/58a501ab1a28abce778b64d3/html5/thumbnails/38.jpg)
An Example – Building HTML Structure<div class=“ad”><div class=“banner”><div>贊助</div><img src=“…” /><a href=“”>刊登廣告</a></div><img class=“main” src=“…”><div class=“text-container”>…</div></div>
![Page 39: Website Series 2 - HTML](https://reader035.fdocuments.net/reader035/viewer/2022062401/58a501ab1a28abce778b64d3/html5/thumbnails/39.jpg)
Useful Resources Code Cademy
http://www.codecademy.com/en/skills/make-a-website W3School HTML
http://www.w3schools.com/html/default.asp 小龜線上教材
http://140.114.89.25/~geniusturtle/tutor_web/