Skip to content

Instantly share code, notes, and snippets.

@bmakarand2009

bmakarand2009/html-basic-elements

Created September 12, 2012 16:32
Show Gist options
  • Save bmakarand2009/3707919 to your computer and use it in GitHub Desktop.
Save bmakarand2009/3707919 to your computer and use it in GitHub Desktop.
Download ZIP
HTML Elements
Raw
html-basic-elements
<?xml version="1.0" encoding="utf-8">
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN" "http://w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> Welcome , Webpage elements </title>
<!-- meta tags are used by search engines -->
<meta name ="keywords" content="java , html elements, basic html tags"/>
<meta name ="description" content=" This is a sample html page which has most of the commonly used eleemnts"/>
</head>
<body>
<h1> Basic Elements </h1> <!-- h1 - h6 tags are available -->
<p> New Paragraph start, We also have a div element </p>
<div> special characters are displayed as copyright &copy or &lt, for more info google on character entity references />
<div> For forms and Table look at Form and Table gists />
<del> to strike the element </del>
<p> list has two types, Ordered and Unordered list, lets see both, and a combination of it
<ul>
<li> element1
<li> eleemnt2 </li>
<li> Fruits
<ol> <li> apple </li>
<li> mango </li>
</ol>
</ul>
</p>
<p>
here is link to a differenct website <a href="www.cnn.com"> CNN new site </a>
here is how to embed an imapge <img ..
</body>
</html>
Raw
html-form-example
<!-- run it in .http://htmledit.squarefree.com/ -->
<!-- run it in .http://htmledit.squarefree.com/ -->
<html>
<body>
<h1> Sample Form </h>
<p> <h4>Thank you for your feedback </h4> </p>
<form method="post" action="">
<!-- hidden fieldd contain the information which need to be submitted to server along with other data -->
<p>
<!-- name and id are the fields which can be used to reference the input field by Scripts -->
<input type="hidden" name="recipientcode" value="samplecode"/>
<input type="hidden" name="caseId" value="3232ddd"/>
</p>
<label> Name :
<input name="custName" type="Text" size="40" maxLength="45"></input>
</label>
<!-- submit and clear buttons -->
<p>
<input type="submit" value="Submit"/>
<input type="reset"/>
</form>
<!-- complex form -->
<h1> Form with All Elements </h>
<p> <h4>Thank you for your feedback </h4> </p>
<form method="post" action="">
<!-- hidden fieldd contain the information which need to be submitted to server along with other data -->
<p>
<!-- name and id are the fields which can be used to reference the input field by Scripts -->
<input type="hidden" name="recipientcode" value="samplecode"/>
<input type="hidden" name="caseId" value="3232ddd"/>
</p>
<label> Name - Text:
<input name="custName" type="Text" size="40" maxLength="45"></input>
</label>
<div>
<label> Comments TextArea :</label>
</div>
<div>
<textarea name="comments" rows="6" cols="50"> this is a sample textarea, size is set through rows and cols attributes </textarea>
</div>
<div>
<label> Secret code </label>
<input type="password" name="code"/>
</div>
<hr>
<!-- Checkbox example -->
<div>
<p> Your Favorite Frameworks </p>
<!-- name for all the checkboxes is same, so values of all checkboxes can be obtained by JS as singleunit -->
<label> JSF
<input name="favlangChkbox" type="checkbox" value="JSF"/>
</label>
<label> Spring MVC
<input name="favlangChkbox" type="checkbox" value="springmvc"/>
</label>
<label> Struts MVC
<input name="favlangChkbox" type="checkbox" value="strutsmvc"/>
</label>
<div>
<hr>
<!-- radio button example -->
<!-- note the name is same, as only one is allowed to be selected -->
<div>
<strong> Which IDE do you use for development</strong></br>
<label> Eclipse
<input name="favIDE" type="radio" value="eclipse" checked="checked"/>
</label></br>
<label> Netbeans
<input name="favIDE" type="radio" value="netbeans"/>
</label></br>
<label> Intellij IDEA
<input name="favIDE" type="radio" value="intellij" />
</label>
</div>
<hr>
<p>
<label> Topic you want to focus on </br>
<select name="topic"
<option selected="selected"> java </option>
<option > design patterns </option>
<option > sql </option>
<option> mvc frameworks </option>
</select>
</label>
</p>
<!-- submit and clear buttons -->
<input type="submit" value="Submit"/>
<input type="reset"/>
</form>
</body>
</html>
Raw
html-table-example
<!-- run it in .http://htmledit.squarefree.com/ -->
<html>
<body>
<table border="1" width="40%" summary="this table provides the list of fruits">
<!-- Caption tag summarizes the table -->
<caption> <strong> Customer List </strong> </caption>
<thead>
<tr>
<th>Customer </th>
<th>Order Value</th>
</tr>
</thead>
<tfoot>
<tr>
<!-- th auotmatically makes the text strong and bold -->
<th> Total </th>
<th> 60 </th>
</tr>
</tfoot>
<tbody>
<tr align="middle">
<td> john</td>
<td> 25 </td>
</tr>
<tr>
<td> rick </td>
<td> 35 </td>
</tr>
</tbody>
</table>
<!-- complex html table -->
<table border="1" width="40%" summary="this table provides the list of fruits">
<!-- Caption tag summarizes the table -->
<caption> <strong> Customer List </strong> </caption>
<thead>
<tr>
<th rowspan="2">Customer Logo</th>
<th colspan="4"><h1>Customer Details</h1> <p> Updated on Se 2012 </p> </th>
</tr>
<tr>
<th>Order Value</th>
<th>since</th>
<th>address</th>
<th>rating</th>
</tr>
</thead>
<tfoot>
<tr>
<!-- th auotmatically makes the text strong and bold -->
<th> Total </th>
<th> 60 </th>
</tr>
</tfoot>
<tbody>
<tr align="middle">
<td> john</td>
<td> 25 </td>
<th>12/21/2012 </th>
<th> atlanta, ga</th>
<th> *** </th>
</tr>
<tr>
<td> rick </td>
<td> 35 </td>
<th>12/21/2012 </th>
<th> atlanta, ga</th>
<th> *** </th>
</tr>
</tbody>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment