HTML Tags and Attribute-Web Development
Example-1-Formating Tags
<!DOCTYPE html>
<html>
<head>
<title>Web site</title>
</head>
<body>
<tt>this is demo</tt></br>
<code>used to define source code</code></br>
<address>IT Department<br>
GEC Bhavnagar
</address>
<cite>tender</cite>
<em>Web Development</em>
<br>
<h3>Resume</h3><hr noshade width="70%" size="10">
<blockquote>html tag</blockquote>
<span>format inline </span>
</body>
</html>
Example-2-Table Tags
<!DOCTYPE html>
<html>
<head>
<title>HTML-Table</title>
</head>
<body>
<table border="5" bgcolor="yellow" height="100" width="300" align="center" bordercolor="blue">
<caption>User Information</caption>
<tr>
<th>c1</th>
<th>c2</th>
<th>c3</th>
</tr>
<tr>
<td rowspan="2">r1c1</td>
<td>r1c2</td>
<td>r1c3</td>
</tr>
<tr>
<td>r2c2</td>
<td>r2c3</td>
</tr>
<tr>
<td colspan="3">r3c1</td>
</tr>
</table>
</body>
</html>
Example-3-List Tags
<!DOCTYPE html>
<html>
<head>
<title>HTML-List Tags</title>
</head>
<body>
<ul type="disc">
<li>Window 98</li>
<li>Window 2000</li>
<li>Window xp</li>
<li>Window vista</li>
<li>Window professional</li>
</ul>
<ul type="square">
<li>Window 98</li>
<li>Window 2000</li>
<li>Window xp</li>
<li>Window vista</li>
<li>Window professional</li>
</ul>
<ul type="circle">
<li>Window 98</li>
<li>Window 2000</li>
<li>Window xp</li>
<li>Window vista</li>
<li>Window professional</li>
</ul>
<ol type="A">
<li>Window 98</li>
<li>Window 2000</li>
<li>Window xp</li>
<li>Window vista</li>
<li>Window professional</li>
</ol>
<ol type="1">
<li>Window 98</li>
<li>Window 2000</li>
<li>Window xp</li>
<li>Window vista</li>
<li>Window professional</li>
</ol>
<dl>
<dt>Information Technology</dt>
<dd>Web Development</dd>
</dl>
</body>
</html>
Example-4-HTML Links, Images and formatting Tags
<!DOCTYPE html>
<html>
<head>
<title>Web site</title>
</head>
<body>
<h1>This is a first header</h1>
<h2>This is a Second header</h1>
<h3>This is a Third header</h1>
<h4>This is a 4 header</h1>
<h5>This is a 5 header</h1>
<h6>This is a 6 header</h1>
<p>this tag is should be put at end of every paragarph also know as </p>
dsdsd
fd<br>
gf<br>
gfg<br>
fg
<pre>this is tag used to preserve white space and lines in the text</pre>
<b>this is a bold text</b><br>
<i>this is in italics</i><br>
<strike>this is in strike</strike><br>
<strong>this is strongly emphassized text</strong><br>
<center>this is will appear at the center </center><br>
<div align="left">this line is aligned at left</div>
<div align="right">this line is aligned at right</div>
<div align="center">this line is aligned at center</div>
<br><br><br>
<font face="arial" size="15" color="blue">
india is great country in the world</br>
</font>
<br><br><br><br><br><br>
<h3><a href="b1.html" target="_top">click here to get this file</a></h3>
<br>
<font size="40">
<font color="red">R</font>
<font color="orange">A</font>
<font color="yellow">I</font>
<font color="green">N</font>
<font color="blue">B</font>
<font color="lighblue">O</font>
<font color="purple">U</font></font>
<br><br><br>
<a href="img/sv.jpg" border="80" target="_blank"><img src="img/sv.jpg" width="200" height="200" alt="image-1"></img></a>
<br><br><br><br>
<h2 id="img1"></h2>
<a href="#img1">click here to get image file</a>
<br><br><br><br>
</body>
</html>
Example-5-HTML Tables
<!DOCTYPE html>
<html>
<head>
<title>Web site</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<title>Web site</title>
</head>
<body>
<table border="5" cellspacing="5" cellpadding="5" bgcolor="yellow" height="600%" width="100%" align="center" bordercolor="blue">
<caption>User Information</caption>
<thead>
<tr bgcolor="red">
<td colspan="3">HEADER</td>
</tr>
</thead>
<tfoot>
<tr>
<td bgcolor="blue" colspan="3">footer</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>cELL-1</td>
<td>cELL-2</td>
<td>cELL-3</td>
</tr>
</tbody>
</table>
</body>
</html>
Example-6-Foms Tags
<!DOCTYPE html>
<html>
<head>
<title>HTML Form Tag-User Information</title>
</head>
<body>
<br>
<label>First Name</label>
<input type="text" value="firstname" name="fname" id="fname" size="30" maxlength="30" minlength="3" placeholder="Enter your First Name" required>
</br>
<label>Address</label>
<textarea rows="5" cols="50" name="decription">Enter your description here</textarea>
</br>
<input type="checkbox" name="html" checked value="html"><label>HTML</label><br>
<input type="checkbox" name="html" value="html"><label>CSS</label><br>
<input type="checkbox" name="html" value="html"><label>JS</label><br>
<input type="radio" name="gender" checked value="Male"><label>Male</label><br>
<input type="radio" name="gender" value="Female"><label>Female</label><br>
<select size="0" name="branch">
<option selected disabled value="">select your department</option>
<option value="IT">Information Technology</option>
<option value="CE">CE</option>
<option value="EC">EC</option>
</select>
<br>
<input type="file" name="upload" accept="images/*">
<br>
<input type="submit" name="submit" value="Go">
<input type="reset" name="reset">
<input type="image" src="img/IT.jpg">
</body>
</html>
Example 7:HTML Layout-Table Tags
<!DOCTYPE html>
<html>
<head>
<title>HTML Layout</title>
</head>
<body>
<table border="5" cellspacing="3" cellpadding="3" bgcolor="" height="300" width="600" align="center" bordercolor="">
<caption>Example-Table</caption>
<tr>
<td align="center"colspan="3">Header-A</td>
</tr>
<tr>
<td align="center" rowspan="2">B</td>
<td align="center" colspan="2">C</td>
</tr>
<tr>
<td align="center">D</td>
<td align="center">E</td>
</tr>
<tr>
<td align="center" colspan="3">Footer-F</td>
</tr>
</table>
</body>
</html>
Example 8:HTML Audio/Video Tags
<!DOCTYPE html>
<html>
<head>
<title>HTML-Audio-Video Tags</title>
</head>
<body>
<audio src="audio/IT1.mp3" autoplay controls loop>
<p>best music</p>
</audio>
<audio controls="controls">
<source src="audio/IT1.mp3" type="audio/mpeg">
// Your browser does not support the HTML5 Audio element.
</audio>
<a href="audio/it1.mp3">Track 1</a><a href="audio/it2.mp3">Track 2</a>
<object data="audio/it1.mp3"></object>
<object data="audio/it2.mp3"></object>
<embed src="audio/it1.mp3">
<embed src="audio/it2.mp3">
<video src="video/trailer.mp4" poster="img/bahu.jpg" autoplay height="300" width="600" controls></video>
</body>
</html>
Example:9 HTML Frame Tags
File-1:ce.html
<!DOCTYPE html>
<html>
<head>
<title>Department Information</title>
</head>
<body>
Computer Engineering (CpE) is a branch of engineering that integrates several fields of computer science and electronic engineering required to develop computer hardware and software.
</body>
</html>
File-2:content.html
<!DOCTYPE html>
<html>
<head>
<title>Department Information</title>
</head>
<body>
<h2>Welcome to Information Technology</h2>
</body>
</html>
File-3:footer.html
<!DOCTYPE html>
<html>
<head>
<title>Department Information</title>
</head>
<body>
<h2 align="center">Copyright © 2021 - All Rights Reserved -Prof.Bharat Vainsh</h2>
</body>
</html>
File-4:header.html
<!DOCTYPE html>
<html>
<head>
<title>Department Information</title>
</head>
<body>
<h1 align="center">Government Engineering College-Bhavnagar</h1>
</body>
</html>
File-5:it.html
<!DOCTYPE html>
<html>
<head>
<title>Department Information</title>
</head>
<body>
<p>
Information technology (IT) is the use of computers to store, retrieve, transmit, and manipulate data[1] or information. IT is considered to be a subset of information and communications technology (ICT). An information technology system (IT system) is generally an information system, a communications system or, more specifically speaking, a computer system – including all hardware, software and peripheral equipment – operated by a limited group of users.</p>
</body>
</html>
File-6 main.html
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
</head>
<frameset border="2" rows = "70,*,50">
<frame src = "header.html" scrolling="No" noresize="noresize" frameborder="0" name = "header_page" />
<frameset cols = "200,*">
<frame src = "menu.html" name = "menu_page" />
<frame src = "content.html" name = "content_page" />
</frameset>
<frame src = "footer.html" scrolling="No" name = "footer_page" /></frameset>
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>
File 7-menu.html
<!DOCTYPE html>
<html>
<head>
<title>HTML-Menubar</title>
</head>
<body>
<p>
<a href="main.html" target = "_parent">Home</a></br></br>
<a href="it.html" target = "content_page">Information Technology</a></br></br>
<a href="ce.html" target = "content_page">Computer Engineering</a>
</p>
</body>
</html>
Example:10 HTML Text Formating Tags
<html>
<head>
<title> Hello HTML </title>
</head>
<body>
<b><u>hello world<b></b></u><br>
<strong><strike>hello</strike>hello world</strong></b>br>
<sub><del>deleted this items</del>this is example<sub></sub>br>
</br></br>
<hr>
<p>This is a paragraph
html file</br>
website </p>
<pre>This text is preformatted
This text is preformatted</pre>
<div style="background-color: lightblue">This is first div</div>
<h2>Hello HTML</h2>
<a href="#">Click on link</a>
<pre>This text is preformatted</pre>
This text is preformatted
<p><big>hello everyone</big></p>
<big>this is big fonts</big></sub></br>
<small>this is big fonts</small>
</sub></br>
Html stand for<em>hypertext markup language</em>
it was developed by<strong>tim berners-lee</strong>
MC<sup>2</sup></sub>
Water is H<sub>2</sub>O.
<q>this is first program</q>-anil
<code> x=y+z*w;</code>
<a href="https://www.bharatvainsh.in/" title="welcome to homepage" target="_blank">Click Here</a>
<br>
<p><a href="#section1">link to heading 1</a></p>
<section id="section1">
<h3>(#section1) Section 1</h3>
<p>hello how a r u</p>
</section>
<h1 id="heading1">heading 1</h1>
<p>this is information</p>
<blockquote>
Text quoted from a source.
<img src="img/bahu.jpg" width="100" width="100" alt="bahuabli-2">
</blockquote>
<cite>
This highlights references information.Good for quotes and statements.</br></br></br>
</cite>
<ins>
Shows a sections that has been inserted into the content.</br></br></br>
</ins>
<map name="">
the name of the map between the image and the map itself.</br></br></br>
</map>
</ins>
<address>
Written by xxxxxxx.in<br />
<a href="mailto:sample@example.org">Email us</a><br />
Address: xxxxxxxx<br />
Phone: +12 34 56 78
</address>
</body>
</html>