Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts
Checkbox
Example
<form>
<input type="checkbox" name="option1"
value="Fish">I Like Fish<br>
<input type="checkbox" name="option2" value="Meat">I Like Meat<br>
<input type="checkbox" name="option3" value="Egg">I Like Egg
</form>
Preview
Unordered list
Example
Preview
<ul>
<li>Mother</li>
<li>Father</li>
<li>Sun</li>
<li>Uncle </li>
</ul>
- Mother
- Father
- Sun
- Uncle
HTML Form – Select Button
Example
<form>
<input type="radio" name="civil status" value="marred">marred<br>
<input type="radio" name="civil status" value="unmarred"> unmarred
</form>
<input type="radio" name="civil status" value="marred">marred<br>
<input type="radio" name="civil status" value="unmarred"> unmarred
</form>
HTML Caption Tag
Examples
<table border="1">
<caption>Exam Marks </caption>
<tr>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>Maths</td>
<td>74</td>
</tr>
</table>
Result
<table border="1">
<caption>Exam Marks </caption>
<tr>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>Maths</td>
<td>74</td>
</tr>
</table>
Result
| Subject | Marks |
|---|---|
| Maths | 74 |
HTML Forms – Text
Example
<form>
Name: <input type="text" name="Name"><br>
Address: <input type="text" name="Address">
</form>
HTML Ordered Lists
Example
<ol>
<li>Mother</li>
<li>Father</li>
<li>Sun</li>
<li>Uncle </li>
</ol>
Preview
- Mother
- Father
- Sun
- Uncle
HTML Images
Example 1
<img src="url" >
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXMS5BdS9ROo7xP9EUZl_IljTF0gKqJWMXln705BEdmN0NYa-JBzklsZuTIgkeM20Kzx-Cd_1dLOoFVLP4t4ijridq9LMuBJ6TYsM7ruwaK_LizyE94lbjydz2mDtmE06Zp8bfZzwc8Oqm/s768/Untitled-1.png"
>
Preview 1
Example 2
<img src="url" >
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaardYP4QtCHLhzP4OMcIxjzUfv7NMnGwhmlFQq9KrBFmUH-m5CPWq3jhQ7GuilxxfrAIwQABdbh3N3ozmOguc_2YM0c5lDjtUd-G3MdkCbPAu5zSk9iZO50ezRzF_tHBDtcH3DVCWrHZj/s320/2627291590_b513e12ac3.jpg" >
Preview 2
HTML optgroup Tag
<!DOCTYPE html>
<html>
<body>
<select>
<optgroup
label="Computers">
<option
value="Desktop">Desktop</option>
<option
value="Laptop">Laptop</option>
<option
value="Tab">Tab</option>
</optgroup>
<optgroup
label="Phone">
<option
value="Nokia">Nokia</option>
<option
value="Sony">Sony</option>
<option
value="LG">LG</option>
</optgroup>
<optgroup
label="Electrical">
<option
value="LED TV">LED TV</option>
<option
value="DVD">DVD</option>
<option
value="Home Theater"> Home Theater </option>
</optgroup>
</select>
</body>
</html>
Preview
HTML Font Tag
Example
<html>
<body>
<p><font
size="5" color="red">Online IT Academy </font></p>
<p><font
size="30" color="blue"> Online IT Academy </font></p>
<p><font
face=" Algerian " color="Black"> Online IT Academy</font></p>
</body>
</html>
Preview
Online IT Academy
Online IT Academy
Online IT Academy
HTML Address Tag
<!DOCTYPE html>
<html>
<body>
<address>
Mail to <a href="mailto:it.training12@gmail.com">Ravindu
Kumara</a>.<br>
www.sl-it-help.blogspot.com<br>
Eplitiya<br>
Sri Lanka
</address>
</body>
</html>
Preview :
Mail to Ravindu Kumara.
www.sl-it-help.blogspot.com
Eplitiya
Sri Lanka
HTML Images - Set Height and Width
Example1
Example2
<img src="img url" width="400"
height="132">
Preview 1
Example2
<img src="img url" width="400"
height="400">
Preview 2
Preview 2
HTML iframe Tag
Example
<html>
<body>
<iframe
src="http://sl-it-help.blogspot.com/">
<p>Your
browser does not support iframes.</p>
</iframe>
</body>
</html>
Preview
HTML Button Tags
Example
<html>
<body>
<button type="button" onclick="alert('Thank You')">Like</button>
</body>
</html>
Preview
<html>
<body>
<button type="button" onclick="alert('Thank You')">Like</button>
</body>
</html>
Preview
HTML Link
HTML CODE
Visit Online IT Academy
<a href="Target url">Link
text</a>
Example
<a href="http://sl-it-help.blogspot.com">Visit Online IT Academy</a>
Preview
TABLE WITH CAPTION
Example
<table border="1">
<caption>Exam Result </caption>
<tr>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>English</td>
<td>80</td>
</tr>
<tr>
<td>Moths </td>
<td>60</td>
</tr>
<tr>
<td>Art </td>
<td>50</td>
</tr>
</table>
Preview
| Subject | Marks |
|---|---|
| English | 80 |
| Moths | 60 |
| Art | 50 |
HTML Form – Password
Example
<form>
Enter Your Password: <input type="password" name="pwd">
</form>
Enter Your Password: <input type="password" name="pwd">
</form>
Preview
HTML Lists
Example 1
<ul>
<li>Name</li>
<li>Address</li>
<li>Name</li>
<li>Address</li>
<li>Phone No</li>
</ul>
</ul>
- Name
- Address
- Phone No
Example 2
<ol>
<li>Name</li>
<li>Address</li>
<li>Address</li>
<li>Phone No</li>
</ol>
</ol>
Preview
- Name
- Address
- Phone No
