Scribd
Upload
31 views

HTML Programs

The document contains HTML code snippets demonstrating various HTML tags and elements for text formatting, layout, forms, and more. Some key examples include using header, paragraph, bold, italic, underline, strikethrough, and font size tags for text styling, and using div, form, input, textarea, select, and button tags for page layout and forms.

Uploaded by

Sudhakar Y
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
31 views

HTML Programs

The document contains HTML code snippets demonstrating various HTML tags and elements for text formatting, layout, forms, and more. Some key examples include using header, paragraph, bold, italic, underline, strikethrough, and font size tags for text styling, and using div, form, input, textarea, select, and button tags for page layout and forms.

Uploaded by

Sudhakar Y
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 51

1. <!

DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Hello World!</p>
</body>
</html>

2. <!DOCTYPE html>
<html>
<html>
<head> Document header related tags
</head>
<body>Document body related tags
</body>
</html>

3. <!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>

4. <!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>

5. <!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment
ontime.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>

6. <!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center> </body> </html>

7. <!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on
top</p>
<hr />
<p>This is paragraph two and should be at
bottom</p>
</body>
</html>

8. <!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>
</html>

9. <!DOCTYPE html>
<html>
<head>
<title>Nested Elements Example</title>
</head>
<body>
<h1>This is <i>italic</i> heading</h1>
<p>This is <u>underlined</u> paragraph</p>
</body> </html>

10. <!DOCTYPE html>


<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align = "left">This is left aligned</p>
<p align = "center">This is center
aligned</p>
<p align = "right">This is right
aligned</p>
</body>
</html>

11. <!DOCTYPE html>


<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b>
typeface.</p>
</body>
</html>

12. <!DOCTYPE html>


<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses an
<i>italicized</i> typeface.</p>
</body>
</html>

13. <!DOCTYPE html>


<html>

<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses an
<u>underlined</u> typeface.</p>
</body>
</html>

14. <!DOCTYPE html>


<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a
<strike>strikethrough</strike> typeface.</p>
</body>
</html>

15. <!DOCTYPE html>


<html>
<head>
<title>Monospaced Font Example</title>
</head>
<body>
<p>The following word uses a
<tt>monospaced</tt> typeface.</p>
</body>
</html>

16. <!DOCTYPE html>


<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word uses a
<sup>superscript</sup> typeface.</p>
</body>
</html>
17. <!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a
<sub>subscript</sub> typeface.</p>
</body>
</html>

18. <!DOCTYPE html>


<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del>
<ins>wine</ins></p>
</body>
</html>

19. <!DOCTYPE html>


<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
<p>The following word uses a <big>big</big>
typeface.</p>
</body>
</html>

20. <!DOCTYPE html>


<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>The following word uses a
<small>small</small> typeface.</p>
</body>
</html>

21. <!DOCTYPE html>


<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div id = "menu" align = "middle" >
<a href = "/index.htm">HOME</a> |
<a href =
"/about/contact_us.htm">CONTACT</a> |
<a href = "/about/index.htm">ABOUT</a>
</div>

<div id = "content" align = "left" >

<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>
</html>

21.<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example</title>
</head>
<body>
<p>This is the example of <span style =
"color:green">span tag</span>
and the <span style = "color:red">div
tag</span> alongwith CSS</p>
</body>
</html>

22.<!DOCTYPE html>
<html>
<head>
<title>Emphasized Text Example</title>
</head>
<body>
<p>The following word uses an
<em>emphasized</em> typeface.</p>
</body>
</html>

23.<!DOCTYPE html>
<html>
<head>
<title>Marked Text Example</title>
</head>
<body>
<p>The following word has been
<mark>marked</mark> with yellow</p>
</body>
</html>

24.<!DOCTYPE html>
<html>
<head>
<title>Strong Text Example</title>
</head>
<body>
<p>The following word uses a
<strong>strong</strong> typeface.</p>
</body>
</html>

25.<!DOCTYPE html>
<html>
<head>
<title>Text Abbreviation</title>
</head>
<body>
<p>My best friend's name is <abbr title =
"Abhishek">Abhy</abbr>.</p>
</body>
</html>

26.<!DOCTYPE html>
<html>
<head>
<title>Acronym Example</title>
</head>
<body>
<p>This chapter covers marking up text in
<acronym>XHTML</acronym>.</p>
</body>
</html>

27.<!DOCTYPE html>
<html>
<head>
<title>Text Direction Example</title>
</head>
<body>
<p>This text will go left to right.</p>
<p><bdo dir = "rtl">This text will go
right to left.</bdo></p>
</body>
</html>

28.<!DOCTYPE html>
<html>
<head>
<title>Special Terms Example</title>
</head>
<body>
<p>The following word is a <dfn>special</dfn>
term.</p>
</body>
</html>

29.<!DOCTYPE html>
<html>
<head>
<title>Blockquote Example</title>
</head>
<body>
<p>The following description of XHTML is
taken from the W3C Web site:</p>

<blockquote>XHTML 1.0 is the W3C's first


Recommendation for XHTML,following on
from earlier work on HTML 4.01, HTML
4.0, HTML 3.2 and HTML 2.0.</blockquote>
</body>
</html>

30.<!DOCTYPE html>
<html>
<head>
<title>Double Quote Example</title>
</head>
<body>
<p>Amit is in Spain, <q>I think I am
wrong</q>.</p>
</body>
</html>

31.<!DOCTYPE html>
<html>
<head>
<title>Citations Example</title>
</head>
<body>
<p>This HTML tutorial is derived from
<cite>W3 Standard for HTML</cite>.</p>
</body>

</html>

32.<!DOCTYPE html>
<html>
<head>
<title>Computer Code Example</title>
</head>
<body>
<p>Regular text. <code>This is
code.</code> Regular text.</p>
</body>

</html>

33.<!DOCTYPE html>
<html>
<head>
<title>Variable Text Example</title>
</head>
<body>
<p><code>document.write("<var>user-
name</var>")</code></p>
</body>
</html>

34.<!DOCTYPE html>
<html>
<head>
<title>Address Example</title>
</head>
<body>
<address>388A, Road No 22, Jubilee Hills -
Hyderabad</address>
</body>
</html>

35.<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form>
First name: <input type = "text" name =
"first_name" />
<br>
Last name: <input type = "text" name =
"last_name" />
</form>
</body>
</html>

36.<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
User ID : <input type = "text" name =
"user_id" />
<br>
Password: <input type = "password" name
= "password" />
</form>
</body>
</html>

37.<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
Description : <br />
<textarea rows = "5" cols = "50" name =
"description">
Enter description here...
</textarea>
</form>
</body>
</html>

38.<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type = "checkbox" name = "maths"
value = "on"> Maths
<input type = "checkbox" name =
"physics" value = "on"> Physics
</form>
</body>
</html>
39.<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name = "dropdown">
<option value = "Maths"
selected>Maths</option>
<option value =
"Physics">Physics</option>
</select>
</form>
</body>
</html>

40.<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "file" name = "fileupload" accept
= "image/*" />
</form>
</body>
</html>

41.<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "submit" name = "submit"
value = "Submit" />
<input type = "reset" name = "reset"
value = "Reset" />
<input type = "button" name = "ok"
value = "OK" />
<input type = "image" name =
"imagebutton" src = "/html/images/logo.png" />
</form>
</body>
</html>

42.<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<p>This is page 10</p>
<input type = "hidden" name =
"pagename" value = "10" />
<input type = "submit" name = "submit"
value = "Submit" />
<input type = "reset" name = "reset"
value = "Reset" />
</form>
</body>
</html>

43.<!DOCTYPE html>
<Html>
<head>
<title>
Registration Page
</title>
</head>
<body bgcolor="Lightskyblue">
<br>
<br>
<form>

<label> Firstname </label>


<input type="text" name="firstname" size="15"/>
<br> <br>
<label> Middlename: </label>
<input type="text" name="middlename" size="15"/>
<br> <br>
<label> Lastname: </label>
<input type="text" name="lastname" size="15"/>
<br> <br>

<label>
Course :
</label>
<select>
<option value="Course">Course</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="B.Tech">B.Tech</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="M.Tech">M.Tech</option>
</select>

<br>
<br>
<label>
Gender :
</label><br>
<input type="radio" name="male"/> Male <br>
<input type="radio" name="female"/> Female <br>
<input type="radio" name="other"/> Other
<br>
<br>
<label>
Phone :
</label>
<input type="text" name="country code"
value="+91" size="2"/>
<input type="text" name="phone" size="10"/> <br>
<br>
Address
<br>
<textarea cols="80" rows="5" value="address">
</textarea>
<br> <br>
Email:
<input type="email" id="email" name="email"/>
<br>
<br> <br>
Password:
<input type="Password" id="pass" name="pass">
<br>
<br> <br>
Re-type password:
<input type="Password" id="repass"
name="repass"> <br> <br>
<input type="button" value="Submit"/>
</form>
</body>
</html>

44.<!DOCTYPE html>
<html>
<head>
<title>
</title></head>
<body>
<form>
<center> <h1> Student Registeration Form</h1>
</center> <label> Firstname </label>
<input type="text" name="firstname" placeholder=
"Firstname" size="15" required />
<label> Middlename: </label>
<input type="text" name="middlename"
placeholder="Middlename" size="15" required />
<label> Lastname: </label>
<input type="text" name="lastname"
placeholder="Lastname" size="15"required />
<label>
Course :
</label>

<select>
<option value="Course">Course</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="B.Tech">B.Tech</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="M.Tech">M.Tech</option>
</select> <label>
Gender :
</label><br>
<input type="radio" value="Male" name="gender"
checked > Male
<input type="radio" value="Female"
name="gender"> Female
<input type="radio" value="Other" name="gender">
Other
<label>
Phone :
</label>
<input type="text" name="country code"
placeholder="Country Code" value="+91"
size="2"/>
<input type="text" name="phone"
placeholder="phone no." size="10"/ required>
Current Address :
<textarea cols="80" rows="5"
placeholder="Current Address" value="address"
required>
</textarea>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email"
name="email" required>

<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter
Password" name="psw" required>

<label for="psw-repeat"><b>Re-type
Password</b></label>
<input type="password" placeholder="Retype
Password" name="psw-repeat" required>
<button type="submit"
class="registerbtn">Register</button>
</form>
</body>
</html>

45.<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt =
"Test Image" />
</body>
</html>
46.<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt =
"Test Image" />
</body>
</html>

47.<!DOCTYPE html>
<html>
<head>
<title>Set Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
<img src = "/html/images/test.png" alt =
"Test Image" width = "150" height = "100"/>
</body>
</html>
48.<!DOCTYPE html>
<html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<img src = "/html/images/test.png" alt =
"Test Image" border = "3"/>
</body>
</html>

49.DOCTYPE html>
<html>

<head>
<title>Set Image Alignment</title>
</head>
<body>
<p>Setting image Alignment</p>
<img src = "/html/images/test.png" alt =
"Test Image" border = "3" align = "right"/>
</body>
</html>
50.<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>

51.<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>

52.<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>

53.<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>

54.<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green"
background = "/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell
</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
55.<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green"
bgcolor = "yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>

56.<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border = "1" width = "400" height =
"150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
57.<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border = "1" width = "100%">
<caption>This is the caption</caption>

<tr>
<td>row 1, column 1</td><td>row 1,
columnn 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2,
columnn 2</td>
</tr>
</table>
</body>
</html>

58.<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
</head>
<tr>
<td colspan = "4">This is the
head of the table</td>
</tr>
</head>
<foot>
<tr>
<td colspan = "4">This is the
foot of the table</td>
</tr>
</foot>
<body>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</body>
</table>
</body>
</html>

59.<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>

<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>

60.<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body> </html>

61.<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "disc">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
62.<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "circle">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>

63.<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

64.<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "1">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

65.<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "I">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

66.<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "i">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

67.<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "A">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

68.<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "a">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

69.<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "i" start = "4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
70.<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>

<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup
Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer
Protocol</dd>
</dl>
</body>
</html>

71.<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "https://www.tutorialspoint.com"
target = "_self">Tutorials Point</a>
</body>
</html>

72.<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href =
"https://www.tutorialspoint.com/">
</head>
<body>
<p>Click any of the following links</p>
<a href = "/html/index.htm" target =
"_blank">Opens in New</a> |
<a href = "/html/index.htm" target =
"_self">Opens in Self</a> |
<a href = "/html/index.htm" target =
"_parent">Opens in Parent</a> |
<a href = "/html/index.htm" target =
"_top">Opens in Body</a>
</body>
</html>

73.<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href =
"https://www.tutorialspoint.com/">
</head>
<body>
<p>Click following link</p>
<a href = "/html/index.htm" target =
"_blank">HTML Tutorial</a>
</body>
</html>

74.<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href =
"https://www.tutorialspoint.com/">
</head>
<body alink = "#54A250" link = "#040404" vlink
= "#F40633">
<p>Click following link</p>
<a href = "/html/index.htm" target =
"_blank" >HTML Tutorial</a>
</body>
</html>

75.<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<a href =
"https://www.tutorialspoint.com/page.pdf">Downlo
ad PDF File</a>
</body>
</html>

76.<!DOCTYPE html>
<html>
<head>
<title>Image Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "https://www.tutorialspoint.com"
target = "_self">
<img src = "/images/logo.png" alt =
"Tutorials Point" border = "0"/>
</a>
</body> </html>

77.<!DOCTYPE html>
<html>
<head>
<title>HTML div Tag</title>
</head>
<body>
<!-- First group of tags -->
<div style = "color:red">
<h4>This is first group</h4>
<p>Following is a list of
vegetables</p>

<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</div>
<!-- Second group of tags -->
<div style = "color:green">
<h4>This is second group</h4>
<p>Following is a list of fruits</p>

<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Strawberry</li>
</ul>
</div>
</body>
</html>

78.<!DOCTYPE html>
<html>
<head>
<title>HTML span Tag</title>
</head>
<body>
<p>This is <span style =
"color:red">red</span> and this is
<span style =
"color:green">green</span></p>
</body>
</html>

79.<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by Name</title>
</head>
<body text = "blue" bgcolor = "green">
<p>Use different color names for for body
and table and see the result.</p>

<table bgcolor = "black">


<tr>
<td>
<font color = "white">This text
will appear white on black background.</font>
</td>
</tr>
</table>
</body>
</html>

80.<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by Hex</title>
</head>

<body text = "#0000FF" bgcolor = "#00FF00">


<p>Use different color hexa for for body
and table and see the result.</p>

<table bgcolor = "#000000">


<tr>
<td>
<font color = "#FFFFFF">This text
will appear white on black background.</font>
</td>
</tr>
</table>
</body>
</html>

81.<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by RGB code</title>
</head>
<body text = "rgb(0,0,255)" bgcolor =
"rgb(0,255,0)">
<p>Use different color code for for body
and table and see the result.</p>

<table bgcolor = "rgb(0,0,0)">


<tr>
<td>
<font color =
"rgb(255,255,255)">This text will appear white
on black background.</font>
</td>
</tr>
</table>
</body>
</html>

82<!DOCTYPE html>
<html>
<head>
<title>Setting Font Size</title>
</head>
<body>
<font size = "1">Font size = "1"</font><br
/>
<font size = "2">Font size = "2"</font><br
/>
<font size = "3">Font size = "3"</font><br
/>
<font size = "4">Font size = "4"</font><br
/>
<font size = "5">Font size = "5"</font><br
/>
<font size = "6">Font size = "6"</font><br
/>
<font size = "7">Font size = "7"</font>
</body>
</html>

83.<!DOCTYPE html>
<html>
<head>
<title>Relative Font Size</title>
</head>
<body>
<font size = "-1">Font size = "-1"</font><br />
<font size = "+1">Font size =
"+1"</font><br />
<font size = "+2">Font size =
"+2"</font><br />
<font size = "+3">Font size =
"+3"</font><br />
<font size = "+4">Font size = "+4"</font>
</body>
</html>

84.<!DOCTYPE html>
<html>
<head>
<title>Font Face</title>
</head>
<body>
<font face = "Times New Roman" size =
"5">Times New Roman</font><br />
<font face = "Verdana" size =
"5">Verdana</font><br />
<font face = "Comic sans MS" size ="
5">Comic Sans MS</font><br />
<font face = "WildWest" size =
"5">WildWest</font><br />
<font face = "Bedrock" size =
"5">Bedrock</font><br />
</body>
</html>

85.<!DOCTYPE html>
<html>
<head>
<title>Setting Font Color</title>
</head>
<body>
<font color = "#FF00FF">This text is in
pink</font><br />
<font color = "red">This text is
red</font>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee>This is basic example of
marquee</marquee>
</body>
</html>

86.<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee width = "50%">This example will
take only 50% width</marquee>
</body>
</html>

87.<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee direction = "right">This text
will scroll from left to right</marquee>
</body>
</html>

88.<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee direction = "up">This text will
scroll from bottom to up</marquee>
</body>
</html>

You might also like