|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<title>Titile of this document</title>
|
|
|
|
|
<style>
|
|
|
|
|
thead {
|
|
|
|
|
background-color: skyblue;
|
|
|
|
|
}
|
|
|
|
|
tbody {
|
|
|
|
|
background-color: darkseagreen;
|
|
|
|
|
}
|
|
|
|
|
tfoot {
|
|
|
|
|
background-color: yellowgreen;
|
|
|
|
|
}
|
|
|
|
|
table,
|
|
|
|
|
th,
|
|
|
|
|
td {
|
|
|
|
|
border: 1px solid salmon;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<h1>
|
|
|
|
|
<b><i>Lorem ipsum</i></b> dolor sit amet, consectetur adipiscing elit, sed
|
|
|
|
|
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
|
|
|
</h1>
|
|
|
|
|
<strong>enim ad minim veniam,</strong>
|
|
|
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
|
|
|
consequat.<br />
|
|
|
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
|
|
|
|
|
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
|
|
|
|
|
sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
|
|
|
|
|
|
|
|
<p>This is paragraph.</p>
|
|
|
|
|
<p>This is paragraph.</p>
|
|
|
|
|
<p>This is paragraph.</p>
|
|
|
|
|
|
|
|
|
|
<img
|
|
|
|
|
src="https://cdn1.iconfinder.com/data/icons/user-pictures/101/malecostume-256.png"
|
|
|
|
|
alt="image"
|
|
|
|
|
width="100"
|
|
|
|
|
height="100"
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<a href="https://www.google.com">Go Google!</a>
|
|
|
|
|
<a href="https://www.google.com" target="_blank">Go Google! (New Page)</a>
|
|
|
|
|
|
|
|
|
|
<a href="https://www.google.com" target="_blank">
|
|
|
|
|
<img
|
|
|
|
|
src="https://www.google.com/images/hpp/Chrome_Owned_96x96.png"
|
|
|
|
|
alt="google"
|
|
|
|
|
/>
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
|
|
<h1>ol vs. ul</h1>
|
|
|
|
|
|
|
|
|
|
<ol>
|
|
|
|
|
<li>Coffee</li>
|
|
|
|
|
<li>Tea</li>
|
|
|
|
|
<li>Milk</li>
|
|
|
|
|
</ol>
|
|
|
|
|
|
|
|
|
|
<ul>
|
|
|
|
|
<li>Coffee</li>
|
|
|
|
|
<li>Tea</li>
|
|
|
|
|
<li>Milk</li>
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
<table>
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th>Month</th>
|
|
|
|
|
<th>Saving</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>Jan.</td>
|
|
|
|
|
<td>$100</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>Feb.</td>
|
|
|
|
|
<td>$200</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
<tfoot>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>Sum.</td>
|
|
|
|
|
<td>$300</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tfoot>
|
|
|
|
|
</table>
|
|
|
|
|
|
|
|
|
|
<button type="button" onclick="testFunc()">
|
|
|
|
|
<img
|
|
|
|
|
src="https://cdn1.iconfinder.com/data/icons/user-pictures/101/malecostume-256.png"
|
|
|
|
|
alt="image"
|
|
|
|
|
width="30"
|
|
|
|
|
height="30"
|
|
|
|
|
/>
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<form>
|
|
|
|
|
<label for="fname">First name:</label>
|
|
|
|
|
<input type="text" id="fname" name="fname" /><br /><br />
|
|
|
|
|
<label for="lname">First name:</label>
|
|
|
|
|
<input type="text" id="lname" name="lname" /><br /><br />
|
|
|
|
|
<input type="submit" value="submit" />
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
<form>
|
|
|
|
|
<label for="male">Male</label>
|
|
|
|
|
<input type="radio" name="gender" id="male" value="male" /> <br />
|
|
|
|
|
<label for="female">Female</label>
|
|
|
|
|
<input type="radio" name="gender" id="female" value="female" /> <br />
|
|
|
|
|
<label for="other">Other</label>
|
|
|
|
|
<input type="radio" name="gender" id="other" value="other" /> <br />
|
|
|
|
|
<input type="submit" value="Submit" />
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
function testFunc() {
|
|
|
|
|
alert('Call testFunc!');
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
