Created
July 21, 2017 04:32
-
-
Save nthock/7d36d3d23d91444740ba51127fbcc1ee to your computer and use it in GitHub Desktop.
HTML Demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>HTML, CSS and JavaScript Demo</title> | |
</head> | |
<body> | |
<h1>HTML, CSS and JavaScript Demo</h1> | |
<!-- Paragraph and anchor tag section --> | |
<div> | |
<h2>Paragraph and anchor tag</h2> | |
<p>Hello HTML and CSS!</p> | |
<p>Goodbye JavaScript!</p> | |
<a href="https://google.com" target="_blank">Go to Google</a> | |
</div> | |
<!-- Table section --> | |
<div> | |
<h2>Table</h2> | |
<table> | |
<thead> | |
<tr> | |
<th>Country</th> | |
<th>Population</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr> | |
<td>Singapore</td> | |
<td>5,607,300</td> | |
</tr> | |
<tr> | |
<td>Malaysia</td> | |
<td>31,584,000</td> | |
</tr> | |
<tr> | |
<td>Thailand</td> | |
<td>67,959,000</td> | |
</tr> | |
</tbody> | |
</table> | |
</div> | |
<!-- Form section --> | |
<div> | |
<h2>Form</h2> | |
<form> | |
<label for="name">Name</label> | |
<input type="text" name="name" id="name" placeholder="Please enter your name" /> <br /> | |
<label for="email">Email</label> | |
<input type="text" name="email" id="email" placeholder="Please enter your email" /> <br /> | |
<input type="radio" name="gender" value="male" checked> Male | |
<input type="radio" name="gender" value="female"> Female <br /> | |
<input type="checkbox" id="coding" name="interest" value="coding"> | |
<label for="coding">Coding</label> | |
<input type="checkbox" id="music" name="interest" value="music"> | |
<label for="music">Music<label> <br /> | |
<input type="submit" value="Submit Form" /> | |
</form> | |
</div> | |
<!-- Ordered List --> | |
<div> | |
<h2>Ordered List</h2> | |
<ol> | |
<li>This is the first item on the list.</li> | |
<li>This is the second item.</li> | |
<li>Third item</li> | |
<li>Do I need to go on?</li> | |
</ol> | |
</div> | |
<!-- Unordered List --> | |
<div> | |
<h2>Unordered List</h2> | |
<ul> | |
<li>This is the first unordered list item.</li> | |
<li>Second unordered list.</li> | |
<li>Third bullet point.</li> | |
</ul> | |
</div> | |
<!-- Images --> | |
<div> | |
<h2>Images</h2> | |
<img src="http://i.imgur.com/wYTCtRu.jpg" alt="cat" /> | |
<img src="dog.jpg" alt="dog" /> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment