website series 2 - html
TRANSCRIPT
Basic Concept Tag language Nested Structure Build the page structure See a tag as a component
Ordinary Basic Structure<html>
<head><title>TEST</title>
</head><body>
<h1>Hello World!</h1></body>
</html>
How Tags Work? (1)
<p id=“myID” class=“sample” …>
…</p>
How Tags Work? (1)
<p id=“myID” class=“sample” …>
…</p>
Attributes
How Tags Work? (2)
<input id=“myID” type=“text” …/>
<div id=“myID” data-name=“zzz”>…</div>
How Tags Work? (2)
<input id=“myID” type=“text” …/>
<div id=“myID” data-name=“zzz”>…</div>
How Tags Work? (2)
<input id=“myID” type=“text” …/>
<div id=“myID” data-name=“zzz”>…</div> Data Attributes
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>
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>
Body<body>
…</body>
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>
HTML Table<table> <tr> <td rowspan="2"></td> <td></td> </tr> <tr> <td></td> </tr> <tr> <td colspan="2"></td> </tr></table>
Basic Tags <p></p> <span></span> <pre></pre> <a href=“…” alt=“some text”></a> <img src=“…”>
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
Form Tags (1)<form>
<input name=“username”><fieldset>
…</fieldset>
</form>
Form Types
Form Types <input type=“text” /> 一般輸入框
Form Types <input type=“text” /> 一般輸入框 <input type=“password”> 密碼輸入框
Form Types <input type=“text” /> 一般輸入框 <input type=“password”> 密碼輸入框 <input type=“radio”> 單選
Form Types <input type=“text” /> 一般輸入框 <input type=“password”> 密碼輸入框 <input type=“radio”> 單選 <input type=“checkbox”> 複選
Form Types <input type=“text” /> 一般輸入框 <input type=“password”> 密碼輸入框 <input type=“radio”> 單選 <input type=“checkbox”> 複選 <input type=“submit”> 送出
Form Types <input type=“text” /> 一般輸入框 <input type=“password”> 密碼輸入框 <input type=“radio”> 單選 <input type=“checkbox”> 複選 <input type=“submit”> 送出 …
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
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
An Example – Building HTML Structure
An Example – Building HTML Structure
An Example – Building HTML Structure<div class=“ad”> </div>
An Example – Building HTML Structure<div class=“ad”> </div>
An Example – Building HTML Structure<div class=“ad”> </div>
An Example – Building HTML Structure<div class=“ad”>
<div class=“banner”><div>贊助</div><img src=“…” /><a href=“”>刊登廣告</a>
</div> </div>
An Example – Building HTML Structure<div class=“ad”>
<div class=“banner”><div>贊助</div><img src=“…” /><a href=“”>刊登廣告</a>
</div> </div>
An Example – Building HTML Structure<div class=“ad”>
<div class=“banner”><div>贊助</div><img src=“…” /><a href=“”>刊登廣告</a>
</div> </div>
An Example – Building HTML Structure<div class=“ad”>
<div class=“banner”><div>贊助</div><img src=“…” /><a href=“”>刊登廣告</a>
</div><img class=“main” src=“…”>
</div>
An Example – Building HTML Structure<div class=“ad”>
<div class=“banner”><div>贊助</div><img src=“…” /><a href=“”>刊登廣告</a>
</div><img class=“main” src=“…”>
</div>
An Example – Building HTML Structure<div class=“ad”>
<div class=“banner”><div>贊助</div><img src=“…” /><a href=“”>刊登廣告</a>
</div><img class=“main” src=“…”>
</div>
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>
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>
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/